@oslokommune/punkt-css 15.4.2 → 15.4.4
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 +36 -0
- package/dist/css/components/datepicker.css +18 -16
- package/dist/css/components/datepicker.min.css +1 -1
- package/dist/css/components/fileupload.css +3 -2
- 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 +38 -27
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +40 -29
- 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 +40 -29
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/components/_datepicker.scss +5 -3
- package/dist/scss/components/_fileupload.scss +2 -1
- 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
|
|
|
@@ -1454,6 +1456,7 @@ pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnai
|
|
|
1454
1456
|
padding: 0.5rem;
|
|
1455
1457
|
min-width: 0;
|
|
1456
1458
|
overflow: hidden;
|
|
1459
|
+
justify-content: end;
|
|
1457
1460
|
}
|
|
1458
1461
|
pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress,
|
|
1459
1462
|
.pkt-fileupload__queue-display:has(.pkt-fileupload__queue-display__item__thumbnail) .pkt-fileupload__queue-display__item--in-progress {
|
|
@@ -1792,8 +1795,8 @@ pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-
|
|
|
1792
1795
|
.pkt-fileupload__queue-display__item__thumbnail--fallback .pkt-fileupload__queue-display__item__thumbnail__title {
|
|
1793
1796
|
letter-spacing: -0.2px;
|
|
1794
1797
|
font-weight: 400;
|
|
1795
|
-
font-size: 0.
|
|
1796
|
-
line-height: 1.
|
|
1798
|
+
font-size: 0.875rem;
|
|
1799
|
+
line-height: 1.375rem;
|
|
1797
1800
|
}
|
|
1798
1801
|
pkt-fileupload__queue-display__item--canceled,
|
|
1799
1802
|
.pkt-fileupload__queue-display__item--canceled {
|
|
@@ -5467,6 +5470,7 @@ pkt-select {
|
|
|
5467
5470
|
opacity: 1;
|
|
5468
5471
|
background-color: var(--pkt-color-surface-default-gray);
|
|
5469
5472
|
border-color: var(--pkt-color-input-border-disabled);
|
|
5473
|
+
color: var(--pkt-color-input-text-disabled);
|
|
5470
5474
|
cursor: inherit;
|
|
5471
5475
|
}
|
|
5472
5476
|
.pkt-input:disabled:active, .pkt-textinput__input:disabled:active {
|
|
@@ -5559,11 +5563,10 @@ pkt-select {
|
|
|
5559
5563
|
outline: none;
|
|
5560
5564
|
box-shadow: none;
|
|
5561
5565
|
}
|
|
5562
|
-
.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 {
|
|
5566
|
+
.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) {
|
|
5563
5567
|
border-color: var(--pkt-color-input-border-active);
|
|
5564
|
-
|
|
5565
|
-
|
|
5566
|
-
border-color: var(--pkt-color-input-border-disabled);
|
|
5568
|
+
color: var(--pkt-color-input-text-hover);
|
|
5569
|
+
--fg-color: var(--pkt-color-input-text-hover);
|
|
5567
5570
|
}
|
|
5568
5571
|
.pkt-input__container:focus-within {
|
|
5569
5572
|
outline: 2px solid var(--pkt-color-input-border-active);
|
|
@@ -5594,7 +5597,6 @@ pkt-select {
|
|
|
5594
5597
|
color: var(--pkt-color-input-text-error);
|
|
5595
5598
|
}
|
|
5596
5599
|
.pkt-input__range-inputs {
|
|
5597
|
-
min-width: 17rem;
|
|
5598
5600
|
container: range/inline-size;
|
|
5599
5601
|
}
|
|
5600
5602
|
|
|
@@ -5603,12 +5605,9 @@ pkt-select {
|
|
|
5603
5605
|
border: 2px solid var(--pkt-color-input-border-normal);
|
|
5604
5606
|
display: grid;
|
|
5605
5607
|
grid-template-rows: auto auto;
|
|
5606
|
-
grid-template-columns:
|
|
5608
|
+
grid-template-columns: auto 3rem;
|
|
5607
5609
|
gap: 0;
|
|
5608
5610
|
}
|
|
5609
|
-
.pkt-input__container > :nth-child(2) {
|
|
5610
|
-
grid-column-start: span 2;
|
|
5611
|
-
}
|
|
5612
5611
|
.pkt-input__container .pkt-input-prefix,
|
|
5613
5612
|
.pkt-input__container .pkt-input-suffix,
|
|
5614
5613
|
.pkt-input__container .pkt-input-icon,
|
|
@@ -5616,4 +5615,16 @@ pkt-select {
|
|
|
5616
5615
|
.pkt-input__container .pkt-textinput__input {
|
|
5617
5616
|
border: 0;
|
|
5618
5617
|
}
|
|
5618
|
+
.pkt-input__container .pkt-input-separator {
|
|
5619
|
+
margin: 0 auto;
|
|
5620
|
+
}
|
|
5621
|
+
.pkt-input__container .pkt-input.pkt-datepicker__input.pkt-datepicker--range, .pkt-input__container .pkt-datepicker__input.pkt-datepicker--range.pkt-textinput__input {
|
|
5622
|
+
padding-left: 1rem;
|
|
5623
|
+
}
|
|
5624
|
+
.pkt-input__container:has(> :first-child.pkt-input-prefix) > :nth-child(2) {
|
|
5625
|
+
grid-column-start: span 2;
|
|
5626
|
+
}
|
|
5627
|
+
.pkt-input__container:has(> :first-child.pkt-input-prefix) {
|
|
5628
|
+
grid-template-columns: min-content auto 3rem;
|
|
5629
|
+
}
|
|
5619
5630
|
}
|