@qhealth-design-system/core 1.18.4 → 1.19.0

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 (90) hide show
  1. package/.storybook/assets/accordion-js.js +344 -0
  2. package/.storybook/assets/animate-js.js +247 -0
  3. package/.storybook/assets/index.js +15 -0
  4. package/.storybook/globals.js +39 -41
  5. package/.storybook/main.js +4 -3
  6. package/.storybook/preview.js +11 -13
  7. package/CHANGELOG.md +2 -0
  8. package/README.md +1 -1
  9. package/package.json +10 -15
  10. package/src/component-loader.js +23 -0
  11. package/src/components/_global/css/body/component.scss +3 -3
  12. package/src/components/_global/css/btn/component.scss +1 -1
  13. package/src/components/_global/css/cta_links/component.scss +2 -2
  14. package/src/components/_global/css/example/component.scss +11 -19
  15. package/src/components/_global/css/forms/control_inputs/component.scss +2 -2
  16. package/src/components/_global/css/forms/general/component.scss +5 -5
  17. package/src/components/_global/css/headings/component.scss +42 -44
  18. package/src/components/_global/css/img/images.scss +20 -36
  19. package/src/components/_global/css/link_columns/component.scss +2 -2
  20. package/src/components/_global/css/modal/component.scss +20 -26
  21. package/src/components/_global/css/table/component.scss +14 -21
  22. package/src/components/_global/css/tabs/component.scss +2 -2
  23. package/src/components/_global/css/tags/component.scss +1 -1
  24. package/src/components/_global/css/toggle_and_tool_tip/component.scss +3 -3
  25. package/src/components/_global/js/global.js +1 -1
  26. package/src/components/_global/js/select_boxes/global.js +26 -35
  27. package/src/components/accordion/css/component.scss +289 -326
  28. package/src/components/banner/css/component.scss +77 -173
  29. package/src/components/banner/html/component.hbs +2 -4
  30. package/src/components/banner_advanced/html/component.hbs +2 -2
  31. package/src/components/banner_advanced/js/manifest.json +1422 -1386
  32. package/src/components/basic_search/css/component.scss +13 -14
  33. package/src/components/basic_search/html/component.hbs +11 -20
  34. package/src/components/breadcrumbs/js/global.js +6 -1
  35. package/src/components/callout/css/component.scss +37 -40
  36. package/src/components/card_feature/css/component.scss +28 -167
  37. package/src/components/card_multi_action/css/component.scss +46 -58
  38. package/src/components/code/css/component.scss +3 -3
  39. package/src/components/code/html/component.hbs +12 -12
  40. package/src/components/code/js/global.js +6 -1
  41. package/src/components/file_upload/css/component.scss +5 -5
  42. package/src/components/file_upload/js/global.js +46 -43
  43. package/src/components/footer/css/component.scss +3 -3
  44. package/src/components/global_alert/css/component.scss +8 -14
  45. package/src/components/global_alert/html/component.hbs +3 -3
  46. package/src/components/header/css/component.scss +16 -4
  47. package/src/components/header/html/component.hbs +3 -2
  48. package/src/components/in_page_navigation/css/component.scss +14 -16
  49. package/src/components/in_page_navigation/js/global.js +48 -58
  50. package/src/components/internal_navigation/css/component.scss +3 -3
  51. package/src/components/internal_navigation/js/global.js +27 -35
  52. package/src/components/left_hand_navigation/css/component.scss +8 -2
  53. package/src/components/main_navigation/css/component.scss +16 -7
  54. package/src/components/main_navigation/html/component.hbs +1 -0
  55. package/src/components/mega_main_navigation/css/component.scss +5 -5
  56. package/src/components/mega_main_navigation/html/component.hbs +1 -0
  57. package/src/components/pagination/css/component.scss +32 -28
  58. package/src/components/pagination/html/component.hbs +37 -40
  59. package/src/components/promo_panel/css/component.scss +1 -4
  60. package/src/components/promo_panel/html/component.hbs +11 -5
  61. package/src/components/promo_panel/js/global.js +24 -39
  62. package/src/components/promo_panel/js/manifest.json +8 -0
  63. package/src/components/tab/css/component.scss +3 -3
  64. package/src/components/toggle_tip/css/component.scss +1 -1
  65. package/src/components/tool_tip/css/component.scss +1 -1
  66. package/src/components/video_player/js/global.js +16 -13
  67. package/src/data/current.json +33 -1
  68. package/src/helpers/global-helpers.js +56 -0
  69. package/src/html/component-in_page_navigation.html +2 -2
  70. package/src/index.js +4 -8
  71. package/src/stories/BackToTop/BackToTop.mdx +3 -21
  72. package/src/stories/CTALink/CTALink.mdx +1 -4
  73. package/src/stories/Checkboxes/Checkboxes.mdx +1 -4
  74. package/src/stories/DirectionLinks/DirectionLinks.mdx +1 -4
  75. package/src/stories/InPageAlert/InPageAlert.mdx +1 -4
  76. package/src/stories/Introduction.mdx +9 -5
  77. package/src/stories/LinkColumns/LinkColumns.mdx +1 -4
  78. package/src/stories/Pagination/Pagination.mdx +26 -0
  79. package/src/stories/Pagination/Pagination.stories.js +257 -0
  80. package/src/stories/PromoPanel/PromoPanel.mdx +26 -0
  81. package/src/stories/PromoPanel/PromoPanel.stories.js +219 -0
  82. package/src/stories/RadioButtons/RadioButtons.mdx +1 -4
  83. package/src/stories/SelectBox/SelectBox.mdx +1 -4
  84. package/src/stories/Tags/Tags.js +3 -3
  85. package/src/stories/Tags/Tags.mdx +1 -4
  86. package/src/stories/VideoPlayer/VideoPlayer.mdx +3 -28
  87. package/src/stories/VideoPlayer/VideoPlayer.stories.js +19 -46
  88. package/src/styles/imports/utilities.scss +3 -3
  89. package/src/styles/imports/variables.scss +5 -0
  90. package/src/stories/VideoPlayer/VideoPlayer.js +0 -0
