luda 0.1.13 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +5 -5
- data/assets/javascripts/luda-degradation.js +1 -1
- data/assets/javascripts/luda-degradation.min.js +1 -1
- data/assets/javascripts/luda.js +1 -1
- data/assets/javascripts/luda.min.js +1 -1
- data/assets/javascripts/luda/install.js +1 -1
- data/assets/stylesheets/luda/_core/_base.sass +26 -4
- data/assets/stylesheets/luda/_core/_functions.sass +101 -46
- data/assets/stylesheets/luda/_core/_variables.sass +212 -204
- data/assets/stylesheets/luda/_core/elements/_badge.sass +8 -10
- data/assets/stylesheets/luda/_core/elements/_baseline.sass +4 -4
- data/assets/stylesheets/luda/_core/elements/_button.sass +1 -1
- data/assets/stylesheets/luda/_core/elements/_icon.sass +2 -6
- data/assets/stylesheets/luda/_core/elements/_table.sass +9 -1
- data/assets/stylesheets/luda/_core/elements/form/_form-helper.sass +2 -0
- data/assets/stylesheets/luda/_core/elements/form/_form-label.sass +3 -3
- data/assets/stylesheets/luda/_core/elements/form/_form-row.sass +3 -1
- data/assets/stylesheets/luda/_core/elements/typography/_code.sass +2 -3
- data/assets/stylesheets/luda/_core/elements/typography/_heading.sass +24 -0
- data/assets/stylesheets/luda/_core/elements/typography/_list.sass +1 -1
- data/assets/stylesheets/luda/_core/elements/typography/_paragraph.sass +18 -0
- data/assets/stylesheets/luda/_core/elements/typography/_quote.sass +8 -13
- data/assets/stylesheets/luda/_core/elements/typography/_typography.sass +0 -46
- data/assets/stylesheets/luda/_core/mixins/_base.sass +3 -0
- data/assets/stylesheets/luda/_core/mixins/_button.sass +9 -3
- data/assets/stylesheets/luda/_core/mixins/_form.sass +3 -1
- data/assets/stylesheets/luda/_core/mixins/_typography.sass +11 -14
- data/assets/stylesheets/luda/_core/patterns/_alert.sass +2 -5
- data/assets/stylesheets/luda/_core/patterns/_article.sass +45 -0
- data/assets/stylesheets/luda/_core/patterns/_button-icon.sass +8 -4
- data/assets/stylesheets/luda/_core/patterns/_form-group.sass +3 -0
- data/assets/stylesheets/luda/_core/patterns/_form-icon.sass +8 -4
- data/assets/stylesheets/luda/_core/patterns/_navigation.sass +1 -0
- data/assets/stylesheets/luda/_default.sass +1 -0
- data/assets/stylesheets/luda/default/_banner.sass +1 -1
- data/assets/stylesheets/luda/default/_mixins.sass +1 -0
- data/assets/stylesheets/luda/default/elements/_typography.sass +2 -0
- data/assets/stylesheets/luda/default/elements/typography/_heading.sass +5 -0
- data/assets/stylesheets/luda/default/elements/typography/_paragraph.sass +5 -0
- data/assets/stylesheets/luda/default/index.sass +1 -0
- data/assets/stylesheets/luda/default/patterns/_article.sass +6 -0
- data/lib/luda/version.rb +1 -1
- metadata +10 -3
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
|
-
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
2
|
+
SHA256:
|
|
3
|
+
metadata.gz: 4529bd1aa2739603aa5759f1339d59741c1ba01d3fb737e223bf858435286ce8
|
|
4
|
+
data.tar.gz: 549ce575abe5621ee2c0055f3c9b8ebd4101a3a12c4f108e0b9a7b1f63395919
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: e2f28127643517969fb4af6bfaefc4066d1153389170efa1b827bc863ae280a563f5fd3c36142127cd4c63c3b08de25c5b110ff72df250054710888570191ffd
|
|
7
|
+
data.tar.gz: 9392df78f4838c06462f32b666d2e70a8937d397873416b72c160779e332b5e6af86fa78d06655de4e8dfaba69ca7b46bd5309816768d30ca50d08e3da73b962
|
data/assets/javascripts/luda.js
CHANGED
|
@@ -4,6 +4,26 @@
|
|
|
4
4
|
// Based on sanitize.css v6.0.0 CC0 License
|
|
5
5
|
// github.com/csstools/sanitize.css
|
|
6
6
|
|
|
7
|
+
\:root
|
|
8
|
+
+root-var(--baseline, baseline(1))
|
|
9
|
+
+root-var(--spacing-tiny, $spacing-tiny-rem)
|
|
10
|
+
+root-var(--spacing-small, $spacing-small-rem)
|
|
11
|
+
+root-var(--spacing-medium, $spacing-medium-rem)
|
|
12
|
+
+root-var(--spacing-large, $spacing-large-rem)
|
|
13
|
+
+root-var(--primary, $color-primary)
|
|
14
|
+
+root-var(--secondary, $color-secondary)
|
|
15
|
+
+root-var(--dark, $color-dark)
|
|
16
|
+
+root-var(--light, $color-light)
|
|
17
|
+
+root-var(--danger, $color-danger)
|
|
18
|
+
+root-var(--muted, $color-muted)
|
|
19
|
+
+root-var(--main, $color-main)
|
|
20
|
+
+root-var(--bc-primary, $background-color-primary)
|
|
21
|
+
+root-var(--bc-secondary, $background-color-secondary)
|
|
22
|
+
+root-var(--bc-dark, $background-color-dark)
|
|
23
|
+
+root-var(--bc-light, $background-color-light)
|
|
24
|
+
+root-var(--bc-danger, $background-color-danger)
|
|
25
|
+
+root-var(--bc-muted, $background-color-muted)
|
|
26
|
+
+root-var(--bc-main, $background-color-main)
|
|
7
27
|
|
|
8
28
|
|
|
9
29
|
// Document
|
|
@@ -34,7 +54,9 @@
|
|
|
34
54
|
// 3. Prevent adjustments of font size after orientation changes
|
|
35
55
|
// in IE on Windows Phone and in iOS.
|
|
36
56
|
html
|
|
37
|
-
|
|
57
|
+
// sass-lint:disable empty-args
|
|
58
|
+
font-size: _root-typo-size-px()
|
|
59
|
+
// sass-lint:enable empty-args
|
|
38
60
|
word-break: $base-word-break // 2
|
|
39
61
|
cursor: $base-cursor // 1
|
|
40
62
|
font-family: $typography-main
|
|
@@ -65,8 +87,8 @@
|
|
|
65
87
|
body
|
|
66
88
|
min-height: $base-body-min-height
|
|
67
89
|
margin: 0 // 1
|
|
68
|
-
font-size:
|
|
69
|
-
line-height:
|
|
90
|
+
font-size: typo-size(6)
|
|
91
|
+
line-height: typo-line-height(6)
|
|
70
92
|
color: $typography-main-color
|
|
71
93
|
background: $base-body-background
|
|
72
94
|
|
|
@@ -149,7 +171,7 @@
|
|
|
149
171
|
// Add the correct font weight in Chrome, Edge, and Safari.
|
|
150
172
|
b,
|
|
151
173
|
strong
|
|
152
|
-
font-weight:
|
|
174
|
+
font-weight: 600
|
|
153
175
|
|
|
154
176
|
// 1. Correct the inheritance and scaling of font size in all browsers.
|
|
155
177
|
// 2. Correct the odd `em` font sizing in all browsers.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// sass-lint:disable max-line-length
|
|
2
2
|
// sass-lint:disable variable-name-format
|
|
3
|
-
$_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-third: 1.2, major-third: 1.25, perfect-fourth: 1.333, augmented-fourth: 1.414, perfect-fifth: 1.5, golden-ratio: 1.618), typography-stacks: (sans-serif: (-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
|
3
|
+
$_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-third: 1.2, major-third: 1.25, perfect-fourth: 1.333, augmented-fourth: 1.414, perfect-fifth: 1.5, golden-ratio: 1.618), typography-stacks: (sans-serif: ("Helvetica Neue", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif), code: (SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)), baseline-offset-ratios: (Abel: 0.15772, "Abril Fatface": 0.1165, Anton: 0.096, Arial: 0.15332, "Arial Black": 0.10449, "Arial Narrow": 0.13818, Arimo: 0.15332, Arvo: 0.14307, Avenir: 0.183, Baskerville: 0.17407, "Bebas Neue": 0.2, Bitter: 0.165, "Bree Serif": 0.102, Cabin: 0.1425, Courier: 0.171, "Courier New": 0.23389, "Courier Prime": 0.31, "Crimson Text": 0.146, Dosis: 0.105, "Droid Sans": 0.15454, "Droid Serif": 0.15454, "Fira Sans": 0.225, "Fjalla One": 0.11963, Futura: 0.1106, Geneva: 0.125, "Gill Sans": 0.161, Georgia: 0.15112, Helvetica: 0.121, "Helvetica Neue": 0.128, Hind: 0.2455, Impact: 0.10107, Inconsolata: 0.1655, "Indie Flower": 0.25879, Josefin Sans: 0.25, Lato: 0.113, "League Gothic": 0.165, "Libre Baskerville": 0.15, "Libre Franklin": 0.14, Lobster: 0.125, Lora: 0.16235, "Lucida Grande": 0.122, Merriweather: 0.14502, "Merriweather Sans": 0.14502, Montserrat: 0.1415, Muli: 0.1225, "Noto Sans": 0.11206, "Noto Serif": 0.11206, Nunito: 0.171, "Open Sans": 0.11206, "Open Sans Condensed": 0.11206, Oswald: 0.04761, Oxygen: 0.10449, Palatino: 0.231, "Playfair Display": 0.08447, Poppins: 0.205, "PT Sans": 0.188, "PT Sans Narrow": 0.188, "PT Serif": 0.129, Raleway: 0.147, Roboto: 0.1582, "Roboto Condensed": 0.1582, "Roboto Slab": 0.11157, Rosario: 0.141, "San Francisco": 0.122, "Segoe UI": 0.086, "Slabo": 0.18519, "Source Sans Pro": 0.1445, "Source Code Pro": 0.145, "Source Serif Pro": 0.15, "Space Mono": 0.121, Tahoma: 0.10303, Times: 0.175, "Times New Roman": 0.1626, "Titillium Web": 0.1275, "Trebuchet MS": 0.1416, Ubuntu: 0.1285, "Ubuntu Condensed": 0.1285, "Varela Round": 0.184, Verdana: 0.1023, "Yanone Kaffeesatz": 0.1215, Yrsa: 0.25))
|
|
4
4
|
// sass-lint:enable max-line-length
|
|
5
5
|
// sass-lint:enable variable-name-format
|
|
6
6
|
|
|
@@ -86,7 +86,7 @@ $_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-thi
|
|
|
86
86
|
|
|
87
87
|
@function px-to-rem($px)
|
|
88
88
|
@if $px
|
|
89
|
-
@return $px /
|
|
89
|
+
@return $px / _root-typo-size-px() * 1rem
|
|
90
90
|
@return null
|
|
91
91
|
|
|
92
92
|
@function _responsive-class-fix($breakpoint)
|
|
@@ -94,60 +94,112 @@ $_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-thi
|
|
|
94
94
|
$class-fix: if($breakpoint == $first-breakpoint, null, "-#{$breakpoint}")
|
|
95
95
|
@return $class-fix
|
|
96
96
|
|
|
97
|
-
@function
|
|
98
|
-
$baseline
|
|
99
|
-
|
|
100
|
-
|
|
97
|
+
@function _root-typo-size-px()
|
|
98
|
+
@return if($baseline-height-px >= 12px, $baseline-height-px, $typography-main-size-px)
|
|
99
|
+
|
|
100
|
+
@function _typo-baseline-height-px()
|
|
101
|
+
@return if($typography-baseline-divided, $baseline-height-px / 2, $baseline-height-px)
|
|
101
102
|
|
|
102
103
|
@function _typo-size-px($level)
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
@
|
|
108
|
-
|
|
104
|
+
$pow: pow($typography-size-scale-ratio, 6 - $level)
|
|
105
|
+
$font-size: round($typography-main-size-px * $pow)
|
|
106
|
+
$font-size: if($font-size < 12px, 12px, $font-size)
|
|
107
|
+
// $font-size: if(strip-unit($font-size) % 2 == 0, $font-size, $font-size - 1px)
|
|
108
|
+
@return $font-size
|
|
109
|
+
|
|
110
|
+
@function _typo-line-height-px($level, $expected-line-height-ratio)
|
|
111
|
+
$typo-size-px: _typo-size-px($level)
|
|
112
|
+
$typo-baseline-height-px: _typo-baseline-height-px()
|
|
113
|
+
$expected-line-height-px: $typo-size-px * $expected-line-height-ratio
|
|
114
|
+
$line-height-residue-px: $expected-line-height-px % $typo-baseline-height-px
|
|
115
|
+
@if strip-unit($line-height-residue-px) == 0
|
|
116
|
+
@return $expected-line-height-px
|
|
117
|
+
$line-height-bound-px: $expected-line-height-px - $line-height-residue-px
|
|
118
|
+
$line-height-lower-px: $line-height-bound-px - $typo-baseline-height-px
|
|
119
|
+
$line-height-upper-px: $line-height-bound-px + $typo-baseline-height-px
|
|
120
|
+
$line-height-lower-diff-px: $expected-line-height-px - $line-height-lower-px
|
|
121
|
+
$line-height-upper-diff-px: $line-height-upper-px - $expected-line-height-px
|
|
122
|
+
@if $line-height-lower-diff-px < $line-height-upper-diff-px
|
|
123
|
+
@return $line-height-lower-px
|
|
124
|
+
@return $line-height-upper-px
|
|
109
125
|
|
|
110
|
-
@function _typo-
|
|
126
|
+
@function _typo-padding-top-px($level, $expected-line-height-ratio, $baseline-offset-ratio)
|
|
127
|
+
$typo-size-px: _typo-size-px($level)
|
|
128
|
+
$line-height-px: _typo-line-height-px($level, $expected-line-height-ratio)
|
|
129
|
+
@return ($line-height-px - $typo-size-px) / 2 + $typo-size-px * $baseline-offset-ratio
|
|
130
|
+
|
|
131
|
+
@function _typo-padding-bottom-px($level, $expected-line-height-ratio, $baseline-offset-ratio)
|
|
132
|
+
$offset-bottom-px: 0
|
|
133
|
+
$baseline-count: 1
|
|
134
|
+
$offset-top-px: _typo-padding-top-px($level, $expected-line-height-ratio, $baseline-offset-ratio)
|
|
135
|
+
@while $offset-bottom-px <= 0
|
|
136
|
+
$offset-bottom-px: _typo-baseline-height-px() * $baseline-count - $offset-top-px
|
|
137
|
+
$baseline-count: $baseline-count + 1
|
|
138
|
+
@return $offset-bottom-px
|
|
139
|
+
|
|
140
|
+
@function _typo-expected-line-height-ratio($typography, $level)
|
|
141
|
+
$default: nth($typography-main-expected-line-height-ratios, 2)
|
|
142
|
+
@if $typography == code
|
|
143
|
+
@return existing($typography-code-expected-line-height-ratio, $default)
|
|
144
|
+
@if $typography == quote
|
|
145
|
+
$default: nth($typography-main-expected-line-height-ratios, 1)
|
|
146
|
+
@return existing($typography-quote-expected-line-height-ratio, $default)
|
|
147
|
+
@if $typography == heading
|
|
148
|
+
$default: nth($typography-main-expected-line-height-ratios, 1)
|
|
149
|
+
$line-height-ratio: nth($typography-heading-expected-line-height-ratios, $level)
|
|
150
|
+
@return existing($line-height-ratio, $default)
|
|
151
|
+
$line-height-ratio: nth($typography-main-expected-line-height-ratios, $level - 4)
|
|
152
|
+
@return existing($line-height-ratio, $default)
|
|
153
|
+
|
|
154
|
+
// sass-lint:disable indentation
|
|
155
|
+
@function _typo-baseline-offset-ratio($typography)
|
|
156
|
+
@if $typography == code and $typography-code-baseline-offset-ratio
|
|
157
|
+
@return $typography-code-baseline-offset-ratio
|
|
158
|
+
@if $typography == quote and $typography-quote-baseline-offset-ratio
|
|
159
|
+
@return $typography-quote-baseline-offset-ratio
|
|
160
|
+
@if $typography == heading and $typography-heading-baseline-offset-ratio
|
|
161
|
+
@return $typography-heading-baseline-offset-ratio
|
|
162
|
+
@return $typography-main-baseline-offset-ratio
|
|
163
|
+
// sass-lint:enable indentation
|
|
164
|
+
|
|
165
|
+
@function typo-size($level)
|
|
111
166
|
@if $level
|
|
112
|
-
$
|
|
113
|
-
|
|
114
|
-
@while _baseline-height-px($baseline-count) / $font-size < 1.2
|
|
115
|
-
$baseline-count: $baseline-count + 1
|
|
116
|
-
@return _baseline-height-px($baseline-count)
|
|
117
|
-
@else
|
|
118
|
-
@return null
|
|
167
|
+
@return px-to-rem(_typo-size-px($level))
|
|
168
|
+
@return null
|
|
119
169
|
|
|
120
|
-
@function
|
|
121
|
-
@if $
|
|
122
|
-
$font-size: _typo-size-px($level)
|
|
123
|
-
$line-height: _typo-line-height-px($level)
|
|
124
|
-
@return ($line-height - $font-size) / 2 + $font-size * $typeface-baseline-offset
|
|
125
|
-
@else
|
|
170
|
+
@function typo-line-height($level, $typography: main, $expected-line-height-ratio: null)
|
|
171
|
+
@if $level == null
|
|
126
172
|
@return null
|
|
173
|
+
@if $expected-line-height-ratio == null
|
|
174
|
+
$expected-line-height-ratio: _typo-expected-line-height-ratio($typography, $level)
|
|
175
|
+
$line-height-px: _typo-line-height-px($level, $expected-line-height-ratio)
|
|
176
|
+
@return px-to-rem($line-height-px)
|
|
127
177
|
|
|
128
|
-
@function
|
|
129
|
-
@if $
|
|
130
|
-
$offset-top: _typo-padding-top-px($level, $typeface-baseline-offset)
|
|
131
|
-
$offset-bottom: 0
|
|
132
|
-
$baseline-count: 1
|
|
133
|
-
@while $offset-bottom <= 0
|
|
134
|
-
$offset-bottom: _baseline-height-px($baseline-count) - $offset-top
|
|
135
|
-
$baseline-count: $baseline-count + 1
|
|
136
|
-
@return $offset-bottom
|
|
137
|
-
@else
|
|
178
|
+
@function typo-padding-top($level, $typography: main, $expected-line-height-ratio: null)
|
|
179
|
+
@if $level == null
|
|
138
180
|
@return null
|
|
181
|
+
@if $expected-line-height-ratio == null
|
|
182
|
+
$expected-line-height-ratio: _typo-expected-line-height-ratio($typography, $level)
|
|
183
|
+
$baseline-offset-ratio: _typo-baseline-offset-ratio($typography)
|
|
184
|
+
$padding-top-px: _typo-padding-top-px($level, $expected-line-height-ratio, $baseline-offset-ratio)
|
|
185
|
+
@return px-to-rem($padding-top-px)
|
|
139
186
|
|
|
140
|
-
@function typo-
|
|
141
|
-
@
|
|
142
|
-
|
|
143
|
-
@
|
|
144
|
-
|
|
187
|
+
@function typo-padding-bottom($level, $typography: main, $expected-line-height-ratio: null)
|
|
188
|
+
@if $level == null
|
|
189
|
+
@return null
|
|
190
|
+
@if $expected-line-height-ratio == null
|
|
191
|
+
$expected-line-height-ratio: _typo-expected-line-height-ratio($typography, $level)
|
|
192
|
+
$baseline-offset-ratio: _typo-baseline-offset-ratio($typography)
|
|
193
|
+
$padding-bottom-px: _typo-padding-bottom-px($level, $expected-line-height-ratio, $baseline-offset-ratio)
|
|
194
|
+
@return px-to-rem($padding-bottom-px)
|
|
145
195
|
|
|
146
|
-
@function
|
|
147
|
-
@return px-to-rem(
|
|
196
|
+
@function baseline($count: 1)
|
|
197
|
+
@return px-to-rem($baseline-height-px * $count)
|
|
148
198
|
|
|
149
|
-
@function
|
|
150
|
-
|
|
199
|
+
@function _baseline-background($height, $color)
|
|
200
|
+
$baseline-gradient: linear-gradient(to bottom, $color 0, rgba(255, 255, 255, 0) 1px)
|
|
201
|
+
$baseline-background: $baseline-gradient left top / 100% $height repeat-y
|
|
202
|
+
@return $baseline-background
|
|
151
203
|
|
|
152
204
|
@function _str-replace($string, $search, $replace: "")
|
|
153
205
|
$index: str-index($string, $search)
|
|
@@ -195,13 +247,16 @@ $_CONSTANTS: (scale-ratios: (minor-second: 1.067, major-second: 1.125, minor-thi
|
|
|
195
247
|
$icon: if($stroke, _str-replace($icon, "#stroke", "#{$stroke}"), $icon)
|
|
196
248
|
@return svg-encode($icon)
|
|
197
249
|
|
|
250
|
+
@function _form-icon-size-em()
|
|
251
|
+
@return existing($form-element-icon-size-em, $icon-size-em)
|
|
252
|
+
|
|
198
253
|
@function _form-icon-margin-top($form-element-height-rem, $form-element-typography-size-level)
|
|
199
254
|
$border-bottom-width: mirror-nth($form-element-border-width, 3)
|
|
200
255
|
$border-top-width: nth($form-element-border-width, 1)
|
|
201
256
|
$border-bottom-unit-is-rem: _is-rem($border-bottom-width)
|
|
202
257
|
$border-top-unit-is-rem: _is-rem($border-top-width)
|
|
203
258
|
$font-size: typo-size($form-element-typography-size-level)
|
|
204
|
-
$icon-size: $font-size * strip-unit(
|
|
259
|
+
$icon-size: $font-size * strip-unit(_form-icon-size-em())
|
|
205
260
|
$total-height: ($form-element-height-rem + $icon-size) / 2
|
|
206
261
|
$border-unit-is-rem: $border-bottom-unit-is-rem and $border-top-unit-is-rem
|
|
207
262
|
$border-unit-is-the-same: _is-same-unit($border-bottom-width, $border-top-width)
|
|
@@ -5,28 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
|
|
7
7
|
// global variables
|
|
8
|
-
$breakpoint-width-pxs: (s: 0, m: 768px, l: 1200px) !default
|
|
9
|
-
$breakpoint-aspect-ratios: (p: 0, l: 1.0001) !default
|
|
10
|
-
$breakpoint-resolutions: (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
$spacing-base-rem: 1rem !default
|
|
14
|
-
$spacing-tiny-rem: $spacing-base-rem / 2 !default
|
|
15
|
-
$spacing-small-rem: $spacing-base-rem !default
|
|
16
|
-
$spacing-medium-rem: $spacing-base-rem * 2 !default
|
|
17
|
-
$spacing-large-rem: $spacing-base-rem * 4 !default
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
$z-index-low: -1 !default
|
|
22
|
-
$z-index-normal: 0 !default
|
|
23
|
-
$z-index-high: 1 !default
|
|
24
|
-
$z-index-higher: 2 !default
|
|
25
|
-
$z-index-much-higher: 3 !default
|
|
26
|
-
$z-index-highest: 4 !default
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
8
|
$opacity-emphasis: 1 !default
|
|
31
9
|
$opacity-main: 0.9 !default
|
|
32
10
|
$opacity-muted: 0.618 !default
|
|
@@ -39,11 +17,11 @@ $opacity-disabled: $opacity-muted
|
|
|
39
17
|
$color-primary: hsba(340, 54, 98) !default
|
|
40
18
|
$color-secondary: hsba(0, 0, 56) !default
|
|
41
19
|
$color-danger: hsba(0, 82, 82) !default
|
|
42
|
-
$color-dark: hsba(0, 0,
|
|
20
|
+
$color-dark: hsba(0, 0, 12) !default
|
|
43
21
|
$color-light: hsba(0, 0, 100) !default
|
|
44
22
|
$color-emphasis: $color-dark !default
|
|
45
23
|
$color-main: lighten($color-dark, 10%) !default
|
|
46
|
-
$color-muted: lighten($color-dark,
|
|
24
|
+
$color-muted: lighten($color-dark, 60%) !default
|
|
47
25
|
$color-inverse-emphasis: $color-light !default
|
|
48
26
|
$color-inverse-main: rgba($color-light, $opacity-main) !default
|
|
49
27
|
$color-inverse-muted: rgba($color-light, $opacity-muted) !default
|
|
@@ -53,7 +31,7 @@ $color-inverse-muted: rgba($color-light, $opacity-muted) !default
|
|
|
53
31
|
$background-color-primary: $color-primary !default
|
|
54
32
|
$background-color-secondary: lighten($color-secondary, 30%) !default
|
|
55
33
|
$background-color-danger: $color-danger !default
|
|
56
|
-
$background-color-dark: $color-dark !default
|
|
34
|
+
$background-color-dark: lighten($color-dark, 10%) !default
|
|
57
35
|
$background-color-light: $color-light !default
|
|
58
36
|
$background-color-muted: darken($background-color-light, 3%) !default
|
|
59
37
|
$background-color-emphasis: lighten($background-color-primary, 22%) !default
|
|
@@ -70,15 +48,12 @@ $line-color-danger: $color-danger !default
|
|
|
70
48
|
$line-color-dark: $color-dark !default
|
|
71
49
|
$line-color-light: $color-light !default
|
|
72
50
|
$line-color-emphasis: $line-color-primary !default
|
|
73
|
-
$line-color-main:
|
|
74
|
-
$line-color-muted:
|
|
51
|
+
$line-color-main: darken($line-color-light, 30%) !default
|
|
52
|
+
$line-color-muted: darken($line-color-light, 8%) !default
|
|
75
53
|
$line-color-inverse-emphasis: $line-color-primary !default
|
|
76
54
|
$line-color-inverse-main: rgba($line-color-light, $opacity-main) !default
|
|
77
55
|
$line-color-inverse-muted: rgba($line-color-light, $opacity-muted) !default
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
$line-width-main: 1px !default
|
|
56
|
+
$line-width-main: 1px !default
|
|
82
57
|
|
|
83
58
|
|
|
84
59
|
|
|
@@ -104,13 +79,46 @@ $text-shadow-high: null !default
|
|
|
104
79
|
|
|
105
80
|
|
|
106
81
|
|
|
107
|
-
$transition-duration-short:
|
|
108
|
-
$transition-duration-normal:
|
|
109
|
-
$transition-duration-long:
|
|
110
|
-
|
|
82
|
+
$transition-duration-short: 0.25s !default
|
|
83
|
+
$transition-duration-normal: 0.5s !default
|
|
84
|
+
$transition-duration-long: 1s !default
|
|
111
85
|
$transition-timing-function-main: ease !default
|
|
112
86
|
|
|
113
87
|
|
|
88
|
+
|
|
89
|
+
$baseline-height-px: 12px !default
|
|
90
|
+
$breakpoint-width-pxs: (s: 0, m: 768px, l: 1200px) !default
|
|
91
|
+
$breakpoint-aspect-ratios: (p: 0, l: 1.0001) !default
|
|
92
|
+
$breakpoint-resolutions: (l: 0, h: 105.6dpi, xh: 201.6dpi) !default
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
|
|
96
|
+
$typography-baseline-divided: false !default
|
|
97
|
+
$typography-size-scale-ratio: constant-get(scale-ratios, major-second) !default
|
|
98
|
+
$typography-main: constant-get(typography-stacks, sans-serif) !default
|
|
99
|
+
$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default
|
|
100
|
+
$typography-main-size-px: 16px !default
|
|
101
|
+
$typography-main-expected-line-height-ratios: (1.3, 1.5, 1.5, 1.5) !default
|
|
102
|
+
$typography-main-color: $color-main !default
|
|
103
|
+
|
|
104
|
+
|
|
105
|
+
|
|
106
|
+
$spacing-tiny-rem: baseline(0.5) !default
|
|
107
|
+
$spacing-small-rem: baseline(1) !default
|
|
108
|
+
$spacing-medium-rem: baseline(2) !default
|
|
109
|
+
$spacing-large-rem: baseline(4) !default
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
|
|
113
|
+
$z-index-low: -1 !default
|
|
114
|
+
$z-index-normal: 0 !default
|
|
115
|
+
$z-index-high: 1 !default
|
|
116
|
+
$z-index-higher: 2 !default
|
|
117
|
+
$z-index-much-higher: 3 !default
|
|
118
|
+
$z-index-highest: 4 !default
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
114
122
|
// variables for base
|
|
115
123
|
$base-cursor: default !default
|
|
116
124
|
$base-word-break: break-word !default
|
|
@@ -141,31 +149,29 @@ $base-selection-background-color: $background-color-dark !default
|
|
|
141
149
|
// variables for behaviors
|
|
142
150
|
$focus-outline-style: dashed !default
|
|
143
151
|
$focus-outline-width-px: 2px !default
|
|
144
|
-
$focus-outline-color: $line-color-
|
|
152
|
+
$focus-outline-color: $line-color-main !default
|
|
145
153
|
$focus-outline-offset-px: - $focus-outline-width-px !default
|
|
146
154
|
|
|
147
155
|
|
|
148
156
|
|
|
149
157
|
// variables for elements
|
|
150
|
-
$badge-
|
|
151
|
-
$badge-
|
|
152
|
-
$badge-
|
|
153
|
-
$badge-
|
|
154
|
-
$badge-background: $background-color-primary !default
|
|
155
|
-
$badge-color: $color-inverse-emphasis !default
|
|
158
|
+
$badge-margin-left-em: 0.5em !default
|
|
159
|
+
$badge-horizontal-padding-em: 0.4em !default
|
|
160
|
+
$badge-background: $background-color-primary !default
|
|
161
|
+
$badge-color: $color-inverse-emphasis !default
|
|
156
162
|
|
|
157
163
|
|
|
158
164
|
|
|
159
|
-
$button-height-rem:
|
|
160
|
-
$button-small-height-rem:
|
|
161
|
-
$button-large-height-rem:
|
|
162
|
-
$button-horizontal-padding-em:
|
|
163
|
-
$button-typography-size-level:
|
|
164
|
-
$button-small-typography-size-level:
|
|
165
|
-
$button-large-typography-size-level:
|
|
166
|
-
$button-border-width:
|
|
167
|
-
$button-border-style:
|
|
168
|
-
$button-border-radius:
|
|
165
|
+
$button-height-rem: baseline(3) !default
|
|
166
|
+
$button-small-height-rem: baseline(2) !default
|
|
167
|
+
$button-large-height-rem: baseline(4) !default
|
|
168
|
+
$button-horizontal-padding-em: 0.6875em !default
|
|
169
|
+
$button-typography-size-level: 6 !default
|
|
170
|
+
$button-small-typography-size-level: 7 !default
|
|
171
|
+
$button-large-typography-size-level: 5 !default
|
|
172
|
+
$button-border-width: $line-width-main !default
|
|
173
|
+
$button-border-style: solid !default
|
|
174
|
+
$button-border-radius: $border-radius-main !default
|
|
169
175
|
|
|
170
176
|
|
|
171
177
|
|
|
@@ -245,13 +251,13 @@ $button-light-active-box-shadow: $button-light-box-shadow !default
|
|
|
245
251
|
|
|
246
252
|
|
|
247
253
|
$button-hollow-primary-color: $color-primary !default
|
|
248
|
-
$button-hollow-primary-hover-color:
|
|
249
|
-
$button-hollow-primary-active-color: existing($button-primary-active-color, $button-
|
|
250
|
-
$button-hollow-primary-hover-background:
|
|
251
|
-
$button-hollow-primary-active-background: existing($button-primary-active-background, $button-
|
|
254
|
+
$button-hollow-primary-hover-color: null !default
|
|
255
|
+
$button-hollow-primary-active-color: existing($button-primary-active-color, $button-primary-hover-color, $button-primary-color) !default
|
|
256
|
+
$button-hollow-primary-hover-background: rgba($background-color-primary, $opacity-most-muted) !default
|
|
257
|
+
$button-hollow-primary-active-background: existing($button-primary-active-background, $button-primary-hover-background, $button-primary-background) !default
|
|
252
258
|
$button-hollow-primary-border-color: null !default
|
|
253
|
-
$button-hollow-primary-hover-border-color:
|
|
254
|
-
$button-hollow-primary-active-border-color: existing($button-primary-active-border-color, $button-
|
|
259
|
+
$button-hollow-primary-hover-border-color: null !default
|
|
260
|
+
$button-hollow-primary-active-border-color: existing($button-primary-active-border-color, $button-primary-hover-border-color, $button-primary-border-color, transparent) !default
|
|
255
261
|
$button-hollow-primary-box-shadow: $button-primary-box-shadow !default
|
|
256
262
|
$button-hollow-primary-hover-box-shadow: $button-primary-hover-box-shadow !default
|
|
257
263
|
$button-hollow-primary-active-box-shadow: $button-primary-active-box-shadow !default
|
|
@@ -259,13 +265,13 @@ $button-hollow-primary-active-box-shadow: $button-primary-active-box-shadow
|
|
|
259
265
|
|
|
260
266
|
|
|
261
267
|
$button-hollow-secondary-color: $color-main !default
|
|
262
|
-
$button-hollow-secondary-hover-color:
|
|
263
|
-
$button-hollow-secondary-active-color: existing($button-secondary-active-color, $button-
|
|
264
|
-
$button-hollow-secondary-hover-background:
|
|
265
|
-
$button-hollow-secondary-active-background: existing($button-secondary-active-background, $button-
|
|
268
|
+
$button-hollow-secondary-hover-color: null !default
|
|
269
|
+
$button-hollow-secondary-active-color: existing($button-secondary-active-color, $button-secondary-hover-color, $button-secondary-color) !default
|
|
270
|
+
$button-hollow-secondary-hover-background: rgba($background-color-secondary, $opacity-more-muted) !default
|
|
271
|
+
$button-hollow-secondary-active-background: existing($button-secondary-active-background, $button-secondary-hover-background, $button-secondary-background) !default
|
|
266
272
|
$button-hollow-secondary-border-color: $line-color-secondary !default
|
|
267
|
-
$button-hollow-secondary-hover-border-color:
|
|
268
|
-
$button-hollow-secondary-active-border-color: existing($button-secondary-active-border-color, $button-
|
|
273
|
+
$button-hollow-secondary-hover-border-color: null !default
|
|
274
|
+
$button-hollow-secondary-active-border-color: existing($button-secondary-active-border-color, $button-secondary-hover-border-color, $button-secondary-border-color, transparent) !default
|
|
269
275
|
$button-hollow-secondary-box-shadow: $button-secondary-box-shadow !default
|
|
270
276
|
$button-hollow-secondary-hover-box-shadow: $button-secondary-hover-box-shadow !default
|
|
271
277
|
$button-hollow-secondary-active-box-shadow: $button-secondary-active-box-shadow !default
|
|
@@ -273,13 +279,13 @@ $button-hollow-secondary-active-box-shadow: $button-secondary-active-box-sh
|
|
|
273
279
|
|
|
274
280
|
|
|
275
281
|
$button-hollow-danger-color: $color-danger !default
|
|
276
|
-
$button-hollow-danger-hover-color:
|
|
277
|
-
$button-hollow-danger-active-color: existing($button-danger-active-color, $button-
|
|
278
|
-
$button-hollow-danger-hover-background:
|
|
279
|
-
$button-hollow-danger-active-background: existing($button-danger-active-background, $button-
|
|
282
|
+
$button-hollow-danger-hover-color: null !default
|
|
283
|
+
$button-hollow-danger-active-color: existing($button-danger-active-color, $button-danger-hover-color, $button-danger-color) !default
|
|
284
|
+
$button-hollow-danger-hover-background: rgba($background-color-danger, $opacity-most-muted) !default
|
|
285
|
+
$button-hollow-danger-active-background: existing($button-danger-active-background, $button-danger-hover-background, $button-danger-background) !default
|
|
280
286
|
$button-hollow-danger-border-color: null !default
|
|
281
|
-
$button-hollow-danger-hover-border-color:
|
|
282
|
-
$button-hollow-danger-active-border-color: existing($button-danger-active-border-color, $button-
|
|
287
|
+
$button-hollow-danger-hover-border-color: null !default
|
|
288
|
+
$button-hollow-danger-active-border-color: existing($button-danger-active-border-color, $button-danger-hover-border-color, $button-danger-border-color, transparent) !default
|
|
283
289
|
$button-hollow-danger-box-shadow: $button-danger-box-shadow !default
|
|
284
290
|
$button-hollow-danger-hover-box-shadow: $button-danger-hover-box-shadow !default
|
|
285
291
|
$button-hollow-danger-active-box-shadow: $button-danger-active-box-shadow !default
|
|
@@ -287,13 +293,13 @@ $button-hollow-danger-active-box-shadow: $button-danger-active-box-shadow !
|
|
|
287
293
|
|
|
288
294
|
|
|
289
295
|
$button-hollow-dark-color: $color-dark !default
|
|
290
|
-
$button-hollow-dark-hover-color:
|
|
291
|
-
$button-hollow-dark-active-color: existing($button-dark-active-color, $button-
|
|
292
|
-
$button-hollow-dark-hover-background:
|
|
293
|
-
$button-hollow-dark-active-background: existing($button-dark-active-background, $button-
|
|
296
|
+
$button-hollow-dark-hover-color: null !default
|
|
297
|
+
$button-hollow-dark-active-color: existing($button-dark-active-color, $button-dark-hover-color, $button-dark-color) !default
|
|
298
|
+
$button-hollow-dark-hover-background: rgba($background-color-dark, $opacity-most-muted) !default
|
|
299
|
+
$button-hollow-dark-active-background: existing($button-dark-active-background, $button-dark-hover-background, $button-dark-background) !default
|
|
294
300
|
$button-hollow-dark-border-color: null !default
|
|
295
|
-
$button-hollow-dark-hover-border-color:
|
|
296
|
-
$button-hollow-dark-active-border-color: existing($button-dark-active-border-color, $button-
|
|
301
|
+
$button-hollow-dark-hover-border-color: null !default
|
|
302
|
+
$button-hollow-dark-active-border-color: existing($button-dark-active-border-color, $button-dark-hover-border-color, $button-dark-border-color, transparent) !default
|
|
297
303
|
$button-hollow-dark-box-shadow: $button-dark-box-shadow !default
|
|
298
304
|
$button-hollow-dark-hover-box-shadow: $button-dark-hover-box-shadow !default
|
|
299
305
|
$button-hollow-dark-active-box-shadow: $button-dark-active-box-shadow !default
|
|
@@ -301,13 +307,13 @@ $button-hollow-dark-active-box-shadow: $button-dark-active-box-shadow !defa
|
|
|
301
307
|
|
|
302
308
|
|
|
303
309
|
$button-hollow-light-color: $color-light !default
|
|
304
|
-
$button-hollow-light-hover-color:
|
|
305
|
-
$button-hollow-light-active-color: existing($button-light-active-color, $button-
|
|
306
|
-
$button-hollow-light-hover-background:
|
|
307
|
-
$button-hollow-light-active-background: existing($button-light-active-background, $button-
|
|
310
|
+
$button-hollow-light-hover-color: null !default
|
|
311
|
+
$button-hollow-light-active-color: existing($button-light-active-color, $button-light-hover-color, $button-light-color) !default
|
|
312
|
+
$button-hollow-light-hover-background: rgba($background-color-light, $opacity-most-muted) !default
|
|
313
|
+
$button-hollow-light-active-background: existing($button-light-active-background, $button-light-hover-background, $button-light-background) !default
|
|
308
314
|
$button-hollow-light-border-color: null !default
|
|
309
|
-
$button-hollow-light-hover-border-color:
|
|
310
|
-
$button-hollow-light-active-border-color: existing($button-light-active-border-color, $button-
|
|
315
|
+
$button-hollow-light-hover-border-color: null !default
|
|
316
|
+
$button-hollow-light-active-border-color: existing($button-light-active-border-color, $button-light-hover-border-color, $button-light-border-color, transparent) !default
|
|
311
317
|
$button-hollow-light-box-shadow: $button-light-box-shadow !default
|
|
312
318
|
$button-hollow-light-hover-box-shadow: $button-light-hover-box-shadow !default
|
|
313
319
|
$button-hollow-light-active-box-shadow: $button-light-active-box-shadow !default
|
|
@@ -359,26 +365,26 @@ $button-text-light-active-text-shadow: null !default
|
|
|
359
365
|
|
|
360
366
|
|
|
361
367
|
|
|
362
|
-
$container-max-width-rem:
|
|
368
|
+
$container-max-width-rem: px-to-rem(1366px) !default
|
|
363
369
|
$container-padding-rem: $spacing-medium-rem $spacing-small-rem !default
|
|
364
370
|
|
|
365
371
|
|
|
366
372
|
|
|
367
|
-
$form-label-typography-size-level:
|
|
368
|
-
$form-label-small-typography-size-level:
|
|
369
|
-
$form-label-large-typography-size-level:
|
|
370
|
-
$form-label-color:
|
|
373
|
+
$form-label-typography-size-level: 6 !default
|
|
374
|
+
$form-label-small-typography-size-level: 7 !default
|
|
375
|
+
$form-label-large-typography-size-level: 5 !default
|
|
376
|
+
$form-label-color: null !default
|
|
371
377
|
$form-label-required-content: " | Required" !default
|
|
372
378
|
$form-label-required-color: $color-danger !default
|
|
373
379
|
|
|
374
380
|
|
|
375
381
|
|
|
376
|
-
$form-element-inline-width-rem:
|
|
377
|
-
$form-element-small-inline-width-rem:
|
|
378
|
-
$form-element-large-inline-width-rem:
|
|
379
|
-
$form-element-typography-size-level:
|
|
380
|
-
$form-element-small-typography-size-level:
|
|
381
|
-
$form-element-large-typography-size-level:
|
|
382
|
+
$form-element-inline-width-rem: baseline(22) !default
|
|
383
|
+
$form-element-small-inline-width-rem: baseline(18) !default
|
|
384
|
+
$form-element-large-inline-width-rem: baseline(26) !default
|
|
385
|
+
$form-element-typography-size-level: 6 !default
|
|
386
|
+
$form-element-small-typography-size-level: 7 !default
|
|
387
|
+
$form-element-large-typography-size-level: 5 !default
|
|
382
388
|
$form-element-color: $color-main !default
|
|
383
389
|
$form-element-color-on-error: null !default
|
|
384
390
|
$form-element-color-on-focus: null !default
|
|
@@ -388,43 +394,43 @@ $form-element-background-on-error: null !default
|
|
|
388
394
|
$form-element-border-width: $line-width-main !default
|
|
389
395
|
$form-element-border-style: solid !default
|
|
390
396
|
$form-element-border-radius: $border-radius-main !default
|
|
391
|
-
$form-element-border-color: $line-color-
|
|
397
|
+
$form-element-border-color: $line-color-muted !default
|
|
392
398
|
$form-element-border-color-on-error: $line-color-danger !default
|
|
393
399
|
$form-element-border-color-on-focus: $line-color-primary !default
|
|
394
400
|
$form-element-box-shadow: null !default
|
|
395
401
|
$form-element-box-shadow-on-focus: null !default
|
|
396
402
|
$form-element-box-shadow-on-error: null !default
|
|
397
|
-
$form-element-icon-size-em:
|
|
398
|
-
$form-element-icon-color: $
|
|
403
|
+
$form-element-icon-size-em: null !default
|
|
404
|
+
$form-element-icon-color: lighten($color-muted, 10%) !default
|
|
399
405
|
$form-element-icon-color-on-error: $form-element-border-color-on-error !default
|
|
400
406
|
$form-element-icon-color-on-focus: $form-element-border-color-on-focus !default
|
|
401
407
|
|
|
402
408
|
|
|
403
409
|
|
|
404
|
-
$form-element-horizontal-padding-em:
|
|
405
|
-
$form-element-height-rem:
|
|
406
|
-
$form-element-small-height-rem:
|
|
407
|
-
$form-element-large-height-rem:
|
|
408
|
-
$form-element-multiple-rows-height-rem:
|
|
409
|
-
$form-element-multiple-rows-small-height-rem:
|
|
410
|
-
$form-element-multiple-rows-large-height-rem:
|
|
410
|
+
$form-element-horizontal-padding-em: 0.6875em !default
|
|
411
|
+
$form-element-height-rem: baseline(3) !default
|
|
412
|
+
$form-element-small-height-rem: baseline(2) !default
|
|
413
|
+
$form-element-large-height-rem: baseline(4) !default
|
|
414
|
+
$form-element-multiple-rows-height-rem: $form-element-height-rem * 3 !default
|
|
415
|
+
$form-element-multiple-rows-small-height-rem: $form-element-small-height-rem * 3 !default
|
|
416
|
+
$form-element-multiple-rows-large-height-rem: $form-element-large-height-rem * 3 !default
|
|
411
417
|
|
|
412
418
|
|
|
413
419
|
|
|
414
|
-
$form-element-checkfield-size-em: 1.
|
|
420
|
+
$form-element-checkfield-size-em: 1.25em !default
|
|
415
421
|
$form-element-checked-icon-color: $form-element-color !default
|
|
416
422
|
$form-element-checked-icon-color-on-error: null !default
|
|
417
423
|
$form-element-checked-icon-color-on-focus: null !default
|
|
418
424
|
|
|
419
425
|
|
|
420
426
|
|
|
421
|
-
$form-element-track-height-em: 0.
|
|
422
|
-
$form-element-track-background: darken($background-color-muted,
|
|
427
|
+
$form-element-track-height-em: 0.25em !default
|
|
428
|
+
$form-element-track-background: darken($background-color-muted, 5%) !default
|
|
423
429
|
$form-element-track-background-on-focus: null !default
|
|
424
430
|
$form-element-track-background-on-error: null !default
|
|
425
431
|
$form-element-track-border-radius: $border-radius-main !default
|
|
426
|
-
$form-element-thumb-
|
|
427
|
-
$form-element-thumb-width-em
|
|
432
|
+
$form-element-thumb-width-em: 1.25em !default
|
|
433
|
+
$form-element-thumb-height-em: $form-element-thumb-width-em !default
|
|
428
434
|
$form-element-thumb-background: $form-element-track-background !default
|
|
429
435
|
$form-element-thumb-background-on-error: null !default
|
|
430
436
|
$form-element-thumb-background-on-focus: $background-color-primary !default
|
|
@@ -435,9 +441,10 @@ $form-element-thumb-border-color-on-focus: null !default
|
|
|
435
441
|
|
|
436
442
|
|
|
437
443
|
|
|
438
|
-
$form-helper-
|
|
444
|
+
$form-helper-margin-rem: null !default
|
|
445
|
+
$form-helper-typography-size-level: 7 !default
|
|
439
446
|
$form-helper-small-typography-size-level: null !default
|
|
440
|
-
$form-helper-large-typography-size-level:
|
|
447
|
+
$form-helper-large-typography-size-level: 6 !default
|
|
441
448
|
$form-hint-color: $color-muted !default
|
|
442
449
|
$form-error-color: $color-danger !default
|
|
443
450
|
$form-placeholder-color: $color-muted !default
|
|
@@ -458,9 +465,14 @@ $grid-gutter-width-rem: $spacing-medium-rem !default
|
|
|
458
465
|
|
|
459
466
|
|
|
460
467
|
|
|
461
|
-
$icon-size-em:
|
|
462
|
-
$icon-stroke-width:
|
|
463
|
-
|
|
468
|
+
$icon-size-em: 1em !default
|
|
469
|
+
$icon-stroke-width: 2px !default
|
|
470
|
+
|
|
471
|
+
|
|
472
|
+
|
|
473
|
+
$media-content-aspect-ratio: 16 / 9 !default
|
|
474
|
+
$media-border-radius: $border-radius-main !default
|
|
475
|
+
$media-background-color: $background-color-muted !default
|
|
464
476
|
|
|
465
477
|
|
|
466
478
|
|
|
@@ -468,10 +480,10 @@ $overlay-background: rgba($background-color-dark, $opacity-main) !default
|
|
|
468
480
|
|
|
469
481
|
|
|
470
482
|
|
|
471
|
-
$progress-height-rem:
|
|
483
|
+
$progress-height-rem: baseline(2) !default
|
|
472
484
|
$progress-border-radius: $border-radius-main !default
|
|
473
485
|
$progress-background: $background-color-muted !default
|
|
474
|
-
$progress-bar-typography-size-level:
|
|
486
|
+
$progress-bar-typography-size-level: 7 !default
|
|
475
487
|
$progress-bar-min-width-em: 3em !default
|
|
476
488
|
$progress-bar-padding: 0 $spacing-tiny-rem !default
|
|
477
489
|
$progress-bar-background: $background-color-primary !default
|
|
@@ -480,10 +492,10 @@ $progress-bar-color: $color-inverse-main !default
|
|
|
480
492
|
|
|
481
493
|
|
|
482
494
|
$scrollbar-width-breakpoint: m !default
|
|
483
|
-
$scrollbar-breakpoint-vertical-width-rem:
|
|
484
|
-
$scrollbar-breakpoint-horizontal-height-rem:
|
|
495
|
+
$scrollbar-breakpoint-vertical-width-rem: $spacing-tiny-rem !default
|
|
496
|
+
$scrollbar-breakpoint-horizontal-height-rem: $scrollbar-breakpoint-vertical-width-rem !default
|
|
485
497
|
$scrollbar-thumb-background: rgba($color-muted, $opacity-more-muted) !default
|
|
486
|
-
$scrollbar-thumb-border-radius:
|
|
498
|
+
$scrollbar-thumb-border-radius: $scrollbar-breakpoint-vertical-width-rem !default
|
|
487
499
|
$scrollbar-edge-overflow-style: -ms-autohiding-scrollbar !default
|
|
488
500
|
|
|
489
501
|
|
|
@@ -491,7 +503,7 @@ $scrollbar-edge-overflow-style: -ms-autohiding-scrollbar !defaul
|
|
|
491
503
|
$table-cell-padding-rem: $spacing-small-rem !default
|
|
492
504
|
$table-border-style: solid !default
|
|
493
505
|
$table-border-width: $line-width-main !default
|
|
494
|
-
$table-border-color: $line-color-
|
|
506
|
+
$table-border-color: $line-color-muted !default
|
|
495
507
|
$table-border-radius: $border-radius-main !default
|
|
496
508
|
$table-head-background: $background-color-muted !default
|
|
497
509
|
$table-head-color: $color-emphasis !default
|
|
@@ -503,39 +515,39 @@ $table-row-hover-color: null !default
|
|
|
503
515
|
|
|
504
516
|
|
|
505
517
|
|
|
506
|
-
$typography-size-scale-ratio: constant-get(scale-ratios, minor-third) !default
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
510
|
-
$typography-main-size-px: 14px !default
|
|
511
|
-
$typography-main-size-level: 5 !default
|
|
512
|
-
$typography-main-line-height-ratio: 26 / strip-unit($typography-main-size-px) !default
|
|
513
|
-
$typography-main: constant-get(typography-stacks, sans-serif) !default
|
|
514
|
-
$typography-main-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Helvetica Neue") !default
|
|
515
|
-
$typography-main-color: $color-main !default
|
|
516
518
|
|
|
519
|
+
$typography-heading: null !default
|
|
520
|
+
$typography-heading-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default
|
|
521
|
+
$typography-heading-expected-line-height-ratios: (1.2, 1.2, 1.2, 1, 1, 1) !default
|
|
522
|
+
$typography-heading-color: null !default
|
|
523
|
+
$typography-heading-font-weight: 500 !default
|
|
517
524
|
|
|
518
525
|
|
|
519
|
-
$typography-heading: null !default
|
|
520
|
-
$typography-heading-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default
|
|
521
|
-
$typography-heading-color: $color-emphasis !default
|
|
522
|
-
$typography-heading-font-weight: 700 !default
|
|
523
526
|
|
|
527
|
+
$typography-code: constant-get(typography-stacks, code) !default
|
|
528
|
+
$typography-code-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Courier New") !default
|
|
529
|
+
$typography-code-expected-line-height-ratio: nth($typography-main-expected-line-height-ratios, 2) !default
|
|
530
|
+
$typography-code-padding-em: 0 0.2em !default
|
|
531
|
+
$typography-code-background: $background-color-muted !default
|
|
532
|
+
$typography-code-color: $color-main !default
|
|
533
|
+
$typography-code-border-radius: $border-radius-main !default
|
|
534
|
+
$typography-block-code-size-level: 7 !default
|
|
535
|
+
$typography-block-code-padding-rem: 0 $spacing-medium-rem !default
|
|
524
536
|
|
|
525
537
|
|
|
526
|
-
$typography-code: constant-get(typography-stacks, code) !default
|
|
527
|
-
$typography-code-baseline-offset-ratio: constant-get(baseline-offset-ratios, "Courier New") !default
|
|
528
|
-
$typography-block-code-size-level: 6 !default
|
|
529
538
|
|
|
539
|
+
$typography-quote: null !default
|
|
540
|
+
$typography-quote-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default
|
|
541
|
+
$typography-quote-expected-line-height-ratio: nth($typography-main-expected-line-height-ratios, 1) !default
|
|
542
|
+
$typography-cite-color: $color-muted !default
|
|
543
|
+
$typography-block-quote-size-level: 5 !default
|
|
544
|
+
$typography-block-quote-padding-rem: $spacing-medium-rem !default
|
|
545
|
+
$typography-block-quote-p-margin-rem: 0 auto $spacing-small-rem !default
|
|
546
|
+
$typography-block-quote-cite-line-height: $line-width-main !default
|
|
530
547
|
|
|
531
548
|
|
|
532
|
-
$typography-quote: null !default
|
|
533
|
-
$typography-quote-baseline-offset-ratio: $typography-main-baseline-offset-ratio !default
|
|
534
|
-
$typography-block-quote-size-level: 4 !default
|
|
535
549
|
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
$typography-mark-padding-em: 0.1em 0.3em !default
|
|
550
|
+
$typography-mark-padding-em: 0 0.2em !default
|
|
539
551
|
$typography-mark-background: $background-color-emphasis !default
|
|
540
552
|
$typography-mark-color: $color-primary !default
|
|
541
553
|
$typography-mark-border-radius: $border-radius-main !default
|
|
@@ -554,28 +566,14 @@ $typography-link-light-active-color: null !default
|
|
|
554
566
|
|
|
555
567
|
|
|
556
568
|
|
|
557
|
-
$typography-code-block-padding-rem: 0 $spacing-medium-rem !default
|
|
558
|
-
$typography-code-padding-em: 0.1em 0.3em !default
|
|
559
|
-
$typography-code-background: $background-color-muted !default
|
|
560
|
-
$typography-code-color: $color-main !default
|
|
561
|
-
$typography-code-border-radius: $border-radius-main !default
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
$typography-cite-color: $color-muted !default
|
|
566
|
-
$typography-quote-block-padding-rem: $spacing-medium-rem !default
|
|
567
|
-
$typography-quote-block-p-margin-rem: 0 auto $spacing-small-rem !default
|
|
568
|
-
$typography-quote-block-cite-line-height: $line-width-main !default
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
569
|
$typography-sub-sup-size: 100% / $typography-size-scale-ratio !default
|
|
573
570
|
$typography-sub-bottom-offset-em: -0.25em !default
|
|
574
571
|
$typography-sup-top-offset-em: -0.5em !default
|
|
575
572
|
|
|
576
573
|
|
|
577
574
|
|
|
578
|
-
$typography-list-nested-padding-em: 0 0 0
|
|
575
|
+
$typography-list-nested-padding-em: 0 0 0 2em !default
|
|
576
|
+
|
|
579
577
|
|
|
580
578
|
|
|
581
579
|
$turbolinks-progress-bar-height-px: 2px !default
|
|
@@ -588,33 +586,47 @@ $alert-padding-rem: $spacing-small-rem !default
|
|
|
588
586
|
$alert-border-radius: $border-radius-main !default
|
|
589
587
|
$alert-background: $background-color-dark !default
|
|
590
588
|
$alert-box-shadow: null !default
|
|
591
|
-
$alert-action-margin-
|
|
592
|
-
$alert-
|
|
589
|
+
$alert-action-margin-rem: null !default
|
|
590
|
+
$alert-content-margin-rem: 0 $spacing-small-rem !default
|
|
593
591
|
$alert-content-color: $color-inverse-main !default
|
|
594
592
|
|
|
595
593
|
|
|
596
594
|
|
|
597
|
-
$
|
|
598
|
-
$
|
|
599
|
-
$
|
|
600
|
-
$
|
|
601
|
-
$
|
|
602
|
-
$
|
|
603
|
-
$
|
|
604
|
-
$
|
|
605
|
-
$
|
|
606
|
-
$
|
|
607
|
-
$
|
|
608
|
-
|
|
609
|
-
|
|
595
|
+
$article-padding-rem: $spacing-small-rem !default
|
|
596
|
+
$article-max-width-rem: px-to-rem($typography-main-size-px * 70 / 2) + mirror-nth($article-padding-rem, 4) !default
|
|
597
|
+
$article-elements-margin-rem: $spacing-medium-rem 0 !default
|
|
598
|
+
$article-headings-margin-rem: $spacing-medium-rem 0 $spacing-small-rem !default
|
|
599
|
+
$article-heading-group-heading-margin-rem: $spacing-small-rem 0 !default
|
|
600
|
+
$article-paragraph-margin-rem: $spacing-small-rem 0 !default
|
|
601
|
+
$article-table-margin-rem: null !default
|
|
602
|
+
$article-block-code-margin-rem: null !default
|
|
603
|
+
$article-block-quote-margin-rem: null !default
|
|
604
|
+
$article-media-margin-rem: null !default
|
|
605
|
+
$article-list-margin-rem: $article-paragraph-margin-rem !default
|
|
606
|
+
|
|
607
|
+
|
|
608
|
+
|
|
609
|
+
$avatar-image-size-rem: baseline(4) !default
|
|
610
|
+
$avatar-small-image-size-rem: baseline(3) !default
|
|
611
|
+
$avatar-large-image-size-rem: baseline(5) !default
|
|
612
|
+
$avatar-info-height-rem: baseline(4) !default
|
|
613
|
+
$avatar-small-info-height-rem: baseline(3) !default
|
|
614
|
+
$avatar-large-info-height-rem: null !default
|
|
615
|
+
$avatar-info-padding-top-rem: $spacing-tiny-rem !default
|
|
616
|
+
$avatar-info-padding-left-rem: $spacing-small-rem !default
|
|
610
617
|
$avatar-small-info-padding-top-rem: null !default
|
|
611
618
|
$avatar-small-info-padding-left-rem: null !default
|
|
612
|
-
$avatar-
|
|
613
|
-
$avatar-large-
|
|
614
|
-
$avatar-
|
|
615
|
-
$avatar-description-typography-size-level:
|
|
616
|
-
$avatar-
|
|
617
|
-
$avatar-small-description-typography-size-level:
|
|
619
|
+
$avatar-large-info-padding-top-rem: null !default
|
|
620
|
+
$avatar-large-info-padding-left-rem: null !default
|
|
621
|
+
$avatar-name-typography-size-level: 6 !default
|
|
622
|
+
$avatar-description-typography-size-level: 7 !default
|
|
623
|
+
$avatar-small-name-typography-size-level: 7 !default
|
|
624
|
+
$avatar-small-description-typography-size-level: 8 !default
|
|
625
|
+
$avatar-large-name-typography-size-level: 5 !default
|
|
626
|
+
$avatar-large-description-typography-size-level: 6 !default
|
|
627
|
+
$avatar-image-border-radius: 100% !default
|
|
628
|
+
$avatar-default-image-background-size: 50% auto !default
|
|
629
|
+
$avatar-default-image: svg-icon('<svg viewBox="0 0 512 512"><path fill="#fill" d="M437.02,330.98c-27.883-27.882-61.071-48.523-97.281-61.018C378.521,243.251,404,198.548,404,148 C404,66.393,337.607,0,256,0S108,66.393,108,148c0,50.548,25.479,95.251,64.262,121.962 c-36.21,12.495-69.398,33.136-97.281,61.018C26.629,379.333,0,443.62,0,512h40c0-119.103,96.897-216,216-216s216,96.897,216,216 h40C512,443.62,485.371,379.333,437.02,330.98z M256,256c-59.551,0-108-48.448-108-108S196.449,40,256,40 c59.551,0,108,48.448,108,108S315.551,256,256,256z"/></svg>',$line-color-main) !default
|
|
618
630
|
$avatar-background-color: $background-color-muted !default
|
|
619
631
|
$avatar-name-color: $color-muted !default
|
|
620
632
|
$avatar-description-color: $avatar-name-color !default
|
|
@@ -624,22 +636,22 @@ $avatar-description-color: $avatar-name-color !default
|
|
|
624
636
|
$breadcrumb-padding-rem: $spacing-small-rem 0 !default
|
|
625
637
|
$breadcrumb-color: $color-muted !default
|
|
626
638
|
$breadcrumb-spliter: "/" !default
|
|
627
|
-
$breadcrumb-spliter-padding-em: 0
|
|
639
|
+
$breadcrumb-spliter-padding-em: 0 1em !default
|
|
628
640
|
|
|
629
641
|
|
|
630
642
|
$button-group-box-shadow: null !default
|
|
631
|
-
$button-group-buttons-margin-rem:
|
|
643
|
+
$button-group-buttons-margin-rem: 0 $spacing-small-rem $spacing-small-rem 0 !default
|
|
632
644
|
|
|
633
645
|
|
|
634
646
|
|
|
635
|
-
$button-icon-size-em:
|
|
636
|
-
$button-icon-top-size-em:
|
|
637
|
-
$button-icon-left-margin-em: 0 0.
|
|
638
|
-
$button-icon-right-margin-em: 0 0 0 0.
|
|
639
|
-
$button-icon-top-margin-em: 0
|
|
640
|
-
$button-icon-top-height-rem:
|
|
641
|
-
$button-icon-top-
|
|
642
|
-
$button-icon-top-
|
|
647
|
+
$button-icon-size-em: null !default
|
|
648
|
+
$button-icon-top-size-em: null !default
|
|
649
|
+
$button-icon-left-margin-em: 0 0.5em 0 0 !default
|
|
650
|
+
$button-icon-right-margin-em: 0 0 0 0.5em !default
|
|
651
|
+
$button-icon-top-margin-em: 0.1em 0 !default
|
|
652
|
+
$button-icon-top-height-rem: baseline(4) !default
|
|
653
|
+
$button-icon-top-small-height-rem: baseline(3) !default
|
|
654
|
+
$button-icon-top-large-height-rem: baseline(5) !default
|
|
643
655
|
|
|
644
656
|
|
|
645
657
|
|
|
@@ -671,7 +683,7 @@ $carousel-custom-opacity-transition-timing-function: $transition-timing-fun
|
|
|
671
683
|
|
|
672
684
|
$dropdown-width-breakpoint: m !default
|
|
673
685
|
$dropdown-static-menu-margin-left-rem: $spacing-small-rem !default
|
|
674
|
-
$dropdown-absolute-max-height-rem:
|
|
686
|
+
$dropdown-absolute-max-height-rem: baseline(50) !default
|
|
675
687
|
$dropdown-absolute-active-gap-rem: $spacing-tiny-rem !default
|
|
676
688
|
$dropdown-absolute-border-radius: $border-radius-main !default
|
|
677
689
|
$dropdown-absolute-fixed-background: $background-color-main !default
|
|
@@ -679,19 +691,14 @@ $dropdown-absolute-box-shadow: null !default
|
|
|
679
691
|
|
|
680
692
|
|
|
681
693
|
|
|
694
|
+
$form-group-label-vertical-margin-rem: null !default
|
|
682
695
|
$form-group-element-vertical-margin-rem: $spacing-small-rem !default
|
|
683
696
|
|
|
684
697
|
|
|
685
698
|
|
|
686
|
-
$media-content-aspect-ratio: 16 / 9 !default
|
|
687
|
-
$media-border-radius: $border-radius-main !default
|
|
688
|
-
$media-background-color: $background-color-muted !default
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
699
|
$modal-padding-rem: $spacing-medium-rem !default
|
|
693
|
-
$modal-in-overlay-max-width-rem:
|
|
694
|
-
$modal-in-overlay-min-width-rem:
|
|
700
|
+
$modal-in-overlay-max-width-rem: px-to-rem(640px) !default
|
|
701
|
+
$modal-in-overlay-min-width-rem: px-to-rem(320px) !default
|
|
695
702
|
$modal-background: $background-color-muted !default
|
|
696
703
|
$modal-border-radius: $border-radius-main !default
|
|
697
704
|
$modal-box-shadow: null !default
|
|
@@ -706,16 +713,17 @@ $navigation-close-button-margin-rem: $spacing-small-rem $spacing-small-rem 0
|
|
|
706
713
|
$navigation-search-field-margin-rem: $spacing-medium-rem !default
|
|
707
714
|
$navigation-items-margin-rem: $spacing-small-rem !default
|
|
708
715
|
$navigation-sub-items-margin-rem: $navigation-items-margin-rem !default
|
|
709
|
-
$navigation-logo-image-height-rem:
|
|
716
|
+
$navigation-logo-image-height-rem: baseline(2) !default
|
|
710
717
|
$navigation-background: $background-color-dark !default
|
|
711
718
|
|
|
712
719
|
|
|
713
720
|
|
|
714
721
|
$navigation-header-box-shadow: null !default
|
|
722
|
+
$navigation-header-breakpoint-padding-rem: $spacing-small-rem !default
|
|
715
723
|
$navigation-header-breakpoint-search-field-margin-rem: 0 $spacing-small-rem !default
|
|
716
724
|
$navigation-header-breakpoint-items-margin-rem: 0 auto 0 0 !default
|
|
717
725
|
$navigation-header-breakpoint-sub-items-margin-rem: 0 !default
|
|
718
|
-
$navigation-header-breakpoint-search-field-width-rem:
|
|
726
|
+
$navigation-header-breakpoint-search-field-width-rem: baseline(16) !default
|
|
719
727
|
$navigation-header-breakpoint-dropdown-background: $navigation-background !default
|
|
720
728
|
|
|
721
729
|
|
|
@@ -723,10 +731,10 @@ $navigation-header-breakpoint-dropdown-background: $navigation-background
|
|
|
723
731
|
$navigation-aside-box-shadow: $navigation-header-box-shadow !default
|
|
724
732
|
$navigation-aside-breakpoint-padding-rem: 0 !default
|
|
725
733
|
$navigation-aside-breakpoint-logo-margin-rem: 3 * $spacing-small-rem $spacing-medium-rem $spacing-small-rem !default
|
|
726
|
-
$navigation-aside-breakpoint-logo-image-height-rem:
|
|
727
|
-
$navigation-aside-breakpoint-logo-image-width-rem:
|
|
728
|
-
$navigation-aside-breakpoint-min-width-rem:
|
|
729
|
-
$navigation-aside-breakpoint-max-width-rem:
|
|
734
|
+
$navigation-aside-breakpoint-logo-image-height-rem: baseline(8) !default
|
|
735
|
+
$navigation-aside-breakpoint-logo-image-width-rem: baseline(10) !default
|
|
736
|
+
$navigation-aside-breakpoint-min-width-rem: baseline(20) !default
|
|
737
|
+
$navigation-aside-breakpoint-max-width-rem: baseline(22) !default
|
|
730
738
|
$navigation-aside-breakpoint-box-shadow: none !default
|
|
731
739
|
|
|
732
740
|
|