1 | @import "../global/variables.css";
|
2 |
|
3 | @value unit from "../global/global.css";
|
4 | @value padding: 2px;
|
5 | @value disabled-line-color: rgba(255, 255, 255, 0.9);
|
6 | @value duration: 300ms;
|
7 | @value timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
8 |
|
9 | .toggle {
|
10 | cursor: pointer;
|
11 |
|
12 | &:hover {
|
13 | & .switch {
|
14 | background-color: var(--ring-border-hover-color);
|
15 | }
|
16 | }
|
17 |
|
18 | &.disabled {
|
19 | pointer-events: none;
|
20 | }
|
21 | }
|
22 |
|
23 | .label {
|
24 | margin-left: calc(unit / 2);
|
25 | }
|
26 |
|
27 | .leftLabel {
|
28 | margin-right: calc(unit / 2);
|
29 | }
|
30 |
|
31 | .light {
|
32 | & .switch {
|
33 | background-color: var(--ring-icon-color);
|
34 |
|
35 | &::before {
|
36 | background-color: var(--ring-content-background-color);
|
37 | }
|
38 | }
|
39 | }
|
40 |
|
41 | .dark {
|
42 | & .switch {
|
43 | background-color: var(--ring-hint-color);
|
44 |
|
45 | &::before {
|
46 | background-color: var(--ring-navigation-background-color);
|
47 | }
|
48 | }
|
49 | }
|
50 |
|
51 | .switchWrapper {
|
52 | position: relative;
|
53 |
|
54 | display: inline-block;
|
55 |
|
56 | width: calc(unit * 3);
|
57 | height: calc(unit * 2);
|
58 |
|
59 | vertical-align: -3px;
|
60 | }
|
61 |
|
62 | .input {
|
63 | position: absolute;
|
64 | top: 0;
|
65 | left: 0;
|
66 |
|
67 | width: 100%;
|
68 | height: 100%;
|
69 |
|
70 | margin: 0;
|
71 |
|
72 | opacity: 0;
|
73 | }
|
74 |
|
75 | .switch {
|
76 | position: relative;
|
77 |
|
78 | display: block;
|
79 |
|
80 | width: 100%;
|
81 | height: 100%;
|
82 |
|
83 | transition: background-color timing-function duration;
|
84 |
|
85 | border-radius: unit;
|
86 |
|
87 | @nest .input:focus + & {
|
88 | box-shadow: inset 0 0 0 1px var(--ring-border-hover-color), 0 0 0 1px var(--ring-border-hover-color);
|
89 | }
|
90 |
|
91 | &::before {
|
92 | position: absolute;
|
93 | top: padding;
|
94 | left: 0;
|
95 |
|
96 | width: calc(unit * 1.5);
|
97 | height: calc(unit * 1.5);
|
98 |
|
99 | content: "";
|
100 |
|
101 | transition: transform timing-function duration;
|
102 |
|
103 | transform: translateX(padding);
|
104 |
|
105 | border-radius: calc(unit * 0.75);
|
106 | }
|
107 | }
|
108 |
|
109 | .input:checked + .switch {
|
110 | background-color: var(--ring-main-color);
|
111 | }
|
112 |
|
113 | .input:checked + ::before {
|
114 | transform: translateX(calc(unit * 1.5 - padding));
|
115 | }
|
116 |
|
117 | .input[disabled] + ::after {
|
118 | position: absolute;
|
119 | top: 0;
|
120 | left: 0;
|
121 |
|
122 | width: 100%;
|
123 | height: 100%;
|
124 |
|
125 | content: "";
|
126 |
|
127 | border-radius: unit;
|
128 | background-image:
|
129 | linear-gradient(
|
130 | 45deg,
|
131 | transparent,
|
132 | transparent 37.5%,
|
133 | disabled-line-color 37.5%,
|
134 | disabled-line-color 50%,
|
135 | transparent 50%,
|
136 | transparent 87.5%,
|
137 | disabled-line-color 87.5%,
|
138 | disabled-line-color
|
139 | );
|
140 | background-repeat: repeat;
|
141 | background-size: 4px 4px;
|
142 | }
|
143 |
|
144 | .paleSwitch.paleSwitch {
|
145 | background-color: var(--ring-pale-control-color);
|
146 | }
|
147 |
|
148 | .input:checked + .paleSwitch {
|
149 | background-color: var(--ring-border-hover-color);
|
150 | }
|