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

@inera/ids-design 8.2.1 → 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-inera/header-inera.css CHANGED Viewed

@@ -13,7 +13,7 @@
 /*******
 * A11Y
 ********/
-@media (max-width: 1023px) {
+@media (max-width: 639px) {
   .ids-desktop {
     display: none !important;
   }
@@ -39,12 +39,12 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 0.25rem;
+  height: 0.5rem;
   z-index: 3;
   background-color: var(--IDS-HEADER-INERA__BRAND-BORDER-COLOR);
 }
 .ids-header-inera .ids-header-inera__inner {
-  padding: 0;
+  padding: 0 0.25rem;
 }
 .ids-header-inera .ids-header-inera__skip-to-content {
   position: relative;
@@ -88,12 +88,12 @@
   justify-content: space-between;
   width: 100%;
   box-sizing: border-box;
-  min-height: 3rem;
+  min-height: 5.625rem;
   margin: 0 auto;
 }
 .ids-header-inera .ids-header-inera__logo {
-  width: 5.125rem;
-  height: 1.75rem;
+  width: 9.25rem;
+  height: 3.125rem;
   display: flex;
   align-items: center;
   position: relative;
@@ -105,26 +105,30 @@
   font-family: "Inera-Design-Icons" !important;
   display: block;
   position: absolute;
-  pointer-events: none;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   content: "\e920";
   color: var(--IDS-HEADER-INERA__LOGO-COLOR);
-  font-size: 5.125rem;
-  line-height: 5.125rem;
+  font-size: 9.25rem;
+  line-height: 9.25rem;
 }
 .ids-header-inera .ids-header-inera__logo:focus-visible {
   outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
-.ids-header-inera .ids-header-inera__logo-custom {
-  width: 5.125rem;
-  height: 1.75rem;
+.ids-header-inera .ids-header-inera__items {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  border-radius: 0.0625rem;
 }
-.ids-header-inera .ids-header-inera__logo-custom ::slotted(a),
+.ids-header-inera .ids-header-inera__logo-custom {
+  width: 9.3125rem;
+  height: 3.75rem;
+}
+.ids-header-inera .ids-header-inera__logo-custom a:focus-visible {
+  outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-header-inera .ids-header-inera__logo-custom a {
   color: var(--IDS-HEADER-INERA__LOGO-COLOR);
   font-size: 5.1rem;
@@ -134,43 +138,47 @@
   display: flex;
   align-items: center;
   border-radius: 0.0313rem;
+  font-size: 9.1rem;
+  width: 9.3125rem;
+  height: 3.75rem;
 }
-.ids-header-inera .ids-header-inera__items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-}
-@media all and (min-width: 1024px) {
-  .ids-header-inera:before {
-    height: 0.5rem;
+@media (max-width: 1024px) {
+  .ids-header-inera:not(.ids-header-inera--unresponsive):before {
+    height: 0.25rem;
   }
-  .ids-header-inera .ids-header-inera__inner {
-    padding: 0 0.25rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__inner {
+    padding: 0;
   }
-  .ids-header-inera .ids-header-inera__main {
-    min-height: 5.625rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__main {
+    min-height: 3rem;
   }
-  .ids-header-inera .ids-header-inera__logo {
-    width: 9.25rem;
-    height: 3.125rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__logo {
+    width: 5.125rem;
+    height: 1.75rem;
   }
-  .ids-header-inera .ids-header-inera__logo:before {
-    font-size: 9.25rem;
-    line-height: 9.25rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__logo:before {
+    font-size: 5.125rem;
+    line-height: 5.125rem;
   }
-  .ids-header-inera .ids-header-inera__logo-custom {
-    width: 9.3125rem;
-    height: 3.75rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__logo-custom {
+    width: 5.125rem;
+    height: 1.75rem;
+    display: flex;
+    align-items: center;
+    border-radius: 0.0625rem;
   }
-  .ids-header-inera .ids-header-inera__logo-custom ::slotted(a),
-  .ids-header-inera .ids-header-inera__logo-custom a {
-    font-size: 9.1rem;
-    width: 9.3125rem;
-    height: 3.75rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__logo-custom a:focus-visible {
+    outline: 0.125rem solid var(--IDS-FOCUS__OUTLINE-COLOR);
+    outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
   }
-}
-@media all and (max-width: 1024px) {
-  .ids-header-inera.ids-header-inera--unresponsive .ids-header-inera__main {
-    min-height: 5.625rem;
+  .ids-header-inera:not(.ids-header-inera--unresponsive) .ids-header-inera__logo-custom a {
+    color: var(--IDS-HEADER-INERA__LOGO-COLOR);
+    font-size: 5.1rem;
+    width: 5.125rem;
+    height: 1.75rem;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    border-radius: 0.0313rem;
   }
 }