Skip to content

Commit d81a0f4

Browse files
zwliewzwliew
committed
Address styling linting warnings
1 parent 81cfe10 commit d81a0f4

File tree

6 files changed

+165
-164
lines changed

6 files changed

+165
-164
lines changed

‎website/src/views/components/bus-map/ISBServices.scss‎

Lines changed: 28 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ $route-colors: (
1515
@at-root {
1616
body {
1717
--map-label: #40456f;
18-
--map-bg: #ffffff;
18+
--map-bg: #fff;
1919
--map-deselected: #c3d7ea;
2020
--map-dark: #40456f;
21-
--map-light: #ffffff;
21+
--map-light: #fff;
2222

2323
&:global(.mode-dark) {
24-
--map-label: #ffffff;
24+
--map-label: #fff;
2525
--map-bg: #282b3f;
2626
--map-deselected: #384450;
2727
}
@@ -30,14 +30,15 @@ $route-colors: (
3030

3131
.stopIcon {
3232
$size: 12px;
33-
width: $size;
34-
height: $size;
35-
border-radius: 999px;
33+
3634
position: absolute;
3735
top: 9px;
3836
left: 9px;
39-
background: var(--map-deselected);
37+
width: $size;
38+
height: $size;
4039
border: solid 1.5px var(--map-bg);
40+
border-radius: 999px;
41+
background: var(--map-deselected);
4142
transform: scale(0.6);
4243
transition: 0.2s ease;
4344

@@ -46,20 +47,20 @@ $route-colors: (
4647
}
4748

4849
&.interchange[data-code] {
49-
transform: scale(0.75);
50-
background: var(--map-light);
5150
border: solid 2.5px var(--map-dark);
51+
background: var(--map-light);
52+
transform: scale(0.75);
5253
}
5354
}
5455

5556
.iconWrapper {
5657
$color: #a1c2e1;
5758

5859
.hitArea {
59-
opacity: 0;
6060
position: absolute;
6161
top: 7px;
6262
left: 7px;
63+
opacity: 0;
6364
width: 16px;
6465
height: 16px;
6566
border-radius: 50%;
@@ -78,9 +79,9 @@ $route-colors: (
7879
left: calc(100% - 8px);
7980
// width: 100px;
8081
width: auto;
82+
line-height: 1.3;
8183
// max-width: none;
8284
white-space: nowrap;
83-
line-height: 1.3;
8485
pointer-events: none; // So the entire 100px width will not be selectable when there's only one route
8586

8687
&.left {
@@ -99,26 +100,26 @@ $route-colors: (
99100
}
100101

101102
.stopName {
102-
font-size: 0.8rem;
103103
font-weight: 700;
104+
font-size: 0.8rem;
105+
//http://owumaro.github.io/text-stroke-generator/
106+
text-shadow: var(--map-bg) 1px 0 0, var(--map-bg) 0.540302px 0.841471px 0,
107+
var(--map-bg) -0.416147px 0.909297px 0, var(--map-bg) -0.989993px 0.14112px 0,
108+
var(--map-bg) -0.653644px -0.756803px 0, var(--map-bg) 0.283662px -0.958924px 0,
109+
var(--map-bg) 0.96017px -0.279416px 0;
110+
color: var(--map-label);
104111
// margin-bottom: 0.2rem;
105112
pointer-events: auto;
106-
color: var(--map-label);
107-
//http://owumaro.github.io/text-stroke-generator/
108-
text-shadow: var(--map-bg) 1px 0px 0px, var(--map-bg) 0.540302px 0.841471px 0px,
109-
var(--map-bg) -0.416147px 0.909297px 0px, var(--map-bg) -0.989993px 0.14112px 0px,
110-
var(--map-bg) -0.653644px -0.756803px 0px, var(--map-bg) 0.283662px -0.958924px 0px,
111-
var(--map-bg) 0.96017px -0.279416px 0px;
112113
}
113114

114115
.subtext {
115-
font-size: 0.75rem;
116116
font-weight: 700;
117+
font-size: 0.75rem;
118+
text-shadow: var(--map-bg) 1px 0 0, var(--map-bg) 0.540302px 0.841471px 0,
119+
var(--map-bg) -0.416147px 0.909297px 0, var(--map-bg) -0.989993px 0.14112px 0,
120+
var(--map-bg) -0.653644px -0.756803px 0, var(--map-bg) 0.283662px -0.958924px 0,
121+
var(--map-bg) 0.96017px -0.279416px 0;
117122
color: var(--gray);
118-
text-shadow: var(--map-bg) 1px 0px 0px, var(--map-bg) 0.540302px 0.841471px 0px,
119-
var(--map-bg) -0.416147px 0.909297px 0px, var(--map-bg) -0.989993px 0.14112px 0px,
120-
var(--map-bg) -0.653644px -0.756803px 0px, var(--map-bg) 0.283662px -0.958924px 0px,
121-
var(--map-bg) 0.96017px -0.279416px 0px;
122123
}
123124

124125
.focused {
@@ -132,12 +133,12 @@ $route-colors: (
132133
.stopService {
133134
display: block;
134135
padding: 0.125rem 0.25rem;
135-
background-color: var(--svc-color);
136-
color: white;
136+
margin-right: 0.25rem;
137137
border-radius: 0.25rem;
138138
font-weight: 700;
139139
font-size: 0.75rem;
140-
margin-right: 0.25rem;
140+
color: white;
141+
background-color: var(--svc-color);
141142
}
142143
}
143144

@@ -162,8 +163,8 @@ $route-colors: (
162163
}
163164
.leaflet-overlay-pane {
164165
path {
165-
vector-effect: non-scaling-stroke;
166166
fill: none;
167+
vector-effect: non-scaling-stroke;
167168
}
168169

169170
.overlay_bg {

‎website/src/views/components/bus-map/LocationMap.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,9 @@
55
top: 0;
66
left: 0;
77
z-index: 99999999;
8-
background: white;
9-
color: black;
108
padding: 10px;
9+
color: black;
10+
background: white;
1111
}
1212

1313
.location {

‎website/src/views/mobility/MobilityContainer/MobilityContainer.scss‎

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,19 @@
11
@import '~styles/utils/modules-entry';
22

33
.pageContainer {
4+
position: relative;
5+
z-index: 1;
46
// composes: page-container from global;
57
// max-width: 40rem;
68
// display: block;
79
min-height: calc(100vh - 6rem);
810
margin-top: -1rem;
9-
position: relative;
10-
z-index: 1;
1111
background: var(--body-bg);
1212

13-
@media (min-width: 768px) {
14-
position: fixed;
15-
display: flex;
16-
flex-wrap: wrap;
17-
flex-direction: row;
18-
padding-left: 15px;
19-
min-height: calc(100vh - 3rem);
20-
align-items: stretch;
21-
width: calc((100vw - 4rem));
22-
height: calc(100vh - 3rem);
23-
}
24-
@media (min-width: 1200px) {
25-
width: calc(100vw - 10rem);
26-
}
27-
2813
.map {
14+
overflow: hidden;
2915
flex: 1;
3016
min-width: min(100vw, 24rem);
31-
overflow: hidden;
3217

3318
@media (max-width: 768px) {
3419
height: 40vh;
@@ -44,16 +29,31 @@
4429
}
4530

4631
.container {
47-
min-width: 16rem;
48-
flex: 1;
49-
padding: 1rem 1.5rem;
5032
overflow-y: scroll;
33+
flex: 1;
34+
min-width: 16rem;
5135
max-height: 100%;
36+
padding: 1rem 1.5rem;
5237

5338
@media (min-width: 768px) {
5439
max-width: 20rem;
5540
}
5641
}
42+
43+
@media (min-width: 768px) {
44+
position: fixed;
45+
display: flex;
46+
flex-direction: row;
47+
flex-wrap: wrap;
48+
align-items: stretch;
49+
width: calc((100vw - 4rem));
50+
height: calc(100vh - 3rem);
51+
min-height: calc(100vh - 3rem);
52+
padding-left: 15px;
53+
}
54+
@media (min-width: 1200px) {
55+
width: calc(100vw - 10rem);
56+
}
5757
}
5858

5959
.backButton {

‎website/src/views/mobility/ServiceDetails.scss‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.colorBar {
22
width: 6rem;
33
height: 0.25rem;
4-
margin: -0.25rem 0 0rem;
4+
margin: -0.25rem 0 0;
55
border-radius: 999px;
66
background: var(--color);
77
}
@@ -17,8 +17,8 @@
1717
padding: 0.4rem 0 0.3rem;
1818
margin-right: 0.25rem;
1919
border-width: 0 0 0.25rem;
20-
border-radius: 0;
2120
border-color: var(--color);
21+
border-radius: 0;
2222

2323
&:last-child {
2424
margin-right: 0;
@@ -33,14 +33,14 @@
3333
}
3434
:global(.btn-primary):hover,
3535
:global(.btn-outline-primary):hover {
36-
background-color: var(--color);
3736
color: var(--body-bg);
37+
background-color: var(--color);
3838
}
3939
:global(.btn-primary):active,
4040
:global(.btn-outline-primary):active {
41-
background-color: var(--color);
42-
color: var(--body-bg);
4341
border-color: var(--color);
42+
color: var(--body-bg);
43+
background-color: var(--color);
4444
}
4545
:global(.btn-primary):focus,
4646
:global(.btn-outline-primary):focus {
@@ -57,59 +57,59 @@ ol.stops.collapseToTabber {
5757
}
5858

5959
ol.stops {
60+
display: flex;
6061
overflow: hidden;
62+
flex-direction: column;
63+
align-items: stretch;
6164
list-style: none;
6265
padding: 0;
6366
margin: 0;
64-
display: flex;
65-
flex-direction: column;
66-
align-items: stretch;
6767
}
6868

6969
.stop {
70+
position: relative;
7071
display: flex;
7172
align-items: flex-start;
7273
padding: 0.5rem 0;
73-
position: relative;
7474
color: var(--gray);
7575

76-
&:before {
76+
&::before {
77+
content: '';
7778
position: absolute;
7879
top: -0.5rem;
7980
left: 0.875rem;
81+
// opacity: 0.25;
82+
z-index: 10;
8083
width: 0.25rem;
8184
height: 100%;
82-
content: '';
83-
background: var(--color);
84-
margin-right: 0.5rem;
8585
margin-top: 0.25rem;
86-
// opacity: 0.25;
87-
z-index: 10;
86+
margin-right: 0.5rem;
87+
background: var(--color);
8888
}
8989

90-
&.isFirst:before {
91-
height: 50%;
90+
&.isFirst::before {
9291
top: 50%;
92+
height: 50%;
9393
}
9494

95-
&.isLast:before {
95+
&.isLast::before {
9696
height: 50%;
9797
}
9898

9999
.stopSymbol {
100+
position: relative;
101+
z-index: 20;
102+
display: flex;
103+
justify-content: center;
104+
align-items: center;
100105
width: 1rem;
101106
height: 1rem;
102107
margin: 0.375rem 0.5rem 0;
103108
margin-right: 1rem;
104-
border-radius: 999px;
105-
background: var(--color);
106109
border: 0.2rem solid var(--body-bg);
107-
display: flex;
108-
align-items: center;
109-
justify-content: center;
110+
border-radius: 999px;
110111
font-weight: 700;
111-
position: relative;
112-
z-index: 20;
112+
background: var(--color);
113113
transition: 0.1s ease;
114114
}
115115

@@ -131,14 +131,14 @@ ol.stops {
131131
}
132132

133133
.schedule {
134-
// border: 1px solid var(--gray-lighter);
135-
background: var(--gray-lightest);
136-
border-radius: 0.25rem;
137-
margin: 0.75rem 0;
134+
position: relative;
138135
// border-left: 0.25rem solid var(--color);
139136

140137
overflow: hidden;
141-
position: relative;
138+
margin: 0.75rem 0;
139+
border-radius: 0.25rem;
140+
// border: 1px solid var(--gray-lighter);
141+
background: var(--gray-lightest);
142142

143143
.scheduleHeader {
144144
display: flex;
@@ -147,9 +147,9 @@ ol.stops {
147147

148148
.scheduleTitle {
149149
flex: 1;
150+
margin: 0;
150151
font-weight: 700;
151152
font-size: 1rem;
152-
margin: 0;
153153
}
154154

155155
.scheduleChevron,
@@ -194,12 +194,12 @@ ol.stops {
194194
}
195195

196196
&.freq {
197-
flex: 1;
198-
text-align: right;
199197
// font-feature-settings: 'tnum';
200198
display: flex;
199+
flex: 1;
201200
justify-content: flex-end;
202201
align-items: baseline;
202+
text-align: right;
203203

204204
.freqMins {
205205
width: 1.25rem;

0 commit comments

Comments
 (0)