Skip to content

Commit 961b80e

Browse files
mrholekmrholek
committed
refactor: improve switches
1 parent c5e04d3 commit 961b80e

File tree

3 files changed

+144
-132
lines changed

3 files changed

+144
-132
lines changed

‎scss/_switches.scss

Lines changed: 94 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -3,102 +3,49 @@
33
//
44

55
.switch {
6-
position: relative;
76
display: inline-block;
87
width: $switch-width;
98
height: $switch-height;
10-
vertical-align: top;
11-
cursor: pointer;
12-
background-color: transparent;
139
}
1410

1511
.switch-input {
16-
position: absolute;
17-
top: 0;
18-
left: 0;
19-
opacity: 0;
12+
display: none;
2013
}
2114

22-
.switch-label {
15+
.switch-slider {
2316
position: relative;
2417
display: block;
2518
height: inherit;
26-
font-size: $switch-font-size;
27-
font-weight: 600;
28-
text-transform: uppercase;
19+
cursor: pointer;
2920
background-color: #fff;
30-
border: 1px solid $border-color;
31-
border-radius: 2px;
32-
transition: opacity background .15s ease-out;
33-
34-
&::before,
35-
&::after {
36-
position: absolute;
37-
top: 50%;
38-
width: 50%;
39-
margin-top: -.5em;
40-
line-height: 1;
41-
text-align: center;
42-
transition: inherit;
43-
}
21+
border: $border-width solid $border-color;
22+
transition: .15s ease-out;
23+
@include border-radius($border-radius);
4424

4525
&::before {
46-
right: 1px;
47-
color: $gray-200;
48-
content: attr(data-off);
49-
}
50-
51-
&::after {
52-
left: 1px;
53-
color: #fff;
54-
content: attr(data-on);
55-
opacity: 0;
26+
position: absolute;
27+
top: $switch-handle-margin;
28+
left: $switch-handle-margin;
29+
box-sizing: border-box;
30+
width: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2);
31+
height: $switch-height - ($switch-handle-margin * 2) - ($border-width * 2);
32+
content: "";
33+
background-color: #fff;
34+
border: 1px solid $border-color;
35+
transition: .15s ease-out;
36+
@include border-radius($border-radius / 2);
5637
}
5738
}
5839

59-
.switch-handle {
60-
position: absolute;
61-
top: $switch-handle-margin;
62-
left: $switch-handle-margin;
63-
width: $switch-height - $switch-handle-margin * 2;
64-
height: $switch-height - $switch-handle-margin * 2;
65-
background: #fff;
66-
border: 1px solid $border-color;
67-
border-radius: 1px;
68-
transition: left .15s ease-out;
69-
}
70-
71-
.switch-input:checked {
72-
~ .switch-label {
73-
//background: $gray-lightest;
74-
}
75-
76-
~ .switch-label::before {
77-
opacity: 0;
78-
}
79-
80-
~ .switch-label::after {
81-
opacity: 1;
82-
}
83-
84-
~ .switch-handle {
85-
left: $switch-width - $switch-height + $switch-handle-margin;
40+
.switch-input:checked ~ .switch-slider {
41+
&::before {
42+
transform: translateX($switch-width - $switch-height);
8643
}
8744
}
8845

89-
@each $color, $value in $theme-colors {
90-
//normal style
91-
.switch-#{$color} {
92-
@include switch-variant($value);
93-
}
94-
//outline style
95-
.switch-#{$color}-outline {
96-
@include switch-outline-variant($value);
97-
}
98-
//outline alternative style
99-
.switch-#{$color}-outline-alt {
100-
@include switch-outline-alt-variant($value);
101-
}
46+
.switch-input:disabled ~ .switch-slider {
47+
cursor: not-allowed;
48+
opacity: .5;
10249
}
10350

10451
//
@@ -114,19 +61,51 @@
11461
}
11562

