1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
@import "../mixins/misc";
@import '../mixins/colors';
// Typography
$text-color: var(--color--font-primary);
$font-family-base: "Lato", sans-serif;
$font-size-base: 14px;
$font-size-large: ceil($font-size-base * 1.25); // 18px
$font-size-small: ceil($font-size-base * 0.85); // 12px
$font-size-h1: floor($font-size-base * 1.6); // 22px
$font-size-h2: ceil($font-size-base * 1.4); // 20px
$font-size-h3: ceil($font-size-base * 1.1); // 16px
$font-size-h4: $font-size-base;
$font-size-h5: $font-size-base;
$font-size-h6: $font-size-base;
$font-size-navigation2: ceil($font-size-base * 1.1); // 16px
$font-size-widget-header: $font-size-large;
$font-size-caption: $font-size-h1;
// Unit-less `line-height` for use in components like buttons.
$line-height-base: 1.428571429; // 20/14
// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
$line-height-computed: floor($font-size-base * $line-height-base); // ~20px
// By default, this inherits from the `<body>`.
$headings-font-family: inherit;
$headings-font-weight: 700;
$headings-line-height: 1.1;
$headings-color: #000;
// Design specific
$bar-bottom-container-height: 40px;
$header-height: 80px;
// Icons sizes:
$icon-size-default: 20px;
$icon-size-inline: 16px;
$icon-size-button: $icon-size-inline;
// Avatar sizes:
$avatar-small: 25px;
$avatar-medium: 100px;
$avatar-normal: 250px;
$sidebar-border-width: 1px;
$drag_and_drop_z_index: 1000;
$drag_and_drop_border: 1px solid $base-color;
$transition-duration: .3s;
$transition-duration-slow: .5s;
$transition-duration-superslow: 1s;
// Border radius:
$border-radius: 4px;
$border-radius-avatar-menu: 7px;
$border-radius-search: 7px;
// Layout
$page-margin: 15px;
$sidebar-padding: 12px;
$sidebar-width: 270px;
$content-width: 400px;
$content-margin: 12px;
$max-content-width: 4 * $sidebar-width + $page-margin;
$footer-height: 32px;
$site-width: ($page-margin * 2 + $sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
$page-width: ($sidebar-width + $sidebar-padding * 2 + $sidebar-border-width * 2 + $content-width + $content-margin * 2);
$grid-gap: 0;
// Buttons
$button-icons: (
accept: accept,
add: add,
arr_left: arr_1left,
arr_right: arr_1right,
cancel: decline,
date: date,
delete: trash,
edit: edit,
move-down: arr_1down,
move-up: arr_1up,
play: play,
refresh: refresh,
search: search,
sidebar-toggle: sidebar3,
trash: trash,
upload: upload,
has-notice: file-text,
has-no-notice: file,
);
|
