@ilo-org/styles 0.1.2 → 0.1.4

package/scss/components/_searchfield.scss

@@ -18,14 +18,14 @@
     background-size: $spacing-padding-3 $spacing-padding-3;
     @include bordervalues("inputbutton", "formelements");
     height: $spacing-padding-6;
-    width: $spacing-padding-6;
+    width: calc($spacing-padding-6 - 2px);
     text-indent: -9999px;
     @include dataurlicon(
       "search",
       $color-formelements-inputbutton-default-color
     );
 
-    &:hover {
+    &:focus {
       background-color: map-get(
         $color,
         "formelements",
@@ -63,4 +63,15 @@
       pointer-events: none;
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--searchfield--button {
+      border-left: $spacing-formelements-inputbutton-default-borderrtl-left
+        solid $color-formelements-inputbutton-default-border-left;
+      border-right: $spacing-formelements-inputbutton-default-borderrtl-right
+        solid $color-formelements-inputbutton-default-border-right;
+    }
+  }
 }

package/scss/components/_table.scss

@@ -29,8 +29,6 @@
 
   &--head {
     background-color: $color-ux-table-content-background;
-    border-top: px-to-rem(2px) solid $color-base-neutrals-lighter;
-    border-bottom: px-to-rem(2px) solid $color-base-neutrals-lighter;
     box-shadow: 0px 0.8px 1.6px rgba(30, 45, 190, 0.038),
       0px 4px 8px rgba(30, 45, 190, 0.054),
       0px 10px 20px rgba(30, 45, 190, 0.08),
@@ -38,13 +36,15 @@
     left: 0;
     height: auto;
     position: sticky;
-    top: 0;
+    top: -1px;
     width: 100%;
     z-index: 2;
 
     &--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;
       @include font-styles("body-xs");
@@ -88,8 +88,15 @@
         }
 
         &:hover {
-          background-color: $color-ux-table-selected-background;
+          background-color: $color-base-blue-light;
+          border-bottom: px-to-rem(2px) solid $color-base-blue-medium;
+          color: $color-base-blue-medium;
           cursor: pointer;
+
+          &:after {
+            background-color: $color-base-blue-light;
+            background-image: url("#{colortodataurlicon("arrow", $color-base-blue-medium)}");
+          }
         }
 
         &[aria-sort="descending"] {
@@ -160,10 +167,16 @@
   }
 
   &--headline {
+    align-items: center;
+    display: flex;
     font-family: $fonts-display;
     font-weight: 700;
     margin-bottom: px-to-rem(7px);
     @include font-styles("headline-6");
+
+    .ilo--tooltip--wrapper {
+      margin-left: px-to-rem(6px);
+    }
   }
 
   &--description {

package/scss/components/_tableofcontents.scss

@@ -1,12 +1,121 @@
 @use "../tokens" as *;
+@use "../animations" as *;
 @use "../functions" as *;
 @import "../mixins";
 
 .ilo--table-of-contents {
   background-color: $color-ux-tableofcontents-items-default-background;
+  display: none;
   min-width: 343px;
   padding: 0;
 
+  & > * {
+    opacity: 0;
+  }
+
+  &.show {
+    display: block;
+
+    &.fadein {
+      & > * {
+        opacity: 1;
+        transition-delay: 125ms;
+        @include globaltransition("opacity");
+      }
+    }
+  }
+
+  &--headline {
+    margin-bottom: px-to-rem($spacing-padding-3);
+    margin-top: px-to-rem(9px);
+    @include font-styles("base");
+    font-family: $fonts-display;
+    font-weight: 700;
+  }
+
+  &--wrapper {
+    &.show {
+      display: block;
+      height: 100vh;
+      left: 0;
+      padding: px-to-rem(26px);
+      position: fixed;
+      top: 0;
+      width: 100vw;
+      z-index: 10001;
+
+      @include breakpoint("large") {
+        padding: 0;
+      }
+    }
+  }
+
+  &--trigger {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    margin: px-to-rem($spacing-padding-3) auto;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  @include breakpoint("large") {
+    display: block;
+
+    & > * {
+      opacity: 1;
+    }
+
+    &--trigger {
+      display: none;
+    }
+  }
+
+  &--modal {
+    display: none;
+    position: relative;
+
+    & > * {
+      opacity: 0;
+    }
+
+    &.show {
+      display: block;
+
+      &.fadein {
+        & > * {
+          opacity: 1;
+          transition-delay: 125ms;
+          @include globaltransition("opacity");
+        }
+      }
+    }
+
+    @include breakpoint("large") {
+      display: none;
+
+      &.show {
+        display: none;
+      }
+    }
+
+    .toc--modal--close {
+      bottom: 0;
+      height: px-to-rem(40px);
+      right: 0;
+      position: absolute;
+      width: px-to-rem(40px);
+      z-index: 10004;
+
+      .ilo--icon {
+        left: px-to-rem(3px);
+        top: px-to-rem(3px);
+      }
+    }
+  }
+
   &--list,
   &--list--item {
     width: 100%;
@@ -29,6 +138,7 @@
       $spacing-ux-tableofcontents-items-padding-right
       $spacing-ux-tableofcontents-items-padding-bottom
       $spacing-ux-tableofcontents-items-padding-left;
+    position: relative;
     text-decoration: none;
     width: calc(
       100% - $spacing-ux-tableofcontents-padding-right -
@@ -36,6 +146,7 @@
     );
     @include dataurlicon("stemarrow", $color-ux-labels-actionable);
     @include font-styles("label-medium");
+    @include globaltransition("background-color, border, color");
 
     &:hover,
     &:focus {
@@ -58,14 +169,17 @@
         );
       width: 100%;
       @include dataurlicon("stemarrow", $color-ux-labels-hover);
+      @include globaltransition("background-color, border, color");
     }
 
     &:active {
       background-color: $color-ux-tableofcontents-items-active-background;
       border-bottom: $color-ux-tableofcontents-items-active-border
         $spacing-ux-tableofcontents-items-border-bottom solid;
+      border-top: $color-ux-tableofcontents-items-default-border
+        $spacing-ux-tableofcontents-items-border-bottom solid;
       color: $color-ux-tableofcontents-items-active-color;
-      margin: 0;
+      margin: -2px 0 0 0;
       outline: none;
       padding: $spacing-ux-tableofcontents-items-padding-top
         calc(
@@ -82,6 +196,7 @@
         "stemarrow",
         $color-ux-tableofcontents-items-active-icon
       );
+      z-index: 5;
     }
   }
 
@@ -95,4 +210,28 @@
       }
     }
   }
