Skip to content

Commit b41d107

Browse files
bjorn2404bjorn2404
committed
Reworked styling so that all HTML example files are responsive by default
1 parent 6ff3601 commit b41d107

23 files changed

+280
-197
lines changed

‎dist/assets/css/storelocator.css

+124-93
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,41 @@
11
/* #page-header it just included for the examples */
22
#page-header {
3+
display: block;
34
float: left;
4-
display: block; }
5+
max-width: 800px; }
56
#page-header .bh-sl-title {
6-
color: #797874; }
7+
color: #797874;
8+
font: normal 20px/1.4 Arial, Helvetica, sans-serif; }
9+
@media (min-width: 1024px) {
10+
#page-header .bh-sl-title {
11+
font-size: 30px; } }
712

813
/* Infowindow Roboto font override */
914
.gm-style div, .gm-style span, .gm-style label, .gm-style a {
1015
font-family: Arial, Helvetica, sans-serif; }
1116

1217
.bh-sl-error {
1318
clear: both;
19+
color: #ae2118;
1420
float: left;
15-
width: 100%;
21+
font-weight: bold;
1622
padding: 10px 0;
17-
color: #ae2118;
18-
font-weight: bold; }
23+
width: 100%; }
1924

2025
/* Avoid image issues with Google Maps and CSS resets */
2126
.bh-sl-map-container img {
22-
max-height: none !important;
23-
max-width: none !important;
2427
border-radius: 0 !important;
25-
box-shadow: none !important; }
28+
box-shadow: none !important;
29+
max-height: none !important;
30+
max-width: none !important; }
2631

