UNPKG

@lyra/components

Version:
143 lines (121 loc) 3.2 kB
@import 'part:@lyra/base/theme/variables-style'; :root { --checkbox-label-height: 1em; --checkbox-off-color: var(--brand-primary); --checkbox-color: var(--brand-primary); --checkbox-button-size: 1em; --checkbox-top-offset: 0; --checkbox-focus-color: color(var(--black) a(10%)); --checkbox-label-font-size: 1em; --checkbox-padding: 0.25em; } .root { user-select: none; position: relative; z-index: 1; display: inline-block; box-sizing: border-box; height: var(--checkbox-label-height); margin: 0; padding: 0; padding-left: calc(var(--checkbox-button-size) + var(--checkbox-padding)); width: auto; } .isChecked { composes: root; } .unChecked { composes: root; } .indeterminate { composes: root; } .isDisabled { opacity: 0.5; pointer-events: none; } .isEnabled { opacity: 1; } .input { line-height: var(--checkbox-label-height); /* Hide input element, while still making it respond to focus. */ position: absolute; width: 0; height: 0; margin: 0; padding: 0; opacity: 0; appearance: none; border: none; } .boxOutline { position: absolute; top: var(--checkbox-top-offset); left: 0; display: inline-block; box-sizing: border-box; width: var(--checkbox-button-size); height: var(--checkbox-button-size); margin: 0; cursor: default; overflow: hidden; border: calc(var(--checkbox-button-size) * 0.1) solid var(--checkbox-off-color); border-radius: 10%; z-index: 2; background-color: var(--white); @nest .isChecked & { border: 2px solid var(--checkbox-color); } } .focusHelper { position: absolute; top: calc(var(--checkbox-button-size) * -0.25); left: calc(var(--checkbox-button-size) * -0.25); display: inline-block; box-sizing: border-box; width: calc(var(--checkbox-button-size) * 1.5); height: calc(var(--checkbox-button-size) * 1.5); border-radius: 10%; background-color: transparent; transform: scale(0.5); transition: background-color 0.1s linear, transform 0.15s linear; @nest .hasFocus & { background-color: var(--focus-color); transform: scale(1); } @nest .root:active & { background-color: var(--focus-color); transform: scale(1); } } .tickOutline { position: absolute; top: calc(var(--checkbox-button-size) * 0.12); left: calc(var(--checkbox-button-size) * 0.12); height: calc(var(--checkbox-button-size) * 0.5); width: calc(var(--checkbox-button-size) * 0.5); /* mask: url("#{$checkbox-image-path}/tick-mask.svg?embed"); */ background: transparent; /* @include material-animation-default(0.28s); */ transition-property: background; @nest .isChecked & { /* background: $checkbox-color url("#{$checkbox-image-path}/tick.svg?embed"); */ background-color: var(--checkbox-color); } @nest .indeterminate & { top: calc(var(--checkbox-button-size) * 0.29); height: calc(var(--checkbox-button-size) * 0.2); background-color: var(--checkbox-color); } } .label { cursor: default; font-size: var(--checkbox-label-font-size); line-height: var(--checkbox-label-height); margin: 0; } .description { composes: description from 'part:@lyra/base/theme/typography/text-blocks-style'; }