@madj2k/fe-frontend-kit 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/sass/bootstrap-5.3.0/10_mixins/_accessibility.scss +1 -1
- package/sass/bootstrap-5.3.0/10_mixins/_colors.scss +2 -2
- package/sass/bootstrap-5.3.0/10_mixins/_form.scss +7 -5
- package/sass/bootstrap-5.3.0/10_mixins/_format.scss +15 -135
- package/sass/bootstrap-5.3.0/10_mixins/_nav.scss +16 -16
- package/sass/bootstrap-5.3.0/10_mixins/_page.scss +7 -0
- package/sass/bootstrap-5.3.0/10_mixins/_section.scss +31 -2
- package/sass/bootstrap-5.3.0/10_mixins/_toggle-list.scss +6 -8
- package/sass/bootstrap-5.3.0/10_mixins/index.scss +11 -0
- package/sass/bootstrap-5.3.0/index.scss +1 -16
- package/sass/bootstrap-5.3.0/00_variables/_colors.scss +0 -17
- package/sass/bootstrap-5.3.0/00_variables/_font.scss +0 -228
- package/sass/bootstrap-5.3.0/00_variables/_maps.scss +0 -56
- package/sass/bootstrap-5.3.0/10_mixins/_effects.scss +0 -45
package/package.json
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
28
28
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
29
29
|
///
|
|
30
|
-
@mixin accessibility-outline ($color:
|
|
30
|
+
@mixin accessibility-outline ($color: var(--bs-primary), $width: 3px) {
|
|
31
31
|
|
|
32
32
|
&:focus,
|
|
33
33
|
&:focus-within {
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
24
24
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
25
25
|
///
|
|
26
|
-
@mixin background-color-classes($map
|
|
26
|
+
@mixin background-color-classes($map) {
|
|
27
27
|
@each $key, $value in $map {
|
|
28
28
|
&-#{$key} {
|
|
29
29
|
background-color: $value;
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
68
68
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
69
69
|
///
|
|
70
|
-
@mixin font-color-classes($map
|
|
70
|
+
@mixin font-color-classes($map) {
|
|
71
71
|
@each $key, $value in $map {
|
|
72
72
|
&-#{$key} {
|
|
73
73
|
color: $value !important;
|
|
@@ -37,9 +37,11 @@
|
|
|
37
37
|
/// @license
|
|
38
38
|
/// GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
39
39
|
///
|
|
40
|
+
$color-secondary: #00ff00 !default; // Fallback
|
|
41
|
+
$color-primary: #ff0000 !default; // Fallback
|
|
40
42
|
@mixin checkbox(
|
|
41
43
|
$size: 16px,
|
|
42
|
-
$default-bg-color: $color-
|
|
44
|
+
$default-bg-color: $color-secondary,
|
|
43
45
|
$default-border-color: $color-secondary,
|
|
44
46
|
$default-icon: null,
|
|
45
47
|
$active-bg-color: $color-primary,
|
|
@@ -133,11 +135,11 @@
|
|
|
133
135
|
///
|
|
134
136
|
@mixin radio(
|
|
135
137
|
$size: 16px,
|
|
136
|
-
$default-bg-color:
|
|
137
|
-
$default-border-color:
|
|
138
|
+
$default-bg-color: var(--bs-secondary),
|
|
139
|
+
$default-border-color: var(--bs-secondary),
|
|
138
140
|
$default-icon: null,
|
|
139
|
-
$active-bg-color:
|
|
140
|
-
$active-border-color:
|
|
141
|
+
$active-bg-color: var(--bs-primary),
|
|
142
|
+
$active-border-color: var(--bs-primary),
|
|
141
143
|
$active-icon: '../Images/input-radio-active.svg'
|
|
142
144
|
) {
|
|
143
145
|
@include checkbox(
|
|
@@ -3,14 +3,27 @@
|
|
|
3
3
|
/// Supports multiple breakpoints: mobile, tablet, and desktop. default is the fallback
|
|
4
4
|
/// Used as a base mixin for semantic text styles like `h1`, `copy`, etc.
|
|
5
5
|
///
|
|
6
|
+
/// $font-formats: (
|
|
7
|
+
//// 'h1': (
|
|
8
|
+
//// 'breakpoint': (
|
|
9
|
+
//// 'font-family': <font-family>,
|
|
10
|
+
//// 'font-weight': <font-weight>,
|
|
11
|
+
//// 'font-size': rem-calc(<size in px>),
|
|
12
|
+
//// 'line-height': rem-calc(<line height in px>)
|
|
13
|
+
//// ),
|
|
14
|
+
//// ...
|
|
15
|
+
//// ),
|
|
16
|
+
//// ...
|
|
17
|
+
//// )
|
|
18
|
+
///
|
|
6
19
|
/// @group Typography
|
|
7
|
-
/// @param {String} $font-format - The key name of the format to apply (e.g., 'h1', 'copy-small').
|
|
8
20
|
/// @param {Map} $font-formats - A map of font style definitions. Defaults to the global `$font-formats` map.
|
|
21
|
+
/// @param {String} $font-format - The key name of the format to apply (e.g., 'h1', 'copy-small').
|
|
9
22
|
///
|
|
10
23
|
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
11
24
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
12
25
|
///
|
|
13
|
-
@mixin font-format($font-
|
|
26
|
+
@mixin font-format($font-formats, $font-format: 'h1') {
|
|
14
27
|
$format-data: map-get($font-formats, $font-format);
|
|
15
28
|
$mobile-data: map-get($format-data, 'mobile');
|
|
16
29
|
$default-data: map-get($format-data, 'default');
|
|
@@ -41,139 +54,6 @@
|
|
|
41
54
|
}
|
|
42
55
|
}
|
|
43
56
|
|
|
44
|
-
/// Typography style for `<h1>` elements.
|
|
45
|
-
///
|
|
46
|
-
/// @group Typography
|
|
47
|
-
///
|
|
48
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
49
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
50
|
-
///
|
|
51
|
-
@mixin h1 {
|
|
52
|
-
@include font-format('h1');
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
/// Typography style for `<h2>` elements.
|
|
56
|
-
///
|
|
57
|
-
/// @group Typography
|
|
58
|
-
///
|
|
59
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
60
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
61
|
-
///
|
|
62
|
-
@mixin h2 {
|
|
63
|
-
@include font-format('h2');
|
|
64
|
-
}
|
|
65
|
-
|
|
66
|
-
/// Typography style for `<h3>` elements.
|
|
67
|
-
///
|
|
68
|
-
/// @group Typography
|
|
69
|
-
///
|
|
70
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
71
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
72
|
-
///
|
|
73
|
-
@mixin h3 {
|
|
74
|
-
@include font-format('h3');
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
/// Typography style for `<h4>` elements.
|
|
78
|
-
///
|
|
79
|
-
/// @group Typography
|
|
80
|
-
///
|
|
81
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
82
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
83
|
-
///
|
|
84
|
-
@mixin h4 {
|
|
85
|
-
@include font-format('h4');
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
/// Typography style for `<h5>` elements.
|
|
89
|
-
///
|
|
90
|
-
/// @group Typography
|
|
91
|
-
///
|
|
92
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
93
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
94
|
-
///
|
|
95
|
-
@mixin h5 {
|
|
96
|
-
@include font-format('h5');
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
/// Typography style for `<h6>` elements.
|
|
100
|
-
///
|
|
101
|
-
/// @group Typography
|
|
102
|
-
///
|
|
103
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
104
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
105
|
-
///
|
|
106
|
-
@mixin h6 {
|
|
107
|
-
@include font-format('h6');
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
/// Typography style for body copy text.
|
|
112
|
-
///
|
|
113
|
-
/// @group Typography
|
|
114
|
-
///
|
|
115
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
116
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
117
|
-
///
|
|
118
|
-
@mixin copy {
|
|
119
|
-
@include font-format('copy');
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
/// Typography style for small body copy.
|
|
123
|
-
///
|
|
124
|
-
/// @group Typography
|
|
125
|
-
///
|
|
126
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
127
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
128
|
-
///
|
|
129
|
-
@mixin copy-small {
|
|
130
|
-
@include font-format('copy-small');
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
/// Typography style for links (without additional decoration).
|
|
134
|
-
///
|
|
135
|
-
/// @group Typography
|
|
136
|
-
///
|
|
137
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
138
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
139
|
-
///
|
|
140
|
-
@mixin link {
|
|
141
|
-
@include font-format('link');
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
/// Typography style for overline/captions.
|
|
145
|
-
///
|
|
146
|
-
/// @group Typography
|
|
147
|
-
///
|
|
148
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
149
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
150
|
-
///
|
|
151
|
-
@mixin overline {
|
|
152
|
-
@include font-format('overline');
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
/// Typography style for subheaders.
|
|
156
|
-
///
|
|
157
|
-
/// @group Typography
|
|
158
|
-
///
|
|
159
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
160
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
161
|
-
///
|
|
162
|
-
@mixin subheader {
|
|
163
|
-
@include font-format('subheader');
|
|
164
|
-
}
|
|
165
|
-
|
|
166
|
-
/// Applies typographic styles for bold text using the bold font family.
|
|
167
|
-
///
|
|
168
|
-
/// @group Utilities
|
|
169
|
-
///
|
|
170
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
171
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
172
|
-
///
|
|
173
|
-
@mixin bold {
|
|
174
|
-
@include font-format('bold');
|
|
175
|
-
}
|
|
176
|
-
|
|
177
57
|
/// Enables word breaking and hyphenation for improved long text handling.
|
|
178
58
|
///
|
|
179
59
|
/// Works across modern and legacy browsers.
|
|
@@ -31,12 +31,12 @@
|
|
|
31
31
|
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
32
32
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
33
33
|
@mixin nav-block(
|
|
34
|
-
$link-color:
|
|
35
|
-
$active-color:
|
|
34
|
+
$link-color: var(--bs-secondary),
|
|
35
|
+
$active-color: var(--bs-primary)
|
|
36
36
|
) {
|
|
37
37
|
|
|
38
38
|
&-list {
|
|
39
|
-
@include list-reset;
|
|
39
|
+
@include list-reset();
|
|
40
40
|
display: block;
|
|
41
41
|
}
|
|
42
42
|
|
|
@@ -94,11 +94,11 @@
|
|
|
94
94
|
///
|
|
95
95
|
@mixin nav-inline(
|
|
96
96
|
$list-gap: $spacer,
|
|
97
|
-
$link-color:
|
|
98
|
-
$link-active-color:
|
|
97
|
+
$link-color: var(--bs-secondary),
|
|
98
|
+
$link-active-color: var(--bs-primary)
|
|
99
99
|
) {
|
|
100
100
|
&-list {
|
|
101
|
-
@include list-reset;
|
|
101
|
+
@include list-reset();
|
|
102
102
|
display: flex;
|
|
103
103
|
gap: rem-calc($list-gap);
|
|
104
104
|
}
|
|
@@ -168,13 +168,13 @@
|
|
|
168
168
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
169
169
|
///
|
|
170
170
|
@mixin nav-pulldown(
|
|
171
|
-
$pad-x:
|
|
171
|
+
$pad-x: 16px,
|
|
172
172
|
$pad-y: 0,
|
|
173
173
|
$item-y: 10,
|
|
174
174
|
$item-gap: 12,
|
|
175
|
-
$bg-color:
|
|
176
|
-
$text-color:
|
|
177
|
-
$border-color:
|
|
175
|
+
$bg-color: var(--bs-primary),
|
|
176
|
+
$text-color: var(--bs-secondary),
|
|
177
|
+
$border-color: var(--bs-secondary),
|
|
178
178
|
$border-width: 1px
|
|
179
179
|
) {
|
|
180
180
|
|
|
@@ -187,7 +187,7 @@
|
|
|
187
187
|
border: rem-calc($border-width) solid $border-color;
|
|
188
188
|
|
|
189
189
|
&-list {
|
|
190
|
-
@include list-reset;
|
|
190
|
+
@include list-reset();
|
|
191
191
|
|
|
192
192
|
&-item {
|
|
193
193
|
@include copy;
|
|
@@ -244,7 +244,7 @@
|
|
|
244
244
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
245
245
|
///
|
|
246
246
|
@mixin nav-toggle-group(
|
|
247
|
-
$gap:
|
|
247
|
+
$gap: 16px
|
|
248
248
|
) {
|
|
249
249
|
display: flex;
|
|
250
250
|
align-items: center;
|
|
@@ -289,11 +289,11 @@
|
|
|
289
289
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
290
290
|
///
|
|
291
291
|
@mixin nav-toggle(
|
|
292
|
-
$icon-size:
|
|
293
|
-
$icon-color:
|
|
292
|
+
$icon-size: 16px,
|
|
293
|
+
$icon-color: var(--bs-primary),
|
|
294
294
|
$icon-mappings: (
|
|
295
|
-
"icon-hamburger":
|
|
296
|
-
"icon-plus":
|
|
295
|
+
"icon-hamburger": unquote('"\\e905"'),
|
|
296
|
+
"icon-plus": unquote('"\\e908"')
|
|
297
297
|
)
|
|
298
298
|
) {
|
|
299
299
|
background-color: transparent;
|
|
@@ -76,6 +76,13 @@
|
|
|
76
76
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
77
77
|
///
|
|
78
78
|
@mixin page-padding(
|
|
79
|
+
$page-padding: (
|
|
80
|
+
'sm': 16px,
|
|
81
|
+
'md': 24px,
|
|
82
|
+
'lg': 32px,
|
|
83
|
+
'xl': 48px,
|
|
84
|
+
'xxl': 60px
|
|
85
|
+
),
|
|
79
86
|
$page-wrap-class: '.page',
|
|
80
87
|
$wrap-class: '.fullwidth',
|
|
81
88
|
$default-padding: 16px
|
|
@@ -56,8 +56,37 @@
|
|
|
56
56
|
$block-class: 'csp-block',
|
|
57
57
|
$not-last-class: 'csp-not-last',
|
|
58
58
|
$utility-append-class: 'sp',
|
|
59
|
-
$csp-blocks:
|
|
60
|
-
|
|
59
|
+
$csp-blocks: (
|
|
60
|
+
'text',
|
|
61
|
+
'text-image',
|
|
62
|
+
'text-video'
|
|
63
|
+
),
|
|
64
|
+
$content-spacers: (
|
|
65
|
+
'xs': (
|
|
66
|
+
'section': 48px, // space between different sections
|
|
67
|
+
'block': 16px // space between content blocks
|
|
68
|
+
),
|
|
69
|
+
'sm': (
|
|
70
|
+
'section': 48px,
|
|
71
|
+
'block': 16px
|
|
72
|
+
),
|
|
73
|
+
'md': (
|
|
74
|
+
'section': 48px,
|
|
75
|
+
'block': 16px
|
|
76
|
+
),
|
|
77
|
+
'lg': (
|
|
78
|
+
'section': 48px,
|
|
79
|
+
'block': 16px
|
|
80
|
+
),
|
|
81
|
+
'xl': (
|
|
82
|
+
'section': 48px,
|
|
83
|
+
'block': 16px
|
|
84
|
+
),
|
|
85
|
+
'xxl': (
|
|
86
|
+
'section': 48px,
|
|
87
|
+
'block': 16px
|
|
88
|
+
)
|
|
89
|
+
),
|
|
61
90
|
) {
|
|
62
91
|
@each $breakpoint, $values in $grid-breakpoints {
|
|
63
92
|
$spacer-section: map-get(map-get($content-spacers, $breakpoint), 'section');
|
|
@@ -56,15 +56,15 @@
|
|
|
56
56
|
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
57
57
|
///
|
|
58
58
|
@mixin toggle-list(
|
|
59
|
-
$padding-y:
|
|
60
|
-
$border-color:
|
|
59
|
+
$padding-y: 16px,
|
|
60
|
+
$border-color: var(--bs-primary),
|
|
61
61
|
$border-size: 1px,
|
|
62
|
-
$font-color:
|
|
63
|
-
$font-color-active:
|
|
62
|
+
$font-color: var(--bs-secondary),
|
|
63
|
+
$font-color-active: var(--bs-primary),
|
|
64
64
|
$icon-size: 30px,
|
|
65
|
-
$icon-style:
|
|
65
|
+
$icon-style: ''
|
|
66
66
|
) {
|
|
67
|
-
@include list-reset;
|
|
67
|
+
@include list-reset();
|
|
68
68
|
display: flex;
|
|
69
69
|
flex-direction: column;
|
|
70
70
|
|
|
@@ -128,6 +128,4 @@
|
|
|
128
128
|
}
|
|
129
129
|
}
|
|
130
130
|
}
|
|
131
|
-
|
|
132
|
-
|
|
133
131
|
}
|
|
@@ -1,16 +1 @@
|
|
|
1
|
-
@import '
|
|
2
|
-
@import '00_variables/font';
|
|
3
|
-
@import '00_variables/maps';
|
|
4
|
-
|
|
5
|
-
@import '10_mixins/accessibility';
|
|
6
|
-
@import '10_mixins/colors';
|
|
7
|
-
@import '10_mixins/effects';
|
|
8
|
-
@import '10_mixins/flex-box';
|
|
9
|
-
@import '10_mixins/form';
|
|
10
|
-
@import '10_mixins/format';
|
|
11
|
-
@import '10_mixins/icons';
|
|
12
|
-
@import '10_mixins/nav';
|
|
13
|
-
@import '10_mixins/page';
|
|
14
|
-
@import '10_mixins/section';
|
|
15
|
-
@import '10_mixins/toggle-list';
|
|
16
|
-
@import '10_mixins/unit';
|
|
1
|
+
@import '10_mixins/index';
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
/* ==================================================
|
|
2
|
-
* Basic variables
|
|
3
|
-
* ================================================== */
|
|
4
|
-
$color-map: (
|
|
5
|
-
'red': #ff0000,
|
|
6
|
-
'primary': #00ff00,
|
|
7
|
-
'secondary': #0000ff,
|
|
8
|
-
) !default;
|
|
9
|
-
|
|
10
|
-
// some basic variables
|
|
11
|
-
$color-white: #fff !default;
|
|
12
|
-
$color-black: #000000 !default;
|
|
13
|
-
$color-primary: map-get($color-map, 'primary') !default;
|
|
14
|
-
$color-secondary: map-get($color-map, 'secondary') !default;
|
|
15
|
-
$color-text: map-get($color-map, 'secondary') !default;
|
|
16
|
-
$color-error: map-get($color-map, 'primary') !default;
|
|
17
|
-
$color-outline: map-get($color-map, 'primary') !default;
|
|
@@ -1,228 +0,0 @@
|
|
|
1
|
-
/* ==================================================
|
|
2
|
-
* Font variables
|
|
3
|
-
* ================================================== */
|
|
4
|
-
// fonts
|
|
5
|
-
$font-family-sans: "Verdana", "Arial", sans-serif !default;
|
|
6
|
-
$font-family-sans-bold: "Verdana", "Arial", sans-serif !default;
|
|
7
|
-
|
|
8
|
-
$font-weight-lighter: lighter !default;
|
|
9
|
-
$font-weight-light: 300 !default;
|
|
10
|
-
$font-weight-normal: 400 !default;
|
|
11
|
-
$font-weight-medium: 500 !default;
|
|
12
|
-
$font-weight-semibold: 600 !default;
|
|
13
|
-
$font-weight-bold: 700 !default;
|
|
14
|
-
$font-weight-bolder: bolder !default;
|
|
15
|
-
|
|
16
|
-
$font-formats: (
|
|
17
|
-
'h1': (
|
|
18
|
-
'desktop': (
|
|
19
|
-
'font-family': $font-family-sans,
|
|
20
|
-
'font-weight': $font-weight-normal,
|
|
21
|
-
'font-size': rem-calc(104),
|
|
22
|
-
'line-height': rem-calc(100)
|
|
23
|
-
),
|
|
24
|
-
'tablet': (
|
|
25
|
-
'font-family': $font-family-sans,
|
|
26
|
-
'font-weight': $font-weight-normal,
|
|
27
|
-
'font-size': rem-calc(40),
|
|
28
|
-
'line-height': rem-calc(40)
|
|
29
|
-
),
|
|
30
|
-
'mobile': (
|
|
31
|
-
'font-family': $font-family-sans,
|
|
32
|
-
'font-weight': $font-weight-normal,
|
|
33
|
-
'font-size': rem-calc(40),
|
|
34
|
-
'line-height': rem-calc(40)
|
|
35
|
-
)
|
|
36
|
-
),
|
|
37
|
-
'h2': (
|
|
38
|
-
'desktop': (
|
|
39
|
-
'font-family': $font-family-sans,
|
|
40
|
-
'font-weight': $font-weight-normal,
|
|
41
|
-
'font-size': rem-calc(62),
|
|
42
|
-
'line-height': rem-calc(60)
|
|
43
|
-
),
|
|
44
|
-
'tablet': (
|
|
45
|
-
'font-family': $font-family-sans,
|
|
46
|
-
'font-weight': $font-weight-normal,
|
|
47
|
-
'font-size': rem-calc(32),
|
|
48
|
-
'line-height': rem-calc(32)
|
|
49
|
-
),
|
|
50
|
-
'mobile': (
|
|
51
|
-
'font-family': $font-family-sans,
|
|
52
|
-
'font-weight': $font-weight-normal,
|
|
53
|
-
'font-size': rem-calc(32),
|
|
54
|
-
'line-height': rem-calc(32)
|
|
55
|
-
)
|
|
56
|
-
),
|
|
57
|
-
'h3': (
|
|
58
|
-
'desktop': (
|
|
59
|
-
'font-family': $font-family-sans,
|
|
60
|
-
'font-weight': $font-weight-normal,
|
|
61
|
-
'font-size': rem-calc(48),
|
|
62
|
-
'line-height': rem-calc(48)
|
|
63
|
-
),
|
|
64
|
-
'tablet': (
|
|
65
|
-
'font-family': $font-family-sans,
|
|
66
|
-
'font-weight': $font-weight-normal,
|
|
67
|
-
'font-size': rem-calc(26),
|
|
68
|
-
'line-height': rem-calc(26)
|
|
69
|
-
),
|
|
70
|
-
'mobile': (
|
|
71
|
-
'font-family': $font-family-sans,
|
|
72
|
-
'font-weight': $font-weight-normal,
|
|
73
|
-
'font-size': rem-calc(26),
|
|
74
|
-
'line-height': rem-calc(26)
|
|
75
|
-
)
|
|
76
|
-
),
|
|
77
|
-
'h4': (
|
|
78
|
-
'desktop': (
|
|
79
|
-
'font-family': $font-family-sans,
|
|
80
|
-
'font-weight': $font-weight-normal,
|
|
81
|
-
'font-size': rem-calc(36),
|
|
82
|
-
'line-height': rem-calc(36)
|
|
83
|
-
),
|
|
84
|
-
'tablet': (
|
|
85
|
-
'font-family': $font-family-sans,
|
|
86
|
-
'font-weight': $font-weight-normal,
|
|
87
|
-
'font-size': rem-calc(22),
|
|
88
|
-
'line-height': rem-calc(22)
|
|
89
|
-
),
|
|
90
|
-
'mobile': (
|
|
91
|
-
'font-family': $font-family-sans,
|
|
92
|
-
'font-weight': $font-weight-normal,
|
|
93
|
-
'font-size': rem-calc(22),
|
|
94
|
-
'line-height': rem-calc(22)
|
|
95
|
-
)
|
|
96
|
-
),
|
|
97
|
-
'h5': (
|
|
98
|
-
'desktop': (
|
|
99
|
-
'font-family': $font-family-sans,
|
|
100
|
-
'font-weight': $font-weight-normal,
|
|
101
|
-
'font-size': rem-calc(28),
|
|
102
|
-
'line-height': rem-calc(28)
|
|
103
|
-
),
|
|
104
|
-
'tablet': (
|
|
105
|
-
'font-family': $font-family-sans,
|
|
106
|
-
'font-weight': $font-weight-normal,
|
|
107
|
-
'font-size': rem-calc(18),
|
|
108
|
-
'line-height': rem-calc(18)
|
|
109
|
-
),
|
|
110
|
-
'mobile': (
|
|
111
|
-
'font-family': $font-family-sans,
|
|
112
|
-
'font-weight': $font-weight-normal,
|
|
113
|
-
'font-size': rem-calc(18),
|
|
114
|
-
'line-height': rem-calc(18)
|
|
115
|
-
)
|
|
116
|
-
),
|
|
117
|
-
'h6': (
|
|
118
|
-
'desktop': (
|
|
119
|
-
'font-family': $font-family-sans,
|
|
120
|
-
'font-weight': $font-weight-normal,
|
|
121
|
-
'font-size': rem-calc(22),
|
|
122
|
-
'line-height': rem-calc(22)
|
|
123
|
-
),
|
|
124
|
-
'tablet': (
|
|
125
|
-
'font-family': $font-family-sans,
|
|
126
|
-
'font-weight': $font-weight-normal,
|
|
127
|
-
'font-size': rem-calc(16),
|
|
128
|
-
'line-height': rem-calc(16)
|
|
129
|
-
),
|
|
130
|
-
'mobile': (
|
|
131
|
-
'font-family': $font-family-sans,
|
|
132
|
-
'font-weight': $font-weight-normal,
|
|
133
|
-
'font-size': rem-calc(16),
|
|
134
|
-
'line-height': rem-calc(16)
|
|
135
|
-
)
|
|
136
|
-
),
|
|
137
|
-
'copy': (
|
|
138
|
-
'desktop': (
|
|
139
|
-
'font-family': $font-family-sans,
|
|
140
|
-
'font-weight': $font-weight-normal,
|
|
141
|
-
'font-size': rem-calc(20),
|
|
142
|
-
'line-height': rem-calc(27)
|
|
143
|
-
),
|
|
144
|
-
'tablet': (
|
|
145
|
-
'font-family': $font-family-sans,
|
|
146
|
-
'font-weight': $font-weight-normal,
|
|
147
|
-
'font-size': rem-calc(16),
|
|
148
|
-
'line-height': rem-calc(24)
|
|
149
|
-
),
|
|
150
|
-
'mobile': (
|
|
151
|
-
'font-family': $font-family-sans,
|
|
152
|
-
'font-weight': $font-weight-normal,
|
|
153
|
-
'font-size': rem-calc(16),
|
|
154
|
-
'line-height': rem-calc(24)
|
|
155
|
-
)
|
|
156
|
-
),
|
|
157
|
-
'copy-small': (
|
|
158
|
-
'desktop': (
|
|
159
|
-
'font-family': $font-family-sans,
|
|
160
|
-
'font-weight': $font-weight-normal,
|
|
161
|
-
'font-size': rem-calc(16),
|
|
162
|
-
'line-height': rem-calc(16)
|
|
163
|
-
),
|
|
164
|
-
'tablet': (
|
|
165
|
-
'font-family': $font-family-sans,
|
|
166
|
-
'font-weight': $font-weight-normal,
|
|
167
|
-
'font-size': rem-calc(14),
|
|
168
|
-
'line-height': rem-calc(14)
|
|
169
|
-
),
|
|
170
|
-
'mobile': (
|
|
171
|
-
'font-family': $font-family-sans,
|
|
172
|
-
'font-weight': $font-weight-normal,
|
|
173
|
-
'font-size': rem-calc(14),
|
|
174
|
-
'line-height': rem-calc(14)
|
|
175
|
-
)
|
|
176
|
-
),
|
|
177
|
-
'overline': (
|
|
178
|
-
'desktop': (
|
|
179
|
-
'font-family': $font-family-sans,
|
|
180
|
-
'font-weight': $font-weight-normal,
|
|
181
|
-
'font-size': rem-calc(28),
|
|
182
|
-
'line-height': rem-calc(28)
|
|
183
|
-
),
|
|
184
|
-
'tablet': (
|
|
185
|
-
'font-family': $font-family-sans,
|
|
186
|
-
'font-weight': $font-weight-normal,
|
|
187
|
-
'font-size': rem-calc(18),
|
|
188
|
-
'line-height': rem-calc(18)
|
|
189
|
-
),
|
|
190
|
-
'mobile': (
|
|
191
|
-
'font-family': $font-family-sans,
|
|
192
|
-
'font-weight': $font-weight-normal,
|
|
193
|
-
'font-size': rem-calc(18),
|
|
194
|
-
'line-height': rem-calc(18)
|
|
195
|
-
)
|
|
196
|
-
),
|
|
197
|
-
'subheader': (
|
|
198
|
-
'desktop': (
|
|
199
|
-
'font-family': $font-family-sans,
|
|
200
|
-
'font-weight': $font-weight-normal,
|
|
201
|
-
'font-size': rem-calc(28),
|
|
202
|
-
'line-height': rem-calc(28)
|
|
203
|
-
),
|
|
204
|
-
'tablet': (
|
|
205
|
-
'font-family': $font-family-sans,
|
|
206
|
-
'font-weight': $font-weight-normal,
|
|
207
|
-
'font-size': rem-calc(18),
|
|
208
|
-
'line-height': rem-calc(18)
|
|
209
|
-
),
|
|
210
|
-
'mobile': (
|
|
211
|
-
'font-family': $font-family-sans,
|
|
212
|
-
'font-weight': $font-weight-normal,
|
|
213
|
-
'font-size': rem-calc(18),
|
|
214
|
-
'line-height': rem-calc(18)
|
|
215
|
-
)
|
|
216
|
-
),
|
|
217
|
-
'link': (
|
|
218
|
-
'default': (
|
|
219
|
-
'font-family': $font-family-sans,
|
|
220
|
-
),
|
|
221
|
-
),
|
|
222
|
-
'bold': (
|
|
223
|
-
'default': (
|
|
224
|
-
'font-family': $font-family-sans-bold,
|
|
225
|
-
'font-weight': 500
|
|
226
|
-
),
|
|
227
|
-
),
|
|
228
|
-
) !default;
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
/* ==================================================
|
|
2
|
-
* Basic maps
|
|
3
|
-
* ================================================== */
|
|
4
|
-
@use 'sass:math';
|
|
5
|
-
|
|
6
|
-
$spacer : 1rem !default;
|
|
7
|
-
$spacers: (
|
|
8
|
-
0: 0,
|
|
9
|
-
1: $spacer * .25,
|
|
10
|
-
2: $spacer * .5,
|
|
11
|
-
3: $spacer,
|
|
12
|
-
4: $spacer * 1.5,
|
|
13
|
-
5: $spacer * 3,
|
|
14
|
-
) !default;
|
|
15
|
-
|
|
16
|
-
$page-padding: (
|
|
17
|
-
xs: $spacer,
|
|
18
|
-
sm: $spacer, // mobile
|
|
19
|
-
md: $spacer,
|
|
20
|
-
lg: $spacer, // tablet
|
|
21
|
-
xl: $spacer,
|
|
22
|
-
xxl: $spacer,
|
|
23
|
-
) !default;
|
|
24
|
-
|
|
25
|
-
$content-spacers-blocks: (
|
|
26
|
-
'text',
|
|
27
|
-
'text-image',
|
|
28
|
-
'text-video'
|
|
29
|
-
) !default;
|
|
30
|
-
|
|
31
|
-
$content-spacers: (
|
|
32
|
-
'xs': (
|
|
33
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
34
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
35
|
-
),
|
|
36
|
-
'sm': (
|
|
37
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
38
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
39
|
-
),
|
|
40
|
-
'md': (
|
|
41
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
42
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
43
|
-
),
|
|
44
|
-
'lg': (
|
|
45
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
46
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
47
|
-
),
|
|
48
|
-
'xl': (
|
|
49
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
50
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
51
|
-
),
|
|
52
|
-
'xxl': (
|
|
53
|
-
'section': map-get($spacers, 5), // space between different sections
|
|
54
|
-
'block': map-get($spacers, 3), // space between content blocks
|
|
55
|
-
),
|
|
56
|
-
) !default;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
/// Adds a custom underline to text elements using a pseudo-element.
|
|
2
|
-
///
|
|
3
|
-
/// This mixin creates a visual underline using `::after`, which allows
|
|
4
|
-
/// for more control than `text-decoration`. It supports customizable
|
|
5
|
-
/// color and thickness, and adjusts vertical spacing responsively.
|
|
6
|
-
///
|
|
7
|
-
/// Useful for link-like text styling or emphasis elements.
|
|
8
|
-
///
|
|
9
|
-
/// @group Effects
|
|
10
|
-
///
|
|
11
|
-
/// @param {Color} $color - The underline color. Default: `$color-primary`.
|
|
12
|
-
/// @param {Length} $width - Thickness of the underline (in px, converted to `rem`). Default: `2px`.
|
|
13
|
-
///
|
|
14
|
-
/// @example scss
|
|
15
|
-
/// .highlighted-text {
|
|
16
|
-
/// @include underline($color-tertiary, 3px);
|
|
17
|
-
/// }
|
|
18
|
-
///
|
|
19
|
-
/// @example css
|
|
20
|
-
/// .highlighted-text::after {
|
|
21
|
-
/// border-bottom: 0.1875rem solid #cc0000;
|
|
22
|
-
/// bottom: -0.09em;
|
|
23
|
-
/// }
|
|
24
|
-
///
|
|
25
|
-
/// @author Steffen Kroggel <developer@steffenkroggel>
|
|
26
|
-
/// @license GNU General Public License v3.0 https://www.gnu.org/licenses/gpl-3.0.en.html
|
|
27
|
-
///
|
|
28
|
-
@mixin underline ($color: $color-primary, $width: 2px) {
|
|
29
|
-
|
|
30
|
-
position: relative;
|
|
31
|
-
display: inline-block;
|
|
32
|
-
|
|
33
|
-
&::after {
|
|
34
|
-
content: '';
|
|
35
|
-
position: absolute;
|
|
36
|
-
left: 0;
|
|
37
|
-
right: 0;
|
|
38
|
-
bottom: -0.09em;
|
|
39
|
-
border-bottom: rem-calc($width) solid $color;
|
|
40
|
-
|
|
41
|
-
@include media-breakpoint-up(xl) {
|
|
42
|
-
bottom: -0.15em;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
}
|