2732
.bh-sl-container {
28-
float: left;
29-
margin-left: 20px;
30-
width: 875px;
31-
font: normal 14px/20px Arial, Helvetica, sans-serif;
33+
box-sizing: border-box;
3234
color: #555555;
35+
float: left;
36+
font: normal 14px/1.4 Arial, Helvetica, sans-serif;
37+
padding: 0 15px;
38+
width: 100%;
3339
/* Avoid issues with Google Maps and CSS frameworks */ }
3440
.bh-sl-container > * {
3541
box-sizing: content-box !important; }
@@ -40,74 +46,96 @@
4046
width: 100%; }
4147
.bh-sl-container .form-input {
4248
float: left;
43-
margin-top: 3px; }
49+
margin-top: 3px;
50+
width: 100%; }
51+
@media (min-width: 768px) {
52+
.bh-sl-container .form-input {
53+
width: auto; } }
4454
.bh-sl-container .form-input label {
45-
font-weight: bold; }
55+
display: block;
56+
font-weight: bold;
57+
width: 100%; }
58+
@media (min-width: 768px) {
59+
.bh-sl-container .form-input label {
60+
display: inline-block;
61+
width: auto; } }
4662
.bh-sl-container .form-input input, .bh-sl-container .form-input select {
47-
margin: 0 15px 0 10px;
48-
padding: 6px 12px;
49-
line-height: 16px;
63+
box-sizing: border-box;
5064
border: 1px solid #cccccc;
65+
border-radius: 4px;
5166
font: normal 14px/18px Arial, Helvetica, sans-serif;
52-
-webkit-border-radius: 4px;
53-
border-radius: 4px; }
67+
line-height: 16px;
68+
margin: 15px 0;
69+
padding: 6px 12px;
70+
width: 100%;
71+
-webkit-border-radius: 4px; }
72+
@media (min-width: 768px) {
73+
.bh-sl-container .form-input input, .bh-sl-container .form-input select {
74+
width: auto;
75+
margin: 0 15px 0 10px; } }
5476
.bh-sl-container button {
55-
float: left;
77+
background: #004479;
78+
border: none;
79+
border-radius: 4px;
80+
color: white;
5681
cursor: pointer;
82+
float: left;
83+
font: bold 14px/18px Arial, Helvetica, sans-serif;
5784
margin-top: 3px;
5885
padding: 6px 12px;
59-
border: none;
60-
background: #004479;
61-
font: bold 14px/18px Arial, Helvetica, sans-serif;
62-
color: white;
6386
white-space: nowrap;
64-
-webkit-border-radius: 4px;
65-
border-radius: 4px; }
87+
-webkit-border-radius: 4px; }
6688
.bh-sl-container .bh-sl-loading {
89+
background: url(../img/ajax-loader.gif) no-repeat;
6790
float: left;
6891
margin: 4px 0 0 10px;
69-
width: 16px;
7092
height: 16px;
71-
background: url(../img/ajax-loader.gif) no-repeat; }
93+
width: 16px; }
7294
.bh-sl-container .bh-sl-filters-container {
7395
clear: both;
7496
float: left;
75-
width: 100%;
76-
margin: 15px 0; }
97+
margin: 15px 0;
98+
width: 100%; }
7799
.bh-sl-container .bh-sl-filters-container .bh-sl-filters {
78-
list-style: none;
79100
float: left;
80-
padding: 0;
81-
margin: 0 100px 0 0; }
101+
list-style: none;
102+
margin: 0 100px 0 0;
103+
padding: 0; }
82104
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li {
83-
display: block;
84105
clear: left;
106+
display: block;
85107
float: left;
86-
width: 100%;
87-
margin: 5px 0; }
108+
margin: 5px 0;
109+
width: 100%; }
88110
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li label {
89-
display: inline; }
111+
display: inline;
112+
vertical-align: text-bottom; }
90113
.bh-sl-container .bh-sl-filters-container .bh-sl-filters li input {
91114
display: block;
92115
float: left;
93-
margin: 2px 8px 2px 0; }
116+
margin-right: 8px; }
94117
.bh-sl-container .bh-sl-map-container {
95118
clear: left;
96119
float: left;
97120
margin-top: 27px;
98-
height: 530px;
99-
width: 875px; }
121+
width: 100%; }
122+
@media (min-width: 1024px) {
123+
.bh-sl-container .bh-sl-map-container {
124+
margin-bottom: 60px; } }
100125
.bh-sl-container .bh-sl-map-container a {
101126
color: #005293;
102127
text-decoration: none; }
103-
.bh-sl-container .bh-sl-map-container a:hover, .bh-sl-container .bh-sl-map-container a:active {
128+
.bh-sl-container .bh-sl-map-container a:focus, .bh-sl-container .bh-sl-map-container a:hover, .bh-sl-container .bh-sl-map-container a:active {
104129
text-decoration: underline; }
105130
.bh-sl-container .bh-sl-loc-list {
106131
float: left;
107-
width: 30%;
132+
font-size: 13px;
108133
height: 530px;
109134
overflow-x: auto;
110-
font-size: 13px; }
135+
width: 100%; }
136+
@media (min-width: 1024px) {
137+
.bh-sl-container .bh-sl-loc-list {
138+
width: 30%; } }
111139
.bh-sl-container .bh-sl-loc-list ul {
112140
display: block;
113141
clear: left;
@@ -117,127 +145,130 @@
117145
margin: 0;
118146
padding: 0; }
119147
.bh-sl-container .bh-sl-loc-list ul li {
120-
display: block;
148+
border: 1px solid white;
149+
/* Adding this to prevent moving li elements when adding the list-focus class*/
150+
box-sizing: border-box;
121151
clear: left;
122-
float: left;
123-
margin: 3% 4%;
124152
cursor: pointer;
125-
width: 92%;
126-
border: 1px solid white;
127-
/* Adding this to prevent moving li elements when adding the list-focus class*/ }
153+
display: block;
154+
float: left;
155+
width: 100%; }
128156
.bh-sl-container .bh-sl-loc-list .list-label {
129-
float: left;
130-
margin: 10px 0 0 6px;
131-
padding: 4px;
132-
width: 10%;
133-
max-width: 21px;
134-
text-align: center;
135157
background: #00192d;
158+
border-radius: 15px;
136159
color: white;
160+
float: left;
137161
font-weight: bold;
138-
border-radius: 15px; }
162+
margin: 10px 0 0 15px;
163+
padding: 4px 7px;
164+
text-align: center;
165+
width: 13px; }
139166
.bh-sl-container .bh-sl-loc-list .list-details {
140167
float: left;
141168
margin-left: 6px;
142169
width: 80%; }
143170
.bh-sl-container .bh-sl-loc-list .list-details .list-content {
144171
padding: 10px; }
145172
.bh-sl-container .bh-sl-loc-list .list-details .loc-dist {
173+
color: #8e8e8e;
146174
font-weight: bold;
147-
font-style: italic;
148-
color: #8e8e8e; }
175+
font-style: italic; }
149176
.bh-sl-container .bh-sl-loc-list .list-focus {
150177
border: 1px solid rgba(0, 82, 147, 0.4);
151-
-moz-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
152-
-webkit-box-shadow: 0 0 8px rgba(0, 82, 147, 0.4);
153-
box-shadow: 0 0 8px rgba(0, 100, 180, 0.4);
154178
transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; }
155179
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container {
156-
width: 100%;
157180
height: 20px;
158181
position: relative;
182+
width: 100%;
159183
/* Avoid issues with table-layout */ }
160184
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container table {
161185
table-layout: auto; }
162186
.bh-sl-container .bh-sl-loc-list .bh-sl-close-directions-container .bh-sl-close-icon {
163-
top: 0;
164-
right: 6px; }
187+
right: 6px;
188+
top: 0; }
165189
.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-title {
166-
font-weight: bold; }
190+
font-weight: bold;
191+
margin: 15px; }
192+
.bh-sl-container .bh-sl-loc-list .bh-sl-noresults-desc {
193+
margin: 0 15px; }
167194
.bh-sl-container .loc-name {
168195
/* Picked up by both list and infowindows */
169-
font-weight: bold;
170-
font-size: 15px; }
196+
font-size: 15px;
197+
font-weight: bold; }
171198
.bh-sl-container .bh-sl-map {
172199
float: left;
173-
width: 70%;
174-
height: 530px; }
200+
height: 530px;
201+
width: 100%; }
202+
@media (min-width: 1024px) {
203+
.bh-sl-container .bh-sl-map {
204+
width: 70%; } }
175205
.bh-sl-container .bh-sl-pagination-container {
176206
clear: both; }
177207
.bh-sl-container .bh-sl-pagination-container ol {
178208
list-style-type: none;
179-
text-align: center;
180209
margin: 0;
181-
padding: 10px 0; }
210+
padding: 10px 0;
211+
text-align: center; }
182212
.bh-sl-container .bh-sl-pagination-container ol li {
183-
display: inline-block;
184-
padding: 10px;
213+
color: #005293;
185214
cursor: pointer;
215+
display: inline-block;
186216
font: bold 14px Arial, Helvetica, sans-serif;
187-
color: #005293; }
217+
padding: 10px; }
188218
.bh-sl-container .bh-sl-pagination-container ol .bh-sl-current {
189219
color: #555555;
190220
cursor: auto;
191221
text-decoration: none; }
192222

