public-ui-kolibri

@use '../mixins/to-rem' as *; @use '../mixins/focus-outline' as *; @use '../mixins/alert-wc' as *; @use '../mixins/typography' as *; @use '../@shared/input-core' as *; @use '../mixins/field-control' as *; @layer kol-theme-component { :host { --theme-visibility-delay: 0.5s; } .kol-form-field { $root: &; &--disabled { #{$root}__input { outline: none; } } } @include kol-field-control-theme; .kol-field-control { $root: &; &--label-align-left:not(.kol-input-checkbox__field-control--variant-button) &__label { padding-right: to-rem(6.4); } &--label-align-right:not(.kol-input-checkbox__field-control--variant-button) &__label { padding-left: to-rem(6.4); } } .kol-checkbox { .kol-input { @include kol-typography-body; background-color: white; border-color: var(--color-subtle); border-style: solid; border-radius: var(--border-radius); width: 100%; margin: 0; border-width: 2px; order: 1; appearance: none; transition: 0.5s; &:checked, &:indeterminate { background-color: var(--color-primary); border-color: var(--color-primary); } &:focus { @include focus-outline; } &:focus:hover { box-shadow: none; } &:active { box-shadow: none; } &:not(:disabled):hover { box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24); border-color: var(--color-primary); } } &.kol-checkbox--disabled { opacity: 0.5; } } .kol-checkbox--variant-default { width: initial; min-width: initial; .kol-input { border-radius: var(--border-radius); width: calc(6 * to-rem(4)); min-width: calc(6 * to-rem(4)); height: calc(6 * to-rem(4)); } .kol-icon { color: var(--color-light); } } .kol-checkbox--variant-switch { .kol-icon { left: to-rem(2); width: 1.25em; height: 1.25em; } .kol-input { background-color: var(--color-subtle); /* Visible with forced colors */ outline: transparent solid to-rem(1); border-radius: 1.25em; display: block; position: relative; width: 3.5em; min-width: 3.5em; height: 1.5em; border-width: 0; &:focus { @include switch-outline; border-radius: 1.25em; } &:before { background-color: white; border-radius: 1.25em; position: absolute; top: calc(0.25em - to-rem(2)); left: calc(0.25em - to-rem(2)); width: 1.25em; height: 1.25em; } &:checked { background-color: var(--color-primary); } &:checked::before { transform: translateX(2em); } &:indeterminate::before { transform: translateX(1em); } } &.kol-checkbox--checked .kol-icon { transform: translate(2em, -50%); } &.kol-checkbox--indeterminate .kol-icon { transform: translate(1em, -50%); } } .kol-input-checkbox__field-control { $root: &; &--variant-button { .kol-field-control { &__input, &__label { color: var(--color-primary); background-color: var(--color-light); border-color: var(--color-primary); } &__input { border-style: solid none solid solid; border-radius: var(--border-radius) 0 0 var(--border-radius); height: 100%; border-width: 1px 0 1px 1px; } &__label { border-style: solid solid solid none; border-radius: 0 var(--border-radius) var(--border-radius) 0; display: flex; padding-right: to-rem(16); border-width: 1px 1px 1px 0; align-self: stretch; justify-self: stretch; &-text { margin: auto auto; font-weight: 700; } } } &.kol-input-checkbox__field-control { &--indeterminate { & .kol-field-control { &__input, &__label { color: var(--color-primary); background-color: var(--color-mute); border-color: var(--color-primary); } } } &--checked { & .kol-field-control { &__input, &__label { color: var(--color-light); background-color: var(--color-primary); border-color: var(--color-primary); } } } } &:is(:active, :hover):not(.kol-field-control--disabled) { .kol-field-control { &__input, &__label { color: var(--color-light); background-color: var(--color-primary-variant); box-shadow: 0 2px 8px 2px rgb(8, 35, 48, 0.24); border-color: var(--color-primary-variant); } } &:not(.kol-field-control--hide-label) { .kol-field-control { &__label { clip-path: inset(to-rem(-10) to-rem(-10) to-rem(-10) 0); } &__input { clip-path: inset(to-rem(-10) 0 to-rem(-10) to-rem(-10)); } } } } &:focus-within { @include focus-outline; } &.kol-field-control { &--label-align-left { .kol-field-control { &__input { border-style: solid solid solid none; border-radius: 0 var(--border-radius) var(--border-radius) 0; border-width: 1px 1px 1px 0; } &__label { border-style: solid none solid solid; border-radius: var(--border-radius) 0 0 var(--border-radius); border-width: 1px 0 1px 1px; } } &:is(:active, :hover):not(.kol-field-control--disabled) { &:not(.kol-field-control--hide-label) { .kol-field-control { &__label { clip-path: inset(to-rem(-10) 0 to-rem(-10) to-rem(-10)); } &__input { clip-path: inset(to-rem(-10) to-rem(-10) to-rem(-10) 0); } } } } } &--hide-label { .kol-field-control { &__input { border-style: solid; border-radius: var(--border-radius); border-width: 1px; } } } &--disabled { .kol-field-control { &__input { opacity: 0.5; outline: none; } } } } } } }