+
+  .right-to-left & {
+    direction: rtl;
+
+    .ilo--table-of-contents--link {
+      background-position: 11px center;
+
+      &:hover,
+      &:focus {
+        background-position: 19px center;
+      }
+    }
+
+    &--wrapper {
+      direction: rtl;
+    }
+
+    &--modal {
+      .toc--modal--close {
+        left: 0;
+        right: auto;
+      }
+    }
+  }
 }

package/scss/components/_tabs.scss

@@ -2,11 +2,11 @@
 @use "../functions" as *;
 @import "../mixins";
 
-/*
-Note that the styles for this component rely on CSS container queries, which currently require a polyfill. Your site template should load the polyfill in the <head> using the method described here: https://github.com/GoogleChromeLabs/container-query-polyfil
-*/
-
 .ilo--tabs {
+  border-bottom: px-to-rem(4px) solid $color-base-neutrals-lighter;
+  border-left: px-to-rem(4px) solid $color-base-neutrals-lighter;
+  border-right: px-to-rem(4px) solid $color-base-neutrals-lighter;
+
   &:not(.tabs--js) {
     .ilo--tabs--selection {
       margin-bottom: px-to-rem(24px);
@@ -37,18 +37,18 @@ Note that the styles for this component rely on CSS container queries, which cur
         }
 
         &:active {
-          background: map-get($color, "link", "background", "active");
-          border-bottom: $widths-border-med solid
-            map-get($color, "link", "underline", "active");
-          color: map-get($color, "link", "text", "active");
+          background: map-get($color, "link", "background", "default");
+          border-bottom: $widths-border-sm solid
+            map-get($color, "link", "underline", "default");
+          color: map-get($color, "link", "text", "default");
           outline: none;
         }
 
         &:focus {
-          background: map-get($color, "link", "background", "focus");
-          border-bottom: $widths-border-lg solid
-            map-get($color, "link", "underline", "focus");
-          color: map-get($color, "link", "text", "focus");
+          background: map-get($color, "link", "background", "default");
+          border-bottom: $widths-border-sm solid
+            map-get($color, "link", "underline", "default");
+          color: map-get($color, "link", "text", "default");
           outline: none;
         }
       }
@@ -94,9 +94,7 @@ Note that the styles for this component rely on CSS container queries, which cur
         }
 
         &:hover,
-        &:focus,
-        &[aria-selected="true"]:hover,
-        &[aria-selected="true"]:focus {
+        &[aria-selected="true"]:hover {
           background-color: $color-base-blue-light;
           color: $color-base-blue-medium;
           outline: none;
@@ -174,21 +172,7 @@ Note that the styles for this component rely on CSS container queries, which cur
     }
   }
 
