@oslokommune/punkt-css 17.0.7 → 17.0.10

package/dist/css/pkt-base.css

@@ -314,6 +314,10 @@ body {
   scroll-behavior: smooth;
 }
 
+.pkt-contents {
+  display: contents;
+}
+
 /* 
  * Typografi
  * 
@@ -346,109 +350,6 @@ strong {
   font-weight: 500;
 }
 
-a,
-.pkt-link-button {
-  color: var(--pkt-color-text-action-normal);
-  text-decoration: underline;
-  word-wrap: break-word;
-  cursor: pointer;
-}
-a span,
-.pkt-link-button span {
-  color: inherit;
-  text-decoration: inherit;
-}
-a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
-.pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
-  color: inherit;
-}
-a:hover, a.pkt-link--hover,
-.pkt-link-button:hover,
-.pkt-link-button.pkt-link--hover {
-  color: var(--pkt-color-text-action-active);
-  text-decoration: underline;
-}
-a:hover svg, a.pkt-link--hover svg,
-.pkt-link-button:hover svg,
-.pkt-link-button.pkt-link--hover svg {
-  --fg-color: currentColor;
-}
-a:focus-visible, a.pkt-link--focus,
-.pkt-link-button:focus-visible,
-.pkt-link-button.pkt-link--focus {
-  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
-  outline: none;
-  color: var(--pkt-color-text-action-active);
-}
-a:focus:not(:focus-visible),
-.pkt-link-button:focus:not(:focus-visible) {
-  box-shadow: none;
-  outline: 0.125rem solid var(--pkt-color-text-action-active);
-  color: var(--pkt-color-text-action-active);
-}
-a:active, a.pkt-link--active,
-.pkt-link-button:active,
-.pkt-link-button.pkt-link--active {
-  color: var(--pkt-color-text-action-active);
-}
-
-.pkt-link {
-  display: inline;
-  text-align: left;
-  align-items: baseline;
-}
-
-.pkt-link__icon {
-  --fg-color: currentColor;
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-  margin-inline: 0.25rem;
-  align-self: center;
-}
-.pkt-link--icon-left, .pkt-link--icon-right {
-  display: inline-flex;
-  text-decoration: none;
-  align-items: baseline;
-}
-.pkt-link--icon-left {
-  flex-direction: row;
-}
-.pkt-link--icon-right {
-  flex-direction: row-reverse;
-}
-.pkt-link--external::after {
-  display: inline-block;
-  content: " ";
-  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
-  background-image: var(--svg);
-  background-repeat: no-repeat;
-  background-size: 18px 18px;
-  width: 1.125rem;
-  height: 1.125rem;
-  vertical-align: middle;
-  align-self: center;
-}
-.pkt-link--external:hover::after {
-  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
-}
-
-button.pkt-link {
-  background: none;
-  border: none;
-  padding: 0;
-  font-family: inherit;
-  cursor: pointer;
-  font-weight: inherit;
-}
-
-[data-mode=dark] .pkt-link--external::after {
-  filter: brightness(0) saturate(100%) invert(100%);
-}
-[data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
-  filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
-}
-
 /*
  * origo typography
  * prefix pkt
@@ -2901,11 +2802,109 @@ button.pkt-link {
 }
 
 /*
- * Display contents and disregard layout
+ * Link
  */
-.pkt-display-contents,
-.pkt-contents {
-  display: contents;
+a,
+.pkt-link-button {
+  color: var(--pkt-color-text-action-normal);
+  text-decoration: underline;
+  word-wrap: break-word;
+  cursor: pointer;
+}
+a span,
+.pkt-link-button span {
+  color: inherit;
+  text-decoration: inherit;
+}
+a:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover),
+.pkt-link-button:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link):not(:hover) {
+  color: inherit;
+}
+a:hover, a.pkt-link--hover,
+.pkt-link-button:hover,
+.pkt-link-button.pkt-link--hover {
+  color: var(--pkt-color-text-action-active);
+  text-decoration: underline;
+}
+a:hover svg, a.pkt-link--hover svg,
+.pkt-link-button:hover svg,
+.pkt-link-button.pkt-link--hover svg {
+  --fg-color: currentColor;
+}
+a:focus-visible, a.pkt-link--focus,
+.pkt-link-button:focus-visible,
+.pkt-link-button.pkt-link--focus {
+  box-shadow: 0px 0px 0px 0.125rem var(--pkt-color-text-action-active), 0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
+  outline: none;
+  color: var(--pkt-color-text-action-active);
+}
+a:focus:not(:focus-visible),
+.pkt-link-button:focus:not(:focus-visible) {
+  box-shadow: none;
+  outline: 0.125rem solid var(--pkt-color-text-action-active);
+  color: var(--pkt-color-text-action-active);
+}
+a:active, a.pkt-link--active,
+.pkt-link-button:active,
+.pkt-link-button.pkt-link--active {
+  color: var(--pkt-color-text-action-active);
+}
+
+.pkt-link {
+  display: inline;
+  text-align: left;
+  align-items: baseline;
+}
+
+.pkt-link__icon {
+  --fg-color: currentColor;
+  width: 1.5rem;
+  height: 1.5rem;
+  flex-shrink: 0;
+  margin-inline: 0.25rem;
+  align-self: center;
+}
+.pkt-link--icon-left, .pkt-link--icon-right {
+  display: inline-flex;
+  text-decoration: none;
+  align-items: baseline;
+}
+.pkt-link--icon-left {
+  flex-direction: row;
+}
+.pkt-link--icon-right {
+  flex-direction: row-reverse;
+}
+.pkt-link--external::after {
+  display: inline-block;
+  content: " ";
+  --svg: url(https://punkt-cdn.oslo.kommune.no/17.0/icons/new-window-small.svg);
+  background-image: var(--svg);
+  background-repeat: no-repeat;
+  background-size: 18px 18px;
+  width: 1.125rem;
+  height: 1.125rem;
+  vertical-align: middle;
+  align-self: center;
+}
+.pkt-link--external:hover::after {
+  filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%) contrast(90%);
+}
+
+button.pkt-link {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: inherit;
+  cursor: pointer;
+  font-weight: inherit;
+}
+
+[data-mode=dark] .pkt-link--external::after {
+  filter: brightness(0) saturate(100%) invert(100%);
+}
+[data-mode=dark] .pkt-link--external:hover::after, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) pkt-icon, [data-mode=dark] .pkt-link:hover:not(.pkt-btn) .pkt-icon {
+  filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%) contrast(105%);
 }
 
 /*