@castlabs/ui 4.18.2

package/src/components/ClList/style.variables.scss

@@ -0,0 +1,133 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file define our (bullet) lists. They use fontawesome icons as bullets.
+
+$list-indent: $spacing-small * 2.5;
+
+%cl-list {
+  li {
+    list-style-type: none;
+
+    &::before {
+      @include cl-fontawesome('\f054'); // chevron
+
+      & {
+        color: $color-ci-silver;
+        margin-left: -$list-indent;
+        position: static;
+        text-align: center;
+        width: $list-indent;
+      }
+    }
+
+    > ul {
+      margin-top: $spacing-tiny;
+    }
+  }
+
+  &-none {
+    margin-left: 0;
+
+    li {
+      margin-top: $spacing-micro;
+    }
+  }
+
+  &-none li::before,
+  li.cl-list-none::before {
+    display: none;
+  }
+
+  &-check li::before,
+  li.cl-list-check::before {
+    content: '\f00c';
+  }
+
+  &-x li::before,
+  li.cl-list-x::before {
+    content: '\f00d';
+  }
+
+  &-plus li::before,
+  li.cl-list-plus::before {
+    content: '\f067';
+  }
+
+  &-minus li::before,
+  li.cl-list-minus::before {
+    content: '\f068';
+  }
+
+  &-lock li::before,
+  li.cl-list-lock::before {
+    content: '\f023';
+  }
+
+  &-bulb li::before,
+  li.cl-list-bulb::before {
+    content: '\f0eb';
+  }
+}
+
+// -----------------------------------------------------------------------------
+
+$list-dt-width: 14rem;
+
+%cl-dl {
+  dt {
+    @extend %p-form-label;
+
+    display: block;
+  }
+
+  dd {
+    display: block;
+    margin-top: $spacing-tiny;
+  }
+
+  @include media-breakpoint-up(md) {
+    dt {
+      display: inline-block;
+      vertical-align: top;
+      width: $list-dt-width;
+    }
+
+    dd {
+      display: inline-block;
+      margin-top: $spacing-small;
+      width: calc(100% - #{$list-dt-width} - 0.5rem);
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+
+      + dd {
+        margin-left: $list-dt-width;
+        margin-top: $spacing-tiny;
+      }
+    }
+  }
+
+  &.cl-dl-tight {
+    @include media-breakpoint-up(md) {
+      dt {
+        margin-top: $spacing-tiny;
+
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
+
+      dd {
+        margin-top: $spacing-tiny;
+
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+}

package/src/components/ClListGroup/style.scss

@@ -0,0 +1,9 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's list groups. They structure same-of-kind
+// stuff in a table-like manner but without having the bulky table look.
+
+@import 'bootstrap/scss/list-group';

package/src/components/ClPagination/style.scss

@@ -0,0 +1,123 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's paginators.
+
+@import 'bootstrap/scss/pagination';
+
+$pagination-color-bg: $color-ci-cloud;
+$pagination-color-text: $color-ci-dim;
+$pagination-color-disabled: rgba($pagination-color-text, $button-disabled-opacity);
+$pagination-color-hover: rgba($pagination-color-text, $button-hover-opacity);
+
+.pagination {
+  @extend %p-nav;
+
+  font-size: px(14);
+  margin: 0;
+
+  li {
+    list-style: none;
+    margin: 0;
+  }
+
+  a,
+  a.disabled,
+  button,
+  button.disabled {
+    @include typography-links($pagination-color-text, $pagination-color-text, 0);
+
+    & {
+      border-color: $pagination-color-bg;
+      border-width: 2px;
+      font-weight: 600;
+      padding: $spacing-tiny $spacing-small;
+    }
+  }
+
+  a:hover,
+  a.disabled:hover,
+  button:hover,
+  button.disabled:hover {
+    background-color: transparent;
+    background-image: none;
+    border-color: $pagination-color-bg;
+    color: $pagination-color-hover;
+  }
+
+  a:focus,
+  button:focus {
+    background-color: inherit;
+    box-shadow: none;
+    color: inherit;
+  }
+
+  .page-item {
+    &:last-of-type a,
+    &:last-of-type button {
+      border-bottom-right-radius: px(3);
+      border-top-right-radius: px(3);
+    }
+
+    &:first-of-type a,
+    &:first-of-type button {
+      border-bottom-left-radius: px(3);
+      border-top-left-radius: px(3);
+    }
+
+    + .page-item a,
+    + .page-item button {
+      border-left: 0;
+    }
+
+    &.active .page-link {
+      background-color: $pagination-color-bg;
+      border-color: $pagination-color-bg;
+      color: $color-ci-white;
+    }
+
+    &.disabled .page-link {
+      background-color: transparent;
+      border-color: $pagination-color-bg;
+      color: $pagination-color-disabled;
+      cursor: not-allowed;
+    }
+
+    &:not(:first-child) .page-link {
+      margin-left: 0; // disable bootstrap overlap
+    }
+
+    &.disabled {
+      border-bottom: 2px solid $pagination-color-disabled;
+      border-top: 2px solid $pagination-color-disabled;
+      color: $pagination-color-disabled;
+      padding: $spacing-tiny $spacing-small;
+
+      &:first-child {
+        border-bottom-left-radius: px(3);
+        border-left: 2px solid $pagination-color-disabled;
+        border-top-left-radius: px(3);
+      }
+
+      &:last-child {
+        border-bottom-right-radius: px(3);
+        border-right: 2px solid $pagination-color-disabled;
+        border-top-right-radius: px(3);
+      }
+
+      + .page-item {
+        border-left: 2px solid $pagination-color-bg;
+      }
+    }
+  }
+
+  .text-center > & {
+    justify-content: center;
+  }
+
+  .text-end > & {
+    justify-content: flex-end;
+  }
+}

package/src/components/ClProgress/style.scss

@@ -0,0 +1,49 @@
+////
+/// @group components
+/// @access public
+////
+
+// This is our version of Bootstrap progress.
+
+@import 'bootstrap/scss/progress';
+
+.progress {
+  background-color: $color-ci-smoke;
+  border-radius: $border-ui-radius;
+  height: px(16);
+  margin-top: $spacing-small;
+
+  .progress-bar {
+    @extend %p-tiny;
+
+    background-color: $color-secondary;
+    color: $color-ci-white;
+
+    &.bg-primary {
+      background-color: $color-primary;
+    }
+
+    // &.bg-success,
+    // &.bg-danger,
+    // &.bg-warning,
+    // &.bg-info,
+    // &.bg-light,
+    &.bg-secondary {
+      background-color: $color-secondary;
+    }
+
+    &.bg-dark {
+      background-color: $color-ci-cloud;
+    }
+  }
+
+  .progress-bar-striped {
+    background-image: none;
+  }
+
+  @for $i from 0 through 20 {
+    .w-#{$i*5} {
+      width: math.percentage($i * 0.05);
+    }
+  }
+}

package/src/components/ClScrollbar/style.scss

@@ -0,0 +1,14 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes the simplebar scrollbar.
+
+@import 'simplebar/dist/simplebar.min';
+
+// --- scrollbar ---------------------------------------------------------------
+.simplebar-scrollbar::before {
+  background-color: $color-black-50a !important; // sass-lint:disable-line no-important
+  right: 4px !important; // sass-lint:disable-line no-important
+}

package/src/components/ClSpinner/style.scss

@@ -0,0 +1,26 @@
+.cl-spinner {
+  @extend %p-medium;
+  @extend %spacing-small;
+
+  animation-duration: 1s;
+  animation-name: cl-spinner-fadein;
+
+  .fa-spinner {
+    margin-left: $spacing-tiny;
+    margin-right: $spacing-tiny;
+  }
+}
+
+@keyframes cl-spinner-fadein {
+  0% {
+    opacity: 0;
+  }
+
+  80% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/src/components/ClTabs/style.scss

@@ -0,0 +1,90 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' navigation tabs
+
+.cl-tabs {
+  > ul {
+    display: flex;
+    flex-wrap: wrap-reverse;
+    justify-content: stretch;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    text-align: center;
+
+    li {
+      border-bottom: px(2) solid $color-line;
+      display: inline-block;
+      flex-grow: 1;
+      margin: 0 px(2);
+
+      &.active {
+        border-color: $color-ci-blue;
+        color: $color-ci-blue;
+
+        > * {
+          color: $color-ci-blue;
+        }
+      }
+    }
+
+    label {
+      @extend %p-form-label;
+
+      cursor: pointer;
+      margin: 0 $spacing-micro;
+      min-width: $spacing-huge * 2 + $spacing-tiny * 2;
+      padding: $spacing-tiny;
+      white-space: nowrap;
+
+      i {
+        margin-left: $spacing-tiny;
+      }
+
+      @include media-breakpoint-down(sm) {
+        @include typography-font($typography-font-list-sans, 600, px(12), 1.2em, 0.025em);
+
+        display: flex;
+        flex-direction: column-reverse;
+        margin: $spacing-micro 0;
+        min-width: $spacing-medium;
+
+        i {
+          font-size: px(18);
+          margin: 0 0 $spacing-micro;
+        }
+      }
+    }
+  }
+
+  // --- tab interaction ---------------------------------------------
+
+  .cl-tab-content {
+    display: none; // initially hidden
+    margin-top: $spacing-medium;
+  }
+
+  > [type='radio'] {
+    opacity: 0;
+    position: absolute;
+  }
+
+  @for $i from 1 through 16 {
+    .cl-tab-#{$i}:checked ~ ul {
+      .cl-tab-#{$i} {
+        border-color: $color-ci-blue;
+
+        > * {
+          color: $color-ci-blue;
+        }
+      }
+    }
+
+    .cl-tab-#{$i}:checked ~ .cl-tab-content.cl-tab-#{$i} {
+      display: block;
+    }
+  }
+}

package/src/components/ClToggle/style.scss

@@ -0,0 +1,97 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs toggle/checkboxes.
+
+$toggle-color-regular: $color-dark;
+
+.cl-toggle-checkbox {
+  // hide checkbox but keep it tab-able
+  display: inline-block;
+  opacity: 0;
+  position: absolute;
+
+  + .badge {
+    cursor: pointer;
+    padding-right: $spacing-tiny + $spacing-micro;
+    text-transform: none;
+  }
+
+  &:checked + .badge {
+    i:nth-of-type(1) {
+      display: inline-block;
+    }
+
+    i:nth-of-type(2) {
+      display: none;
+    }
+  }
+
+  &:not(:checked) + .badge {
+    background-color: $color-ci-white;
+    box-shadow: 0 0 0 2px inset $toggle-color-regular;
+    color: $toggle-color-regular;
+
+    i:nth-of-type(1) {
+      display: none;
+    }
+
+    i:nth-of-type(2) {
+      display: inline-block;
+    }
+
+    &.cl-badge-primary {
+      box-shadow: 0 0 0 2px inset $color-primary;
+      color: $color-primary;
+    }
+
+    &.cl-badge-secondary {
+      box-shadow: 0 0 0 2px inset $color-secondary;
+      color: $color-secondary;
+    }
+  }
+
+  &:disabled:not(:checked) + .badge {
+    background-color: $color-ci-white;
+    box-shadow: 0 0 0 2px inset $color-ci-silver;
+    color: $color-ci-silver;
+  }
+
+  &:disabled:checked + .badge {
+    background-color: $color-ci-silver;
+    color: $color-ci-white;
+  }
+
+  &:focus + .badge {
+    box-shadow: 0 0 0 $btn-focus-width rgba($toggle-color-regular, 0.5); // sass-lint:disable-line no-color-literals
+    outline: 0;
+
+    &.cl-badge-primary {
+      box-shadow: 0 0 0 $btn-focus-width rgba($color-primary, 0.5); // sass-lint:disable-line no-color-literals
+    }
+
+    &.cl-badge-secondary {
+      box-shadow: 0 0 0 $btn-focus-width rgba($color-secondary, 0.5); // sass-lint:disable-line no-color-literals
+    }
+  }
+
+  &:focus:not(:checked) + .badge {
+    box-shadow:
+      0 0 0 2px inset $toggle-color-regular,
+      0 0 0 $btn-focus-width rgba($toggle-color-regular, 0.5); // sass-lint:disable-line no-color-literals
+
+    &.cl-badge-primary {
+      box-shadow:
+        0 0 0 2px inset $color-primary,
+        0 0 0 $btn-focus-width rgba($color-primary, 0.5); // sass-lint:disable-line no-color-literals
+    }
+
+    &.cl-badge-secondary {
+      box-shadow:
+        0 0 0 2px inset $color-secondary,
+        0 0 0 $btn-focus-width rgba($color-secondary, 0.5); // sass-lint:disable-line no-color-literals
+    }
+  }
+}

package/src/components/ClTooltip/style.scss

@@ -0,0 +1,46 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's tooltips.
+
+@import 'bootstrap/scss/tooltip';
+
+.cl-tooltip {
+  #{'--bs-tooltip-bg'}: $color-secondary;
+  filter: drop-shadow($color-shadow-3d);
+  opacity: 1 !important; // sass-lint:disable-line no-important
+  z-index: $layer-z-modal + 1;
+
+  .tooltip-inner {
+    // Bootstrap class
+    color: $color-ci-white;
+    max-width: none !important; // sass-lint:disable-line no-important
+    text-align: center;
+
+    code {
+      color: $color-ci-white;
+    }
+  }
+
+  &.cl-tooltip-primary {
+    #{'--bs-tooltip-bg'}: $color-primary;
+  }
+
+  &.cl-tooltip-secondary {
+    #{'--bs-tooltip-bg'}: $color-secondary;
+  }
+
+  &.cl-tooltip-dark {
+    #{'--bs-tooltip-bg'}: $color-dark;
+  }
+
+  &.cl-tooltip-light {
+    #{'--bs-tooltip-bg'}: $color-ci-haze;
+
+    .tooltip-inner {
+      color: $color-ci-dim;
+    }
+  }
+}