npm - @inera/ids-design - Versions diffs - 8.2.0 → 9.0.0 - Mend

@inera/ids-design 8.2.0 → 9.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (385) hide show

package/components/header-1177-admin/header-1177-admin-shadow.css ADDED Viewed

@@ -0,0 +1,33 @@
+/*******
+* ICONS
+********/
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
+/*******
+* FORM
+********/
+/*******
+* A11Y
+********/
+.ids-header-1177-admin .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a):focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
+.ids-header-1177-admin .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a) {
+  color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
+  display: flex;
+  align-items: center;
+  height: 2.125rem;
+  width: 4.125rem;
+  font-size: 4rem;
+  overflow: hidden;
+  border-radius: 0.063rem;
+}
+.ids-header-1177-admin .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a:focus-visible) {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: 0 !important;
+}

package/components/header-1177-admin/header-1177-admin.css CHANGED Viewed

@@ -13,7 +13,7 @@
 /*******
 * A11Y
 ********/
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -32,6 +32,7 @@ header.ids-header-1177-admin {
   border-bottom: 0.0625rem solid var(--IDS-HEADER-1177-ADMIN__BORDER-COLOR);
 }
 header.ids-header-1177-admin .ids-header-1177-admin__skip-to-content {
+  display: block;
   position: relative;
   z-index: 20;
 }
@@ -113,22 +114,17 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
   color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   font-size: 4rem;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]):focus-visible,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a):focus-visible {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a) {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a {
   color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   display: flex;
   align-items: center;
@@ -138,9 +134,7 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   overflow: hidden;
   border-radius: 0.063rem;
 }
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible,
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]:focus-visible),
-header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a:focus-visible) {
+header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: 0 !important;
 }
@@ -164,7 +158,7 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   top: 50%;
   transform: translateY(-50%);
   left: -1.25rem;
-  height: 2.188rem;
+  height: 2.75rem;
   background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
 }
 header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
@@ -174,7 +168,7 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 1rem;
+  font-size: 1.25rem;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: none;
   font-weight: 700;
@@ -186,15 +180,12 @@ header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-head
   font-size: 0.875rem !important;
   font-family: var(--IDS-FONT-FAMILY-HEADING) !important;
 }
-@media (min-width: 1024px) {
+@media (max-width: 1024px) {
   header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand:before {
-    height: 2.75rem;
+    height: 2.188rem;
   }
   header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
-    font-size: 1.25rem;
-  }
-  header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text---supplement {
-    font-size: 0.875rem !important;
+    font-size: 1rem;
   }
 }
 header.ids-header-1177-admin:not(.ids-header-1177-admin--unresponsive) .ids-header-1177-admin__main .ids-header-1177-admin__main-right {
@@ -251,22 +242,17 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e91e";
   color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   font-size: 4rem;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]):focus-visible,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a):focus-visible {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a) {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a {
   color: var(--IDS-HEADER-1177-ADMIN__LOGO-COLOR);
   display: flex;
   align-items: center;
@@ -276,9 +262,7 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   overflow: hidden;
   border-radius: 0.063rem;
 }
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible,
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted([slot=logo]:focus-visible),
-header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo ::slotted(a:focus-visible) {
+header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__logo a:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: 0 !important;
 }
@@ -297,7 +281,7 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   top: 50%;
   transform: translateY(-50%);
   left: -1.25rem;
-  height: 2.188rem;
+  height: 2.75rem;
   background-color: var(--IDS-HEADER-1177-ADMIN__SEPARATOR-COLOR);
 }
 header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-1177-admin__main .ids-header-1177-admin__main-left .ids-header-1177-admin__brand .ids-header-1177-admin__brand-text {
@@ -307,7 +291,7 @@ header.ids-header-1177-admin.ids-header-1177-admin--unresponsive .ids-header-117
   color: var(--IDS-HEADER-1177-ADMIN__BRAND-TEXT-COLOR);
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 1rem;
+  font-size: 1.25rem;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: none;
   font-weight: 700;