11663
//
117-
// Switch with text
64+
// Switch with label
11865
//
66+
.switch-label {
67+
width: $switch-label-width;
68+
69+
.switch-slider {
70+
&::before {
71+
z-index: 2;
72+
}
73+
&::after {
74+
position: absolute;
75+
top: 50%;
76+
right: 1px;
77+
z-index: 1;
78+
width: 50%;
79+
margin-top: -.5em;
80+
font-size: $switch-font-size;
81+
font-weight: 600;
82+
line-height: 1;
83+
color: $gray-300;
84+
text-align: center;
85+
text-transform: uppercase;
86+
content: attr(data-unchecked);
87+
transition: inherit;
88+
}
89+
}
11990

120-
.switch-text {
121-
@include switch-size($switch-text-width, $switch-height, $switch-font-size, $switch-handle-margin);
91+
.switch-input:checked ~ .switch-slider {
92+
&::before {
93+
transform: translateX($switch-label-width - $switch-height);
94+
}
95+
&::after {
96+
left: 1px;
97+
color: #fff;
98+
content: attr(data-checked);
99+
}
100+
}
122101

123102
// Sizes
124103
&.switch-lg {
125-
@include switch-size($switch-text-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin);
104+
@include switch-size($switch-label-lg-width, $switch-lg-height, $switch-lg-font-size, $switch-handle-margin);
126105
}
127106

128107
&.switch-sm {
129-
@include switch-size($switch-text-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin);
108+
@include switch-size($switch-label-sm-width, $switch-sm-height, $switch-sm-font-size, $switch-handle-margin);
130109
}
131110
}
132111

@@ -135,27 +114,47 @@
135114
//
136115

137116
.switch-3d {
138-
.switch-label {
117+
.switch-slider {
139118
background-color: $gray-100;
140119
border-radius: 50em;
141-
}
142-
.switch-handle {
143-
top: 0;
144-
left: 0;
145-
width: $switch-height;
146-
height: $switch-height;
147-
border: 0;
148-
border-radius: 50em;
149-
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
120+
121+
&::before {
122+
top: -1px;
123+
left: -1px;
124+
width: $switch-height;
125+
height: $switch-height;
126+
border: 0;
127+
border-radius: 50em;
128+
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
129+
}
150130
}
151131

152132
// Sizes
153133
&.switch-lg {
154-
@include switch-size($switch-text-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
134+
@include switch-3d-size($switch-lg-width, $switch-lg-height);
155135
}
156136

157137
&.switch-sm {
158-
@include switch-size($switch-text-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
138+
@include switch-3d-size($switch-sm-width, $switch-sm-height);
139+
}
140+
}
141+
142+
//
143+
// Switch Variants
144+
//
145+
146+
@each $color, $value in $theme-colors {
147+
//normal style
148+
.switch-#{$color} {
149+
@include switch-variant($value);
150+
}
151+
//outline style
152+
.switch-outline-#{$color} {
153+
@include switch-outline-variant($value);
154+
}
155+
//outline alternative style
156+
.switch-outline-#{$color}-alt {
157+
@include switch-outline-variant-alt($value);
159158
}
160159
}
161160

@@ -164,17 +163,11 @@
164163
//
165164

166165
.switch-pill {
167-
.switch-label,
168-
.switch-handle {
166+
.switch-slider {
169167
border-radius: 50em;
170-
}
171168

172-
.switch-label {
173169
&::before {
174-
right: 2px;
175-
}
176-
&::after {
177-
left: 2px;
170+
border-radius: 50em;
178171
}
179172
}
180173
}

‎scss/_variables.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -227,19 +227,19 @@ $card-icon-color: $body-color !default;
227227
// Switches
228228

229229
$switch-width: 40px !default;
230-
$switch-height: 24px !default;
230+
$switch-height: 26px !default;
231231
$switch-font-size: 10px !default;
232232

233233
$switch-lg-width: 48px !default;
234-
$switch-lg-height: 28px !default;
234+
$switch-lg-height: 30px !default;
235235
$switch-lg-font-size: 12px !default;
236236

237237
$switch-sm-width: 32px !default;
238-
$switch-sm-height: 20px !default;
238+
$switch-sm-height: 22px !default;
239239
$switch-sm-font-size: 8px !default;
240240

241-
$switch-text-width: 48px !default;
242-
$switch-text-lg-width: 56px !default;
243-
$switch-text-sm-width: 40px !default;
241+
$switch-label-width: 48px !default;
242+
$switch-label-lg-width: 56px !default;
243+
$switch-label-sm-width: 40px !default;
244244

245245
$switch-handle-margin: 2px !default;

‎scss/mixins/_switches.scss

Lines changed: 44 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,58 +2,77 @@
22
width: $width;
33
height: $height;
44

5-
.switch-label {
5+
.switch-slider {
66
font-size: $font-size;
7+
8+
&::before {
9+
width: $height - ($handle-margin * 2) - ($border-width * 2);
10+
height: $height - ($handle-margin * 2) - ($border-width * 2);
11+
}
12+
&::after {
13+
font-size: $font-size;
14+
}
15+
}
16+
17+
.switch-input:checked ~ .switch-slider {
18+
&::before {
19+
transform: translateX($width - $height);
20+
}
721
}
22+
}
23+
24+
@mixin switch-3d-size($width, $height) {
25+
width: $width;
26+
height: $height;
827

9-
.switch-handle {
10-
width: $height - $handle-margin * 2;
11-
height: $height - $handle-margin * 2;
28+
.switch-slider::before {
29+
width: $height;
30+
height: $height;
1231
}
1332

14-
.switch-input:checked ~ .switch-handle {
15-
left: $width - $height + $handle-margin;
33+
.switch-input:checked ~ .switch-slider {
34+
&::before {
35+
transform: translateX($width - $height);
36+
}
1637
}
1738
}
1839

1940
@mixin switch-variant($color) {
20-
> .switch-input:checked ~ .switch-label {
21-
background: $color;
41+
.switch-input:checked + .switch-slider {
42+
background-color: $color;
2243
border-color: darken($color, 10%);
23-
}
2444

25-
> .switch-input:checked ~ .switch-handle {
26-
border-color: darken($color, 10%);
45+
&::before {
46+
border-color: darken($color, 10%);
47+
}
2748
}
2849
}
2950

3051
@mixin switch-outline-variant($color) {
31-
> .switch-input:checked ~ .switch-label {
32-
background: #fff;
52+
.switch-input:checked + .switch-slider {
53+
background-color: #fff;
3354
border-color: $color;
3455

56+
&::before {
57+
border-color: $color;
58+
}
3559
&::after {
3660
color: $color;
3761
}
3862
}
39-
40-
> .switch-input:checked ~ .switch-handle {
41-
border-color: $color;
42-
}
4363
}
4464

45-
@mixin switch-outline-alt-variant($color) {
46-
> .switch-input:checked ~ .switch-label {
47-
background: #fff;
65+
@mixin switch-outline-variant-alt($color) {
66+
.switch-input:checked + .switch-slider {
67+
background-color: #fff;
4868
border-color: $color;
4969

70+
&::before {
71+
background-color: $color;
72+
border-color: $color;
73+
}
5074
&::after {
5175
color: $color;
5276
}
5377
}
54-
55-
> .switch-input:checked ~ .switch-handle {
56-
background: $color;
57-
border-color: $color;
58-
}
5978
}

0 commit comments

Comments
 (0)