@inera/ids-design 8.0.1 → 8.2.0

package/components/header-inera/header-inera-nav-item.css

@@ -28,15 +28,6 @@
 .ids-header-inera-nav-item {
   display: none;
 }
-.ids-header-inera-nav-item ::slotted(a),
-.ids-header-inera-nav-item ::slotted(.ids-link) {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  opacity: 0;
-}
 .ids-header-inera-nav-item ids-notification-badge,
 .ids-header-inera-nav-item .ids-notification-badge {
   margin-left: 0.188rem;
@@ -48,55 +39,26 @@
 .ids-header-inera-nav-item.ids-header-inera-nav-item--unresponsive {
   display: block;
 }
-.ids-header-inera-nav-item:focus-within .ids-header-inera-nav-item__link {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: -0.313rem;
-}
 .ids-header-inera-nav-item .ids-header-inera-nav-item__button,
 .ids-header-inera-nav-item .ids-header-inera-nav-item__link {
   display: block;
   position: relative;
-  padding: 0.5rem 0.625rem;
+  padding: 0.5rem 0.75rem;
   outline-offset: -0.125rem !important;
   text-decoration: none;
   font-size: 1.125rem;
   line-height: 1.5rem;
-  font-weight: 600;
+  font-weight: var(--IDS-HEADER-INERA-NAV-ITEM__FONT-WEIGHT);
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   color: var(--IDS-HEADER-INERA-NAV-ITEM__COLOR);
   background-color: transparent;
   border: 0;
   cursor: pointer;
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button a,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link a {
-  font-family: var(--IDS-FONT-FAMILY-HEADING);
-  color: var(--IDS-HEADER-INERA-NAV-ITEM__COLOR);
-  text-decoration: none;
-}
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button a:focus,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link a:focus {
-  outline: none;
-}
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button.ids-header-inera-nav-item__button--active:after, .ids-header-inera-nav-item .ids-header-inera-nav-item__button.ids-header-inera-nav-item__link--active:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link.ids-header-inera-nav-item__button--active:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link.ids-header-inera-nav-item__link--active:after {
-  width: auto;
-  right: 0;
-}
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button.ids-header-inera-nav-item__button--expanded,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link.ids-header-inera-nav-item__button--expanded {
-  color: var(--IDS-HEADER-INERA-NAV-ITEM__COLOR);
-}
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button.ids-header-inera-nav-item__button--expanded:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link.ids-header-inera-nav-item__button--expanded:after {
-  width: auto;
-  right: 0;
-}
 .ids-header-inera-nav-item .ids-header-inera-nav-item__button:after,
 .ids-header-inera-nav-item .ids-header-inera-nav-item__link:after {
   content: "";
-  background: var(--IDS-HEADER-INERA-NAV-ITEM__BOTTOM-BORDER-COLOR);
+  background-color: var(--IDS-HEADER-INERA-NAV-ITEM__BOTTOM-BORDER-COLOR);
   display: block;
   height: 0.313rem;
   left: 0;
@@ -108,6 +70,18 @@
   margin-left: 0.625rem;
   margin-right: 0.625rem;
 }
+.ids-header-inera-nav-item .ids-header-inera-nav-item__button a,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__button ::slotted(a),
+.ids-header-inera-nav-item .ids-header-inera-nav-item__link a,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__link ::slotted(a) {
+  padding: 0;
+  font-size: 1.125rem;
+  line-height: 1.5rem;
+  font-weight: var(--IDS-HEADER-INERA-NAV-ITEM__FONT-WEIGHT);
+  font-family: var(--IDS-FONT-FAMILY-HEADING);
+  color: var(--IDS-HEADER-INERA-NAV-ITEM__COLOR);
+  text-decoration: none;
+}
 .ids-header-inera-nav-item .ids-header-inera-nav-item__button:hover,
 .ids-header-inera-nav-item .ids-header-inera-nav-item__link:hover {
   text-decoration: none;
@@ -117,27 +91,36 @@
   width: auto;
   right: 0;
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button:focus:after, .ids-header-inera-nav-item .ids-header-inera-nav-item__button:focus-visible:after, .ids-header-inera-nav-item .ids-header-inera-nav-item__button.focus-within:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link:focus:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link:focus-visible:after,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link.focus-within:after {
+.ids-header-inera-nav-item .ids-header-inera-nav-item__button a:focus-visible,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__button ::slotted(a:focus-visible), .ids-header-inera-nav-item .ids-header-inera-nav-item__button:focus-visible,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__link a:focus-visible,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__link ::slotted(a:focus-visible),
+.ids-header-inera-nav-item .ids-header-inera-nav-item__link:focus-visible {
+  outline: var(--IDS-FOCUS__OUTLINE);
+}
+.ids-header-inera-nav-item.ids-header-inera-nav-item--active .ids-header-inera-nav-item__button:after,
+.ids-header-inera-nav-item.ids-header-inera-nav-item--active .ids-header-inera-nav-item__link:after {
   width: auto;
   right: 0;
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__button:focus-visible:focus,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__link:focus-visible:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: -0.125rem !important;
+.ids-header-inera-nav-item.ids-header-inera-nav-item--expanded .ids-header-inera-nav-item__button,
+.ids-header-inera-nav-item.ids-header-inera-nav-item--expanded .ids-header-inera-nav-item__link {
+  color: var(--IDS-HEADER-INERA-ADMIN-NAV-ITEM__COLOR);
+}
+.ids-header-inera-nav-item.ids-header-inera-nav-item--expanded .ids-header-inera-nav-item__button:after,
+.ids-header-inera-nav-item.ids-header-inera-nav-item--expanded .ids-header-inera-nav-item__link:after {
+  width: auto;
+  right: 0;
 }
 .ids-header-inera-nav-item .ids-header-inera-nav-item__menu {
   background-color: var(--IDS-HEADER-INERA-NAV-ITEM-MENU__BACKGROUND-COLOR);
-  box-shadow: var(--IDS-BOX-SHADOW-BOTTOM);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   left: 0;
   right: 0;
   top: 101%;
   min-height: 10.813rem;
   overflow: hidden;
-  padding: 2.5rem 1rem 3.125rem;
+  padding: 3rem 0;
   position: absolute;
   width: 100%;
   z-index: 20;
@@ -148,7 +131,7 @@
 .ids-header-inera-nav-item .ids-header-inera-nav-item__menu.ids-header-inera-nav-item__menu--expanded {
   display: block;
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-inner {
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-content {
   max-width: var(--IDS__MAX-WIDTH);
   padding: var(--IDS__CONTAINER-PADDING);
   box-sizing: border-box;
@@ -156,29 +139,31 @@
   width: 100%;
   display: flex;
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col {
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-1,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-2,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-3,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-4 {
   flex: 0 25%;
+  flex-shrink: 0;
 }
 .ids-header-inera-nav-item ::slotted([slot=col-1]),
 .ids-header-inera-nav-item ::slotted([slot=col-2]),
 .ids-header-inera-nav-item ::slotted([slot=col-3]) {
   display: block;
-  margin-bottom: 0.625rem;
-  padding-bottom: 0.625rem;
+  padding: 0.5rem 0;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
   border-bottom: 0.063rem solid var(--IDS-HEADER-INERA-NAV-ITEM-MENU__LINK-BORDER-COLOR);
 }
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(1) ids-link,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(1) .ids-header-inera-nav__menu-item-wrapper,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(2) ids-link,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(2) .ids-header-inera-nav__menu-item-wrapper,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(3) ids-link,
-.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col:nth-child(3) .ids-header-inera-nav__menu-item-wrapper {
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-1 ids-link,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-1 .ids-header-inera-nav__menu-item-wrapper,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-2 ids-link,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-2 .ids-header-inera-nav__menu-item-wrapper,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-3 ids-link,
+.ids-header-inera-nav-item .ids-header-inera-nav-item__menu-col-3 .ids-header-inera-nav__menu-item-wrapper {
   display: flex;
-  margin-bottom: 0.625rem;
-  padding-bottom: 0.625rem;
+  padding: 0.5rem 0;
   margin-right: 2.5rem;
   font-size: 1rem;
   line-height: 1.5rem;
@@ -188,12 +173,8 @@
   .ids-header-inera-nav-item {
     display: flex;
   }
-  .ids-header-inera-nav-item .ids-header-inera-nav-item__menu {
-    padding: 2.5rem 1rem 3.125rem;
-  }
 }
-@media only screen and (max-width: 1024px) {
-  .ids-header-inera-nav-item .nav-item {
-    font-size: 1.0625rem !important;
-  }
+
+:host .ids-header-inera-nav-item {
+  margin-bottom: -0.0625rem;
 }

package/components/header-inera/header-inera.css

@@ -59,7 +59,7 @@
   height: 3rem;
   text-align: center;
   background-color: var(--IDS-SKIP-TO-CONTENT-LINK__BACKGROUND-COLOR);
-  box-shadow: var(--IDS-BOX-SHADOW);
+  box-shadow: var(--IDS-BOX-SHADOW-ELEVATED-2);
   z-index: 20;
   font-family: var(--IDS-LINK__FONT-FAMILY);
   font-size: 1rem;
@@ -72,12 +72,10 @@
   transform: translateY(-300%);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
 }
-.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a:focus),
-.ids-header-inera .ids-header-inera__skip-to-content a:focus {
+.ids-header-inera .ids-header-inera__skip-to-content ::slotted(a:focus-visible),
+.ids-header-inera .ids-header-inera__skip-to-content a:focus-visible {
   transform: translateY(0);
   transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
-  color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
-  text-decoration-color: var(--IDS-LINK--COLOR-PRESET-1__HOVER-COLOR);
   outline-offset: -0.375rem !important;
 }
 .ids-header-inera .ids-header-inera__main {
@@ -100,6 +98,7 @@
   align-items: center;
   position: relative;
   overflow: hidden;
+  border-radius: 0.0625rem;
 }
 .ids-header-inera .ids-header-inera__logo:before {
   font: icon;
@@ -112,26 +111,29 @@
   content: "\e920";
   color: var(--IDS-HEADER-INERA__LOGO-COLOR);
   font-size: 5.125rem;
+  line-height: 5.125rem;
 }
 .ids-header-inera .ids-header-inera__logo:focus-visible {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET);
+  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;
   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 {
   color: var(--IDS-HEADER-INERA__LOGO-COLOR);
-  font-size: 5.125rem;
+  font-size: 5.1rem;
   width: 5.125rem;
   height: 1.75rem;
   overflow: hidden;
   display: flex;
   align-items: center;
+  border-radius: 0.0313rem;
 }
 .ids-header-inera .ids-header-inera__items {
   display: flex;
@@ -154,6 +156,7 @@
   }
   .ids-header-inera .ids-header-inera__logo:before {
     font-size: 9.25rem;
+    line-height: 9.25rem;
   }
   .ids-header-inera .ids-header-inera__logo-custom {
     width: 9.3125rem;
@@ -161,7 +164,7 @@
   }
   .ids-header-inera .ids-header-inera__logo-custom ::slotted(a),
   .ids-header-inera .ids-header-inera__logo-custom a {
-    font-size: 9.25rem;
+    font-size: 9.1rem;
     width: 9.3125rem;
     height: 3.75rem;
   }