@utrecht/component-library-css 1.0.0-alpha.540 → 1.0.0-alpha.542
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/dist/html.css +43 -31
- package/dist/index.css +33 -17
- package/package.json +2 -2
package/dist/html.css
CHANGED
|
@@ -1314,13 +1314,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1314
1314
|
padding-block-start: var(--utrecht-select-padding-block-start, var(--utrecht-form-control-padding-block-start));
|
|
1315
1315
|
padding-inline-end: var(--utrecht-select-padding-inline-end, var(--utrecht-form-control-padding-inline-end));
|
|
1316
1316
|
padding-inline-start: var(--utrecht-select-padding-inline-start, var(--utrecht-form-control-padding-inline-start));
|
|
1317
|
-
/* <select> does not
|
|
1318
|
-
}
|
|
1319
|
-
.utrecht-html select:disabled {
|
|
1320
|
-
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
1321
|
-
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
1322
|
-
color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
1323
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1317
|
+
/* <select> does not have a `readonly` attribute */
|
|
1324
1318
|
}
|
|
1325
1319
|
.utrecht-html select:focus {
|
|
1326
1320
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -1343,6 +1337,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1343
1337
|
box-shadow: none;
|
|
1344
1338
|
outline-style: revert;
|
|
1345
1339
|
}
|
|
1340
|
+
.utrecht-html select:disabled {
|
|
1341
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
1342
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
1343
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
1344
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1345
|
+
}
|
|
1346
1346
|
.utrecht-html select[aria-invalid=true] {
|
|
1347
1347
|
--_utrecht-select-border-width: var(
|
|
1348
1348
|
--utrecht-select-invalid-border-width,
|
|
@@ -1501,12 +1501,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1501
1501
|
padding-inline-start: var(--utrecht-textarea-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1502
1502
|
resize: vertical;
|
|
1503
1503
|
resize: block;
|
|
1504
|
-
|
|
1505
|
-
|
|
1506
|
-
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1504
|
+
/* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
|
|
1505
|
+
/*
|
|
1506
|
+
* The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
|
|
1507
|
+
*
|
|
1508
|
+
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
1509
|
+
*/
|
|
1510
1510
|
}
|
|
1511
1511
|
.utrecht-html textarea:focus {
|
|
1512
1512
|
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -1548,6 +1548,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1548
1548
|
border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
|
|
1549
1549
|
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1550
1550
|
}
|
|
1551
|
+
.utrecht-html textarea:disabled {
|
|
1552
|
+
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1553
|
+
border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1554
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1555
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1556
|
+
}
|
|
1551
1557
|
.utrecht-html textarea::placeholder {
|
|
1552
1558
|
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1553
1559
|
font-style: var(--utrecht-form-control-placeholder-font-style);
|
|
@@ -1585,24 +1591,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1585
1591
|
padding-block-start: var(--utrecht-textbox-padding-block-start, var(--utrecht-form-control-padding-block-start, 0));
|
|
1586
1592
|
padding-inline-end: var(--utrecht-textbox-padding-inline-end, var(--utrecht-form-control-padding-inline-end, initial));
|
|
1587
1593
|
padding-inline-start: var(--utrecht-textbox-padding-inline-start, var(--utrecht-form-control-padding-inline-start, initial));
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
.utrecht-html input[type=number i]:disabled,
|
|
1595
|
-
.utrecht-html input[type=password i]:disabled,
|
|
1596
|
-
.utrecht-html input[type=search i]:disabled,
|
|
1597
|
-
.utrecht-html input[type=tel i]:disabled,
|
|
1598
|
-
.utrecht-html input[type=text i]:disabled,
|
|
1599
|
-
.utrecht-html input[type=time i]:disabled,
|
|
1600
|
-
.utrecht-html input[type=url i]:disabled,
|
|
1601
|
-
.utrecht-html input[type=week i]:disabled {
|
|
1602
|
-
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1603
|
-
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1604
|
-
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1605
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
1594
|
+
/* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
|
|
1595
|
+
/*
|
|
1596
|
+
* The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
|
|
1597
|
+
*
|
|
1598
|
+
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
1599
|
+
*/
|
|
1606
1600
|
}
|
|
1607
1601
|
.utrecht-html input:not([type]):focus,
|
|
1608
1602
|
.utrecht-html input[type=date i]:focus,
|
|
@@ -1704,6 +1698,24 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
1704
1698
|
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
1705
1699
|
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
1706
1700
|
}
|
|
1701
|
+
.utrecht-html input:not([type]):disabled,
|
|
1702
|
+
.utrecht-html input[type=date i]:disabled,
|
|
1703
|
+
.utrecht-html input[type=datetime-local i]:disabled,
|
|
1704
|
+
.utrecht-html input[type=email i]:disabled,
|
|
1705
|
+
.utrecht-html input[type=month i]:disabled,
|
|
1706
|
+
.utrecht-html input[type=number i]:disabled,
|
|
1707
|
+
.utrecht-html input[type=password i]:disabled,
|
|
1708
|
+
.utrecht-html input[type=search i]:disabled,
|
|
1709
|
+
.utrecht-html input[type=tel i]:disabled,
|
|
1710
|
+
.utrecht-html input[type=text i]:disabled,
|
|
1711
|
+
.utrecht-html input[type=time i]:disabled,
|
|
1712
|
+
.utrecht-html input[type=url i]:disabled,
|
|
1713
|
+
.utrecht-html input[type=week i]:disabled {
|
|
1714
|
+
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
1715
|
+
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
1716
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
1717
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
1718
|
+
}
|
|
1707
1719
|
.utrecht-html input:not([type])::placeholder,
|
|
1708
1720
|
.utrecht-html input[type=date i]::placeholder,
|
|
1709
1721
|
.utrecht-html input[type=datetime-local i]::placeholder,
|
package/dist/index.css
CHANGED
|
@@ -5252,13 +5252,7 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5252
5252
|
|
|
5253
5253
|
/* stylelint-disable-next-line block-no-empty */
|
|
5254
5254
|
.utrecht-select--html-select {
|
|
5255
|
-
/* <select> does not
|
|
5256
|
-
}
|
|
5257
|
-
.utrecht-select--html-select:disabled {
|
|
5258
|
-
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
5259
|
-
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
5260
|
-
color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
5261
|
-
cursor: var(--utrecht-action-disabled-cursor);
|
|
5255
|
+
/* <select> does not have a `readonly` attribute */
|
|
5262
5256
|
}
|
|
5263
5257
|
.utrecht-select--html-select:focus {
|
|
5264
5258
|
background-color: var(--utrecht-select-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -5281,6 +5275,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5281
5275
|
box-shadow: none;
|
|
5282
5276
|
outline-style: revert;
|
|
5283
5277
|
}
|
|
5278
|
+
.utrecht-select--html-select:disabled {
|
|
5279
|
+
background-color: var(--utrecht-select-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-select-background-color, var(--utrecht-form-control-background-color))));
|
|
5280
|
+
border-color: var(--utrecht-select-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-select-border-color, var(--utrecht-form-control-border-color))));
|
|
5281
|
+
color: var(--utrecht-select-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-select-color, var(--utrecht-form-control-color))));
|
|
5282
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
5283
|
+
}
|
|
5284
5284
|
|
|
5285
5285
|
/**
|
|
5286
5286
|
* @license EUPL-1.2
|
|
@@ -5855,11 +5855,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5855
5855
|
opacity: 100%;
|
|
5856
5856
|
}
|
|
5857
5857
|
|
|
5858
|
-
.utrecht-textarea--html-textarea
|
|
5859
|
-
|
|
5860
|
-
|
|
5861
|
-
|
|
5862
|
-
|
|
5858
|
+
.utrecht-textarea--html-textarea {
|
|
5859
|
+
/* The `textarea:read-only` pseudo selector applies to both `<textarea readonly>` and `<textarea disabled>` */
|
|
5860
|
+
/*
|
|
5861
|
+
* The `textarea:disabled` pseudo selector applies to `<textarea disabled>`, but not to `<textarea aria-disabled="true">`
|
|
5862
|
+
*
|
|
5863
|
+
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
5864
|
+
*/
|
|
5863
5865
|
}
|
|
5864
5866
|
.utrecht-textarea--html-textarea:focus {
|
|
5865
5867
|
background-color: var(--utrecht-textarea-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -5901,6 +5903,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
5901
5903
|
border-color: var(--utrecht-textarea-read-only-border, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textarea-border, var(--utrecht-form-control-border-color))));
|
|
5902
5904
|
color: var(--utrecht-textarea-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
5903
5905
|
}
|
|
5906
|
+
.utrecht-textarea--html-textarea:disabled {
|
|
5907
|
+
background-color: var(--utrecht-textarea-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
5908
|
+
border-color: var(--utrecht-textarea-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
5909
|
+
color: var(--utrecht-textarea-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
5910
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
5911
|
+
}
|
|
5904
5912
|
.utrecht-textarea--html-textarea::placeholder {
|
|
5905
5913
|
color: var(--utrecht-textarea-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
5906
5914
|
font-style: var(--utrecht-form-control-placeholder-font-style);
|
|
@@ -6038,11 +6046,13 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
6038
6046
|
font-variant-ligatures: none;
|
|
6039
6047
|
}
|
|
6040
6048
|
|
|
6041
|
-
.utrecht-textbox--html-input
|
|
6042
|
-
|
|
6043
|
-
|
|
6044
|
-
|
|
6045
|
-
|
|
6049
|
+
.utrecht-textbox--html-input {
|
|
6050
|
+
/* The `input:read-only` pseudo selector applies to both `<input readonly>` and `<input disabled>` */
|
|
6051
|
+
/*
|
|
6052
|
+
* The `input:disabled` pseudo selector applies to `<input disabled>`, but not to `<input aria-disabled="true">`
|
|
6053
|
+
*
|
|
6054
|
+
* We consider `disabled` more specific than `read-only`, so the `:disabled` selector should come after the `:read-only` selector.
|
|
6055
|
+
*/
|
|
6046
6056
|
}
|
|
6047
6057
|
.utrecht-textbox--html-input:focus {
|
|
6048
6058
|
background-color: var(--utrecht-textbox-focus-background-color, var(--utrecht-form-control-focus-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
@@ -6084,6 +6094,12 @@ however browsers don't seem to have implemented great looking supixel tweening y
|
|
|
6084
6094
|
border-color: var(--utrecht-textbox-read-only-border-color, var(--utrecht-form-control-read-only-border-color, var(--utrecht-textbox-border-color, var(--utrecht-form-control-border-color))));
|
|
6085
6095
|
color: var(--utrecht-textbox-read-only-color, var(--utrecht-form-control-read-only-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
6086
6096
|
}
|
|
6097
|
+
.utrecht-textbox--html-input:disabled {
|
|
6098
|
+
background-color: var(--utrecht-textbox-disabled-background-color, var(--utrecht-form-control-disabled-background-color, var(--utrecht-textarea-background-color, var(--utrecht-form-control-background-color))));
|
|
6099
|
+
border-color: var(--utrecht-textbox-disabled-border-color, var(--utrecht-form-control-disabled-border-color, var(--utrecht-textarea-border-color, var(--utrecht-form-control-border-color))));
|
|
6100
|
+
color: var(--utrecht-textbox-disabled-color, var(--utrecht-form-control-disabled-color, var(--utrecht-textarea-color, var(--utrecht-form-control-color))));
|
|
6101
|
+
cursor: var(--utrecht-action-disabled-cursor);
|
|
6102
|
+
}
|
|
6087
6103
|
.utrecht-textbox--html-input::placeholder {
|
|
6088
6104
|
color: var(--utrecht-textbox-placeholder-color, var(--utrecht-form-control-placeholder-color, var(--utrecht-textbox-color, var(--utrecht-form-control-color))));
|
|
6089
6105
|
font-style: var(--utrecht-form-control-placeholder-font-style);
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.0.0-alpha.
|
|
2
|
+
"version": "1.0.0-alpha.542",
|
|
3
3
|
"author": "Community for NL Design System",
|
|
4
4
|
"description": "Component library bundle for the Municipality of Utrecht based on the NL Design System architecture",
|
|
5
5
|
"license": "EUPL-1.2",
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"clean": "rimraf dist/"
|
|
27
27
|
},
|
|
28
28
|
"main": "dist/index.css",
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "665e20e3685c9acedf037525a48786e03131f78a"
|
|
30
30
|
}
|