-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path_variables.scss
82 lines (74 loc) · 2.48 KB
/
_variables.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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
// Specify each breakpoint size
$breakpoints: (
md: 40em,
lg: 80em,
) !default;
// Specify each breakpoint gap size. <section> tags with get padding based on gap size.
// You must include one for each Breakpoint otherwise it will result in a Compile Error.
$gaps: (
default: 1.25em,
md: 2em,
lg: 2.25em,
) !default;
// Specify each color used in color-, bg-, border-, btn-
$colors: (
"white": #ffffff,
"light": #efefef,
"medium": #888888,
"dark": #444444,
"primary": #1494df,
"warning": #df8a22,
"error": #d52929,
"success": #09c347,
"text": #566067,
"inherit": inherit,
"transparent": transparent,
) !default;
// Specify each type tag and class like <h3> and .h3 etc.
$types: (
body: (font-family: Helvetica, font-size: clamp(.9em, 3vw, 1.0em), font-weight: 300, color: map-get($colors, 'text'), line-height: 1.4),
h1: (font-size: 3.4em, font-weight: 400, line-height: 1.20),
h2: (font-size: 2.7em, font-weight: 300, line-height: 1.25),
h3: (font-size: 2.2em, font-weight: 300, line-height: 1.30),
h4: (font-size: 1.6em, font-weight: 300, line-height: 1.35),
h5: (font-size: 1.2em, font-weight: 300, line-height: 1.5),
h6: (font-size: 1.0em, font-weight: 300, line-height: 1.4),
) !default;
// Specify each spacing that applies to Margin and Padding. Ex .m-0, .m-1, .mx-3, .pt-3, .mt-n3, etc
$spacing: (
0: 0em,
1: .5em,
2: 1em,
3: 2em,
4: 3em,
5: 4em,
) !default;
// Specify each size that applies font-size and all elements using "em".
$sizes: (
xl: 140%,
lg: 120%,
md: 100%,
sm: 90%,
xs: 75%,
) !default;
:root {
--spry-btn-color : #{map-get($colors, 'medium')};
--spry-btn-color-rgb : #{red(map-get($colors, 'medium')), green(map-get($colors, 'medium')), blue(map-get($colors, 'medium'))};
--spry-btn-color-text : #{map-get($colors, 'white')};
--spry-accent-color : #{map-get($colors, 'medium')};
--spry-gap : #{map-get($gaps, 'default')};
--spry-card-color : transparent;
@each $color_name,
$color_value in $colors {
--spry-color-#{$color_name}: #{$color_value};
@if $color_name !=inherit {
--spry-color-#{$color_name}-rgb: #{red($color_value), green($color_value), blue($color_value)};
}
}
@each $breakpoint,
$breakpoint_width in $breakpoints {
@media screen and (min-width: $breakpoint_width) {
--spry-gap: #{map-get($gaps, $breakpoint)};
}
}
}