@qhealth-design-system/core 1.7.0 → 1.7.2

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.
Files changed (14) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/package.json +1 -1
  3. package/src/components/_global/css/forms/general/component.scss +1 -1
  4. package/src/components/_global/css/forms/select/component.scss +36 -3
  5. package/src/components/_global/css/forms/text/component.scss +52 -7
  6. package/src/components/_global/css/global.scss +0 -103
  7. package/src/components/_global/css/icons/component.scss +1 -0
  8. package/src/components/banner_intermediate/css/component.scss +45 -39
  9. package/src/components/card_no_action/css/component.scss +10 -1
  10. package/src/components/code/css/component.scss +33 -1
  11. package/src/components/footer/css/component.scss +1 -1
  12. package/src/components/main_navigation/css/component.scss +35 -2
  13. package/src/components/mega_main_navigation/css/component.scss +21 -4
  14. package/src/styles/imports/utilities.scss +104 -1
package/CHANGELOG.md CHANGED
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## Unreleased
9
9
 
10
+ ## 1.7.2 - 2024-06-24
11
+
12
+ ## 1.7.1 - 2024-06-20
13
+
10
14
  ## 1.7.0 - 2024-06-19
11
15
 
12
16
  ## 1.6.0 - 2024-06-07
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qhealth-design-system/core",
3
- "version": "1.7.0",
3
+ "version": "1.7.2",
4
4
  "description": "",
5
5
  "licence": "MIT",
6
6
  "main": "index.js",
package/src/components/_global/css/forms/general/component.scss CHANGED
@@ -356,7 +356,7 @@ p.sq-form-error {
356
356
  p.qld__input--error, span.qld__input--error,
357
357
  p.sq-form-error {
358
358
  color: $QLD-color-status__error--lightest;
359
- @include QLD-space(padding, 0.5unit 0.75unit);
359
+
360
360
  }
361
361
  }
362
362
 
package/src/components/_global/css/forms/select/component.scss CHANGED
@@ -53,13 +53,14 @@ select{
53
53
 
54
54
  &:hover{
55
55
  background-color: transparent !important;
56
+ border-color: var(--QLD-color-light__border--alt);
56
57
  }
57
58
  }
58
59
 
59
60
  .qld__input--success + &,
60
61
  .qld__input--error + & {
61
62
  @include QLD-space(margin-top, 0.5unit);
62
- display: block;
63
+ display: flex;
63
64
  }
64
65
 
65
66
 
@@ -154,6 +155,13 @@ select{
154
155
  }
155
156
  }
156
157
 
