/
keen-variables.scss
54 lines (44 loc) · 1.39 KB
/
keen-variables.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// variables that override things in KeenUI components
// https://github.com/JosephusPaye/Keen-UI/blob/master/Customization.md#customization
@import 'colors';
@import 'typography';
@import 'layers';
// unified font stack - switch from roboto to noto
$font-stack: $font-stack;
// primary and accent colors for KeenUI components
$brand-primary-color: $brand-primary-color;
$brand-accent-color: $brand-accent-color;
// text colors
$primary-text-color: $text-color;
$secondary-text-color: $text-alt-color;
$hint-text-color: $text-hint-color;
$disabled-text-color: $text-disabled-color;
// layers
$z-index-level-1: $z-index-level-1;
$z-index-level-2: $z-index-level-2;
$z-index-level-3: $z-index-level-3;
$z-index-level-4: $z-index-level-4;
$z-index-level-5: $z-index-level-5;
$z-index-level-6: $z-index-level-6;
// layout / component variables
$divider-color: $divider-color;
$ui-modal-mask-background: rgba($pure-black, $modal-opacity);
.ui-tooltip {
font-family: $font-stack;
}
.ui-textbox__feedback {
font-family: $font-stack;
}
.ui-textbox {
// override margins, since fields will set them
margin: 0;
}
.ui-button__content {
// 14px buttons with white on blue (A400) neet to be bold for accesibility
font-weight: 600;
}
// html element in edit mode gets a smaller base font size
// this sets the base sizing for KeenUI components, as they all use rem
html.component-selector-wrapper {
font-size: 16px;
}