@oslokommune/punkt-css 16.13.3 → 16.14.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.
- package/CHANGELOG.md +18 -0
- package/dist/css/components/combobox.css +4 -0
- package/dist/css/components/combobox.min.css +1 -1
- package/dist/css/components/textinput.css +16 -6
- package/dist/css/components/textinput.min.css +1 -1
- package/dist/css/elements/checkbox-radio.css +3 -3
- package/dist/css/elements/checkbox-radio.min.css +1 -1
- package/dist/css/elements/input.css +16 -6
- package/dist/css/elements/input.min.css +1 -1
- package/dist/css/elements/select.css +19 -7
- package/dist/css/elements/select.min.css +1 -1
- package/dist/css/pkt-base.css +1 -1
- package/dist/css/pkt-base.min.css +1 -1
- package/dist/css/pkt-components.css +20 -6
- package/dist/css/pkt-components.min.css +1 -1
- package/dist/css/pkt-docs.css +27 -11
- package/dist/css/pkt-docs.min.css +1 -1
- package/dist/css/pkt-elements.css +22 -10
- package/dist/css/pkt-elements.min.css +1 -1
- package/dist/css/pkt.css +27 -11
- package/dist/css/pkt.min.css +1 -1
- package/dist/scss/abstracts/variables/_index.scss +1 -1
- package/dist/scss/components/_combobox.scss +4 -0
- package/dist/scss/elements/_input.scss +19 -7
- package/package.json +2 -2
|
@@ -1142,6 +1142,10 @@ pkt-combobox[fullwidth], pkt-combobox--fullwidth,
|
|
|
1142
1142
|
margin-top: 0.5rem;
|
|
1143
1143
|
}
|
|
1144
1144
|
|
|
1145
|
+
.pkt-inputwrapper:not([data-navtype=pointer]) .pkt-combobox__input:focus-within {
|
|
1146
|
+
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
1147
|
+
}
|
|
1148
|
+
|
|
1145
1149
|
.pkt-datepicker,
|
|
1146
1150
|
pkt-datepicker {
|
|
1147
1151
|
display: block;
|
|
@@ -5567,7 +5571,7 @@ pkt-select {
|
|
|
5567
5571
|
padding-right: 3rem;
|
|
5568
5572
|
}
|
|
5569
5573
|
.pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]) {
|
|
5570
|
-
--svg: url(https://punkt-cdn.oslo.kommune.no/16.
|
|
5574
|
+
--svg: url(https://punkt-cdn.oslo.kommune.no/16.14/icons/chevron-thin-down.svg);
|
|
5571
5575
|
background-image: var(--svg);
|
|
5572
5576
|
background-repeat: no-repeat;
|
|
5573
5577
|
background-position: right 0.7rem top 50%;
|
|
@@ -5585,15 +5589,19 @@ pkt-select {
|
|
|
5585
5589
|
.pkt-input:hover, .pkt-textinput__input:hover, .pkt-input.pkt-input--hover, .pkt-input--hover.pkt-textinput__input {
|
|
5586
5590
|
border-color: var(--pkt-color-input-border-hover);
|
|
5587
5591
|
}
|
|
5588
|
-
.pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
|
|
5589
|
-
box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
|
|
5590
|
-
border-color: var(--pkt-color-input-border-active);
|
|
5591
|
-
}
|
|
5592
5592
|
.pkt-input:focus, .pkt-textinput__input:focus {
|
|
5593
5593
|
outline: none;
|
|
5594
|
-
box-shadow: 0 0 0 2px var(--pkt-color-input-border-active);
|
|
5595
5594
|
border-color: var(--pkt-color-input-border-active);
|
|
5596
5595
|
}
|
|
5596
|
+
.pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input {
|
|
5597
|
+
outline: 2px solid var(--pkt-color-input-border-active);
|
|
5598
|
+
outline-offset: 0;
|
|
5599
|
+
border-color: var(--pkt-color-input-border-active);
|
|
5600
|
+
}
|
|
5601
|
+
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-textinput__input:focus-visible {
|
|
5602
|
+
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
5603
|
+
outline-offset: 0;
|
|
5604
|
+
}
|
|
5597
5605
|
.pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-input:disabled::placeholder, .pkt-textinput__input:disabled::placeholder, .pkt-input[readonly]:not(.ios-readonly-hack), [readonly].pkt-textinput__input:not(.ios-readonly-hack) {
|
|
5598
5606
|
opacity: 1;
|
|
5599
5607
|
background-color: var(--pkt-color-surface-default-gray);
|
|
@@ -5705,6 +5713,12 @@ pkt-select {
|
|
|
5705
5713
|
.pkt-input__container:focus-within .pkt-input-icon {
|
|
5706
5714
|
border-color: var(--pkt-color-input-border-active);
|
|
5707
5715
|
}
|
|
5716
|
+
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within {
|
|
5717
|
+
outline: 4px solid var(--pkt-color-border-states-focus);
|
|
5718
|
+
}
|
|
5719
|
+
:is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-input:focus-visible, :is(.pkt-inputwrapper, .pkt-searchinput):not([data-navtype=pointer]) .pkt-input__container:focus-within .pkt-textinput__input:focus-visible {
|
|
5720
|
+
outline: none;
|
|
5721
|
+
}
|
|
5708
5722
|
.pkt-input__counter {
|
|
5709
5723
|
letter-spacing: -0.2px;
|
|
5710
5724
|
font-weight: 300;
|