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.
@@ -0,0 +1,56 @@
1
+ $sizes: 0 0.5 1 1.5 2 2.5 3 4 5 6 7 8 9 10 11 12 13 14 !default;
2
+ $spacing-multiplier: 0.5rem !default; // i.e. 7.5px
3
+ $spacing-multiplier-lg: false !default;
4
+ $spacing-multiplier-md: false !default;
5
+ $spacing-multiplier-sm: false !default;
6
+ $spacing-multiplier-xs: false !default;
7
+
8
+ $spacing-breakpoints: (
9
+ (lg, $breakpoint-lg, $spacing-multiplier-lg),
10
+ (md, $breakpoint-md, $spacing-multiplier-md),
11
+ (sm, $breakpoint-sm, $spacing-multiplier-sm),
12
+ (xs, $breakpoint-xs, $spacing-multiplier-xs)
13
+ );
14
+
15
+ /* ---- Main ------------------------- */
16
+
17
+ @mixin spacing($t, $type, $multipler, $prefix) {
18
+ @each $i in $sizes {
19
+ $ii: $i;
20
+ @if $i == 0.5 { $ii: '0-5'; }
21
+ @if $i == 1.5 { $ii: '1-5'; }
22
+ @if $i == 2.5 { $ii: '2-5'; }
23
+ .#{$prefix}#{$t}-#{$ii} {
24
+ #{$type}: $spacing-multiplier * $i * $multipler !important;
25
+ }
26
+ .#{$prefix}#{$t}t-#{$ii},
27
+ .#{$prefix}#{$t}y-#{$ii} {
28
+ #{$type}-top: $spacing-multiplier * $i * $multipler !important;
29
+ }
30
+ .#{$prefix}#{$t}b-#{$ii},
31
+ .#{$prefix}#{$t}y-#{$ii} {
32
+ #{$type}-bottom: $spacing-multiplier * $i * $multipler !important;
33
+ }
34
+ .#{$prefix}#{$t}l-#{$ii},
35
+ .#{$prefix}#{$t}x-#{$ii} {
36
+ #{$type}-left: $spacing-multiplier * $i * $multipler !important;
37
+ }
38
+ .#{$prefix}#{$t}r-#{$ii},
39
+ .#{$prefix}#{$t}x-#{$ii} {
40
+ #{$type}-right: $spacing-multiplier * $i * $multipler !important;
41
+ }
42
+ }
43
+ }
44
+
45
+ @each $type, $t in (padding, p), (margin, m) {
46
+ @include spacing($t, $type, 1.0, '');
47
+ }
48
+
49
+ @each $size, $width, $multiplier in $spacing-breakpoints {
50
+ @media screen and (max-width: $width) {
51
+ @each $type, $t in (padding, p), (margin, m) {
52
+ @if ($multiplier != false) { @include spacing($t, $type, $multiplier, ''); }
53
+ @include spacing($t, $type, 1.0, $size + '\\:');
54
+ }
55
+ }
56
+ }
@@ -0,0 +1,113 @@
1
+ $tooltip-bg: #532C6E !default;
2
+
3
+ /* ---- Tooltips --------------------- */
4
+
5
+ .has-tooltip {
6
+ display: inline-block;
7
+ /* vertical-align: bottom; */
8
+ /* font-weight: 400; */
9
+ /* font-family: Hind; */
10
+ /* padding: 0 0.4em; */
11
+ /* font-size: 0.95em; */
12
+ }
13
+ .tooltip {
14
+ display: block !important;
15
+ z-index: 10000;
16
+ }
17
+ .tooltip .tooltip-inner {
18
+ background: $tooltip-bg;
19
+ color: white;
20
+ text-shadow: 0 0 1px rgba(255, 255, 255, 0.54);
21
+ text-align: center;
22
+ border-radius: 4px;
23
+ font-family: Open Sans;
24
+ font-style: normal;
25
+ font-weight: 600;
26
+ font-size: 11px;
27
+ line-height: 144.2%;
28
+ padding: 0.5em 1.4em 0.65em;
29
+ box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
30
+ max-width: 270px;
31
+ /* letter-spacing: 0; */
32
+ }
33
+ .tooltip .tooltip-arrow {
34
+ width: 0;
35
+ height: 0;
36
+ border-style: solid;
37
+ position: absolute;
38
+ margin: 5px;
39
+ border-color: $tooltip-bg;
40
+ z-index: 1;
41
+ }
42
+ .tooltip[x-placement^="top"] {
43
+ margin-bottom: 5px;
44
+ }
45
+ .tooltip[x-placement^="top"] .tooltip-arrow {
46
+ border-width: 5px 5px 0 5px;
47
+ border-left-color: transparent !important;
48
+ border-right-color: transparent !important;
49
+ border-bottom-color: transparent !important;
50
+ bottom: -5px;
51
+ left: calc(50% - 5px);
52
+ margin-top: 0;
53
+ margin-bottom: 0;
54
+ }
55
+ .tooltip[x-placement^="bottom"] {
56
+ margin-top: 5px;
57
+ }
58
+ .tooltip[x-placement^="bottom"] .tooltip-arrow {
59
+ border-width: 0 5px 5px 5px;
60
+ border-left-color: transparent !important;
61
+ border-right-color: transparent !important;
62
+ border-top-color: transparent !important;
63
+ top: -5px;
64
+ left: calc(50% - 5px);
65
+ margin-top: 0;
66
+ margin-bottom: 0;
67
+ }
68
+ .tooltip[x-placement^="right"] {
69
+ margin-left: 5px;
70
+ }
71
+ .tooltip[x-placement^="right"] .tooltip-arrow {
72
+ border-width: 5px 5px 5px 0;
73
+ border-left-color: transparent !important;
74
+ border-top-color: transparent !important;
75
+ border-bottom-color: transparent !important;
76
+ left: -5px;
77
+ top: calc(50% - 5px);
78
+ margin-left: 0;
79
+ margin-right: 0;
80
+ }
81
+ .tooltip[x-placement^="left"] {
82
+ margin-right: 5px;
83
+ }
84
+ .tooltip[x-placement^="left"] .tooltip-arrow {
85
+ border-width: 5px 0 5px 5px;
86
+ border-top-color: transparent !important;
87
+ border-right-color: transparent !important;
88
+ border-bottom-color: transparent !important;
89
+ right: -5px;
90
+ top: calc(50% - 5px);
91
+ margin-left: 0;
92
+ margin-right: 0;
93
+ }
94
+ .tooltip.popover .popover-inner {
95
+ background: #f9f9f9;
96
+ color: black;
97
+ padding: 24px;
98
+ border-radius: 5px;
99
+ box-shadow: 0 5px 30px rgba(black, .1);
100
+ }
101
+ .tooltip.popover .popover-arrow {
102
+ border-color: #f9f9f9;
103
+ }
104
+ .tooltip[aria-hidden='true'] {
105
+ visibility: hidden;
106
+ opacity: 0;
107
+ transition: opacity .15s, visibility .15s;
108
+ }
109
+ .tooltip[aria-hidden='false'] {
110
+ visibility: visible;
111
+ opacity: 1;
112
+ transition: opacity .15s;
113
+ }
@@ -0,0 +1,90 @@
1
+ /* ---- Content (wysiwyg) ------------ */
2
+
3
+ .content {
4
+ h1, h2, h3, h4 {
5
+ font-style: normal;
6
+ font-weight: bold;
7
+ line-height: 1.5em;
8
+ letter-spacing: -0.03em;
9
+ margin: 0 0 0.8em 0;
10
+ }
11
+ h1 {
12
+ font-size: 27px;
13
+ }
14
+ h2 {
15
+ font-size: 25px;
16
+ }
17
+ h3 {
18
+ font-size: 22px;
19
+ }
20
+ h4 {
21
+ font-size: 18px;
22
+ }
23
+ b, strong {
24
+ font-weight: bold;
25
+ }
26
+ p,
27
+ ul,
28
+ ol,
29
+ q,
30
+ small,
31
+ code {
32
+ margin-top: 0;
33
+ margin-bottom: 1.4rem;
34
+ line-height: 1.6em;
35
+ }
36
+ small,
37
+ code {
38
+ display: block;
39
+ }
40
+ pre {
41
+ margin: 0;
42
+ }
43
+ ul, ol {}
44
+ li {
45
+ margin: 0 0 0.2em 2em;
46
+ }
47
+ .ul-blank {
48
+ list-style: none;
49
+ }
50
+ .ul-blank li {
51
+ margin: 0 0 0.5em 0em;
52
+ }
53
+ ol a,
54
+ ul a,
55
+ p a {
56
+ text-decoration: underline;
57
+ //transition: color 0.1s ease;
58
+ }
59
+ ol a:hover,
60
+ ul a:hover,
61
+ p a:hover,
62
+ ol a:focus,
63
+ ul a:focus,
64
+ p a:focus {
65
+ text-decoration: underline;
66
+ }
67
+ ul li:last-child {
68
+ padding-bottom: 0.1em;
69
+ }
70
+ ul li:last-child {
71
+ padding-bottom: 0.1em;
72
+ }
73
+ small {
74
+ font-size: 0.85em;
75
+ line-height: 1.6em;
76
+ }
77
+ q {
78
+ background-color: #abc3441f;
79
+ color: #536311;
80
+ border-radius: 4px;
81
+ padding: 1.4em 1.5em;
82
+ & b {
83
+ color: #536311;
84
+ }
85
+ &:before,
86
+ &:after {
87
+ display: none;
88
+ }
89
+ }
90
+ }
@@ -0,0 +1,552 @@
1
+ $border-color: #f5f5f5 !default;
2
+ $under-color: $text !default;
3
+ $under-width: 3px !default;
4
+ $border-radius-step: 2px !default;
5
+ $utilities-multiplier: 0.5rem !default; // 7.5px
6
+ $breakpoints: (
7
+ "none": null,
8
+ "lg": $breakpoint-lg,
9
+ "md": $breakpoint-md,
10
+ "sm": $breakpoint-sm,
11
+ "xs": $breakpoint-xs,
12
+ );
13
+
14
+ /* ---- Borders ---------------------- */
15
+
16
+ @each $i in [1, 2, 3, 4, 5] {
17
+ .b-#{$i} {
18
+ border: #{$i}px solid $border-color !important;
19
+ }
20
+ .bl-#{$i} {
21
+ border-left: #{$i}px solid $border-color !important;
22
+ }
23
+ .br-#{$i} {
24
+ border-right: #{$i}px solid $border-color !important;
25
+ }
26
+ .bt-#{$i} {
27
+ border-top: #{$i}px solid $border-color !important;
28
+ }
29
+ .bb-#{$i} {
30
+ border-bottom: #{$i}px solid $border-color !important;
31
+ }
32
+ .bx-#{$i} {
33
+ border-left: #{$i}px solid $border-color !important;
34
+ border-right: #{$i}px solid $border-color !important;
35
+ }
36
+ .by-#{$i} {
37
+ border-top: #{$i}px solid $border-color !important;
38
+ border-bottom: #{$i}px solid $border-color !important;
39
+ }
40
+ }
41
+
42
+ /* ---- Border radius -------------- */
43
+
44
+ @each $i in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 'full'] {
45
+ $size: null;
46
+ @if ($i == 'full') {
47
+ $size: 999px;
48
+ }
49
+ @else {
50
+ $size: $border-radius-step * $i;
51
+ }
52
+ .rounded-#{$i} {
53
+ border-radius: $size !important;
54
+ }
55
+ .rounded-l-#{$i} {
56
+ border-top-left-radius: $size !important;
57
+ border-bottom-left-radius: $size !important;
58
+ }
59
+ .rounded-r-#{$i} {
60
+ border-top-right-radius: $size !important;
61
+ border-bottom-right-radius: $size !important;
62
+ }
63
+ .rounded-t-#{$i} {
64
+ border-top-left-radius: $size !important;
65
+ border-top-right-radius: $size !important;
66
+ }
67
+ .rounded-b-#{$i} {
68
+ border-bottom-left-radius: $size !important;
69
+ border-bottom-right-radius: $size !important;
70
+ }
71
+ .rounded-tl-#{$i} {
72
+ border-top-left-radius: $size !important;
73
+ }
74
+ .rounded-tr-#{$i} {
75
+ border-top-right-radius: $size !important;
76
+ }
77
+ .rounded-bl-#{$i} {
78
+ border-bottom-left-radius: $size !important;
79
+ }
80
+ .rounded-br-#{$i} {
81
+ border-bottom-right-radius: $size !important;
82
+ }
83
+ .rounded-br-#{$i} {
84
+ border-bottom-right-radius: $size !important;
85
+ }
86
+ }
87
+
88
+ /* ---- Colors & Gradients ----------- */
89
+
90
+ @each $name, $color in map-merge($shades, $app-colors) {
91
+ @if (type-of($color) == 'map' or type-of($color) == 'list') {
92
+ $color-invert: nth($color, 2);
93
+ $color: nth($color, 1);
94
+ }
95
+ .text-#{$name} {
96
+ color: $color !important;;
97
+ text-decoration-color: $color !important;;
98
+ fill: $color !important;;
99
+ }
100
+ .bg-#{$name} {
101
+ color: $color !important;;
102
+ fill: $color !important;;
103
+ }
104
+ @if ($name == 'text') {
105
+ .text {
106
+ color: $color !important;;
107
+ text-decoration-color: $color !important;;
108
+ fill: $color !important;;
109
+ }
110
+ }
111
+ @if (variable-exists(color-invert)) {
112
+ .text-#{$name}-invert {
113
+ color: $color-invert !important;;
114
+ text-decoration-color: $color-invert !important;;
115
+ fill: $color-invert !important;
116
+ }
117
+ .bg-#{$name}-invert {
118
+ color: $color-invert !important;;
119
+ fill: $color-invert !important;;
120
+ }
121
+ @if ($name == 'text') {
122
+ .text-invert {
123
+ color: $color-invert !important;;
124
+ text-decoration-color: $color-invert !important;;
125
+ fill: $color-invert !important;;
126
+ }
127
+ }
128
+ }
129
+ }
130
+
131
+ @each $name, $gradient in $custom-gradients {
132
+ .bg-#{$name} {
133
+ background-image: linear-gradient($gradient) !important;
134
+ }
135
+ }
136
+
137
+ /* ---- Display ---------------------- */
138
+
139
+ @mixin display($prefix) {
140
+ .#{$prefix}block {
141
+ display: block !important;
142
+ }
143
+ .#{$prefix}inline-block {
144
+ display: inline-block !important;
145
+ }
146
+ .#{$prefix}inline {
147
+ display: inline !important;
148
+ }
149
+ .#{$prefix}flex {
150
+ display: flex !important;
151
+ }
152
+ .#{$prefix}inline-flex {
153
+ display: inline-flex !important;
154
+ }
155
+ .#{$prefix}table {
156
+ display: table !important;
157
+ }
158
+ .#{$prefix}table-caption {
159
+ display: table-caption !important;
160
+ }
161
+ .#{$prefix}table-cell {
162
+ display: table-cell !important;
163
+ }
164
+ .#{$prefix}table-column {
165
+ display: table-column !important;
166
+ }
167
+ .#{$prefix}table-column-group {
168
+ display: table-column-group !important;
169
+ }
170
+ .#{$prefix}table-footer-group {
171
+ display: table-footer-group !important;
172
+ }
173
+ .#{$prefix}table-header-group {
174
+ display: table-header-group !important;
175
+ }
176
+ .#{$prefix}table-row-group {
177
+ display: table-row-group !important;
178
+ }
179
+ .#{$prefix}table-row {
180
+ display: table-row !important;
181
+ }
182
+ .#{$prefix}flow-root {
183
+ display: flow-root !important;
184
+ }
185
+ .#{$prefix}grid {
186
+ display: grid !important;
187
+ }
188
+ .#{$prefix}inline-grid {
189
+ display: inline-grid !important;
190
+ }
191
+ .#{$prefix}contents {
192
+ display: contents !important;
193
+ }
194
+ .#{$prefix}hidden {
195
+ display: none !important;
196
+ }
197
+ }
198
+
199
+ @each $key, $width in $breakpoints {
200
+ @if ($width) {
201
+ @media screen and (max-width: $width) { @include display($key + '\\:'); }
202
+ } @else {
203
+ @include display('');
204
+ }
205
+ }
206
+
207
+ /* ---- Flex ------------------------- */
208
+
209
+ .flex-0 {
210
+ flex: 0 !important;
211
+ }
212
+ .flex-1 {
213
+ flex: 1 !important;
214
+ }
215
+ .flex-auto {
216
+ flex: auto !important;
217
+ }
218
+ .flex-initial {
219
+ flex: initial !important; /* can shrink, but not grow i.e flex: 0 */
220
+ }
221
+ .flex-none {
222
+ flex: none !important; /* can't shrink or grow */
223
+ }
224
+
225
+ /* Direction */
226
+
227
+ .flex-column {
228
+ flex-direction: column !important;
229
+ }
230
+ .flex-column-reverse {
231
+ flex-direction: column-reverse !important;
232
+ }
233
+ .flex-row {
234
+ flex-direction: row !important;
235
+ }
236
+ .flex-row-reverse {
237
+ flex-direction: row-reverse !important;
238
+ }
239
+
240
+ /* Wrap */
241
+
242
+ .flex-nowrap {
243
+ flex-wrap: nowrap !important;
244
+ }
245
+ .flex-wrap {
246
+ flex-wrap: wrap !important;
247
+ }
248
+ .flex-wrap-reverse {
249
+ flex-wrap: wrap-reverse !important;
250
+ }
251
+
252
+ /* Grow / shrink */
253
+
254
+ .flex-grow {
255
+ flex-grow: 1 !important;
256
+ }
257
+ .flex-grow-0 {
258
+ flex-grow: 0 !important;
259
+ }
260
+ .flex-shrink {
261
+ flex-shrink: 1 !important;
262
+ }
263
+ .flex-shrink-0 {
264
+ flex-shrink: 0 !important;
265
+ }
266
+
267
+ /* Order */
268
+
269
+ @each $i in [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12] {
270
+ .order-#{$i} {
271
+ order: #{$i} !important;
272
+ }
273
+ }
274
+ .order-first {
275
+ order: -9999 !important;
276
+ }
277
+ .order-last {
278
+ order: 9999 !important;
279
+ }
280
+ .order-none {
281
+ order: 0 !important;
282
+ }
283
+
284
+ /* Gap */
285
+
286
+ @each $i in [0, 0.5, 1, 1.5, 2, 2.5, 3, 4, 5, 6, 7, 8, 9] {
287
+ $ii: $i;
288
+ @if $i == 0.5 { $ii: '0-5'; }
289
+ @if $i == 1.5 { $ii: '1-5'; }
290
+ @if $i == 2.5 { $ii: '2-5'; }
291
+ .grid-gap-#{$ii} {
292
+ // Not used for cols, please see gap-*
293
+ gap: #{$utilities-multiplier * $i} !important;
294
+ }
295
+ .column-gap-#{$ii} {
296
+ column-gap: #{$utilities-multiplier * $i} !important;
297
+ }
298
+ .row-gap-#{$ii} {
299
+ row-gap: #{$utilities-multiplier * $i} !important;
300
+ }
301
+ }
302
+
303
+ /* Justify */
304
+
305
+ .justify-center {
306
+ justify-content: center !important;
307
+ }
308
+ .justify-end {
309
+ justify-content: flex-end !important;
310
+ }
311
+ .justify-space-around {
312
+ justify-content: space-around !important;
313
+ }
314
+ .justify-space-between {
315
+ justify-content: space-between !important;
316
+ }
317
+ .justify-space-evenly {
318
+ justify-content: space-evenly !important;
319
+ }
320
+ .justify-start {
321
+ justify-content: flex-start !important;
322
+ }
323
+
324
+ .justify-items-center {
325
+ justify-items: center !important;
326
+ }
327
+ .justify-items-end {
328
+ justify-items: flex-end !important;
329
+ }
330
+ .justify-items-start {
331
+ justify-items: flex-start !important;
332
+ }
333
+ .justify-items-stretch {
334
+ justify-items: stretch !important;
335
+ }
336
+
337
+ .justify-self-auto {
338
+ justify-self: auto !important;
339
+ }
340
+ .justify-self-center {
341
+ justify-self: center !important;
342
+ }
343
+ .justify-self-end {
344
+ justify-self: flex-end !important;
345
+ }
346
+ .justify-self-start {
347
+ justify-self: flex-start !important;
348
+ }
349
+ .justify-self-stretch {
350
+ justify-self: stretch !important;
351
+ }
352
+
353
+ /* Align */
354
+
355
+ .align-center {
356
+ align-content: center !important;
357
+ }
358
+ .align-end {
359
+ align-content: flex-end !important;
360
+ }
361
+ .align-space-around {
362
+ align-content: space-around !important;
363
+ }
364
+ .align-space-between {
365
+ align-content: space-between !important;
366
+ }
367
+ .align-space-evenly {
368
+ align-content: space-evenly !important;
369
+ }
370
+ .align-start {
371
+ align-content: flex-start !important;
372
+ }
373
+
374
+ .align-items-baseline {
375
+ align-items: baseline !important;
376
+ }
377
+ .align-items-center {
378
+ align-items: center !important;
379
+ }
380
+ .align-items-end {
381
+ align-items: flex-end !important;
382
+ }
383
+ .align-items-start {
384
+ align-items: flex-start !important;
385
+ }
386
+ .align-items-stretch {
387
+ align-items: stretch !important;
388
+ }
389
+
390
+ .align-self-auto {
391
+ align-self: auto !important;
392
+ }
393
+ .align-self-center {
394
+ align-self: center !important;
395
+ }
396
+ .align-self-end {
397
+ align-self: flex-end !important;
398
+ }
399
+ .align-self-start {
400
+ align-self: flex-start !important;
401
+ }
402
+ .align-self-stretch {
403
+ align-self: stretch !important;
404
+ }
405
+
406
+ /* ---- Text weight ------------------ */
407
+
408
+ @each $i in [300, 400, 500, 600, 700, 800, 900] {
409
+ .weight-#{$i},
410
+ .text-weight-#{$i} {
411
+ font-weight: $i !important;
412
+ }
413
+ }
414
+
415
+ /* ---- Text Overflow ---------------- */
416
+
417
+ @each $i in [ellipsis, clip] {
418
+ .overflow-#{$i}
419
+ .text-overflow-#{$i} {
420
+ text-overflow: $i !important;
421
+ }
422
+ }
423
+ .truncate,
424
+ .text-truncate {
425
+ text-overflow: ellipsis;
426
+ overflow: hidden;
427
+ }
428
+ .truncate1,
429
+ .text-truncate1 {
430
+ text-overflow: ellipsis;
431
+ overflow: hidden;
432
+ white-space: nowrap;
433
+ }
434
+
435
+ /* ---- Vertical align --------------- */
436
+
437
+ @each $i in [baseline, top, middle, bottom, sub, text-top, text-bottom] {
438
+ .align-#{$i},
439
+ .vertical-align-#{$i} {
440
+ vertical-align: $i !important;
441
+ }
442
+ }
443
+
444
+ /* ---- Helpers ---------------------- */
445
+
446
+ .relative {
447
+ position: relative !important;
448
+ }
449
+ .left {
450
+ float: left !important;
451
+ }
452
+ .right {
453
+ float: right !important;
454
+ }
455
+ .center,
456
+ .mx-auto {
457
+ margin-left: auto !important;
458
+ margin-right: auto !important;
459
+ }
460
+ .ml-auto {
461
+ margin-left: auto !important;
462
+ }
463
+ .mr-auto {
464
+ margin-right: auto !important;
465
+ }
466
+ .clear {
467
+ clear: both !important;
468
+ }
469
+ .cf:after {
470
+ content: "";
471
+ display: block;
472
+ clear: both;
473
+ }
474
+ .min-0 {
475
+ min-width: 0 !important;
476
+ }
477
+ .no-select {
478
+ -webkit-touch-callout: none !important;
479
+ -webkit-user-select: none !important;
480
+ -khtml-user-select: none !important;
481
+ -moz-user-select: none !important;
482
+ -ms-user-select: none !important;
483
+ user-select: none !important;
484
+ }
485
+ .text-left {
486
+ text-align: left !important;
487
+ }
488
+ .text-right {
489
+ text-align: right !important;
490
+ }
491
+ .text-center {
492
+ text-align: center !important;
493
+ }
494
+ .cover {
495
+ width: 100%;
496
+ height: 100%;
497
+ background-position: center;
498
+ background-size: cover;
499
+ object-fit: cover;
500
+ object-position: center center;
501
+ overflow: hidden;
502
+ }
503
+
504
+ /* ---- Underline -------------------- */
505
+
506
+ .under {
507
+ position: relative;
508
+ }
509
+ .under:before {
510
+ content: "";
511
+ display: block;
512
+ position: absolute;
513
+ bottom: 0.25em;
514
+ height: $under-width;
515
+ width: 100%;
516
+ opacity: 0;
517
+ background-color: $under-color;
518
+ transition: transform 0.15s ease, opacity 0.2s ease;
519
+ }
520
+ .under:hover:before,
521
+ .under:focus:before,
522
+ .under.active:before {
523
+ transform: translateY(1px);
524
+ opacity: 1;
525
+ }
526
+
527
+ /* ---- Vue animations --------------- */
528
+
529
+ /* Slide */
530
+
531
+ .slide-up-enter-active {
532
+ transition: all 0.2s ease-out;
533
+ }
534
+ .slide-up-leave-active {
535
+ transition: all 0.2s ease-in;
536
+ }
537
+ .slide-up-enter,
538
+ .slide-up-leave-to {
539
+ opacity: 0;
540
+ transform: translateY(-12px);
541
+ }
542
+
543
+ /* Fade */
544
+
545
+ .fade-enter-active,
546
+ .fade-leave-active {
547
+ transition: opacity 0.15s ease;
548
+ }
549
+ .fade-enter,
550
+ .fade-leave-to {
551
+ opacity: 0.1;
552
+ }