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
|
@use '../base' as *;
:root {
// radius
--radius: 0.375em; // border radius base size
// 👇 uncomment to modify default radius values
// --radius-sm: calc(var(--radius)/2);
// --radius-md: var(--radius);
// --radius-lg: calc(var(--radius)*2);
// box shadow - 👇 uncomment to modify default shadow values
// --shadow-xs: 0 0.1px 0.3px rgba(0, 0, 0, 0.06),
// 0 1px 2px rgba(0, 0, 0, 0.12);
// --shadow-sm: 0 0.3px 0.4px rgba(0, 0, 0, 0.025),
// 0 0.9px 1.5px rgba(0, 0, 0, 0.05),
// 0 3.5px 6px rgba(0, 0, 0, 0.1);
// --shadow-md: 0 0.9px 1.5px rgba(0, 0, 0, 0.03),
// 0 3.1px 5.5px rgba(0, 0, 0, 0.08),
// 0 14px 25px rgba(0, 0, 0, 0.12);
// --shadow-lg: 0 1.2px 1.9px -1px rgba(0, 0, 0, 0.014),
// 0 3.3px 5.3px -1px rgba(0, 0, 0, 0.038),
// 0 8.5px 12.7px -1px rgba(0, 0, 0, 0.085),
// 0 30px 42px -1px rgba(0, 0, 0, 0.15);
// --shadow-xl: 0 1.5px 2.1px -6px rgba(0, 0, 0, 0.012),
// 0 3.6px 5.2px -6px rgba(0, 0, 0, 0.035),
// 0 7.3px 10.6px -6px rgba(0, 0, 0, 0.07),
// 0 16.2px 21.9px -6px rgba(0, 0, 0, 0.117),
// 0 46px 60px -6px rgba(0, 0, 0, 0.2);
// --inner-glow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
// --inner-glow-top: inset 0 1px 0.5px hsla(0, 0%, 100%, 0.075);
}
// --------------------------------
// (START) Global editor code https://codyhouse.co/ds/globals/shared-styles
// --------------------------------
.hover\:reduce-opacity {
opacity: 1;
&:hover {
opacity: 0.8;
}
}
.hover\:elevate {
box-shadow: var(--shadow-sm);
&:hover {
box-shadow: var(--shadow-md);
}
}
// text styles
.link-subtle {
color: inherit;
cursor: pointer;
text-decoration: none;
&:hover {
color: var(--color-primary);
}
}
// --------------------------------
// (END) Global editor code
// --------------------------------
|
