blob: 23dc03a4fdbbb984f660f80693c6b6e96ee7df83 (
plain) (
blame)
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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
@use '../base' as *;
@use 'popover.scss' as *;
@use 'adv-custom-select.scss' as *;
/* --------------------------------
File#: _3_light-dark-switch
Title: Light/Dark Switch
Descr: Color theme switcher
Usage: codyhouse.co/license
-------------------------------- */
.ld-switch {}
.ld-switch-btn {
position: relative;
width: 24px;
height: 24px;
overflow: hidden;
display: inline-block;
&:hover {
cursor: pointer;
opacity: 0.8;
}
&:focus {
outline: none;
color: var(--color-primary);
}
}
.ld-switch-btn.popover-control--active {
/* class added to the control button when the dropdown is visible */
color: var(--color-primary);
}
.ld-switch-btn__icon-wrapper {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transform: translateY(100%) rotate(35deg) scale(0.5);
}
.ld-switch-btn__icon-wrapper--in {
opacity: 1;
transform: translateY(0) rotate(0) scale(1);
}
.ld-switch-btn__icon-wrapper--out {
opacity: 0;
transform: translateY(-100%) rotate(-35deg) scale(0.5);
}
.ld-switch-btn__icon {
margin: auto;
--size: 20px; /* icon size */
}
.popover.ld-switch-popover {
--popover-width: 250px;
}
.ld-switch-popover__option {
user-select: none;
&:hover {
cursor: pointer;
opacity: 0.85;
}
&:focus {
outline: none;
figure {
box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px var(--color-contrast-higher);
}
}
&[aria-selected=true] {
color: var(--color-primary);
figure {
box-shadow: 0 0 0 1px var(--color-bg-light), 0 0 0 3px currentColor;
}
}
}
|
