@qld-gov-au/qgds-bootstrap5 1.0.2 → 1.0.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.storybook/preview.js +2 -1
- package/dist/assets/css/qld.bootstrap.css +1 -1
- package/dist/assets/css/qld.bootstrap.css.map +2 -2
- package/dist/assets/js/handlebars.helpers.bundle.js +1 -22
- package/dist/assets/js/handlebars.helpers.bundle.js.map +4 -4
- package/dist/assets/js/handlebars.helpers.js +15 -1
- package/dist/assets/js/qld.bootstrap.min.js +16 -1
- package/dist/assets/js/qld.bootstrap.min.js.map +4 -4
- package/dist/components/bs5/dateinput/dateinput.hbs +12 -12
- package/dist/components/bs5/header/header.hbs +131 -33
- package/dist/components/bs5/navbar/navbar.hbs +65 -3
- package/dist/components/bs5/select/select.hbs +3 -3
- package/dist/components/bs5/tag/tag.hbs +2 -2
- package/dist/components/bs5/textarea/textarea.hbs +8 -8
- package/dist/components/bs5/textbox/textbox.hbs +7 -6
- package/dist/components/handlebars.helpers.js +15 -1
- package/dist/components/{handlebars.helpers.bundle.js → handlebars.init.bundle.js} +8 -8
- package/dist/components/{handlebars.helpers.bundle.js.map → handlebars.init.bundle.js.map} +3 -3
- package/dist/sample-data/dateinput/dateinput.data.json +1 -0
- package/dist/sample-data/header/header.data.json +245 -31
- package/dist/sample-data/select/select.data.json +1 -0
- package/dist/sample-data/textarea/textarea.data.json +1 -0
- package/dist/sample-data/textbox/textbox.data.json +1 -0
- package/esbuild.js +2 -2
- package/package.json +24 -20
- package/src/components/bs5/dateinput/Dateinput.stories.js +2 -32
- package/src/components/bs5/dateinput/dateinput.data.json +1 -0
- package/src/components/bs5/dateinput/dateinput.hbs +12 -12
- package/src/components/bs5/header/_colours.scss +31 -15
- package/src/components/bs5/header/_icons.scss +1 -1
- package/src/components/bs5/header/_search.json +45 -0
- package/src/components/bs5/header/header.data.json +245 -31
- package/src/components/bs5/header/header.functions.js +143 -8
- package/src/components/bs5/header/header.hbs +131 -33
- package/src/components/bs5/header/header.scss +178 -35
- package/src/components/bs5/navbar/_colours.scss +19 -19
- package/src/components/bs5/navbar/navbar.functions.js +59 -52
- package/src/components/bs5/navbar/navbar.hbs +65 -3
- package/src/components/bs5/navbar/navbar.scss +73 -27
- package/src/components/bs5/select/Select.stories.js +4 -4
- package/src/components/bs5/select/select.data.json +1 -0
- package/src/components/bs5/select/select.hbs +3 -3
- package/src/components/bs5/tag/tag.hbs +2 -2
- package/src/components/bs5/textarea/Textarea.stories.js +2 -32
- package/src/components/bs5/textarea/textarea.data.json +1 -0
- package/src/components/bs5/textarea/textarea.hbs +8 -8
- package/src/components/bs5/textbox/Textbox.stories.js +2 -15
- package/src/components/bs5/textbox/textInput.scss +10 -2
- package/src/components/bs5/textbox/textbox.data.json +1 -0
- package/src/components/bs5/textbox/textbox.hbs +7 -6
- package/src/js/handlebars.helpers.js +15 -1
- package/src/main.js +26 -2
- package/src/stories/templates/ContentPage/ContentPage.mdx +0 -40
- package/src/stories/templates/ContentPage/ContentPage.stories.js +0 -36
- package/src/stories/templates/LandingPage/LandingPage.mdx +0 -20
- package/src/stories/templates/LandingPage/LandingPage.stories.js +0 -25
|
@@ -175,44 +175,141 @@
|
|
|
175
175
|
</svg>
|
|
176
176
|
</a>
|
|
177
177
|
<div class="qld__header__cta-wrapper">
|
|
178
|
-
{{#if sitePreHeader.
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
178
|
+
{{#if sitePreHeader.CTA}}
|
|
179
|
+
{{#each sitePreHeader.CTA}}
|
|
180
|
+
<div {{#if dropdown_enabled}}class="dropdown dropdownCTA"{{/if}}>
|
|
181
|
+
<a
|
|
182
|
+
{{#if dropdown_enabled}}
|
|
183
|
+
id="dropdown{{id}}"
|
|
184
|
+
role="button"
|
|
185
|
+
data-bs-toggle="dropdown"
|
|
186
|
+
aria-expanded="false"
|
|
187
|
+
class="qld__header__cta-link"
|
|
188
|
+
{{else}}
|
|
189
|
+
href="{{url.value}}"
|
|
190
|
+
class="qld__header__cta-link"
|
|
191
|
+
{{/if}}>
|
|
192
|
+
{{#if icon.value}}
|
|
193
|
+
<span class="qld__header__cta-link-icon">
|
|
194
|
+
<i class="{{icon-root}}#{{icon.value}}"></i>
|
|
195
|
+
</span>
|
|
196
|
+
{{/if}}
|
|
197
|
+
<span class="qld__header__cta-link-text">{{text.value}}</span>
|
|
198
|
+
</a>
|
|
199
|
+
|
|
200
|
+
{{#if dropdown_enabled}}
|
|
201
|
+
<ul class="dropdown-menu dark" aria-labelledby="dropdown{{id}}">
|
|
202
|
+
|
|
203
|
+
{{#isType dropdown_options.dropdown_type "list"}}
|
|
204
|
+
{{#if dropdown_options.dropdown_config}}
|
|
205
|
+
{{#each dropdown_options.dropdown_config.groups}}
|
|
206
|
+
<li class="qld__header__cta-list">
|
|
207
|
+
<a href="{{url}}"
|
|
208
|
+
{{#if action}}
|
|
209
|
+
target="{{action}}"
|
|
210
|
+
{{/if}}>
|
|
211
|
+
{{label}}
|
|
212
|
+
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="cta_arrow">
|
|
213
|
+
<path d="M18.8592 12.6135L13.6659 17.6633C13.5721 17.7781 13.4156 17.8068 13.2905 17.8068C13.1654 17.8068 13.0402 17.7781 12.9464 17.692C12.7274 17.5199 12.7274 17.233 12.9151 17.0608L17.295 12.757H5.50056C5.21899 12.757 5 12.5562 5 12.3266C5 12.0971 5.21899 11.8389 5.50056 11.8389H17.295L12.9151 7.56375C12.7274 7.3916 12.7274 7.10468 12.9464 6.93253C13.1654 6.76038 13.4782 6.76038 13.6659 6.96122L18.8592 12.011C19.0469 12.1832 19.0469 12.4414 18.8592 12.6135Z" fill="#FFE500"/>
|
|
214
|
+
</svg>
|
|
215
|
+
</a>
|
|
216
|
+
</li>
|
|
217
|
+
{{/each}}
|
|
218
|
+
{{#if dropdown_options.dropdown_config.view_more}}
|
|
219
|
+
<li class="qld__header__cta-list">
|
|
220
|
+
<a href="{{dropdown_options.dropdown_config.view_more_options.url}}" href="{{dropdown_options.dropdown_config.view_more_options.target}}" class="border-bottom-0">{{dropdown_options.dropdown_config.view_more_options.label}}
|
|
221
|
+
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="viewMoreCTA">
|
|
222
|
+
<path d="M8.84375 4.65625C8.65625 4.46875 8.3125 4.46875 8.125 4.65625C7.9375 4.84375 7.9375 5.1875 8.125 5.375L10.2813 7.5H4.5C4.21875 7.5 4 7.75 4 8C4 8.28125 4.21875 8.5 4.5 8.5L10.2813 8.5L8.125 10.6562C7.9375 10.8437 7.9375 11.1875 8.125 11.375C8.3125 11.5625 8.65625 11.5625 8.84375 11.375L11.8438 8.375C11.9375 8.28125 12 8.15625 12 8C12 7.875 11.9375 7.75 11.8438 7.65625L8.84375 4.65625ZM8 0C3.5625 0 0 3.59375 0 8C0 12.4375 3.5625 16 8 16C12.4063 16 16 12.4375 16 8C16 3.59375 12.4062 0 8 0ZM8 15C4.125 15 1 11.875 1 8C1 4.15625 4.125 1 8 1C11.8438 1 15 4.15625 15 8C15 11.875 11.8438 15 8 15Z" fill="#FFE500" />
|
|
223
|
+
</svg>
|
|
224
|
+
</a>
|
|
225
|
+
</li>
|
|
226
|
+
{{/if}}
|
|
227
|
+
{{/if}}
|
|
228
|
+
{{/isType}}
|
|
229
|
+
|
|
230
|
+
{{#isType dropdown_options.dropdown_type "form"}}
|
|
231
|
+
{{#if dropdown_options.dropdown_config.groups}}
|
|
232
|
+
{{#each dropdown_options.dropdown_config.groups}}
|
|
233
|
+
|
|
234
|
+
{{#if heading}}<h4 class="mt-2">{{heading}}</h4>{{/if}}
|
|
235
|
+
{{#if content}}<p>{{content}}</p>{{/if}}
|
|
236
|
+
|
|
237
|
+
{{#isType actionType "button"}}
|
|
238
|
+
<a class="btn btn-primary" href="{{action.button_action}}"
|
|
239
|
+
{{#if action.button_targetAttr }}
|
|
240
|
+
target="{{action.button_targetAttr}}"
|
|
241
|
+
{{/if}}>
|
|
242
|
+
<span class="btn-icon fa-solid fa-arrow-up-right-from-square"></span>
|
|
243
|
+
{{action.button_label}}
|
|
244
|
+
</a>
|
|
245
|
+
{{/isType}}
|
|
246
|
+
|
|
247
|
+
{{#each links}}
|
|
248
|
+
<div class="group">
|
|
249
|
+
<a class="mt-4 qld__header__cta-group-list" href="{{url}}"
|
|
250
|
+
{{#if action}}
|
|
251
|
+
target="{{action}}"
|
|
252
|
+
{{/if}}>
|
|
253
|
+
{{label}}
|
|
254
|
+
</a>
|
|
255
|
+
</div>
|
|
256
|
+
<hr>
|
|
257
|
+
{{/each}}
|
|
258
|
+
|
|
259
|
+
{{#isType actionType "list"}}
|
|
260
|
+
{{#each list_items}}
|
|
261
|
+
<ul>
|
|
262
|
+
<li class="qld__header__cta-group-list group">
|
|
263
|
+
<a href="{{url}}"
|
|
264
|
+
{{#if action }}
|
|
265
|
+
target="{{action}}"
|
|
266
|
+
{{/if}}>
|
|
267
|
+
{{label}}
|
|
268
|
+
</a>
|
|
269
|
+
</li>
|
|
270
|
+
</ul>
|
|
271
|
+
<hr>
|
|
272
|
+
{{/each}}
|
|
273
|
+
{{/isType}}
|
|
274
|
+
|
|
275
|
+
{{#isType actionType "select"}}
|
|
276
|
+
<select class="qld-text-input form-select qld-select" aria-label="" required=""
|
|
277
|
+
aria-required="">
|
|
278
|
+
<option selected="">Please select</option>
|
|
279
|
+
{{#each options}}
|
|
280
|
+
<option value="{{value}}">{{value}}</option>
|
|
281
|
+
{{/each}}
|
|
282
|
+
</select>
|
|
283
|
+
{{/isType}}
|
|
284
|
+
|
|
285
|
+
{{/each}}
|
|
286
|
+
{{/if}}
|
|
287
|
+
{{/isType}}
|
|
288
|
+
|
|
289
|
+
</ul>
|
|
290
|
+
{{/if}}
|
|
291
|
+
</div>
|
|
292
|
+
{{/each}}
|
|
197
293
|
{{/if}}
|
|
198
294
|
</div>
|
|
199
295
|
<div class="qld__header__main-nav-controls">
|
|
200
296
|
{{#if siteSearchAsset.value}}
|
|
201
297
|
<button aria-controls="qld-header-search"
|
|
202
|
-
class="qld__header__toggle-main-nav qld__main-nav__toggle-search"
|
|
203
|
-
aria-
|
|
204
|
-
|
|
205
|
-
<use href="{{icon-root}}#{{siteSearchAsset.icons.search-icon}}"></use>
|
|
206
|
-
|
|
298
|
+
class="qld__header__toggle-main-nav qld__main-nav__toggle-search" aria-expanded="false">
|
|
299
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
|
|
300
|
+
class="qld__icon qld__icon--lg">
|
|
301
|
+
<use href="{{icon-root}}#{{siteSearchAsset.options.icons.search-icon}}"></use>
|
|
302
|
+
</svg>
|
|
207
303
|
<span class="qld__main-nav__toggle-text">Search</span>
|
|
208
304
|
</button>
|
|
209
305
|
{{/if}}
|
|
210
306
|
<button aria-controls="main-nav" class="qld__header__toggle-main-nav qld__main-nav__toggle--open"
|
|
211
307
|
data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
|
|
212
308
|
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
309
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg"
|
|
310
|
+
class="qld__icon qld__icon--lg">
|
|
311
|
+
<use href="{{icon-root}}#{{siteSearchAsset.options.icons.menu-icon}}"></use>
|
|
312
|
+
</svg>
|
|
216
313
|
<span class="qld__main-nav__toggle-text">Menu</span>
|
|
217
314
|
</button>
|
|
218
315
|
</div>
|
|
@@ -227,7 +324,7 @@
|
|
|
227
324
|
<div class="qld__header__brand-image">
|
|
228
325
|
{{#if siteHeader.logo.value}}
|
|
229
326
|
<img src="{{siteHeader.logo.value}}" width="329.57" height="56">
|
|
230
|
-
|
|
327
|
+
<title>Queensland Government</title>
|
|
231
328
|
</img>
|
|
232
329
|
{{else}}
|
|
233
330
|
<svg width="330" height="56" viewBox="0 0 330 56" fill="none"
|
|
@@ -401,7 +498,6 @@
|
|
|
401
498
|
</a>
|
|
402
499
|
</div>
|
|
403
500
|
{{/if}}
|
|
404
|
-
|
|
405
501
|
{{#if siteHeader.config.otherbrand_enabled}}
|
|
406
502
|
<div class="qld__header__brand">
|
|
407
503
|
<a href="{{siteHeader.url.value}}">
|
|
@@ -606,12 +702,14 @@
|
|
|
606
702
|
</a>
|
|
607
703
|
</div>
|
|
608
704
|
{{/if}}
|
|
609
|
-
|
|
610
705
|
{{#if siteSearchAsset.value}}
|
|
611
706
|
<div id="qld-header-search" class="qld__header__site-search qld__header__site-search--closed">
|
|
612
|
-
<form id="site-search">
|
|
613
|
-
<input type="text" class="form-control
|
|
614
|
-
|
|
707
|
+
<form id="site-search" {{#if siteSearchAsset.formAction.url}}action="{{siteSearchAsset.formAction.url}}"{{/if}}>
|
|
708
|
+
<input type="text" class="form-control{{#if siteSearchAsset.options.borderStyle.full}} border-full{{/if}}"
|
|
709
|
+
placeholder="{{#if siteSearchAsset.placeholder}}{{siteSearchAsset.placeholder}}{{else}}Search this site{{/if}}"
|
|
710
|
+
id="search-input">
|
|
711
|
+
<ul id="suggestions" class="suggestions-dropdown suggestions-dropdown__group"></ul>
|
|
712
|
+
<input type="submit" class="btn btn-primary" value="{{#if siteSearchAsset.label}}{{siteSearchAsset.label}}{{else}}Search{{/if}}">
|
|
615
713
|
</form>
|
|
616
714
|
</div>
|
|
617
715
|
{{/if}}
|
|
@@ -37,7 +37,6 @@
|
|
|
37
37
|
color: var(--#{$prefix}header_skip-link_color);
|
|
38
38
|
|
|
39
39
|
&:focus {
|
|
40
|
-
outline: 3px solid var(--#{$prefix}header_skip-link_focus_outline_color);
|
|
41
40
|
top: 1rem;
|
|
42
41
|
left: 1rem;
|
|
43
42
|
padding: 1.5rem;
|
|
@@ -49,6 +48,7 @@
|
|
|
49
48
|
width: auto;
|
|
50
49
|
color: var(--#{$prefix}header_skip-link_focus_text_color);
|
|
51
50
|
background-color: var(--#{$prefix}header_skip-link_focus_bg_color);
|
|
51
|
+
outline: 3px solid var(--#{$prefix}header_skip-link_focus_outline_color);
|
|
52
52
|
z-index: 600;
|
|
53
53
|
}
|
|
54
54
|
}
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
background-color: var(--#{$prefix}header__pre-header_bg_color);
|
|
60
60
|
box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
|
|
61
61
|
position: relative;
|
|
62
|
-
z-index:
|
|
62
|
+
z-index: 2;
|
|
63
63
|
padding-bottom: .75rem;
|
|
64
64
|
padding-top: .75rem;
|
|
65
65
|
|
|
@@ -87,7 +87,7 @@
|
|
|
87
87
|
text-underline-offset: var(--#{$prefix}header__pre-header__anchor_text_decoration_offset);
|
|
88
88
|
-webkit-text-decoration-skip: ink;
|
|
89
89
|
text-decoration-skip-ink: auto;
|
|
90
|
-
|
|
90
|
+
|
|
91
91
|
&:focus,
|
|
92
92
|
&:hover {
|
|
93
93
|
text-decoration: underline;
|
|
@@ -95,7 +95,7 @@
|
|
|
95
95
|
text-decoration-color: var(--#{$prefix}header__pre-header__anchor__focus_text_decoration_color);
|
|
96
96
|
text-decoration-thickness: var(--#{$prefix}header__pre-header__anchor__focus_text_decoration_thickness);
|
|
97
97
|
}
|
|
98
|
-
|
|
98
|
+
|
|
99
99
|
&:disabled,
|
|
100
100
|
a[disabled] {
|
|
101
101
|
text-decoration: none;
|
|
@@ -137,16 +137,81 @@
|
|
|
137
137
|
display: none;
|
|
138
138
|
margin-left: auto;
|
|
139
139
|
|
|
140
|
+
// Preheader CTA dropdown - custom functionality:
|
|
141
|
+
.dropdown {
|
|
142
|
+
.dropdown-menu.show {
|
|
143
|
+
width: 20.25rem;
|
|
144
|
+
min-height: 1rem;
|
|
145
|
+
padding: 1.5rem;
|
|
146
|
+
border-radius: 1rem;
|
|
147
|
+
background-color: var(--#{$prefix}header__cta-wrapper__cta-link_dropdown_bg_color);
|
|
148
|
+
box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
|
|
149
|
+
|
|
150
|
+
hr {
|
|
151
|
+
margin: 2rem 0;
|
|
152
|
+
color: var(--#{$prefix}header__CTA_border_color);
|
|
153
|
+
border-bottom: solid 1px var(--#{$prefix}header__CTA_border_color);
|
|
154
|
+
}
|
|
155
|
+
|
|
156
|
+
a.btn-primary {
|
|
157
|
+
margin: 1.25rem 0 0.5rem 0;
|
|
158
|
+
text-decoration-color: inherit;
|
|
159
|
+
text-decoration-thickness: inherit;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.group {
|
|
163
|
+
a {
|
|
164
|
+
font-weight: 600;
|
|
165
|
+
color: var(--#{$prefix}header__CTA_text_color);
|
|
166
|
+
text-decoration: underline var(--#{$prefix}header__CTA_text_color);
|
|
167
|
+
|
|
168
|
+
&:visited {
|
|
169
|
+
color: var(--#{$prefix}header__CTA_text_color);
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
li.qld__header__cta-list {
|
|
175
|
+
a {
|
|
176
|
+
font-weight: 600;
|
|
177
|
+
font-size: 1rem;
|
|
178
|
+
position: relative;
|
|
179
|
+
border-bottom: solid 1px var(--#{$prefix}header__CTA_border_color);
|
|
180
|
+
padding: 1rem 0;
|
|
181
|
+
|
|
182
|
+
&:visited {
|
|
183
|
+
color: var(--#{$prefix}header__CTA_text_color);
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
span,
|
|
187
|
+
svg {
|
|
188
|
+
vertical-align: middle;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
svg.viewMoreCTA {
|
|
192
|
+
margin-left: 0.5rem;
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
svg.cta_arrow {
|
|
196
|
+
position: absolute;
|
|
197
|
+
top: .75rem;
|
|
198
|
+
right: 0;
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
}
|
|
204
|
+
|
|
140
205
|
@include media-breakpoint-up(lg) {
|
|
141
206
|
display: flex;
|
|
142
207
|
}
|
|
143
208
|
|
|
144
209
|
.qld__header__cta-link {
|
|
145
|
-
align-items: center;
|
|
146
|
-
color: var(--#{$prefix}header__cta-wrapper__cta-link_text_color);
|
|
147
210
|
font-size: .875rem;
|
|
148
211
|
line-height: 1.42;
|
|
149
212
|
padding-left: .75rem;
|
|
213
|
+
align-items: center;
|
|
214
|
+
color: var(--#{$prefix}header__cta-wrapper__cta-link_text_color);
|
|
150
215
|
|
|
151
216
|
&:hover {
|
|
152
217
|
.qld__header__cta-link-icon {
|
|
@@ -156,12 +221,12 @@
|
|
|
156
221
|
}
|
|
157
222
|
|
|
158
223
|
.qld__header__cta-link-icon {
|
|
159
|
-
color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
|
|
160
|
-
display: inline-block;
|
|
161
224
|
height: 1.25rem;
|
|
225
|
+
width: 1.25rem;
|
|
162
226
|
margin-right: .5rem;
|
|
163
227
|
text-align: center;
|
|
164
|
-
|
|
228
|
+
display: inline-block;
|
|
229
|
+
color: var(--#{$prefix}header__cta-wrapper__cta-link-icon_color);
|
|
165
230
|
|
|
166
231
|
svg,
|
|
167
232
|
i {
|
|
@@ -172,9 +237,12 @@
|
|
|
172
237
|
}
|
|
173
238
|
|
|
174
239
|
a {
|
|
175
|
-
color: var(--#{$prefix}header__pre-header__anchor_text_color);
|
|
176
240
|
display: flex;
|
|
177
241
|
|
|
242
|
+
svg {
|
|
243
|
+
color: var(--#{$prefix}header__pre-header__anchor_text_color);
|
|
244
|
+
}
|
|
245
|
+
|
|
178
246
|
&:focus {
|
|
179
247
|
outline: 3px solid var(--#{$prefix}header__pre-header__anchor__focus_text_color);
|
|
180
248
|
outline-offset: 2px;
|
|
@@ -256,10 +324,10 @@
|
|
|
256
324
|
}
|
|
257
325
|
|
|
258
326
|
svg {
|
|
259
|
-
color: var(--#{$prefix}header__toggle-main-nav__svg_color);
|
|
260
327
|
height: 1.25rem;
|
|
261
328
|
margin: 1px auto;
|
|
262
329
|
width: 1.25rem;
|
|
330
|
+
color: var(--#{$prefix}header__toggle-main-nav__svg_color);
|
|
263
331
|
|
|
264
332
|
@include media-breakpoint-up(md) {
|
|
265
333
|
height: 2rem;
|
|
@@ -289,9 +357,9 @@
|
|
|
289
357
|
}
|
|
290
358
|
|
|
291
359
|
.qld__header__brand {
|
|
360
|
+
padding: 1rem 0;
|
|
292
361
|
display: flex;
|
|
293
362
|
align-items: center;
|
|
294
|
-
padding: 1rem 0;
|
|
295
363
|
font-variant-numeric: lining-nums;
|
|
296
364
|
|
|
297
365
|
@include media-breakpoint-up(md) {
|
|
@@ -364,13 +432,13 @@
|
|
|
364
432
|
}
|
|
365
433
|
|
|
366
434
|
.qld__header__heading {
|
|
367
|
-
color: var(--#{$prefix}header__site-name__heading__text_color);
|
|
368
|
-
font-family: $font-family-sitename;
|
|
369
435
|
font-size: 1rem;
|
|
370
436
|
font-weight: 700;
|
|
371
437
|
line-height: 1.25;
|
|
372
438
|
margin: 0;
|
|
373
439
|
padding: 0;
|
|
440
|
+
font-family: $font-family-sitename;
|
|
441
|
+
color: var(--#{$prefix}header__site-name__heading__text_color);
|
|
374
442
|
|
|
375
443
|
@include media-breakpoint-up(md) {
|
|
376
444
|
font-size: 1.25rem;
|
|
@@ -395,20 +463,18 @@
|
|
|
395
463
|
//Reduce size of whitebar on masterbrand
|
|
396
464
|
&__main--masterbrand--true {
|
|
397
465
|
@include media-breakpoint-down(lg) {
|
|
398
|
-
|
|
399
|
-
}
|
|
400
|
-
}
|
|
466
|
+
height: 0;
|
|
401
467
|
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
468
|
+
.qld__header__site-search--open {
|
|
469
|
+
margin-top: 3rem;
|
|
470
|
+
}
|
|
471
|
+
}
|
|
406
472
|
}
|
|
407
473
|
|
|
408
|
-
|
|
409
474
|
&__site-search {
|
|
410
475
|
//Auto margins for LTR and RTL
|
|
411
476
|
@extend .ms-auto;
|
|
477
|
+
|
|
412
478
|
form {
|
|
413
479
|
display: flex;
|
|
414
480
|
position: relative;
|
|
@@ -417,19 +483,95 @@
|
|
|
417
483
|
color: var(--site-search-input-color);
|
|
418
484
|
}
|
|
419
485
|
|
|
486
|
+
.suggestions-dropdown {
|
|
487
|
+
position: absolute;
|
|
488
|
+
display: none;
|
|
489
|
+
left: 0;
|
|
490
|
+
top: 100%;
|
|
491
|
+
width: 100%;
|
|
492
|
+
z-index: 99; // TO DO: Fix
|
|
493
|
+
border-radius: .5rem;
|
|
494
|
+
background: var(--#{$prefix}header_site-search-suggestions-bg);
|
|
495
|
+
box-shadow: var(--#{$prefix}header__pre-header_boxshadow);
|
|
496
|
+
border-bottom: solid .25rem var(--#{$prefix}header_site-search-suggestions-hover__border_color);
|
|
497
|
+
|
|
498
|
+
.suggestions-category {
|
|
499
|
+
padding: 0 1rem;
|
|
500
|
+
}
|
|
501
|
+
|
|
502
|
+
// Show when active
|
|
503
|
+
&.show {
|
|
504
|
+
display: block;
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
&__group {
|
|
508
|
+
padding: 0;
|
|
509
|
+
|
|
510
|
+
a, strong {
|
|
511
|
+
color: var(--site-search-input-color);
|
|
512
|
+
font-weight: 400;
|
|
513
|
+
font-size: 1rem;
|
|
514
|
+
text-decoration: none;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
strong {
|
|
518
|
+
font-weight: 600;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
ul {
|
|
522
|
+
padding: 0;
|
|
523
|
+
|
|
524
|
+
li {
|
|
525
|
+
height: 3rem;
|
|
526
|
+
list-style: none;
|
|
527
|
+
cursor: pointer;
|
|
528
|
+
|
|
529
|
+
a {
|
|
530
|
+
vertical-align: middle;
|
|
531
|
+
vertical-align: -webkit-baseline-middle;
|
|
532
|
+
&:hover {
|
|
533
|
+
text-decoration: underline;
|
|
534
|
+
}
|
|
535
|
+
}
|
|
536
|
+
|
|
537
|
+
&:hover {
|
|
538
|
+
background-color: var(--#{$prefix}header_site-search-suggestions-hover);
|
|
539
|
+
margin: 0 -1rem;
|
|
540
|
+
a {
|
|
541
|
+
padding: 0 1rem;
|
|
542
|
+
}
|
|
543
|
+
}
|
|
544
|
+
}
|
|
545
|
+
}
|
|
546
|
+
}
|
|
547
|
+
}
|
|
548
|
+
|
|
420
549
|
input[type="text"] {
|
|
550
|
+
box-shadow: none;
|
|
421
551
|
border: none;
|
|
422
|
-
|
|
552
|
+
padding-left: 3rem;
|
|
553
|
+
width: 20.62rem;
|
|
423
554
|
color: var(--site-search-input-color);
|
|
424
|
-
border-bottom: 2px solid var(--site-search-border-color);
|
|
425
555
|
background: var(--site-search-bg);
|
|
426
556
|
border-radius: 0.25rem 0 0 0;
|
|
427
|
-
|
|
428
|
-
|
|
557
|
+
border-bottom: 2px solid var(--site-search-border-color);
|
|
558
|
+
|
|
559
|
+
@include media-breakpoint-down(lg) {
|
|
560
|
+
border: 2px solid var(--site-search-border-color);
|
|
561
|
+
width: 100%;
|
|
562
|
+
}
|
|
563
|
+
|
|
429
564
|
&:focus {
|
|
430
|
-
outline: 2px solid var(
|
|
565
|
+
outline: 2px solid var(--site-search-input-focus-color);
|
|
431
566
|
outline-offset: 2px;
|
|
432
567
|
}
|
|
568
|
+
|
|
569
|
+
&.border-full {
|
|
570
|
+
border: 2px solid var(--site-search-border-color);
|
|
571
|
+
border-right: 0;
|
|
572
|
+
border-radius: 0.25rem 0 0 0.25rem;
|
|
573
|
+
}
|
|
574
|
+
|
|
433
575
|
}
|
|
434
576
|
|
|
435
577
|
input[type="submit"] {
|
|
@@ -456,20 +598,21 @@
|
|
|
456
598
|
}
|
|
457
599
|
|
|
458
600
|
@include media-breakpoint-down(lg) {
|
|
459
|
-
|
|
460
|
-
display:none;
|
|
461
|
-
}
|
|
601
|
+
|
|
462
602
|
// Mobile search open class
|
|
463
603
|
&--open {
|
|
604
|
+
z-index: 1;
|
|
605
|
+
display: block;
|
|
464
606
|
position: absolute;
|
|
465
607
|
left: 0;
|
|
466
608
|
right: 0;
|
|
467
|
-
top: 0;
|
|
468
|
-
background-color: var(--#{$prefix}header_bg);
|
|
469
|
-
-webkit-box-shadow: 0px 0px 25px rgba(200, 200, 200, .25);
|
|
470
|
-
box-shadow: 0px 0px 25px rgba(200, 200, 200, .25);
|
|
471
609
|
padding: 1rem;
|
|
472
|
-
|
|
610
|
+
margin-top: 1rem;
|
|
611
|
+
background-color: var(--#{$prefix}header_bg);
|
|
612
|
+
}
|
|
613
|
+
|
|
614
|
+
&--closed {
|
|
615
|
+
display: none;
|
|
473
616
|
}
|
|
474
617
|
}
|
|
475
618
|
}
|
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
--#{$prefix}navbar-color-light-border: #EBEBEB;
|
|
13
13
|
--#{$prefix}navbar-color-light-background: #FFFFFF;
|
|
14
14
|
--#{$prefix}navbar-color-light-background__shade: #F5F5F5;
|
|
15
|
+
--#{$prefix}navbar-color-light-alt-background__shade: #EBEBEB;
|
|
15
16
|
--#{$prefix}navbar-color-light-underline: #3F7AB4;
|
|
16
17
|
--#{$prefix}navbar-color-light-hover-underline: #09549F;
|
|
17
18
|
--#{$prefix}navbar-color-light-alt-button: #008733;
|
|
@@ -47,7 +48,7 @@
|
|
|
47
48
|
--#{$prefix}navbar-nav-text-color: var(--#{$prefix}navbar-color-light-text);
|
|
48
49
|
--#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-light-background__shade);
|
|
49
50
|
--#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-light-background);
|
|
50
|
-
--#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-light-
|
|
51
|
+
--#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-light-alt-background__shade);
|
|
51
52
|
--#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-light-button__hover);
|
|
52
53
|
--#{$prefix}navbar-border-color: var(--#{$prefix}navbar-color-light-border);
|
|
53
54
|
--#{$prefix}navbar-border-accent: var(--#{$prefix}navbar-color-light-designAccent);
|
|
@@ -56,6 +57,13 @@
|
|
|
56
57
|
--#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-light-alt-button__hover);
|
|
57
58
|
--#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-light-alt-button);
|
|
58
59
|
|
|
60
|
+
// Mobile default is dark
|
|
61
|
+
--#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}navbar-color-dark-background);
|
|
62
|
+
--#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
|
|
63
|
+
--#{$prefix}navbar-mobile-text-color: var(--#{$prefix}white);
|
|
64
|
+
--#{$prefix}navbar-mobile-border-color: var(--#{$prefix}dark-border);
|
|
65
|
+
--#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}navbar-color-dark-background__shade);
|
|
66
|
+
|
|
59
67
|
// ------------------------------------------------------------------------------------------------------------------
|
|
60
68
|
// 3. Modes
|
|
61
69
|
// ------------------------------------------------------------------------------------------------------------------
|
|
@@ -66,26 +74,18 @@
|
|
|
66
74
|
--#{$prefix}navbar-border-color: var(--#{$prefix}light-grey);
|
|
67
75
|
}
|
|
68
76
|
|
|
69
|
-
.dark
|
|
70
|
-
--#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-dark-background__shade);
|
|
71
|
-
--#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-background);
|
|
72
|
-
--#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-background);
|
|
73
|
-
--#{$prefix}navbar-title-color: var(--#{$prefix}white);
|
|
74
|
-
--#{$prefix}navbar-text-color: var(--#{$prefix}white);
|
|
75
|
-
--#{$prefix}navbar-nav-text-color: var(--#{$prefix}white);
|
|
76
|
-
--#{$prefix}navbar-home-icon-color: var(--#{$prefix}white);
|
|
77
|
-
--#{$prefix}navbar-link-color: var(--#{$prefix}white);
|
|
78
|
-
--#{$prefix}navbar-border-color: var(--#{$prefix}dark-border);
|
|
79
|
-
--#{$prefix}navbar-menuitem-hover-border: var(--#{$prefix}navbar-color-dark-alt-button__hover);
|
|
80
|
-
--#{$prefix}navbar-icon-hover: var(--#{$prefix}navbar-color-dark-alt-button);
|
|
81
|
-
--#{$prefix}navbar-text-focus-color: var(--#{$prefix}navbar-color-dark-focus);
|
|
82
|
-
--#{$prefix}navbar-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
|
|
83
|
-
}
|
|
84
|
-
|
|
77
|
+
.dark &,
|
|
85
78
|
.dark-alt & {
|
|
79
|
+
// Mobile default is dark
|
|
80
|
+
--#{$prefix}navbar-mobile-header-bg-color: var(--#{$prefix}navbar-color-dark-alt-background);
|
|
81
|
+
--#{$prefix}navbar-mobile-svg-color: var(--#{$prefix}navbar-color-dark-alt-button);
|
|
82
|
+
--#{$prefix}navbar-mobile-text-color: var(--#{$prefix}white);
|
|
83
|
+
--#{$prefix}navbar-mobile-border-color: var(--#{$prefix}dark-border);
|
|
84
|
+
--#{$prefix}navbar-mobile-menuitem-hover: var(--#{$prefix}navbar-color-dark-alt-background__shade);
|
|
85
|
+
|
|
86
86
|
--#{$prefix}navbar-bg-color: var(--#{$prefix}navbar-color-dark-background__shade);
|
|
87
|
-
--#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-background);
|
|
88
|
-
--#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-background);
|
|
87
|
+
--#{$prefix}navbar-dropdown-bg-color: var(--#{$prefix}navbar-color-dark-alt-background);
|
|
88
|
+
--#{$prefix}navbar-menuitem-hover: var(--#{$prefix}navbar-color-dark-alt-background);
|
|
89
89
|
--#{$prefix}navbar-title-color: var(--#{$prefix}white);
|
|
90
90
|
--#{$prefix}navbar-text-color: var(--#{$prefix}white);
|
|
91
91
|
--#{$prefix}navbar-nav-text-color: var(--#{$prefix}white);
|