@oslokommune/punkt-css 2.0.1 → 2.0.4

package/dist/css/pkt.css

@@ -299,12 +299,16 @@ textarea {
   --color-blue-dark-10: #d9e9f2;
   --color-blue-5: #f1fdff;
   --color-blue-10: #e5fcff;
+  --color-blue-60: #cdf5fb;
   --color-green-dark-5: #f2fff3;
   --color-green-dark-10: #d9f2ef;
   --color-green-10: #e5ffe6;
+  --color-green-30: #c0f6e3;
   --color-red-5: #fff3f2;
   --color-red-10: #ffe8e5;
+  --color-red-30: #f9cfca;
   --color-yellow-5: #fef9f0;
+  --color-yellow-50: #fae1b6;
   --color-gray-light: #f9f9f9;
   --color-gray: #f2f2f2;
   --color-gray-dark: #2c2c2c;
@@ -538,6 +542,14 @@ textarea {
   color: #e5fcff !important;
 }
 
+.bg-color-blue-60 {
+  background-color: #cdf5fb !important;
+}
+
+.txt-color-blue-60 {
+  color: #cdf5fb !important;
+}
+
 .bg-color-green-dark-5 {
   background-color: #f2fff3 !important;
 }
@@ -562,6 +574,14 @@ textarea {
   color: #e5ffe6 !important;
 }
 
+.bg-color-green-30 {
+  background-color: #c0f6e3 !important;
+}
+
+.txt-color-green-30 {
+  color: #c0f6e3 !important;
+}
+
 .bg-color-red-5 {
   background-color: #fff3f2 !important;
 }
@@ -578,6 +598,14 @@ textarea {
   color: #ffe8e5 !important;
 }
 
+.bg-color-red-30 {
+  background-color: #f9cfca !important;
+}
+
+.txt-color-red-30 {
+  color: #f9cfca !important;
+}
+
 .bg-color-yellow-5 {
   background-color: #fef9f0 !important;
 }
@@ -586,6 +614,14 @@ textarea {
   color: #fef9f0 !important;
 }
 
+.bg-color-yellow-50 {
+  background-color: #fae1b6 !important;
+}
+
+.txt-color-yellow-50 {
+  color: #fae1b6 !important;
+}
+
 .bg-color-gray-light {
   background-color: #f9f9f9 !important;
 }
@@ -747,6 +783,8 @@ p {
 }
 
 body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
   min-height: 100vh;
   overflow-y: scroll;
   line-height: 1.5;
@@ -10049,7 +10087,6 @@ a:active {
   font-family: inherit;
   font-weight: normal;
   margin: 6px;
-  overflow: hidden;
   position: relative;
   -moz-user-select: none;
   -webkit-user-select: none;
@@ -10063,11 +10100,15 @@ a:active {
   text-decoration-thickness: 1px;
   text-underline-offset: 0.3em;
   text-align: left;
+  align-items: center;
+  column-gap: 0.5rem;
   font-size: 1.125rem;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.5em;
-  padding: 0.5rem 1rem;
+  height: 3rem;
+  line-height: 1.1;
+  padding: 0 1rem;
 }
 .pkt-btn[class*=pkt-btn--icon] > .pkt-btn__icon {
   display: block;
@@ -10116,20 +10157,16 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.5em;
-  padding: 0.5rem 1rem;
+  height: 2.625rem;
+  line-height: 1.1;
+  padding: 0 0.5rem;
 }
 .pkt-btn--small .pkt-btn__icon {
   height: 1.25rem;
   width: 1.25rem;
 }
-.pkt-btn--small.pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0 0.5rem 0 0;
-}
-.pkt-btn--small.pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0 0 0 0.5rem;
-}
-.pkt-btn--small.pkt-btn--icon-only .pkt-btn__icon {
-  margin: 0 -0.3125rem;
+.pkt-btn--small.pkt-btn--icon-only {
+  padding: 0 0.5625rem;
 }
 .pkt-btn__icon {
   height: 1.5rem;
@@ -10141,46 +10178,30 @@ a.pkt-btn:active, .pkt-btn:enabled:active, .pkt-btn.pkt-btn--active, .pkt-btn.pk
 .pkt-btn--icon-left {
   flex-direction: row;
 }
-.pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0.09375rem 0.5rem 0 0;
-}
 .pkt-btn--icon-right {
   flex-direction: row-reverse;
 }
-.pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0.09375rem 0 0 0.5rem;
-}
 .pkt-btn--icons-right-and-left {
   flex-direction: row;
 }