158
+ &:disabled,
159
+ &[disabled]{
160
+ &:hover{
161
+ border-color: var(--QLD-color-dark__border--alt);
162
+ }
163
+ }
164
+
157
165
  &:focus {
158
166
  background-color: $QLD-color-neutral--lightest;
159
167
  color: var(--QLD-color-light__text);
@@ -177,8 +185,8 @@ select{
177
185
 
178
186
 
179
187
  .qld__form-style-filled {
180
- .qld__body--dark,
181
- .qld__body--alt-dark {
188
+ .qld__body--dark &,
189
+ .qld__body--alt-dark & {
182
190
  .sq-form-question-select select,
183
191
  .sq-form-question-datetime select,
184
192
  .qld__select {
@@ -227,6 +235,31 @@ select{
227
235
  border-color: $QLD-color-neutral--lighter;
228
236
  }
229
237
  }
238
+
239
+ &.qld__text-input--error {
240
+ border-color: $QLD-color-status__error;
241
+ background-color: $QLD-color-status__error--lightest; //$QLD-color-status__error with .05 opacity
242
+ color: var(--QLD-color-light__text);
243
+ background-image: QLD-svguri('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="black" d="M4.251 181.1C7.392 177.7 11.69 175.1 16 175.1c3.891 0 7.781 1.406 10.86 4.25l197.1 181.1l197.1-181.1c6.5-6 16.64-5.625 22.61 .9062c6 6.5 5.594 16.59-.8906 22.59l-208 192c-6.156 5.688-15.56 5.688-21.72 0l-208-192C-1.343 197.7-1.749 187.6 4.251 181.1z"/></svg>');
244
+
245
+ &:hover {
246
+ &:not(:focus) {
247
+ background-color: $QLD-color-status__error--lighter;
248
+ border-color: $QLD-color-status__error;
249
+ }
250
+ }
251
+
252
+ &:focus {
253
+ background-color: $QLD-color-neutral--white;
254
+ color: var(--QLD-color-light__text);
255
+ border-color: $QLD-color-neutral--lighter;
256
+ }
257
+
258
+ &::placeholder {
259
+ color: var(--QLD-color-light__text);
260
+ }
261
+ }
262
+
230
263
  }
231
264
  }
232
265
  .sq-form-question-select select,
package/src/components/_global/css/forms/text/component.scss CHANGED
@@ -70,19 +70,27 @@ textarea{
70
70
  }
71
71
  }
72
72
 
73
- // disabled styling
74
- &[disabled],
75
- &:disabled {
76
- cursor: not-allowed;
77
- -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
78
- opacity: 0.5;
79
- }
73
+
80
74
 
81
75
  &:hover{
82
76
  &:not(:focus):not(.qld__text-input--error):not(.qld__text-input--valid) {
83
77
  background-color: $QLD-color-neutral--lightest;
84
78
  border-color: var(--QLD-color-light__action--primary-hover);
85
79
  }
80
+ }
81
+
82
+ // disabled styling
83
+ &[disabled],
84
+ &:disabled {
85
+ cursor: not-allowed;
86
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
87
+ opacity: 0.5;
88
+ &:hover,
89
+ &:hover:not(.qld__text-input--error):not(.qld__text-input--valid) {
90
+ background-color: transparent;
91
+ border-color: var(--QLD-color-light__border--alt);
92
+ }
93
+
86
94
  }
87
95
 
88
96
  &[aria-expanded="true"],
@@ -190,6 +198,19 @@ textarea{
190
198
  }
191
199
  }
192
200
 
201
+ &[disabled],
202
+ &:disabled {
203
+ cursor: not-allowed;
204
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
205
+ opacity: 0.5;
206
+ &:hover,
207
+ &:hover:not(.qld__text-input--error):not(.qld__text-input--valid) {
208
+ background-color: transparent;
209
+ border-color: var(--QLD-color-dark__border--alt);
210
+ }
211
+
212
+ }
213
+
193
214
  &[aria-expanded="true"],
194
215
  &:hover[aria-expanded="true"]{
195
216
  color: var(--QLD-color-light__text);
@@ -266,6 +287,18 @@ textarea{
266
287
  }
267
288
  }
268
289
  }
290
+
291
+ &[disabled],
292
+ &:disabled {
293
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
294
+ opacity: 0.5;
295
+ &:hover,
296
+ &:hover:not(.qld__text-input--error):not(.qld__text-input--valid) {
297
+ cursor: not-allowed;
298
+ background-color: $QLD-color-neutral--lightest;
299
+ border-color: var(--QLD-color-light__border--alt);
300
+ }
301
+ }
269
302
  }
270
303
 
271
304
  .qld__body--dark, .qld__body--dark &,
@@ -361,6 +394,18 @@ textarea{
361
394
  background-color: $QLD-color-neutral--white;
362
395
  }
363
396
  }
397
+
398
+ &[disabled],
399
+ &:disabled {
400
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
401
+ opacity: 0.5;
402
+ &:hover,
403
+ &:hover:not(.qld__text-input--error):not(.qld__text-input--valid) {
404
+ cursor: not-allowed;
405
+ background-color: var(--QLD-color-dark__background--shade);
406
+ border-color: var(--QLD-color-dark__border--alt);
407
+ }
408
+ }
364
409
  }
365
410
  }
366
411
  }
package/src/components/_global/css/global.scss CHANGED
@@ -18,109 +18,6 @@ body {
18
18
  }
19
19
  }
20
20
 
