diff --git a/source/css/molecules/form-field.pcss b/source/css/molecules/form-field.pcss index 3f7d6f8aa64bf83b0f0e650be293b9e8d511fd00..22f2aaf6e54d26109059473918d1453ca5b299ec 100644 --- a/source/css/molecules/form-field.pcss +++ b/source/css/molecules/form-field.pcss @@ -17,14 +17,25 @@ box-shadow: inset 0 2px 6px 0 rgba(0,0,0,.05); } - &, - &--row-items { + /* Allow bypass defualt positioning */ + &:not(.form-field__wrapper--freeform) { .form-field__control + .form-field__control { @apply ml-4; } } - &--col-items { +} + +@responsive { + .form-field__wrapper--row-items { + @apply flex-row; + + .form-field__control + .form-field__control { + @apply ml-4 mt-0; + } + } + + .form-field__wrapper--col-items { @apply flex-col; .form-field__control + .form-field__control { diff --git a/tailwind.config.js b/tailwind.config.js index a53158eaf9c836a53fb2b1abae65894c71ff672d..86fbba2b87c59ab9748f14f71b3b05bd3d10e826 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -36,6 +36,8 @@ module.exports = { /^((sm|md|lg|xl)\:)?head-*/, /^((sm|md|lg|xl)\:)?clearfix/, /opacity-*/, + /^truncate/, + /^break-*/, /^duration-*/, /^max-w-*/, /ico--*/,