@ilo-org/styles 1.9.0 → 1.10.0

package/scss/components/_socialmedia.scss

@@ -1,4 +1,3 @@
-@use "../tokens" as *;
 @use "../functions" as *;
 @import "../animations";
 @import "../mixins";
@@ -8,16 +7,16 @@
   $default-theme: "light";
 
   @mixin get-icon($icon, $theme: $default-theme) {
-    @include dataurlicon(
-      $icon,
-      map-get($color, "socialmedia", $theme, "icon", "color")
-    );
+    @if $theme == "dark" {
+      @include icon($icon, var(--ilo-color-white));
+    }
+
+    @if $theme == "light" {
+      @include icon($icon, var(--ilo-color-gray-accessible));
+    }
 
     &:hover {
-      @include dataurlicon(
-        $icon,
-        map-get($color, "socialmedia", $theme, "iconhover", "color")
-      );
+      @include icon($icon, var(--ilo-color-blue));
     }
   }
 
@@ -34,14 +33,12 @@
   }
 
   &--headline {
-    color: map-get($color, "socialmedia", $default-theme, "headline", "color");
-    font-family: var(--ilo-fonts-display);
-    font-weight: map-get($type, "weights", "label");
+    color: var(--ilo-color-blue-dark);
     @include typography("highlight-medium-bold");
-    @include textmargin("margin-bottom", 28px, "body-small", "display", 0, 0);
+    margin-bottom: spacing(7);
 
     #{$c}__theme__dark & {
-      color: map-get($color, "socialmedia", "dark", "headline", "color");
+      color: var(--ilo-color-white);
     }
   }
 
@@ -67,10 +64,17 @@
       overflow: hidden;
       position: relative;
 
+      &:hover {
+        background-color: var(--ilo-color-blue-lighter);
+      }
+
+      #{$c}__theme__dark &:hover {
+        background-color: var(--ilo-color-white);
+      }
+
       &--icon {
         background-position: center;
         background-repeat: no-repeat;
-
         text-indent: -999px;
         border-radius: 2px;
         display: inline-block;
@@ -78,26 +82,6 @@
         width: px-to-rem(24px);
         transition: all 0.1s ease-in-out;
 
-        &:hover {
-          background-color: map-get(
-            $color,
-            "socialmedia",
-            $default-theme,
-            "iconhover",
-            "background"
-          );
-        }
-
-        #{$c}__theme__dark &:hover {
-          background-color: map-get(
-            $color,
-            "socialmedia",
-            "dark",
-            "iconhover",
-            "background"
-          );
-        }
-
         &__facebook {
           @include get-icon("social_facebook");
 
@@ -122,6 +106,22 @@
           }
         }
 
+        &__apple_podcasts {
+          @include get-icon("social_apple_podcasts");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_apple_podcasts", "dark");
+          }
+        }
+
+        &__spotify {
+          @include get-icon("social_spotify");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_spotify", "dark");
+          }
+        }
+
         &__youtube {
           @include get-icon("social_youtube");
 
@@ -177,6 +177,14 @@
             @include get-icon("social_wechat", "dark");
           }
         }
+
+        &__rss {
+          @include get-icon("social_rss");
+
+          #{$c}__theme__dark & {
+            @include get-icon("social_rss", "dark");
+          }
+        }
       }
     }
   }

package/scss/components/_statcard.scss

@@ -43,6 +43,11 @@
         }
       }
 
+      &#{$self}__loading {
+        background-color: var(--ilo-color-gray-base);
+        border-bottom-color: var(--ilo-skeleton-element-background-color);
+      }
+
       #{$self}--content {
         display: flex;
         flex-flow: column;
@@ -51,6 +56,25 @@
         height: 100%;
       }
 
