mirror of
https://github.com/pebble-dev/clay.git
synced 2026-08-31 14:26:45 -04:00
62 lines
1.1 KiB
SCSS
62 lines
1.1 KiB
SCSS
@import "bourbon";
|
|
@import "clay";
|
|
|
|
.component-checkbox {
|
|
|
|
display: block;
|
|
|
|
> .label {
|
|
display: block;
|
|
padding-bottom: $item-spacing-v / 2;
|
|
}
|
|
|
|
.checkbox-group {
|
|
|
|
label {
|
|
padding: $item-spacing-v / 2 0;
|
|
}
|
|
|
|
.label {
|
|
font-size: 0.9em;
|
|
padding: 0 $item-spacing-h / 2;
|
|
}
|
|
|
|
input {
|
|
opacity: 0;
|
|
position: absolute;
|
|
}
|
|
|
|
i {
|
|
display: block;
|
|
position: relative;
|
|
border-radius: $border-radius;
|
|
width: $base-height;
|
|
height: $base-height;
|
|
border: rem(2px) solid $color-gray-7;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
input:checked + i {
|
|
border-color: $color-orange;
|
|
background: $color-orange;
|
|
|
|
&:after {
|
|
content: '';
|
|
box-sizing: border-box;
|
|
transform: rotate(45deg);
|
|
position: absolute;
|
|
left: 0.35rem;
|
|
top: -0.05rem;
|
|
display: block;
|
|
width: 0.5rem;
|
|
height: 1rem;
|
|
border: 0 solid $color-white;
|
|
border-right-width: rem(2px);
|
|
border-bottom-width: rem(2px);
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|