qc-trousse-sdg 1.4.4 → 1.4.6
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/README.md +81 -53
- package/dist/css/qc-sdg-design-tokens.min.css +1 -1
- package/dist/css/qc-sdg-no-grid.min.css +1 -1
- package/dist/css/qc-sdg.min.css +1 -1
- package/dist/img/QUEBEC_blanc.svg +3 -12
- package/dist/img/QUEBEC_couleur.svg +3 -23
- package/dist/js/qc-sdg.min.js +1 -1
- package/index.html +1 -1
- package/package.json +1 -1
- package/plugins/buildHtmlDoc.js +5 -1
- package/public/css/qc-doc-sdg.css +31 -28
- package/public/css/qc-sdg-design-tokens.css +0 -2
- package/public/css/qc-sdg-no-grid.css +158 -112
- package/public/css/qc-sdg.css +158 -112
- package/public/img/QUEBEC_blanc.svg +3 -12
- package/public/img/QUEBEC_couleur.svg +3 -23
- package/public/img/favicon.ico +0 -0
- package/public/index.html +37 -31
- package/public/js/qc-doc-sdg.js +7550 -4468
- package/public/js/qc-sdg.js +10295 -7247
- package/rollup.config.js +3 -4
- package/src/doc/_index.html +3 -0
- package/src/doc/components/Code.svelte +13 -5
- package/src/doc/components/Exemple.svelte +0 -13
- package/src/doc/scss/components/_code.scss +4 -21
- package/src/doc/scss/components/_exemple.scss +21 -0
- package/src/doc/scss/qc-doc-sdg.scss +1 -0
- package/src/sdg/_components.js +0 -1
- package/src/sdg/bases/form/_form.scss +0 -4
- package/src/sdg/bases/links/_links.html +10 -10
- package/src/sdg/components/Alert/Alert.svelte +1 -1
- package/src/sdg/components/Alert/_alert.html +2 -2
- package/src/sdg/components/Checkbox/Checkbox.svelte +3 -3
- package/src/sdg/components/Checkbox/CheckboxWC.svelte +3 -3
- package/src/sdg/components/Checkbox/{updateInput.svelte.js → updateChoiceInput.svelte.js} +6 -1
- package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte +2 -2
- package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte +3 -0
- package/src/sdg/components/ChoiceGroup/Test/checkboxBaselineTest.html +3 -0
- package/src/sdg/components/ChoiceGroup/_choiceGroup.html +0 -2
- package/src/sdg/components/DropdownList/DropdownList.svelte +4 -7
- package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte +1 -6
- package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss +3 -8
- package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss +1 -2
- package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss +2 -4
- package/src/sdg/components/DropdownList/SelectWC.svelte +31 -50
- package/src/sdg/components/DropdownList/Test/DropdownListSvelteTest.svelte +37 -2
- package/src/sdg/components/DropdownList/Test/{dropdownListTest.html → dropdownListBaselineTest.html} +19 -1
- package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js +14 -0
- package/src/sdg/components/DropdownList/_dropdownList.scss +11 -16
- package/src/sdg/components/DropdownList/_select.html +9 -0
- package/src/sdg/components/Fieldset/_fieldset.scss +17 -4
- package/src/sdg/components/FormfieldRow/_formfieldRow.html +7 -7
- package/src/sdg/components/Label/_label.scss +1 -0
- package/src/sdg/components/Notice/_notice.html +3 -3
- package/src/sdg/components/PivFooter/PivFooter.svelte +2 -2
- package/src/sdg/components/PivHeader/PivHeader.svelte +79 -74
- package/src/sdg/components/PivHeader/Test/pivHeaderBaselineTest.html +14 -3
- package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte +2 -1
- package/src/sdg/components/PivHeader/Test/pivHeaderTest.js +9 -0
- package/src/sdg/components/PivHeader/_pivHeader.html +3 -2
- package/src/sdg/components/PivHeader/_pivHeader.scss +52 -23
- package/src/sdg/components/TextField/Test/textFieldBaselineTest.html +24 -5
- package/src/sdg/components/TextField/TextField.svelte +29 -25
- package/src/sdg/components/TextField/TextFieldWC.svelte +18 -8
- package/src/sdg/components/TextField/_textField.html +0 -5
- package/src/sdg/components/TextField/_textField.scss +6 -13
- package/src/sdg/components/utils.js +55 -14
- package/src/sdg/qc-sdg-test.js +4 -0
- package/src/sdg/scss/settings/_tokens.scss +0 -4
- package/tests/buildSvelteTestsIgnore.json +2 -1
- package/tests/dropdown-list-baseline.spec.ts +51 -4
- package/tests/piv-header-baseline.spec.ts +3 -0
- package/src/sdg/components/Button/Button.svelte +0 -50
- package/src/sdg/components/Button/ButtonWC.svelte +0 -36
- package/src/sdg/components/CharCount/_charCount.html +0 -7
- package/src/sdg/components/RadioButton/_radioButton.html +0 -24
- package/tests/piv-header-svelte.spec.ts +0 -11
package/index.html
CHANGED
package/package.json
CHANGED
package/plugins/buildHtmlDoc.js
CHANGED
|
@@ -29,7 +29,11 @@ function buildHtmlDoc({ input, output }) {
|
|
|
29
29
|
if (html.includes(marker)) {
|
|
30
30
|
html = html.replace(new RegExp(marker, 'g'), content);
|
|
31
31
|
} else {
|
|
32
|
-
|
|
32
|
+
const ignoredPartials = ['_dev.html', '_test.html'];
|
|
33
|
+
|
|
34
|
+
if (!ignoredPartials.includes(partialName)) {
|
|
35
|
+
this.warn(`⚠️ Le partiel "${partialName}" n'est pas utilisé dans ${inputFileName}`);
|
|
36
|
+
}
|
|
33
37
|
}
|
|
34
38
|
}
|
|
35
39
|
|
|
@@ -8,38 +8,17 @@ pre {
|
|
|
8
8
|
padding: 0;
|
|
9
9
|
white-space: pre-wrap;
|
|
10
10
|
overflow: auto;
|
|
11
|
+
position: relative;
|
|
11
12
|
}
|
|
12
13
|
pre code, pre .qc-code {
|
|
13
14
|
font-family: var(--qc-font-family-code);
|
|
14
15
|
}
|
|
15
16
|
pre code button, pre .qc-code button {
|
|
16
17
|
float: right;
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
color: white;
|
|
21
|
-
background-color: var(--qc-color-blue-piv);
|
|
22
|
-
border: 1px solid;
|
|
18
|
+
position: absolute;
|
|
19
|
+
right: var(--qc-spacer-sm);
|
|
20
|
+
top: var(--qc-spacer-sm);
|
|
23
21
|
white-space: nowrap;
|
|
24
|
-
transition: none !important;
|
|
25
|
-
}
|
|
26
|
-
pre code button .copy, pre .qc-code button .copy {
|
|
27
|
-
display: inline;
|
|
28
|
-
}
|
|
29
|
-
pre code button .copied, pre .qc-code button .copied {
|
|
30
|
-
display: none;
|
|
31
|
-
}
|
|
32
|
-
pre code button.copied, pre .qc-code button.copied {
|
|
33
|
-
background-color: transparent !important;
|
|
34
|
-
border-color: transparent !important;
|
|
35
|
-
box-shadow: none !important;
|
|
36
|
-
color: var(--qc-color-blue-piv) !important;
|
|
37
|
-
}
|
|
38
|
-
pre code button.copied .copy, pre .qc-code button.copied .copy {
|
|
39
|
-
display: none;
|
|
40
|
-
}
|
|
41
|
-
pre code button.copied .copied, pre .qc-code button.copied .copied {
|
|
42
|
-
display: inline;
|
|
43
22
|
}
|
|
44
23
|
|
|
45
24
|
@keyframes fadeout {
|
|
@@ -171,6 +150,24 @@ code.hljs {
|
|
|
171
150
|
font-weight: bold;
|
|
172
151
|
}
|
|
173
152
|
|
|
153
|
+
.exemple-area > figure {
|
|
154
|
+
display: block;
|
|
155
|
+
max-width: var(--qc-max-content-width);
|
|
156
|
+
width: 100%;
|
|
157
|
+
margin-bottom: var(--qc-spacer-content-block-mb);
|
|
158
|
+
padding-bottom: 1px;
|
|
159
|
+
}
|
|
160
|
+
.exemple-area > figure .exemple {
|
|
161
|
+
padding: var(--qc-spacer-sm) var(--qc-spacer-sm) var(--qc-spacer-sm) var(--qc-spacer-sm);
|
|
162
|
+
border: 1px solid var(--qc-box_shadow-0-color);
|
|
163
|
+
}
|
|
164
|
+
.exemple-area > figure .exemple > *:last-child {
|
|
165
|
+
margin-bottom: 0;
|
|
166
|
+
}
|
|
167
|
+
.exemple-area > figure > figcaption {
|
|
168
|
+
display: block;
|
|
169
|
+
}
|
|
170
|
+
|
|
174
171
|
table.qc-table {
|
|
175
172
|
margin-bottom: 0;
|
|
176
173
|
background-color: var(--qc-color-white);
|
|
@@ -178,9 +175,6 @@ table.qc-table {
|
|
|
178
175
|
max-width: 100%;
|
|
179
176
|
overflow: auto;
|
|
180
177
|
border-collapse: collapse;
|
|
181
|
-
/* ----- Striped tables ----- */
|
|
182
|
-
/* ----- Bordered tables ----- */
|
|
183
|
-
/* ----- TODO add footer style ----- */
|
|
184
178
|
}
|
|
185
179
|
table.qc-table > thead {
|
|
186
180
|
background-color: var(--qc-color-blue-dark);
|
|
@@ -197,12 +191,21 @@ table.qc-table thead th, table.qc-table tbody th, table.qc-table tbody td {
|
|
|
197
191
|
text-align: left;
|
|
198
192
|
padding: var(--qc-spacer-xs);
|
|
199
193
|
}
|
|
194
|
+
table.qc-table {
|
|
195
|
+
/* ----- Striped tables ----- */
|
|
196
|
+
}
|
|
200
197
|
table.qc-table.qc-striped tbody tr:nth-of-type(even) {
|
|
201
198
|
background-color: var(--qc-color-grey-pale);
|
|
202
199
|
}
|
|
200
|
+
table.qc-table {
|
|
201
|
+
/* ----- Bordered tables ----- */
|
|
202
|
+
}
|
|
203
203
|
table.qc-table.qc-bordered tbody th, table.qc-table.qc-bordered tbody td {
|
|
204
204
|
border-bottom: 1px solid var(--qc-color-grey-light);
|
|
205
205
|
}
|
|
206
|
+
table.qc-table {
|
|
207
|
+
/* ----- TODO add footer style ----- */
|
|
208
|
+
}
|
|
206
209
|
|
|
207
210
|
.ui-autocomplete {
|
|
208
211
|
max-height: calc(16rem + 2px) !important;
|
|
@@ -154,8 +154,6 @@
|
|
|
154
154
|
--qc-size-max-width-md: 24.9rem;
|
|
155
155
|
--qc-size-max-width-lg: 52.8rem;
|
|
156
156
|
--qc-size-max-width-xl: 82.5rem;
|
|
157
|
-
--qc-size-input-max-width: var(--qc-size-max-width-md);
|
|
158
|
-
--qc-size-textarea-max-width: var(--qc-size-max-width-lg);
|
|
159
157
|
--qc-size-textarea-min-height: 10.8rem;
|
|
160
158
|
--qc-size-search-bar-max-width: 64rem;
|
|
161
159
|
--qc-grid-gutter: 32px;
|
|
@@ -223,8 +223,6 @@ label.qc-choicefield-label input.qc-choicefield.qc-compact {
|
|
|
223
223
|
--qc-size-max-width-md: 24.9rem;
|
|
224
224
|
--qc-size-max-width-lg: 52.8rem;
|
|
225
225
|
--qc-size-max-width-xl: 82.5rem;
|
|
226
|
-
--qc-size-input-max-width: var(--qc-size-max-width-md);
|
|
227
|
-
--qc-size-textarea-max-width: var(--qc-size-max-width-lg);
|
|
228
226
|
--qc-size-textarea-min-height: 10.8rem;
|
|
229
227
|
--qc-size-search-bar-max-width: 64rem;
|
|
230
228
|
--qc-grid-gutter: 32px;
|
|
@@ -596,10 +594,6 @@ legend {
|
|
|
596
594
|
padding: 0;
|
|
597
595
|
}
|
|
598
596
|
|
|
599
|
-
qc-select select {
|
|
600
|
-
appearance: none;
|
|
601
|
-
}
|
|
602
|
-
|
|
603
597
|
h1, .qc-h1 {
|
|
604
598
|
font-family: var(--qc-font-family-header);
|
|
605
599
|
font-size: var(--qc-font-size-h1);
|
|
@@ -1378,7 +1372,6 @@ hr {
|
|
|
1378
1372
|
|
|
1379
1373
|
qc-notice {
|
|
1380
1374
|
display: block;
|
|
1381
|
-
margin-bottom: 3.2rem;
|
|
1382
1375
|
}
|
|
1383
1376
|
qc-notice h1, qc-notice h2, qc-notice h3, qc-notice h4, qc-notice h5, qc-notice h6, qc-notice [role=heading] {
|
|
1384
1377
|
margin: 0;
|
|
@@ -1391,18 +1384,21 @@ qc-notice h1, qc-notice h2, qc-notice h3, qc-notice h4, qc-notice h5, qc-notice
|
|
|
1391
1384
|
qc-notice ul {
|
|
1392
1385
|
padding-left: var(--qc-spacer-sm) !important;
|
|
1393
1386
|
}
|
|
1394
|
-
qc-notice[type=error] ul li {
|
|
1395
|
-
color: var(--qc-color-red-regular);
|
|
1396
|
-
}
|
|
1397
1387
|
qc-notice[type=error] ul li::marker {
|
|
1398
1388
|
color: var(--qc-color-text-primary);
|
|
1399
1389
|
}
|
|
1390
|
+
qc-notice[type=error] ul li {
|
|
1391
|
+
color: var(--qc-color-red-regular);
|
|
1392
|
+
}
|
|
1400
1393
|
qc-notice[type=error] ul li a {
|
|
1401
1394
|
color: inherit;
|
|
1402
1395
|
}
|
|
1403
1396
|
qc-notice[type=error] ul li a:hover, qc-notice[type=error] ul li a:focus {
|
|
1404
1397
|
text-decoration: none;
|
|
1405
1398
|
}
|
|
1399
|
+
qc-notice {
|
|
1400
|
+
margin-bottom: 3.2rem;
|
|
1401
|
+
}
|
|
1406
1402
|
|
|
1407
1403
|
.qc-piv-header .piv-top .right-section .links ul, qc-piv-header [slot=links], qc-piv-header [slot=links] ul {
|
|
1408
1404
|
list-style: none;
|
|
@@ -1437,28 +1433,44 @@ qc-piv-header {
|
|
|
1437
1433
|
}
|
|
1438
1434
|
.qc-piv-header .piv-top {
|
|
1439
1435
|
display: flex;
|
|
1436
|
+
flex-wrap: nowrap;
|
|
1437
|
+
gap: var(--qc-spacer-sm);
|
|
1440
1438
|
align-items: start;
|
|
1441
1439
|
min-width: 7.2rem;
|
|
1442
1440
|
}
|
|
1443
|
-
.qc-piv-header .piv-top .
|
|
1441
|
+
.qc-piv-header .piv-top .signature-group {
|
|
1444
1442
|
display: flex;
|
|
1445
|
-
flex-
|
|
1446
|
-
|
|
1443
|
+
flex-grow: 1;
|
|
1444
|
+
flex-wrap: wrap;
|
|
1445
|
+
align-items: start;
|
|
1446
|
+
margin-right: auto;
|
|
1447
1447
|
}
|
|
1448
|
-
.qc-piv-header .piv-top .
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1448
|
+
.qc-piv-header .piv-top .signature-group > * {
|
|
1449
|
+
min-height: 7.2rem;
|
|
1450
|
+
}
|
|
1451
|
+
.qc-piv-header .piv-top .signature-group .logo {
|
|
1452
|
+
display: flex;
|
|
1453
|
+
align-items: center;
|
|
1454
|
+
flex-basis: 26.4rem;
|
|
1455
|
+
}
|
|
1456
|
+
.qc-piv-header .piv-top .signature-group .logo a {
|
|
1457
|
+
display: flex;
|
|
1458
|
+
height: fit-content;
|
|
1459
|
+
width: fit-content;
|
|
1460
|
+
outline-offset: 0.4rem;
|
|
1461
|
+
}
|
|
1462
|
+
.qc-piv-header .piv-top .signature-group .logo a img {
|
|
1463
|
+
display: flex;
|
|
1464
|
+
flex-basis: min-content;
|
|
1454
1465
|
min-width: 150px;
|
|
1455
1466
|
width: 100%;
|
|
1467
|
+
height: 100%;
|
|
1456
1468
|
max-width: 20rem;
|
|
1457
|
-
min-height:
|
|
1469
|
+
min-height: 4rem;
|
|
1458
1470
|
}
|
|
1459
1471
|
.qc-piv-header .piv-top .title {
|
|
1460
|
-
|
|
1461
|
-
align-
|
|
1472
|
+
display: block;
|
|
1473
|
+
align-content: center;
|
|
1462
1474
|
}
|
|
1463
1475
|
.qc-piv-header .piv-top .right-section {
|
|
1464
1476
|
min-width: fit-content;
|
|
@@ -1503,16 +1515,17 @@ qc-piv-header {
|
|
|
1503
1515
|
padding-bottom: var(--qc-spacer-md);
|
|
1504
1516
|
}
|
|
1505
1517
|
|
|
1518
|
+
.page-title {
|
|
1519
|
+
display: inline-block;
|
|
1520
|
+
}
|
|
1521
|
+
|
|
1506
1522
|
qc-piv-header a,
|
|
1507
1523
|
.qc-piv-header a {
|
|
1508
|
-
--qc-color-link-focus-outline:
|
|
1524
|
+
--qc-color-link-focus-outline: #dae6f0;
|
|
1509
1525
|
--qc-color-link-hover: white;
|
|
1510
1526
|
--qc-color-link-text: white;
|
|
1511
1527
|
--qc-color-link-visited: white;
|
|
1512
1528
|
--qc-color-link-active: white;
|
|
1513
|
-
font-family: var(--qc-font-family-header);
|
|
1514
|
-
text-decoration: none;
|
|
1515
|
-
font-weight: var(--qc-font-weight-regular);
|
|
1516
1529
|
}
|
|
1517
1530
|
qc-piv-header a:hover,
|
|
1518
1531
|
.qc-piv-header a:hover {
|
|
@@ -1523,6 +1536,13 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
|
|
|
1523
1536
|
.qc-piv-header a:focus:has(img) {
|
|
1524
1537
|
outline-offset: -2px;
|
|
1525
1538
|
}
|
|
1539
|
+
qc-piv-header a, qc-piv-header span,
|
|
1540
|
+
.qc-piv-header a,
|
|
1541
|
+
.qc-piv-header span {
|
|
1542
|
+
font-family: var(--qc-font-family-header);
|
|
1543
|
+
text-decoration: none;
|
|
1544
|
+
font-weight: var(--qc-font-weight-regular);
|
|
1545
|
+
}
|
|
1526
1546
|
|
|
1527
1547
|
.go-to-content {
|
|
1528
1548
|
display: flex;
|
|
@@ -1557,10 +1577,6 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
|
|
|
1557
1577
|
margin-right: auto;
|
|
1558
1578
|
min-width: 0;
|
|
1559
1579
|
}
|
|
1560
|
-
.qc-piv-header .piv-top .logo img {
|
|
1561
|
-
width: 100%;
|
|
1562
|
-
margin-right: 1.6rem;
|
|
1563
|
-
}
|
|
1564
1580
|
.qc-piv-header .piv-top .title {
|
|
1565
1581
|
display: none;
|
|
1566
1582
|
}
|
|
@@ -1580,6 +1596,12 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
|
|
|
1580
1596
|
flex-wrap: wrap;
|
|
1581
1597
|
}
|
|
1582
1598
|
}
|
|
1599
|
+
.no-link-title {
|
|
1600
|
+
margin: 0;
|
|
1601
|
+
font-weight: var(--qc-font-weight-regular);
|
|
1602
|
+
font-size: var(--qc-font-size-md);
|
|
1603
|
+
}
|
|
1604
|
+
|
|
1583
1605
|
qc-piv-footer {
|
|
1584
1606
|
margin-top: 4rem;
|
|
1585
1607
|
padding-bottom: 4rem;
|
|
@@ -1672,8 +1694,6 @@ qc-piv-footer a:hover {
|
|
|
1672
1694
|
z-index: 10;
|
|
1673
1695
|
background: transparent;
|
|
1674
1696
|
border: 0;
|
|
1675
|
-
flex-shrink: 0;
|
|
1676
|
-
cursor: pointer;
|
|
1677
1697
|
}
|
|
1678
1698
|
.qc-general-alert button::before {
|
|
1679
1699
|
position: absolute;
|
|
@@ -1689,9 +1709,15 @@ qc-piv-footer a:hover {
|
|
|
1689
1709
|
.qc-general-alert button:has(input:focus)::before, .qc-general-alert button:focus::before, .qc-general-alert button:has(textarea:focus)::before {
|
|
1690
1710
|
border: 2px solid var(--qc-color-formfield-focus-border);
|
|
1691
1711
|
}
|
|
1712
|
+
.qc-general-alert button {
|
|
1713
|
+
flex-shrink: 0;
|
|
1714
|
+
}
|
|
1692
1715
|
.qc-general-alert button::before {
|
|
1693
1716
|
background: transparent;
|
|
1694
1717
|
}
|
|
1718
|
+
.qc-general-alert button {
|
|
1719
|
+
cursor: pointer;
|
|
1720
|
+
}
|
|
1695
1721
|
|
|
1696
1722
|
qc-alert {
|
|
1697
1723
|
display: block;
|
|
@@ -1703,6 +1729,11 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
|
|
|
1703
1729
|
color: var(--qc-color-blue-piv);
|
|
1704
1730
|
}
|
|
1705
1731
|
|
|
1732
|
+
.qc-to-top[demo=false] {
|
|
1733
|
+
position: fixed;
|
|
1734
|
+
bottom: 9.6rem;
|
|
1735
|
+
right: 3.2rem;
|
|
1736
|
+
}
|
|
1706
1737
|
.qc-to-top {
|
|
1707
1738
|
display: flex;
|
|
1708
1739
|
z-index: 99;
|
|
@@ -1717,11 +1748,6 @@ qc-alert [slot] a, qc-alert:not([slot=content]) a {
|
|
|
1717
1748
|
background-size: 1.6rem 2rem;
|
|
1718
1749
|
box-shadow: 0 var(--qc-box_shadow-1-offset) var(--qc-box_shadow-1-blur) var(--qc-color-box_shadow);
|
|
1719
1750
|
}
|
|
1720
|
-
.qc-to-top[demo=false] {
|
|
1721
|
-
position: fixed;
|
|
1722
|
-
bottom: 9.6rem;
|
|
1723
|
-
right: 3.2rem;
|
|
1724
|
-
}
|
|
1725
1751
|
.qc-to-top[style*=block] {
|
|
1726
1752
|
display: flex !important;
|
|
1727
1753
|
}
|
|
@@ -1767,13 +1793,13 @@ qc-search-input {
|
|
|
1767
1793
|
.qc-search-bar::before, .qc-search-input::before {
|
|
1768
1794
|
border: 1px solid var(--qc-color-formfield-border);
|
|
1769
1795
|
}
|
|
1796
|
+
.qc-search-bar button::before, .qc-search-input button::before {
|
|
1797
|
+
background: transparent;
|
|
1798
|
+
}
|
|
1770
1799
|
.qc-search-bar button, .qc-search-input button {
|
|
1771
1800
|
width: 4rem;
|
|
1772
1801
|
flex-shrink: 0;
|
|
1773
1802
|
}
|
|
1774
|
-
.qc-search-bar button::before, .qc-search-input button::before {
|
|
1775
|
-
background: transparent;
|
|
1776
|
-
}
|
|
1777
1803
|
|
|
1778
1804
|
.qc-search-input.qc-search-left-icon-disabled qc-icon, .qc-search-input.qc-search-left-icon-disabled::before {
|
|
1779
1805
|
background-color: var(--qc-color-grey-pale);
|
|
@@ -1809,12 +1835,12 @@ qc-search-input {
|
|
|
1809
1835
|
.qc-search-input.qc-search-left-icon {
|
|
1810
1836
|
padding-left: var(--qc-spacer-xs);
|
|
1811
1837
|
}
|
|
1812
|
-
.qc-search-input button {
|
|
1813
|
-
cursor: pointer;
|
|
1814
|
-
}
|
|
1815
1838
|
.qc-search-input button::before {
|
|
1816
1839
|
background: transparent;
|
|
1817
1840
|
}
|
|
1841
|
+
.qc-search-input button {
|
|
1842
|
+
cursor: pointer;
|
|
1843
|
+
}
|
|
1818
1844
|
qc-search-bar {
|
|
1819
1845
|
position: relative;
|
|
1820
1846
|
display: block;
|
|
@@ -1877,8 +1903,6 @@ label.qc-selection-button {
|
|
|
1877
1903
|
z-index: 10;
|
|
1878
1904
|
background: transparent;
|
|
1879
1905
|
border: 0;
|
|
1880
|
-
padding: var(--qc-spacer-sm);
|
|
1881
|
-
min-width: 100%;
|
|
1882
1906
|
}
|
|
1883
1907
|
label.qc-selection-button::before {
|
|
1884
1908
|
position: absolute;
|
|
@@ -1894,6 +1918,10 @@ label.qc-selection-button:has(input:focus), label.qc-selection-button:focus, lab
|
|
|
1894
1918
|
label.qc-selection-button:has(input:focus)::before, label.qc-selection-button:focus::before, label.qc-selection-button:has(textarea:focus)::before {
|
|
1895
1919
|
border: 2px solid var(--qc-color-formfield-focus-border);
|
|
1896
1920
|
}
|
|
1921
|
+
label.qc-selection-button {
|
|
1922
|
+
padding: var(--qc-spacer-sm);
|
|
1923
|
+
min-width: 100%;
|
|
1924
|
+
}
|
|
1897
1925
|
label.qc-selection-button::before {
|
|
1898
1926
|
border-style: solid;
|
|
1899
1927
|
border-width: 0.1rem;
|
|
@@ -2048,7 +2076,7 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
|
|
|
2048
2076
|
gap: 0 3.2rem;
|
|
2049
2077
|
flex-wrap: wrap;
|
|
2050
2078
|
margin-bottom: 3.2rem;
|
|
2051
|
-
margin-top: -
|
|
2079
|
+
margin-top: calc(-1 * var(--qc-spacer-xs));
|
|
2052
2080
|
}
|
|
2053
2081
|
.qc-formfield-row > .qc-form-error {
|
|
2054
2082
|
width: 100%;
|
|
@@ -2056,13 +2084,38 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
|
|
|
2056
2084
|
.qc-formfield-row qc-textfield,
|
|
2057
2085
|
.qc-formfield-row .qc-textfield {
|
|
2058
2086
|
margin-top: var(--qc-spacer-xs);
|
|
2059
|
-
display: block;
|
|
2060
|
-
width: auto;
|
|
2061
2087
|
margin-bottom: 0;
|
|
2088
|
+
min-width: 0;
|
|
2089
|
+
}
|
|
2090
|
+
.qc-formfield-row qc-textfield [size=xs] input,
|
|
2091
|
+
.qc-formfield-row .qc-textfield [size=xs] input {
|
|
2092
|
+
width: 6.3rem;
|
|
2093
|
+
max-width: 6.3rem;
|
|
2094
|
+
}
|
|
2095
|
+
.qc-formfield-row qc-textfield [size=sm] input,
|
|
2096
|
+
.qc-formfield-row .qc-textfield [size=sm] input {
|
|
2097
|
+
width: 15.6rem;
|
|
2098
|
+
max-width: 15.6rem;
|
|
2099
|
+
}
|
|
2100
|
+
.qc-formfield-row qc-textfield [size=md] input,
|
|
2101
|
+
.qc-formfield-row .qc-textfield [size=md] input {
|
|
2102
|
+
width: 24.9rem;
|
|
2103
|
+
max-width: 24.9rem;
|
|
2104
|
+
}
|
|
2105
|
+
.qc-formfield-row qc-textfield [size=lg] input,
|
|
2106
|
+
.qc-formfield-row .qc-textfield [size=lg] input {
|
|
2107
|
+
width: 52.8rem;
|
|
2108
|
+
max-width: 52.8rem;
|
|
2109
|
+
}
|
|
2110
|
+
.qc-formfield-row qc-textfield [size=xl] input,
|
|
2111
|
+
.qc-formfield-row .qc-textfield [size=xl] input {
|
|
2112
|
+
width: 82.5rem;
|
|
2113
|
+
max-width: 82.5rem;
|
|
2062
2114
|
}
|
|
2063
|
-
.qc-formfield-row .qc-
|
|
2115
|
+
.qc-formfield-row .qc-select {
|
|
2064
2116
|
margin-top: var(--qc-spacer-xs);
|
|
2065
2117
|
margin-bottom: 0;
|
|
2118
|
+
width: fit-content;
|
|
2066
2119
|
}
|
|
2067
2120
|
|
|
2068
2121
|
input[type=checkbox].qc-choicefield:checked {
|
|
@@ -2117,6 +2170,7 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
|
|
|
2117
2170
|
.qc-textfield label {
|
|
2118
2171
|
font-weight: var(--qc-font-weight-content-bold);
|
|
2119
2172
|
display: block;
|
|
2173
|
+
width: fit-content;
|
|
2120
2174
|
}
|
|
2121
2175
|
.qc-label.qc-compact, qc-textfield label.qc-compact,
|
|
2122
2176
|
.qc-textfield label.qc-compact {
|
|
@@ -2191,42 +2245,55 @@ qc-textfield textarea:disabled {
|
|
|
2191
2245
|
padding: 0.6rem;
|
|
2192
2246
|
}
|
|
2193
2247
|
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2248
|
+
[size=xs] {
|
|
2249
|
+
max-width: 100%;
|
|
2250
|
+
}
|
|
2251
|
+
|
|
2252
|
+
[size=sm] {
|
|
2253
|
+
max-width: 100%;
|
|
2254
|
+
}
|
|
2255
|
+
|
|
2256
|
+
[size=md] {
|
|
2257
|
+
max-width: 100%;
|
|
2198
2258
|
}
|
|
2199
2259
|
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2260
|
+
[size=lg] {
|
|
2261
|
+
max-width: 100%;
|
|
2262
|
+
}
|
|
2263
|
+
|
|
2264
|
+
[size=xl] {
|
|
2265
|
+
max-width: 100%;
|
|
2204
2266
|
}
|
|
2205
2267
|
|
|
2206
2268
|
[size=xs] input, [size=xs] input + .qc-textfield-charcount,
|
|
2207
2269
|
[size=xs] textarea,
|
|
2208
2270
|
[size=xs] textarea + .qc-textfield-charcount {
|
|
2209
|
-
max-width:
|
|
2271
|
+
max-width: 100%;
|
|
2272
|
+
width: 6.3rem;
|
|
2210
2273
|
}
|
|
2211
2274
|
[size=sm] input, [size=sm] input + .qc-textfield-charcount,
|
|
2212
2275
|
[size=sm] textarea,
|
|
2213
2276
|
[size=sm] textarea + .qc-textfield-charcount {
|
|
2214
|
-
max-width:
|
|
2277
|
+
max-width: 100%;
|
|
2278
|
+
width: 15.6rem;
|
|
2215
2279
|
}
|
|
2216
2280
|
[size=md] input, [size=md] input + .qc-textfield-charcount,
|
|
2217
2281
|
[size=md] textarea,
|
|
2218
2282
|
[size=md] textarea + .qc-textfield-charcount {
|
|
2219
|
-
max-width:
|
|
2283
|
+
max-width: 100%;
|
|
2284
|
+
width: 24.9rem;
|
|
2220
2285
|
}
|
|
2221
2286
|
[size=lg] input, [size=lg] input + .qc-textfield-charcount,
|
|
2222
2287
|
[size=lg] textarea,
|
|
2223
2288
|
[size=lg] textarea + .qc-textfield-charcount {
|
|
2224
|
-
max-width:
|
|
2289
|
+
max-width: 100%;
|
|
2290
|
+
width: 52.8rem;
|
|
2225
2291
|
}
|
|
2226
2292
|
[size=xl] input, [size=xl] input + .qc-textfield-charcount,
|
|
2227
2293
|
[size=xl] textarea,
|
|
2228
2294
|
[size=xl] textarea + .qc-textfield-charcount {
|
|
2229
|
-
max-width:
|
|
2295
|
+
max-width: 100%;
|
|
2296
|
+
width: 82.5rem;
|
|
2230
2297
|
}
|
|
2231
2298
|
|
|
2232
2299
|
.qc-textfield textarea, qc-textfield textarea {
|
|
@@ -2352,21 +2419,15 @@ qc-textfield textarea + .qc-textfield-charcount {
|
|
|
2352
2419
|
}
|
|
2353
2420
|
.qc-dropdown-list-multiple label {
|
|
2354
2421
|
margin: 0;
|
|
2355
|
-
padding
|
|
2356
|
-
padding-right: var(--qc-spacer-xs);
|
|
2422
|
+
padding: var(--qc-spacer-xs);
|
|
2357
2423
|
flex-grow: 1;
|
|
2358
|
-
align-items: center;
|
|
2359
|
-
}
|
|
2360
|
-
.qc-dropdown-list-multiple .qc-choicefield {
|
|
2361
|
-
margin-top: 0 !important;
|
|
2362
2424
|
}
|
|
2363
2425
|
.qc-dropdown-list-multiple .qc-choicefield:focus {
|
|
2364
2426
|
outline: none;
|
|
2365
2427
|
}
|
|
2366
2428
|
|
|
2367
2429
|
.qc-dropdown-list-single {
|
|
2368
|
-
padding
|
|
2369
|
-
padding-right: var(--qc-spacer-xs);
|
|
2430
|
+
padding: var(--qc-spacer-xs);
|
|
2370
2431
|
margin: 0;
|
|
2371
2432
|
}
|
|
2372
2433
|
|
|
@@ -2375,7 +2436,7 @@ li[aria-selected=true] {
|
|
|
2375
2436
|
}
|
|
2376
2437
|
|
|
2377
2438
|
.qc-dropdown-list-items {
|
|
2378
|
-
max-height: var(--dropdown-items-height);
|
|
2439
|
+
max-height: calc(var(--dropdown-items-height) * 0.1 * 1rem);
|
|
2379
2440
|
overflow-y: auto;
|
|
2380
2441
|
overflow-x: hidden;
|
|
2381
2442
|
}
|
|
@@ -2404,14 +2465,12 @@ li[aria-selected=true] {
|
|
|
2404
2465
|
}
|
|
2405
2466
|
.qc-dropdown-list-items * {
|
|
2406
2467
|
overflow: hidden;
|
|
2407
|
-
white-space: nowrap;
|
|
2408
|
-
text-overflow: ellipsis;
|
|
2409
2468
|
}
|
|
2410
2469
|
|
|
2411
2470
|
.qc-dropdown-list-multiple, .qc-dropdown-list-single {
|
|
2412
2471
|
display: flex;
|
|
2413
2472
|
align-items: center;
|
|
2414
|
-
height: 4rem;
|
|
2473
|
+
min-height: 4rem;
|
|
2415
2474
|
}
|
|
2416
2475
|
.qc-dropdown-list-multiple.qc-dropdown-list-active:hover, .qc-dropdown-list-single.qc-dropdown-list-active:hover {
|
|
2417
2476
|
background-color: var(--qc-color-grey-pale);
|
|
@@ -2444,9 +2503,6 @@ li[aria-selected=true] {
|
|
|
2444
2503
|
z-index: 10;
|
|
2445
2504
|
background: transparent;
|
|
2446
2505
|
border: 0;
|
|
2447
|
-
font-size: var(--qc-font-size-md);
|
|
2448
|
-
line-height: var(--qc-line-height-md);
|
|
2449
|
-
font-weight: var(--qc-font-weight-regular);
|
|
2450
2506
|
}
|
|
2451
2507
|
.qc-dropdown-button::before {
|
|
2452
2508
|
position: absolute;
|
|
@@ -2462,6 +2518,11 @@ li[aria-selected=true] {
|
|
|
2462
2518
|
.qc-dropdown-button:has(input:focus)::before, .qc-dropdown-button:focus::before, .qc-dropdown-button:has(textarea:focus)::before {
|
|
2463
2519
|
border: 2px solid var(--qc-color-formfield-focus-border);
|
|
2464
2520
|
}
|
|
2521
|
+
.qc-dropdown-button {
|
|
2522
|
+
font-size: var(--qc-font-size-md);
|
|
2523
|
+
line-height: var(--qc-line-height-md);
|
|
2524
|
+
font-weight: var(--qc-font-weight-regular);
|
|
2525
|
+
}
|
|
2465
2526
|
.qc-dropdown-button:hover {
|
|
2466
2527
|
cursor: pointer;
|
|
2467
2528
|
}
|
|
@@ -2494,27 +2555,10 @@ li[aria-selected=true] {
|
|
|
2494
2555
|
align-content: center;
|
|
2495
2556
|
}
|
|
2496
2557
|
|
|
2497
|
-
.qc-
|
|
2558
|
+
.qc-select {
|
|
2559
|
+
display: block;
|
|
2498
2560
|
margin-bottom: 3.2rem;
|
|
2499
|
-
|
|
2500
|
-
|
|
2501
|
-
.qc-dropdown-list-root {
|
|
2502
|
-
width: 100%;
|
|
2503
|
-
}
|
|
2504
|
-
.qc-dropdown-list-root-xs {
|
|
2505
|
-
max-width: var(--qc-size-max-width-xs);
|
|
2506
|
-
}
|
|
2507
|
-
.qc-dropdown-list-root-sm {
|
|
2508
|
-
max-width: var(--qc-size-max-width-sm);
|
|
2509
|
-
}
|
|
2510
|
-
.qc-dropdown-list-root-md {
|
|
2511
|
-
max-width: var(--qc-size-max-width-md);
|
|
2512
|
-
}
|
|
2513
|
-
.qc-dropdown-list-root-lg {
|
|
2514
|
-
max-width: var(--qc-size-max-width-lg);
|
|
2515
|
-
}
|
|
2516
|
-
.qc-dropdown-list-root-xl {
|
|
2517
|
-
max-width: var(--qc-size-max-width-xl);
|
|
2561
|
+
max-width: 100%;
|
|
2518
2562
|
}
|
|
2519
2563
|
|
|
2520
2564
|
.qc-dropdown-list-container {
|
|
@@ -2523,21 +2567,6 @@ li[aria-selected=true] {
|
|
|
2523
2567
|
.qc-dropdown-list-container .qc-label {
|
|
2524
2568
|
margin-bottom: 0.4rem;
|
|
2525
2569
|
}
|
|
2526
|
-
.qc-dropdown-list-container-xs {
|
|
2527
|
-
max-width: var(--qc-size-max-width-xs);
|
|
2528
|
-
}
|
|
2529
|
-
.qc-dropdown-list-container-sm {
|
|
2530
|
-
max-width: var(--qc-size-max-width-sm);
|
|
2531
|
-
}
|
|
2532
|
-
.qc-dropdown-list-container-md {
|
|
2533
|
-
max-width: var(--qc-size-max-width-md);
|
|
2534
|
-
}
|
|
2535
|
-
.qc-dropdown-list-container-lg {
|
|
2536
|
-
max-width: var(--qc-size-max-width-lg);
|
|
2537
|
-
}
|
|
2538
|
-
.qc-dropdown-list-container-xl {
|
|
2539
|
-
max-width: var(--qc-size-max-width-xl);
|
|
2540
|
-
}
|
|
2541
2570
|
|
|
2542
2571
|
.qc-dropdown-list {
|
|
2543
2572
|
display: flex;
|
|
@@ -2545,6 +2574,8 @@ li[aria-selected=true] {
|
|
|
2545
2574
|
border: 0.1rem solid var(--qc-color-grey-medium);
|
|
2546
2575
|
min-height: 4rem;
|
|
2547
2576
|
background-color: var(--qc-color-background);
|
|
2577
|
+
max-width: 100%;
|
|
2578
|
+
min-width: 0;
|
|
2548
2579
|
}
|
|
2549
2580
|
.qc-dropdown-list.qc-dropdown-list-invalid {
|
|
2550
2581
|
border: 0.2rem solid var(--qc-color-red-regular) !important;
|
|
@@ -2552,6 +2583,21 @@ li[aria-selected=true] {
|
|
|
2552
2583
|
.qc-dropdown-list.qc-dropdown-list-invalid > .qc-dropdown-button {
|
|
2553
2584
|
height: 3.6rem;
|
|
2554
2585
|
}
|
|
2586
|
+
.qc-dropdown-list-xs {
|
|
2587
|
+
width: var(--qc-size-max-width-xs);
|
|
2588
|
+
}
|
|
2589
|
+
.qc-dropdown-list-sm {
|
|
2590
|
+
width: var(--qc-size-max-width-sm);
|
|
2591
|
+
}
|
|
2592
|
+
.qc-dropdown-list-md {
|
|
2593
|
+
width: var(--qc-size-max-width-md);
|
|
2594
|
+
}
|
|
2595
|
+
.qc-dropdown-list-lg {
|
|
2596
|
+
width: var(--qc-size-max-width-lg);
|
|
2597
|
+
}
|
|
2598
|
+
.qc-dropdown-list-xl {
|
|
2599
|
+
width: var(--qc-size-max-width-xl);
|
|
2600
|
+
}
|
|
2555
2601
|
|
|
2556
2602
|
.qc-dropdown-list-search {
|
|
2557
2603
|
margin: var(--qc-spacer-xs);
|