package/src/components/accordion/css/component.scss CHANGED
@@ -3,343 +3,306 @@
3
3
  //--------------------------------------------------------------------------------------------------------------------------------------------------------------
4
4
 
5
5
  .qld__accordion {
6
- border: $QLD-border-width-thin solid $QLD-color-neutral--lighter;
7
- display: block;
8
- padding: 0;
9
-
10
- &__title{
11
- background-color: $QLD-color-neutral--lightest;
12
- @include QLD-underline('light');
13
- @include QLD-fontgrid( md, heading );
14
- @include QLD-space( padding, 1unit 3unit 1unit 1unit );
15
- width: 100%;
16
- display: block;
17
- color: var(--QLD-color-light__link);
18
- font-weight: normal;
19
- position: relative;
20
- border: none;
21
-
22
- // button resets
23
- box-sizing: border-box;
24
- margin: 0;
25
- cursor: pointer;
26
- text-align: left;
27
- font-family: inherit;
28
- @include QLD-focus();
29
-
30
- &:focus {
31
- z-index: 100;
32
- outline: 3px solid var(--QLD-color-light__focus);
33
- outline-offset: 2px;
34
- }
35
-
36
- // remove the default details arrow icon
37
- &::-webkit-details-marker {
38
- display: none;
39
- }
40
-
41
- .qld__icon{
42
- color: var(--QLD-color-light__action--secondary);
43
- position: absolute;
44
- @include QLD-space( right, 1unit );
45
- z-index: 1;
46
- transition: transform 0.25s ease-in;
47
- }
48
-
49
- &:after {
50
- content: ' ';
51
- position: absolute;
52
- top: 50%;
53
- @include QLD-space( margin-top, -10px ); // Pull it up 10px
54
- @include QLD-space( right, 1unit );
55
- @include QLD-space( width, 1.5unit );
56
- @include QLD-space( height, 1.5unit );
57
- // background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary));
58
- // background-repeat: no-repeat;
59
- // background-position: center;
60
- z-index: 1;
61
- transition: transform 0.25s ease-in;
62
- mask-image: QLD-svguri($QLD-icon-chevron-up);
63
- mask-repeat: no-repeat;
64
- mask-position: center;
65
- background-color: var(--QLD-color-light__action--secondary);
66
- }
67
-
68
- &.qld__accordion--closed::after {
69
- transform: rotate(-180deg);
70
- }
71
- }
72
-
73
- &__body{
74
- overflow: hidden;
75
-
76
- // only listen to the state classes if js is enabled
77
- .js & {
78
- &.qld__accordion--open {
79
- display: block;
80
- height: auto;
81
- }
82
-
83
- &.qld__accordion--closed {
84
- display: none;
85
- height: 0;
86
- }
87
- }
88
- & &-wrapper{
89
- border-top: $QLD-border-width-thin solid $QLD-color-neutral--lighter;
90
- color: var(--QLD-color-light__text);
91
- background-color: $QLD-color-neutral--white;
92
- @include QLD-space( padding, 1unit);
93
-
94
- ul{
95
- list-style: disc;
96
- @include QLD-space(margin-left, 1.25unit);
97
- }
98
- }
99
- }
100
-
101
- &__toggle{
102
- font-weight: bold;
103
- display: flex;
104
- flex-direction: row;
105
- justify-content: end;
106
- @include QLD-space(padding, .5unit 0);
107
- @include QLD-space(font-size, 0.75unit);
108
-
109
-
110
- &-btn{
111
- @include QLD-underline('light');
112
- background-color: transparent;
113
- color: var(--QLD-color-light__link);
114
- border: none;
115
- cursor: pointer;
116
- position: relative;
117
- @include QLD-space( margin-right, 0.5unit );
118
- &::after{
119
- content: ' ';
120
- position: absolute;
121
- top: 50%;
122
- @include QLD-space( margin-top, -0.5unit ); // Pull it up half of it's height
123
- @include QLD-space( right, -.5unit );
124
- @include QLD-space( width, .5unit );
125
- @include QLD-space( height, 1unit );
126
- // background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary));
127
- // background-repeat: no-repeat;
128
- // background-position: center;
129
- z-index: 101;
130
- transition: transform 0.25s ease-in;
131
- mask-image: QLD-svguri($QLD-icon-chevron-up);
132
- mask-repeat: no-repeat;
133
- mask-position: center;
134
- background-color: var(--QLD-color-light__action--secondary);
135
- }
136
- // .qld__icon{
137
- // color: var(--QLD-color-light__action--secondary);
138
- // vertical-align: middle;
139
- // transition: transform 0.25s ease-in;
140
- // @include QLD-space( margin-left, 0.5unit );
141
- // }
142
-
143
- &--closed {
144
- &::after{
145
- transform: rotate(-180deg);
146
- }
147
-
148
- }
149
- }
150
- }
151
-
152
- // Add spacing if there is an element before it
153
- * + & {
154
- @include QLD-space( margin-top, 1unit );
155
- }
156
-
157
- + .qld__accordion {
158
- @include QLD-space(
159
- border-top,
160
- solid var(--QLD-color-light__border) 0.0625unit
161
- );
162
- }
6
+ border: $QLD-border-width-thin solid $QLD-color-neutral--lighter;
7
+ display: block;
8
+ padding: 0;
9
+
10
+ &__title {
11
+ background-color: $QLD-color-neutral--lightest;
12
+ @include QLD-underline("light");
13
+ @include QLD-fontgrid(md, heading);
14
+ @include QLD-space(padding, 1unit 3unit 1unit 1unit);
15
+ width: 100%;
16
+ display: block;
17
+ color: var(--QLD-color-light__link);
18
+ font-weight: $QLD-font-weight-regular;
19
+ position: relative;
20
+ border: none;
21
+
22
+ // button resets
23
+ box-sizing: border-box;
24
+ margin: 0;
25
+ cursor: pointer;
26
+ text-align: left;
27
+ font-family: inherit;
28
+ @include QLD-focus();
29
+
30
+ &:focus {
31
+ z-index: 100;
32
+ outline: 3px solid var(--QLD-color-light__focus);
33
+ outline-offset: 2px;
34
+ }
35
+
36
+ // remove the default details arrow icon
37
+ &::-webkit-details-marker {
38
+ display: none;
39
+ }
40
+
41
+ .qld__icon {
42
+ color: var(--QLD-color-light__action--secondary);
43
+ position: absolute;
44
+ @include QLD-space(right, 1unit);
45
+ z-index: 1;
46
+ transition: transform 0.25s ease-in;
47
+ }
48
+
49
+ &:after {
50
+ content: " ";
51
+ position: absolute;
52
+ top: 50%;
53
+ @include QLD-space(margin-top, -10px); // Pull it up 10px
54
+ @include QLD-space(right, 1unit);
55
+ @include QLD-space(width, 1.5unit);
56
+ @include QLD-space(height, 1.5unit);
57
+ // background-image: QLD-svg-with-fill($QLD-icon-chevron-up, var(--QLD-color-light__action--secondary));
58
+ // background-repeat: no-repeat;
59
+ // background-position: center;
60
+ z-index: 1;
61
+ transition: transform 0.25s ease-in;
62
+ mask-image: QLD-svguri($QLD-icon-chevron-up);
63
+ mask-repeat: no-repeat;
64
+ mask-position: center;
65
+ background-color: var(--QLD-color-light__action--secondary);
66
+ }
67
+
68
+ &.qld__accordion--closed::after {
69
+ transform: rotate(-180deg);
70
+ }
71
+ }
72
+
73
+ &__body {
74
+ overflow: hidden;
75
+
76
+ // only listen to the state classes if js is enabled
77
+ .js & {
78
+ &.qld__accordion--open {
79
+ display: block;
80
+ height: auto;
81
+ }
82
+
83
+ &.qld__accordion--closed {
84
+ display: none;
85
+ height: 0;
86
+ }
87
+ }
88
+ & &-wrapper {
89
+ border-top: $QLD-border-width-thin solid $QLD-color-neutral--lighter;
90
+ color: var(--QLD-color-light__text);
91
+ background-color: $QLD-color-neutral--white;
92
+ @include QLD-space(padding, 1unit);
93
+
94
+ ul {
95
+ list-style: disc;
96
+ @include QLD-space(margin-left, 1.25unit);
97
+ }
98
+ }
99
+ }
100
+
101
+ &__toggle {
102
+ font-weight: $QLD-font-weight-semibold;
103
+ display: flex;
104
+ flex-direction: row;
105
+ justify-content: end;
106
+ @include QLD-space(padding, 0.5unit 0);
107
+ @include QLD-space(font-size, 0.75unit);
108
+
109
+ &-btn {
110
+ @include QLD-underline("light");
111
+ background-color: transparent;
112
+ color: var(--QLD-color-light__link);
113
+ border: none;
114
+ cursor: pointer;
115
+ position: relative;
116
+ @include QLD-space(margin-right, 0.5unit);
117
+ &::after {
118
+ content: " ";
119
+ position: absolute;
120
+ top: 50%;
121
+ @include QLD-space(margin-top, -0.5unit); // Pull it up half of it's height
122
+ @include QLD-space(right, -0.5unit);
123
+ @include QLD-space(width, 0.5unit);
124
+ @include QLD-space(height, 1unit);
125
+ z-index: 101;
126
+ transition: transform 0.25s ease-in;
127
+ mask-image: QLD-svguri($QLD-icon-chevron-up);
128
+ mask-repeat: no-repeat;
129
+ mask-position: center;
130
+ background-color: var(--QLD-color-light__action--secondary);
131
+ }
132
+
133
+ &--closed {
134
+ &::after {
135
+ transform: rotate(-180deg);
136
+ }
137
+ }
138
+ }
139
+ }
140
+
141
+ // Add spacing if there is an element before it
142
+ * + & {
143
+ @include QLD-space(margin-top, 1unit);
144
+ }
145
+
146
+ + .qld__accordion {
147
+ @include QLD-space(border-top, solid var(--QLD-color-light__border) 0.0625unit);
148
+ }
163
149
  }