21
- /* New Classes that apply the form sizes variables
22
- ----------------------------------------------------------------------------------------------------------
23
-
24
- New classes to dictate field size, this applied variables that affec thte max-width of a for inpout field
25
-
26
- ---------------------------------------------------------------------------------------------------------- */
27
-
28
- input.qld__text-input--block.qld__field-width--2char,
29
- select.qld__field-width--2char {
30
- max-width: $QLD-fixed-width__char-2;
31
- }
32
-
33
- input.qld__text-input--block.qld__field-width--3char,
34
- select.qld__field-width--3char {
35
- max-width: $QLD-fixed-width__char-3;
36
- }
37
-
38
- input.qld__text-input--block.qld__field-width--4char,
39
- select.qld__field-width--4char {
40
- max-width: $QLD-fixed-width__char-4;
41
- }
42
-
43
- input.qld__text-input--block.qld__field-width--5char,
44
- select.qld__field-width--5char {
45
- max-width: $QLD-fixed-width__char-5;
46
- }
47
-
48
- input.qld__text-input--block.qld__field-width--10char,
49
- select.qld__field-width--10char {
50
- max-width: $QLD-fixed-width__char-10;
51
- }
52
-
53
- input.qld__text-input--block.qld__field-width--20char,
54
- select.qld__field-width--20char {
55
- max-width: $QLD-fixed-width__char-20;
56
- }
57
-
58
- input.qld__text-input--block.qld__field-width--xs,
59
- select.qld__field-width--xs {
60
- max-width: $QLD-form-input__width-xs;
61
- }
62
-
63
- input.qld__text-input--block.qld__field-width--sm,
64
- select.qld__field-width--sm {
65
- max-width: $QLD-form-input__width-sm;
66
- }
67
-
68
- input.qld__text-input--block.qld__field-width--md,
69
- select.qld__field-width--md {
70
- max-width: $QLD-form-input__width-md;
71
- }
72
-
73
- input.qld__text-input--block.qld__field-width--lg,
74
- select.qld__field-width--lg
75
- {
76
- max-width: $QLD-form-input__width-lg;
77
- }
78
-
79
- input.qld__text-input--block.qld__field-width--xl,
80
- select.qld__field-width--xl
81
- {
82
- max-width: $QLD-form-input__width-xl;
83
- }
84
-
85
- /* Default for all fluid styls is full - these are adjusts at larger break points, they keeps the fluid width style fomrs looking good on mobile */
86
-
87
- input.qld__text-input--block.qld__field-width--full,
88
- select.qld__field-width--full {
89
- max-width: $QLD-fluid-width__full;
90
- }
91
-
92
- input.qld__text-input--block.qld__field-width--3-quarters,
93
- select.qld__field-width--3-quarters {
94
- max-width: $QLD-fluid-width__full;
95
- }
96
-
97
- input.qld__text-input--block.qld__field-width--half,
98
- select.qld__field-width--half {
99
- max-width: $QLD-fluid-width__full;
100
- }
101
-
102
- input.qld__text-input--block.qld__field-width--1-quarter,
103
- select.qld__field-width--1-quarter {
104
- max-width: $QLD-fluid-width__full;
105
- }
106
-
107
- @include QLD-media (md) {
108
- input.qld__text-input--block.qld__field-width--1-quarter,
109
- select.qld__field-width--1-quarter {
110
- max-width:$QLD-fluid-width__1-quarter;
111
- }
112
-
113
- input.qld__text-input--block.qld__field-width--half,
114
- select.qld__field-width--half {
115
- max-width:$QLD-fluid-width__half;
116
- }
117
-
118
- input.qld__text-input--block.qld__field-width--3-quarters,
119
- select.qld__field-width--3-quarters {
120
- max-width:$QLD-fluid-width__3-quarters;
121
- }
122
- }
123
-
124
21
  /*
125
22
  * Tablet layout
126
23
  */
package/src/components/_global/css/icons/component.scss CHANGED
@@ -7,6 +7,7 @@ svg.qld__icon{
7
7
  width: 1em;
8
8
  display: inline-block;
9
9
  align-self: center;
10
+ vertical-align: middle;
10
11
 
11
12
  &--xs{
12
13
  font-size: $QLD-icon-size__xs;
package/src/components/banner_intermediate/css/component.scss CHANGED
@@ -178,30 +178,31 @@
178
178
  fill: var(--QLD-color-light__action--secondary);
179
179
  }
180
180
  }
