-
Notifications
You must be signed in to change notification settings - Fork 76
/
calcite-checkbox.scss
66 lines (63 loc) · 1.45 KB
/
calcite-checkbox.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
/**
* CSS Custom Properties
*
* These properties can be overridden using the component's tag as selector.
*
* @prop --calcite-checkbox-size: the width and height of the checkbox
*/
:host([scale="s"]) {
--calcite-checkbox-size: theme("spacing.3");
}
:host([scale="m"]) {
--calcite-checkbox-size: theme("fontSize.n1");
}
:host([scale="l"]) {
--calcite-checkbox-size: theme("spacing.4");
}
:host {
@apply inline-flex
cursor-pointer
relative
select-none;
-webkit-tap-highlight-color: transparent;
.check-svg {
@apply overflow-hidden
block
bg-foreground-1
pointer-events-none
box-border
transition-all
duration-150
ease-in-out
stroke-current
stroke-1
fill-current;
width: var(--calcite-checkbox-size);
height: var(--calcite-checkbox-size);
box-shadow: inset 0 0 0 1px var(--calcite-ui-border-input);
color: theme("backgroundColor.background");
}
}
:host([checked]),
:host([indeterminate]) {
.check-svg {
@apply bg-brand;
box-shadow: inset 0 0 0 1px var(--calcite-ui-brand);
}
}
:host([hovered]) .toggle,
:host .toggle:hover {
.check-svg {
box-shadow: inset 0 0 0 2px var(--calcite-ui-brand);
}
}
:host {
.toggle:focus .check-svg,
.toggle:active .check-svg {
@include focus-box-shadow(inset 0 0 0 1px var(--calcite-ui-brand));
}
}
:host([disabled]) {
@apply cursor-default opacity-disabled pointer-events-none;
}
@include hidden-form-input();