@ilo-org/styles 0.1.9 → 0.1.11

package/scss/components/_footer.scss

@@ -51,6 +51,7 @@
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "label");
     @include font-styles("body-small");
+    line-height: px-to-rem(21.6px);
     @include textmargin(
       "margin-bottom",
       10px,
@@ -66,7 +67,9 @@
     color: #bedcfa;
     font-family: $fonts-display;
     font-weight: map-get($type, "weights", "section");
+    margin-top: px-to-rem(10px);
     @include font-styles("body-xxs");
+    line-height: px-to-rem(18.56px);
     @include textmargin("margin-bottom", 28px, "body-xxs", "display", 0, 0);
   }
 

package/scss/components/_hero.scss

@@ -167,6 +167,7 @@
     max-width: 560px;
     position: absolute;
     top: 0;
+    width: 100%;
 
     .right-to-left & {
       left: auto;

package/scss/components/_linklist.scss

@@ -181,3 +181,7 @@
     }
   }
 }
+
+.wingsuit-body .ilo--link-list--dark {
+  background-color: $color-base-blue-dark;
+}

package/scss/components/_list.scss

@@ -9,7 +9,24 @@
 
   &--unordered {
     list-style: initial;
-    list-style-type: disclosure-closed;
+    list-style-type: none;
+
+    li {
+      &::before {
+        content: "";
+        display: inline-block;
+        height: px-to-rem(14px);
+        left: px-to-rem(-12px);
+        position: absolute;
+        top: 6px;
+        width: px-to-rem(12px);
+        @include dataurlicon("listarrow", $color-base-neutrals-light);
+      }
+      margin-bottom: px-to-rem(map-get($spacing, "padding-4"));
+      margin-left: px-to-rem(12px);
+      padding-left: px-to-rem(12px);
+      position: relative;
+    }
   }
 
   &--unstyled {
@@ -56,13 +73,13 @@
   }
 
   &__item {
-    @include font-styles("base");
+    @include font-styles("body-small");
 
     font-family: $fonts-copy;
     @include textmargin(
       "margin-bottom",
       map-get($spacing, "ui-padding-lg"),
-      "base",
+      "body-small",
       "copy",
       0,
       0
@@ -75,5 +92,17 @@
       font-weight: 700;
       letter-spacing: $type-label-small-letter-spacing;
     }
+
+    @include breakpoint("medium") {
+      @include font-styles("base");
+      @include textmargin(
+        "margin-bottom",
+        map-get($spacing, "ui-padding-lg"),
+        "base",
+        "copy",
+        0,
+        0
+      );
+    }
   }
 }

package/scss/components/_navigation.scss

