github-docs 0.0.2 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/_layouts/default.html +17 -3
- data/assets/css/cherry/_base-normalize.scss +274 -0
- data/assets/css/cherry/_buttons.scss +305 -0
- data/assets/css/cherry/_columns.scss +220 -0
- data/assets/css/cherry/_elements.scss +339 -0
- data/assets/css/cherry/_forms-vue-select.scss +250 -0
- data/assets/css/cherry/_forms.scss +567 -0
- data/assets/css/cherry/_functions.scss +201 -0
- data/assets/css/cherry/_index.scss +14 -0
- data/assets/css/cherry/_layout.scss +207 -0
- data/assets/css/cherry/_modal.scss +82 -0
- data/assets/css/cherry/_spacing.scss +56 -0
- data/assets/css/cherry/_tooltips.scss +113 -0
- data/assets/css/cherry/_typography.scss +90 -0
- data/assets/css/cherry/_utilities.scss +552 -0
- data/assets/css/cherry/_variables-computed.scss +79 -0
- data/assets/css/cherry/_variables.scss +48 -0
- data/assets/css/index.scss +9 -7
- data/{_sass/github-docs.scss → assets/css/main.scss} +41 -12
- data/assets/css/primer-markdown/blob-csv.scss +25 -0
- data/assets/css/primer-markdown/code.scss +49 -0
- data/{_sass → assets/css}/primer-markdown/headings.scss +5 -19
- data/{_sass → assets/css}/primer-markdown/images.scss +1 -19
- data/{_sass/primer-markdown/markdown-body.scss → assets/css/primer-markdown/index.scss} +66 -55
- data/assets/css/primer-markdown/lists.scss +42 -0
- data/{_sass → assets/css}/primer-markdown/tables.scss +4 -9
- data/{_sass → assets/css}/rouge.scss +16 -8
- data/readme.md +24 -25
- metadata +54 -62
- data/_sass/primer-base/base.scss +0 -84
- data/_sass/primer-base/index.scss +0 -3
- data/_sass/primer-base/normalize.scss +0 -421
- data/_sass/primer-base/typography-base.scss +0 -86
- data/_sass/primer-layout/columns.scss +0 -54
- data/_sass/primer-layout/container.scss +0 -30
- data/_sass/primer-layout/grid-offset.scss +0 -19
- data/_sass/primer-layout/grid.scss +0 -64
- data/_sass/primer-layout/index.scss +0 -4
- data/_sass/primer-markdown/blob-csv.scss +0 -27
- data/_sass/primer-markdown/code.scss +0 -63
- data/_sass/primer-markdown/index.scss +0 -7
- data/_sass/primer-markdown/lists.scss +0 -76
- data/_sass/primer-support/index.scss +0 -11
- data/_sass/primer-support/mixins/buttons.scss +0 -160
- data/_sass/primer-support/mixins/layout.scss +0 -58
- data/_sass/primer-support/mixins/misc.scss +0 -29
- data/_sass/primer-support/mixins/typography.scss +0 -84
- data/_sass/primer-support/variables/color-system.scss +0 -114
- data/_sass/primer-support/variables/colors.scss +0 -67
- data/_sass/primer-support/variables/layout.scss +0 -78
- data/_sass/primer-support/variables/misc.scss +0 -40
- data/_sass/primer-support/variables/typography.scss +0 -43
- data/_sass/primer-utilities/animations.scss +0 -184
- data/_sass/primer-utilities/borders.scss +0 -100
- data/_sass/primer-utilities/box-shadow.scss +0 -26
- data/_sass/primer-utilities/colors.scss +0 -106
- data/_sass/primer-utilities/details.scss +0 -18
- data/_sass/primer-utilities/flexbox.scss +0 -52
- data/_sass/primer-utilities/index.scss +0 -13
- data/_sass/primer-utilities/layout.scss +0 -85
- data/_sass/primer-utilities/margin.scss +0 -53
- data/_sass/primer-utilities/padding.scss +0 -54
- data/_sass/primer-utilities/typography.scss +0 -215
- data/_sass/primer-utilities/visibility-display.scss +0 -87
@@ -1,11 +0,0 @@
|
|
1
|
-
// variables
|
2
|
-
@import "./variables/typography.scss";
|
3
|
-
@import "./variables/colors.scss";
|
4
|
-
@import "./variables/layout.scss";
|
5
|
-
@import "./variables/misc.scss";
|
6
|
-
|
7
|
-
// mixins
|
8
|
-
@import "./mixins/typography.scss";
|
9
|
-
@import "./mixins/layout.scss";
|
10
|
-
@import "./mixins/buttons.scss";
|
11
|
-
@import "./mixins/misc.scss";
|
@@ -1,160 +0,0 @@
|
|
1
|
-
// stylelint-disable block-closing-brace-newline-after
|
2
|
-
|
3
|
-
// Button color generator for primary and themed buttons
|
4
|
-
|
5
|
-
// New button hotness
|
6
|
-
@mixin btn-solid($color, $bg, $bg2) {
|
7
|
-
color: $color;
|
8
|
-
background-color: $bg2;
|
9
|
-
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
10
|
-
|
11
|
-
@if $bg == $gray-000 {
|
12
|
-
&:focus,
|
13
|
-
&.focus {
|
14
|
-
box-shadow: $btn-input-focus-shadow;
|
15
|
-
}
|
16
|
-
|
17
|
-
&:hover,
|
18
|
-
&.hover {
|
19
|
-
background-color: darken($bg2, 3%);
|
20
|
-
background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
|
21
|
-
background-position: 0 -$em-spacer-5;
|
22
|
-
border-color: rgba($black, 0.35);
|
23
|
-
}
|
24
|
-
|
25
|
-
&:active,
|
26
|
-
&.selected,
|
27
|
-
[open] > & {
|
28
|
-
background-color: darken(desaturate($bg, 10%), 6%);
|
29
|
-
background-image: none;
|
30
|
-
border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
|
31
|
-
box-shadow: $btn-active-shadow;
|
32
|
-
}
|
33
|
-
|
34
|
-
&:disabled,
|
35
|
-
&.disabled {
|
36
|
-
color: rgba($color, 0.4);
|
37
|
-
background-color: $bg2;
|
38
|
-
background-image: none;
|
39
|
-
border-color: transparentize($black, 0.8); // back to default .btn
|
40
|
-
box-shadow: none;
|
41
|
-
}
|
42
|
-
|
43
|
-
} @else {
|
44
|
-
&:focus,
|
45
|
-
&.focus {
|
46
|
-
box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
|
47
|
-
}
|
48
|
-
|
49
|
-
&:hover,
|
50
|
-
&.hover {
|
51
|
-
background-color: darken($bg2, 2%);
|
52
|
-
background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
|
53
|
-
background-position: 0 -$em-spacer-5;
|
54
|
-
border-color: $black-fade-50;
|
55
|
-
}
|
56
|
-
|
57
|
-
&:active,
|
58
|
-
&.selected,
|
59
|
-
[open] > & {
|
60
|
-
background-color: darken(mix($bg, $bg2, 50%), 7%);
|
61
|
-
background-image: none;
|
62
|
-
border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
|
63
|
-
box-shadow: $btn-active-shadow;
|
64
|
-
}
|
65
|
-
|
66
|
-
&:disabled,
|
67
|
-
&.disabled {
|
68
|
-
color: rgba($color, 0.75);
|
69
|
-
background-color: mix($bg2, $white, 50%);
|
70
|
-
background-image: none;
|
71
|
-
border-color: transparentize($black, 0.8); // repeat .btn default to avoid shift on click-drag off of button
|
72
|
-
box-shadow: none;
|
73
|
-
}
|
74
|
-
|
75
|
-
.Counter {
|
76
|
-
color: darken($bg, 8%);
|
77
|
-
background-color: $white;
|
78
|
-
}
|
79
|
-
}
|
80
|
-
}
|
81
|
-
|
82
|
-
// Inverse button hover style
|
83
|
-
@mixin btn-inverse($color, $bg, $bg2) {
|
84
|
-
color: $color;
|
85
|
-
background-color: $bg;
|
86
|
-
background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
|
87
|
-
|
88
|
-
&:focus {
|
89
|
-
box-shadow: 0 0 0 0.2em rgba($color, 0.4);
|
90
|
-
}
|
91
|
-
|
92
|
-
&:hover {
|
93
|
-
color: $text-white;
|
94
|
-
background-color: $color;
|
95
|
-
background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
|
96
|
-
border-color: $black-fade-50;
|
97
|
-
|
98
|
-
.Counter {
|
99
|
-
color: $text-white;
|
100
|
-
}
|
101
|
-
}
|
102
|
-
|
103
|
-
&:active,
|
104
|
-
&.selected,
|
105
|
-
[open] > & {
|
106
|
-
color: $text-white;
|
107
|
-
background-color: darken($color, 5%);
|
108
|
-
background-image: none;
|
109
|
-
border-color: $black-fade-50;
|
110
|
-
box-shadow: $btn-active-shadow;
|
111
|
-
}
|
112
|
-
|
113
|
-
&:disabled,
|
114
|
-
&.disabled {
|
115
|
-
color: rgba($color, 0.4);
|
116
|
-
background-color: $bg2;
|
117
|
-
background-image: none;
|
118
|
-
border-color: transparentize($black, 0.8); // back to default .btn
|
119
|
-
box-shadow: none;
|
120
|
-
}
|
121
|
-
}
|
122
|
-
|
123
|
-
// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
|
124
|
-
@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
|
125
|
-
color: $text-color;
|
126
|
-
background-color: $bg-color;
|
127
|
-
background-image: none;
|
128
|
-
|
129
|
-
.Counter {
|
130
|
-
background-color: rgba($black, 0.07);
|
131
|
-
}
|
132
|
-
|
133
|
-
&:hover,
|
134
|
-
&:active,
|
135
|
-
&.selected,
|
136
|
-
[open] > & {
|
137
|
-
color: $bg-color;
|
138
|
-
background-color: $text-color;
|
139
|
-
background-image: none;
|
140
|
-
border-color: $text-color;
|
141
|
-
|
142
|
-
.Counter {
|
143
|
-
color: $text-color;
|
144
|
-
background-color: $bg-color;
|
145
|
-
}
|
146
|
-
}
|
147
|
-
|
148
|
-
&:focus {
|
149
|
-
border-color: $text-color;
|
150
|
-
box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
|
151
|
-
}
|
152
|
-
|
153
|
-
&:disabled,
|
154
|
-
&.disabled {
|
155
|
-
color: $black-fade-30;
|
156
|
-
background-color: $bg-white;
|
157
|
-
border-color: $black-fade-15;
|
158
|
-
box-shadow: none;
|
159
|
-
}
|
160
|
-
}
|
@@ -1,58 +0,0 @@
|
|
1
|
-
// Responsive media queries
|
2
|
-
|
3
|
-
@mixin breakpoint($breakpoint) {
|
4
|
-
@if $breakpoint == "" {
|
5
|
-
@content;
|
6
|
-
}
|
7
|
-
|
8
|
-
@else {
|
9
|
-
// Retrieves the value from the key
|
10
|
-
$value: map-get($breakpoints, $breakpoint);
|
11
|
-
|
12
|
-
// If the key exists in the map
|
13
|
-
@if $value != null {
|
14
|
-
// Prints a media query based on the value
|
15
|
-
@media (min-width: $value) {
|
16
|
-
@content;
|
17
|
-
}
|
18
|
-
}
|
19
|
-
|
20
|
-
// If the key doesn't exist in the map
|
21
|
-
@else {
|
22
|
-
@warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
|
23
|
-
+ "Please make sure it is defined in `$breakpoints` map.";
|
24
|
-
}
|
25
|
-
}
|
26
|
-
}
|
27
|
-
|
28
|
-
// Retina media query
|
29
|
-
|
30
|
-
@mixin retina-media-query {
|
31
|
-
@media
|
32
|
-
only screen and (-webkit-min-device-pixel-ratio: 2),
|
33
|
-
only screen and (min--moz-device-pixel-ratio: 2),
|
34
|
-
only screen and (-moz-min-device-pixel-ratio: 2),
|
35
|
-
only screen and (-o-min-device-pixel-ratio: 2/1),
|
36
|
-
only screen and (min-device-pixel-ratio: 2),
|
37
|
-
only screen and (min-resolution: 192dpi),
|
38
|
-
only screen and (min-resolution: 2dppx) {
|
39
|
-
@content;
|
40
|
-
}
|
41
|
-
}
|
42
|
-
|
43
|
-
// Clearfix
|
44
|
-
//
|
45
|
-
// Clears floats via mixin.
|
46
|
-
|
47
|
-
@mixin clearfix {
|
48
|
-
&::before {
|
49
|
-
display: table;
|
50
|
-
content: "";
|
51
|
-
}
|
52
|
-
|
53
|
-
&::after {
|
54
|
-
display: table;
|
55
|
-
clear: both;
|
56
|
-
content: "";
|
57
|
-
}
|
58
|
-
}
|
@@ -1,29 +0,0 @@
|
|
1
|
-
// Generate a two-color caret for any element.
|
2
|
-
@mixin double-caret($foreground: $text-white, $background: lighten($gray-300, 5%)) {
|
3
|
-
&::after,
|
4
|
-
&::before {
|
5
|
-
position: absolute;
|
6
|
-
top: 11px;
|
7
|
-
right: 100%;
|
8
|
-
left: -16px;
|
9
|
-
display: block;
|
10
|
-
width: 0;
|
11
|
-
height: 0;
|
12
|
-
pointer-events: none;
|
13
|
-
content: " ";
|
14
|
-
border-color: transparent;
|
15
|
-
border-style: solid solid outset;
|
16
|
-
}
|
17
|
-
|
18
|
-
&::after {
|
19
|
-
margin-top: 1px;
|
20
|
-
margin-left: 2px;
|
21
|
-
border-width: 7px;
|
22
|
-
border-right-color: $foreground;
|
23
|
-
}
|
24
|
-
|
25
|
-
&::before {
|
26
|
-
border-width: 8px;
|
27
|
-
border-right-color: $background;
|
28
|
-
}
|
29
|
-
}
|
@@ -1,84 +0,0 @@
|
|
1
|
-
// Text hiding for image based text replacement.
|
2
|
-
// Higher performance than -9999px because it only renders
|
3
|
-
// the size of the actual text, not a full 9999px box.
|
4
|
-
@mixin hide-text() {
|
5
|
-
overflow: hidden;
|
6
|
-
text-indent: 100%;
|
7
|
-
white-space: nowrap;
|
8
|
-
}
|
9
|
-
|
10
|
-
// Heading mixins for use within components
|
11
|
-
// These match heading utilities in utilities/typography
|
12
|
-
@mixin h1 {
|
13
|
-
font-size: $h1-size;
|
14
|
-
font-weight: $font-weight-bold;
|
15
|
-
}
|
16
|
-
|
17
|
-
@mixin h2 {
|
18
|
-
font-size: $h2-size;
|
19
|
-
font-weight: $font-weight-bold;
|
20
|
-
}
|
21
|
-
|
22
|
-
@mixin h3 {
|
23
|
-
font-size: $h3-size;
|
24
|
-
font-weight: $font-weight-bold;
|
25
|
-
}
|
26
|
-
|
27
|
-
@mixin h4 {
|
28
|
-
font-size: $h4-size;
|
29
|
-
font-weight: $font-weight-bold;
|
30
|
-
}
|
31
|
-
|
32
|
-
@mixin h5 {
|
33
|
-
font-size: $h5-size;
|
34
|
-
font-weight: $font-weight-bold;
|
35
|
-
}
|
36
|
-
|
37
|
-
@mixin h6 {
|
38
|
-
font-size: $h6-size;
|
39
|
-
font-weight: $font-weight-bold;
|
40
|
-
}
|
41
|
-
|
42
|
-
// Responsive heading mixins
|
43
|
-
// There are no responsive mixins for h4—h6 because they are small
|
44
|
-
// and don't need to be smaller on mobile.
|
45
|
-
@mixin f1-responsive {
|
46
|
-
font-size: $h1-size-mobile;
|
47
|
-
|
48
|
-
// 32px on desktop
|
49
|
-
@include breakpoint(md) { font-size: $h1-size; }
|
50
|
-
|
51
|
-
}
|
52
|
-
|
53
|
-
@mixin f2-responsive {
|
54
|
-
font-size: $h2-size-mobile;
|
55
|
-
|
56
|
-
// 24px on desktop
|
57
|
-
@include breakpoint(md) { font-size: $h2-size; }
|
58
|
-
}
|
59
|
-
|
60
|
-
@mixin f3-responsive {
|
61
|
-
font-size: $h3-size-mobile;
|
62
|
-
|
63
|
-
// 20px on desktop
|
64
|
-
@include breakpoint(md) { font-size: $h3-size; }
|
65
|
-
|
66
|
-
}
|
67
|
-
|
68
|
-
// These use the mixins from above for responsive heading sizes.
|
69
|
-
// The following mixins can be used where it's convenient or necessary to
|
70
|
-
// couple the responsive font-size with the font-weight.
|
71
|
-
@mixin h1-responsive {
|
72
|
-
@include f1-responsive;
|
73
|
-
font-weight: $font-weight-bold;
|
74
|
-
}
|
75
|
-
|
76
|
-
@mixin h2-responsive {
|
77
|
-
@include f2-responsive;
|
78
|
-
font-weight: $font-weight-bold;
|
79
|
-
}
|
80
|
-
|
81
|
-
@mixin h3-responsive {
|
82
|
-
@include f3-responsive;
|
83
|
-
font-weight: $font-weight-bold;
|
84
|
-
}
|
@@ -1,114 +0,0 @@
|
|
1
|
-
//
|
2
|
-
//
|
3
|
-
// -------- Grays --------
|
4
|
-
$gray-000: #fafbfc !default;
|
5
|
-
$gray-100: #f6f8fa !default;
|
6
|
-
$gray-200: #e1e4e8 !default;
|
7
|
-
$gray-300: #d1d5da !default;
|
8
|
-
$gray-400: #959da5 !default;
|
9
|
-
$gray-500: #6a737d !default;
|
10
|
-
$gray-600: #586069 !default;
|
11
|
-
$gray-700: #444d56 !default;
|
12
|
-
$gray-800: #2f363d !default;
|
13
|
-
$gray-900: #24292e !default; // body font color
|
14
|
-
|
15
|
-
// -------- Blue --------
|
16
|
-
$blue-000: #f1f8ff !default;
|
17
|
-
$blue-100: #dbedff !default;
|
18
|
-
$blue-200: #c8e1ff !default;
|
19
|
-
$blue-300: #79b8ff !default;
|
20
|
-
$blue-400: #2188ff !default;
|
21
|
-
$blue-500: #0366d6 !default; // Default: Passes AA with #fff
|
22
|
-
$blue-600: #005cc5 !default;
|
23
|
-
$blue-700: #044289 !default;
|
24
|
-
$blue-800: #032f62 !default;
|
25
|
-
$blue-900: #05264c !default; // Passes with 1/2/300 blues
|
26
|
-
|
27
|
-
// -------- Green --------
|
28
|
-
$green-000: #f0fff4 !default;
|
29
|
-
$green-100: #dcffe4 !default;
|
30
|
-
$green-200: #bef5cb !default;
|
31
|
-
$green-300: #85e89d !default;
|
32
|
-
$green-400: #34d058 !default;
|
33
|
-
$green-500: #28a745 !default; // Default. passes AA Large
|
34
|
-
$green-600: #22863a !default; // Text green, passes AA on #fff
|
35
|
-
$green-700: #176f2c !default;
|
36
|
-
$green-800: #165c26 !default;
|
37
|
-
$green-900: #144620 !default;
|
38
|
-
|
39
|
-
// -------- Yellow --------
|
40
|
-
$yellow-000: #fffdef !default;
|
41
|
-
$yellow-100: #fffbdd !default;
|
42
|
-
$yellow-200: #fff5b1 !default;
|
43
|
-
$yellow-300: #ffea7f !default;
|
44
|
-
$yellow-400: #ffdf5d !default;
|
45
|
-
$yellow-500: #ffd33d !default;
|
46
|
-
$yellow-600: #f9c513 !default;
|
47
|
-
$yellow-700: #dbab09 !default;
|
48
|
-
$yellow-800: #b08800 !default;
|
49
|
-
$yellow-900: #735c0f !default;
|
50
|
-
|
51
|
-
// -------- Orange --------
|
52
|
-
$orange-000: #fff8f2 !default;
|
53
|
-
$orange-100: #ffebda !default;
|
54
|
-
$orange-200: #ffd1ac !default;
|
55
|
-
$orange-300: #ffab70 !default;
|
56
|
-
$orange-400: #fb8532 !default;
|
57
|
-
$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
|
58
|
-
$orange-600: #e36209 !default;
|
59
|
-
$orange-700: #d15704 !default;
|
60
|
-
$orange-800: #c24e00 !default;
|
61
|
-
$orange-900: #a04100 !default;
|
62
|
-
|
63
|
-
// -------- Red --------
|
64
|
-
$red-000: #ffeef0 !default;
|
65
|
-
$red-100: #ffdce0 !default;
|
66
|
-
$red-200: #fdaeb7 !default;
|
67
|
-
$red-300: #f97583 !default;
|
68
|
-
$red-400: #ea4a5a !default;
|
69
|
-
$red-500: #d73a49 !default; // Default. passes AA
|
70
|
-
$red-600: #cb2431 !default;
|
71
|
-
$red-700: #b31d28 !default;
|
72
|
-
$red-800: #9e1c23 !default;
|
73
|
-
$red-900: #86181d !default;
|
74
|
-
|
75
|
-
// -------- Purple --------
|
76
|
-
$purple-000: #f5f0ff !default;
|
77
|
-
$purple-100: #e6dcfd !default;
|
78
|
-
$purple-200: #d1bcf9 !default;
|
79
|
-
$purple-300: #b392f0 !default;
|
80
|
-
$purple-400: #8a63d2 !default;
|
81
|
-
$purple-500: #6f42c1 !default; // passes AA with #fff
|
82
|
-
$purple-600: #5a32a3 !default;
|
83
|
-
$purple-700: #4c2889 !default;
|
84
|
-
$purple-800: #3a1d6e !default;
|
85
|
-
$purple-900: #29134e !default;
|
86
|
-
|
87
|
-
// -------- Fades --------
|
88
|
-
// Black based on same hue as $gray-900
|
89
|
-
$black: #1b1f23 !default;
|
90
|
-
$white: #fff !default;
|
91
|
-
|
92
|
-
$black-fade-15: rgba($black, 0.15) !default;
|
93
|
-
$black-fade-30: rgba($black, 0.3) !default;
|
94
|
-
$black-fade-50: rgba($black, 0.5) !default;
|
95
|
-
$black-fade-70: rgba($black, 0.7) !default;
|
96
|
-
$black-fade-85: rgba($black, 0.85) !default;
|
97
|
-
|
98
|
-
$white-fade-15: rgba($white, 0.15) !default;
|
99
|
-
$white-fade-30: rgba($white, 0.3) !default;
|
100
|
-
$white-fade-50: rgba($white, 0.5) !default;
|
101
|
-
$white-fade-70: rgba($white, 0.7) !default;
|
102
|
-
$white-fade-85: rgba($white, 0.85) !default;
|
103
|
-
|
104
|
-
// -------- Color defaults --------
|
105
|
-
$red: $red-500 !default;
|
106
|
-
$purple: $purple-500 !default;
|
107
|
-
$blue: $blue-500 !default;
|
108
|
-
$green: $green-500 !default;
|
109
|
-
$yellow: $yellow-500 !default;
|
110
|
-
$orange: $orange-500 !default;
|
111
|
-
|
112
|
-
$gray-dark: $gray-900 !default;
|
113
|
-
$gray-light: $gray-400 !default;
|
114
|
-
$gray: $gray-500 !default;
|