@lyra/components
Version:
Basic UX components
143 lines (121 loc) • 3.2 kB
CSS
@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';
}