@@ -115,6 +115,25 @@
   &--utility-bar {
     display: none;
 
+    &--local {
+      background: $brand-ilo-blue;
+      display: flex;
+      justify-content: space-between;
+      padding: 0 20px;
+
+      .ilo--language-switcher {
+        display: none;
+
+        @include breakpoint("large") {
+          display: flex;
+        }
+      }
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
+
     @include breakpoint("large") {
       background: $brand-ilo-blue;
       display: flex;
@@ -161,6 +180,12 @@
       transform: translateX(0);
     }
 
+    .ilo--header--local & {
+      @include breakpoint("large") {
+        display: none;
+      }
+    }
+
     @include breakpoint("large") {
       background: $brand-ilo-dark-blue;
       position: static;
@@ -356,15 +381,32 @@
   &--local {
     display: flex;
     justify-content: space-between;
-    padding: 0 0 0 max((100% - 1260px) / 2, 20px);
+
+    @include breakpoint("large") {
+      padding: 0 0 0 max((100% - 1260px) / 2, 20px);
+    }
+
+    &--logo-wrapper {
+      display: flex;
+      padding: 16px 0;
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
 
     &--logo-link {
       display: flex;
+      align-items: center;
     }
 
     &--set {
-      display: flex;
-      justify-content: space-between;
+      display: none;
+
+      @include breakpoint("large") {
+        display: flex;
+        justify-content: space-between;
+      }
     }
 
     &--item {

package/scss/components/_notification.scss

@@ -39,7 +39,7 @@
       width: 100%;
 
       .ilo--notification--content {
-        align-items: center;
+        align-items: start;
         display: flex;
         justify-items: space-between;
         padding: px-to-rem(14px) px-to-rem($spacing-padding-3);

package/scss/components/_radio.scss

@@ -93,8 +93,10 @@
   margin-bottom: px-to-rem(22px);
 
   .ilo--fieldset--label {
+    color: $color-base-neutrals-black;
     font-family: $fonts-copy;
     font-weight: 400;
+    font-size: 14.9px;
     margin-bottom: 0;
     margin-left: px-to-rem($spacing-padding-1);
     margin-top: 2px;

package/scss/components/_richtext.scss

@@ -9,32 +9,6 @@
 
   a {
     @include linkstyles();
-    border: none;
-    text-decoration: underline;
-
-    &:visited {
-      border: none;
-      text-decoration: underline;
-      text-decoration-color: map-get($color, "link", "underline", "visited");
-    }
-
-    &:hover {
-      border: none;
-      text-decoration: underline;
-      text-decoration-color: map-get($color, "link", "underline", "hover");
-    }
-
-    &:active {
-      border: none;
-      text-decoration: underline;
-      text-decoration-color: map-get($color, "link", "underline", "active");
-    }
-
-    &:focus {
-      border: none;
-      text-decoration: underline;
-      text-decoration-color: map-get($color, "link", "underline", "focus");
-    }
   }
 
   img {
@@ -191,7 +165,7 @@
         position: absolute;
         top: 6px;
         width: px-to-rem(12px);
-        @include dataurlicon("listarrow");
+        @include dataurlicon("listarrow", $color-base-neutrals-light);
       }
       margin-bottom: px-to-rem(map-get($spacing, "padding-4"));
       margin-left: px-to-rem(12px);
@@ -207,6 +181,7 @@
     background-repeat: no-repeat;
     background-size: px-to-rem(72px) px-to-rem(40px);
     display: block;
+    font-family: $fonts-display;
     margin: px-to-rem(map-get($spacing, "padding-3")) 0
       px-to-rem(map-get($spacing, "padding-5")) 0;
     padding: px-to-rem(54px) 0 px-to-rem(34px)

package/scss/components/_table.scss

@@ -10,6 +10,7 @@
 
   &--header {
     background-color: $color-ux-table-content-background;
+    border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
     padding: $spacing-ux-table-content-padding-top
       $spacing-ux-table-content-padding-right
       $spacing-ux-table-content-padding-bottom
@@ -24,6 +25,7 @@
   }
 
   &--content {
+    border-collapse: initial;
     width: 100%;
   }
 
@@ -43,7 +45,6 @@
     &--cell {
       background-color: $color-ux-table-content-background;
       border-left: px-to-rem(1px) solid $color-base-neutrals-lighter;
-      border-top: px-to-rem(2px) solid $color-base-neutrals-lighter;
       border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
       font-family: $fonts-display;
       font-weight: 700;
@@ -144,7 +145,7 @@
       }
 
       &:hover {
-        background-color: $color-ux-table-selected-background;
+        background-color: $color-ux-table-hover-background;
         border-bottom: 2px solid $color-ux-labels-hover;
         color: $color-ux-labels-hover;
       }

package/scss/components/_tag.scss

@@ -24,11 +24,9 @@
   color: map-get($color, "tag", "text", "default");
   display: inline-block;
   font-family: map-get($fonts, "display");
-  font-size: inherit;
   font-weight: 500;
-  line-height: inherit;
-  padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"))
-    px-to-rem(8px) px-to-rem(map-get($spacing, "ui-padding-sm"));
+  padding: px-to-rem(7px) px-to-rem(map-get($spacing, "ui-padding-sm"))
+    px-to-rem(5px) px-to-rem(map-get($spacing, "ui-padding-sm"));
   text-decoration: none;
   $self: &;
   @include globaltransition("color, background-color, border-color");
@@ -92,13 +90,16 @@
     &.icon__position--right {
       .ilo--icon {
         @include dataurlicon("close", map-get($color, "tag", "text", "active"));
-
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: contain;
         height: 100%;
-        max-height: 28px;
-        max-width: 28px;
+        max-height: 24px;
+        max-width: 24px;
         position: absolute;
-        right: 5px;
-        top: 5px;
+        right: 10px;
+        top: 50%;
+        transform: translateY(-50%);
         width: 100%;
       }
     }

package/scss/components/_tooltip.scss

@@ -8,28 +8,23 @@
   border: none;
   border-radius: px-to-rem(2px);
   display: inline-block;
-  filter: drop-shadow(
-      0 px-to-rem(0.8px) px-to-rem(1.6px)
-        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.038)
-    )
-    drop-shadow(
-      0 px-to-rem(2.7) px-to-rem(5.4px)
-        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.054)
-    )
-    drop-shadow(
-      0 px-to-rem(12px) px-to-rem(24px)
-        rgba(map-get($color, "tooltip", "default", "dropshadow"), 0.12)
-    );
+  filter: drop-shadow(0px 0.8px 1.6px rgba(30, 45, 190, 0.038))
+    drop-shadow(0px 4px 8px rgba(30, 45, 190, 0.054))
+    drop-shadow(0px 10px 20px rgba(30, 45, 190, 0.08))
+    drop-shadow(0px -4px 16px rgba(30, 45, 190, 0.054));
   color: map-get($color, "tooltip", "default", "text");
   opacity: 0;
   padding: px-to-rem($spacing-padding-1) px-to-rem($spacing-padding-1-5);
   position: absolute;
-  transition: opacity 0.15s ease-in-out;
+  transition: opacity 150ms ease-out;
   visibility: hidden;
   width: auto;
 
-  &--visible {
+  &--fade {
     opacity: 1;
+  }
+
+  &--visible {
     visibility: visible;
     z-index: 2;
   }

package/scss/components/_video.scss

@@ -33,6 +33,7 @@
   &--element,
   .vjs-tech {
     height: auto;
+    object-fit: cover;
     width: 100%;
 
     &:focus {
@@ -133,13 +134,23 @@
       width: $spacing-ux-video-controls-height;
       -webkit-appearance: none;
       -moz-appearance: none;
+    }
 
-      .notplayed & {
-        @include breakpoint("large") {
+    &.notplayed {
+      @include breakpoint("large") {
+        .vjs-play-control,
+        .vjs-big-play-button {
           order: 1;
           height: px-to-rem($spacing-ux-video-bigplaybutton-height);
           width: px-to-rem($spacing-ux-video-bigplaybutton-width);
         }
+
+        .ilo--video--controls--play,
+        .ilo--video--controls--pause {
+          order: 1;
+          height: px-to-rem(80px);
+          width: px-to-rem(80px);
+        }
       }
     }
 
@@ -153,7 +164,8 @@
         $color-ux-video-controls-default-icon
       );
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: $color-ux-video-controls-hover-background;
         @include iconbutton(
           "play",
@@ -177,7 +189,8 @@
           $color-ux-video-controls-default-icon
         );
 
-        &:hover {
+        &:hover,
+        &:focus {
           background-color: $color-ux-video-controls-hover-background;
           @include iconbutton(
             "play",
@@ -189,6 +202,12 @@
       }
     }
 
+    &:not(.notplayed) {
+      .ilo--video--controls--play {
+        background-size: 24px 24px;
+      }
+    }
+
     &--pause,
     .vjs-playing {
       @include iconbutton(
@@ -198,7 +217,8 @@
         $color-ux-video-controls-default-icon
       );
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: $color-ux-video-controls-hover-background;
         @include iconbutton(
           "pause",
@@ -222,7 +242,8 @@
       text-align: center;
       width: px-to-rem(80px);
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: $color-ux-video-controls-hover-background;
         color: $color-ux-video-controls-hover-icon;
       }
@@ -232,14 +253,23 @@
       &.show {
         display: block;
       }
+    }
 
-      .notplayed & {
-        @include breakpoint("large") {
+    &.notplayed {
+      @include breakpoint("large") {
+        .vjs-duration {
           height: px-to-rem($spacing-ux-video-controls-height);
           margin-left: 0;
           margin-top: 2px;
           width: px-to-rem($spacing-ux-video-bigplaybutton-width);
         }
+
+        .ilo--video--controls--duration {
+          height: px-to-rem($spacing-ux-video-controls-height);
+          margin-left: 0;
+          margin-top: 2px;
+          width: px-to-rem(80px);
+        }
       }
     }
 
@@ -350,7 +380,8 @@
         }
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         .vjs-play-progress {
           position: relative;
 
@@ -440,7 +471,8 @@
         display: block;
       }
 
-      &:hover {
+      &:hover,
+      &:focus {
         .vjs-volume-control {
           display: block;
         }
@@ -453,7 +485,7 @@
       border: none;
       cursor: pointer;
       height: px-to-rem($spacing-ux-video-controls-height);
-      margin-top: 1px;
+      margin-top: 0;
       position: relative;
       width: px-to-rem($spacing-ux-video-controls-height);
       z-index: 10;
@@ -466,7 +498,8 @@
         $color-ux-video-controls-default-icon
       );
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: $color-ux-video-controls-hover-background;
         @include iconbutton(
           "volume",
@@ -485,7 +518,8 @@
           $color-ux-video-controls-default-icon
         );
 
-        &:hover {
+        &:hover,
+        &:focus {
           background-color: #ebf5fd;
           @include iconbutton(
             "muted",
@@ -523,9 +557,9 @@
       }
 
       &-container {
-        left: 0;
+        left: -2px;
         position: absolute;
-        top: 0;
+        top: -2px;
       }
 
       &::-webkit-slider-runnable-track {
@@ -618,7 +652,8 @@
         $color-ux-video-controls-default-icon
       );
 
-      &:hover {
+      &:hover,
+      &:focus {
         background-color: #ebf5fd;
         @include iconbutton(
           "fullscreen",
@@ -687,7 +722,8 @@
     }
   }
 
-  &:hover {
+  &:hover,
+  &:focus {
     .ilo--video--controls,
     .vjs-control-bar {
       opacity: 1;
@@ -711,3 +747,18 @@
 .ilo--video--container {
   position: relative;
 }
+
+.right-to-left {
+  .ilo--video--caption {
+    border-left: none;
+    border-right: 3px solid #b8c4cc;
+    direction: rtl;
+    padding-left: 0;
+    padding-right: px-to-rem(map-get($spacing, "padding-1"));
+  }
+
+  .ilo--credit {
+    left: auto;
+    right: 0;
+  }
+}