-  /* [aria-expanded="true"] {
-    display: none;
+  .right-to-left & {
+    direction: rtl;
   }
-
-  [aria-expanded="false"] {
-
-  }
-
-  [aria-expanded="false"] {
-    display: none;
-  }
-
-  @container (min-width: 700px) {
-    [aria-expanded="true"] {
-      display: block;
-    }
-  } */
 }

package/scss/components/_textarea.scss

@@ -30,33 +30,6 @@
   @include spacingvalues("padding", "input", "formelements");
   width: map-get($spacing, "formelements", "input", "default", "width");
 
-  &::-webkit-resizer {
-    background-size: cover;
-    background-repeat: no-repeat;
-    bottom: 2px;
-    height: 12px;
-    right: 0;
-    pointer-events: none;
-    position: absolute;
-    width: 22px;
-    @include dataurlicon(
-      "scalenerighttriangle",
-      $color-formelements-input-default-border-bottom
-    );
-  }
-
-  &:hover {
-    background-color: map-get(
-      $color,
-      "formelements",
-      "input",
-      "hover",
-      "background"
-    );
-    @include bordervalues("input", "formelements", "hover");
-    padding-left: calc($spacing-formelements-input-default-padding-left - 1px);
-  }
-
   &:focus {
     background-color: map-get(
       $color,
@@ -86,4 +59,8 @@
     );
     @include bordervalues("input", "formelements", "error");
   }
+
+  .right-to-left & {
+    direction: rtl;
+  }
 }

package/scss/components/_video.scss

@@ -148,19 +148,44 @@
     .vjs-big-play-button {
       @include iconbutton(
         "play",
-        $spacing-ux-video-buttonicon-height,
-        $spacing-ux-video-buttonicon-width,
+        $spacing-ux-video-bigplaybutton-height,
+        $spacing-ux-video-bigplaybutton-width,
         $color-ux-video-controls-default-icon
       );
 
       &:hover {
         background-color: $color-ux-video-controls-hover-background;
+        @include iconbutton(
+          "play",
+          $spacing-ux-video-bigplaybutton-height,
+          $spacing-ux-video-bigplaybutton-width,
+          $color-ux-video-controls-hover-icon
+        );
+
+        & ~ .vjs-duration,
+        & ~ .ilo--video--controls--duration {
+          background-color: $color-ux-video-controls-hover-background;
+          color: $color-ux-video-controls-hover-icon;
+        }
+      }
+
+      &.vjs-paused {
         @include iconbutton(
           "play",
           $spacing-ux-video-buttonicon-height,
           $spacing-ux-video-buttonicon-width,
-          $color-ux-video-controls-hover-icon
+          $color-ux-video-controls-default-icon
         );
+
+        &:hover {
+          background-color: $color-ux-video-controls-hover-background;
+          @include iconbutton(
+            "play",
+            $spacing-ux-video-buttonicon-height,
+            $spacing-ux-video-buttonicon-width,
+            $color-ux-video-controls-hover-icon
+          );
+        }
       }
     }
 
@@ -187,6 +212,7 @@
     &--duration,
     .vjs-duration {
       background-color: $color-ux-video-controls-default-background;
+      color: $color-ux-video-controls-default-icon;
       display: none;
       height: 100%;
       font-weight: 700;
@@ -196,6 +222,11 @@
       text-align: center;
       width: px-to-rem(80px);
 
+      &:hover {
+        background-color: $color-ux-video-controls-hover-background;
+        color: $color-ux-video-controls-hover-icon;
+      }
+
       @include font-styles("label-small");
 
       &.show {
@@ -407,6 +438,12 @@
       .vjs-has-started & {
         display: block;
       }
+
+      &:hover {
+        .vjs-volume-control {
+          display: block;
+        }
+      }
     }
 
     &--showvolume,
@@ -520,7 +557,7 @@
     .vjs-volume-bar {
       height: 4px;
       position: relative;
-      width: calc(100% - 24px);
+      width: calc(100% - 26px);
     }
 
     .vjs-mouse-display,
@@ -547,7 +584,7 @@
         margin: 0;
         padding: 0;
         position: absolute;
-        right: -8px;
+        right: -16px;
         top: 50%;
         width: 16px;
         -webkit-transform: translate(-50%, -50%);

package/scss/components/index.scss

@@ -12,6 +12,7 @@
 @use "empty";
 @use "fieldset";
 @use "file-upload";
+@use "form";
 @use "formgroup";
 @use "footer";
 @use "heading";