193223
/* Modal window */
194224
.bh-sl-overlay {
195-
position: fixed;
225+
background: url(../img/overlay-bg.png) repeat;
226+
height: 100%;
196227
left: 0;
228+
position: fixed;
197229
top: 0;
198230
width: 100%;
199-
height: 100%;
200-
z-index: 10000;
201-
background: url(../img/overlay-bg.png) repeat; }
231+
z-index: 10000; }
202232
.bh-sl-overlay .bh-sl-modal-window {
233+
background: white;
234+
border-radius: 10px;
235+
box-shadow: 0 0 10px #656565;
203236
position: absolute;
204237
left: 50%;
205238
margin-left: -460px;
206239
/* width divided by 2 */
207240
margin-top: 60px;
208-
width: 920px;
209241
height: 620px;
210-
z-index: 10010;
211-
background: white;
212-
border-radius: 10px;
213-
box-shadow: 0 0 10px #656565; }
242+
width: 920px;
243+
z-index: 10010; }
214244
.bh-sl-overlay .bh-sl-modal-window .bh-sl-map-container {
215245
margin-top: 50px;
216246
/* increase map container margin */ }
217247
.bh-sl-overlay .bh-sl-modal-window .bh-sl-modal-content {
218248
float: left;
219-
padding: 0 22px;
220-
/* there's already a margin on the top of the map-container div */ }
249+
padding: 0 1%;
250+
/* there's already a margin on the top of the map-container div */
251+
width: 98%; }
221252
.bh-sl-overlay .bh-sl-modal-window .bh-sl-close-icon {
222-
top: 13px;
223-
right: 22px; }
253+
right: 22px;
254+
top: 13px; }
224255

225256
.bh-sl-close-icon {
226-
position: absolute;
227257
cursor: pointer;
228258
height: 24px;
259+
position: absolute;
229260
width: 24px; }
230261
.bh-sl-close-icon:after, .bh-sl-close-icon:before {
231-
position: absolute;
232-
top: 3px;
233-
right: 3px;
234-
bottom: 0;
235-
left: 50%;
236262
background: #cccccc;
237263
content: '';
238264
display: block;
239265
height: 24px;
240266
margin: -3px 0 0 -1px;
267+
position: absolute;
268+
bottom: 0;
269+
left: 50%;
270+
right: 3px;
271+
top: 3px;
241272
width: 3px;
242273
-webkit-transform: rotate(45deg);
243274
-moz-transform: rotate(45deg);

0 commit comments

Comments
 (0)