@oslokommune/punkt-css 9.4.1 → 9.5.2

package/dist/css/pkt.css

@@ -13485,8 +13485,8 @@ a,
   word-wrap: break-word;
   cursor: pointer;
 }
-a:visited:not(.pkt-linkcard),
-.pkt-link-button:visited:not(.pkt-linkcard) {
+a:visited:not(.pkt-linkcard):not(.pkt-btn),
+.pkt-link-button:visited:not(.pkt-linkcard):not(.pkt-btn) {
   color: inherit;
 }
 a:hover, a.pkt-link--hover,
@@ -13536,7 +13536,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -14818,7 +14818,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   outline-color: var(--pkt-color-input-border-hover);
 }
 .pkt-input-check__input-checkbox:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/check-medium.svg);
   position: relative;
   background-color: var(--pkt-color-input-border-normal);
 }
@@ -15016,7 +15016,11 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 
 [data-mode=dark] .pkt-input, [data-mode=dark] .pkt-textinput__input, [data-mode=dark] .pkt-select select, .pkt-select [data-mode=dark] select,
-[data-mode=dark] .pkt-select:is(select), [data-mode=dark] .pkt-input-prefix, [data-mode=dark] .pkt-input-suffix, [data-mode=dark] .pkt-input-icon, [data-mode=dark] .pkt-input__container {
+[data-mode=dark] .pkt-select:is(select),
+[data-mode=dark] .pkt-input-prefix,
+[data-mode=dark] .pkt-input-suffix,
+[data-mode=dark] .pkt-input-icon,
+[data-mode=dark] .pkt-input__container {
   --pkt-color-input-background-normal: var(--pkt-color-brand-neutrals-white);
   --pkt-color-input-border-active: var(--pkt-color-brand-blue-500);
   --pkt-color-input-border-disabled: var(--pkt-color-grays-gray-200);
@@ -15067,7 +15071,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 .pkt-input:is(select):not([multiple]), .pkt-textinput__input:is(select):not([multiple]), .pkt-select select:is(select):not([multiple]),
 .pkt-select:is(select):not([multiple]) {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/9.4/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/9.5/icons/chevron-thin-down.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-position: right 0.7rem top 50%;
@@ -15198,6 +15202,10 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .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 {
   border-color: var(--pkt-color-input-border-active);
 }
+.pkt-input__container:hover .pkt-input:disabled, .pkt-input__container:hover .pkt-textinput__input:disabled, .pkt-input__container:hover .pkt-select select:disabled, .pkt-select .pkt-input__container:hover select:disabled,
+.pkt-input__container:hover .pkt-select:disabled:is(select), .pkt-input__container:hover .pkt-input-prefix:disabled, .pkt-input__container:hover .pkt-input-suffix:disabled, .pkt-input__container:hover .pkt-input-icon:disabled {
+  border-color: var(--pkt-color-input-border-disabled);
+}
 .pkt-input__container:focus-within {
   outline: 2px solid var(--pkt-color-input-border-active);
 }
@@ -16338,7 +16346,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   --fg-color: var(--pkt-color-text-body-default);
 }
 .pkt-header__logo-service {
-  padding-top: 0.2rem;
+  padding-top: 0.3rem;
   display: none;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -16355,7 +16363,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 }
 @media screen and (min-width: 80rem) {
   .pkt-header__logo-service {
-    padding-top: 0.4rem;
+    padding-top: 0.6rem;
     font-size: 1.5rem;
     font-weight: 300;
     letter-spacing: -0.2px;
@@ -16948,4 +16956,98 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  *
  * Denne blir stilsatt av .pkt-input
  * Ikke bruk klassen .pkt-textinput 
-*/
+*/
+/* Common styles for all inputs */
+.pkt-searchinput {
+  position: relative;
+  font-size: 1.125rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+}
+.pkt-searchinput__field {
+  width: min(100%, 31rem);
+  display: flex;
+}
+.pkt-searchinput--fullwidth .pkt-searchinput__field {
+  width: 100%;
+}
+.pkt-searchinput--global .pkt-input:not(:disabled) {
+  border-color: var(--pkt-color-border-yellow);
+}
+.pkt-searchinput--global .pkt-input:not(:disabled):hover, .pkt-searchinput--global .pkt-input:not(:disabled):active, .pkt-searchinput--global .pkt-input:not(:disabled):focus {
+  border-color: var(--pkt-color-input-border-active);
+}
+.pkt-searchinput--global .pkt-searchinput__button {
+  border-radius: 50%;
+}
+.pkt-searchinput--local-with-button .pkt-searchinput__field {
+  gap: 0.5rem;
+}
+.pkt-searchinput--local .pkt-input {
+  padding: 0.5rem 0 0.5rem 1rem;
+}
+.pkt-searchinput--local .pkt-searchinput__button:disabled {
+  border-color: var(--pkt-color-input-border-disabled);
+}
+.pkt-searchinput--local .pkt-searchinput__button svg {
+  margin-left: 0;
+}
+.pkt-searchinput__suggestions {
+  position: absolute;
+  z-index: 2;
+  padding: 0;
+  margin: 2px 0 0;
+  width: min(100%, 31rem);
+  list-style: none;
+  background-color: var(--pkt-color-background-card);
+  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.1);
+}
+.pkt-searchinput--global .pkt-searchinput__suggestions {
+  width: min(100% - 3rem, 28rem);
+}
+.pkt-searchinput--local-with-button .pkt-searchinput__suggestions {
+  width: min(100% - 3.5rem, 27.5rem);
+}
+.pkt-searchinput--fullwidth .pkt-searchinput__suggestions {
+  width: 100%;
+}
+.pkt-searchinput__suggestion {
+  display: block;
+  padding: 1rem;
+  text-decoration: none;
+  background-color: transparent;
+  color: var(--pkt-color-text-action-normal);
+  border: none;
+  font: inherit;
+  outline: inherit;
+  text-align: inherit;
+}
+.pkt-searchinput__suggestion:hover, .pkt-searchinput__suggestion:focus, .pkt-searchinput__suggestion:active {
+  text-decoration: none;
+  background-color: var(--pkt-color-background-subtle);
+  color: var(--pkt-color-text-action-active);
+}
+.pkt-searchinput__suggestion:hover .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:focus .pkt-searchinput__suggestion-title, .pkt-searchinput__suggestion:active .pkt-searchinput__suggestion-title {
+  text-decoration: underline;
+}
+.pkt-searchinput__suggestion:hover > *, .pkt-searchinput__suggestion:focus > *, .pkt-searchinput__suggestion:active > * {
+  color: inherit;
+}
+.pkt-searchinput__suggestion--has-hover {
+  cursor: pointer;
+}
+.pkt-searchinput__suggestion-title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: -0.2px;
+  line-height: 1.75rem;
+}
+.pkt-searchinput__suggestion-text {
+  margin: 0;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  hyphens: auto;
+}