public-ui-kolibri

@use '../../mixins/to-rem' as *; @use '../mixins/alert-wc' as *; @use '../mixins/typography' as *; @use '../mixins/required' as *; @layer kol-theme-component { @include kol-alert-theme; /** * normalizes the layout of form elements. */ .kol-form-field { margin: 0; padding: 0; flex-wrap: wrap; border: 0; } /** * order the layout of form elements. */ .kol-form-field { &__label { order: 1; } &__input { order: 2; } &__msg { order: 3; } &__hint { order: 4; } } .kol-form-field { padding: 0 to-rem(14) to-rem(10) to-rem(14); gap: to-rem(8); flex-wrap: wrap; align-items: flex-start; border: 0; &__label { color: var(--color-grey); font-weight: var(--font-weight-bold); &-text::after { @include kol-required-info; } } &__hint { @include kol-typography-hint; } &__input { gap: to-rem(8); } &__msg { @include kol-alert-wc; &.kol-alert--type-error { @include kol-alert-wc(--color-red); } } } .kol-field-control { gap: to-rem(8); } .kol-input { outline: 2px solid var(--color-grey-75); outline-offset: 2px; &:before { display: none; } &:checked { border-color: var(--color-blue); border-width: 7px; } &:focus { outline-color: var(--color-blue); } &:not(:disabled) { &:hover { border-color: var(--color-blue); } } &#{&}--error { border: 2px solid var(--color-red); &:before { display: none; } &:checked { border-color: var(--color-red); border-width: 7px; } &:not(:disabled) { &:hover { border-color: var(--color-red-1xx); } } } } // fieldset { // } // fieldset .kol-alert { // order: 1; // } // fieldset .hint { // order: 4; // @include kol-typography-hint; // } // fieldset .kol-alert { // order: 3; // } // fieldset .kol-input { // display: grid; // order: 2; // } // fieldset .kol-input .hint { // order: 3; // @include kol-typography-hint; // } // .radio-input-wrapper { // display: flex; // align-items: center; // display: flex; // flex-direction: row; // margin: 0; // min-height: var(--a11y-min-size); // position: relative; // } // .radio-label { // padding-left: to-rem(8); // } // input[type='radio'] { // outline: 2px solid var(--color-grey-75); // outline-offset: 2px; // } // input[type='radio']:before { // display: none; // } // input[type='radio']:checked { // border-color: var(--color-blue); // border-width: 7px; // } // input[type='radio']:focus { // outline-color: var(--color-blue); // } // input[type='radio']:not(:disabled):hover { // border-color: var(--color-blue); // } // label, // legend { // color: var(--color-grey); // } // legend { // font-weight: var(--font-weight-bold); // } // .error input[type='radio'] { // border: 2px solid var(--color-red); // } // .error input[type='radio']:before { // display: none; // } // .error input[type='radio']:checked { // border-color: var(--color-red); // border-width: 7px; // } // .error input[type='radio']:not(:disabled):hover { // border-color: var(--color-red-1xx); // } // .kol-alert { // @include kol-alert-wc(--color-red); // order: 1; // width: 100%; // } // .hint { // font-size: to-rem(14.4); // order: 4; // } }