@oslokommune/punkt-css 9.2.2 → 9.2.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.
Files changed (14) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/css/components/inputwrapper.css +5 -7
  3. package/dist/css/components/inputwrapper.min.css +1 -1
  4. package/dist/css/components/textinput.css +7 -7
  5. package/dist/css/components/textinput.min.css +1 -1
  6. package/dist/css/pkt-components.css +12 -14
  7. package/dist/css/pkt-components.min.css +1 -1
  8. package/dist/css/pkt-elements.css +8 -8
  9. package/dist/css/pkt-elements.min.css +1 -1
  10. package/dist/css/pkt.css +13 -15
  11. package/dist/css/pkt.min.css +1 -1
  12. package/dist/scss/components/_inputwrapper.scss +9 -13
  13. package/dist/scss/elements/_input.scss +7 -8
  14. package/package.json +2 -2
package/dist/css/pkt.css CHANGED
@@ -13681,7 +13681,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
13681
13681
  }
13682
13682
  .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
13683
13683
  .pkt-select:is(select):not([multiple]) {
13684
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath fill='var(--fg-color %232A2859)' fill-rule='evenodd' d='M16 19.41 6.33 10 5 11.29 16 22l11-10.71L25.67 10 16 19.41z'/%3E%3C/svg%3E");
13684
+ --svg: url(https://punkt-cdn.oslo.kommune.no/9.2/icons/chevron-thin-down.svg);
13685
+ background-image: var(--svg);
13685
13686
  background-repeat: no-repeat;
13686
13687
  background-position: right 0.7rem top 50%;
13687
13688
  background-size: 1.5rem auto, 100%;
@@ -13702,16 +13703,14 @@ Therefore, this is removed from the reset here, and images who need to be fluid
13702
13703
  .pkt-input--hover.pkt-select:is(select) {
13703
13704
  border-color: var(--color-hover);
13704
13705
  }
13705
- .pkt-input:focus-visible + .pkt-input-suffix, .pkt-textinput__input:focus-visible + .pkt-input-suffix, .pkt-select select:focus-visible + .pkt-input-suffix,
13706
- .pkt-select:focus-visible:is(select) + .pkt-input-suffix, .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
13706
+ .pkt-input:focus-visible, .pkt-textinput__input:focus-visible, .pkt-select select:focus-visible,
13707
+ .pkt-select:focus-visible:is(select), .pkt-input.pkt-input__textinput--focus, .pkt-input__textinput--focus.pkt-textinput__input, .pkt-select select.pkt-input__textinput--focus,
13707
13708
  .pkt-input__textinput--focus.pkt-select:is(select) {
13708
- box-shadow: 0 0 0 2px var(--color-active);
13709
13709
  border-color: var(--color-active);
13710
13710
  }
13711
13711
  .pkt-input:focus, .pkt-textinput__input:focus, .pkt-select select:focus,
13712
13712
  .pkt-select:focus:is(select) {
13713
- outline: none;
13714
- box-shadow: 0 0 0 2px var(--color-active);
13713
+ outline: 2px solid var(--color-active);
13715
13714
  border-color: var(--color-active);
13716
13715
  }
13717
13716
  .pkt-input:disabled, .pkt-textinput__input:disabled, .pkt-select select:disabled,
@@ -13778,7 +13777,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
13778
13777
  background-color: var(--color-red-30);
13779
13778
  }
13780
13779
  .pkt-input--counter-error:focus {
13781
- box-shadow: 0 0 0 2px var(--color-red);
13780
+ outline: 2px solid var(--color-red);
13782
13781
  }
13783
13782
  .pkt-input__container {
13784
13783
  display: flex;
@@ -13802,7 +13801,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
13802
13801
  margin: 0;
13803
13802
  }
13804
13803
  .pkt-input__container input:focus {
13805
- box-shadow: none;
13804
+ outline: none;
13806
13805
  }
13807
13806
  .pkt-input__container:hover .pkt-input, .pkt-input__container:hover .pkt-textinput__input, .pkt-input__container:hover .pkt-select select, .pkt-select .pkt-input__container:hover select,
13808
13807
  .pkt-input__container:hover .pkt-select:is(select), .pkt-input__container:hover .pkt-input-prefix, .pkt-input__container:hover .pkt-input-suffix, .pkt-input__container:hover .pkt-input-icon {
@@ -13816,6 +13815,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
13816
13815
  .pkt-input__container:focus-within .pkt-input-prefix,
13817
13816
  .pkt-input__container:focus-within .pkt-input-suffix,
13818
13817
  .pkt-input__container:focus-within .pkt-input-icon {
13818
+ outline: 0;
13819
13819
  border-color: var(--color-active);
13820
13820
  }
13821
13821
  .pkt-input__counter {
@@ -15214,22 +15214,20 @@ Therefore, this is removed from the reset here, and images who need to be fluid
15214
15214
  .pkt-inputwrapper--error .pkt-input,
15215
15215
  .pkt-inputwrapper--error .pkt-input-prefix,
15216
15216
  .pkt-inputwrapper--error .pkt-input-suffix,
15217
- .pkt-inputwrapper--error .pkt-input-icon {
15218
- border-color: var(--color-red);
15219
- }
15217
+ .pkt-inputwrapper--error .pkt-input-icon,
15220
15218
  .pkt-inputwrapper--error .pkt-input:hover,
15219
+ .pkt-inputwrapper--error .pkt-input__container:hover,
15221
15220
  .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input,
15222
15221
  .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-prefix,
15223
15222
  .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-suffix,
15224
- .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon {
15225
- border-color: var(--color-red);
15226
- }
15227
- .pkt-inputwrapper--error .pkt-input:focus-within,
15223
+ .pkt-inputwrapper--error .pkt-input__container:hover .pkt-input-icon,
15224
+ .pkt-inputwrapper--error .pkt-input__container:focus-within,
15228
15225
  .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input,
15229
15226
  .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-prefix,
15230
15227
  .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-suffix,
15231
15228
  .pkt-inputwrapper--error .pkt-input__container:focus-within .pkt-input-icon {
15232
15229
  border-color: var(--color-red);
15230
+ outline-color: var(--color-red);
15233
15231
  }
15234
15232
  .pkt-inputwrapper--disabled {
15235
15233
  color: var(--color-disabled);