164
150
 
165
- .qld__body--dark, .qld__body--dark-alt {
166
- .qld__accordion {
167
- &__title {
168
-
169
- &:focus {
170
- outline: 3px solid var(--QLD-color-dark__focus);
171
- outline-offset: 2px
172
- }
173
- }
174
- }
151
+ .qld__body--dark,
152
+ .qld__body--dark-alt {
153
+ .qld__accordion {
154
+ &__title {
155
+ &:focus {
156
+ outline: 3px solid var(--QLD-color-dark__focus);
157
+ outline-offset: 2px;
158
+ }
159
+ }
160
+ }
175
161
  }
176
162
 
177
163
  .qld__accordion-group {
178
- list-style: none;
179
- padding: 0;
180
- @include QLD-space(max-width, 47unit);
181
-
182
- &:last-child{
183
- @include QLD-space(margin-bottom, 0unit);
184
- }
185
-
186
- ul {
187
- list-style: none;
188
- padding: 0;
189
- margin: 0;
190
- }
191
-
192
- .qld__accordion__toggle-btn{
193
-
194
- .qld__body--dark &,
195
- .qld__body--dark-alt &{
196
- color: var(--QLD-color-dark__link);
197
- @include QLD-underline('dark');
198
-
199
- &::after{
200
- background-color: var(--QLD-color-dark__action--secondary);
201
- }
202
-
203
- }
204
- }
205
-
206
- &--light{
207
- .qld__accordion{
208
- border-color: var(--QLD-color-light__border);
209
- }
210
-
211
- .qld__accordion__title{
212
- background-color: var(--QLD-color-light__background--shade);
213
- }
214
-
215
- .qld__accordion__body-wrapper{
216
- background-color: var(--QLD-color-light__background);
217
- border-color: var(--QLD-color-light__border);
218
- }
219
- }
220
-
221
- &--alt{
222
- .qld__accordion{
223
- border-color: var(--QLD-color-light__border--alt);
224
- }
225
-
226
- .qld__accordion__title{
227
- background-color: var(--QLD-color-light__background--alt-shade);
228
- }
229
-
230
- .qld__accordion__body-wrapper{
231
- background-color: var(--QLD-color-light__background--alt);
232
- border-color: var(--QLD-color-light__border--alt);
233
- }
234
- }
235
-
236
- &--dark{
237
- .qld__accordion{
238
- border-color: var(--QLD-color-dark__border);
239
- }
240
-
241
- .qld__accordion__title{
242
- @include QLD-underline('dark');
243
- background-color: var(--QLD-color-dark__background--shade);
244
- color: var(--QLD-color-dark__link);
245
-
246
- &::after{
247
- background-color: var(--QLD-color-dark__action--secondary);
248
- }
249
-
250
- }
251
-
252
- .qld__accordion__body-wrapper{
253
- background-color: var(--QLD-color-dark__background);
254
- border-color: var(--QLD-color-dark__border);
255
- color: var(--QLD-color-dark__text);
256
-
257
- a{
258
- color: var(--QLD-color-dark__link);
259
- @include QLD-underline('dark');
260
- }
261
- }
262
- }
263
-
264
- &--dark-alt{
265
- .qld__accordion{
266
- border-color: var(--QLD-color-dark__border--alt);
267
- }
268
-
269
- .qld__accordion__title{
270
- @include QLD-underline('dark');
271
- background-color: var(--QLD-color-dark__background--alt-shade);
272
- color: var(--QLD-color-dark__link);
273
-
274
- &::after{
275
- background-color: var(--QLD-color-dark__action--secondary);
276
- }
277
- }
278
-
279
- .qld__accordion__body-wrapper{
280
- background-color: var(--QLD-color-dark__background--alt);
281
- border-color: var(--QLD-color-dark__border--alt);
282
- color: var(--QLD-color-dark__text);
283
-
284
- a{
285
- color: var(--QLD-color-dark__link);
286
- @include QLD-underline('dark');
287
- }
288
- }
289
- }
164
+ list-style: none;
165
+ padding: 0;
166
+ @include QLD-space(max-width, 47unit);
167
+
168
+ &:last-child {
169
+ @include QLD-space(margin-bottom, 0unit);
170
+ }
171
+
172
+ ul {
173
+ list-style: none;
174
+ padding: 0;
175
+ margin: 0;
176
+ }
177
+
178
+ .qld__accordion__toggle-btn {
179
+ .qld__body--dark &,
180
+ .qld__body--dark-alt & {
181
+ color: var(--QLD-color-dark__link);
182
+ @include QLD-underline("dark");
183
+
184
+ &::after {
185
+ background-color: var(--QLD-color-dark__action--secondary);
186
+ }
187
+ }
188
+ }
189
+
190
+ &--light {
191
+ .qld__accordion {
192
+ border-color: var(--QLD-color-light__border);
193
+ }
194
+
195
+ .qld__accordion__title {
196
+ background-color: var(--QLD-color-light__background--shade);
197
+ }
198
+
199
+ .qld__accordion__body-wrapper {
200
+ background-color: var(--QLD-color-light__background);
201
+ border-color: var(--QLD-color-light__border);
202
+ }
203
+ }
204
+
205
+ &--alt {
206
+ .qld__accordion {
207
+ border-color: var(--QLD-color-light__border--alt);
208
+ }
209
+
210
+ .qld__accordion__title {
211
+ background-color: var(--QLD-color-light__background--alt-shade);
212
+ }
213
+
214
+ .qld__accordion__body-wrapper {
215
+ background-color: var(--QLD-color-light__background--alt);
216
+ border-color: var(--QLD-color-light__border--alt);
217
+ }
218
+ }
219
+
220
+ &--dark {
221
+ .qld__accordion {
222
+ border-color: var(--QLD-color-dark__border);
223
+ }
224
+
225
+ .qld__accordion__title {
226
+ @include QLD-underline("dark");
227
+ background-color: var(--QLD-color-dark__background--shade);
228
+ color: var(--QLD-color-dark__link);
229
+
230
+ &::after {
231
+ background-color: var(--QLD-color-dark__action--secondary);
232
+ }
233
+ }
234
+
235
+ .qld__accordion__body-wrapper {
236
+ background-color: var(--QLD-color-dark__background);
237
+ border-color: var(--QLD-color-dark__border);
238
+ color: var(--QLD-color-dark__text);
239
+
240
+ a {
241
+ color: var(--QLD-color-dark__link);
242
+ @include QLD-underline("dark");
243
+ }
244
+ }
245
+ }
246
+
247
+ &--dark-alt {
248
+ .qld__accordion {
249
+ border-color: var(--QLD-color-dark__border--alt);
250
+ }
251
+
252
+ .qld__accordion__title {
253
+ @include QLD-underline("dark");
254
+ background-color: var(--QLD-color-dark__background--alt-shade);
255
+ color: var(--QLD-color-dark__link);
256
+
257
+ &::after {
258
+ background-color: var(--QLD-color-dark__action--secondary);
259
+ }
260
+ }
261
+
262
+ .qld__accordion__body-wrapper {
263
+ background-color: var(--QLD-color-dark__background--alt);
264
+ border-color: var(--QLD-color-dark__border--alt);
265
+ color: var(--QLD-color-dark__text);
266
+
267
+ a {
268
+ color: var(--QLD-color-dark__link);
269
+ @include QLD-underline("dark");
270
+ }
271
+ }
272
+ }
290
273
  }
291
274
 
292
275
  .qld__accordion + .qld__accordion {
293
- margin-top: 0;
294
- border-top: 0;
276
+ margin-top: 0;
277
+ border-top: 0;
295
278
  }
296
279
 
297
-
298
280
  li + li .qld__accordion {
299
- border-top: none;
281
+ border-top: none;
300
282
  }
301
283
 
302
- // .main {
303
- // * {
304
- // + .qld__accordion,
305
- // + .qld__accordion-group {
306
- // @include QLD-space(margin-top, 1.5unit);
307
- // @include QLD-space(margin-bottom, 1.5unit);
308
-
309
- // @include QLD-media(lg) {
310
- // @include QLD-space(margin-top, 2unit);
311
- // }
312
-
313
- // &:last-child{
314
- // @include QLD-space(margin-bottom, 0unit);
315
- // }
316
- // }
317
- // }
318
- // }
319
-
320
-
321
284
  @media print {
322
- .qld__accordion {
323
- border-color: #000 !important;
324
- color: #000 !important;
325
- }
326
-
327
- .qld__accordion__title {
328
- background: #fff !important;
329
- color: #000 !important;
330
- border: 1px !important;
331
-
332
- &:after {
333
- display: none;
334
- }
335
- }
336
-
337
- .qld__accordion__body-wrapper {
338
- border-color: #000 !important;
339
- }
340
-
341
- .qld__accordion__body {
342
- height: auto !important;
343
- display: block !important;
344
- }
345
- }
285
+ .qld__accordion {
286
+ border-color: #000 !important;
287
+ color: #000 !important;
288
+ }
289
+
290
+ .qld__accordion__title {
291
+ background: #fff !important;
292
+ color: #000 !important;
293
+ border: 1px !important;
294
+
295
+ &:after {
296
+ display: none;
297
+ }
298
+ }
299
+
300
+ .qld__accordion__body-wrapper {
301
+ border-color: #000 !important;
302
+ }
303
+
304
+ .qld__accordion__body {
305
+ height: auto !important;
306
+ display: block !important;
307
+ }
308
+ }