Skip to content

Commit fb5796e

Browse files
afischerafischer
authored
Rework Sass imports to use new dart sass style (#385)
1 parent f625d26 commit fb5796e

File tree

8 files changed

+179
-177
lines changed

8 files changed

+179
-177
lines changed

‎styles/errors.scss‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,15 @@
44
// the authentication layer.)
55

66
// top level templating values that can be overridden
7-
@use "partials/vars";
8-
@use "partials/theme";
7+
@use "vars" as *;
8+
@use "theme" as *;
99

1010
// core layout styles rarely overridden
11-
@use "partials/core/mixins";
12-
@use "partials/core/base";
13-
@use "partials/core/furniture";
14-
@use "partials/core/pages";
15-
@use "partials/core/categories";
11+
@use "core/mixins" as *;
12+
@use "core/base" as *;
13+
@use "core/furniture" as *;
14+
@use "core/pages" as *;
15+
@use "core/categories" as *;
1616

1717
// final stylesheet with any additional styles for custom logic
18-
@use "partials/custom";
18+
@use "custom" as *;

‎styles/partials/_theme.scss‎

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "vars";
1+
@use "vars" as *;
22

33
// Fonts
44
//------------------------------------------------------------------------------
@@ -12,23 +12,23 @@ $font-sans: 'Open Sans', sans-serif;
1212
// Colors
1313
//------------------------------------------------------------------------------
1414
// Default Light Theme
15-
$masthead-background: vars.$gray-10;
16-
$main-homepage-background: vars.$white;
17-
$main-homepage-icon-color: vars.$black;
18-
$main-homepage-icon-border: vars.$black;
19-
$main-page-text-color: vars.$gray-35;
20-
$main-page-btn-color: vars.$gray-45;
15+
$masthead-background: $gray-10;
16+
$main-homepage-background: $white;
17+
$main-homepage-icon-color: $black;
18+
$main-homepage-icon-border: $black;
19+
$main-page-text-color: $gray-35;
20+
$main-page-btn-color: $gray-45;
2121
$search-container-background: #e6e2e2;
22-
$search-container-hover: vars.$gray-70;
23-
$btn-homepage-background: vars.$white;
24-
$btn-homepage-border: vars.$black;
25-
$btn-default-background: vars.$white;
26-
$btn-default-background-hover: vars.$accent;
27-
$btn-default-border: vars.$black;
28-
$btn-default-text-color: vars.$black;
29-
$btn-default-text-hover: vars.$black;
30-
$btn-user-initial: vars.$gray-50;
31-
$elem-link-color: vars.$gray-50;
32-
$elem-active-link-color: vars.$gray-50;
33-
$elem-link-accent: vars.$accent;
34-
$nav-text-color: vars.$gray-40;
22+
$search-container-hover: $gray-70;
23+
$btn-homepage-background: $white;
24+
$btn-homepage-border: $black;
25+
$btn-default-background: $white;
26+
$btn-default-background-hover: $accent;
27+
$btn-default-border: $black;
28+
$btn-default-text-color: $black;
29+
$btn-default-text-hover: $black;
30+
$btn-user-initial: $gray-50;
31+
$elem-link-color: $gray-50;
32+
$elem-active-link-color: $gray-50;
33+
$elem-link-accent: $accent;
34+
$nav-text-color: $gray-40;

‎styles/partials/core/_base.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
@use "../theme";
2-
@use "../vars";
1+
@use "theme" as *;
2+
@use "vars" as *;
33
@use "mixins";
44

55
// Basic Styling
66
//------------------------------------------------------------------------------
77
body {
8-
font-family: theme.$font-sans;
8+
font-family: $font-sans;
99
font-weight: 100;
1010
margin: 0;
1111
padding: 0;
@@ -16,13 +16,13 @@ pre {
1616
}
1717

1818
h1, h2, h3, h4, h5, h6 {
19-
font-family: theme.$font-sans;
19+
font-family: $font-sans;
2020
margin-top: 45px;
2121
margin-bottom: 20px;
2222
}
2323

2424
a {
25-
color: vars.$accent;
25+
color: $accent;
2626
text-decoration: none;
2727

2828
&:hover {
@@ -44,7 +44,7 @@ table {
4444
th, td {
4545
padding: 0.25rem 0.5rem;
4646
text-align: left;
47-
border: 1px solid vars.$gray-50;
47+
border: 1px solid $gray-50;
4848
p {
4949
margin: 0;
5050
}
@@ -69,14 +69,14 @@ button:focus {
6969
line-height: 18px;
7070
font-weight: 300;
7171
font-style: normal;
72-
font-family: theme.$font-sans;
72+
font-family: $font-sans;
7373
background-color: transparent;
7474
border-radius: 3px;
7575
transition: background-color 0.3s;
7676
display: inline-block;
7777
padding: 4px 8px 6px 8px;
78-
border: 1px solid theme.$btn-default-border;
79-
color: theme.$btn-default-text-color;
78+
border: 1px solid $btn-default-border;
79+
color: $btn-default-text-color;
8080
cursor: pointer;
8181

8282
@include mixins.tablet{
@@ -92,7 +92,7 @@ button:focus {
9292
}
9393

9494
.button.btn-cat {
95-
background: theme.$btn-default-background;
95+
background: $btn-default-background;
9696
border-radius: 0;
9797
margin: 4px 0 0 0;
9898
-webkit-font-smoothing: antialiased;
@@ -106,8 +106,8 @@ button:focus {
106106

107107
&:hover {
108108
cursor: pointer;
109-
background: theme.$btn-default-background-hover;
110-
color: theme.$btn-default-text-hover;
109+
background: $btn-default-background-hover;
110+
color: $btn-default-text-hover;
111111
text-decoration: none;
112112
}
113113
}
@@ -116,21 +116,21 @@ button:focus {
116116
margin: 10px 0 0 0;
117117
-webkit-font-smoothing: antialiased;
118118
font-size: 14px;
119-
background-color: theme.$btn-homepage-background;
120-
border: 1px solid theme.$btn-homepage-border;
119+
background-color: $btn-homepage-background;
120+
border: 1px solid $btn-homepage-border;
121121
border-radius: 0;
122-
color: theme.$main-page-btn-color;
123-
-webkit-box-shadow: 2.5px 2.5px 0px -1px vars.$accent-dark;
124-
-moz-box-shadow: 2.5px 2.5px 0px -1px vars.$accent-dark;
125-
box-shadow: 2.5px 2.5px 0px -1px vars.$accent-dark;
122+
color: $main-page-btn-color;
123+
-webkit-box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
124+
-moz-box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
125+
box-shadow: 2.5px 2.5px 0px -1px $accent-dark;
126126
padding: 5px 12px;
127127

128128
&:hover {
129-
background: theme.$elem-link-accent;
130-
color: vars.$white;
131-
-webkit-box-shadow: 3px 3px 0px 0px vars.$gray-25;
132-
-moz-box-shadow: 3px 3px 0px 0px vars.$gray-25;
133-
box-shadow: 3px 3px 0px 0px vars.$gray-25;
129+
background: $elem-link-accent;
130+
color: $white;
131+
-webkit-box-shadow: 3px 3px 0px 0px $gray-25;
132+
-moz-box-shadow: 3px 3px 0px 0px $gray-25;
133+
box-shadow: 3px 3px 0px 0px $gray-25;
134134
text-decoration: none;
135135
}
136136
}
@@ -140,37 +140,37 @@ button:focus {
140140
line-height: 20px;
141141
font-weight: 400;
142142
font-style: normal;
143-
font-family: theme.$font-sans;
143+
font-family: $font-sans;
144144
background-color: transparent;
145145
transition: background-color 0.3s;
146146
display: inline-block;
147147
padding: 7px 10px;
148-
border: 1px solid vars.$gray-40;
148+
border: 1px solid $gray-40;
149149
cursor: pointer;
150150
-webkit-font-smoothing: antialiased;
151-
-webkit-box-shadow: 5px 5px 0px 0px vars.$offwhite;
152-
-moz-box-shadow: 5px 5px 0px 0px vars.$offwhite;
153-
box-shadow: 5px 5px 0px 0px vars.$offwhite;
151+
-webkit-box-shadow: 5px 5px 0px 0px $offwhite;
152+
-moz-box-shadow: 5px 5px 0px 0px $offwhite;
153+
box-shadow: 5px 5px 0px 0px $offwhite;
154154
margin-right: 10px;
155-
color: vars.$gray-20;
155+
color: $gray-20;
156156
margin-top: 10px;
157157

158158
&:hover {
159-
background: vars.$gray-20;
160-
color: vars.$white;
159+
background: $gray-20;
160+
color: $white;
161161
}
162162
}
163163

164164
.button.btn-plaintext {
165165
border: none;
166166
text-decoration: underline;
167167
background: transparent;
168-
color: theme.$nav-text-color;
168+
color: $nav-text-color;
169169
font-size: 13px;
170170
line-height: 29px;
171171

172172
&:hover {
173173
cursor: pointer;
174-
color: vars.$accent;
174+
color: $accent;
175175
}
176176
}

0 commit comments

Comments
 (0)