181
- }
182
-
183
- .qld__tile-nav__link {
184
- @include QLD-underline('light','noUnderline');
185
- color: var(--QLD-color-light__link);
186
- display: inline-block;
187
- margin-top: 4px;
188
- @include QLD-fontgrid( xs, nospace );
189
- letter-spacing: -0.5px;
190
-
191
- &:after {
192
- content: '';
193
- position: absolute;
194
- left: 0;
195
- top: 0;
196
- height: 100%;
197
- width: 100%;
198
- }
199
181
 
200
- &:hover {
182
+ .qld__tile-nav__link {
183
+ @include QLD-underline('light','noUnderline');
201
184
  color: var(--QLD-color-light__link);
185
+ display: inline-block;
186
+ margin-top: 4px;
187
+ @include QLD-fontgrid( xs, nospace );
188
+ letter-spacing: -0.5px;
189
+
190
+ &:after {
191
+ content: '';
192
+ position: absolute;
193
+ left: 0;
194
+ top: 0;
195
+ height: 100%;
196
+ width: 100%;
197
+ }
198
+
199
+ &:hover {
200
+ color: var(--QLD-color-light__link);
201
+ }
202
202
  }
203
203
  }
204
204
 
205
+
205
206
  &--alt{
206
207
  background-color: var(--QLD-color-light__background--alt);
207
208
 
@@ -214,15 +215,17 @@
214
215
  color: var(--QLD-color-light__action--secondary);
215
216
  fill: var(--QLD-color-light__action--secondary);
216
217
  }
217
- }
218
-
219
- .qld__tile-nav__link {
220
- color: var(--QLD-color-light__link);
221
-
222
- &:hover {
218
+
219
+ .qld__tile-nav__link {
223
220
  color: var(--QLD-color-light__link);
221
+
222
+ &:hover {
223
+ color: var(--QLD-color-light__link);
224
+ }
224
225
  }
225
226
  }
227
+
228
+
226
229
  }
227
230
 
228
231
  &--dark {
@@ -239,16 +242,18 @@
239
242
  color: var(--QLD-color-dark__action--secondary-hover);
240
243
  }
241
244
  }
242
- }
243
-
244
- .qld__tile-nav__link {
245
- color: var(--QLD-color-dark__link);
246
- @include QLD-underline('dark','noUnderline');
247
-
248
- &:hover {
249
- color: var(--QLD-color-dark__link);;
245
+
246
+ .qld__tile-nav__link {
247
+ color: var(--QLD-color-dark__link);
248
+ @include QLD-underline('dark','noUnderline');
249
+
250
+ &:hover {
251
+ color: var(--QLD-color-dark__link);;
252
+ }
250
253
  }
251
254
  }
255
+
256
+
252
257
  }
253
258
 
254
259
  &--dark-alt {
@@ -265,14 +270,15 @@
265
270
  color: var(--QLD-color-dark__action--secondary-hover);
266
271
  }
267
272
  }
268
- }
269
-
270
- .qld__tile-nav__link {
271
- color: var(--QLD-color-dark__link);
272
- @include QLD-underline('dark','noUnderline');
273
- &:hover {
273
+
274
+ .qld__tile-nav__link {
274
275
  color: var(--QLD-color-dark__link);
276
+ @include QLD-underline('dark','noUnderline');
277
+ &:hover {
278
+ color: var(--QLD-color-dark__link);
279
+ }
275
280
  }
276
281
  }
282
+
277
283
  }
278
284
  }
package/src/components/card_no_action/css/component.scss CHANGED
@@ -655,6 +655,7 @@
655
655
 
656
656
  .qld__card-list__footer{
657
657
  justify-content: space-between;
658
+ align-items: centre;
658
659
  @include QLD-space(margin-top, 1.5unit);
659
660
 
660
661
  .qld__slick-controls{
@@ -669,4 +670,12 @@
669
670
  align-items: center;
670
671
  }
671
672
  }
672
- }
673
+ }
674
+
675
+ .qld__body, .qld__banner {
676
+ .qld__card-list__footer {
677
+ justify-content: space-between;
678
+ align-items: centre;
679
+ }
680
+ }
681
+
package/src/components/code/css/component.scss CHANGED
@@ -154,7 +154,7 @@
154
154
  }
155
155
 
