@graupl/graupl 1.0.0-alpha.2 → 1.0.0-alpha.4
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/CHANGELOG.md +44 -0
- package/dist/base/form/form.css +1 -85
- package/dist/base/form/form.css.map +1 -1
- package/dist/base/link/link.css +1 -25
- package/dist/base/link/link.css.map +1 -1
- package/dist/component/button/button.css +1 -61
- package/dist/component/button/button.css.map +1 -1
- package/dist/graupl.css +1 -320
- package/dist/graupl.css.map +1 -1
- package/dist/layout/columns/columns.css +1 -40
- package/dist/layout/columns/columns.css.map +1 -1
- package/dist/layout/container/container.css +1 -37
- package/dist/layout/container/container.css.map +1 -1
- package/dist/state/focus/focus.css +1 -9
- package/dist/state/focus/focus.css.map +1 -1
- package/dist/theme/theme.css +1 -69
- package/dist/theme/theme.css.map +1 -1
- package/dist/utilities/background/background.css +1 -0
- package/dist/utilities/colors/colors.css +2 -0
- package/dist/utilities/colors/colors.css.map +1 -0
- package/docs/.vitepress/config.js +41 -1
- package/docs/.vitepress/theme/custom.scss +29 -29
- package/docs/compiling-graupl.md +56 -0
- package/docs/introduction.md +5 -0
- package/index.html +6 -2
- package/package.json +27 -1
- package/postcss.config.cjs +1 -1
- package/scss/_defaults.scss +3 -0
- package/scss/_index.scss +14 -0
- package/scss/_init.scss +3 -0
- package/scss/base/form/_variables.scss +8 -8
- package/scss/base/link/_variables.scss +5 -8
- package/scss/component/button/_defaults.scss +2 -0
- package/scss/component/button/_index.scss +47 -19
- package/scss/component/button/_variables.scss +36 -10
- package/scss/functions/_important.scss +11 -0
- package/scss/functions/_theme.scss +11 -0
- package/scss/graupl.scss +1 -5
- package/scss/layout/columns/_index.scss +1 -1
- package/scss/state/focus/_variables.scss +3 -3
- package/scss/theme/_defaults.scss +48 -31
- package/scss/theme/_index.scss +13 -66
- package/scss/theme/_variables.scss +102 -452
- package/scss/utilities/_index.scss +3 -0
- package/scss/utilities/colors/_defaults.scss +7 -0
- package/scss/utilities/colors/_index.scss +22 -0
- package/scss/utilities/colors/_variables.scss +3 -0
- package/scss/utilities/colors/colors.scss +3 -0
package/dist/graupl.css
CHANGED
|
@@ -1,321 +1,2 @@
|
|
|
1
|
-
@layer graupl.base{
|
|
2
|
-
input,
|
|
3
|
-
textarea,
|
|
4
|
-
select{
|
|
5
|
-
padding:var(--graupl-input-padding, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-input-padding-x, var(--graupl-gap, 1rem)));
|
|
6
|
-
border-width:var(--graupl-input-border-width, var(--graupl-border-width, 2px));
|
|
7
|
-
border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
|
|
8
|
-
border-radius:var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem));
|
|
9
|
-
font-size:var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem));
|
|
10
|
-
}
|
|
11
|
-
input:disabled,
|
|
12
|
-
textarea:disabled,
|
|
13
|
-
select:disabled{
|
|
14
|
-
cursor:not-allowed;
|
|
15
|
-
}
|
|
16
|
-
label{
|
|
17
|
-
font-size:var(--graupl-label-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
|
|
18
|
-
}
|
|
19
|
-
fieldset{
|
|
20
|
-
display:flex;
|
|
21
|
-
flex-flow:var(--graupl-fieldset-direction, column) wrap;
|
|
22
|
-
gap:var(--graupl-fieldset-gap, calc(var(--graupl-gap, 1rem) / 4));
|
|
23
|
-
padding:var(--graupl-fieldset-padding, var(--graupl-fieldset-padding-y, var(--graupl-input-padding-y, calc(var(--graupl-gap, 1rem) / 2))) var(--graupl-fieldset-padding-x, var(--graupl-input-padding-x, var(--graupl-gap, 1rem))));
|
|
24
|
-
border-width:var(--graupl-fieldset-border-width, var(--graupl-input-border-width, var(--graupl-border-width, 2px)));
|
|
25
|
-
border-style:var(--graupl-fieldset-border-style, var(--graupl-botton-border-style, var(--graupl-border-style, solid)));
|
|
26
|
-
border-radius:var(--graupl-fieldset-border-radius, var(--graupl-input-border-radius, var(--graupl-border-radius, 0.125rem)));
|
|
27
|
-
font-size:var(--graupl-fieldset-font-size, var(--graupl-input-font-size, var(--graupl-font-size-default, 1rem)));
|
|
28
|
-
}
|
|
29
|
-
fieldset:disabled input,
|
|
30
|
-
fieldset:disabled textarea,
|
|
31
|
-
fieldset:disabled select{
|
|
32
|
-
cursor:not-allowed;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
@layer graupl.theme{
|
|
36
|
-
input,
|
|
37
|
-
textarea,
|
|
38
|
-
select{
|
|
39
|
-
border-color:var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)))));
|
|
40
|
-
background:var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
|
|
41
|
-
color:var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
42
|
-
accent-color:var(--graupl-input-accent-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
|
|
43
|
-
}
|
|
44
|
-
input::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder{
|
|
45
|
-
color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
|
|
46
|
-
}
|
|
47
|
-
input::placeholder,
|
|
48
|
-
textarea::placeholder,
|
|
49
|
-
select::placeholder{
|
|
50
|
-
color:var(--graupl-input-placeholder-color, var(--graupl-theme-active--secondary--600, var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)))));
|
|
51
|
-
}
|
|
52
|
-
input:disabled,
|
|
53
|
-
textarea:disabled,
|
|
54
|
-
select:disabled{
|
|
55
|
-
border-color:var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)))));
|
|
56
|
-
color:var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)))));
|
|
57
|
-
}
|
|
58
|
-
input:disabled::-moz-placeholder, textarea:disabled::-moz-placeholder, select:disabled::-moz-placeholder{
|
|
59
|
-
color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
|
|
60
|
-
}
|
|
61
|
-
input:disabled::placeholder,
|
|
62
|
-
textarea:disabled::placeholder,
|
|
63
|
-
select:disabled::placeholder{
|
|
64
|
-
color:var(--graupl-input-disabled-placeholder-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
|
|
65
|
-
}
|
|
66
|
-
label{
|
|
67
|
-
color:var(--graupl-label-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
|
|
68
|
-
}
|
|
69
|
-
label:has(+ input:disabled, + textarea:disabled, + select:disabled){
|
|
70
|
-
color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
|
|
71
|
-
}
|
|
72
|
-
fieldset{
|
|
73
|
-
border-color:var(--graupl-fieldset-border-color, var(--graupl-input-border-color, var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))))));
|
|
74
|
-
background:var(--graupl-fieldset-background, var(--graupl-input-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
|
|
75
|
-
color:var(--graupl-fieldset-color, var(--graupl-input-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))))));
|
|
76
|
-
}
|
|
77
|
-
fieldset:disabled{
|
|
78
|
-
border-color:var(--graupl-fieldset-disabled-border-color, var(--graupl-input-disabled-border-color, var(--graupl-theme-active--secondary--200, var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%))))));
|
|
79
|
-
color:var(--graupl-fieldset-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
|
|
80
|
-
}
|
|
81
|
-
fieldset:disabled label{
|
|
82
|
-
color:var(--graupl-label-disabled-color, var(--graupl-input-disabled-color, var(--graupl-theme-active--secondary--400, var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%))))));
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
@layer graupl.base{
|
|
86
|
-
a{
|
|
87
|
-
-webkit-text-decoration:var(--graupl-link-text-decoration, underline);
|
|
88
|
-
text-decoration:var(--graupl-link-text-decoration, underline);
|
|
89
|
-
text-decoration-thickness:var(--graupl-link-text-decoration-thickness, var(--graupl-border-width, 2px));
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
@layer graupl.theme{
|
|
93
|
-
a{
|
|
94
|
-
color:var(--graupl-link-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
|
|
95
|
-
}
|
|
96
|
-
a:hover{
|
|
97
|
-
color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
|
|
98
|
-
}
|
|
99
|
-
a:active{
|
|
100
|
-
color:var(--graupl-link-active-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
|
|
101
|
-
}
|
|
102
|
-
a:visited{
|
|
103
|
-
color:var(--graupl-link-visited-color, var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)))));
|
|
104
|
-
}
|
|
105
|
-
a:visited:hover{
|
|
106
|
-
color:var(--graupl-link-hover-color, var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)))));
|
|
107
|
-
}
|
|
108
|
-
}
|
|
109
|
-
@layer graupl.layout{
|
|
110
|
-
.container,
|
|
111
|
-
.container > .full-width{
|
|
112
|
-
--graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
|
|
113
|
-
--graupl-container-content:min(
|
|
114
|
-
var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
|
|
115
|
-
calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
|
|
116
|
-
);
|
|
117
|
-
--graupl-container-breakout:minmax(
|
|
118
|
-
0,
|
|
119
|
-
var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
|
|
120
|
-
);
|
|
121
|
-
--graupl-container-feature:minmax(
|
|
122
|
-
0,
|
|
123
|
-
var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
|
|
124
|
-
);
|
|
125
|
-
display:grid;
|
|
126
|
-
grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
|
|
127
|
-
}
|
|
128
|
-
.container > :not(.breakout, .full-width, .feature),
|
|
129
|
-
.container > .full-width > :not(.breakout, .full-width, .feature){
|
|
130
|
-
grid-column:content;
|
|
131
|
-
}
|
|
132
|
-
.container .breakout,
|
|
133
|
-
.container > .full-width .breakout{
|
|
134
|
-
grid-column:breakout;
|
|
135
|
-
}
|
|
136
|
-
.container .feature,
|
|
137
|
-
.container > .full-width .feature{
|
|
138
|
-
grid-column:feature;
|
|
139
|
-
}
|
|
140
|
-
.container .full-width,
|
|
141
|
-
.container > .full-width .full-width{
|
|
142
|
-
grid-column:full-width;
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
@layer graupl.layout{
|
|
146
|
-
.columns{
|
|
147
|
-
display:grid;
|
|
148
|
-
grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
|
|
149
|
-
gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
|
|
150
|
-
}
|
|
151
|
-
.columns > *{
|
|
152
|
-
grid-column:span var(--graupl-columns-span, 1);
|
|
153
|
-
}
|
|
154
|
-
.columns-1{
|
|
155
|
-
--graupl-columns-count:1;
|
|
156
|
-
}
|
|
157
|
-
.span-1{
|
|
158
|
-
--graupl-columns-span:1;
|
|
159
|
-
}
|
|
160
|
-
.columns-2{
|
|
161
|
-
--graupl-columns-count:2;
|
|
162
|
-
}
|
|
163
|
-
.span-2{
|
|
164
|
-
--graupl-columns-span:2;
|
|
165
|
-
}
|
|
166
|
-
.columns-3{
|
|
167
|
-
--graupl-columns-count:3;
|
|
168
|
-
}
|
|
169
|
-
.span-3{
|
|
170
|
-
--graupl-columns-span:3;
|
|
171
|
-
}
|
|
172
|
-
.columns-4{
|
|
173
|
-
--graupl-columns-count:4;
|
|
174
|
-
}
|
|
175
|
-
.span-4{
|
|
176
|
-
--graupl-columns-span:4;
|
|
177
|
-
}
|
|
178
|
-
@media screen and (max-width: 48ch){
|
|
179
|
-
.columns{
|
|
180
|
-
--graupl-columns-min-width:1fr;
|
|
181
|
-
}
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
@layer graupl.component{
|
|
185
|
-
.button{
|
|
186
|
-
display:flex;
|
|
187
|
-
align-items:center;
|
|
188
|
-
justify-content:center;
|
|
189
|
-
min-width:var(--graupl-button-min-width, 44px);
|
|
190
|
-
min-height:var(--graupl-button-min-height, 44px);
|
|
191
|
-
padding:var(--graupl-button-padding, var(--graupl-button-padding-y, calc(var(--graupl-gap, 1rem) / 2)) var(--graupl-button-padding-x, var(--graupl-gap, 1rem)));
|
|
192
|
-
transition:var(--graupl-button-transition, background var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), border-color var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease), transform var(--graupl-transition-duration-fast, 150ms) var(--graupl-transition-timing-function, ease));
|
|
193
|
-
border-width:var(--graupl-button-border-width, var(--graupl-border-width, 2px));
|
|
194
|
-
border-style:var(--graupl-botton-border-style, var(--graupl-border-style, solid));
|
|
195
|
-
border-radius:var(--graupl-button-border-radius, var(--graupl-border-radius, 0.125rem));
|
|
196
|
-
font-size:var(--graupl-button-font-size, var(--graupl-font-size-default, 1rem));
|
|
197
|
-
cursor:pointer;
|
|
198
|
-
}
|
|
199
|
-
.button:hover{
|
|
200
|
-
transform:var(--graupl-button-hover-transform, none);
|
|
201
|
-
}
|
|
202
|
-
.button:active{
|
|
203
|
-
transform:var(--graupl-button-active-transform, scale(0.95));
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
@layer graupl.theme{
|
|
207
|
-
.button{
|
|
208
|
-
border-color:var(--graupl-button-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
209
|
-
background:var(--graupl-button-background, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
|
|
210
|
-
color:var(--graupl-button-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
211
|
-
}
|
|
212
|
-
.button:hover{
|
|
213
|
-
border-color:var(--graupl-button-hover-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
214
|
-
background:var(--graupl-button-hover-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
215
|
-
color:var(--graupl-button-hover-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
|
|
216
|
-
}
|
|
217
|
-
.button:active{
|
|
218
|
-
border-color:var(--graupl-button-active-border-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
219
|
-
background:var(--graupl-button-active-background, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
220
|
-
color:var(--graupl-button-active-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)))));
|
|
221
|
-
}
|
|
222
|
-
.button.primary{
|
|
223
|
-
--graupl-button-hover-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
|
|
224
|
-
--graupl-button-active-background:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
|
|
225
|
-
--graupl-button-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
|
|
226
|
-
--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
|
|
227
|
-
--graupl-button-active-border-color:var(--graupl-theme-active--primary--700, var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%))));
|
|
228
|
-
}
|
|
229
|
-
.button.secondary{
|
|
230
|
-
--graupl-button-hover-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
|
|
231
|
-
--graupl-button-active-background:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
|
|
232
|
-
--graupl-button-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
|
|
233
|
-
--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
|
|
234
|
-
--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700, var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%))));
|
|
235
|
-
}
|
|
236
|
-
.button.tertiary{
|
|
237
|
-
--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
|
|
238
|
-
--graupl-button-active-background:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
|
|
239
|
-
--graupl-button-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
|
|
240
|
-
--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
|
|
241
|
-
--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700, var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%))));
|
|
242
|
-
}
|
|
243
|
-
}
|
|
244
|
-
@layer graupl.state{
|
|
245
|
-
*:focus-visible{
|
|
246
|
-
border-color:transparent;
|
|
247
|
-
outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
248
|
-
outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
|
|
249
|
-
box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
|
|
250
|
-
}
|
|
251
|
-
}
|
|
252
|
-
@layer graupl.theme{
|
|
253
|
-
:root{
|
|
254
|
-
background:var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))));
|
|
255
|
-
color:var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%))));
|
|
256
|
-
font-family:var(--graupl-font-family, system-ui, -apple-system, blinkmacsystemfont, Segoe UI, roboto, Helvetica Neue, arial, sans-serif);
|
|
257
|
-
font-size:var(--graupl-font-size, clamp(0.85rem, 0.8rem + 0.5vw, 1.25rem));
|
|
258
|
-
}
|
|
259
|
-
.dark-mode{
|
|
260
|
-
--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100, var(--graupl-primary--900, hsl(219, 100%, 10%)));
|
|
261
|
-
--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200, var(--graupl-primary--800, hsl(219, 90%, 20%)));
|
|
262
|
-
--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300, var(--graupl-primary--700, hsl(219, 80%, 35%)));
|
|
263
|
-
--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400, var(--graupl-primary--600, hsl(219, 75%, 45%)));
|
|
264
|
-
--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
|
|
265
|
-
--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600, var(--graupl-primary--400, hsl(219, 75%, 55%)));
|
|
266
|
-
--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700, var(--graupl-primary--300, hsl(219, 80%, 65%)));
|
|
267
|
-
--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800, var(--graupl-primary--200, hsl(219, 90%, 80%)));
|
|
268
|
-
--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900, var(--graupl-primary--100, hsl(219, 100%, 95%)));
|
|
269
|
-
--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
|
|
270
|
-
--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
|
|
271
|
-
--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
|
|
272
|
-
--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
|
|
273
|
-
--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
|
|
274
|
-
--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
|
|
275
|
-
--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
|
|
276
|
-
--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
|
|
277
|
-
--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
|
|
278
|
-
--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
|
|
279
|
-
--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
|
|
280
|
-
--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
|
|
281
|
-
--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
|
|
282
|
-
--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
|
|
283
|
-
--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
|
|
284
|
-
--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
|
|
285
|
-
--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
|
|
286
|
-
--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
|
|
287
|
-
color-scheme:dark;
|
|
288
|
-
}
|
|
289
|
-
.light-mode{
|
|
290
|
-
--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%)));
|
|
291
|
-
--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200, var(--graupl-primary--200, hsl(219, 90%, 80%)));
|
|
292
|
-
--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300, var(--graupl-primary--300, hsl(219, 80%, 65%)));
|
|
293
|
-
--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400, var(--graupl-primary--400, hsl(219, 75%, 55%)));
|
|
294
|
-
--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500, var(--graupl-primary--500, hsl(219, 75%, 50%)));
|
|
295
|
-
--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600, var(--graupl-primary--600, hsl(219, 75%, 45%)));
|
|
296
|
-
--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700, var(--graupl-primary--700, hsl(219, 80%, 35%)));
|
|
297
|
-
--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800, var(--graupl-primary--800, hsl(219, 90%, 20%)));
|
|
298
|
-
--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)));
|
|
299
|
-
--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100, var(--graupl-secondary--100, hsl(235, 40%, 95%)));
|
|
300
|
-
--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200, var(--graupl-secondary--200, hsl(235, 30%, 80%)));
|
|
301
|
-
--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300, var(--graupl-secondary--300, hsl(235, 20%, 65%)));
|
|
302
|
-
--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400, var(--graupl-secondary--400, hsl(235, 15%, 55%)));
|
|
303
|
-
--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500, var(--graupl-secondary--500, hsl(235, 15%, 50%)));
|
|
304
|
-
--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600, var(--graupl-secondary--600, hsl(235, 15%, 45%)));
|
|
305
|
-
--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700, var(--graupl-secondary--700, hsl(235, 20%, 35%)));
|
|
306
|
-
--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800, var(--graupl-secondary--800, hsl(235, 30%, 20%)));
|
|
307
|
-
--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900, var(--graupl-secondary--900, hsl(235, 40%, 10%)));
|
|
308
|
-
--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100, var(--graupl-tertiary--100, hsl(340, 85%, 95%)));
|
|
309
|
-
--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200, var(--graupl-tertiary--200, hsl(340, 75%, 80%)));
|
|
310
|
-
--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300, var(--graupl-tertiary--300, hsl(340, 65%, 65%)));
|
|
311
|
-
--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400, var(--graupl-tertiary--400, hsl(340, 60%, 55%)));
|
|
312
|
-
--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500, var(--graupl-tertiary--500, hsl(340, 60%, 50%)));
|
|
313
|
-
--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600, var(--graupl-tertiary--600, hsl(340, 60%, 45%)));
|
|
314
|
-
--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700, var(--graupl-tertiary--700, hsl(340, 65%, 35%)));
|
|
315
|
-
--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800, var(--graupl-tertiary--800, hsl(340, 75%, 20%)));
|
|
316
|
-
--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900, var(--graupl-tertiary--900, hsl(340, 85%, 10%)));
|
|
317
|
-
color-scheme:light;
|
|
318
|
-
}
|
|
319
|
-
}
|
|
320
|
-
|
|
1
|
+
@layer graupl.base, graupl.layout, graupl.component, graupl.theme, graupl.utilities, graupl.state;@layer graupl.base{input,select,textarea{border-radius:var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-input-border-width,var(--graupl-border-width,2px));font-size:var(--graupl-input-font-size,var(--graupl-font-size-default,1rem));padding:var(--graupl-input-padding,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-input-padding-x,var(--graupl-gap,1rem)))}input:disabled,select:disabled,textarea:disabled{cursor:not-allowed}label{font-size:var(--graupl-label-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)))}fieldset{border-radius:var(--graupl-fieldset-border-radius,var(--graupl-input-border-radius,var(--graupl-border-radius,.125rem)));border-style:var(--graupl-fieldset-border-style,var(--graupl-botton-border-style,var(--graupl-border-style,solid)));border-width:var(--graupl-fieldset-border-width,var(--graupl-input-border-width,var(--graupl-border-width,2px)));display:flex;flex-flow:var(--graupl-fieldset-direction,column) wrap;font-size:var(--graupl-fieldset-font-size,var(--graupl-input-font-size,var(--graupl-font-size-default,1rem)));gap:var(--graupl-fieldset-gap,calc(var(--graupl-gap, 1rem)/4));padding:var(--graupl-fieldset-padding,var(--graupl-fieldset-padding-y,var(--graupl-input-padding-y,calc(var(--graupl-gap, 1rem)/2))) var(--graupl-fieldset-padding-x,var(--graupl-input-padding-x,var(--graupl-gap,1rem))))}fieldset:disabled input,fieldset:disabled select,fieldset:disabled textarea{cursor:not-allowed}}@layer graupl.theme{input,select,textarea{accent-color:var(--graupl-input-accent-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))));background:var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b))));color:var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}input::-moz-placeholder,select::-moz-placeholder,textarea::-moz-placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input::placeholder,select::placeholder,textarea::placeholder{color:var(--graupl-input-placeholder-color,var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484))))}input:disabled,select:disabled,textarea:disabled{border-color:var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb))));color:var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d))))}input:disabled::-moz-placeholder,select:disabled::-moz-placeholder,textarea:disabled::-moz-placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}input:disabled::placeholder,select:disabled::placeholder,textarea:disabled::placeholder{color:var(--graupl-input-disabled-placeholder-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}label{color:var(--graupl-label-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}label:has(+input:disabled,+textarea:disabled,+select:disabled){color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset{background:var(--graupl-fieldset-background,var(--graupl-input-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));border-color:var(--graupl-fieldset-border-color,var(--graupl-input-border-color,var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))));color:var(--graupl-fieldset-color,var(--graupl-input-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))))}fieldset:disabled{border-color:var(--graupl-fieldset-disabled-border-color,var(--graupl-input-disabled-border-color,var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))));color:var(--graupl-fieldset-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}fieldset:disabled label{color:var(--graupl-label-disabled-color,var(--graupl-input-disabled-color,var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))))}}@layer graupl.base{a{-webkit-text-decoration:var(--graupl-link-text-decoration,underline);text-decoration:var(--graupl-link-text-decoration,underline);text-decoration-thickness:var(--graupl-link-text-decoration-thickness,var(--graupl-border-width,2px))}}@layer graupl.theme{a{color:var(--graupl-link-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:active{color:var(--graupl-link-active-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}a:visited{color:var(--graupl-link-visited-color,var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1))))}a:visited:hover{color:var(--graupl-link-hover-color,var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46))))}}@layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}}@layer graupl.layout{@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}@layer graupl.component{.button{align-items:center;border-radius:var(--graupl-button-border-radius,var(--graupl-border-radius,.125rem));border-style:var(--graupl-botton-border-style,var(--graupl-border-style,solid));border-width:var(--graupl-button-border-width,var(--graupl-border-width,2px));cursor:pointer;display:flex;font-size:var(--graupl-button-font-size,var(--graupl-font-size-default,1rem));justify-content:center;min-height:var(--graupl-button-min-height,44px);min-width:var(--graupl-button-min-width,44px);padding:var(--graupl-button-padding,var(--graupl-button-padding-y,calc(var(--graupl-gap, 1rem)/2)) var(--graupl-button-padding-x,var(--graupl-gap,1rem)));transition:var(--graupl-button-transition,background var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease),transform var(--graupl-transition-duration-fast,.15s) var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform,none)}.button:active{transform:var(--graupl-button-active-transform,scale(.95))}.button:disabled{cursor:not-allowed}.button:disabled:active,.button:disabled:hover{transform:none}@media (prefers-reduced-motion:reduce){.button{transition:var(--graupl-button-transition-reduced-motion,background var(--graupl-transition-timing-function,ease),color var(--graupl-transition-timing-function,ease),border-color var(--graupl-transition-timing-function,ease))}.button:hover{transform:var(--graupl-button-hover-transform-reduced-motion,none)}.button:active{transform:var(--graupl-button-active-transform-reduced-motion,scale(.98))}}}@layer graupl.theme{.button{background:var(--graupl-button-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))))}.button:hover{background:var(--graupl-button-hover-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-hover-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-hover-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:active{background:var(--graupl-button-active-background,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));border-color:var(--graupl-button-active-border-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));color:var(--graupl-button-active-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))))}.button:disabled,.button:disabled:active,.button:disabled:hover{background:var(--graupl-button-disabled-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));border-color:var(--graupl-button-disabled-border-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))));color:var(--graupl-button-disabled-color,var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa))))}.button.primary{--graupl-button-hover-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-hover-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-active-border-color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)));--graupl-button-disabled-border-color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))}.button.secondary{--graupl-button-hover-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-hover-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-active-border-color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)));--graupl-button-disabled-border-color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))}.button.tertiary{--graupl-button-hover-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-hover-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-active-border-color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)));--graupl-button-disabled-border-color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))}}@layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))))}}@layer graupl.theme{:root{background:var(--graupl-background,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff))));color:var(--graupl-font-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));font-family:var(--graupl-font-family,system-ui,-apple-system,blinkmacsystemfont,Segoe UI,roboto,Helvetica Neue,arial,sans-serif);font-size:var(--graupl-font-size,clamp(.85rem,.8rem + .5vw,1.25rem))}.dark-mode{--graupl-theme-active--primary--100:var(--graupl-theme-dark--primary--100,var(--graupl-primary--900,#001233));--graupl-theme-active--primary--200:var(--graupl-theme-dark--primary--200,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--300:var(--graupl-theme-dark--primary--300,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--400:var(--graupl-theme-dark--primary--400,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--500:var(--graupl-theme-dark--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-dark--primary--600,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--700:var(--graupl-theme-dark--primary--700,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--800:var(--graupl-theme-dark--primary--800,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--900:var(--graupl-theme-dark--primary--900,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--secondary--100:var(--graupl-theme-dark--secondary--100,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--secondary--200:var(--graupl-theme-dark--secondary--200,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--300:var(--graupl-theme-dark--secondary--300,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--400:var(--graupl-theme-dark--secondary--400,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--500:var(--graupl-theme-dark--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-dark--secondary--600,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--700:var(--graupl-theme-dark--secondary--700,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--800:var(--graupl-theme-dark--secondary--800,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--900:var(--graupl-theme-dark--secondary--900,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--tertiary--100:var(--graupl-theme-dark--tertiary--100,var(--graupl-tertiary--900,#2f0412));--graupl-theme-active--tertiary--200:var(--graupl-theme-dark--tertiary--200,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--300:var(--graupl-theme-dark--tertiary--300,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--400:var(--graupl-theme-dark--tertiary--400,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--500:var(--graupl-theme-dark--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-dark--tertiary--600,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--700:var(--graupl-theme-dark--tertiary--700,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--800:var(--graupl-theme-dark--tertiary--800,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--900:var(--graupl-theme-dark--tertiary--900,var(--graupl-tertiary--100,#fde7ef));color-scheme:dark}.light-mode{--graupl-theme-active--primary--100:var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff));--graupl-theme-active--primary--200:var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa));--graupl-theme-active--primary--300:var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed));--graupl-theme-active--primary--400:var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2));--graupl-theme-active--primary--500:var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df));--graupl-theme-active--primary--600:var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9));--graupl-theme-active--primary--700:var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1));--graupl-theme-active--primary--800:var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561));--graupl-theme-active--primary--900:var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233));--graupl-theme-active--secondary--100:var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7));--graupl-theme-active--secondary--200:var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb));--graupl-theme-active--secondary--300:var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8));--graupl-theme-active--secondary--400:var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d));--graupl-theme-active--secondary--500:var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093));--graupl-theme-active--secondary--600:var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484));--graupl-theme-active--secondary--700:var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b));--graupl-theme-active--secondary--800:var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642));--graupl-theme-active--secondary--900:var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124));--graupl-theme-active--tertiary--100:var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef));--graupl-theme-active--tertiary--200:var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf));--graupl-theme-active--tertiary--300:var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92));--graupl-theme-active--tertiary--400:var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775));--graupl-theme-active--tertiary--500:var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36));--graupl-theme-active--tertiary--600:var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c));--graupl-theme-active--tertiary--700:var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46));--graupl-theme-active--tertiary--800:var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26));--graupl-theme-active--tertiary--900:var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412));color-scheme:light}}@layer graupl.utilities{.bg-primary-100{background:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.text-primary-100{color:var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))!important}.bg-primary-200{background:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.text-primary-200{color:var(--graupl-theme-active--primary--200,var(--graupl-theme-light--primary--200,var(--graupl-primary--200,#9ebefa)))!important}.bg-primary-300{background:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.text-primary-300{color:var(--graupl-theme-active--primary--300,var(--graupl-theme-light--primary--300,var(--graupl-primary--300,#5e90ed)))!important}.bg-primary-400{background:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.text-primary-400{color:var(--graupl-theme-active--primary--400,var(--graupl-theme-light--primary--400,var(--graupl-primary--400,#3672e2)))!important}.bg-primary-500{background:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.text-primary-500{color:var(--graupl-theme-active--primary--500,var(--graupl-theme-light--primary--500,var(--graupl-primary--500,#2063df)))!important}.bg-primary-600{background:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.text-primary-600{color:var(--graupl-theme-active--primary--600,var(--graupl-theme-light--primary--600,var(--graupl-primary--600,#1d59c9)))!important}.bg-primary-700{background:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.text-primary-700{color:var(--graupl-theme-active--primary--700,var(--graupl-theme-light--primary--700,var(--graupl-primary--700,#1244a1)))!important}.bg-primary-800{background:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.text-primary-800{color:var(--graupl-theme-active--primary--800,var(--graupl-theme-light--primary--800,var(--graupl-primary--800,#052561)))!important}.bg-primary-900{background:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.text-primary-900{color:var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233)))!important}.bg-secondary-100{background:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.text-secondary-100{color:var(--graupl-theme-active--secondary--100,var(--graupl-theme-light--secondary--100,var(--graupl-secondary--100,#edeef7)))!important}.bg-secondary-200{background:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.text-secondary-200{color:var(--graupl-theme-active--secondary--200,var(--graupl-theme-light--secondary--200,var(--graupl-secondary--200,#bdbfdb)))!important}.bg-secondary-300{background:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.text-secondary-300{color:var(--graupl-theme-active--secondary--300,var(--graupl-theme-light--secondary--300,var(--graupl-secondary--300,#9497b8)))!important}.bg-secondary-400{background:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.text-secondary-400{color:var(--graupl-theme-active--secondary--400,var(--graupl-theme-light--secondary--400,var(--graupl-secondary--400,#7b7e9d)))!important}.bg-secondary-500{background:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.text-secondary-500{color:var(--graupl-theme-active--secondary--500,var(--graupl-theme-light--secondary--500,var(--graupl-secondary--500,#6c7093)))!important}.bg-secondary-600{background:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.text-secondary-600{color:var(--graupl-theme-active--secondary--600,var(--graupl-theme-light--secondary--600,var(--graupl-secondary--600,#626484)))!important}.bg-secondary-700{background:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.text-secondary-700{color:var(--graupl-theme-active--secondary--700,var(--graupl-theme-light--secondary--700,var(--graupl-secondary--700,#474a6b)))!important}.bg-secondary-800{background:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.text-secondary-800{color:var(--graupl-theme-active--secondary--800,var(--graupl-theme-light--secondary--800,var(--graupl-secondary--800,#242642)))!important}.bg-secondary-900{background:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.text-secondary-900{color:var(--graupl-theme-active--secondary--900,var(--graupl-theme-light--secondary--900,var(--graupl-secondary--900,#0f1124)))!important}.bg-tertiary-100{background:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.text-tertiary-100{color:var(--graupl-theme-active--tertiary--100,var(--graupl-theme-light--tertiary--100,var(--graupl-tertiary--100,#fde7ef)))!important}.bg-tertiary-200{background:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.text-tertiary-200{color:var(--graupl-theme-active--tertiary--200,var(--graupl-theme-light--tertiary--200,var(--graupl-tertiary--200,#f2a6bf)))!important}.bg-tertiary-300{background:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.text-tertiary-300{color:var(--graupl-theme-active--tertiary--300,var(--graupl-theme-light--tertiary--300,var(--graupl-tertiary--300,#e06c92)))!important}.bg-tertiary-400{background:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.text-tertiary-400{color:var(--graupl-theme-active--tertiary--400,var(--graupl-theme-light--tertiary--400,var(--graupl-tertiary--400,#d14775)))!important}.bg-tertiary-500{background:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.text-tertiary-500{color:var(--graupl-theme-active--tertiary--500,var(--graupl-theme-light--tertiary--500,var(--graupl-tertiary--500,#c36)))!important}.bg-tertiary-600{background:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.text-tertiary-600{color:var(--graupl-theme-active--tertiary--600,var(--graupl-theme-light--tertiary--600,var(--graupl-tertiary--600,#b82e5c)))!important}.bg-tertiary-700{background:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.text-tertiary-700{color:var(--graupl-theme-active--tertiary--700,var(--graupl-theme-light--tertiary--700,var(--graupl-tertiary--700,#931f46)))!important}.bg-tertiary-800{background:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.text-tertiary-800{color:var(--graupl-theme-active--tertiary--800,var(--graupl-theme-light--tertiary--800,var(--graupl-tertiary--800,#590d26)))!important}.bg-tertiary-900{background:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}.text-tertiary-900{color:var(--graupl-theme-active--tertiary--900,var(--graupl-theme-light--tertiary--900,var(--graupl-tertiary--900,#2f0412)))!important}}
|
|
321
2
|
/*# sourceMappingURL=graupl.css.map */
|
package/dist/graupl.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/
|
|
1
|
+
{"version":3,"sources":["../scss/_init.scss","../scss/mixins/_layer.scss","../scss/base/form/_index.scss","../scss/base/form/_variables.scss","graupl.css","../scss/base/link/_index.scss","../scss/layout/container/_index.scss","../scss/layout/columns/_index.scss","../scss/layout/columns/_variables.scss","../scss/component/button/_index.scss","../scss/component/button/_variables.scss","../scss/mixins/_media-queries.scss","../scss/state/focus/_index.scss","../scss/state/focus/_variables.scss","../scss/theme/_index.scss","../scss/theme/_variables.scss","../scss/utilities/colors/_index.scss"],"names":[],"mappings":"AAEA,iGAAA,CCOI,mBCHF,sBAME,mFCiFkB,CDlFlB,+EC8EiB,CD/EjB,4EC2EiB,CDxEjB,4ECGc,CDPd,sJEEF,CFIE,iDACE,kBEAJ,CFIA,MACE,0GEFF,CFKA,SAOE,wHC0EqB,CD3ErB,mHCuEoB,CDxEpB,gHCoEoB,CDxEpB,YAAA,CACA,sDAAA,CAMA,6GCSiB,CDdjB,8DCCW,CDAX,2NECF,CFMI,4EAGE,kBEJN,CACF,CH1BI,oBCoCF,sBAME,iKC8EiB,CDhFjB,6JCFe,CDCf,uKC+DiB,CD7DjB,mJENF,CFSE,4EACE,qKELJ,CFIE,6DACE,qKELJ,CFQE,iDACE,gLCyDwB,CDxDxB,kKEJJ,CFMI,uGACE,iNEFN,CFCI,wFACE,iNEFN,CFOA,MACE,6KELF,CFOE,+DACE,qMELJ,CFSA,SAEE,+LC1BkB,CDyBlB,2MC2CoB,CDzCpB,gLEPF,CFSE,kBACE,6NC0C2B,CDzC3B,wMEPJ,CFSI,wBACE,qMEPN,CACF,CHtEI,mBIHF,EACE,oEAAA,CAAA,4DAAA,CACA,qGD4EF,CACF,CH5EI,oBIIF,EACE,kJD2EF,CCzEE,QACE,2JD2EJ,CCxEE,SACE,4JD0EJ,CCvEE,UACE,0JDyEJ,CCvEI,gBACE,2JDyEN,CACF,CH7FI,qBKFF,kCAEE,4FAAA,CACA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XFiGF,CExFE,4GACE,mBF2FJ,CExFE,sDACE,oBF2FJ,CExFE,oDACE,mBF2FJ,CExFE,0DACE,sBF2FJ,CGjIA,SACE,YAAA,CAKA,oDCTU,CDKV,+SHsIF,CGhIE,WACE,6CHkIJ,CG7HE,SACE,wBH+HJ,CG5HE,QACE,uBH8HJ,CGnIE,SACE,wBHqIJ,CGlIE,QACE,uBHoIJ,CGzIE,SACE,wBH2IJ,CGxIE,QACE,uBH0IJ,CG/IE,SACE,wBHiJJ,CG9IE,QACE,uBHgJJ,CAjCF,CHjII,qBMuBF,mCACE,SACE,8BH6IF,CACF,CACF,CHxKI,wBQCF,QAEE,kBAAA,CAQA,oFCsFmB,CDvFnB,+ECmFkB,CDpFlB,6ECgFkB,CD5ElB,cAAA,CAXA,YAAA,CAUA,6ECIe,CDZf,sBAAA,CAEA,+CCHgB,CDEhB,6CCNe,CDQf,yJCKa,CDJb,0bL+KF,CKxKE,cACE,mDL0KJ,CKvKE,eACE,0DLyKJ,CKtKE,iBACE,kBLwKJ,CKtKI,+CAEE,cLuKN,COjMA,uCFgCE,QACE,iOLoKF,CKlKE,cACE,kELoKJ,CKjKE,eACE,yELmKJ,CACF,CACF,CH/MI,oBQiDF,QAEE,8JCEgB,CDHhB,kKCqDkB,CDnDlB,oJLiKF,CK/JE,cAEE,oKCCoB,CDFpB,wKCoDsB,CDlDtB,0JLiKJ,CK9JE,eAEE,qKCDqB,CDArB,yKCkDuB,CDhDvB,2JLgKJ,CKxJI,gEAGE,uKCTqB,CDQrB,2KC0CuB,CDxCvB,6JL8JN,CKzJI,gBACE,oJAAA,CACA,qJAAA,CACA,gJAAA,CACA,sJAAA,CACA,uJAAA,CACA,yJL2JN,CKjKI,kBACE,0JAAA,CACA,2JAAA,CACA,sJAAA,CACA,4JAAA,CACA,6JAAA,CACA,+JLmKN,CKzKI,iBACE,uJAAA,CACA,wJAAA,CACA,mJAAA,CACA,yJAAA,CACA,0JAAA,CACA,4JL2KN,CACF,CHlQI,oBWHF,eACE,wBAAA,CAGA,smBCqBe,CDvBf,iSAAA,CACA,0JRyQF,CACF,CH1QI,oBaAF,MACE,uJC2GS,CD1GT,kJCsGS,CDrGT,gICiGU,CDhGV,oEV6QF,CUzQA,WAGM,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,6GAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,mHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,6GAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAAA,gHAAA,CAIJ,iBVgSF,CU5RA,YAGM,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,8GAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,oHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,8GAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAAA,iHAAA,CAIJ,kBVmTF,CACF,CH9UI,wBeGE,gBACE,wIZ8UN,CY3UI,kBACE,mIZ6UN,CYlVI,gBACE,wIZoVN,CYjVI,kBACE,mIZmVN,CYxVI,gBACE,wIZ0VN,CYvVI,kBACE,mIZyVN,CY9VI,gBACE,wIZgWN,CY7VI,kBACE,mIZ+VN,CYpWI,gBACE,wIZsWN,CYnWI,kBACE,mIZqWN,CY1WI,gBACE,wIZ4WN,CYzWI,kBACE,mIZ2WN,CYhXI,gBACE,wIZkXN,CY/WI,kBACE,mIZiXN,CYtXI,gBACE,wIZwXN,CYrXI,kBACE,mIZuXN,CY5XI,gBACE,wIZ8XN,CY3XI,kBACE,mIZ6XN,CYlYI,kBACE,8IZoYN,CYjYI,oBACE,yIZmYN,CYxYI,kBACE,8IZ0YN,CYvYI,oBACE,yIZyYN,CY9YI,kBACE,8IZgZN,CY7YI,oBACE,yIZ+YN,CYpZI,kBACE,8IZsZN,CYnZI,oBACE,yIZqZN,CY1ZI,kBACE,8IZ4ZN,CYzZI,oBACE,yIZ2ZN,CYhaI,kBACE,8IZkaN,CY/ZI,oBACE,yIZiaN,CYtaI,kBACE,8IZwaN,CYraI,oBACE,yIZuaN,CY5aI,kBACE,8IZ8aN,CY3aI,oBACE,yIZ6aN,CYlbI,kBACE,8IZobN,CYjbI,oBACE,yIZmbN,CYxbI,iBACE,2IZ0bN,CYvbI,mBACE,sIZybN,CY9bI,iBACE,2IZgcN,CY7bI,mBACE,sIZ+bN,CYpcI,iBACE,2IZscN,CYncI,mBACE,sIZqcN,CY1cI,iBACE,2IZ4cN,CYzcI,mBACE,sIZ2cN,CYhdI,iBACE,wIZkdN,CY/cI,mBACE,mIZidN,CYtdI,iBACE,2IZwdN,CYrdI,mBACE,sIZudN,CY5dI,iBACE,2IZ8dN,CY3dI,mBACE,sIZ6dN,CYleI,iBACE,2IZoeN,CYjeI,mBACE,sIZmeN,CYxeI,iBACE,2IZ0eN,CYveI,mBACE,sIZyeN,CACF","file":"graupl.css"}
|
|
@@ -1,41 +1,2 @@
|
|
|
1
|
-
@layer graupl.layout{
|
|
2
|
-
.columns{
|
|
3
|
-
display:grid;
|
|
4
|
-
grid-template-columns:var(--graupl-columns, repeat(auto-fit, minmax(var(--graupl-columns-min-width, calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem)) * (var(--graupl-columns-count, 3) - 1)) / var(--graupl-columns-count, 3))), var(--graupl-columns-max-width, 1fr))));
|
|
5
|
-
gap:var(--graupl-columns-gap, var(--graupl-gap, 1rem));
|
|
6
|
-
}
|
|
7
|
-
.columns > *{
|
|
8
|
-
grid-column:span var(--graupl-columns-span, 1);
|
|
9
|
-
}
|
|
10
|
-
.columns-1{
|
|
11
|
-
--graupl-columns-count:1;
|
|
12
|
-
}
|
|
13
|
-
.span-1{
|
|
14
|
-
--graupl-columns-span:1;
|
|
15
|
-
}
|
|
16
|
-
.columns-2{
|
|
17
|
-
--graupl-columns-count:2;
|
|
18
|
-
}
|
|
19
|
-
.span-2{
|
|
20
|
-
--graupl-columns-span:2;
|
|
21
|
-
}
|
|
22
|
-
.columns-3{
|
|
23
|
-
--graupl-columns-count:3;
|
|
24
|
-
}
|
|
25
|
-
.span-3{
|
|
26
|
-
--graupl-columns-span:3;
|
|
27
|
-
}
|
|
28
|
-
.columns-4{
|
|
29
|
-
--graupl-columns-count:4;
|
|
30
|
-
}
|
|
31
|
-
.span-4{
|
|
32
|
-
--graupl-columns-span:4;
|
|
33
|
-
}
|
|
34
|
-
@media screen and (max-width: 48ch){
|
|
35
|
-
.columns{
|
|
36
|
-
--graupl-columns-min-width:1fr;
|
|
37
|
-
}
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
|
|
1
|
+
@layer graupl.layout{.columns{display:grid;gap:var(--graupl-columns-gap,var(--graupl-gap,1rem));grid-template-columns:var(--graupl-columns,repeat(auto-fit,minmax(var(--graupl-columns-min-width,calc((var(--graupl-content-max-width, 96ch) - var(--graupl-columns-gap, var(--graupl-gap, 1rem))*(var(--graupl-columns-count, 3) - 1))/var(--graupl-columns-count, 3))),var(--graupl-columns-max-width,1fr))))}.columns>*{grid-column:span var(--graupl-columns-span,1)}.count-1{--graupl-columns-count:1}.span-1{--graupl-columns-span:1}.count-2{--graupl-columns-count:2}.span-2{--graupl-columns-span:2}.count-3{--graupl-columns-count:3}.span-3{--graupl-columns-span:3}.count-4{--graupl-columns-count:4}.span-4{--graupl-columns-span:4}@media screen and (max-width:48ch){.columns{--graupl-columns-min-width:1fr}}}
|
|
41
2
|
/*# sourceMappingURL=columns.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/columns/_index.scss","../../../scss/layout/columns/_variables.scss","columns.css"],"names":[],"mappings":"AASI,qBCDF,SACE,YAAA,CAKA,oDCTU,CDKV,+SELF,CFWE,WACE,6CETJ,CFcE,SACE,wBEZJ,CFeE,QACE,uBEbJ,CFQE,SACE,wBENJ,CFSE,QACE,uBEPJ,CFEE,SACE,wBEAJ,CFGE,QACE,uBEDJ,CFJE,SACE,wBEMJ,CFHE,QACE,uBEKJ,CFAA,mCACE,SACE,8BEEF,CACF,CACF","file":"columns.css"}
|
|
@@ -1,38 +1,2 @@
|
|
|
1
|
-
@layer graupl.layout{
|
|
2
|
-
.container,
|
|
3
|
-
.container > .full-width{
|
|
4
|
-
--graupl-container-full-width:minmax(var(--graupl-container-gap, var(--graupl-gap, 1rem)), 1fr);
|
|
5
|
-
--graupl-container-content:min(
|
|
6
|
-
var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)),
|
|
7
|
-
calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem)) * 2)
|
|
8
|
-
);
|
|
9
|
-
--graupl-container-breakout:minmax(
|
|
10
|
-
0,
|
|
11
|
-
var(--graupl-container-breakout-width, calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2))
|
|
12
|
-
);
|
|
13
|
-
--graupl-container-feature:minmax(
|
|
14
|
-
0,
|
|
15
|
-
var(--graupl-container-feature-width, calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2))
|
|
16
|
-
);
|
|
17
|
-
display:grid;
|
|
18
|
-
grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end];
|
|
19
|
-
}
|
|
20
|
-
.container > :not(.breakout, .full-width, .feature),
|
|
21
|
-
.container > .full-width > :not(.breakout, .full-width, .feature){
|
|
22
|
-
grid-column:content;
|
|
23
|
-
}
|
|
24
|
-
.container .breakout,
|
|
25
|
-
.container > .full-width .breakout{
|
|
26
|
-
grid-column:breakout;
|
|
27
|
-
}
|
|
28
|
-
.container .feature,
|
|
29
|
-
.container > .full-width .feature{
|
|
30
|
-
grid-column:feature;
|
|
31
|
-
}
|
|
32
|
-
.container .full-width,
|
|
33
|
-
.container > .full-width .full-width{
|
|
34
|
-
grid-column:full-width;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
1
|
+
@layer graupl.layout{.container,.container>.full-width{--graupl-container-full-width:minmax(var(--graupl-container-gap,var(--graupl-gap,1rem)),1fr);--graupl-container-content:min(var(--graupl-container-content-max-width,var(--graupl-content-max-width,96ch)),calc(100% - var(--graupl-container-gap, var(--graupl-gap, 1rem))*2));--graupl-container-breakout:minmax(0,var(--graupl-container-breakout-width,calc((var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) - var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch))) / 2)));--graupl-container-feature:minmax(0,var(--graupl-container-feature-width,calc((var(--graupl-container-feature-max-width, calc(var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch)) + 20ch)) - var(--graupl-container-breakout-max-width, calc(var(--graupl-container-content-max-width, var(--graupl-content-max-width, 96ch)) + 15ch))) / 2)));display:grid;grid-template-columns:[full-width-start] var(--graupl-container-full-width) [feature-start] var(--graupl-container-feature) [breakout-start] var(--graupl-container-breakout) [content-start] var(--graupl-container-content) [content-end] var(--graupl-container-breakout) [breakout-end] var(--graupl-container-feature) [feature-end] var(--graupl-container-full-width) [full-width-end]}.container>.full-width>:not(.breakout,.full-width,.feature),.container>:not(.breakout,.full-width,.feature){grid-column:content}.container .breakout,.container>.full-width .breakout{grid-column:breakout}.container .feature,.container>.full-width .feature{grid-column:feature}.container .full-width,.container>.full-width .full-width{grid-column:full-width}}
|
|
38
2
|
/*# sourceMappingURL=container.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/layout/container/_index.scss","container.css"],"names":[],"mappings":"AASI,qBCFF,kCAEE,4FAAA,CACA,kLAAA,CAIA,qTAAA,CAIA,oaAAA,CAKA,YAAA,CACA,6XCNF,CDeE,4GACE,mBCZJ,CDeE,sDACE,oBCZJ,CDeE,oDACE,mBCZJ,CDeE,0DACE,sBCZJ,CACF","file":"container.css"}
|
|
@@ -1,10 +1,2 @@
|
|
|
1
|
-
@layer graupl.state{
|
|
2
|
-
*:focus-visible{
|
|
3
|
-
border-color:transparent;
|
|
4
|
-
outline:var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px))) var(--graupl-focus-outline-style, dotted) var(--graupl-focus-outline-color, var(--graupl-theme-active--primary--900, var(--graupl-theme-light--primary--900, var(--graupl-primary--900, hsl(219, 100%, 10%)))));
|
|
5
|
-
outline-offset:var(--graupl-focus-outline-offset, calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))));
|
|
6
|
-
box-shadow:var(--graupl-focus-box-shadow, var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-width, var(--graupl-border-width, 2px)) 0 0 var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))), 0 0 0 var(--graupl-focus-width, var(--graupl-border-width, 2px)) var(--graupl-focus-box-shadow-style, inset) var(--graupl-focus-box-shadow-color, var(--graupl-theme-active--primary--100, var(--graupl-theme-light--primary--100, var(--graupl-primary--100, hsl(219, 100%, 95%))))));
|
|
7
|
-
}
|
|
8
|
-
}
|
|
9
|
-
|
|
1
|
+
@layer graupl.state{:focus-visible{border-color:transparent;box-shadow:var(--graupl-focus-box-shadow,var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-width,var(--graupl-border-width,2px)) 0 0 var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))),0 0 0 var(--graupl-focus-width,var(--graupl-border-width,2px)) var(--graupl-focus-box-shadow-style,inset) var(--graupl-focus-box-shadow-color,var(--graupl-theme-active--primary--100,var(--graupl-theme-light--primary--100,var(--graupl-primary--100,#e6eeff)))));outline:var(--graupl-focus-outline-width,var(--graupl-focus-width,var(--graupl-border-width,2px))) var(--graupl-focus-outline-style,dotted) var(--graupl-focus-outline-color,var(--graupl-theme-active--primary--900,var(--graupl-theme-light--primary--900,var(--graupl-primary--900,#001233))));outline-offset:var(--graupl-focus-outline-offset,calc(-1 * var(--graupl-focus-outline-width, var(--graupl-focus-width, var(--graupl-border-width, 2px)))))}}
|
|
10
2
|
/*# sourceMappingURL=focus.css.map */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI
|
|
1
|
+
{"version":3,"sources":["../../../scss/mixins/_layer.scss","../../../scss/state/focus/_index.scss","../../../scss/state/focus/_variables.scss","focus.css"],"names":[],"mappings":"AASI,oBCHF,eACE,wBAAA,CAGA,smBCqBe,CDvBf,iSAAA,CACA,0JEFF,CACF","file":"focus.css"}
|