@castlabs/ui 4.18.2

package/src/components/ClDropdown/style.scss

@@ -0,0 +1,272 @@
+////
+/// @group components
+/// @access public
+////
+
+// A custom dropdown / drawer element based on <detail> and <summary>. No JS needed.
+
+$dropdown-border: 0.125rem; // a 2px border to add so there is space for the outline
+$dropdown-color-chevron: rgba($color-ci-white, 0.5);
+$dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
+
+.cl-dropdown {
+  #{'--element-fg-color'}: $color-text;
+  #{'--element-bg-color'}: $color-ci-haze;
+  background-color: var(--element-bg-color);
+  color: var(--element-fg-color);
+  position: relative;
+
+  > * {
+    margin-left: $spacing-small;
+    margin-right: $spacing-small;
+  }
+
+  summary {
+    @extend %p-nav;
+
+    @include color-focus-outline(var(--element-fg-color));
+
+    & {
+      border: $dropdown-border solid var(--element-bg-color); // border need so that outline is not behind ::after
+      color: var(--element-fg-color);
+      font-size: px(18);
+      line-height: 1.25em;
+      list-style: none;
+      margin-left: 0;
+      margin-right: 0;
+      overflow: hidden;
+      padding: $spacing-small - $dropdown-border $spacing-small - $dropdown-border;
+      padding-right: $spacing-small * 3; // for chevron
+      position: relative;
+    }
+
+    &::after {
+      @include cl-fontawesome('\f078'); // chevron-down
+
+      & {
+        align-items: center;
+        background-color: var(--element-bg-color);
+        box-shadow: -8px 0 4px var(--element-bg-color);
+        color: $dropdown-color-chevron-bright;
+        display: flex;
+        height: 100%;
+        justify-content: flex-start;
+        position: absolute;
+        right: 0;
+        top: 0;
+        width: $spacing-small * 2;
+      }
+    }
+  }
+
+  > summary::marker,
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &[open] {
+    padding-bottom: $spacing-tiny;
+
+    summary {
+      border-bottom: 2px solid $color-ci-white;
+      margin-bottom: $spacing-tiny;
+
+      &::after {
+        content: '\f077'; // chevron-up
+      }
+    }
+  }
+
+  .cl-subentry {
+    font-size: px(14);
+    font-weight: 400;
+    letter-spacing: 0;
+    margin-top: $spacing-tiny;
+    opacity: $color-hover-opacity;
+  }
+
+  &-tiny {
+    summary {
+      padding: $spacing-tiny - $dropdown-border $spacing-small - $dropdown-border;
+    }
+  }
+
+  &-small {
+    summary {
+      padding: $spacing-small - $dropdown-border;
+    }
+  }
+
+  &-medium {
+    summary {
+      padding: $spacing-medium - $dropdown-border $spacing-small - $dropdown-border;
+    }
+  }
+
+  &-empty {
+    // disable dropdown part if empty
+    pointer-events: none;
+
+    summary {
+      border: 0 !important; // sass-lint:disable-line no-important
+
+      &::after {
+        display: none;
+      }
+    }
+
+    &[open] {
+      padding-bottom: 0;
+
+      summary {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+div.cl-dropdown summary {
+  // hide the chevron if this is not a <detail>
+  pointer-events: none;
+
+  &::after {
+    display: none;
+  }
+}
+
+.cl-dropdown-arrow {
+  background-color: $color-ci-haze;
+  content: '';
+  display: inline-block;
+  height: 1rem;
+  left: $spacing-small;
+  margin-top: -$spacing-tiny;
+  position: absolute;
+  transform: rotate(45deg);
+  width: 1rem;
+  z-index: -1;
+
+  + .cl-nav-item {
+    margin-top: $spacing-small;
+  }
+
+  .cl-dropdown-primary + & {
+    background-color: $color-primary;
+  }
+
+  .cl-dropdown-secondary + & {
+    background-color: $color-secondary;
+  }
+
+  .cl-dropdown-dark + & {
+    background-color: $color-dark;
+  }
+
+  .cl-dropdown-dim + & {
+    background-color: $color-ci-dim;
+  }
+}
+
+.cl-dropdown-item {
+  @extend %p-nav;
+
+  @include typography-links(var(--element-fg-color), var(--element-fg-color), 0);
+  @include color-focus-outline(var(--element-fg-color));
+
+  & {
+    display: block;
+    margin-left: 0;
+    margin-right: 0;
+    padding: $spacing-small;
+    position: relative;
+    width: 100%;
+  }
+
+  &:hover {
+    background-color: $color-ci-white;
+  }
+}
+
+.cl-dropdown-primary {
+  #{'--element-bg-color'}: $color-primary;
+  #{'--element-fg-color'}: $color-ci-white;
+
+  summary::after {
+    color: $dropdown-color-chevron;
+  }
+
+  &[open] summary {
+    border-bottom: 2px solid $color-white-35a;
+  }
+
+  .cl-nav-separator {
+    background-color: $color-white-35a !important; // sass-lint:disable-line no-important
+  }
+
+  .cl-dropdown-item:hover:not(.active) {
+    color: $color-ci-dusk;
+  }
+}
+
+.cl-dropdown-secondary {
+  #{'--element-bg-color'}: $color-secondary;
+  #{'--element-fg-color'}: $color-ci-white;
+
+  summary::after {
+    color: $dropdown-color-chevron;
+  }
+
+  &[open] summary {
+    border-bottom: 2px solid $color-white-35a;
+  }
+
+  .cl-nav-separator {
+    background-color: $color-white-35a !important; // sass-lint:disable-line no-important
+  }
+
+  .cl-dropdown-item:hover:not(.active) {
+    color: $color-ci-dusk;
+  }
+}
+
+.cl-dropdown-dark {
+  #{'--element-bg-color'}: $color-dark;
+  #{'--element-fg-color'}: $color-ci-white;
+
+  summary::after {
+    color: $dropdown-color-chevron;
+  }
+
+  &[open] summary {
+    border-bottom: 2px solid $color-white-25a;
+  }
+
+  .cl-nav-separator {
+    background-color: $color-white-25a !important; // sass-lint:disable-line no-important
+  }
+
+  .cl-dropdown-item:hover:not(.active) {
+    background-color: $color-ci-dusk;
+  }
+}
+
+.cl-dropdown-dim {
+  #{'--element-bg-color'}: $color-ci-dim;
+  #{'--element-fg-color'}: $color-ci-white;
+
+  summary::after {
+    color: $dropdown-color-chevron;
+  }
+
+  &[open] summary {
+    border-bottom: 2px solid $color-white-25a;
+  }
+
+  .cl-nav-separator {
+    background-color: $color-white-25a !important; // sass-lint:disable-line no-important
+  }
+
+  .cl-dropdown-item:hover:not(.active) {
+    background-color: $color-ci-dusk;
+  }
+}

package/src/components/ClDropzone/style.scss

@@ -0,0 +1,21 @@
+.cl-dropzone {
+  border: px(2) dashed $form-field-border-color;
+  border-radius: px(8);
+  cursor: pointer;
+  padding: $spacing-tiny;
+  text-align: center;
+
+  i {
+    margin-right: $spacing-tiny;
+    opacity: 0.5;
+  }
+
+  .cl-dragging & {
+    border-color: $color-ci-blue;
+  }
+}
+
+.cl-dropzone-file {
+  position: fixed;
+  top: -1000px; // move out of viewport instead of hide for safari
+}

package/src/components/ClFooter/style.scss

@@ -0,0 +1,119 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs footers.
+
+.cl-footer {
+  @extend %section-padding;
+  @extend %p-small;
+
+  $footer-text-color: $color-ci-smoke;
+
+  background-color: $color-ci-dusk;
+  color: $footer-text-color;
+  margin-top: 0;
+
+  .container {
+    @extend %container-spacing-medium;
+
+    padding-bottom: 0;
+    padding-top: 0;
+  }
+
+  a {
+    @include typography-links($footer-text-color, $color-ci-haze, 0);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @extend %p-small;
+
+    color: $color-ci-blue;
+    font-weight: 600;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .cl-btn-outline-text {
+    @include button-outline-variant-cl($footer-text-color, transparent);
+    @include button-focus-outline($footer-text-color);
+  }
+
+  .cl-btn-primary {
+    @include button-variant(
+      $footer-text-color,
+      $footer-text-color,
+      $color-ci-dusk,
+      $footer-text-color,
+      $footer-text-color,
+      $color-ci-dusk,
+      $footer-text-color,
+      $footer-text-color,
+      $color-ci-dusk
+    );
+    @include button-focus-outline($footer-text-color);
+  }
+
+  &.cl-footer-secondary + .cl-footer {
+    $footer-text-color: $color-ci-dim;
+
+    background-color: $color-ci-night;
+    color: $footer-text-color;
+
+    a {
+      @include typography-links($footer-text-color, $color-ci-silver, 0);
+    }
+
+    .cl-btn-outline-text {
+      @include button-outline-variant-cl($footer-text-color, transparent);
+      @include button-focus-outline($footer-text-color);
+    }
+
+    .cl-btn-primary {
+      @include button-variant(
+        $footer-text-color,
+        $footer-text-color,
+        $color-ci-night,
+        $footer-text-color,
+        $footer-text-color,
+        $color-ci-night,
+        $footer-text-color,
+        $footer-text-color,
+        $color-ci-night
+      );
+      @include button-focus-outline($footer-text-color);
+    }
+  }
+
+  &.cl-footer-white,
+  &.cl-footer-secondary + .cl-footer-white {
+    background-color: $color-ci-white;
+    color: $color-ci-dim;
+
+    a {
+      @include typography-links($footer-text-color, $color-ci-silver, 0);
+    }
+
+    .cl-btn-text {
+      @extend %cl-btn-text;
+    }
+
+    .cl-btn-outline-text {
+      @extend %cl-btn-outline-text;
+    }
+
+    .cl-btn-primary {
+      @extend %cl-btn-primary;
+    }
+
+    .cl-btn-outline-primary {
+      @extend %cl-btn-outline-primary;
+    }
+  }
+}

package/src/components/ClIcon/style.scss

@@ -0,0 +1,58 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines / tweaks our icons. They are based on FontAwesome v5.
+
+// --- generic helper classes --------------------------------------------------
+
+.fa-small,
+%fa-small {
+  font-size: 0.75em;
+  position: relative;
+  top: -0.15em;
+}
+
+// --- individual tweaks -------------------------------------------------------
+
+.btn {
+  i {
+    &.fas.fa-play {
+      @extend %fa-small;
+    }
+  }
+}
+
+// --- castLabs (SVG) icons ----------------------------------------------------
+
+$asset-img-huge: px(192);
+$asset-img-large: px(128);
+$asset-img-medium: px(96);
+$asset-img-small: px(64);
+$asset-img-tiny: px(32);
+
+.cl-img-huge {
+  height: $asset-img-huge;
+  width: $asset-img-huge;
+}
+
+.cl-img-large {
+  height: $asset-img-large;
+  width: $asset-img-large;
+}
+
+.cl-img-medium {
+  height: $asset-img-medium;
+  width: $asset-img-medium;
+}
+
+.cl-img-small {
+  height: $asset-img-small;
+  width: $asset-img-small;
+}
+
+.cl-img-tiny {
+  height: $asset-img-tiny;
+  width: $asset-img-tiny;
+}

package/src/components/ClIconotron/style.scss

@@ -0,0 +1,86 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines our icon + text component.
+
+.cl-container-iconotron {
+  .col-12 {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    &:first-child {
+      align-items: center;
+
+      img {
+        height: $asset-img-medium;
+        margin: $spacing-medium 0 $spacing-small;
+        width: $asset-img-medium;
+      }
+
+      @include media-breakpoint-up(md) {
+        align-items: flex-end;
+
+        img {
+          margin: 0 $spacing-small;
+        }
+      }
+
+      @include media-breakpoint-up(lg) {
+        align-items: flex-end;
+
+        img {
+          height: $asset-img-large;
+          margin: 0 $spacing-medium;
+          width: $asset-img-large;
+        }
+      }
+    }
+
+    &:last-child {
+      @include media-breakpoint-up(md) {
+        max-width: px(784);
+      }
+    }
+  }
+
+  &.cl-container-iconotron-small {
+    margin-left: auto;
+    margin-right: auto;
+    max-width: px(480);
+  }
+}
+
+.cl-footer .cl-container-iconotron,
+.cl-container-iconotron {
+  @extend %p-medium;
+  // @extend %spacing-small;
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @extend %spacing-medium;
+    @extend %h3;
+
+    letter-spacing: normal;
+    text-transform: none;
+
+    + * {
+      @extend %spacing-small;
+    }
+  }
+
+  a {
+    @include typography-links(
+      $color-text,
+      rgba($color-text, $color-hover-opacity),
+      2px,
+      $color-ci-red
+    );
+  }
+}

package/src/components/ClList/style.scss

@@ -0,0 +1,93 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file define our (bullet) lists. They use fontawesome icons as bullets.
+
+@import 'style.variables';
+
+// --- regular lists -----------------------------------------------------------
+
+main {
+  // apply style to typical html elements only in <main>, so it does not interfer with header/footer
+  ul {
+    margin: $spacing-small 0 0 $list-indent;
+    padding: 0;
+
+    li {
+      list-style-type: square;
+      margin: $spacing-tiny 0 0;
+      padding: 0;
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+  }
+}
+
+.cl-list {
+  @extend %cl-list;
+
+  &-none {
+    margin-left: 0;
+
+    li::before {
+      display: none;
+    }
+  }
+
+  &-inline {
+    > li {
+      display: inline;
+
+      &:not(:first-of-type) {
+        margin-left: 3em;
+      }
+    }
+  }
+
+  &-alert {
+    @extend %p-medium;
+    @extend %spacing-small;
+
+    $alert-indent: 1.333em; // ~ $spacing-medium on %p-medium;
+
+    font-size: 0.8888em; // 18px -> 16px
+    margin-left: $alert-indent;
+
+    > li {
+      display: inline;
+      position: relative;
+
+      &:first-of-type {
+        margin-left: 0;
+      }
+
+      &:not(first-of-type) {
+        margin-left: 2em;
+      }
+
+      &::before {
+        @include cl-fontawesome('\f0ad'); // wrench
+
+        & {
+          color: $color-ci-silver;
+          display: inline-block;
+          margin-left: -$alert-indent;
+          position: absolute;
+          text-align: center;
+          top: 0.175em;
+          width: 1em;
+        }
+      }
+    }
+  }
+}
+
+// --- definition lists --------------------------------------------------------
+
+.cl-dl {
+  @extend %cl-dl;
+}