@castlabs/ui 4.18.2

package/src/components/ClWizard/style.scss

@@ -0,0 +1,173 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file adds our *-*-*-* wizard progress indicator.
+
+.cl-wizard-steps {
+  $wizard-li-spacing: $spacing-small;
+  $wizard-offset-indicator: -1em;
+  $wizard-color-done: $color-ci-blue;
+  $wizard-color-todo: $color-ci-silver;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin: $spacing-medium + $spacing-small 0 0;
+
+  &:first-child {
+    margin-top: $spacing-medium + $spacing-small;
+  }
+
+  li {
+    @extend %p-small;
+
+    color: $color-text;
+    display: inline-block;
+    font-weight: 600;
+    margin: 0 $wizard-li-spacing;
+    position: relative;
+
+    // --- line ----------------------------------------------------------------
+
+    &::before {
+      // line
+      background: linear-gradient(90deg, $wizard-color-done 50%, $wizard-color-done 50%);
+      content: '';
+      display: inline-block;
+      height: $typography-line-width;
+      left: -$wizard-li-spacing;
+      position: absolute;
+      top: $wizard-offset-indicator;
+      width: calc(100% + $wizard-li-spacing * 2);
+    }
+
+    &:first-child::before {
+      left: 50%;
+      width: calc(50% + $wizard-li-spacing);
+    }
+
+    &:last-child::before {
+      left: -$wizard-li-spacing;
+      width: calc(50% + $wizard-li-spacing);
+    }
+
+    // --- dot -----------------------------------------------------------------
+
+    &::after {
+      // dot
+      background-color: $wizard-color-done;
+      border: $typography-line-width solid $wizard-color-done;
+      border-radius: 100%;
+      content: '';
+      display: inline-block;
+      height: 1em;
+      left: calc(50% - 0.5em);
+      position: absolute;
+      top: $wizard-offset-indicator - 0.45em;
+      width: 1em;
+    }
+
+    &.active {
+      color: $wizard-color-done;
+
+      &::before {
+        background: linear-gradient(90deg, $wizard-color-done 50%, $wizard-color-todo 50%);
+      }
+
+      &:first-child::before {
+        background: $wizard-color-todo;
+        left: 50%;
+      }
+
+      &:last-child::before {
+        background: $wizard-color-done;
+        left: -$wizard-li-spacing;
+      }
+
+      &::after {
+        background-color: $color-ci-white;
+      }
+
+      + *,
+      + * + *,
+      + * + * + *,
+      + * + * + * + *,
+      + * + * + * + * + *,
+      + * + * + * + * + * + *,
+      + * + * + * + * + * + * + *,
+      + * + * + * + * + * + * + * + *,
+      + * + * + * + * + * + * + * + * + *,
+      + * + * + * + * + * + * + * + * + * + * {
+        color: $wizard-color-todo;
+
+        &::before {
+          background: linear-gradient(90deg, $wizard-color-todo 50%, $wizard-color-todo 50%);
+        }
+
+        &::after {
+          background-color: $color-ci-white;
+          border-color: $wizard-color-todo;
+        }
+      }
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    flex-direction: column;
+    margin: $spacing-medium 0 0 $spacing-medium;
+
+    li {
+      margin: $spacing-tiny 0;
+      text-align: left;
+
+      &::before {
+        // line
+        background: linear-gradient(0deg, $wizard-color-done 50%, $wizard-color-done 50%);
+        bottom: -0.55em;
+        height: calc(100% + $spacing-tiny * 2);
+        left: -1.3em;
+        top: unset;
+        width: $typography-line-width;
+      }
+
+      &:first-child::before {
+        bottom: -0.55em;
+        height: calc(50% + $spacing-tiny);
+        left: -1.3em;
+        top: unset;
+        width: $typography-line-width;
+      }
+
+      &:last-child::before {
+        bottom: 0.9em;
+        height: calc(50% + $spacing-tiny);
+        left: -1.3em;
+        top: unset;
+        width: $typography-line-width;
+      }
+
+      &::after {
+        // dot
+        bottom: calc(50% - 0.5em);
+        left: -1.75em;
+        top: unset;
+      }
+
+      &.active {
+        &::before {
+          background: linear-gradient(180deg, $wizard-color-done 50%, $wizard-color-todo 50%);
+        }
+
+        &:first-child::before {
+          left: -1.3em;
+        }
+
+        &:last-child::before {
+          left: -1.3em;
+        }
+      }
+    }
+  }
+}

package/src/components/form/ClField/style.scss

@@ -0,0 +1,45 @@
+.cl-form {
+  // --- field invalidation ----------------------------------------------------
+
+  :invalid {
+    // remove HTML5 browser styling
+    box-shadow: none; // remove browser shading
+  }
+
+  [invalid],
+  .invalid {
+    border-color: $color-ci-blue;
+    color: $color-ci-blue;
+
+    + * + .invalid-feedback,
+    + .invalid-feedback {
+      display: block;
+    }
+
+    + * + .valid-feedback,
+    + .valid-feedback {
+      display: none;
+    }
+  }
+
+  // --- disabled fields -------------------------------------------------------
+
+  .form-label.disabled,
+  .valid-feedback.disabled {
+    color: $color-ci-silver;
+  }
+
+  fieldset[disabled] input,
+  fieldset[disabled] textarea,
+  fieldset[disabled] select,
+  textarea[disabled],
+  input[disabled],
+  select[disabled] {
+    color: $form-color-disabled;
+    cursor: not-allowed;
+  }
+
+  select[disabled] {
+    --bs-form-select-bg-img: url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Cpath fill=%27none%27 stroke=%27%23B0B3B6%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27m2 5 6 6 6-6%27/%3E%3C/svg%3E');
+  }
+}

package/src/components/form/ClFieldCheck/style.scss

@@ -0,0 +1,99 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' checkboxes and radio buttons
+
+@import 'bootstrap/scss/forms/form-check';
+
+.form-check {
+  margin-top: $spacing-small;
+  padding-left: $spacing-medium;
+
+  &.form-check-inline {
+    margin-top: $spacing-tiny + $spacing-micro;
+  }
+
+  .form-check-input {
+    margin-left: -$spacing-medium;
+    margin-right: $spacing-micro;
+    margin-top: 0.25em;
+
+    &[type='checkbox'] {
+      border: $form-field-border;
+      border-radius: 0;
+
+      &:checked {
+        background-color: $color-ci-dim;
+        border: 0;
+      }
+
+      &:indeterminate {
+        background-color: transparent;
+        background-image: none;
+        border-color: $color-ci-dim;
+        box-shadow:
+          0 0 0 0.15em $color-white-100 inset,
+          0 0 0 1em $color-ci-dim inset;
+
+        &:disabled,
+        &.disabled {
+          border-color: $color-ci-smoke;
+          box-shadow:
+            0 0 0 0.15em $color-white-100 inset,
+            0 0 0 1em $form-field-border-color inset;
+        }
+      }
+    }
+
+    &[type='radio'] {
+      border: $form-field-border;
+
+      &:checked {
+        background-color: $color-ci-dim;
+        border-color: $color-ci-dim;
+
+        &.disabled,
+        &:disabled {
+          border-color: $color-ci-smoke;
+        }
+      }
+    }
+
+    &:focus {
+      @include focus-glow-embed($color-ci-dim);
+    }
+
+    &.disabled,
+    &:disabled {
+      background-color: $color-ci-haze;
+      opacity: 1;
+
+      &:checked {
+        background-color: $form-field-border-color;
+      }
+
+      ~ .form-check-label {
+        color: $form-color-disabled;
+        opacity: 1;
+      }
+    }
+  }
+
+  label {
+    @extend %p-medium; // looks like regular text
+
+    letter-spacing: 0;
+    margin-top: 0;
+    text-transform: none;
+  }
+
+  .form-label + & {
+    margin-top: $spacing-tiny;
+  }
+
+  + .form-check {
+    margin-top: $spacing-micro;
+  }
+}

package/src/components/form/ClFieldFile/style.scss

@@ -0,0 +1,71 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' <input> fields.
+
+.cl-form {
+  [type='file'] {
+    @extend %form-field-box;
+    @extend %form-field-typography;
+
+    @include form-focus-border($color-ci-silver);
+
+    &.cl-file {
+      border: 0;
+      height: 0;
+      margin: 0;
+      overflow: hidden;
+      padding: 0;
+      width: 0;
+    }
+
+    &:focus + .cl-file-companion {
+      @include form-focus-border-embed($color-ci-silver);
+    }
+
+    &[invalid]:focus + .cl-file-companion,
+    &.invalid:focus + .cl-file-companion {
+      border-color: $color-ci-silver;
+    }
+
+    .form-label + & {
+      @extend %spacing-micro;
+    }
+
+    &[invalid] + .cl-file-companion,
+    &.invalid + .cl-file-companion {
+      border-color: $color-ci-blue;
+      color: $color-ci-blue;
+
+      + * + .invalid-feedback,
+      + .invalid-feedback {
+        display: block;
+      }
+
+      + * + .valid-feedback,
+      + .valid-feedback {
+        display: none;
+      }
+    }
+
+    &[disabled] + .cl-file-companion {
+      color: $form-color-disabled;
+      cursor: not-allowed;
+    }
+  }
+
+  .cl-file-companion {
+    @extend %spacing-micro;
+    @extend %form-field-box;
+    @extend %form-field-typography;
+
+    @include form-focus-border($color-ci-silver);
+
+    & {
+      letter-spacing: 0;
+      text-transform: none;
+    }
+  }
+}

package/src/components/form/ClFieldGroup/style.scss

@@ -0,0 +1,73 @@
+.cl-form {
+  .input-group {
+    align-items: center;
+    display: flex;
+
+    &[invalid],
+    &.invalid {
+      > * {
+        border-color: $color-ci-blue;
+        color: $color-ci-blue;
+      }
+    }
+
+    > .btn:not(:last-child) {
+      margin-right: $spacing-tiny;
+    }
+
+    input + .btn,
+    select + .btn,
+    .invalid-feedback + .btn,
+    .valid-feedback + .btn {
+      margin-left: $spacing-tiny;
+    }
+
+    > .btn {
+      flex-shrink: 0;
+    }
+
+    > .btn + :not(.btn) {
+      border-left-width: $form-field-border-width !important; // sass-lint:disable-line no-important
+    }
+
+    > * {
+      margin-top: 0;
+      z-index: 0;
+
+      &:focus {
+        z-index: 1; // needed so the focused element's border is always on top
+      }
+
+      &:not(.btn) + * {
+        // trick to share one ][ border between 2 inputs
+        &:not(.btn) {
+          border-left-width: 0;
+
+          &:focus,
+          &.invalid:focus {
+            box-shadow: -$form-field-border-width 0 0 $color-ci-silver !important; // sass-lint:disable-line no-important
+          }
+        }
+
+        &.invalid {
+          box-shadow: -$form-field-border-width 0 0 $color-ci-blue !important; // sass-lint:disable-line no-important
+        }
+      }
+    }
+
+    .invalid-feedback,
+    .valid-feedback {
+      display: none; // hide individual field's texts
+    }
+
+    &-text {
+      @extend %form-field-box;
+      @extend %form-field-typography-monospace;
+
+      background-color: $color-ci-haze;
+      height: 100%;
+      white-space: nowrap;
+      width: auto;
+    }
+  }
+}

package/src/components/form/ClFieldInput/style.scss

@@ -0,0 +1,118 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' <input> fields.
+
+.cl-form {
+  input,
+  textarea {
+    display: inline-block;
+
+    .form-label + & {
+      margin-top: $spacing-micro;
+    }
+
+    &.cl-field-sans {
+      @extend %form-field-typography;
+    }
+
+    &.cl-field-monospace {
+      @extend %form-field-typography-monospace;
+    }
+  }
+
+  textarea,
+  [type='text'],
+  [type='password'],
+  [type='url'],
+  [type='date'],
+  [type='email'],
+  [type='number'],
+  [type='date'],
+  [type='time'],
+  [type='datetime-local'] {
+    @extend %form-field-box;
+    @extend %form-field-typography;
+
+    @include form-focus-border($color-ci-silver);
+
+    &.form-control-plaintext {
+      background-color: transparent;
+      border-color: transparent;
+    }
+
+    &.cl-field-sans {
+      @extend %form-field-typography;
+    }
+
+    &.cl-field-monospace {
+      @extend %form-field-typography-monospace;
+    }
+
+    &::placeholder {
+      color: $color-ci-smoke;
+      opacity: 1;
+    }
+  }
+
+  [type='number'] {
+    appearance: textfield;
+
+    &::-webkit-inner-spin-button {
+      appearance: none;
+    }
+  }
+
+  [type='password'] {
+    letter-spacing: 0.25em;
+
+    &::placeholder {
+      letter-spacing: 0;
+    }
+  }
+
+  [type='range'] {
+    $color-bullet: $color-ci-dim;
+    $color-bullet-focus: $color-ci-blue;
+
+    appearance: none;
+    background: $color-ci-smoke;
+    border-radius: $border-ui-radius;
+    height: $spacing-tiny;
+    outline: none;
+    position: relative;
+    top: px(-2);
+    width: 100%;
+
+    &::-webkit-slider-thumb {
+      appearance: none;
+      background: $color-bullet;
+      border: 0;
+      border-radius: 100%;
+      cursor: pointer;
+      height: $spacing-medium;
+      width: $spacing-medium;
+    }
+
+    &::-moz-range-thumb {
+      background: $color-bullet;
+      border: 0;
+      border-radius: 100%;
+      cursor: pointer;
+      height: $spacing-medium;
+      width: $spacing-medium;
+    }
+
+    &:focus {
+      &::-webkit-slider-thumb {
+        background: $color-bullet-focus;
+      }
+
+      &::-moz-range-thumb {
+        background: $color-bullet-focus;
+      }
+    }
+  }
+}

package/src/components/form/ClFieldSelect/style.scss

@@ -0,0 +1,39 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs <select> boxes.
+
+@import 'bootstrap/scss/forms/form-select';
+
+.cl-form {
+  label + select {
+    margin-top: $spacing-micro;
+  }
+
+  .form-select {
+    @extend %form-field-box;
+    @extend %form-field-typography;
+
+    @include form-focus-border($color-ci-silver);
+
+    & {
+      border-radius: 0;
+      display: block;
+    }
+
+    &.cl-field-monospace {
+      @extend %form-field-typography-monospace;
+    }
+  }
+
+  .input-group {
+    .form-select {
+      flex-grow: 0;
+      flex-shrink: 0;
+      padding-right: 2rem;
+      width: inherit;
+    }
+  }
+}

package/src/components/form/ClFieldSet/style.scss

@@ -0,0 +1,16 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines castlabs' <fieldset>s.
+
+.cl-form {
+  fieldset {
+    padding-bottom: $spacing-micro;
+
+    legend {
+      @extend %p-form-label;
+    }
+  }
+}