-.pkt-btn--icons-right-and-left .pkt-btn__icon:first-of-type {
-  margin: 0.09375rem 0.5rem 0 0;
-}
-.pkt-btn--icons-right-and-left .pkt-btn__icon:last-of-type {
-  margin: 0.09375rem 0 0 0.5rem;
-}
-.pkt-btn--icon-only .pkt-btn__icon {
-  margin: 0.09375rem -0.21875rem;
+.pkt-btn--icon-only {
+  padding: 0 0.625rem;
 }
 .pkt-btn--large {
   font-size: 1.5rem;
   font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.5em;
-  padding: 0.75rem 1rem;
+  height: 4rem;
+  line-height: 1.1;
+  padding: 0 1rem;
 }
 .pkt-btn--large .pkt-btn__icon {
   height: 2rem;
   width: 2rem;
 }
-.pkt-btn--large.pkt-btn--icon-left .pkt-btn__icon {
-  margin: 0.0625rem 0.5rem 0 0;
-}
-.pkt-btn--large.pkt-btn--icon-right .pkt-btn__icon {
-  margin: 0.0625rem 0 0 0.5rem;
-}
-.pkt-btn--large.pkt-btn--icon-only .pkt-btn__icon {
-  margin: 0.0625rem -0.25rem;
+.pkt-btn--large.pkt-btn--icon-only {
+  padding: 0 0.875rem;
 }
 .pkt-btn::-moz-focus-inner {
   border: 0;
@@ -10797,31 +10818,65 @@ Therefore, this is removed from the reset here, and images who need to be fluid
  * Alert component
  */
 .pkt-alert {
-  padding: 1.5rem;
+  --pkt-alert-bc: var(--color-blue);
+  --pkt-alert-bg: var(--color-blue-60);
+  --pkt-alert-txt: var(--color-blue-dark);
+  --pkt-alert-icon-fg: var(--color-blue-dark);
+  --pkt-alert-close-fg: var(--color-blue-dark);
+}
+
+.pkt-alert--error {
+  --pkt-alert-bc: var(--color-red);
+  --pkt-alert-bg: var(--color-red-30);
+}
+
+.pkt-alert--success {
+  --pkt-alert-bc: var(--color-green);
+  --pkt-alert-bg: var(--color-green-30);
+}
+
+.pkt-alert--warning {
+  --pkt-alert-bc: var(--color-yellow);
+  --pkt-alert-bg: var(--color-yellow-50);
+}
+
+.pkt-alert {
+  padding: 1.5rem 1.5rem 1.5rem 1.25rem;
   display: block;
-  overflow: hidden;
   position: relative;
+  border-left: 0.25rem solid var(--pkt-alert-bc);
+  background-color: var(--pkt-alert-bg);
+  color: var(--pkt-alert-txt);
 }
-.pkt-alert__text {
+.pkt-alert__title {
   font-size: 1.125rem;
-  font-weight: 300;
+  font-weight: 500;
   letter-spacing: -0.2px;
   line-height: 1.5em;
-  margin-bottom: 0;
-  padding: 0;
+  margin: 0 0 1.5rem 2.5rem;
 }
-.pkt-alert__title {
+.pkt-alert__close ~ .pkt-alert__title {
+  margin: 0 4rem 1.5rem 2.5rem;
+}
+.pkt-alert__text {
   font-size: 1.125rem;
-  font-weight: 500;
+  font-weight: 300;
   letter-spacing: -0.2px;
   line-height: 1.5em;
-  display: flex;
-  align-items: center;
-  margin-bottom: 1.5rem;
+  margin: 0 0 0 2.5rem;
 }
-.pkt-alert__content {
-  display: flex;
-  align-items: flex-start;
+.pkt-alert__text p {
+  margin-bottom: 1rem;
+}
+.pkt-alert__text p:last-of-type {
+  margin-bottom: 0;
+}
+.pkt-alert__close + .pkt-alert__text {
+  margin: 0 4rem 0 2.5rem;
+}
+.pkt-alert__title + .pkt-alert__text {
+  margin-left: 0;
+  margin-right: 0;
 }
 .pkt-alert__date {
   font-size: 0.875rem;
@@ -10830,64 +10885,19 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   line-height: 1.5em;
   margin-top: 1.5rem;
 }
-.pkt-alert__close {
-  display: flex;
-  float: right;
-  margin-left: 1.5rem;
-}
 .pkt-alert__icon {
-  margin-right: 1rem;
-  height: 1.875rem;
-  width: 1.875rem;
-  flex-shrink: 0;
-}
-.pkt-alert--success {
-  border-left: 3px solid #034b45;
-  background-color: #f2fff3;
-  color: #034b45;
-}
-.pkt-alert--success.pkt-alert .pkt-alert__icon {
-  --bg-color: var(--color-green-dark);
-  --fg-color: var(--color-green-dark-5);
-}
-.pkt-alert--success.pkt-alert .pkt-alert__close {
-  --fg-color: var(--color-green-dark);
-}
-.pkt-alert--error {
-  border-left: 3px solid #96281c;
-  background-color: #fff3f2;
-  color: #96281c;
-}
-.pkt-alert--error.pkt-alert .pkt-alert__icon {
-  --bg-color: var(--color-error);
-  --fg-color: var(--color-red-5);
-}
-.pkt-alert--error.pkt-alert .pkt-alert__close {
-  --fg-color: var(--color-error);
-}
-.pkt-alert--warning {
-  border-left: 3px solid #f9c66b;
-  background-color: #fef9f0;
-  color: #774c01;
-}
-.pkt-alert--warning.pkt-alert .pkt-alert__icon {
-  --bg-color: var(--color-yellow);
-  --fg-color: var(--color-blue-dark);
-}
-.pkt-alert--warning.pkt-alert .pkt-alert__close {
-  --fg-color: var(--color-warning);
-}
-.pkt-alert--info {
-  border-left: 3px solid #2a2859;
-  background-color: #f2f9ff;
-  color: #2a2859;
-}
-.pkt-alert--info.pkt-alert .pkt-alert__icon {
-  --bg-color: var(--color-blue);
-  --fg-color: var(--color-blue-dark);
+  --fg-color: var(--pkt-alert-icon-fg);
+  height: 2rem;
+  width: 2rem;
+  position: absolute;
+  top: 22px;
+  left: 20px;
 }
-.pkt-alert--info.pkt-alert .pkt-alert__close {
-  --fg-color: var(--color-blue-dark);
+.pkt-alert__close {
+  --fg-color: var(--pkt-alert-close-fg);
+  position: absolute;
+  right: 1.125rem;
+  top: 0.625rem;
 }
 
 /* 
@@ -11295,47 +11305,6 @@ Therefore, this is removed from the reset here, and images who need to be fluid
   width: 4rem;
 }
 
-.pkt-font-icon {
-  display: inline-block;
-  font-family: 'Oslo Icons', sans-serif;
-}
-.pkt-font-icon--chevron-left::before {
-  content: "\e907";
-}
-.pkt-font-icon--chevron-right::before {
-  content: "\e908";
-}
-.pkt-font-icon--chevron-up::before {
-  content: "\e909";
-}
-.pkt-font-icon--chevron-down::before {
-  content: "\e906";
-}
-.pkt-font-icon--user::before {
-  content: "\e921";
-}
-.pkt-font-icon--menu::before {
-  content: "\e917";
-}
-.pkt-font-icon--close::before {
-  content: "\e923";
-}
-.pkt-font-icon--search::before {
-  content: "\e915";
-}
-.pkt-font-icon--trash::before {
-  content: "\e92d";
-}
-.pkt-font-icon--edit::before {
-  content: "\e949";
-}
-.pkt-font-icon--filter::before {
-  content: "\e910";
-}
-.pkt-font-icon--envelope::before {
-  content: "\e929";
-}
-
 /* 
  * Header element
  */