156
156
  &:focus {
157
- outline: 2px solid var(--QLD-color-light__focus);
157
+ outline: 3px solid var(--QLD-color-light__focus);
158
158
  outline-offset: 2px;
159
159
  }
160
160
  }
@@ -342,6 +342,22 @@
342
342
  color: var(--QLD-color-light__text);
343
343
  @include QLD-space('padding', .125unit .5unit);
344
344
 
345
+ .token.attr-value {
346
+ color: #052C53;
347
+ }
348
+
349
+ .token.punctuation {
350
+ color: var(--QLD-color-light__text--lighter);
351
+ }
352
+
353
+ .token.attr-name {
354
+ color: #006400;
355
+ }
356
+
357
+ .token.tag {
358
+ color: #09549F;
359
+ }
360
+
345
361
  &:focus,
346
362
  &:hover {
347
363
  background-color: var(--QLD-color-light__action--primary-hover);
@@ -349,6 +365,22 @@
349
365
  + .qld__code-tooltip {
350
366
  display: block;
351
367
  }
368
+
369
+ .token.attr-value {
370
+ color: var(--QLD-color-light__link--on-action);
371
+ }
372
+
373
+ .token.punctuation {
374
+ color: var(--QLD-color-light__link--on-action);
375
+ }
376
+
377
+ .token.attr-name {
378
+ color: var(--QLD-color-light__link--on-action);
379
+ }
380
+
381
+ .token.tag {
382
+ color: var(--QLD-color-light__link--on-action);
383
+ }
352
384
  }
353
385
 
354
386
  &:focus {
package/src/components/footer/css/component.scss CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  @include QLD-media(lg) {
62
62
  float: none;
63
- @include QLD-space(margin-top, 2unit);
63
+ // @include QLD-space(margin-top, 2unit);
64
64
  }
65
65
  }
66
66
 
package/src/components/main_navigation/css/component.scss CHANGED
@@ -80,6 +80,7 @@ $QLD-header-md: 72px;
80
80
  margin: 0;
81
81
  a{
82
82
  @include QLD-underline('light','noUnderline','default','noVisited');
83
+ color: var(--QLD-color-light__text);
83
84
  &:hover{
84
85
  .qld__icon{
85
86
  color: var(--QLD-color-light__action--secondary-hover);
@@ -102,7 +103,7 @@ $QLD-header-md: 72px;
102
103
  &.active .qld__main-nav__item-link {
103
104
 
104
105
  font-weight: bold;
105
- color: var(--QLD-color-light__text);
106
+ color: var(--QLD-color-light__heading);
106
107
  border-left-color: transparent;
107
108
 
108
109
  @include QLD-media(lg) {
@@ -115,6 +116,22 @@ $QLD-header-md: 72px;
115
116
  border-color: var(--QLD-color-light__action--primary-hover);
116
117
  color: var(--QLD-color-light__link);
117
118
  }
119
+
120
+ &--open{
121
+ color: var(--QLD-color-light__heading);
122
+ }
123
+
124
+ &.qld__main-nav__item-link--open {
125
+ &:visited {
126
+ color: var(--QLD-color-light__heading);
127
+ }
128
+ }
129
+ }
130
+
131
+ .qld__main-nav__item-link.qld__main-nav__item-link--open {
132
+ &:visited {
133
+ color: var(--QLD-color-light__link);
134
+ }
118
135
  }
119
136
  }
120
137
 
@@ -331,7 +348,11 @@ $QLD-header-md: 72px;
331
348
  color: var(--QLD-color-dark__action--secondary);
332
349
  }
333
350
  }
351
+
352
+
334
353
  }
354
+
355
+
335
356
  }
336
357
 
337
358
  &.qld__main-nav__menu--dark-alt{
@@ -621,6 +642,7 @@ $QLD-header-md: 72px;
621
642
  .qld__main-nav__item{
622
643
  a{
623
644
  @include QLD-underline('dark','noUnderline','default','noVisited');
645
+ color: var(--QLD-color-dark__text);
624
646
  }
625
647
  }
626
648
 
@@ -640,12 +662,23 @@ $QLD-header-md: 72px;
640
662
  }
641
663
 
