@oslokommune/punkt-css 7.0.0 → 7.1.5

package/dist/css/pkt.css

@@ -11539,7 +11539,7 @@ a:active, a.pkt-link--active,
 }
 .pkt-link--external::after {
   content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/new-window-small.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/new-window-small.svg);
   background-image: var(--svg);
   background-repeat: no-repeat;
   background-size: 18px 18px;
@@ -12555,7 +12555,7 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   border: 6px solid var(--choice-checked-rb-bc);
 }
 .pkt-form-check-input:checked[type=checkbox] {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/check-medium.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/check-medium.svg);
   position: relative;
   background-color: blue;
 }
@@ -12986,7 +12986,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * så dette må refaktoreres ved anledning.
  */
 .pkt-select {
-  --svg: url(https://punkt-cdn.oslo.kommune.no/7.0/icons/chevron-thin-down.svg);
+  --svg: url(https://punkt-cdn.oslo.kommune.no/7.1/icons/chevron-thin-down.svg);
   display: block;
   background-color: var(--color-white);
   background-image: var(--svg);
@@ -13337,41 +13337,14 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 /* 
  * Back link component
  */
-.pkt-back-link {
-  position: relative;
-  font-size: 0.875rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.375rem;
-  padding: 0.75rem 1rem;
-}
-@media screen and (min-width: 80rem) {
-  .pkt-back-link {
-    padding: 0.75rem 4rem;
-  }
-}
-.pkt-back-link__list {
-  list-style-type: none;
-}
-.pkt-back-link__link {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 0.75rem;
-  text-decoration: none;
-  color: var(--color-blue-dark);
-}
-.pkt-back-link__link:visited, .pkt-back-link__link:focus, .pkt-back-link__link:hover, .pkt-back-link__link:active {
-  color: var(--color-blue-dark);
-}
-.pkt-back-link__link:hover {
-  text-decoration: underline;
-}
 .pkt-back-link__icon {
   flex-basis: 1rem;
-  flex-shrink: 0;
 }
 .pkt-back-link__text {
+  font-size: 0.875rem;
+  font-weight: 300;
+  letter-spacing: -0.2px;
+  line-height: 1.375rem;
   flex-grow: 1;
 }
 
@@ -14102,24 +14075,56 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   border-color: var(--color-red);
 }
 .pkt-inputwrapper--error .pkt-textinput__input:hover,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__container:hover .pkt-textinput__input-icon {
   border-color: var(--color-red);
 }
 .pkt-inputwrapper--error .pkt-textinput__input:focus-within,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix,
-.pkt-inputwrapper--error .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix,
-.pkt-inputwrapper--error .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
+.pkt-inputwrapper--error .pkt-textinput__container:focus-within .pkt-textinput__input-icon {
   border-color: var(--color-red);
 }
+.pkt-inputwrapper--disabled {
+  color: var(--color-disabled);
+  cursor: inherit;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__input-icon {
+  border-color: var(--color-disabled);
+  background-color: var(--color-disabled-light);
+}
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-prefix,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-suffix,
+.pkt-inputwrapper--disabled .pkt-textinput__container:hover .pkt-textinput__input-icon {
+  border-color: var(--color-disabled);
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
+  border-color: var(--color-disabled);
+  box-shadow: none;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
+  border-color: var(--color-disabled);
+  box-shadow: none;
+  outline: none;
+}
+.pkt-inputwrapper--disabled .pkt-textinput__container:active .pkt-textinput__input {
+  border-right: none;
+  box-shadow: none;
+  outline: none;
+}
+[data-mode=dark] .pkt-textinput__input-prefix,
+[data-mode=dark] .pkt-textinput__input-suffix,
+[data-mode=dark] .pkt-textinput__input-icon {
+  background-color: var(--color-white);
+  color: var(--color-blue-dark);
+}
 
 /* 
  * Header element
@@ -14354,6 +14359,7 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   border-color: var(--color-active);
 }
 .pkt-textinput__input:disabled, .pkt-textinput__input:disabled::placeholder, .pkt-textinput__input[readonly] {
+  opacity: 1;
   background-color: var(--color-disabled-light);
   border-color: var(--color-disabled);
   cursor: inherit;
@@ -14361,39 +14367,19 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-textinput__input:disabled:active {
   border: 2px solid var(--color-disabled);
 }
-.pkt-textinput__input-prefix-wrapper {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.pkt-textinput__input-prefix-wrapper :not(:first-child) {
-  border-left: none;
-}
-.pkt-textinput__input-prefix-wrapper :first-child {
-  border-right: none;
-}
-.pkt-textinput__input-prefix-wrapper input:focus {
-  box-shadow: none;
-}
-.pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__input-prefix-wrapper:focus-within {
-  outline: 2px solid var(--color-active);
-}
-.pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-prefix-wrapper:focus-within .pkt-textinput__input-prefix {
-  border-color: var(--color-active);
-}
-.pkt-textinput__input-prefix {
+.pkt-textinput__input-prefix, .pkt-textinput__input-suffix, .pkt-textinput__input-icon {
   font-size: 1.125rem;
   font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.75rem;
-  align-items: center;
   display: flex;
+  align-items: center;
   width: auto;
   height: 3rem;
   border: 2px solid var(--color-blue-dark);
+  flex-shrink: 0;
+}
+.pkt-textinput__input-prefix {
   padding: 0.5rem 0rem 0.5rem 1rem;
 }
 .pkt-textinput__input-prefix::after {
@@ -14403,43 +14389,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   height: 100%;
   background-color: var(--color-blue-dark);
 }
-.pkt-textinput__input-suffix-wrapper {
-  display: flex;
-  align-items: center;
-  align-self: stretch;
-}
-.pkt-textinput__input-suffix-wrapper :not(:first-child) {
-  border-left: none;
-}
-.pkt-textinput__input-suffix-wrapper :first-child {
-  border-right: none;
-}
-.pkt-textinput__input-suffix-wrapper p {
-  margin: 0;
-}
-.pkt-textinput__input-suffix-wrapper input:focus {
-  box-shadow: none;
-}
-.pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-  border-color: var(--color-hover);
-}
-.pkt-textinput__input-suffix-wrapper:focus-within {
-  outline: 2px solid var(--color-active);
-}
-.pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-suffix, .pkt-textinput__input-suffix-wrapper:focus-within .pkt-textinput__input-icon {
-  border-color: var(--color-active);
-}
 .pkt-textinput__input-suffix {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
-  display: flex;
-  align-items: center;
-  width: auto;
-  border: 2px solid var(--color-blue-dark);
   padding: 0.5rem 1rem 0.5rem 0rem;
-  flex-shrink: 0;
 }
 .pkt-textinput__input-suffix svg {
   width: 1.5rem;
@@ -14454,16 +14405,8 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   background-color: var(--color-blue-dark);
 }
 .pkt-textinput__input-icon {
-  font-size: 1.125rem;
-  font-weight: 300;
-  letter-spacing: -0.2px;
-  line-height: 1.75rem;
-  display: flex;
-  flex-shrink: 0;
   padding: 0.5rem 1rem;
-  align-items: center;
   align-self: stretch;
-  border: 2px solid var(--color-blue-dark);
 }
 .pkt-textinput__input-icon svg {
   width: 1.5rem;
@@ -14477,6 +14420,39 @@ Therefore, this is removed from the reset here, and images who need to be fluid
 .pkt-textinput__input--counter-error:focus {
   box-shadow: 0 0 0 2px var(--color-red);
 }
+.pkt-textinput__container {
+  display: flex;
+  align-items: center;
+  align-self: stretch;
+}
+.pkt-textinput__container :first-child:not(:only-child) {
+  border-right: none;
+}
+.pkt-textinput__container :last-child:not(:only-child) {
+  border-left: none;
+}
+.pkt-textinput__container :not(:first-child):not(:last-child) {
+  border-left: none;
+  border-right: none;
+}
+.pkt-textinput__container p {
+  margin: 0;
+}
+.pkt-textinput__container input:focus {
+  box-shadow: none;
+}
+.pkt-textinput__container:hover .pkt-textinput__input, .pkt-textinput__container:hover .pkt-textinput__input-prefix, .pkt-textinput__container:hover .pkt-textinput__input-suffix, .pkt-textinput__container:hover .pkt-textinput__input-icon {
+  border-color: var(--color-hover);
+}
+.pkt-textinput__container:focus-within {
+  outline: 2px solid var(--color-active);
+}
+.pkt-textinput__container:focus-within .pkt-textinput__input,
+.pkt-textinput__container:focus-within .pkt-textinput__input-prefix,
+.pkt-textinput__container:focus-within .pkt-textinput__input-suffix,
+.pkt-textinput__container:focus-within .pkt-textinput__input-icon {
+  border-color: var(--color-active);
+}
 .pkt-textinput__counter {
   font-size: 0.875rem;
   font-weight: 300;
@@ -14491,43 +14467,4 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   letter-spacing: -0.2px;
   line-height: 1.375rem;
   color: var(--color-red);
-}
-.pkt-inputwrapper--disabled {
-  color: var(--color-disabled);
-  cursor: inherit;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-icon {
-  border-color: var(--color-disabled);
-  background-color: var(--color-disabled-light);
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input,
-.pkt-inputwrapper--disabled .pkt-textinput__input-prefix-wrapper:hover .pkt-textinput__input-prefix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-suffix,
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:hover .pkt-textinput__input-icon {
-  border-color: var(--color-disabled);
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input:hover {
-  border-color: var(--color-disabled);
-  box-shadow: none;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input:focus {
-  border-color: var(--color-disabled);
-  box-shadow: none;
-  outline: none;
-}
-.pkt-inputwrapper--disabled .pkt-textinput__input-suffix-wrapper:active .pkt-textinput__input {
-  border-right: none;
-  box-shadow: none;
-  outline: none;
-}
-
-[data-mode=dark] .pkt-textinput__input-prefix,
-[data-mode=dark] .pkt-textinput__input-suffix,
-[data-mode=dark] .pkt-textinput__input-icon {
-  background-color: var(--color-white);
-  color: var(--color-blue-dark);
 }