1 | @import 'functions';
|
2 |
|
3 |
|
4 | $grid-size: px-to-rem(8px);
|
5 | $gl-spacing-scale-1: 0.25 * $grid-size;
|
6 | $gl-spacing-scale-2: 0.5 * $grid-size;
|
7 | $gl-spacing-scale-3: $grid-size;
|
8 | $gl-spacing-scale-4: 1.5 * $grid-size;
|
9 | $gl-spacing-scale-5: 2 * $grid-size;
|
10 | $gl-spacing-scale-6: 3 * $grid-size;
|
11 | $gl-spacing-scale-7: 4 * $grid-size;
|
12 | $gl-spacing-scale-8: 5 * $grid-size;
|
13 | $gl-spacing-scale-9: 6 * $grid-size;
|
14 | $gl-spacing-scale-10: 7 * $grid-size;
|
15 | $gl-spacing-scale-11: 8 * $grid-size;
|
16 | $gl-spacing-scale-11-5: 9 * $grid-size;
|
17 | $gl-spacing-scale-12: 10 * $grid-size;
|
18 | $gl-spacing-scale-13: 12 * $grid-size;
|
19 | $gl-spacing-scale-15: 15 * $grid-size;
|
20 | $gl-spacing-scale-20: 20 * $grid-size;
|
21 |
|
22 |
|
23 | $breakpoint-sm: px-to-rem(576px);
|
24 | $breakpoint-md: px-to-rem(768px);
|
25 | $breakpoint-lg: px-to-rem(992px);
|
26 | $breakpoint-xl: px-to-rem(1200px);
|
27 |
|
28 |
|
29 | $limited-layout-width: 990px !default;
|
30 |
|
31 | $transparent: transparent;
|
32 |
|
33 |
|
34 | $black: #000 !default;
|
35 | $black-normal: #333 !default;
|
36 |
|
37 | $white: #fff !default;
|
38 | $white-normal: #f0f0f0 !default;
|
39 | $white-dark: #eaeaea !default;
|
40 | $white-transparent: rgba(255, 255, 255, 0.8) !default;
|
41 |
|
42 | $green-50: #ecf4ee !default;
|
43 | $green-100: #c3e6cd !default;
|
44 | $green-200: #91d4a8 !default;
|
45 | $green-300: #52b87a !default;
|
46 | $green-400: #2da160 !default;
|
47 | $green-500: #108548 !default;
|
48 | $green-600: #217645 !default;
|
49 | $green-700: #24663b !default;
|
50 | $green-800: #0d532a !default;
|
51 | $green-900: #0a4020 !default;
|
52 | $green-950: #072b15 !default;
|
53 |
|
54 | $blue-50: #e9f3fc !default;
|
55 | $blue-100: #cbe2f9 !default;
|
56 | $blue-200: #9dc7f1 !default;
|
57 | $blue-300: #63a6e9 !default;
|
58 | $blue-400: #428fdc !default;
|
59 | $blue-500: #1f75cb !default;
|
60 | $blue-600: #1068bf !default;
|
61 | $blue-700: #0b5cad !default;
|
62 | $blue-800: #064787 !default;
|
63 | $blue-900: #033464 !default;
|
64 | $blue-950: #002850 !default;
|
65 |
|
66 | $orange-50: #fdf1dd !default;
|
67 | $orange-100: #f5d9a8 !default;
|
68 | $orange-200: #e9be74 !default;
|
69 | $orange-300: #d99530 !default;
|
70 | $orange-400: #c17d10 !default;
|
71 | $orange-500: #ab6100 !default;
|
72 | $orange-600: #9e5400 !default;
|
73 | $orange-700: #8f4700 !default;
|
74 | $orange-800: #703800 !default;
|
75 | $orange-900: #5c2900 !default;
|
76 | $orange-950: #421f00 !default;
|
77 |
|
78 | $red-50: #fcf1ef !default;
|
79 | $red-100: #fdd4cd !default;
|
80 | $red-200: #fcb5aa !default;
|
81 | $red-300: #f57f6c !default;
|
82 | $red-400: #ec5941 !default;
|
83 | $red-500: #dd2b0e !default;
|
84 | $red-600: #c91c00 !default;
|
85 | $red-700: #ae1800 !default;
|
86 | $red-800: #8d1300 !default;
|
87 | $red-900: #660e00 !default;
|
88 | $red-950: #4d0a00 !default;
|
89 |
|
90 | $purple-50: #f4f0ff !default;
|
91 | $purple-100: #e1d8f9 !default;
|
92 | $purple-200: #cbbbf2 !default;
|
93 | $purple-300: #ac93e6 !default;
|
94 | $purple-400: #9475db !default;
|
95 | $purple-500: #7b58cf !default;
|
96 | $purple-600: #694cc0 !default;
|
97 | $purple-700: #5943b6 !default;
|
98 | $purple-800: #453894 !default;
|
99 | $purple-900: #2f2a6b !default;
|
100 | $purple-950: #232150 !default;
|
101 |
|
102 |
|
103 |
|
104 |
|
105 |
|
106 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 |
|
112 |
|
113 |
|
114 |
|
115 |
|
116 |
|
117 |
|
118 |
|
119 |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 | $gray-10: #fafafa !default;
|
126 | $gray-50: #f0f0f0 !default;
|
127 | $gray-100: #dbdbdb !default;
|
128 | $gray-200: #bfbfbf !default;
|
129 | $gray-300: #999 !default;
|
130 | $gray-400: #868686 !default;
|
131 | $gray-500: #666 !default;
|
132 | $gray-600: #5e5e5e !default;
|
133 | $gray-700: #525252 !default;
|
134 | $gray-800: #404040 !default;
|
135 | $gray-900: #303030 !default;
|
136 | $gray-950: #1f1f1f !default;
|
137 |
|
138 |
|
139 |
|
140 | $gl-themes: 'indigo', 'blue', 'light-blue', 'green', 'red', 'light-red';
|
141 |
|
142 | $theme-indigo-50: #f1f1ff !default;
|
143 | $theme-indigo-100: #dbdbf8 !default;
|
144 | $theme-indigo-200: #c7c7f2 !default;
|
145 | $theme-indigo-300: #a2a2e6 !default;
|
146 | $theme-indigo-400: #8181d7 !default;
|
147 | $theme-indigo-500: #6666c4 !default;
|
148 | $theme-indigo-600: #5252b5 !default;
|
149 | $theme-indigo-700: #41419f !default;
|
150 | $theme-indigo-800: #303083 !default;
|
151 | $theme-indigo-900: #222261 !default;
|
152 | $theme-indigo-950: #14143d !default;
|
153 |
|
154 | $theme-blue-50: #cdd8e3 !default;
|
155 | $theme-blue-100: #b9cadc !default;
|
156 | $theme-blue-200: #a6bdd5 !default;
|
157 | $theme-blue-300: #81a5c9 !default;
|
158 | $theme-blue-400: #628eb9 !default;
|
159 | $theme-blue-500: #4977a5 !default;
|
160 | $theme-blue-600: #346596 !default;
|
161 | $theme-blue-700: #235180 !default;
|
162 | $theme-blue-800: #153c63 !default;
|
163 | $theme-blue-900: #0b2640 !default;
|
164 | $theme-blue-950: #04101c !default;
|
165 |
|
166 | $theme-light-blue-50: #dde6ee !default;
|
167 | $theme-light-blue-100: #c1d4e6 !default;
|
168 | $theme-light-blue-200: #a0bedc !default;
|
169 | $theme-light-blue-300: #74a3d3 !default;
|
170 | $theme-light-blue-400: #4f8bc7 !default;
|
171 | $theme-light-blue-500: #3476b9 !default;
|
172 | $theme-light-blue-600: #2268ae !default;
|
173 | $theme-light-blue-700: #145aa1 !default;
|
174 | $theme-light-blue-800: #0e4d8d !default;
|
175 | $theme-light-blue-900: #0c4277 !default;
|
176 | $theme-light-blue-950: #0a3764 !default;
|
177 |
|
178 | $theme-green-50: #dde9de !default;
|
179 | $theme-green-100: #b1d6b5 !default;
|
180 | $theme-green-200: #8cc497 !default;
|
181 | $theme-green-300: #69af7d !default;
|
182 | $theme-green-400: #499767 !default;
|
183 | $theme-green-500: #308258 !default;
|
184 | $theme-green-600: #25744c !default;
|
185 | $theme-green-700: #1b653f !default;
|
186 | $theme-green-800: #155635 !default;
|
187 | $theme-green-900: #0e4328 !default;
|
188 | $theme-green-950: #052e19 !default;
|
189 |
|
190 | $theme-red-50: #f4e9e7 !default;
|
191 | $theme-red-100: #ecd3d0 !default;
|
192 | $theme-red-200: #e3bab5 !default;
|
193 | $theme-red-300: #d59086 !default;
|
194 | $theme-red-400: #c66e60 !default;
|
195 | $theme-red-500: #ad4a3b !default;
|
196 | $theme-red-600: #a13322 !default;
|
197 | $theme-red-700: #8f2110 !default;
|
198 | $theme-red-800: #761405 !default;
|
199 | $theme-red-900: #580d02 !default;
|
200 | $theme-red-950: #380700 !default;
|
201 |
|
202 | $theme-light-red-50: #faf2f1 !default;
|
203 | $theme-light-red-100: #f6d9d5 !default;
|
204 | $theme-light-red-200: #ebada2 !default;
|
205 | $theme-light-red-300: #e07f6f !default;
|
206 | $theme-light-red-400: #d36250 !default;
|
207 | $theme-light-red-500: #c24b38 !default;
|
208 | $theme-light-red-600: #b53a26 !default;
|
209 | $theme-light-red-700: #a02e1c !default;
|
210 | $theme-light-red-800: #8b2212 !default;
|
211 | $theme-light-red-900: #751709 !default;
|
212 | $theme-light-red-950: #5c1105 !default;
|
213 |
|
214 |
|
215 |
|
216 | $data-viz-green-50: #ddfab7;
|
217 | $data-viz-green-100: #c9f097;
|
218 | $data-viz-green-200: #b0de73;
|
219 | $data-viz-green-300: #94c25e;
|
220 | $data-viz-green-400: #83ab4a;
|
221 | $data-viz-green-500: #608b2f;
|
222 | $data-viz-green-600: #487900;
|
223 | $data-viz-green-700: #366800;
|
224 | $data-viz-green-800: #275600;
|
225 | $data-viz-green-900: #1a4500;
|
226 | $data-viz-green-950: #0f3300;
|
227 |
|
228 | $data-viz-aqua-50: #b8fff2;
|
229 | $data-viz-aqua-100: #93fae7;
|
230 | $data-viz-aqua-200: #5eebdf;
|
231 | $data-viz-aqua-300: #25d2d2;
|
232 | $data-viz-aqua-400: #0bb6c6;
|
233 | $data-viz-aqua-500: #0094b6;
|
234 | $data-viz-aqua-600: #0080a1;
|
235 | $data-viz-aqua-700: #006887;
|
236 | $data-viz-aqua-800: #004d67;
|
237 | $data-viz-aqua-900: #003f57;
|
238 | $data-viz-aqua-950: #00293d;
|
239 |
|
240 | $data-viz-blue-50: #e9ebff;
|
241 | $data-viz-blue-100: #d4dcfa;
|
242 | $data-viz-blue-200: #b7c6ff;
|
243 | $data-viz-blue-300: #97acff;
|
244 | $data-viz-blue-400: #748eff;
|
245 | $data-viz-blue-500: #5772ff;
|
246 | $data-viz-blue-600: #445cf2;
|
247 | $data-viz-blue-700: #3547de;
|
248 | $data-viz-blue-800: #232fcf;
|
249 | $data-viz-blue-900: #1e23a8;
|
250 | $data-viz-blue-950: #11118a;
|
251 |
|
252 | $data-viz-magenta-50: #ffe3eb;
|
253 | $data-viz-magenta-100: #ffc9d9;
|
254 | $data-viz-magenta-200: #fcacc5;
|
255 | $data-viz-magenta-300: #ff85af;
|
256 | $data-viz-magenta-400: #f2639a;
|
257 | $data-viz-magenta-500: #d84280;
|
258 | $data-viz-magenta-600: #c52c6b;
|
259 | $data-viz-magenta-700: #b31756;
|
260 | $data-viz-magenta-800: #950943;
|
261 | $data-viz-magenta-900: #7a0033;
|
262 | $data-viz-magenta-950: #570028;
|
263 |
|
264 | $data-viz-orange-50: #fae8d1;
|
265 | $data-viz-orange-100: #f7d8b5;
|
266 | $data-viz-orange-200: #f3c291;
|
267 | $data-viz-orange-300: #eb9a5c;
|
268 | $data-viz-orange-400: #e17223;
|
269 | $data-viz-orange-500: #d14e00;
|
270 | $data-viz-orange-600: #b24800;
|
271 | $data-viz-orange-700: #944100;
|
272 | $data-viz-orange-800: #6f3500;
|
273 | $data-viz-orange-900: #5c2b00;
|
274 | $data-viz-orange-950: #421e00;
|
275 |
|
276 | $darken-normal-factor: 7%;
|
277 | $darken-dark-factor: 10%;
|
278 | $darken-border-factor: 5%;
|
279 | $darken-border-dashed-factor: 25%;
|
280 |
|
281 | $t-gray-a-02: rgba($black, 0.02);
|
282 | $t-gray-a-04: rgba($black, 0.04);
|
283 | $t-gray-a-06: rgba($black, 0.06);
|
284 | $t-gray-a-08: rgba($black, 0.08);
|
285 | $t-gray-a-24: rgba($black, 0.24);
|
286 |
|
287 |
|
288 | $gl-font-weight-normal: 400;
|
289 | $gl-font-weight-bold: 600;
|
290 |
|
291 | $gl-font-weights: (
|
292 | 'normal': $gl-font-weight-normal,
|
293 | 'bold': $gl-font-weight-bold,
|
294 | );
|
295 |
|
296 |
|
297 | $gl-line-height-16: px-to-rem(16px);
|
298 | $gl-line-height-20: px-to-rem(20px);
|
299 | $gl-line-height-24: px-to-rem(24px);
|
300 | $gl-line-height-28: px-to-rem(28px);
|
301 | $gl-line-height-32: px-to-rem(32px);
|
302 | $gl-line-height-36: px-to-rem(36px);
|
303 | $gl-line-height-44: px-to-rem(44px);
|
304 | $gl-line-height-52: px-to-rem(52px);
|
305 |
|
306 |
|
307 |
|
308 |
|
309 | $gl-font-size: px-to-rem(14px);
|
310 | $gl-font-size-sm: px-to-rem(12px);
|
311 | $gl-font-size-lg: px-to-rem(16px);
|
312 |
|
313 | $gl-font-size-h-display: px-to-rem(28px);
|
314 | $gl-font-size-h1: px-to-rem(23px);
|
315 | $gl-font-size-h2: px-to-rem(19px);
|
316 |
|
317 |
|
318 | $gl-font-size-h-display-md: px-to-rem(31px);
|
319 | $gl-font-size-h1-md: px-to-rem(25px);
|
320 | $gl-font-size-h2-md: px-to-rem(20px);
|
321 |
|
322 |
|
323 | $gl-font-size-h-display-xl: px-to-rem(45px);
|
324 | $gl-font-size-h1-xl: px-to-rem(32px);
|
325 | $gl-font-size-h2-xl: px-to-rem(23px);
|
326 |
|
327 |
|
328 |
|
329 |
|
330 | $gl-font-size-markdown: px-to-rem(16px);
|
331 | $gl-font-size-markdown-sm: px-to-rem(14px);
|
332 |
|
333 | $gl-font-size-markdown-h1: px-to-rem(28px);
|
334 | $gl-font-size-markdown-h2: px-to-rem(23px);
|
335 | $gl-font-size-markdown-h3: px-to-rem(19px);
|
336 |
|
337 |
|
338 | $gl-font-size-markdown-h1-md: px-to-rem(31px);
|
339 | $gl-font-size-markdown-h2-md: px-to-rem(25px);
|
340 | $gl-font-size-markdown-h3-md: px-to-rem(20px);
|
341 |
|
342 |
|
343 | $gl-font-size-markdown-h1-xl: px-to-rem(45px);
|
344 | $gl-font-size-markdown-h2-xl: px-to-rem(32px);
|
345 | $gl-font-size-markdown-h3-xl: px-to-rem(23px);
|
346 |
|
347 |
|
348 |
|
349 |
|
350 | $gl-font-size-compact-markdown-h1: px-to-rem(19px);
|
351 |
|
352 |
|
353 | $gl-font-size-compact-markdown-h1-md: px-to-rem(20px);
|
354 |
|
355 |
|
356 | $gl-font-size-compact-markdown-h1-xl: px-to-rem(23px);
|
357 |
|
358 |
|
359 |
|
360 | $gl-font-size-monospace: px-to-rem(13px);
|
361 | $gl-font-size-monospace-lg: px-to-rem(15px);
|
362 | $gl-font-size-monospace-sm: px-to-rem(11px);
|
363 |
|
364 |
|
365 | $gl-monospace-font: 'Menlo', 'DejaVu Sans Mono', 'Liberation Mono', 'Consolas', 'Ubuntu Mono',
|
366 | 'Courier New', 'andale mono', 'lucida console', monospace;
|
367 | $gl-regular-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Noto Sans', Ubuntu,
|
368 | Cantarell, 'Helvetica Neue', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
369 | 'Noto Color Emoji';
|
370 |
|
371 | $gl-fonts: (
|
372 | 'monospace': $gl-monospace-font,
|
373 | 'regular': $gl-regular-font,
|
374 | );
|
375 |
|
376 |
|
377 |
|
378 |
|
379 |
|
380 | $gl-border-size-1: 1px;
|
381 | $gl-border-size-2: 2px;
|
382 | $gl-border-size-3: 3px;
|
383 | $gl-border-size-4: 4px;
|
384 | $gl-border-size-5: 5px;
|
385 | $gl-border-size-8: 8px;
|
386 |
|
387 |
|
388 | $gl-border-radius-small: $gl-spacing-scale-1;
|
389 | $gl-border-radius-base: $gl-spacing-scale-2;
|
390 | $gl-border-radius-large: $gl-spacing-scale-3;
|
391 | $gl-border-radius-6: $gl-spacing-scale-6;
|
392 | $gl-border-radius-full: 50%;
|
393 |
|
394 |
|
395 | $gl-transition-duration-slow: 0.4s;
|
396 | $gl-transition-duration-medium: 0.2s;
|
397 |
|
398 |
|
399 | $focus-ring: 0 0 0 $gl-border-size-1 rgba($white, 0.4),
|
400 | 0 0 0 $gl-border-size-4 rgba($blue-500, 0.48);
|
401 | $focus-ring-inset: inset 0 0 0 $gl-border-size-3 rgba($blue-500, 0.48),
|
402 | inset 0 0 0 $gl-border-size-4 rgba($white, 0.4);
|
403 |
|
404 |
|
405 | $toast-max-width: px-to-rem(586px);
|
406 | $toast-padding-right: px-to-rem(42px);
|
407 | $toast-background-color: rgba(#303030, 0.95);
|
408 |
|
409 |
|
410 | $chart-tooltip-max-width: px-to-rem(512px);
|
411 |
|
412 | $gl-icon-chevron-left: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 0 0 0 1.414l3 3a1 1 0 0 0 1.414-1.414L7.414 8l2.293-2.293a1 1 0 0 0-1.414-1.414l-3 3z"/></svg>';
|
413 | $gl-icon-chevron-right: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M10.707 7.293a1 1 0 0 1 0 1.414l-3 3a1 1 0 0 1-1.414-1.414L8.586 8 6.293 5.707a1 1 0 0 1 1.414-1.414l3 3z"/></svg>';
|
414 | $gl-icon-chevron-down: 'data:image/svg+xml;utf8,<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill-rule="evenodd" d="M7.293 10.707a1 1 0 0 0 1.414 0l3-3a1 1 0 0 0-1.414-1.414L8 8.586 5.707 6.293a1 1 0 0 0-1.414 1.414l3 3z"/></svg>';
|
415 |
|
416 |
|
417 | $default-icon-size: px-to-rem(16px);
|
418 |
|
419 |
|
420 |
|
421 |
|
422 | $gl-icon-sizes: 8 12 14 16 24 32 48 72;
|
423 | $gl-deprecated-icon-sizes: join($gl-icon-sizes, 10 18);
|
424 |
|
425 |
|
426 | $gl-dropdown-width: px-to-rem(240px);
|
427 | $gl-dropdown-width-narrow: px-to-rem(160px);
|
428 | $gl-dropdown-width-wide: px-to-rem(400px);
|
429 | $gl-max-dropdown-max-height: px-to-rem(312px);
|
430 |
|
431 |
|
432 | $gl-broadcast-message-text-max-width: px-to-rem(934px);
|
433 |
|
434 |
|
435 | $gl-modal-small-width: px-to-rem(512px);
|
436 | $gl-modal-medium-width: px-to-rem(768px);
|
437 | $gl-modal-large-width: px-to-rem(990px);
|
438 |
|
439 |
|
440 | $modal-header-border-color: $gray-200;
|
441 | $modal-footer-border-color: $gray-200;
|
442 | $modal-title-line-height: $gl-line-height-20;
|
443 | $modal-backdrop-opacity: 0.64;
|
444 |
|
445 |
|
446 |
|
447 |
|
448 | $body-color: $gray-900 !default;
|
449 |
|
450 | $secondary: $gray-50;
|
451 | $success: $green-500;
|
452 | $info: $blue-500;
|
453 | $warning: $orange-500;
|
454 | $danger: $red-500;
|
455 |
|
456 | $font-weight-bold: $gl-font-weight-bold;
|
457 |
|
458 | $font-family-sans-serif: $gl-regular-font;
|
459 | $font-family-monospace: $gl-monospace-font;
|
460 |
|
461 | $h1-font-size: $gl-font-size * 2.5;
|
462 | $h2-font-size: $gl-font-size * 2;
|
463 | $h3-font-size: $gl-font-size * 1.75;
|
464 | $h4-font-size: $gl-font-size * 1.5;
|
465 | $h5-font-size: $gl-font-size * 1.25;
|
466 | $h6-font-size: $gl-font-size;
|
467 |
|
468 | $spacer: $grid-size;
|
469 | $spacers: (
|
470 | 1: $gl-spacing-scale-2,
|
471 | 2: $gl-spacing-scale-3,
|
472 | 3: $gl-spacing-scale-5,
|
473 | 4: $gl-spacing-scale-6,
|
474 | 5: $gl-spacing-scale-7,
|
475 | 6: $gl-spacing-scale-8,
|
476 | 7: $gl-spacing-scale-9,
|
477 | 8: $gl-spacing-scale-10,
|
478 | 9: $gl-spacing-scale-11,
|
479 | );
|
480 |
|
481 | $table-accent-bg: $gray-50;
|
482 | $card-border-color: $gray-100;
|
483 | $card-cap-bg: $gray-10 !default;
|
484 |
|
485 |
|
486 | $gl-form-input-sizes: (
|
487 | xs: $grid-size * 10,
|
488 | sm: $grid-size * 20,
|
489 | md: $grid-size * 30,
|
490 | lg: $grid-size * 40,
|
491 | xl: $grid-size * 70,
|
492 | );
|
493 |
|
494 | $popover-bg: $white !default;
|
495 | $popover-arrow-width: 0.5rem;
|
496 | $popover-arrow-height: 0.25rem;
|
497 | $popover-arrow-color: $popover-bg;
|
498 | $popover-arrow-outer-color: $gray-100;
|
499 |
|
500 | $tooltip-opacity: 1;
|