slu-design-system 7.0.3 → 7.0.5

package/dist/designsystem-default.css

@@ -8,14 +8,20 @@
   --adb-info: #17a2b8;
   --adb-primary-subtle: var(--bs-primary-bg-subtle);
   --adb-primary-dark: #004851;
-  --adb-primary-dark-rgb: 0, 72, 81;
   --adb-primary-dark-border: #003c44;
-  --adb-primary-dark-border-rgb: 0, 60, 68;
   --adb-primary-dark-hover: #003f47;
-  --adb-primary-dark-hover-rgb: 0, 63, 71;
   --adb-primary-dark-hover-border: #00353c;
-  --adb-primary-dark-hover-border-rgb: 0, 53, 60;
   --adb-page-bg: #e9ebee;
+  --adb-header-bg: var(--bs-primary);
+  --adb-header-color: #fff;
+  --adb-footer-bg: var(--adb-primary-dark);
+  --adb-footer-color: #fff;
+  --adb-offcanvas-bg: var(--adb-header-bg);
+  --adb-offcanvas-color: var(--adb-header-color);
+  --adb-surface-border: var(--bs-primary-border-subtle);
+  --adb-surface-divider: var(--bs-primary-border-subtle);
+  --adb-surface-btn-border: var(--bs-primary-border-subtle);
+  --adb-surface-btn-hover-border: #fff;
 }
 
 body {
@@ -6223,7 +6229,7 @@ textarea.form-control-lg {
   --bs-offcanvas-height: 30vh;
   --bs-offcanvas-padding-x: 1rem;
   --bs-offcanvas-padding-y: 1rem;
-  --bs-offcanvas-color: white;
+  --bs-offcanvas-color: var(--bs-body-color);
   --bs-offcanvas-bg: var(--bs-body-bg);
   --bs-offcanvas-border-width: var(--bs-border-width);
   --bs-offcanvas-border-color: var(--bs-border-color-translucent);
@@ -11938,9 +11944,8 @@ textarea.form-control-lg {
   border-radius: 0;
 }
 
-.btn-light {
-  background-color: transparent;
-  border: 1px solid #f2f1f1;
+.hide-help .help-button {
+  display: none !important;
 }
 
 .btn-secondary {
@@ -11960,74 +11965,6 @@ textarea.form-control-lg {
   --bs-btn-disabled-border-color: rgb(191.25, 191.25, 191.25);
 }
 
-.btn-select-primary {
-  display: inline-block;
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #007681;
-  --bs-btn-border-color: rgb(0, 106.2, 116.1);
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: rgb(0, 100.3, 109.65);
-  --bs-btn-hover-border-color: rgb(0, 84.96, 92.88);
-  --bs-btn-focus-shadow-rgb: 38, 129, 137;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: rgb(0, 94.4, 103.2);
-  --bs-btn-active-border-color: rgb(0, 79.65, 87.075);
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #007681;
-  --bs-btn-disabled-border-color: rgb(0, 106.2, 116.1);
-  --bs-btn-padding-y: 0.1rem;
-  --bs-btn-padding-x: 0.3rem;
-  --bs-btn-font-size: 0.75rem;
-  --bs-btn-border-radius: 0.375rem;
-}
-.btn-select-primary:not(.read-only):not(:disabled)::after {
-  margin-left: 0.5rem;
-  content: "\f00d";
-  font-family: "Font Awesome 5 Pro";
-  font-weight: 900;
-}
-
-.btn-select-secondary {
-  display: inline-block;
-  --bs-btn-color: #fff;
-  --bs-btn-bg: #4d4d4d;
-  --bs-btn-border-color: rgb(69.3, 69.3, 69.3);
-  --bs-btn-hover-color: #fff;
-  --bs-btn-hover-bg: rgb(65.45, 65.45, 65.45);
-  --bs-btn-hover-border-color: rgb(55.44, 55.44, 55.44);
-  --bs-btn-focus-shadow-rgb: 97, 97, 97;
-  --bs-btn-active-color: #fff;
-  --bs-btn-active-bg: rgb(61.6, 61.6, 61.6);
-  --bs-btn-active-border-color: rgb(51.975, 51.975, 51.975);
-  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  --bs-btn-disabled-color: #fff;
-  --bs-btn-disabled-bg: #4d4d4d;
-  --bs-btn-disabled-border-color: rgb(69.3, 69.3, 69.3);
-  --bs-btn-padding-y: 0.1rem;
-  --bs-btn-padding-x: 0.3rem;
-  --bs-btn-font-size: 0.75rem;
-  --bs-btn-border-radius: 0.375rem;
-  color: white;
-}
-.btn-select-secondary:not(.read-only):not(:disabled)::after {
-  margin-left: 0.5rem;
-  content: "\f00d";
-  font-family: "Font Awesome 5 Pro";
-  font-weight: 900;
-}
-
-.hide-help .help-button {
-  display: none !important;
-}
-.hide-help #help-button {
-  display: none !important;
-}
-
-#help-button:hover #help-icon {
-  color: white !important;
-}
-
 .btn-pill-primary {
   --bs-btn-color: black;
   --bs-btn-bg: white;
@@ -12072,6 +12009,10 @@ textarea.form-control-lg {
   background-position: center;
 }
 
+.adb-container {
+  max-width: 1100px;
+}
+
 .adb-light {
   background-color: #e9ebee;
 }
@@ -12088,9 +12029,8 @@ section {
   margin-bottom: 1rem;
 }
 
-.offcanvas-body ul,
-.offcanvas-body li.list-group-item {
-  border-color: rgba(255, 255, 255, 0.33) !important;
+.current-page {
+  color: var(--bs-body-color);
 }
 
 .pop {
@@ -12122,10 +12062,6 @@ section {
   top: 0rem;
 }
 
-.text-decoration-underline:hover {
-  text-decoration: underline !important;
-}
-
 mark {
   font-weight: bold;
   color: inherit;
@@ -12265,12 +12201,50 @@ pre {
   overflow: hidden;
 }
 
+.no-underline {
+  text-decoration: none;
+}
+
+.no-underline a {
+  text-decoration: none;
+}
+.no-underline a:hover {
+  text-decoration: underline;
+}
+
+.no-underline .btn-link {
+  text-decoration: none;
+}
+.no-underline .btn-link:hover {
+  text-decoration: underline;
+}
+
+a.no-underline {
+  text-decoration: none;
+}
+a.no-underline:hover {
+  text-decoration: underline;
+}
+
+.btn-link.no-underline {
+  text-decoration: none;
+}
+.btn-link.no-underline:hover {
+  text-decoration: underline;
+}
+
 .alert-primary {
   --bs-alert-color: var(--adb-primary-dark);
   --bs-alert-bg: var(--adb-primary-subtle);
   --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 35%, white);
 }
 
+[data-bs-theme=dark] .alert-primary {
+  --bs-alert-color: var(--adb-primary-subtle);
+  --bs-alert-bg: color-mix(in srgb, var(--bs-primary) 55%, black);
+  --bs-alert-border-color: color-mix(in srgb, var(--bs-primary) 60%, white);
+}
+
 .adb-plate-primary {
   background-color: var(--bs-body-bg);
   color: var(--adb-plate-primary-color);
@@ -12283,6 +12257,32 @@ pre {
   min-height: 5rem;
 }
 
+.adb-offcanvas {
+  background-color: var(--adb-header-bg);
+  color: var(--adb-header-color);
+}
+.adb-offcanvas hr,
+.adb-offcanvas .dropdown-divider {
+  border-color: var(--adb-surface-divider);
+}
+.adb-offcanvas .list-group-item {
+  border-color: var(--adb-surface-border);
+}
+.adb-offcanvas .btn-primary {
+  --bs-btn-border-color: var(--adb-surface-btn-border);
+  --bs-btn-hover-border-color: var(--adb-surface-btn-hover-border);
+}
+
+.adb-header {
+  background-color: var(--adb-header-bg);
+  color: var(--adb-header-color);
+}
+
+.adb-footer {
+  background-color: var(--adb-footer-bg);
+  color: var(--adb-footer-color);
+}
+
 .h-limit:not(.loading) {
   max-height: 20rem;
   overflow: auto;
@@ -12580,33 +12580,31 @@ svg .presence-temp-reproduction {
   fill-opacity: 0.8;
 }
 
-.fa-spin {
-  opacity: 0.2;
-}
-
-.loading,
-.loading-dead,
-.loading-dead-spinner {
-  pointer-events: none !important;
-  opacity: 0.5 !important;
-  min-height: 10rem;
+.loading {
   position: relative;
+  pointer-events: none;
+  opacity: 0.6;
 }
-.loading::before,
-.loading-dead::before,
-.loading-dead-spinner::before {
-  content: "\f110";
-  font-family: "Font Awesome 5 Pro";
-  font-size: 2rem;
-  opacity: 0.8 !important;
-  font-weight: 900;
-  animation: fa-spin 2s infinite linear;
+.loading::after {
+  content: "";
   position: absolute;
-  z-index: 1;
-  left: 45%;
-  transform: translateX(-45%);
+  inset: 0;
+  margin: auto;
+  width: 2rem;
+  height: 2rem;
+  border: 0.25rem solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  opacity: 0.4;
+  animation: spinner-border 0.75s linear infinite;
+  z-index: 1000;
 }
 
+@keyframes spinner-border {
+  to {
+    transform: rotate(360deg);
+  }
+}
 a:hover img {
   opacity: 0.8;
 }
@@ -12919,53 +12917,20 @@ ul {
   border-color: transparent;
 }
 
-.no-underline {
-  text-decoration: none;
-}
-
-.no-underline a {
-  text-decoration: none;
-}
-.no-underline a:hover {
-  text-decoration: underline;
-}
-
-.no-underline .btn-link {
-  text-decoration: none;
-}
-.no-underline .btn-link:hover {
-  text-decoration: underline;
-}
-
-a.no-underline {
-  text-decoration: none;
-}
-a.no-underline:hover {
-  text-decoration: underline;
-}
-
-.btn-link.no-underline {
-  text-decoration: none;
-}
-.btn-link.no-underline:hover {
-  text-decoration: underline;
-}
-
 .theme-artportalen {
   --bs-primary: #4E6936;
   --bs-primary-rgb: 78, 105, 54;
-  --bs-link-color: #4E6936;
+  --adb-primary-subtle: #E4EBD9;
+  --bs-link-color: var(--bs-primary);
   --bs-link-color-rgb: 78, 105, 54;
   --bs-link-hover-color: #3B5029;
   --bs-link-hover-color-rgb: 59, 80, 41;
+  --adb-header-bg: var(--bs-primary);
+  --adb-footer-bg: var(--adb-primary-dark);
   --adb-primary-dark: #3B5029;
-  --adb-primary-dark-rgb: 59, 80, 41;
   --adb-primary-dark-border: #324424;
-  --adb-primary-dark-border-rgb: 50, 68, 36;
   --adb-primary-dark-hover: #435C2F;
-  --adb-primary-dark-hover-rgb: 67, 92, 47;
   --adb-primary-dark-hover-border: #394E28;
-  --adb-primary-dark-hover-border-rgb: 57, 78, 40;
   --adb-primary-dark-color: #ffffff;
   --adb-primary-subtle: #E4EBD9;
 }
@@ -12973,18 +12938,17 @@ a.no-underline:hover {
 .theme-fynddata {
   --bs-primary: #307c5e;
   --bs-primary-rgb: 48, 124, 94;
-  --bs-link-color: #307c5e;
+  --bs-link-color: var(--bs-primary);
   --bs-link-color-rgb: 48, 124, 94;
   --bs-link-hover-color: #273d34;
   --bs-link-hover-color-rgb: 39, 61, 52;
+  --adb-primary-subtle: #D8ECE5;
+  --adb-header-bg: var(--bs-primary);
+  --adb-footer-bg: var(--adb-primary-dark);
   --adb-primary-dark: #273D34;
-  --adb-primary-dark-rgb: 39, 61, 52;
   --adb-primary-dark-border: #20332C;
-  --adb-primary-dark-border-rgb: 32, 51, 44;
   --adb-primary-dark-hover: #314B41;
-  --adb-primary-dark-hover-rgb: 49, 75, 65;
   --adb-primary-dark-hover-border: #2B4239;
-  --adb-primary-dark-hover-border-rgb: 43, 66, 57;
   --adb-primary-dark-color: #ffffff;
   --adb-primary-subtle: #D8ECE5;
 }
@@ -12992,16 +12956,17 @@ a.no-underline:hover {
 .theme-slu {
   --bs-primary: #154734;
   --bs-primary-rgb: 21, 71, 52;
-  --bs-link-color: #154734;
+  --bs-link-color: var(--bs-primary);
   --bs-link-color-rgb: 21, 71, 52;
+  --bs-link-hover-color: var(--adb-primary-dark);
+  --bs-link-hover-color-rgb: 18, 61, 44;
+  --adb-primary-subtle: #D9E7E1;
+  --adb-header-bg: var(--bs-primary);
+  --adb-footer-bg: var(--adb-primary-dark);
   --adb-primary-dark: #123D2C;
-  --adb-primary-dark-rgb: 18, 61, 44;
   --adb-primary-dark-border: #0F3425;
-  --adb-primary-dark-border-rgb: 15, 52, 37;
   --adb-primary-dark-hover: #184C36;
-  --adb-primary-dark-hover-rgb: 24, 76, 54;
   --adb-primary-dark-hover-border: #15422F;
-  --adb-primary-dark-hover-border-rgb: 21, 66, 47;
   --adb-primary-dark-color: #ffffff;
   --adb-primary-subtle: #D9E7E1;
 }
@@ -13009,9 +12974,7 @@ a.no-underline:hover {
 [data-bs-theme=dark] {
   --adb-page-bg: #1f1f1f;
   --bs-body-bg: #111111;
-  --bs-body-bg-rgb: 17, 17, 17;
   --bs-secondary-bg: #1a1a1a;
-  --bs-secondary-bg-rgb: 26, 26, 26;
   --bs-border-color: #343434;
   --bs-body-color: #cecdcd;
   --bs-emphasis-color: #f0f0f0;
@@ -13020,19 +12983,37 @@ a.no-underline:hover {
 .theme-mk {
   --bs-primary: #5C6670;
   --bs-primary-rgb: 92, 102, 112;
+  --adb-header-bg: #f6f6f4;
+  --adb-header-color: #212529;
+  --adb-footer-bg: #ecece8;
+  --adb-footer-color: #212529;
+  --adb-offcanvas-bg: var(--adb-header-bg);
+  --adb-offcanvas-color: var(--adb-header-color);
+  --adb-surface-border: #b8b8b2;
+  --adb-surface-divider: #b8b8b2;
+  --adb-surface-btn-border: #8f8f88;
+  --adb-surface-btn-hover-border: #5f5f59;
   --adb-primary-dark: #434B53;
-  --adb-primary-dark-rgb: 67, 75, 83;
   --adb-primary-dark-border: #394047;
-  --adb-primary-dark-border-rgb: 57, 64, 71;
   --adb-primary-dark-hover: #505963;
-  --adb-primary-dark-hover-rgb: 80, 89, 99;
   --adb-primary-dark-hover-border: #464E57;
-  --adb-primary-dark-hover-border-rgb: 70, 78, 87;
   --adb-primary-dark-color: #ffffff;
   --adb-primary-subtle: #E3E6E9;
 }
 .theme-mk body {
-  background-color: red !important;
+  background-color: var(--adb-page-bg) !important;
+}
+.theme-mk .adb-header {
+  border-bottom: 1px solid var(--adb-surface-border);
+}
+.theme-mk[data-bs-theme=dark] {
+  --adb-surface-border: #555;
+  --adb-header-bg: #000;
+  --adb-header-color: #fff;
+  --adb-footer-bg: #000;
+  --adb-footer-color: #fff;
+  --adb-offcanvas-bg: #000;
+  --adb-offcanvas-color: #fff;
 }
 
 /*# sourceMappingURL=designsystem-default.css.map */