@castlabs/ui 4.18.2

package/src/components/ClButton/style.scss

@@ -0,0 +1,338 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's buttons.
+
+@import 'bootstrap/scss/buttons';
+
+$button-disabled-color: $color-ci-silver;
+
+// custom outline colors for bootstrap buttons
+@mixin button-outline-variant-cl($color, $background) {
+  @include button-variant(
+    // background - border - text
+    $background,
+    $color,
+    $color,
+    $background,
+    $color,
+    $color,
+    $background,
+    $color,
+    $color
+  );
+
+  // our focus (tab'ed) buttons are outline
+  .btn-check:focus + &,
+  &:focus {
+    background-color: $background;
+    border-color: $color;
+    color: $color;
+  }
+
+  // our active (mouse-down) buttons don't look different
+  .btn-check:checked + &,
+  .btn-check:active + &,
+  &:active,
+  &.active,
+  .show > &.dropdown-toggle {
+    background-color: $background;
+    border-color: $color;
+    color: $color;
+  }
+}
+
+.btn {
+  @extend %p-nav;
+
+  @include button-variant(
+    transparent,
+    transparent,
+    $color-text,
+    transparent,
+    transparent,
+    $color-text,
+    transparent,
+    transparent,
+    $color-text
+  );
+  @include button-focus-outline($color-text);
+
+  & {
+    background-image: none;
+    border-width: 2px;
+    font-weight: 600; // repeat as @include overrides
+    line-height: 1em; // repeat as @include overrides
+    min-width: 8em;
+    opacity: 1;
+    overflow: hidden;
+    padding: px(12) px(18);
+    transition: opacity 0.15s;
+    white-space: nowrap;
+  }
+
+  &.cl-btn-icon {
+    min-width: 0;
+  }
+
+  &:hover {
+    opacity: $button-hover-opacity;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: transparent !important; // sass-lint:disable-line no-important
+    border-color: transparent !important; // sass-lint:disable-line no-important
+    color: $button-disabled-color !important; // sass-lint:disable-line no-important
+    cursor: not-allowed;
+    opacity: 1 !important; // sass-lint:disable-line no-important
+    pointer-events: initial;
+  }
+
+  i {
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+
+  &-xs {
+    font-size: 0.5em;
+  }
+
+  &.btn-sm {
+    font-size: px(14);
+    line-height: px(14);
+    min-width: 0;
+    padding: $spacing-tiny $spacing-small;
+
+    .fa {
+      line-height: px(14);
+    }
+  }
+}
+
+%cl-btn-text,
+.cl-btn-text {
+  @include button-variant(
+    $color-ci-silver,
+    $color-ci-silver,
+    $color-ci-white,
+    $color-ci-silver,
+    $color-ci-silver,
+    $color-ci-white,
+    $color-ci-silver,
+    $color-ci-silver,
+    $color-ci-white
+  );
+  @include button-focus-outline($color-ci-silver);
+
+  &:disabled,
+  &.disabled {
+    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+  }
+}
+
+%cl-btn-primary,
+.cl-btn-primary {
+  @include button-variant(
+    $color-primary,
+    $color-primary,
+    $color-ci-white,
+    $color-primary,
+    $color-primary,
+    $color-ci-white,
+    $color-primary,
+    $color-primary,
+    $color-ci-white
+  );
+  @include button-focus-outline($color-primary);
+
+  &:disabled,
+  &.disabled {
+    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+  }
+}
+
+%cl-btn-outline-primary,
+.cl-btn-outline-primary {
+  @include button-outline-variant-cl($color-primary, transparent);
+  @include button-focus-outline($color-primary);
+
+  &:disabled,
+  &.disabled {
+    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+  }
+}
+
+%cl-btn-outline-text,
+.cl-btn-outline-text {
+  @include button-outline-variant-cl($color-text, transparent);
+  @include button-focus-outline($color-text);
+
+  &:disabled,
+  &.disabled {
+    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+  }
+}
+
+.cl-btn-outline-blue {
+  @include button-outline-variant-cl($color-ci-blue, transparent);
+  @include button-focus-outline($color-ci-blue);
+
+  &:disabled,
+  &.disabled {
+    border-color: $button-disabled-color !important; // sass-lint:disable-line no-important
+  }
+}
+
+.cl-btn-quickaction {
+  @extend %cl-a-btn;
+
+  @include typography-links($color-text, $color-text, 0);
+
+  & {
+    border: 0;
+    line-height: 1;
+    margin-left: $spacing-tiny;
+    min-width: 0;
+    padding: 0;
+  }
+
+  &:not(:hover) {
+    color: $color-ci-silver;
+  }
+}
+
+.cl-btn-a {
+  // button styled as regular link
+  @include cl-btn-a(27);
+}
+
+.cl-btn-ghost {
+  // an accessible, invisible button that can trigger clicks
+  @include button-focus-outline($color-text);
+
+  & {
+    background: transparent;
+    border: 0;
+    color: unset;
+    cursor: pointer;
+    font-size: unset;
+    font-style: unset;
+    font-weight: unset;
+    letter-spacing: unset;
+    margin: 0;
+    min-width: unset;
+    padding: 0;
+    text-transform: unset;
+    width: unset;
+  }
+}
+
+.btn,
+.btn:hover {
+  background-image: none; // remove our link underlines
+}
+
+.box {
+  // compensate margin that the elements
+  margin-bottom: -$spacing-small;
+  margin-right: -$spacing-small;
+
+  > * {
+    margin: $spacing-small $spacing-small $spacing-small 0;
+  }
+}
+
+.cl-section-primary {
+  .cl-btn-outline-text {
+    @include button-outline-variant-cl($color-ci-white, transparent);
+    @include button-focus-outline($color-ci-white);
+  }
+
+  .cl-btn-primary {
+    @include button-variant(
+      $color-ci-white,
+      $color-ci-white,
+      $color-primary,
+      $color-ci-white,
+      $color-ci-white,
+      $color-primary,
+      $color-ci-white,
+      $color-ci-white,
+      $color-primary
+    );
+    @include button-focus-outline($color-ci-white);
+  }
+}
+
+.btn.cl-btn-micro {
+  @extend %p-tiny;
+
+  color: inherit;
+  font-size: px(10);
+  letter-spacing: 0.5px;
+  min-width: 0;
+  overflow: hidden;
+  padding: 0 $spacing-micro;
+
+  &.cl-btn-primary,
+  &.cl-btn-text {
+    color: $color-white-100;
+  }
+
+  &.cl-btn-outline-primary {
+    color: $color-primary;
+  }
+}
+
+// --- spinner buttons ---------------------------------------------------------
+
+@keyframes cl-btn-spinner-spin {
+  0% {
+    transform: translateY(-50%) rotate(0deg);
+  }
+
+  100% {
+    transform: translateY(-50%) rotate(360deg);
+  }
+}
+
+.cl-btn-spinner {
+  pointer-events: none;
+  position: relative;
+
+  > * {
+    visibility: hidden;
+  }
+
+  &::before {
+    @include cl-fontawesome('\f110');
+
+    & {
+      animation: cl-btn-spinner-spin 2s linear infinite;
+      display: block;
+      left: 0;
+      position: absolute;
+      right: 0;
+      top: 50%;
+    }
+  }
+}
+
+// --- responsive tweaks -------------------------------------------------------
+
+.btn:not(.cl-btn-micro, .cl-btn-quickaction) {
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+}

package/src/components/ClCard/style.scss

@@ -0,0 +1,61 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's cards.
+
+@import 'bootstrap/scss/card';
+@import 'style.variables';
+
+.card {
+  @extend %cl-card;
+}
+
+.card.cl-card-max {
+  height: 100%; // cards in responsive grid colums should have full height
+  margin-top: 0;
+}
+
+details.card {
+  // collapsible cards
+  summary {
+    list-style: none;
+
+    &::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: $color-ci-silver;
+        display: flex;
+        height: 100%;
+        justify-content: flex-start;
+        position: absolute;
+        right: $card-spacing;
+        top: 0;
+      }
+    }
+
+    &:focus {
+      @include color-focus-outline;
+    }
+  }
+
+  > summary::marker,
+  > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  &[open] {
+    summary::after {
+      content: '\f077'; // chevron-up
+    }
+  }
+}
+
+.card.cl-card-tight {
+  @extend %cl-card-tight;
+}

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

