github-docs 0.0.17 → 0.0.18
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/_sass/cherry/_base-normalize.scss +274 -0
- data/_sass/cherry/_buttons.scss +305 -0
- data/_sass/cherry/_columns.scss +220 -0
- data/_sass/cherry/_elements.scss +339 -0
- data/_sass/cherry/_forms-vue-select.scss +250 -0
- data/_sass/cherry/_forms.scss +567 -0
- data/_sass/cherry/_functions.scss +201 -0
- data/_sass/cherry/_index.scss +14 -0
- data/_sass/cherry/_layout.scss +207 -0
- data/_sass/cherry/_modal.scss +82 -0
- data/_sass/cherry/_spacing.scss +56 -0
- data/_sass/cherry/_tooltips.scss +113 -0
- data/_sass/cherry/_typography.scss +90 -0
- data/_sass/cherry/_utilities.scss +552 -0
- data/_sass/cherry/_variables-computed.scss +79 -0
- data/_sass/cherry/_variables.scss +48 -0
- data/_sass/main.scss +256 -0
- data/_sass/primer-markdown/blob-csv.scss +25 -0
- data/_sass/primer-markdown/code.scss +49 -0
- data/_sass/primer-markdown/headings.scss +51 -0
- data/_sass/primer-markdown/images.scss +101 -0
- data/_sass/primer-markdown/index.scss +118 -0
- data/_sass/primer-markdown/lists.scss +42 -0
- data/_sass/primer-markdown/tables.scss +28 -0
- data/_sass/rouge.scss +217 -0
- data/readme.md +3 -2
- metadata +27 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 2e6d3d0992cd15d0d61afaf2f842ee5c94e081b6f37abec74f39dd6bf855625d
|
|
4
|
+
data.tar.gz: 381932bad70e4d3382805b8f0edccc4d635e8417ac17c617e45174dcbb44cf56
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a712faf81b385a6efda6e05d1ddf0a1e115db2a8de0e8c99ae742700988ec46e18dd5083a27b80bd387f8bbf99ad40bbf534d330a63a9ee0ca43e272c3d74367
|
|
7
|
+
data.tar.gz: 265bced092afd734f99534c1bf2a89e57049e4fb70cfcedaaded9cefe73412a7b2c437a0f6a4337f776e6749fc9a481eb65729ea678c7639863be4488f5d3da7
|
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
$family-primary: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
|
|
2
|
+
"Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
|
3
|
+
$family-secondary: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
|
|
4
|
+
"Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
|
|
5
|
+
$family-mono: monospace !default;
|
|
6
|
+
$body-background: transparent !default;
|
|
7
|
+
$body-color: $text !default;
|
|
8
|
+
$body-font-family: $family-primary !default;
|
|
9
|
+
$body-font-size: 1em !default;
|
|
10
|
+
$body-font-weight: 400 !default;
|
|
11
|
+
$body-letter-spacing: 0 !default;
|
|
12
|
+
$body-line-height: 1.5em !default;
|
|
13
|
+
$doc-font-size: 15px !default;
|
|
14
|
+
$link-text-decoration: underline !default;
|
|
15
|
+
$link-outline: none !default;
|
|
16
|
+
|
|
17
|
+
/* ---- Main ------------------------- */
|
|
18
|
+
|
|
19
|
+
html {
|
|
20
|
+
font-size: $doc-font-size;
|
|
21
|
+
-webkit-text-size-adjust: 100%;
|
|
22
|
+
-webkit-backface-visibility: hidden;
|
|
23
|
+
-webkit-font-smoothing: antialiased;
|
|
24
|
+
-moz-osx-font-smoothing: grayscale;
|
|
25
|
+
}
|
|
26
|
+
body {
|
|
27
|
+
background-color: $body-background;
|
|
28
|
+
color: $body-color;
|
|
29
|
+
font-family: $body-font-family;
|
|
30
|
+
font-size: $body-font-size;
|
|
31
|
+
font-weight: $body-font-weight;
|
|
32
|
+
letter-spacing: $body-letter-spacing;
|
|
33
|
+
line-height: $body-line-height;
|
|
34
|
+
overflow-y: scroll;
|
|
35
|
+
}
|
|
36
|
+
html, body {
|
|
37
|
+
height: 100%;
|
|
38
|
+
margin: 0;
|
|
39
|
+
}
|
|
40
|
+
.preload * {
|
|
41
|
+
animation-duration: 0s !important;
|
|
42
|
+
-webkit-animation-duration: 0s !important;
|
|
43
|
+
}
|
|
44
|
+
a {
|
|
45
|
+
color: $link;
|
|
46
|
+
background-color: transparent; /* ie10 */
|
|
47
|
+
text-decoration: $link-text-decoration;
|
|
48
|
+
text-decoration-color: $link;
|
|
49
|
+
transition: 0.13s ease;
|
|
50
|
+
}
|
|
51
|
+
a:hover {
|
|
52
|
+
color: $link--hover;
|
|
53
|
+
text-decoration-color: $link--hover;
|
|
54
|
+
}
|
|
55
|
+
a:focus {
|
|
56
|
+
color: $link--focus;
|
|
57
|
+
text-decoration-color: $link--focus;
|
|
58
|
+
outline: $link-outline;
|
|
59
|
+
}
|
|
60
|
+
q,
|
|
61
|
+
div,
|
|
62
|
+
article,
|
|
63
|
+
aside,
|
|
64
|
+
details,
|
|
65
|
+
figcaption,
|
|
66
|
+
form,
|
|
67
|
+
figure,
|
|
68
|
+
footer,
|
|
69
|
+
header,
|
|
70
|
+
hgroup,
|
|
71
|
+
main,
|
|
72
|
+
menu,
|
|
73
|
+
nav,
|
|
74
|
+
section,
|
|
75
|
+
summary {
|
|
76
|
+
display: block;
|
|
77
|
+
-webkit-box-sizing: border-box;
|
|
78
|
+
box-sizing: border-box;
|
|
79
|
+
}
|
|
80
|
+
b, strong {
|
|
81
|
+
font-weight: bolder;
|
|
82
|
+
}
|
|
83
|
+
h1 {
|
|
84
|
+
font-size: 2em;
|
|
85
|
+
margin: 0.67em 0;
|
|
86
|
+
}
|
|
87
|
+
hr {
|
|
88
|
+
border: none;
|
|
89
|
+
height: 0;
|
|
90
|
+
border-bottom: 1px solid #f0f0f0;
|
|
91
|
+
overflow: hidden;
|
|
92
|
+
}
|
|
93
|
+
img {
|
|
94
|
+
border-style: none;
|
|
95
|
+
}
|
|
96
|
+
pre, code, kbd, samp {
|
|
97
|
+
font-family: monospace, monospace;
|
|
98
|
+
font-size: 0.9em;
|
|
99
|
+
}
|
|
100
|
+
small {
|
|
101
|
+
font-size: 80%;
|
|
102
|
+
}
|
|
103
|
+
sub, sup {
|
|
104
|
+
font-size: 75%;
|
|
105
|
+
line-height: 0;
|
|
106
|
+
position: relative;
|
|
107
|
+
vertical-align: baseline;
|
|
108
|
+
}
|
|
109
|
+
sub {
|
|
110
|
+
bottom: -0.25em;
|
|
111
|
+
}
|
|
112
|
+
sup {
|
|
113
|
+
top: -0.5em;
|
|
114
|
+
}
|
|
115
|
+
ul, ol, li {
|
|
116
|
+
box-sizing: border-box;
|
|
117
|
+
margin: 0;
|
|
118
|
+
padding: 0;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/* ---- Table ------------------------ */
|
|
122
|
+
|
|
123
|
+
table,
|
|
124
|
+
.table {
|
|
125
|
+
border-collapse: collapse;
|
|
126
|
+
border-spacing: 0;
|
|
127
|
+
font-size: inherit;
|
|
128
|
+
}
|
|
129
|
+
.thead {
|
|
130
|
+
display: table-header-group;
|
|
131
|
+
vertical-align: middle;
|
|
132
|
+
border-color: inherit;
|
|
133
|
+
}
|
|
134
|
+
.tbody {
|
|
135
|
+
display: table-row-group;
|
|
136
|
+
vertical-align: middle;
|
|
137
|
+
border-color: inherit;
|
|
138
|
+
}
|
|
139
|
+
.tfoot {
|
|
140
|
+
display: table-footer-group;
|
|
141
|
+
vertical-align: middle;
|
|
142
|
+
border-color: inherit;
|
|
143
|
+
}
|
|
144
|
+
.tr {
|
|
145
|
+
display: table-row;
|
|
146
|
+
vertical-align: inherit;
|
|
147
|
+
border-color: inherit;
|
|
148
|
+
}
|
|
149
|
+
th,
|
|
150
|
+
.th {
|
|
151
|
+
padding: 0;
|
|
152
|
+
display: table-cell;
|
|
153
|
+
vertical-align: inherit;
|
|
154
|
+
font-weight: bold;
|
|
155
|
+
text-align: -internal-center;
|
|
156
|
+
}
|
|
157
|
+
td,
|
|
158
|
+
.td {
|
|
159
|
+
display: table-cell;
|
|
160
|
+
vertical-align: inherit;
|
|
161
|
+
}
|
|
162
|
+
.td,
|
|
163
|
+
.th {
|
|
164
|
+
text-align: inherit;
|
|
165
|
+
}
|
|
166
|
+
td:not([align]),
|
|
167
|
+
th:not([align]) {
|
|
168
|
+
text-align: inherit;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
/* ---- Forms ------------------------ */
|
|
172
|
+
|
|
173
|
+
form {
|
|
174
|
+
margin: 0;
|
|
175
|
+
}
|
|
176
|
+
button,
|
|
177
|
+
input,
|
|
178
|
+
optgroup,
|
|
179
|
+
select,
|
|
180
|
+
textarea {
|
|
181
|
+
font-family: inherit;
|
|
182
|
+
font-size: 100%;
|
|
183
|
+
line-height: 1.15;
|
|
184
|
+
margin: 0;
|
|
185
|
+
}
|
|
186
|
+
button,
|
|
187
|
+
input {
|
|
188
|
+
overflow: visible;
|
|
189
|
+
}
|
|
190
|
+
button,
|
|
191
|
+
select {
|
|
192
|
+
text-transform: none;
|
|
193
|
+
}
|
|
194
|
+
button,
|
|
195
|
+
[type="button"],
|
|
196
|
+
[type="reset"],
|
|
197
|
+
[type="submit"] {
|
|
198
|
+
-webkit-appearance: button;
|
|
199
|
+
}
|
|
200
|
+
button::-moz-focus-inner,
|
|
201
|
+
[type="button"]::-moz-focus-inner,
|
|
202
|
+
[type="reset"]::-moz-focus-inner,
|
|
203
|
+
[type="submit"]::-moz-focus-inner {
|
|
204
|
+
border-style: none;
|
|
205
|
+
padding: 0;
|
|
206
|
+
}
|
|
207
|
+
button:-moz-focusring,
|
|
208
|
+
[type="button"]:-moz-focusring,
|
|
209
|
+
[type="reset"]:-moz-focusring,
|
|
210
|
+
[type="submit"]:-moz-focusring {
|
|
211
|
+
outline: 1px dotted ButtonText;
|
|
212
|
+
}
|
|
213
|
+
[type="checkbox"],
|
|
214
|
+
[type="radio"] {
|
|
215
|
+
box-sizing: border-box; /* 1 */
|
|
216
|
+
padding: 0; /* 2 */
|
|
217
|
+
}
|
|
218
|
+
[type="number"]::-webkit-inner-spin-button,
|
|
219
|
+
[type="number"]::-webkit-outer-spin-button {
|
|
220
|
+
height: auto;
|
|
221
|
+
}
|
|
222
|
+
[type="search"] {
|
|
223
|
+
-webkit-appearance: textfield; /* 1 */
|
|
224
|
+
outline-offset: -2px; /* 2 */
|
|
225
|
+
}
|
|
226
|
+
[type="search"]::-webkit-search-decoration {
|
|
227
|
+
-webkit-appearance: none;
|
|
228
|
+
}
|
|
229
|
+
[hidden] {
|
|
230
|
+
display: none;
|
|
231
|
+
}
|
|
232
|
+
input[type="search"]::-webkit-search-decoration,
|
|
233
|
+
input[type="search"]::-webkit-search-cancel-button,
|
|
234
|
+
input[type="search"]::-webkit-search-results-button,
|
|
235
|
+
input[type="search"]::-webkit-search-results-decoration {
|
|
236
|
+
-webkit-appearance: none;
|
|
237
|
+
}
|
|
238
|
+
input[type="date"],
|
|
239
|
+
input[type="datetime-local"],
|
|
240
|
+
input[type="time"],
|
|
241
|
+
input[type="month"],
|
|
242
|
+
input[type="week"] {
|
|
243
|
+
&::-webkit-inner-spin-button {
|
|
244
|
+
display: none;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
textarea {
|
|
248
|
+
overflow: auto;
|
|
249
|
+
}
|
|
250
|
+
::-webkit-file-upload-button {
|
|
251
|
+
-webkit-appearance: button; /* 1 */
|
|
252
|
+
font: inherit; /* 2 */
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* ---- Selection -------------------- */
|
|
256
|
+
|
|
257
|
+
::-moz-selection {
|
|
258
|
+
background: #5984FF;
|
|
259
|
+
text-shadow: none;
|
|
260
|
+
color: #fff;
|
|
261
|
+
-webkit-text-fill-color: #fff !important;
|
|
262
|
+
}
|
|
263
|
+
::selection {
|
|
264
|
+
background: #5984FF;
|
|
265
|
+
text-shadow: none;
|
|
266
|
+
color: #fff;
|
|
267
|
+
-webkit-text-fill-color: #fff !important;
|
|
268
|
+
}
|
|
269
|
+
::-moz-selection {
|
|
270
|
+
background: #5984FF;
|
|
271
|
+
text-shadow: none;
|
|
272
|
+
color: #fff;
|
|
273
|
+
-webkit-text-fill-color: #fff !important;
|
|
274
|
+
}
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
$btn-background-color: $primary !default;
|
|
2
|
+
$btn-background-image: null !default;
|
|
3
|
+
$btn-border-color: null !default;
|
|
4
|
+
$btn-border-radius: 5px !default;
|
|
5
|
+
$btn-border-width: 2px !default;
|
|
6
|
+
$btn-box-shadow: none !default;
|
|
7
|
+
$btn-box-shadow--active: $btn-box-shadow !default;
|
|
8
|
+
$btn-disabled-opacity: 0.5 !default;
|
|
9
|
+
$btn-font-family: $body-font-family !default;
|
|
10
|
+
$btn-font-size: 1rem !default;
|
|
11
|
+
$btn-font-weight: 600 !default;
|
|
12
|
+
$btn-icon-size: 1.3em !default;
|
|
13
|
+
$btn-icon-margin: 0.4em !default;
|
|
14
|
+
$btn-line-height: 1.5em !default;
|
|
15
|
+
$btn-padding: 12px 31px !default;
|
|
16
|
+
$btn-min-height: 0 !default;
|
|
17
|
+
$btns-margin-right: 1rem !default;
|
|
18
|
+
$btns-margin-bottom: 1.5rem !default;
|
|
19
|
+
|
|
20
|
+
// Add default color to loop over
|
|
21
|
+
$btn-app-colors: mergeColorMaps($app-colors, (
|
|
22
|
+
"default": ($btn-background-color, $btn-background-image)
|
|
23
|
+
));
|
|
24
|
+
|
|
25
|
+
@mixin loader($color) {
|
|
26
|
+
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 18 9" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 9C2 5.5 4.64444 2 9.15556 2C13.6667 2 16 5.88889 16 9" stroke="#{encodecolor($color)}" stroke-width="2"/></svg>')
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
@function calcBoxShadow($border-color: null) {
|
|
30
|
+
// Pass $border-color to add border into the box-shadow
|
|
31
|
+
$border-width: $btn-border-width;
|
|
32
|
+
$border-shadow: null;
|
|
33
|
+
// Default border width
|
|
34
|
+
@if ($border-width <= 0px) {
|
|
35
|
+
$border-width: 2px;
|
|
36
|
+
}
|
|
37
|
+
// Get values
|
|
38
|
+
@if ($border-color and $btn-box-shadow != none) {
|
|
39
|
+
@return 0 0 0 $border-width $border-color inset, $btn-box-shadow;
|
|
40
|
+
}
|
|
41
|
+
@else if ($border-color) {
|
|
42
|
+
@return 0 0 0 $border-width $border-color inset;
|
|
43
|
+
}
|
|
44
|
+
@else if ($btn-box-shadow != none) {
|
|
45
|
+
@return $btn-box-shadow;
|
|
46
|
+
}
|
|
47
|
+
@else {
|
|
48
|
+
@return none;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* ---- Main ------------------------- */
|
|
53
|
+
|
|
54
|
+
.btn {
|
|
55
|
+
position: relative;
|
|
56
|
+
display: inline-flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
padding: $btn-padding;
|
|
59
|
+
font-family: $btn-font-family;
|
|
60
|
+
font-style: normal;
|
|
61
|
+
font-weight: $btn-font-weight;
|
|
62
|
+
font-size: $btn-font-size;
|
|
63
|
+
min-height: $btn-min-height;
|
|
64
|
+
line-height: $btn-line-height;
|
|
65
|
+
text-align: center;
|
|
66
|
+
text-decoration: none;
|
|
67
|
+
justify-content: center;
|
|
68
|
+
background-size: 200% auto; /* 200% for gradients */
|
|
69
|
+
border-radius: $btn-border-radius;
|
|
70
|
+
border: 0;
|
|
71
|
+
outline: 0;
|
|
72
|
+
box-sizing: border-box;
|
|
73
|
+
cursor: pointer;
|
|
74
|
+
transition: all 200ms ease;
|
|
75
|
+
white-space: nowrap;
|
|
76
|
+
-webkit-appearance: none;
|
|
77
|
+
-moz-user-select: -moz-none;
|
|
78
|
+
-khtml-user-select: none;
|
|
79
|
+
-webkit-user-select: none;
|
|
80
|
+
-o-user-select: none;
|
|
81
|
+
user-select: none;
|
|
82
|
+
}
|
|
83
|
+
.btn.is-full,
|
|
84
|
+
.btn.is-fullwidth, {
|
|
85
|
+
display: flex;
|
|
86
|
+
width: 100%;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
/* Icon */
|
|
90
|
+
|
|
91
|
+
.btn .icon {
|
|
92
|
+
align-items: center;
|
|
93
|
+
display: inline-flex;
|
|
94
|
+
justify-content: center;
|
|
95
|
+
height: $btn-icon-size;
|
|
96
|
+
width: $btn-icon-size;
|
|
97
|
+
transition: opacity 200ms ease;
|
|
98
|
+
&:first-child:not(:last-child) {
|
|
99
|
+
margin-left: calc(-0.2em - 1px);
|
|
100
|
+
margin-right: $btn-icon-margin;
|
|
101
|
+
}
|
|
102
|
+
&:last-child:not(:first-child) {
|
|
103
|
+
margin-right: calc(-0.2em - 1px);
|
|
104
|
+
margin-left: $btn-icon-margin;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
/* Multiple buttons */
|
|
109
|
+
|
|
110
|
+
.btns {
|
|
111
|
+
display: flex;
|
|
112
|
+
align-items: center;
|
|
113
|
+
flex-wrap: wrap;
|
|
114
|
+
justify-content: flex-start;
|
|
115
|
+
}
|
|
116
|
+
.btns .btn {
|
|
117
|
+
margin-right: $btns-margin-right;
|
|
118
|
+
margin-bottom: $btns-margin-bottom;
|
|
119
|
+
}
|
|
120
|
+
.btns .btn:last-child {
|
|
121
|
+
margin-right: 0;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
/* Loading */
|
|
125
|
+
|
|
126
|
+
.btn::after {
|
|
127
|
+
content: "";
|
|
128
|
+
display: block;
|
|
129
|
+
position: absolute;
|
|
130
|
+
left: 50%;
|
|
131
|
+
top: 50%;
|
|
132
|
+
width: 18px;
|
|
133
|
+
height: 18px;
|
|
134
|
+
margin: -10px;
|
|
135
|
+
opacity: 0;
|
|
136
|
+
z-index: 0;
|
|
137
|
+
animation: loaderOne .9s cubic-bezier(.435,.165,.615,.81) infinite;
|
|
138
|
+
background-size: auto;
|
|
139
|
+
background-position: top;
|
|
140
|
+
background-repeat: no-repeat;
|
|
141
|
+
box-sizing: border-box;
|
|
142
|
+
z-index: 2;
|
|
143
|
+
@include loader(#fff);
|
|
144
|
+
}
|
|
145
|
+
.btn.is-loading,
|
|
146
|
+
.btn.is-loading:hover,
|
|
147
|
+
.btn.is-loading:focus {
|
|
148
|
+
cursor: default;
|
|
149
|
+
color: transparent !important;
|
|
150
|
+
}
|
|
151
|
+
.btn.is-loading .icon {
|
|
152
|
+
opacity: 0;
|
|
153
|
+
}
|
|
154
|
+
.btn.is-loading svg.icon {
|
|
155
|
+
fill: transparent !important;
|
|
156
|
+
}
|
|
157
|
+
.btn.is-loading::after {
|
|
158
|
+
opacity: 1;
|
|
159
|
+
}
|
|
160
|
+
@keyframes loaderOne {
|
|
161
|
+
0% {
|
|
162
|
+
transform:rotate(0deg);
|
|
163
|
+
}
|
|
164
|
+
100% {
|
|
165
|
+
transform: rotate(360deg);
|
|
166
|
+
}
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
/* Button styles */
|
|
170
|
+
|
|
171
|
+
@each $name, $value in $btn-app-colors {
|
|
172
|
+
$cssname: '.btn';
|
|
173
|
+
$color: nth($value, 1);
|
|
174
|
+
$color-invert: nth($value, 2);
|
|
175
|
+
$background-image: nth($value, 5);
|
|
176
|
+
$border-color: null;
|
|
177
|
+
|
|
178
|
+
@if ($background-image == null) {
|
|
179
|
+
$background-image: none;
|
|
180
|
+
}
|
|
181
|
+
@if ($name == 'default') {
|
|
182
|
+
$border-color: $btn-border-color;
|
|
183
|
+
}
|
|
184
|
+
@if $name != 'default' {
|
|
185
|
+
$cssname: '.btn.is-#{$name}';
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
#{$cssname} {
|
|
189
|
+
color: $color-invert;
|
|
190
|
+
background-color: $color;
|
|
191
|
+
box-shadow: calcBoxShadow($border-color);
|
|
192
|
+
background-image: $background-image;
|
|
193
|
+
&:hover,
|
|
194
|
+
&:focus,
|
|
195
|
+
&:active,
|
|
196
|
+
&.is-hovered,
|
|
197
|
+
&.is-focused,
|
|
198
|
+
&.is-active {
|
|
199
|
+
color: $color-invert;
|
|
200
|
+
background-color: cherryDarken($color, 8%);
|
|
201
|
+
background-position: right center;
|
|
202
|
+
box-shadow: calcBoxShadow($border-color);
|
|
203
|
+
}
|
|
204
|
+
&[disabled],
|
|
205
|
+
fieldset[disabled] & {
|
|
206
|
+
opacity: $btn-disabled-opacity;
|
|
207
|
+
background-color: $color;
|
|
208
|
+
cursor: default;
|
|
209
|
+
}
|
|
210
|
+
&.is-loading {
|
|
211
|
+
background-color: $color;
|
|
212
|
+
background-position: left center;
|
|
213
|
+
&::after {
|
|
214
|
+
@include loader($color-invert);
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
&.is-inverted {
|
|
218
|
+
color: $color;
|
|
219
|
+
background-color: $color-invert;
|
|
220
|
+
background-image: none;
|
|
221
|
+
box-shadow: calcBoxShadow();
|
|
222
|
+
&::after {
|
|
223
|
+
@include loader($color);
|
|
224
|
+
}
|
|
225
|
+
&:hover,
|
|
226
|
+
&:focus,
|
|
227
|
+
&:active,
|
|
228
|
+
&.is-hovered,
|
|
229
|
+
&.is-focused,
|
|
230
|
+
&.is-active {
|
|
231
|
+
background-color: cherryDarken($color-invert, 5%);
|
|
232
|
+
}
|
|
233
|
+
&[disabled],
|
|
234
|
+
fieldset[disabled] &,
|
|
235
|
+
&.is-loading {
|
|
236
|
+
color: $color;
|
|
237
|
+
background-color: $color-invert;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
&.is-outlined {
|
|
241
|
+
// Use $color if default `border-color` not set
|
|
242
|
+
$border-color-outlined: $border-color;
|
|
243
|
+
@if ($border-color == null) {
|
|
244
|
+
$border-color-outlined: $color;
|
|
245
|
+
}
|
|
246
|
+
color: $color;
|
|
247
|
+
background-color: transparent;
|
|
248
|
+
background-image: none;
|
|
249
|
+
box-shadow: calcBoxShadow($border-color-outlined);
|
|
250
|
+
&::after {
|
|
251
|
+
@include loader($color);
|
|
252
|
+
}
|
|
253
|
+
&:hover,
|
|
254
|
+
&:focus,
|
|
255
|
+
&:active,
|
|
256
|
+
&.is-hovered,
|
|
257
|
+
&.is-focused,
|
|
258
|
+
&.is-active {
|
|
259
|
+
color: $color-invert;
|
|
260
|
+
background-color: $color;
|
|
261
|
+
background-image: $background-image;
|
|
262
|
+
box-shadow: calcBoxShadow(transparent);
|
|
263
|
+
}
|
|
264
|
+
&[disabled],
|
|
265
|
+
fieldset[disabled] &,
|
|
266
|
+
&.is-loading {
|
|
267
|
+
color: $color;
|
|
268
|
+
background-color: transparent;
|
|
269
|
+
background-image: none;
|
|
270
|
+
box-shadow: calcBoxShadow($border-color-outlined);
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
// If light and dark colors are provided
|
|
274
|
+
@if length($value) >= 4 and nth($value, 4) {
|
|
275
|
+
$color-light: nth($value, 3);
|
|
276
|
+
$color-dark: nth($value, 4);
|
|
277
|
+
&.is-light {
|
|
278
|
+
color: $color-dark;
|
|
279
|
+
background-color: $color-light;
|
|
280
|
+
background-image: none;
|
|
281
|
+
box-shadow: calcBoxShadow();
|
|
282
|
+
&::after {
|
|
283
|
+
@include loader($color-dark);
|
|
284
|
+
}
|
|
285
|
+
&:hover,
|
|
286
|
+
&:focus,
|
|
287
|
+
&:active,
|
|
288
|
+
&.is-hovered,
|
|
289
|
+
&.is-focused,
|
|
290
|
+
&.is-active {
|
|
291
|
+
background-color: cherryDarken($color-light, 4%);
|
|
292
|
+
color: $color-dark;
|
|
293
|
+
}
|
|
294
|
+
&[disabled],
|
|
295
|
+
fieldset[disabled] &,
|
|
296
|
+
&.is-loading {
|
|
297
|
+
color: $color-dark;
|
|
298
|
+
background-color: $color-light;
|
|
299
|
+
background-image: none;
|
|
300
|
+
box-shadow: calcBoxShadow();
|
|
301
|
+
}
|
|
302
|
+
}
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|