Skip to content

Commit 09783ab

Browse files
troys-codetroys-code
committed
refactor: make scss build using recent sass-embedded package
1 parent a9572c1 commit 09783ab

10 files changed

Lines changed: 601 additions & 100 deletions

File tree

‎client/scss/board.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use './colors';
2+
13
#board {
24
width: 70%;
35
height: 92%;
@@ -135,22 +137,22 @@
135137
}
136138

137139
.basement.odd {
138-
background: url('/resources/images/wall.png') $orange;
140+
background: url('/resources/images/wall.png') colors.$orange;
139141
background-size: 200%;
140142
}
141143

142144
.basement.even {
143-
background: url('/resources/images/asfalt-light.png') $orange-dark;
145+
background: url('/resources/images/asfalt-light.png') colors.$orange-dark;
144146
}
145147

146148
.engine.odd {
147-
background: url('/resources/images/metal-1.png') $white;
149+
background: url('/resources/images/metal-1.png') colors.$white;
148150
background-size: cover;
149151
border-bottom: 2vh solid rgba(0,0,0,0.5);
150152
}
151153

152154
.engine.even {
153-
background: url('/resources/images/metal-2.png') $white-dark;
155+
background: url('/resources/images/metal-2.png') colors.$white-dark;
154156
background-size: cover;
155157
border-bottom: 2vh solid rgba(0,0,0,0.5);
156158
}
@@ -166,12 +168,12 @@
166168
}
167169

168170
.garden.odd {
169-
background: url('/resources/images/grass-1.png') $green no-repeat;
171+
background: url('/resources/images/grass-1.png') colors.$green no-repeat;
170172
background-size: 102%;
171173
}
172174

173175
.garden.even {
174-
background: url('/resources/images/grass-2.png') $green-dark;
176+
background: url('/resources/images/grass-2.png') colors.$green-dark;
175177
background-size: 102%;
176178
}
177179

‎client/scss/colors.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/* Colors */
2+
$white: #f2f2f2;
3+
$white-dark: #cbcbcb;
4+
5+
$red: #d53126;
6+
$red-dark: #a93126;
7+
8+
$green: #78c042;
9+
$green-dark: #4d9713;
10+
11+
$blue: #1c8da0;
12+
$blue-light: #60afbc;
13+
$blue-dark: #1c8da0;
14+
$blue-darker: #006073;
15+
$blue-darkest: #02333a !default;
16+
$blue-shadow: #011e22;
17+
18+
$yellow: #e8d700;
19+
$yellow-dark: #c4b505;
20+
21+
$orange: #ea7750;
22+
$orange-dark: #c45d45;

‎client/scss/commandPane.scss‎

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use './colors';
2+
13
$actionButtonElevation: 7px;
24