+      #{$self}--skeleton--title {
+        @include skeleton-element(32px, 70%);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(16px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(16px, 80%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--source {
+        @include skeleton-element(10px, 50%);
+        margin-top: spacing(8);
+      }
+
       #{$self}--title {
         color: $brand-ilo-dark-blue;
         @include typography("heading-2");

package/scss/components/_textcard.scss

@@ -50,6 +50,25 @@
         border-bottom: px-to-rem(3px) solid var(--ilo-color-red);
       }
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(14px, 100%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--profile {
+        @include skeleton-element(14px, 80%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--title {
         @include typography("heading-4");
 

package/scss/components/navigation/_nav-complex.scss

@@ -1,15 +1,11 @@
 @use "../../tokens" as *;
 @use "../../functions" as *;
+@use "./internal/nav-shared" as *;
 @import "../../mixins";
 @import "../../config";
 
 .ilo--subsite-nav-complex {
-  position: relative;
-  overflow: hidden;
-
-  @include breakpoint("lg", true) {
-    height: px-to-rem(70px);
-  }
+  @include nav-base;
 
   &-bg {
     &--light {
@@ -22,189 +18,59 @@
   }
 
   &__container {
-    max-width: px-to-rem(1296px);
-    margin-left: auto;
-    margin-right: auto;
-    padding-inline: spacing(4);
-
-    &--light {
-      background-color: var(--ilo-color-blue-lighter);
-    }
-
-    &--dark {
-      background-color: var(--ilo-color-blue);
-    }
+    @include nav-container;
   }
 
   &__widgets {
-    display: flex;
-    justify-content: flex-end;
-    align-items: center;
-    height: px-to-rem(32px);
-    position: relative;
-    padding-inline-end: 0;
-
-    @include breakpoint("lg", true) {
-      display: none;
-    }
+    @include nav-widgets-bar-content;
 
     &-bar-corner {
-      display: block;
-      background-color: var(--ilo-color-blue);
-      width: px-to-rem(32px);
-      height: px-to-rem(32px);
-      clip-path: polygon(0 0, 100% 0, 99% 100%);
-      margin-right: -1px;
-      transform: skewY(0.001deg);
-
-      [dir="rtl"] & {
-        @include cornercut(spacing(10), 100%, "left");
-        margin-right: 0;
-        margin-left: -1px;
-        clip-path: polygon(0 0, 100% 0, 1% 100%);
-      }
+      @include nav-widgets-corner(var(--ilo-color-blue));
     }
 
     &-bar {
-      background-color: var(--ilo-color-blue);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      gap: spacing(4);
-      padding-inline-end: spacing(4);
-      height: px-to-rem(32px);
+      @include nav-widgets-bar(var(--ilo-color-blue));
 
       &__link {
-        @include typography("highlight-small-bold");
-        height: inherit;
-        display: flex;
-        align-items: center;
-        padding-inline: spacing(2);
-        text-decoration: none;
-        color: var(--ilo-color-white);
-
-        &:hover,
-        &:focus {
-          background-color: var(--ilo-color-blue-dark);
-        }
+        @include nav-widgets-link(var(--ilo-color-blue-dark));
       }
     }
 
     &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 100%;
-      width: 100vw;
-      height: 100%;
       background-color: var(--ilo-color-blue);
-      z-index: 1;
-
-      [dir="rtl"] & {
-        left: auto;
-        right: 100%;
-      }
     }
   }
 
   &__branding {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: spacing(6);
-
-    @include breakpoint("lg", true) {
-      display: none;
-    }
+    @include nav-branding;
 
     &-main {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      &__logo img {
-        height: 100%;
-        height: px-to-rem(72px);
-        width: auto;
-      }
-
-      &__name {
-        @include typography("heading-2");
-        padding-inline-start: spacing(4);
-      }
+      @include nav-branding-main;
     }
 
     &-tag {
-      display: flex;
-      flex-direction: column;
-      text-align: right;
-
-      &__main {
-        @include typography("heading-4");
-      }
-
-      &__sub {
-        @include typography("body-xsmall");
-      }
+      @include nav-branding-tag;
     }
   }
 
   &__nav {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    height: px-to-rem(64px);
-
-    @include breakpoint("lg", true) {
-      height: px-to-rem(70px);
-    }
+    @include nav-core;
 
     &-menu {
-      height: 100%;
-      @include breakpoint("lg", true) {
-        display: none;
-      }
+      @include nav-menu;
     }
 
     &-mobile {
-      justify-content: center;
-      align-items: center;
-      display: none;
-
-      @include breakpoint("lg", true) {
-        display: flex;
-      }
-
-      &__logo {
-        padding-inline-end: spacing(4);
-        height: px-to-rem(38px);
-
-        img {
-          height: 100%;
-          width: auto;
-        }
-      }
+      @include nav-mobile;
     }
 
     &-search {
+      @include nav-search;
       --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
-      height: 100%;
-      display: flex;
-      align-items: center;
-      padding-inline: spacing(2);
       text-decoration: none;
 
-      @include breakpoint("lg", true) {
-        display: none;
-      }
-
-      display: flex;
-
       &__icon {
         @include icon("search", var(--ilo-subsite_nav_complex-search-color));
-        width: px-to-rem(32px);
-        height: px-to-rem(32px);
-        cursor: pointer;
       }
 
       &:hover,
@@ -215,26 +81,15 @@
     }
 
     &-burger {
-      display: none;
-
-      @include breakpoint("lg", true) {
-        display: flex;
-      }
-
+      @include nav-burger;
       --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
-      margin-block: px-to-rem(20px);
-      align-items: center;
-      border: none;
-      cursor: pointer;
 
       &__icon {
-        width: px-to-rem(32px);
-        height: px-to-rem(32px);
         @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
       }
 
       &:hover {
-        --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
+        --ilo-subsite_nav_complex-burger-color: var(--ilo-color-blue);
         background-color: var(--ilo-color-white);
       }
     }

package/scss/components/navigation/_nav-main.scss

@@ -0,0 +1,127 @@
+@use "../../tokens" as *;
+@use "../../functions" as *;
+@use "./internal/nav-shared" as *;
+@import "../../mixins";
+@import "../../config";
+
+.ilo--main-nav {
+  @include nav-base;
+
+  &-bg {
+    &--dark {
+      background-color: var(--ilo-color-blue);
+    }
+
+    &--darker {
+      background-color: var(--ilo-color-blue-dark);
+
+      @include breakpoint("lg", true) {
+        background-color: var(--ilo-color-blue);
+      }
+    }
+  }
+
+  &__container {
+    @include nav-container;
+  }
+
+  &__widgets {
+    @include nav-widgets-bar-content;
+    &::after {
+      background-color: var(--ilo-color-blue-dark);
+    }
+
+    &-bar-corner {
+      @include nav-widgets-corner(var(--ilo-color-blue-dark));
+    }
+
+    &-bar {
+      @include nav-widgets-bar(var(--ilo-color-blue-dark));
+
+      &__link {
+        @include nav-widgets-link(var(--ilo-color-blue-dark));
+      }
+    }
+  }
+
+  &__branding {
+    @include nav-branding;
+
+    &-main {
+      @include nav-branding-main;
+    }
+
+    &-tag {
+      @include nav-branding-tag;
+
+      &__main {
+        color: white;
+      }
+
+      &__sub {
+        color: var(--ilo-color-blue-light);
+      }
+    }
+  }
+
+  &__nav {
+    @include nav-core;
+
+    &-menu {
+      @include nav-menu;
+    }
+
+    &-mobile {
+      @include nav-mobile;
+    }
+
+    &-search {
+      --ilo-subsite_nav_complex-search-color: var(--ilo-color-white);
+      @include nav-search;
+      border: none;
+
+      &__icon {
+        @include icon("search", var(--ilo-subsite_nav_complex-search-color));
+      }
+
+      &:hover {
+        --ilo-subsite_nav_complex-search-color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+
+    &-burger {
+      @include nav-burger;
+
+      --ilo-subsite_nav_complex-burger-color: var(--ilo-color-white);
+
+      &__icon {
+        @include icon("burger", var(--ilo-subsite_nav_complex-burger-color));
+      }
+
+      &:hover {
+        --ilo-subsite-nav-burger-icon: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+
+    &-search-dropdown {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      form {
+        width: px-to-rem(620px);
+      }
+
+      .ilo--form-control,
+      .ilo--fieldset {
+        width: 100%;
+      }
+
+      .ilo--form-control {
+        padding-top: spacing(20);
+        padding-bottom: spacing(22);
+      }
+    }
+  }
+}

package/scss/components/navigation/index.scss

@@ -1,6 +1,4 @@
-@use "nav-menu";
+@use "internal";
 @use "nav-compact";
 @use "nav-complex";
-@use "nav-dropdown";
-@use "nav-grid";
-@use "mobile";
+@use "nav-main";

package/scss/components/navigation/{_nav-dropdown.scss → internal/_nav-dropdown.scss}

@@ -1,7 +1,7 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
 
 .ilo--nav-dropdown {
   position: absolute;

package/scss/components/navigation/{_nav-grid.scss → internal/_nav-grid.scss}

@@ -1,7 +1,7 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
 
 .ilo--nav-menu-grid {
   display: flex;

package/scss/components/navigation/{_nav-menu.scss → internal/_nav-menu.scss}

@@ -1,13 +1,14 @@
-@use "../../tokens" as *;
-@use "../../functions" as *;
-@import "../../mixins";
-@import "../../config";
-@import "../../animations";
+@use "../../../tokens" as *;
+@use "../../../functions" as *;
+@import "../../../mixins";
+@import "../../../config";
+@import "../../../animations";
 
 .ilo--nav-menu {
   display: flex;
   align-items: center;
   gap: spacing(12);
+  $self: &;
 
   @include breakpoint("xl", true) {
     gap: spacing(6);
@@ -46,6 +47,18 @@
     }
   }
 
+  &--light {
+    #{$self}__link {
+      &--active,
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--ilo-color-blue);
+        background-color: var(--ilo-color-white);
+      }
+    }
+  }
+
   &__more {
     @include globaltransition("background-color, border-color");
 
@@ -75,11 +88,23 @@
 
     &--open,
     &:hover,
-    &:focus,
     &:active {
       outline: none;
       border-color: var(--ilo-color-blue-dark);
       background-color: var(--ilo-color-blue-dark);
     }
   }
+
+  &--light {
+    #{$self}__more {
+      &--open,
+      &:hover,
+      &:active {
+        --ilo-nav_menu-icon-color: var(--ilo-color-blue);
+        color: var(--ilo-color-blue);
+        border-color: var(--ilo-color-white);
+        background-color: var(--ilo-color-white);
+      }
+    }
+  }
 }