@ilo-org/styles 1.9.0 → 1.10.1

package/scss/components/_languagetoggle.scss

@@ -14,6 +14,12 @@
       --ilo--language-toggle-color: var(--ilo-color-blue-dark);
       --ilo--language-toggle-color-hover: var(--ilo-color-white);
     }
+
+    &__dark-blue {
+      --ilo--language-toggle-color: var(--ilo-color-white);
+      --ilo--language-toggle-color-hover: var(--ilo-color-blue);
+      --ilo--language-toggle-bg-hover: var(--ilo-color-white);
+    }
   }
 
   display: inline-block;
@@ -43,7 +49,7 @@
 
     &:hover,
     &:focus,
-    &__open {
+    &[aria-expanded="true"] {
       --ilo--language-toggle-color: var(--ilo--language-toggle-color-hover);
       --ilo--language-toggle-bg: var(--ilo--language-toggle-bg-hover);
     }

package/scss/components/_multilinkcard.scss

@@ -25,6 +25,44 @@
         filter: unset;
       }
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 10%);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(24px, 70%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(24px, 85%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--row-image,
+      #{$self}--skeleton--column-image {
+        display: none;
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 85%);
+        margin-top: spacing(6);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 60%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 55%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-4 {
+        @include skeleton-element(14px, 90%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--image--wrapper {
         display: none;
         background-color: var(--ilo-color-blue-lighter);
@@ -78,6 +116,12 @@
         &__standard {
           --max-width: #{px-to-rem(536px)};
           padding: spacing(12) spacing(10);
+
+          #{$self}--skeleton--row-image {
+            @include skeleton-element(250px, 100%);
+            display: block;
+            margin-top: spacing(6);
+          }
         }
 
         &__narrow {
@@ -88,6 +132,12 @@
             display: none;
           }
 
+          #{$self}--skeleton--row-image {
+            @include skeleton-element(184px, 100%);
+            display: block;
+            margin-top: spacing(6);
+          }
+
           #{$self}--content {
             #{$self}--image--wrapper {
               display: block;
@@ -113,9 +163,15 @@
         &__wide,
         &__fluid {
           --max-width: #{px-to-rem(1104px)};
-
           padding: spacing(10) spacing(6) spacing(12);
 
+          #{$self}--skeleton--column-image {
+            @include skeleton-element(230px, 100%);
+            display: block;
+            // Margin for single column mobile layout
+            margin-bottom: spacing(6);
+          }
+
           #{$self}--title {
             margin-bottom: spacing(3);
           }

package/scss/components/_promocard.scss

@@ -35,6 +35,34 @@
       padding: spacing(10) spacing(6);
       width: 100%;
 
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 60px);
+      }
+
+      #{$self}--skeleton--title-1 {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--title-2 {
+        @include skeleton-element(24px, 90%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-1 {
+        @include skeleton-element(14px, 78%);
+        margin-top: spacing(4);
+      }
+      #{$self}--skeleton--intro-2 {
+        @include skeleton-element(14px, 70%);
+        margin-top: spacing(2);
+      }
+
+      #{$self}--skeleton--intro-3 {
+        @include skeleton-element(14px, 78%);
+        margin-top: spacing(2);
+      }
+
       #{$self}--title {
         @include typography("heading-3");
         margin-bottom: spacing(2);

package/scss/components/_scorecard.scss

@@ -29,6 +29,25 @@
         width: 100%;
       }
 
+      #{$self}--skeleton--image {
+        @include skeleton-element(232px, 100%);
+      }
+
+      #{$self}--skeleton--eyebrow {
+        @include skeleton-element(12px, 20%);
+      }
+
+      #{$self}--skeleton--title {
+        @include skeleton-element(24px, 80%);
+        margin-top: spacing(4);
+      }
+
+      #{$self}--skeleton--date {
+        @include skeleton-element(24px, 60%);
+        margin-top: spacing(4);
+        margin-bottom: spacing(8);
+      }
+
       #{$self}--image--wrapper {
         height: 0;
         overflow: hidden;
@@ -108,6 +127,10 @@
               flex-direction: row;
             }
 
+            #{$self}--skeleton--image {
+              width: 50%;
+            }
+
             #{$self}--content {
               width: 50%;
             }

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/_video.scss

@@ -175,7 +175,7 @@
     // Fullscreen control
     .vjs-fullscreen-control {
       order: 5;
-      @include videobutton("fullscreen", "standard");
+      @include videobutton("fullscreen");
     }
 
     // Duration Bar
@@ -332,4 +332,10 @@
       }
     }
   }
+
+  .vjs-fullscreen {
+    .vjs-fullscreen-control {
+      @include videobutton("reduce");
+    }
+  }
 }

package/scss/components/index.scss

@@ -57,3 +57,5 @@
 @use "socialmedia";
 @use "languagetoggle";
 @use "navigation/index.scss";
+@use "photogallery";
+@use "audioplayer";

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);
       }
     }