Skip to content

Commit 2ef2d72

Browse files
moyusmoyus
committed
Extract variables
1 parent ea57e81 commit 2ef2d72

23 files changed

Lines changed: 408 additions & 268 deletions

‎scss/_base.typography.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -121,7 +121,7 @@ pre {
121121
padding: $spacing-square-md;
122122
background: $grey-light;
123123
color: $grey-dark;
124-
border-radius: $component-border-radius-md;
124+
border-radius: $shape-border-radius-md;
125125
font-size: $text-size-sm;
126126
overflow: auto;
127127

‎scss/_components.badge.scss‎

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,33 @@
11
/* ## Badge
22
---------------------------------*/
3-
$badge-font-size: $text-meta-sm !default;
3+
$badge-border-radius: $shape-border-radius-md !default;
44
$badge-empty-size: 8px !default;
55

6+
$badge-font-size-sm: $text-meta-sm !default;
7+
$badge-line-height-sm: round-line-height($badge-font-size-sm, 1.5) !default;
8+
$badge-padding-sm: 0 .5em !default;
9+
10+
$badge-font-size-md: $text-meta-sm !default;
11+
$badge-line-height-md: round-line-height($badge-font-size-sm, 2) !default;
12+
$badge-padding-md: 0 .75em !default;
13+
14+
$badge-font-size-lg: $text-meta-md !default;
15+
$badge-line-height-lg: round-line-height($badge-font-size-sm, 2) !default;
16+
$badge-padding-lg: 0 .75em !default;
17+
618
.badge {
7-
display: inline-block;
8-
padding: .25em .5em;
9-
font-size: $badge-font-size;
10-
line-height: 1;
19+
display: inline-flex;
20+
align-items: center;
21+
padding: $badge-padding-md;
22+
font-size: $badge-font-size-md;
23+
line-height: $badge-line-height-md;
1124
text-align: center;
1225
white-space: nowrap;
13-
border-radius: 1993px;
14-
border: 1px solid transparent;
15-
vertical-align: middle;
26+
border-radius: $badge-border-radius;
1627
text-overflow: ellipsis;
1728
overflow: hidden;
1829

19-
@include badge-variant($component-bg, $grey-thin, $grey-dark);
30+
@include badge-variant($grey-light);
2031

2132
&:empty {
2233
min-width: auto;
@@ -26,7 +37,24 @@ $badge-empty-size: 8px !default;
2637
}
2738
}
2839

29-
// theme
40+
// size modifiers
41+
.badge.badge--sm {
42+
font-size: $badge-font-size-sm;
43+
line-height: $badge-line-height-sm;
44+
padding: $badge-padding-sm;
45+
}
46+
47+
.badge.badge--lg {
48+
font-size: $badge-font-size-lg;
49+
line-height: $badge-line-height-lg;
50+
padding: $badge-padding-lg;
51+
}
52+
53+
// variant modifiers
54+
.badge.badge--pill {
55+
border-radius: 1993px;
56+
}
57+
3058
.badge.badge--black {
3159
@include badge-variant($black);
3260
}
@@ -35,10 +63,6 @@ $badge-empty-size: 8px !default;
3563
@include badge-variant($grey-dark);
3664
}
3765

38-
.badge.badge--light {
39-
@include badge-variant($grey-light);
40-
}
41-
4266
.badge.badge--white {
4367
@include badge-variant($white);
4468
}
@@ -49,7 +73,7 @@ $badge-empty-size: 8px !default;
4973
}
5074
}
5175

