Skip to content

Commit 4de5c5f

Browse files
kylegordykylegordy
committed
Split up helpers into individual utility partials
1 parent b87eccd commit 4de5c5f

File tree

9 files changed

+180
-163
lines changed

9 files changed

+180
-163
lines changed

‎assets/_sass/base/_helpers.scss

Lines changed: 0 additions & 160 deletions
This file was deleted.

‎assets/_sass/component/_card.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@ $card-padding-lg: rem-calc(20px);
6262
margin: -1px; // offset card border
6363
background-color: var(--theme-primary-color);
6464
border: 1px solid var(--theme-border-color);
65-
border-radius: 6px 6px 0 0;
65+
@extend .rounded-top;
6666

6767
@media (min-width: $bp-lg) {
6868
display: flex;
@@ -84,7 +84,7 @@ $card-padding-lg: rem-calc(20px);
8484
width: 1.75em;
8585
text-align: center;
8686
background-color: var(--theme-secondary-color);
87-
border-radius: 0 6px 0 6px;
87+
border-radius: 0 $border-radius 0 $border-radius;
8888
visibility: hidden;
8989
opacity: 0;
9090
transition: opacity .2s ease;

‎assets/_sass/utilities/_borders.scss

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
////////////////////
2+
// Border Radius
3+
////////////////////
4+
5+
$border-radius: 6px;
6+
7+
.rounded {
8+
border-radius: $border-radius;
9+
}
10+
11+
.rounded-top {
12+
border-top-left-radius: $border-radius;
13+
border-top-right-radius: $border-radius;
14+
}
15+
16+
.rounded-bottom {
17+
border-bottom-left-radius: $border-radius;
18+
border-bottom-right-radius: $border-radius;
19+
}

‎assets/_sass/utilities/_images.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
////////////////////
2+
// Icons
3+
////////////////////
4+
5+
.svg-icon {
6+
display: inline-block;
7+
width: 1em;
8+
height: 1em;
9+
fill: currentColor;
10+
vertical-align: -.125em;
11+
}
12+
13+
////////////////////
14+
// Logo
15+
////////////////////
16+
17+
.logo {
18+
vertical-align: middle;
19+
width: 100%;
20+
max-width: rem-calc(130px);
21+
}
22+
23+
// Dark version of logo
24+
.logo.dark {
25+
.logo__icon { fill: $seafoam-light; }
26+
.logo__wordmark { fill: $white; }
27+
.logo__subhead { fill: rgba($white, .70) }
28+
}

‎assets/_sass/utilities/_links.scss

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
////////////////////
2+
// Modifiers
3+
////////////////////
4+
5+
.no-underline {
6+
text-decoration: none !important;
7+
}
8+
9+
////////////////////
10+
// Stretched Links
11+
////////////////////
12+
13+
.stretched-link::after {
14+
content: '';
15+
position: absolute;
16+
top: 0;
17+
right: 0;
18+
bottom: 0;
19+
left: 0;
20+
z-index: 1;
21+
pointer-events: auto;
22+
background-color: rgba(0,0,0,0);
23+
}
24+
25+
.stretched-link-secondary {
26+
position: relative;
27+
z-index: 2;
28+
}

‎assets/_sass/utilities/_spacing.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
////////////////////
2+
// Spacing
3+
////////////////////
4+
5+
.m-0 {
6+
margin: 0 !important;
7+
}

‎assets/_sass/utilities/_text.scss

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
////////////////////
2+
// Color Modifiers
3+
////////////////////
4+
5+
.text-white { color: $white }
6+
7+
////////////////////
8+
// Font Size
9+
////////////////////
10+
11+
.fs-md {
12+
font-size: rem-calc(14px);
13+
}
14+
15+
////////////////////
16+
// Truncation
17+
////////////////////
18+
19+
.text-truncate {
20+
overflow: hidden;
21+
text-overflow: ellipsis;
22+
white-space: nowrap;
23+
}
24+
25+
.clamp-2 {
26+
@include line-clamp(2);
27+
}
28+
29+
.clamp-3 {
30+
@include line-clamp(3);
31+
}
32+
33+
////////////////////
34+
// List
35+
////////////////////
36+
37+
.list--inline {
38+
list-style-type: none;
39+
margin: 0;
40+
padding: 0;
41+
42+
> li {
43+
display: inline;
44+
}
45+
}
46+
47+
.list--plain {
48+
list-style: none;
49+
margin: 0;
50+
padding: 0;
51+
}

‎assets/_sass/utilities/_visibility.scss

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
////////////////////
2+
// Visibility
3+
////////////////////
4+
5+
// Hide visually and from screen readers
6+
.hidden {
7+
display: none !important;
8+
}
9+
10+
.hidden-sm {
11+
@media (min-width: $bp-sm) {
12+
display: none !important;
13+
}
14+
}
15+
16+
.hidden-md {
17+
@media (min-width: $bp-md) {
18+
display: none !important;
19+
}
20+
}
21+
22+
.hidden-lg {
23+
@media (min-width: $bp-lg) {
24+
display: none !important;
25+
}
26+
}
27+
28+
// Hide only visually, but have it available for screen readers:
29+
// https://a11yproject.com/posts/how-to-hide-content/
30+
.visually-hidden:not(:focus):not(:active) {
31+
position: absolute !important;
32+
height: 1px;
33+
width: 1px;
34+
overflow: hidden;
35+
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
36+
clip: rect(1px, 1px, 1px, 1px);
37+
white-space: nowrap; /* added line */
38+
}

‎assets/css/main.scss

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,13 @@
1414
@import "base/additional-defaults";
1515
@import "base/layout";
1616
@import "base/typography";
17-
@import "base/helpers";
17+
18+
@import "utilities/text";
19+
@import "utilities/links";
20+
@import "utilities/visibility";
21+
@import "utilities/spacing";
22+
@import "utilities/borders";
23+
@import "utilities/images";
1824

1925
@import "component/buttons";
2026
@import "component/navigation";

0 commit comments

Comments
 (0)