@@ -0,0 +1,179 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds & customizes bootstrap's cards.
+
+$card-spacing: px(20);
+$card-color-fg: $color-ci-dim;
+$card-color-bg: $color-ci-haze;
+$card-border-radius: $border-ui-radius;
+$card-border-color: $color-ci-white;
+$card-border-width: 2px;
+$card-spacing: px(20);
+$card-spacing-tight: $spacing-small;
+
+%cl-card {
+  @include color-shadow-3d;
+
+  background-color: $card-color-bg;
+  border: 0;
+  color: $card-color-fg;
+  margin-top: $spacing-small;
+
+  &.cl-card-oversized {
+    @include media-breakpoint-up(sm) {
+      margin-left: -$card-spacing;
+      margin-right: -$card-spacing;
+    }
+  }
+
+  .card-header {
+    @extend %h3;
+
+    background-color: $color-secondary;
+    border-color: $card-border-color;
+    border-width: 0;
+    color: $color-ci-white;
+    padding: $spacing-small * 0.75 $card-spacing;
+    position: relative;
+  }
+
+  &.cl-card-primary .card-header {
+    background-color: $color-primary;
+  }
+
+  &.cl-card-secondary .card-header {
+    background-color: $color-secondary;
+  }
+
+  &.cl-card-dark .card-header {
+    background-color: $color-dark;
+  }
+
+  &.cl-card-light .card-header {
+    background-color: $color-ci-haze;
+    color: $color-ci-dim;
+  }
+
+  .card-body {
+    padding: $card-spacing;
+
+    > .container {
+      margin-top: -$spacing-small;
+    }
+  }
+
+  .card-footer {
+    background-color: $card-color-bg;
+    border-color: $card-border-color;
+    border-width: $card-border-width;
+    color: $card-color-fg;
+    padding: $card-spacing;
+  }
+
+  > .list-group {
+    border-color: $card-border-color;
+    border-width: $card-border-width;
+  }
+
+  .list-group-item {
+    background-color: $card-color-bg;
+  }
+
+  .card-img,
+  .card-img-top {
+    border-radius: $card-border-radius;
+  }
+
+  > * {
+    + * {
+      border-top: $card-border-width solid $card-border-color;
+    }
+  }
+
+  &.cl-card-border {
+    // bordered cards
+    .card-footer,
+    .card-body {
+      border-bottom: 2px solid transparent;
+      border-left: 2px solid transparent;
+      border-right: 2px solid transparent;
+      border-top: 0;
+    }
+
+    &.cl-card-primary {
+      .card-footer,
+      .card-body {
+        border-color: $color-primary;
+      }
+    }
+
+    &.cl-card-secondary {
+      .card-footer,
+      .card-body {
+        border-color: $color-secondary;
+      }
+    }
+
+    &.cl-card-dark {
+      .card-footer,
+      .card-body {
+        border-color: $color-dark;
+      }
+    }
+
+    &.cl-card-light {
+      .card-footer,
+      .card-body {
+        border-color: $color-ci-haze;
+      }
+    }
+  }
+
+  .card-icon-link {
+    @include typography-links(inherit, inherit, 0);
+
+    & {
+      margin-top: -0.6em;
+      opacity: 0.5;
+      position: absolute;
+      right: $card-spacing;
+      top: 50%;
+    }
+  }
+
+  &.cl-card-transparent {
+    background-color: transparent;
+    border-color: transparent;
+    box-shadow: none;
+
+    .card-header,
+    .card-body,
+    .card-footer {
+      background-color: transparent;
+      border-color: transparent;
+      color: $color-ci-dim;
+    }
+  }
+
+  + .card {
+    margin-top: $spacing-medium;
+  }
+}
+
+%cl-card-tight {
+  .card-header {
+    @extend %p-nav;
+
+    color: $color-ci-white;
+    font-size: px(18);
+    padding-bottom: $spacing-small;
+    padding-top: $spacing-small;
+  }
+
+  &.cl-card-light .card-header {
+    color: $color-ci-dim;
+  }
+}