52-
// position
76+
// position modifiers
5377
.badge.badge--lt {
5478
position: absolute;
5579
top: 0;

‎scss/_components.box.scss‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,27 @@
11
/* ## Box
22
---------------------------------*/
3-
$box-border-width: $component-border-width !default;
4-
$box-border-radius: $component-border-radius-md !default;
5-
$box-margin-bottom: $spacing-stack-lg !default;
6-
$box-title-size: $text-size-base !default;
3+
$box-border-color: $grey-thin !default;
4+
$box-border-width: $shape-border-width !default;
5+
$box-border-radius: $shape-border-radius-md !default;
6+
$box-header-font-size: $text-size-md !default;
7+
$box-header-color: $grey-dark !default;
8+
$box-header-bg: $grey-light !default;
79
$box-header-padding: $spacing-squish-md !default;
810
$box-inner-padding: $spacing-square-md !default;
9-
$box-bg: $component-bg !default;
11+
$box-bg: $shape-bg !default;
1012

1113
.box {
12-
margin-bottom: $box-margin-bottom;
1314
border-radius: $box-border-radius;
1415
}
1516

1617
.box__header {
17-
color: $grey-dark;
18-
font-size: $box-title-size;
18+
color: $box-header-color;
19+
font-size: $box-header-font-size;
1920
line-height: $line-height-tight;
2021
padding: $box-header-padding;
21-
border: $box-border-width solid $grey-thin;
22+
border: $box-border-width solid $box-border-color;
2223
border-radius: $box-border-radius $box-border-radius 0 0;
23-
background-color: $grey-light;
24+
background-color: $box-header-bg;
2425

2526
&:only-child {
2627
border-radius: $box-border-radius;
@@ -29,7 +30,7 @@ $box-bg: $component-bg !default;
2930

3031
.box__body {
3132
border-style: solid;
32-
border-color: $grey-thin;
33+
border-color: $box-border-color;
3334
border-width: 0 $box-border-width $box-border-width $box-border-width;
3435
border-radius: 0 0 $box-border-radius $box-border-radius;
3536
background-color: $box-bg;
@@ -52,6 +53,7 @@ $box-bg: $component-bg !default;
5253

5354
}
5455

56+
// variant modifiers
5557
@each $name, $color in $theme-colors {
5658
.box.box--#{$name} {
5759
@include box-variant(

‎scss/_components.breadcrumb.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
11
/* ## Breadcrumb
22
---------------------------------*/
3-
$breadcrumb-item-spacing: $spacing-stack-md !default;
3+
$breadcrumb-gutter: $spacing-stack-md !default;
4+
$breadcrumb-color: $grey-mute !default;
5+
$breadcrumb-gap-color: $grey-thin !default;
46

57
.breadcrumb {
68
margin: 0;
79
padding: 0;
810
list-style: none;
9-
color: $grey-mute;
11+
color: $breadcrumb-color;
1012
@include clearfix;
1113
}
1214

1315
.breadcrumb__item {
1416
float: left;
15-
color: $grey-mute;
17+
color: $breadcrumb-color;
1618

1719
&:nth-child(n+2) {
1820
&:before {
1921
content: '\0002f';
20-
padding-left: $breadcrumb-item-spacing;
21-
padding-right: $breadcrumb-item-spacing;
22-
color: $grey-thin;
22+
padding-left: $breadcrumb-gutter;
23+
padding-right: $breadcrumb-gutter;
24+
color: $breadcrumb-gap-color;
2325
}
2426
}
2527
}

‎scss/_components.button.scss‎

Lines changed: 24 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,22 @@
11
/* ## Button
22
---------------------------------*/
3-
$btn-border-radius: $component-border-radius-md !default;
4-
$btn-border-width: $component-border-width !default;
3+
$btn-border-radius: $shape-border-radius-md !default;
4+
$btn-border-width: $shape-border-width !default;
55
$btn-line-height: $line-height-normal !default;
6-
$btn-font-size-sm: $text-size-sm !default;
7-
$btn-font-size-md: $text-size-md !default;
8-
$btn-font-size-lg: $text-size-lg !default;
6+
97
$btn-padding-sm: $spacing-squish-xs !default;
8+
$btn-font-size-sm: $text-size-sm !default;
9+
$btn-line-height-sm: round-line-height($btn-font-size-sm, $btn-line-height) !default;
10+
1011
$btn-padding-md: $spacing-squish-sm !default;
12+
$btn-font-size-md: $text-size-md !default;
13+
$btn-line-height-md: round-line-height($btn-font-size-md, $btn-line-height) !default;
14+
1115
$btn-padding-lg: $spacing-squish-md !default;
12-
$btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-padding-md, 1) + 2 * $btn-border-width;
16+
$btn-font-size-lg: $text-size-lg !default;
17+
$btn-line-height-lg: round-line-height($btn-font-size-lg, $btn-line-height) !default;
18+
19+
$btn-height-computed: $btn-font-size-md * $btn-line-height-md + 2 * nth($btn-padding-md, 1) + 2 * $btn-border-width;
1320

1421
.btn {
1522
cursor: pointer;
@@ -18,11 +25,11 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
1825
vertical-align: middle;
1926
padding: $btn-padding-md;
2027
font-size: $btn-font-size-md;
21-
line-height: $line-height-normal;
28+
line-height: $btn-line-height-md;
2229
height: $btn-height-computed;
2330
min-width: $btn-height-computed;
24-
border-width: $btn-border-width;
2531
border-style: solid;
32+
border-width: $btn-border-width;
2633
border-radius: $btn-border-radius;
2734
white-space: nowrap;
2835
text-overflow: ellipsis;
@@ -53,7 +60,7 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
5360
}
5461

5562
@include btn-variant(
56-
$background: $component-bg,
63+
$background: $shape-bg,
5764
$border: $grey-thin,
5865
$color: $grey-dark,
5966
$hover-background: $grey-light,
@@ -72,6 +79,7 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
7279

7380
}
7481

82+
// variant modifiers
7583
.btn.btn--link {
7684
text-decoration: underline;
7785
@include btn-variant(
@@ -136,10 +144,12 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
136144
}
137145
}
138146

147+
// size modifiers
139148
.btn.btn--sm {
140-
$btn-height-computed: $btn-font-size-sm * $btn-line-height + 2 * nth($btn-padding-sm, 1) + 2 * $btn-border-width;
149+
$btn-height-computed: $btn-font-size-sm * $btn-line-height-sm + 2 * nth($btn-padding-sm, 1) + 2 * $btn-border-width;
141150

142151
font-size: $btn-font-size-sm;
152+
line-height: $btn-line-height-sm;
143153
border-radius: $btn-border-radius;
144154
padding: $btn-padding-sm;
145155
height: $btn-height-computed;
@@ -151,9 +161,10 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
151161
}
152162

153163
.btn.btn--lg {
154-
$btn-height-computed: $btn-font-size-lg * $btn-line-height + 2 * nth($btn-padding-lg, 1) + 2 * $btn-border-width;
164+
$btn-height-computed: $btn-font-size-lg * $btn-line-height-sm + 2 * nth($btn-padding-lg, 1) + 2 * $btn-border-width;
155165

156166
font-size: $btn-font-size-lg;
167+
line-height: $btn-line-height-lg;
157168
border-radius: $btn-border-radius;
158169
padding: $btn-padding-lg;
159170
height: $btn-height-computed;
@@ -174,8 +185,7 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
174185
width: 100%;
175186
}
176187

177-
/* ## Button Group
178-
---------------------------------*/
188+
// containers
179189
.btn-group {
180190
display: inline-flex;
181191

@@ -205,6 +215,7 @@ $btn-height-computed: $btn-font-size-md * $btn-line-height + 2 * nth($btn-paddin
205215
}
206216
}
207217

218+
// animation
208219
@keyframes spin-around {
209220
from {
210221
transform: rotate(0deg);

0 commit comments

Comments
 (0)