642
664
  .qld__main-nav__item.active .qld__main-nav__item-link{
643
- color: var(--QLD-color-dark__link);
665
+ color: var(--QLD-color-dark__heading);
644
666
 
645
667
  @include QLD-media(lg) {
646
668
  border-color: var(--QLD-color-dark__background);
647
669
  }
648
670
  }
671
+
672
+ .qld__main-nav__item.active .qld__main-nav__item-link--open{
673
+ color: var(--QLD-color-dark__heading);
674
+ }
675
+
676
+ .qld__main-nav__item-link.qld__main-nav__item-link--open {
677
+ &:visited {
678
+ color: var(--QLD-color-dark__link);
679
+ }
680
+ }
681
+
649
682
  .qld__icon{
650
683
  color: var(--QLD-color-dark__action--secondary);
651
684
  }
package/src/components/mega_main_navigation/css/component.scss CHANGED
@@ -10,7 +10,7 @@
10
10
 
11
11
  }
12
12
 
13
- &-toggle{
13
+ &-toggle{
14
14
  position: relative;
15
15
  @include QLD-space(min-height, 1.75unit);
16
16
  @include QLD-space(min-width, 1.75unit);
@@ -75,6 +75,7 @@
75
75
  background-color: $QLD-color-neutral--white;
76
76
  border-bottom: $QLD-border-width-extra-thick solid $QLD-color-neutral--white;
77
77
  @include QLD-space(margin-bottom, -0.5unit);
78
+ text-decoration: none;
78
79
 
79
80
  &:hover{
80
81
  background-color: $QLD-color-neutral--lightest;
@@ -128,7 +129,7 @@
128
129
  &--open{
129
130
  background-color: $QLD-color-neutral--white;
130
131
  color: var(--QLD-color-light__link);
131
- font-weight: bold;
132
+
132
133
  @include QLD-space(border-top-right-radius, 1unit);
133
134
 
134
135
  &:hover{
@@ -297,7 +298,7 @@
297
298
  @include QLD-media(lg) {
298
299
  color: var(--QLD-color-light__link);
299
300
  border: none;
300
- @include QLD-space(padding, 0);
301
+ @include QLD-space(padding-right, 2unit);
301
302
  }
302
303
 
303
304
  &:hover{
@@ -369,11 +370,16 @@
369
370
  }
370
371
 
371
372
  &.active{
372
- .qld__main-nav__sub-item-text{
373
+ a {
374
+ color: var(--QLD-color-light__heading);
373
375
  width: 100%;
374
376
  display: block;
375
377
  font-weight: bold;
376
378
  border-left: solid 4px transparent;
379
+
380
+ @include QLD-media(lg) {
381
+ border-left: none;
382
+ }
377
383
  }
378
384
  }
379
385
 
@@ -454,6 +460,7 @@
454
460
  &.qld__accordion--open{
455
461
  background-color: var(--QLD-color-dark__background);
456
462
  border-color: var(--QLD-color-dark__background);
463
+ text-decoration: none;
457
464
  }
458
465
 
459
466
  .qld__icon{
@@ -509,7 +516,17 @@
509
516
  &:hover{
510
517
  background-color: var(--QLD-color-dark__background);
511
518
  }
519
+
520
+
512
521
  }
522
+
523
+ &.active {
524
+ a {
525
+ color: var(--QLD-color-dark__heading);
526
+
527
+ }
528
+ }
529
+
513
530
  .qld__main-nav__sub-item-text{
514
531
  color: var(--QLD-color-dark__link);
515
532
  }
package/src/styles/imports/utilities.scss CHANGED
@@ -176,7 +176,7 @@ a.qld__max-width {
176
176
  }
177
177
 
178
178
  .qld__no-space {
179
- line-height: 1;
179
+ line-height: 1 !important;
180
180
  }
181
181
 
182
182
  .qld__default-xs {
@@ -571,4 +571,107 @@ a.qld__max-width {
571
571
  column-gap: map-get( $QLD-space-map, $QLD-margin__li-wide--desktop ) + px !important;
572
572
  }
573
573
 
574
+ }
575
+
576
+ /* New Classes that apply the form sizes variables
577
+ ----------------------------------------------------------------------------------------------------------
578
+
579
+ New classes to dictate field size, this applied variables that affec thte max-width of a for inpout field
580
+
581
+ ---------------------------------------------------------------------------------------------------------- */
582
+
583
+ input.qld__text-input--block.qld__field-width--2char,
584
+ select.qld__text-input--block.qld__field-width--2char {
585
+ max-width: $QLD-fixed-width__char-2;
586
+ }
587
+
588
+ input.qld__text-input--block.qld__field-width--3char,
589
+ select.qld__text-input--block.qld__field-width--3char {
590
+ max-width: $QLD-fixed-width__char-3;
591
+ }
592
+
593
+ input.qld__text-input--block.qld__field-width--4char,
594
+ select.qld__text-input--block.qld__field-width--4char {
595
+ max-width: $QLD-fixed-width__char-4;
596
+ }
597
+
598
+ input.qld__text-input--block.qld__field-width--5char,
599
+ select.qld__text-input--block.qld__field-width--5char {
600
+ max-width: $QLD-fixed-width__char-5;
601
+ }
602
+
603
+ input.qld__text-input--block.qld__field-width--10char,
604
+ select.qld__text-input--block.qld__field-width--10char {
605
+ max-width: $QLD-fixed-width__char-10;
606
+ }
607
+
608
+ input.qld__text-input--block.qld__field-width--20char,
609
+ select.qld__text-input--block.qld__field-width--20char {
610
+ max-width: $QLD-fixed-width__char-20;
611
+ }
612
+
613
+ input.qld__text-input--block.qld__field-width--xs,
614
+ select.qld__text-input--block.qld__field-width--xs {
615
+ max-width: $QLD-form-input__width-xs;
616
+ }
617
+
618
+ input.qld__text-input--block.qld__field-width--sm,
619
+ select.qld__text-input--block.qld__field-width--sm {
620
+ max-width: $QLD-form-input__width-sm;
621
+ }
622
+
623
+ input.qld__text-input--block.qld__field-width--md,
624
+ select.qld__text-input--block.qld__field-width--md {
625
+ max-width: $QLD-form-input__width-md;
626
+ }
627
+
628
+ input.qld__text-input--block.qld__field-width--lg,
629
+ select.qld__text-input--block.qld__field-width--lg
630
+ {
631
+ max-width: $QLD-form-input__width-lg;
632
+ }
633
+
634
+ input.qld__text-input--block.qld__field-width--xl,
635
+ select.qld__text-input--block.qld__field-width--xl
636
+ {
637
+ max-width: $QLD-form-input__width-xl;
638
+ }
639
+
640
+ /* Default for all fluid styls is full - these are adjusts at larger break points, they keeps the fluid width style fomrs looking good on mobile */
641
+
642
+ input.qld__text-input--block.qld__field-width--full,
643
+ select.qld__text-input--block.qld__field-width--full {
644
+ max-width: $QLD-fluid-width__full;
645
+ }
646
+
647
+ input.qld__text-input--block.qld__field-width--3-quarters,
648
+ select.qld__text-input--block.qld__field-width--3-quarters {
649
+ max-width: $QLD-fluid-width__full;
650
+ }
651
+
652
+ input.qld__text-input--block.qld__field-width--half,
653
+ select.qld__text-input--block.qld__field-width--half {
654
+ max-width: $QLD-fluid-width__full;
655
+ }
656
+
657
+ input.qld__text-input--block.qld__field-width--1-quarter,
658
+ select.qld__text-input--block.qld__field-width--1-quarter {
659
+ max-width: $QLD-fluid-width__full;
660
+ }
661
+
662
+ @include QLD-media (md) {
663
+ input.qld__text-input--block.qld__field-width--1-quarter,
664
+ select.qld__text-input--block.qld__field-width--1-quarter {
665
+ max-width:$QLD-fluid-width__1-quarter;
666
+ }
667
+
668
+ input.qld__text-input--block.qld__field-width--half,
669
+ select.qld__text-input--block.qld__field-width--half {
670
+ max-width:$QLD-fluid-width__half;
671
+ }
672
+
673
+ input.qld__text-input--block.qld__field-width--3-quarters,
674
+ select.qld__text-input--block.qld__field-width--3-quarters {
675
+ max-width:$QLD-fluid-width__3-quarters;
676
+ }
574
677
  }