Skip to content

Commit 3613a44

Browse files
bennypowersbennypowers
committed
chore: update sass sheets
1 parent 37acd09 commit 3613a44

13 files changed

Lines changed: 157 additions & 133 deletions

File tree

‎app/components/bandheader/bandheader.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
22

33
.band-header {
44
&-title {

‎app/components/card/card.scss‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
2+
@use "../../public/styles/variables/colors";
23

34
.card {
45
&--component {
@@ -47,10 +48,10 @@
4748
}
4849
}
4950
[data-layout="3-up"] &-content:last-child {
50-
border-left: 2px solid $iron;
51+
border-left: 2px solid colors.$iron;
5152
}
5253
[data-layout="3-up"] &-content:nth-child(2) {
53-
border-left: 2px solid $iron;
54+
border-left: 2px solid colors.$iron;
5455
}
5556
&-link {
5657
@extend %subtle-link;

‎app/components/dynamictable/dynamictable.scss‎

Lines changed: 20 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
1-
@import '../../public/styles/global';
1+
@use '../../public/styles/global';
2+
@use "../../public/styles/mixins/global" as global2;
3+
@use "../../public/styles/variables/base";
4+
@use "../../public/styles/variables/breakpoints";
5+
@use "../../public/styles/variables/colors";
26

37
.table {
48
&--component {
@@ -11,7 +15,7 @@
1115
display: grid;
1216
grid-template-columns: 1fr;
1317
grid-gap: 10px;
14-
@media screen and (min-width: $breakpoint-sm-min) {
18+
@media screen and (min-width: breakpoints.$breakpoint-sm-min) {
1519
grid-auto-rows: 1fr;
1620
grid-gap: 30px;
1721
grid-template-columns: 8fr 4fr;
@@ -25,21 +29,21 @@
2529
grid-template-columns: 7fr 1fr;
2630

2731
&-input {
28-
@include make-input();
32+
@include global2.make-input();
2933
}
3034

3135
&-button {
32-
@include make-button($btn-color: $brand-primary);
36+
@include global2.make-button($btn-color: colors.$brand-primary);
3337

34-
@media all and (max-width: $breakpoint-sm-max) {
38+
@media all and (max-width: breakpoints.$breakpoint-sm-max) {
3539
padding-left: 20px;
3640
padding-right: 20px;
3741
}
3842
}
3943
}
4044

4145
&-dropdown {
42-
font-family: $base-font-family;
46+
font-family: base.$base-font-family;
4347
align-items: center;
4448
display: grid;
4549
grid-auto-rows: 1fr;
@@ -52,15 +56,15 @@
5256
}
5357

5458
&-select {
55-
background-color: $white;
56-
color: $stone;
59+
background-color: colors.$white;
60+
color: colors.$stone;
5761
height: 100%;
5862
-webkit-appearance: none;
5963
border-radius: 0;
6064
padding: 5px 30px 5px 10px;
6165

6266
+ i {
63-
color: $stone;
67+
color: colors.$stone;
6468
position: absolute;
6569
top: calc(50% - .55em);
6670
right: 10px;
@@ -77,18 +81,18 @@
7781
width: 100%;
7882
table-layout: fixed;
7983

80-
@media all and (max-width: $breakpoint-sm-max) {
84+
@media all and (max-width: breakpoints.$breakpoint-sm-max) {
8185
table-layout: fixed;
8286
}
8387

8488
thead {
85-
@media screen and (max-width: $breakpoint-xs-max) {
89+
@media screen and (max-width: breakpoints.$breakpoint-xs-max) {
8690
display: none;
8791
}
8892
}
8993

9094
thead tr {
91-
background-color: $iron;
95+
background-color: colors.$iron;
9296
}
9397

9498
th {
@@ -105,23 +109,23 @@
105109
}
106110

107111
tbody tr:nth-child(even) {
108-
background-color: $mercury;
112+
background-color: colors.$mercury;
109113
}
110114

111115
tbody tr:nth-child(odd) {
112-
background-color: $white;
116+
background-color: colors.$white;
113117
}
114118

115119
td {
116120
@extend %table-row;
117121
padding: 10px;
118122
overflow: hidden;
119123
text-overflow: ellipsis;
120-
@media screen and (max-width: $breakpoint-xs-max) {
124+
@media screen and (max-width: breakpoints.$breakpoint-xs-max) {
121125
display: block;
122126
}
123127
&:first-child {
124-
@media screen and (max-width: $breakpoint-xs-max) {
128+
@media screen and (max-width: breakpoints.$breakpoint-xs-max) {
125129
font-weight: 600;
126130
}
127131
}

‎app/components/group/group.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
22

33
.group {
44
&-container {

‎app/components/hero/hero.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
2+
@use "../../public/styles/variables/colors";
23

34
.hero {
45
&--component {
56
@extend %default--band;
67
align-items: center;
7-
background-color: $gallery;
8+
background-color: colors.$gallery;
89
background-image: url("../../public/img/hero.png");
910
background-position: center center;
1011
background-repeat: no-repeat;

‎app/components/navigation/navigation.scss‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
2+
@use "../../public/styles/variables/breakpoints";
23

34
.navigation {
45
&--component {
@@ -45,7 +46,7 @@
4546
@extend %logo-link;
4647
max-height: 2em;
4748

48-
@media screen and (min-width: $breakpoint-lg-min) {
49+
@media screen and (min-width: breakpoints.$breakpoint-lg-min) {
4950
max-height: 3em;
5051
}
5152
}

‎app/components/universalfooter/universalfooter.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,19 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
2+
@use "../../public/styles/variables/breakpoints";
3+
@use "../../public/styles/variables/colors";
24

35
.footer {
46
&--component {
57
@extend %default--band;
6-
background-color: $rich-black;
8+
background-color: colors.$rich-black;
79
}
810
&-container {
911
@extend %default-container;
1012
display: grid;
1113
grid-template-columns: 3fr 2fr;
1214
grid-gap: 10px;
1315

14-
@media screen and (min-width: $breakpoint-sm-min) {
16+
@media screen and (min-width: breakpoints.$breakpoint-sm-min) {
1517
align-items: center;
1618
grid-auto-rows: 1fr;
1719
grid-gap: 30px;
@@ -22,13 +24,13 @@
2224
img {
2325
@extend %logo-link-dark;
2426
height: 34px;
25-
@media screen and (min-width: $breakpoint-sm-min) {
27+
@media screen and (min-width: breakpoints.$breakpoint-sm-min) {
2628
height: 44px;
2729
min-width: 138px;
2830
}
2931
}
3032
&:last-child {
31-
@media screen and (max-width: $breakpoint-xs-max) {
33+
@media screen and (max-width: breakpoints.$breakpoint-xs-max) {
3234
display: flex;
3335
justify-content: flex-end;
3436
}
@@ -44,7 +46,7 @@
4446
}
4547
&-links {
4648
> *:not(:last-child) {
47-
border-right: 1px solid $stone;
49+
border-right: 1px solid colors.$stone;
4850
}
4951
}
5052
&-link {

‎app/pages/main/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "../../public/styles/global";
1+
@use "../../public/styles/global";
22

33
.band {
44

‎app/public/styles/extends/block.scss‎

Lines changed: 19 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1+
@use "sass:math";
2+
@use "../variables/base";
3+
@use "../variables/colors";
4+
@use "../variables/breakpoints";
5+
16
%default--band {
2-
padding-bottom: $band-padding;
3-
padding-top: $band-padding;
7+
padding-bottom: base.$band-padding;
8+
padding-top: base.$band-padding;
49
position: relative;
510

611
&[data-background="gray"] {
7-
background-color: $gallery;
12+
background-color: colors.$gallery;
813
}
914

1015
&[data-collapse="top"] {
11-
padding-top: $band-padding / 2;
16+
padding-top: base.$band-padding * 0.5;
1217
}
1318

1419
&[data-collapse="bottom"] {
15-
padding-bottom: $band-padding / 2;
20+
padding-bottom: base.$band-padding * 0.5;
1621
}
1722

1823
&[data-collapse="both"] {
19-
padding-top: $band-padding / 6;
20-
padding-bottom: $band-padding / 6;
24+
padding-top: math.div(base.$band-padding, 6);
25+
padding-bottom: math.div(base.$band-padding, 6);
2126
}
2227
}
2328

2429
%default-container {
25-
padding: 0 $mobile-edge;
30+
padding: 0 base.$mobile-edge;
2631
margin-right: auto;
2732
margin-left: auto;
2833

@@ -38,28 +43,28 @@
3843
text-align: right;
3944
}
4045

41-
@media screen and (min-width: $breakpoint-sm-min) {
46+
@media screen and (min-width: breakpoints.$breakpoint-sm-min) {
4247
width: 750px;
4348
padding: 0;
4449
}
4550

46-
@media screen and (min-width: $breakpoint-md-min) {
51+
@media screen and (min-width: breakpoints.$breakpoint-md-min) {
4752
width: 970px;
4853
}
4954

50-
@media screen and (min-width: $breakpoint-lg-min) {
55+
@media screen and (min-width: breakpoints.$breakpoint-lg-min) {
5156
width: 1170px;
5257
}
5358
}
5459

5560
%default--card {
56-
border-top: 5px solid $red;
61+
border-top: 5px solid colors.$red;
5762
display: flex;
5863
flex-flow: column nowrap;
59-
padding: $box-padding;
64+
padding: base.$box-padding;
6065

6166
&[data-background="white"] {
62-
background-color: $white;
67+
background-color: colors.$white;
6368
}
6469
> *:not(:last-child) {
6570
padding-bottom: 30px;

0 commit comments

Comments
 (0)