Skip to content

Commit 092d8d8

Browse files
bjorn2404bjorn2404
committed
Blue is the warmest color
1 parent ca48f2d commit 092d8d8

File tree

3 files changed

+100
-47
lines changed

3 files changed

+100
-47
lines changed

‎dist/assets/css/storelocator.css

Lines changed: 45 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@
4646
cursor: pointer;
4747
margin-top: 3px;
4848
padding: 6px 12px;
49-
background: #ae2118;
50-
border: 1px solid #961f17;
49+
border: none;
50+
background: #004479;
5151
font: bold 14px/18px Arial, Helvetica, sans-serif;
5252
color: white;
5353
white-space: nowrap;
@@ -88,7 +88,7 @@
8888
height: 530px;
8989
width: 875px; }
9090
.bh-sl-container .bh-sl-map-container a {
91-
color: #e76737;
91+
color: #005293;
9292
text-decoration: none; }
9393
.bh-sl-container .bh-sl-map-container a:hover, .bh-sl-container .bh-sl-map-container a:active {
9494
text-decoration: underline; }
@@ -122,7 +122,7 @@
122122
width: 10%;
123123
max-width: 25px;
124124
text-align: center;
125-
background: #451400;
125+
background: #00192d;
126126
color: white;
127127
font-weight: bold;
128128
border-radius: 16px; }
@@ -137,10 +137,10 @@
137137
font-style: italic;
138138
color: #8e8e8e; }
139139
.bh-sl-container .bh-sl-loc-list .list-focus {
140-
border: 1px solid rgba(150, 31, 23, 0.4);
141-
-moz-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
142-
-webkit-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
143-
box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
140+
border: 1px solid rgba(0, 82, 147, 0.4);
141+
-moz-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
142+
-webkit-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
143+
box-shadow: 0 0 8px rgba(0, 100, 180, 0.4);
144144
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; }
145145
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container {
146146
width: 100%;
@@ -150,8 +150,7 @@
150150
top: 0;
151151
right: 6px; }
152152
.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-title {
153-
font-weight: bold;
154-
color: #ae2118; }
153+
font-weight: bold; }
155154
.bh-sl-container .loc-name {
156155
/* Picked up by both list and infowindows */
157156
font-weight: bold;
@@ -172,7 +171,7 @@
172171
padding: 10px;
173172
cursor: pointer;
174173
font: bold 14px Arial, Helvetica, sans-serif;
175-
color: #ae2118; }
174+
color: #005293; }
176175
.bh-sl-container .bh-sl-pagination-container ol .bh-sl-current {
177176
color: #555555;
178177
cursor: auto;
@@ -181,8 +180,8 @@
181180
/* Modal window */
182181
.bh-sl-overlay {
183182
position: fixed;
184-
left: 0px;
185-
top: 0px;
183+
left: 0;
184+
top: 0;
186185
width: 100%;
187186
height: 100%;
188187
z-index: 10000;
@@ -194,25 +193,49 @@
194193
/* width divided by 2 */
195194
margin-top: 60px;
196195
width: 920px;
197-
height: 590px;
196+
height: 620px;
198197
z-index: 10010;
199198
background: white;
200199
border-radius: 10px;
201200
box-shadow: 0 0 10px #656565; }
201+
.bh-sl-overlay .bh-sl-modal-window .bh-sl-map-container {
202+
margin-top: 50px;
203+
/* increase map container margin */ }
202204
.bh-sl-overlay .bh-sl-modal-window .bh-sl-modal-content {
203205
float: left;
204206
padding: 0 22px;
205207
/* there's already a margin on the top of the map-container div */ }
206208
.bh-sl-overlay .bh-sl-modal-window .bh-sl-close-icon {
207-
top: -6px;
208-
right: -6px; }
209+
top: 13px;
210+
right: 22px; }
209211

210212
.bh-sl-close-icon {
211213
position: absolute;
212-
width: 18px;
213-
height: 18px;
214214
cursor: pointer;
215-
background: #2c2c2c url(../img/close-icon.png) 3px 3px no-repeat;
216-
border: 1px solid black;
217-
border-radius: 3px;
218-
box-shadow: 0 0 3px #656565; }
215+
height: 24px;
216+
width: 24px; }
217+
.bh-sl-close-icon:after, .bh-sl-close-icon:before {
218+
position: absolute;
219+
top: 3px;
220+
right: 3px;
221+
bottom: 0;
222+
left: 50%;
223+
background: #cccccc;
224+
content: '';
225+
display: block;
226+
height: 24px;
227+
margin: -3px 0 0 -1px;
228+
width: 3px;
229+
-webkit-transform: rotate(45deg);
230+
-moz-transform: rotate(45deg);
231+
-ms-transform: rotate(45deg);
232+
-o-transform: rotate(45deg);
233+
transform: rotate(45deg); }
234+
.bh-sl-close-icon:hover:after, .bh-sl-close-icon:hover:before {
235+
background: #b3b3b3; }
236+
.bh-sl-close-icon:before {
237+
-webkit-transform: rotate(-45deg);
238+
-moz-transform: rotate(-45deg);
239+
-ms-transform: rotate(-45deg);
240+
-o-transform: rotate(-45deg);
241+
transform: rotate(-45deg); }

‎dist/assets/css/storelocator.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/css/storelocator.scss

Lines changed: 54 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,8 @@ $shadow: #656565;
66
$textgray: #555;
77
$darkergray: #2c2c2c;
88
$black: #000;
9-
$orange: #e76737;
9+
$blue: #005293;
1010
$red: #ae2118;
11-
$darkred: #961f17;
12-
$maroon: #451400;
1311
$arialFont: Arial, Helvetica, sans-serif;
1412

1513
/* #page-header it just included for the examples */
@@ -74,8 +72,8 @@ $arialFont: Arial, Helvetica, sans-serif;
7472
cursor: pointer;
7573
margin-top: 3px;
7674
padding: 6px 12px;
77-
background: $red;
78-
border: 1px solid $darkred;
75+
border: none;
76+
background: darken( $blue, 5% );
7977
font: bold 14px/18px $arialFont;
8078
color: $white;
8179
white-space: nowrap;
@@ -131,7 +129,7 @@ $arialFont: Arial, Helvetica, sans-serif;
131129
width: 875px;
132130

133131
a {
134-
color: $orange;
132+
color: $blue;
135133
text-decoration: none;
136134
&:hover, &:active {
137135
text-decoration: underline;
@@ -173,7 +171,7 @@ $arialFont: Arial, Helvetica, sans-serif;
173171
width: 10%;
174172
max-width: 25px;
175173
text-align: center;
176-
background: $maroon;
174+
background: darken( $blue, 20% );
177175
color: $white;
178176
font-weight: bold;
179177
border-radius: 16px;
@@ -196,10 +194,10 @@ $arialFont: Arial, Helvetica, sans-serif;
196194
}
197195

198196
.list-focus {
199-
border: 1px solid rgba(150, 31, 23, 0.4);
200-
-moz-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
201-
-webkit-box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
202-
box-shadow: 0 0 8px rgba(150, 31, 23, 0.4);
197+
border: 1px solid rgba(0, 82, 147, 0.4);
198+
-moz-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
199+
-webkit-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
200+
box-shadow: 0 0 8px rgba(0, 100, 180, 0.4);
203201
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
204202
}
205203

@@ -216,7 +214,6 @@ $arialFont: Arial, Helvetica, sans-serif;
216214

217215
.bh-sl-noresults-title {
218216
font-weight: bold;
219-
color: $red;
220217
}
221218
}
222219

@@ -246,7 +243,7 @@ $arialFont: Arial, Helvetica, sans-serif;
246243
padding: 10px;
247244
cursor: pointer;
248245
font: bold 14px $arialFont;
249-
color: $red;
246+
color: $blue;
250247
}
251248

252249
.bh-sl-current {
@@ -261,8 +258,8 @@ $arialFont: Arial, Helvetica, sans-serif;
261258
/* Modal window */
262259
.bh-sl-overlay {
263260
position: fixed;
264-
left: 0px;
265-
top: 0px;
261+
left: 0;
262+
top: 0;
266263
width: 100%;
267264
height: 100%;
268265
z-index: 10000;
@@ -274,31 +271,64 @@ $arialFont: Arial, Helvetica, sans-serif;
274271
margin-left: -460px; /* width divided by 2 */
275272
margin-top: 60px;
276273
width: 920px;
277-
height: 590px;
274+
height: 620px;
278275
z-index: 10010;
279276
background: $white;
280277
border-radius: 10px;
281278
box-shadow: 0 0 10px #656565;
282279

280+
.bh-sl-map-container {
281+
margin-top: 50px; /* increase map container margin */
282+
}
283+
283284
.bh-sl-modal-content {
284285
float: left;
285286
padding: 0 22px; /* there's already a margin on the top of the map-container div */
286287
}
287288

288289
.bh-sl-close-icon {
289-
top: -6px;
290-
right: -6px;
290+
top: 13px;
291+
right: 22px;
291292
}
292293
}
293294
}
294295

295296
.bh-sl-close-icon {
296297
position: absolute;
297-
width: 18px;
298-
height: 18px;
299298
cursor: pointer;
300-
background: $darkergray url(../img/close-icon.png) 3px 3px no-repeat;
301-
border: 1px solid $black;
302-
border-radius: 3px;
303-
box-shadow: 0 0 3px $shadow;
299+
height: 24px;
300+
width: 24px;
301+
302+
&:after,
303+
&:before {
304+
position: absolute;
305+
top: 3px;
306+
right: 3px;
307+
bottom: 0;
308+
left: 50%;
309+
background: $gray;
310+
content: '';
311+
display: block;
312+
height: 24px;
313+
margin: -3px 0 0 -1px;
314+
width: 3px;
315+
-webkit-transform: rotate(45deg);
316+
-moz-transform: rotate(45deg);
317+
-ms-transform: rotate(45deg);
318+
-o-transform: rotate(45deg);
319+
transform: rotate(45deg);
320+
}
321+
322+
&:hover:after,
323+
&:hover:before {
324+
background: darken($gray, 10%);
325+
}
326+
327+
&:before {
328+
-webkit-transform: rotate(-45deg);
329+
-moz-transform: rotate(-45deg);
330+
-ms-transform: rotate(-45deg);
331+
-o-transform: rotate(-45deg);
332+
transform: rotate(-45deg);
333+
}
304334
}

0 commit comments

Comments
 (0)