35
.command-pane {
@@ -11,7 +13,7 @@ $actionButtonElevation: 7px;
1113
justify-content: flex-start;
1214
align-content: center;
1315
align-items: center;
14-
background: $blue;
16+
background: colors.$blue;
1517

1618
@media screen and (max-width: 850px) {
1719
width: 100%;
@@ -42,7 +44,7 @@ $actionButtonElevation: 7px;
4244

4345
.command-queue::-webkit-scrollbar-thumb {
4446
border-radius: 10px;
45-
background-color: $blue-darkest;
47+
background-color: colors.$blue-darkest;
4648
}
4749
.moves-left {
4850
line-height: 100%;
@@ -62,9 +64,9 @@ $actionButtonElevation: 7px;
6264
justify-content: flex-start;
6365
align-content: flex-start;
6466
align-items: flex-start;
65-
border-left: 7px solid $blue-darkest;
66-
border-top: 7px solid $blue-darkest;
67-
background: $blue-darker;
67+
border-left: 7px solid colors.$blue-darkest;
68+
border-top: 7px solid colors.$blue-darkest;
69+
background: colors.$blue-darker;
6870
border-radius: 10px;
6971
overflow-y: scroll;
7072

@@ -142,7 +144,7 @@ $actionButtonElevation: 7px;
142144
justify-content: center;
143145
align-content: center;
144146
align-items: center;
145-
background: $white-dark;
147+
background: colors.$white-dark;
146148
border-bottom: $actionButtonElevation solid #a4a4a4;
147149

148150
@media screen and (max-width: 1400px) {
@@ -174,13 +176,13 @@ $actionButtonElevation: 7px;
174176
}
175177

176178
.action-forward {
177-
background: $green;
178-
border-bottom: $actionButtonElevation solid $green-dark;
179+
background: colors.$green;
180+
border-bottom: $actionButtonElevation solid colors.$green-dark;
179181
}
180182

181183
.action-rotate {
182-
background: $orange;
183-
border-bottom: $actionButtonElevation solid $orange-dark;
184+
background: colors.$orange;
185+
border-bottom: $actionButtonElevation solid colors.$orange-dark;
184186
}
185187
.moves-left {
186188
line-height: 100%;
@@ -199,8 +201,8 @@ $actionButtonElevation: 7px;
199201
}
200202

201203
.action-jump {
202-
background: $yellow;
203-
border-bottom: $actionButtonElevation solid $yellow-dark;
204+
background: colors.$yellow;
205+
border-bottom: $actionButtonElevation solid colors.$yellow-dark;
204206
}
205207

206208
.action-jump:hover {

‎client/scss/commandQueue.scss‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@use './colors';
2+
13
.command-container {
24
height: 30%;
35
width: 80%;
@@ -7,9 +9,9 @@
79
justify-content: center;
810
align-content: center;
911
align-items: center;
10-
border-left: 7px solid $blue-darkest;
11-
border-top: 7px solid $blue-darkest;
12-
background: $blue-darker;
12+
border-left: 7px solid colors.$blue-darkest;
13+
border-top: 7px solid colors.$blue-darkest;
14+
background: colors.$blue-darker;
1315
border-radius: 10px;
1416
overflow-y: hidden !important;
1517

@@ -30,9 +32,9 @@
3032
}
3133

3234
.commandQueueIcon-removable:hover {
33-
background-color: $orange-dark;
35+
background-color: colors.$orange-dark;
3436
}
3537

3638
.commandQueueIcon-active {
37-
background-color: $blue;
39+
background-color: colors.$blue;
3840
}

‎client/scss/main.scss‎

Lines changed: 12 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,14 @@
1-
/* Colors */
2-
$white: #f2f2f2;
3-
$white-dark: #cbcbcb;
4-
5-
$red: #d53126;
6-
$red-dark: #a93126;
7-
8-
$green: #78c042;
9-
$green-dark: #4d9713;
10-
11-
$blue: #1c8da0;
12-
$blue-light: #60afbc;
13-
$blue-dark: #1c8da0;
14-
$blue-darker: #006073;
15-
$blue-darkest: #02333a;
16-
$blue-shadow: #011e22;
17-
18-
$yellow: #e8d700;
19-
$yellow-dark: #c4b505;
20-
21-
$orange: #ea7750;
22-
$orange-dark: #c45d45;
23-
241
/* Import Assets */
25-
@import './nav.scss';
26-
@import './commandPane.scss';
27-
@import './board.scss';
28-
@import './commandQueue.scss';
29-
@import './runButton.scss';
30-
@import './robot.scss';
31-
@import './win.scss';
2+
@use './colors.scss';
3+
@use './nav.scss';
4+
@use './commandPane.scss';
5+
@use './board.scss';
6+
@use './commandQueue.scss';
7+
@use './runButton.scss';
8+
@use './robot.scss';
9+
@use './win.scss';
3210

33-
/* Import Fonts */
11+
/* Fonts */
3412
@import 'https://fonts.googleapis.com/css?family=Press+Start+2P';
3513
@import 'https://fonts.googleapis.com/css?family=Space+Mono';
3614

@@ -40,7 +18,7 @@ $heading: 'Press Start 2P', cursive;
4018
$text: 'Space Mono', monospace;
4119

4220
body {
43-
background: $blue;
21+
background: colors.$blue;
4422
overflow-y: hidden;
4523
}
4624

@@ -51,7 +29,7 @@ h1 {
5129
h3{
5230
font-family: $heading;
5331
font-size: 2.5vh;
54-
color: $white;
32+
color: colors.$white;
5533

5634
@media screen and (max-width: 850px) {
5735
font-size: 2vh;
@@ -61,7 +39,7 @@ h3{
6139
h4{
6240
font-family: $heading;
6341
font-size: 16px;
64-
color: $white-dark;
42+
color: colors.$white-dark;
6543
cursor: default;
6644
}
6745

0 commit comments

Comments
 (0)