@ilo-org/styles 0.0.1

package/scss/components/_video.scss

@@ -0,0 +1,674 @@
+@use "../tokens" as *;
+@use "../functions" as *;
+@import "../mixins";
+
+.ilo--video {
+  position: relative;
+
+  &--wrapper {
+    line-height: 0;
+    position: relative;
+    width: 100%;
+  }
+
+  &--img {
+    line-height: 0;
+  }
+
+  &--caption {
+    border-left: $spacing-ux-caption-border-left solid
+      $color-ux-caption-border-left;
+    color: $color-font-caption;
+    font-weight: 400;
+    margin-top: px-to-rem(map-get($spacing, "padding-2"));
+    padding-left: px-to-rem(map-get($spacing, "padding-1"));
+    @include font-styles("image-caption");
+  }
+
+  &:focus,
+  .vjs-tech:focus {
+    outline: none;
+  }
+
+  &--element,
+  .vjs-tech {
+    height: auto;
+    width: 100%;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  &--player {
+    position: relative;
+
+    &:focus {
+      outline: none;
+    }
+
+    &.youtube {
+      height: auto;
+      max-width: 100%;
+      overflow: hidden;
+      padding-bottom: 56.25%;
+      position: relative;
+    }
+
+    iframe {
+      height: 100%;
+      left: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+    }
+  }
+
+  &--poster,
+  .vjs-poster {
+    display: none;
+    object-fit: cover;
+    height: 100%;
+    left: 0;
+    max-height: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 0;
+    width: 100%;
+
+    &.show {
+      display: block;
+    }
+
+    & img,
+    & source {
+      height: auto;
+      left: 50%;
+      position: absolute;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      width: 100%;
+    }
+  }
+
+  &--controls,
+  .vjs-control-bar {
+    bottom: 0;
+    color: $color-ux-labels-darkbg;
+    display: flex;
+    justify-content: flex-start;
+    left: 0;
+    height: px-to-rem($spacing-ux-video-controls-height);
+    opacity: 0;
+    position: absolute;
+    transition: opacity 150ms ease-out;
+    width: 100%;
+
+    &.notplayed {
+      bottom: auto;
+      opacity: 1;
+      top: 0;
+
+      @include breakpoint("large") {
+        flex-direction: column;
+        height: 122px;
+        width: px-to-rem($spacing-ux-video-bigplaybutton-width);
+      }
+    }
+
+    button span {
+      @include isVisuallyHidden();
+    }
+
+    &--play,
+    &--pause,
+    .vjs-play-control,
+    .vjs-big-play-button {
+      background-color: $color-ux-video-controls-default-background;
+      border: none;
+      cursor: pointer;
+      height: 100%;
+      order: 1;
+      width: $spacing-ux-video-controls-height;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+
+      .notplayed & {
+        @include breakpoint("large") {
+          order: 1;
+          height: px-to-rem($spacing-ux-video-bigplaybutton-height);
+          width: px-to-rem($spacing-ux-video-bigplaybutton-width);
+        }
+      }
+    }
+
+    &--play,
+    .vjs-play-control:not(.vjs-playing),
+    .vjs-big-play-button {
+      @include iconbutton(
+        "play",
+        $spacing-ux-video-buttonicon-height,
+        $spacing-ux-video-buttonicon-width,
+        $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
+        );
+      }
+    }
+
+    &--pause,
+    .vjs-playing {
+      @include iconbutton(
+        "pause",
+        $spacing-ux-video-buttonicon-height,
+        $spacing-ux-video-buttonicon-width,
+        $color-ux-video-controls-default-icon
+      );
+
+      &:hover {
+        background-color: $color-ux-video-controls-hover-background;
+        @include iconbutton(
+          "pause",
+          $spacing-ux-video-buttonicon-height,
+          $spacing-ux-video-buttonicon-width,
+          $color-ux-video-controls-hover-icon
+        );
+      }
+    }
+
+    &--duration,
+    .vjs-duration {
+      background-color: $color-ux-video-controls-default-background;
+      display: none;
+      height: 100%;
+      font-weight: 700;
+      margin-left: 2px;
+      order: 2;
+      padding-top: 9px;
+      text-align: center;
+      width: px-to-rem(80px);
+
+      @include font-styles("label-small");
+
+      &.show {
+        display: block;
+      }
+
+      .notplayed & {
+        @include breakpoint("large") {
+          height: px-to-rem($spacing-ux-video-controls-height);
+          margin-left: 0;
+          margin-top: 2px;
+          width: px-to-rem($spacing-ux-video-bigplaybutton-width);
+        }
+      }
+    }
+
+    .vjs-progress-holder {
+      position: relative;
+      width: 96%;
+    }
+
+    &--progress,
+    .vjs-progress-control {
+      background-color: $color-ux-video-controls-default-background;
+      display: none;
+      flex-grow: 1;
+      height: 100%;
+      margin-left: 2px;
+      order: 3;
+      position: relative;
+
+      &.show,
+      .vjs-has-started & {
+        display: block;
+      }
+
+      &-playhead {
+        height: 100%;
+        left: 2%;
+        opacity: 0;
+        padding: 0;
+        position: absolute;
+        top: 0;
+        width: 96%;
+        z-index: 20;
+      }
+
+      &-current,
+      .vjs-play-progress {
+        height: 8px;
+        left: 2%;
+        position: absolute;
+        top: px-to-rem(16px);
+        width: 96%;
+        z-index: 15;
+        -webkit-appearance: none;
+
+        &::-moz-progress-bar {
+          background: $color-ux-video-controls-hover-background;
+          border-radius: 0;
+        }
+
+        &::-webkit-progress-bar {
+          background: transparent;
+        }
+
+        &::-webkit-progress-value {
+          background: $color-ux-video-controls-hover-background;
+          border-radius: 0;
+        }
+      }
+
+      .vjs-play-progress {
+        background: $color-ux-video-controls-hover-background;
+
+        .vjs-time-tooltip {
+          display: none;
+        }
+      }
+
+      div[data-start] {
+        background: $color-base-neutrals-light;
+        height: 8px;
+        left: 2%;
+        position: absolute;
+        top: 0;
+        width: 96%;
+        z-index: 15;
+      }
+
+      &-played,
+      .vjs-mouse-display {
+        display: none;
+        position: absolute;
+        top: -40px;
+        z-index: 20;
+      }
+
+      &-loaded,
+      .vjs-load-progress {
+        height: 8px;
+        left: 2%;
+        position: absolute;
+        top: px-to-rem(16px);
+        width: 96%;
+        z-index: 10;
+        -webkit-appearance: none;
+
+        &::-moz-progress-bar {
+          background: $color-base-neutrals-light;
+          border-radius: 0;
+        }
+
+        &::-webkit-progress-bar {
+          background: transparent;
+        }
+
+        &::-webkit-progress-value {
+          background: $color-base-neutrals-light;
+          border-radius: 0;
+        }
+      }
+
+      &:hover {
+        .vjs-play-progress {
+          position: relative;
+
+          .vjs-time-tooltip {
+            align-items: center;
+            background-color: $color-ux-credit-background;
+            display: flex;
+            height: px-to-rem(map-get($spacing, "padding-4"));
+            justify-content: center;
+            right: 0;
+            position: absolute;
+            bottom: calc(300% + 12px);
+            width: 70px;
+            @include font-styles("image-credit");
+
+            &:after {
+              background-position: top left;
+              background-repeat: no-repeat;
+              background-size: contain;
+              @include dataurlicon(
+                "equilateraltriangle",
+                $color-base-neutrals-dark
+              );
+              content: "";
+              height: px-to-rem(map-get($spacing, "padding-1-5"));
+              position: absolute;
+              left: calc(50% - 6px);
+              bottom: -#{px-to-rem(map-get($spacing, "padding-1-5"))};
+              width: px-to-rem(map-get($spacing, "padding-1-5"));
+            }
+          }
+        }
+
+        .ilo--video--controls--progress-played-container {
+          position: absolute;
+          left: 2%;
+          top: 0;
+          width: 96%;
+        }
+
+        .ilo--video--controls--progress-played {
+          --playhead: 0%;
+          align-items: center;
+          background-color: $color-ux-credit-background;
+          display: flex;
+          height: px-to-rem(map-get($spacing, "padding-4"));
+          justify-content: center;
+          left: calc(var(--playhead) - 34px);
+          position: absolute;
+          bottom: calc(300% + 12px);
+          width: 70px;
+          @include font-styles("image-credit");
+
+          &:after {
+            background-position: top left;
+            background-repeat: no-repeat;
+            background-size: contain;
+            @include dataurlicon(
+              "equilateraltriangle",
+              $color-base-neutrals-dark
+            );
+            content: "";
+            height: px-to-rem(map-get($spacing, "padding-1-5"));
+            position: absolute;
+            left: calc(50% - 6px);
+            bottom: -#{px-to-rem(map-get($spacing, "padding-1-5"))};
+            width: px-to-rem(map-get($spacing, "padding-1-5"));
+          }
+        }
+      }
+    }
+
+    &--volume,
+    .vjs-volume-panel {
+      bottom: 1px;
+      display: none;
+      flex-direction: column;
+      height: 140px;
+      margin-left: 2px;
+      order: 4;
+      position: relative;
+      width: 40px;
+
+      &.show,
+      .vjs-has-started & {
+        display: block;
+      }
+    }
+
+    &--showvolume,
+    .vjs-mute-control {
+      background-color: $color-ux-video-controls-default-background;
+      border: none;
+      cursor: pointer;
+      height: px-to-rem($spacing-ux-video-controls-height);
+      margin-top: 1px;
+      position: relative;
+      width: px-to-rem($spacing-ux-video-controls-height);
+      z-index: 10;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      @include iconbutton(
+        "volume",
+        $spacing-ux-video-buttonicon-height,
+        $spacing-ux-video-buttonicon-width,
+        $color-ux-video-controls-default-icon
+      );
+
+      &:hover {
+        background-color: $color-ux-video-controls-hover-background;
+        @include iconbutton(
+          "volume",
+          $spacing-ux-video-buttonicon-height,
+          $spacing-ux-video-buttonicon-width,
+          $color-ux-video-controls-hover-icon
+        );
+      }
+
+      &.muted,
+      &[title="Unmute"] {
+        @include iconbutton(
+          "muted",
+          $spacing-ux-video-buttonicon-height,
+          $spacing-ux-video-buttonicon-width,
+          $color-ux-video-controls-default-icon
+        );
+
+        &:hover {
+          background-color: #ebf5fd;
+          @include iconbutton(
+            "muted",
+            $spacing-ux-video-buttonicon-height,
+            $spacing-ux-video-buttonicon-width,
+            $color-ux-video-controls-hover-icon
+          );
+        }
+      }
+    }
+
+    &--setvolume,
+    .vjs-volume-control {
+      background: $color-ux-video-controls-hover-background;
+      display: none;
+      height: px-to-rem($spacing-ux-video-controls-height);
+      order: 1;
+      padding: 0;
+      position: absolute;
+      transform: rotate(270deg);
+      transform-origin: -4px -4px;
+      top: 6px;
+      width: px-to-rem(138px);
+    }
+
+    &--setvolume {
+      border-left: 8px solid $color-ux-video-controls-hover-background;
+      border-right: 8px solid $color-ux-video-controls-hover-background;
+      width: px-to-rem(122px);
+      -webkit-appearance: none;
+
+      &.show {
+        display: block;
+      }
+
+      &-container {
+        left: 0;
+        position: absolute;
+        top: 0;
+      }
+
+      &::-webkit-slider-runnable-track {
+        background-color: $color-ux-video-controls-hover-icon;
+        border: none;
+        box-shadow: none;
+        height: 4px;
+        cursor: pointer;
+      }
+
+      &::-webkit-slider-thumb {
+        background-color: $color-ux-video-controls-hover-icon;
+        border: none;
+        border-radius: 50%;
+        box-shadow: none;
+        cursor: pointer;
+        height: 16px;
+        margin-top: -5px;
+        width: 16px;
+        -webkit-appearance: none;
+      }
+    }
+
+    .vjs-volume-panel.vjs-hover .vjs-volume-control {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      justify-content: center;
+    }
+
+    .vjs-volume-bar {
+      height: 4px;
+      position: relative;
+      width: calc(100% - 24px);
+    }
+
+    .vjs-mouse-display,
+    .vjs-volume-level {
+      height: 4px;
+      left: 0;
+      position: absolute;
+      top: 0;
+    }
+
+    .vjs-mouse-display {
+      background-color: $color-base-neutrals-light;
+      width: 100%;
+    }
+
+    .vjs-volume-level {
+      background-color: $color-ux-video-controls-hover-icon;
+
+      &:before {
+        background: $color-ux-video-controls-hover-icon;
+        border-radius: 50%;
+        content: "";
+        height: 16px;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        right: -8px;
+        top: 50%;
+        width: 16px;
+        -webkit-transform: translate(-50%, -50%);
+        -ms-transform: translate(-50%, -50%);
+        transform: translate(-50%, -50%);
+      }
+    }
+
+    .vjs-volume-tooltip {
+      display: none;
+    }
+
+    &--fullscreen,
+    .vjs-fullscreen-control {
+      background-color: $color-ux-video-controls-default-background;
+      border: none;
+      cursor: pointer;
+      display: none;
+      height: 100%;
+      margin-left: 2px;
+      order: 5;
+      width: px-to-rem($spacing-ux-video-controls-height);
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      @include iconbutton(
+        "fullscreen",
+        $spacing-ux-video-buttonicon-height,
+        $spacing-ux-video-buttonicon-width,
+        $color-ux-video-controls-default-icon
+      );
+
+      &:hover {
+        background-color: #ebf5fd;
+        @include iconbutton(
+          "fullscreen",
+          $spacing-ux-video-buttonicon-height,
+          $spacing-ux-video-buttonicon-width,
+          $color-ux-video-controls-hover-icon
+        );
+      }
+
+      &.show {
+        display: block;
+      }
+    }
+  }
+
+  .vjs-control-bar {
+    bottom: 0;
+    left: -5px;
+    width: calc(100% + 5px);
+  }
+
+  &--element:not(.vjs-has-started) {
+    .vjs-control-bar {
+      bottom: auto;
+      left: -5px;
+      opacity: 1;
+      top: 0;
+
+      @include breakpoint("large") {
+        flex-direction: column;
+        height: 158px;
+        justify-content: flex-start;
+        left: 0;
+        width: 80px;
+      }
+    }
+
+    .vjs-duration {
+      display: block;
+    }
+
+    @include breakpoint("large") {
+      .vjs-duration {
+        height: px-to-rem($spacing-ux-video-controls-height);
+        margin-left: 0;
+        margin-top: 2px;
+        width: px-to-rem(80px);
+      }
+
+      .vjs-play-control {
+        order: 1;
+        height: px-to-rem(80px);
+        width: px-to-rem(80px);
+      }
+    }
+  }
+
+  .vjs-control:focus,
+  .vjs-control *:focus {
+    outline: none;
+  }
+
+  .vjs-has-started {
+    .vjs-control:not(.vjs-duration):not(.vjs-volume-control) {
+      display: block;
+    }
+  }
+
+  &:hover {
+    .ilo--video--controls,
+    .vjs-control-bar {
+      opacity: 1;
+      transition: opacity 150ms ease-out;
+    }
+  }
+
+  // TODO: style using loading component
+  .vjs-loading-spinner {
+    display: none;
+  }
+
+  .vjs-time-divider,
+  .vjs-remaining-time,
+  .vjs-current-time,
+  .vjs-control-text {
+    display: none !important;
+  }
+}
+
+.ilo--video--container {
+  position: relative;
+}

package/scss/components/index.scss

@@ -0,0 +1,39 @@
+@use "accordion";
+@use "breadcrumb";
+@use "button";
+@use "callout";
+@use "card";
+@use "cardgroup";
+@use "checkbox";
+@use "contextmenu";
+@use "credit";
+@use "datepicker";
+@use "dropdown";
+@use "empty";
+@use "fieldset";
+@use "file-upload";
+@use "formgroup";
+@use "footer";
+@use "heading";
+@use "hero";
+@use "image";
+@use "input";
+@use "link";
+@use "linklist";
+@use "list";
+@use "loading";
+@use "modal";
+@use "notification";
+@use "pagination";
+@use "profile";
+@use "radio";
+@use "readmore";
+@use "richtext";
+@use "searchfield";
+@use "tabs";
+@use "table";
+@use "tableofcontents";
+@use "textarea";
+@use "tag";
+@use "tooltip";
+@use "video";

package/scss/index.scss

@@ -0,0 +1,11 @@
+// Set prefix on default styles
+@use "config";
+
+// Load the css resets
+@use "reset";
+
+//Import type styles
+@use "typography";
+
+// Import our custom components css
+@use "components";