@oslokommune/punkt-css 15.4.0 → 15.4.3
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/CHANGELOG.md +35 -0
- package/dist/css/components/datepicker.css +18 -16
- package/dist/css/components/datepicker.min.css +1 -1
- package/dist/css/components/fileupload.css +7 -0
- package/dist/css/components/fileupload.min.css +1 -1
- package/dist/css/components/textinput.css +17 -9
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/elements/input.css +17 -9
- package/dist/css/elements/input.min.css +1 -1
- package/dist/css/elements/select.css +19 -11
- package/dist/css/elements/select.min.css +1 -1
- package/dist/css/pkt-components.css +42 -25
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +44 -27
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +19 -11
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +44 -27
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_datepicker.scss +5 -3
- package/dist/scss/components/_fileupload.scss +6 -0
- package/dist/scss/elements/_input.scss +20 -8
- package/package.json +2 -2
|
@@ -1120,40 +1120,42 @@ pkt-datepicker-multiple {
|
|
|
1120
1120
|
.pkt-datepicker__inputs .pkt-input__container:not(:has(.pkt-input--fullwidth)) {
|
|
1121
1121
|
width: fit-content;
|
|
1122
1122
|
}
|
|
1123
|
-
.pkt-datepicker__inputs
|
|
1123
|
+
.pkt-datepicker__inputs .pkt-input__container {
|
|
1124
1124
|
border: 2px solid var(--pkt-color-input-border-normal);
|
|
1125
|
+
background-color: var(--pkt-color-input-background-normal);
|
|
1125
1126
|
}
|
|
1126
|
-
.pkt-datepicker__inputs
|
|
1127
|
-
.pkt-datepicker__inputs
|
|
1128
|
-
.pkt-datepicker__inputs
|
|
1129
|
-
.pkt-datepicker__inputs
|
|
1130
|
-
.pkt-datepicker__inputs
|
|
1127
|
+
.pkt-datepicker__inputs .pkt-input__container .pkt-input,
|
|
1128
|
+
.pkt-datepicker__inputs .pkt-input__container .pkt-input-prefix,
|
|
1129
|
+
.pkt-datepicker__inputs .pkt-input__container .pkt-input-suffix,
|
|
1130
|
+
.pkt-datepicker__inputs .pkt-input__container .pkt-input-icon,
|
|
1131
|
+
.pkt-datepicker__inputs .pkt-input__container .pkt-input-separator {
|
|
1131
1132
|
border: 0;
|
|
1132
1133
|
height: 100%;
|
|
1133
1134
|
min-height: 2.75rem;
|
|
1134
1135
|
}
|
|
1135
|
-
.pkt-datepicker__inputs
|
|
1136
|
+
.pkt-datepicker__inputs .pkt-input__container:hover {
|
|
1136
1137
|
border-color: var(--pkt-color-input-border-active);
|
|
1137
1138
|
}
|
|
1138
|
-
.pkt-datepicker__inputs
|
|
1139
|
+
.pkt-datepicker__inputs .pkt-input__container:focus-within {
|
|
1139
1140
|
border-color: var(--pkt-color-input-border-active);
|
|
1140
1141
|
}
|
|
1141
|
-
.pkt-datepicker__inputs
|
|
1142
|
+
.pkt-datepicker__inputs .pkt-input__container:has(input:disabled), .pkt-datepicker__inputs .pkt-input__container:has(input[readonly]:not(.ios-readonly-hack)) {
|
|
1142
1143
|
border-color: var(--pkt-color-input-border-disabled);
|
|
1144
|
+
--fg-color: var(--pkt-color-input-text-disabled);
|
|
1143
1145
|
}
|
|
1144
|
-
.pkt-datepicker__inputs
|
|
1146
|
+
.pkt-datepicker__inputs .pkt-input__container:has(.pkt-input--counter-error) {
|
|
1145
1147
|
border-color: var(--pkt-color-input-border-error);
|
|
1146
1148
|
}
|
|
1147
|
-
.pkt-inputwrapper--error .pkt-datepicker__inputs
|
|
1149
|
+
.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container {
|
|
1148
1150
|
border-color: var(--pkt-color-brand-red-1000);
|
|
1149
1151
|
}
|
|
1150
|
-
.pkt-inputwrapper--error .pkt-datepicker__inputs
|
|
1152
|
+
.pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:hover, .pkt-inputwrapper--error .pkt-datepicker__inputs .pkt-input__container:focus-within {
|
|
1151
1153
|
border-color: var(--pkt-color-brand-red-1000);
|
|
1152
1154
|
}
|
|
1153
|
-
.pkt-inputwrapper--disabled .pkt-datepicker__inputs
|
|
1155
|
+
.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container {
|
|
1154
1156
|
border-color: var(--pkt-color-border-states-disabled);
|
|
1155
1157
|
}
|
|
1156
|
-
.pkt-inputwrapper--disabled .pkt-datepicker__inputs
|
|
1158
|
+
.pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:hover, .pkt-inputwrapper--disabled .pkt-datepicker__inputs .pkt-input__container:focus-within {
|
|
1157
1159
|
border-color: var(--pkt-color-border-states-disabled);
|
|
1158
1160
|
box-shadow: none;
|
|
1159
1161
|
outline: none;
|
|
@@ -1187,12 +1189,12 @@ pkt-datepicker-multiple {
|
|
|
1187
1189
|
box-shadow: 0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
|
|
1188
1190
|
}
|
|
1189
1191
|
|
|
1190
|
-
.pkt-datepicker__input:not(.pkt-datepicker--multiple) {
|
|
1192
|
+
.pkt-datepicker__input:not(.pkt-datepicker--multiple):not(.pkt-datepicker--range) {
|
|
1191
1193
|
width: 8.3rem;
|
|
1194
|
+
max-width: calc(100% - 3rem);
|
|
1192
1195
|
}
|
|
1193
1196
|
|
|
1194
1197
|
.pkt-datepicker__input.pkt-input--fullwidth:not(.pkt-datepicker--multiple) {
|
|
1195
|
-
width: auto;
|
|
1196
1198
|
flex: 1;
|
|
1197
1199
|
}
|
|
1198
1200
|
|
|
@@ -1788,6 +1790,13 @@ pkt-fileupload__queue-display__item__thumbnail__title,
|
|
|
1788
1790
|
text-overflow: ellipsis;
|
|
1789
1791
|
min-width: 0;
|
|
1790
1792
|
}
|
|
1793
|
+
pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title,
|
|
1794
|
+
.pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title {
|
|
1795
|
+
letter-spacing: -0.2px;
|
|
1796
|
+
font-weight: 400;
|
|
1797
|
+
font-size: 0.75rem;
|
|
1798
|
+
line-height: 1.25rem;
|
|
1799
|
+
}
|
|
1791
1800
|
pkt-fileupload__queue-display__item--canceled,
|
|
1792
1801
|
.pkt-fileupload__queue-display__item--canceled {
|
|
1793
1802
|
opacity: 0.6;
|
|
@@ -5460,6 +5469,7 @@ pkt-select {
|
|
|
5460
5469
|
opacity: 1;
|
|
5461
5470
|
background-color: var(--pkt-color-surface-default-gray);
|
|
5462
5471
|
border-color: var(--pkt-color-input-border-disabled);
|
|
5472
|
+
color: var(--pkt-color-input-text-disabled);
|
|
5463
5473
|
cursor: inherit;
|
|
5464
5474
|
}
|
|
5465
5475
|
.pkt-input:disabled:active, .pkt-textinput__input:disabled:active {
|
|
@@ -5552,11 +5562,10 @@ pkt-select {
|
|
|
5552
5562
|
outline: none;
|
|
5553
5563
|
box-shadow: none;
|
|
5554
5564
|
}
|
|
5555
|
-
.pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
|
|
5565
|
+
.pkt-input__container:hover .pkt-input:not(:disabled), .pkt-input__container:hover .pkt-textinput__input:not(:disabled), .pkt-input__container:hover .pkt-input-prefix:not(:disabled), .pkt-input__container:hover .pkt-input-suffix:not(:disabled), .pkt-input__container:hover .pkt-input-icon:not(:disabled) {
|
|
5556
5566
|
border-color: var(--pkt-color-input-border-active);
|
|
5557
|
-
|
|
5558
|
-
|
|
5559
|
-
border-color: var(--pkt-color-input-border-disabled);
|
|
5567
|
+
color: var(--pkt-color-input-text-hover);
|
|
5568
|
+
--fg-color: var(--pkt-color-input-text-hover);
|
|
5560
5569
|
}
|
|
5561
5570
|
.pkt-input__container:focus-within {
|
|
5562
5571
|
outline: 2px solid var(--pkt-color-input-border-active);
|
|
@@ -5587,7 +5596,6 @@ pkt-select {
|
|
|
5587
5596
|
color: var(--pkt-color-input-text-error);
|
|
5588
5597
|
}
|
|
5589
5598
|
.pkt-input__range-inputs {
|
|
5590
|
-
min-width: 17rem;
|
|
5591
5599
|
container: range/inline-size;
|
|
5592
5600
|
}
|
|
5593
5601
|
|
|
@@ -5596,12 +5604,9 @@ pkt-select {
|
|
|
5596
5604
|
border: 2px solid var(--pkt-color-input-border-normal);
|
|
5597
5605
|
display: grid;
|
|
5598
5606
|
grid-template-rows: auto auto;
|
|
5599
|
-
grid-template-columns:
|
|
5607
|
+
grid-template-columns: auto 3rem;
|
|
5600
5608
|
gap: 0;
|
|
5601
5609
|
}
|
|
5602
|
-
.pkt-input__container > :nth-child(2) {
|
|
5603
|
-
grid-column-start: span 2;
|
|
5604
|
-
}
|
|
5605
5610
|
.pkt-input__container .pkt-input-prefix,
|
|
5606
5611
|
.pkt-input__container .pkt-input-suffix,
|
|
5607
5612
|
.pkt-input__container .pkt-input-icon,
|
|
@@ -5609,4 +5614,16 @@ pkt-select {
|
|
|
5609
5614
|
.pkt-input__container .pkt-textinput__input {
|
|
5610
5615
|
border: 0;
|
|
5611
5616
|
}
|
|
5617
|
+
.pkt-input__container .pkt-input-separator {
|
|
5618
|
+
margin: 0 auto;
|
|
5619
|
+
}
|
|
5620
|
+
.pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
|
|
5621
|
+
padding-left: 1rem;
|
|
5622
|
+
}
|
|
5623
|
+
.pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
|
|
5624
|
+
grid-column-start: span 2;
|
|
5625
|
+
}
|
|
5626
|
+
.pkt-input__container:has(> :first-child.pkt-input-prefix) {
|
|
5627
|
+
grid-template-columns: min-content auto 3rem;
|
|
5628
|
+
}
|
|
5612
5629
|
}
|