@castlabs/ui 4.18.2

package/src/styles/components/form.variables.scss

@@ -0,0 +1,51 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines form/input field variables
+
+$form-field-border-radius: 0;
+$form-field-border-width: px(2);
+$form-field-border-color: $color-ci-smoke;
+$form-field-border: $form-field-border-width solid $form-field-border-color;
+
+$form-color-disabled: $color-ci-silver;
+
+%form-field-box {
+  @extend %p-medium;
+
+  background-color: $color-ci-white;
+  border: $form-field-border;
+  border-radius: $form-field-border-radius;
+  color: $color-text;
+  padding: $spacing-tiny - 0.125rem $spacing-tiny; // remove 2px border each
+  width: 100%;
+
+  &:disabled,
+  &.disabled {
+    background-color: $color-ci-white;
+  }
+}
+
+%form-field-typography {
+  @include typography-font($typography-font-list-sans, 400, px(16), 1.5em);
+}
+
+%form-field-typography-monospace {
+  @include typography-font($typography-font-list-monospace, 400, px(17), 1.59em, 0.025em, 80%);
+}
+
+@mixin form-focus-border-embed($color) {
+  border-color: $color;
+  box-shadow: none;
+  outline: 0;
+}
+
+@mixin form-focus-border($color) {
+  &:focus,
+  &:focus:first-child,
+  &:focus:last-child {
+    @include form-focus-border-embed($color);
+  }
+}

package/src/styles/layout/animation.scss

@@ -0,0 +1,39 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines animations and transitions used in this app.
+
+// --- flash up text, e.g. after copy ------------------------------------------
+
+@keyframes cl-animation-flash-opacity {
+  0% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: inherit;
+  }
+}
+
+.cl-animation-flash-text {
+  animation: cl-animation-flash-opacity 1s;
+}
+
+// --- slide-in sidenav nav ----------------------------------------------------
+
+body.cl-animate {
+  .cl-nav-side .cl-nav-drawer {
+    transition: width 0.2s linear;
+  }
+
+  .cl-nav-backdrop {
+    transition: background-color 0.2s linear;
+  }
+
+  .cl-main,
+  .modal {
+    transition: padding-left 0.2s linear;
+  }
+}

package/src/styles/layout/grid.scss

@@ -0,0 +1,144 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines our page grid. It is mostly based on bootstrap but with a few tweaks.
+
+@import 'bootstrap/scss/bootstrap-grid';
+@import 'grid.variables';
+
+// bootstrap uses a narrow container for sm, but we prefer full-width instead
+@include media-breakpoint-only(sm) {
+  .container {
+    max-width: inherit;
+  }
+}
+
+.container .container {
+  // nested containers should not limit themselves
+  margin-left: 0;
+  margin-right: 0;
+  max-width: 100%;
+}
+
+// -----------------------------------------------------------------------------
+
+// We remove mandatory paddings from .container's
+.container,
+.container-fluid,
+.container-xxl,
+.container-xl,
+.container-lg,
+.container-md,
+.container-sm {
+  padding-left: 0;
+  padding-right: 0;
+
+  > .row {
+    margin-left: 0;
+    margin-right: 0;
+  }
+}
+
+// alignment classes for row content
+.row {
+  &.text-start {
+    justify-content: flex-start;
+  }
+
+  &.text-center {
+    justify-content: center;
+  }
+
+  &.text-end {
+    justify-content: flex-end;
+  }
+}
+
+// do pull out nested containers or their cel padding will indent them
+.container .container > .row {
+  margin-left: -$spacing-tiny;
+  margin-right: -$spacing-tiny;
+}
+
+// sections with slim content width limit the main container
+.cl-section-slim > .container {
+  max-width: 848px;
+}
+
+// -----------------------------------------------------------------------------
+
+$grid-spacing: $spacing-small;
+
+section {
+  padding-bottom: $spacing-large;
+  padding-top: $spacing-medium; // first element usually will add the rest.
+}
+
+main {
+  background-color: $color-ci-white;
+  display: table-row;
+  height: 100%;
+
+  .row {
+    #{'--bs-gutter-x'}: $grid-spacing;
+
+    > [class^='col-'] {
+      margin-top: $grid-spacing; // columns add top padding as first content line won't
+    }
+  }
+}
+
+.cl-flex-center-center {
+  align-items: center;
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  width: 100%;
+}
+
+.cl-faded {
+  opacity: 0.5;
+}
+
+h1.cl-faded,
+.cl-h1.cl-faded,
+h2.cl-faded,
+.cl-h2.cl-faded,
+h3.cl-faded,
+.cl-h3.cl-faded,
+h4.cl-faded,
+.cl-h4.cl-faded,
+h5.cl-faded,
+.cl-h5.cl-faded,
+h6.cl-faded,
+.cl-h6.cl-faded {
+  opacity: 0.3;
+}
+
+// -----------------------------------------------------------------------------
+img {
+  max-width: 100%;
+}
+
+html,
+body,
+.cl-app {
+  @include typography-font($typography-font-list-sans, 400, px(18), px(27), 0, 100, true);
+
+  background-color: $color-ci-white;
+  height: 100%;
+}
+
+.cl-main {
+  display: table;
+  height: 100%;
+  table-layout: fixed;
+  width: 100%;
+
+  > *,
+  main > * {
+    width: 100%;
+  }
+}

package/src/styles/layout/grid.variables.scss

@@ -0,0 +1,50 @@
+////
+/// @group layout
+/// @access public
+////
+
+@mixin grid-margins($spacing) {
+  padding-bottom: math.div($spacing, 2);
+  padding-top: math.div($spacing, 2);
+
+  > .row {
+    margin-left: -$spacing-tiny;
+    margin-right: -$spacing-tiny;
+
+    > * {
+      padding: math.div($spacing, 2) $spacing-tiny math.div($spacing, 2) $spacing-tiny;
+
+      > *:first-child {
+        margin-top: 0; // do not apply top spacing to first element in a cel
+      }
+
+      > *:last-child {
+        margin-bottom: 0; // do not apply bottom spacing to last element in a cel
+      }
+    }
+  }
+}
+
+%container-spacing-none {
+  @include grid-margins(0);
+}
+
+%container-spacing-tiny {
+  @include grid-margins($spacing-tiny);
+}
+
+%container-spacing-small {
+  @include grid-margins($spacing-small);
+}
+
+%container-spacing-medium {
+  @include grid-margins($spacing-medium);
+}
+
+%container-spacing-large {
+  @include grid-margins($spacing-large);
+}
+
+%container-spacing-huge {
+  @include grid-margins($spacing-huge);
+}

package/src/styles/layout/section.scss

@@ -0,0 +1,90 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file defines how we structure pages with <section class="cl-section-regular">s.
+
+%section-padding {
+  padding-left: $spacing-tiny;
+  padding-right: $spacing-tiny;
+
+  @include media-breakpoint-up(sm) {
+    padding-left: $spacing-medium;
+    padding-right: $spacing-medium;
+  }
+}
+
+.cl-section-primary,
+.cl-section-secondary,
+.cl-section-dark,
+.cl-section-light,
+.cl-section-regular,
+.cl-section-alternate {
+  @extend %section-padding;
+}
+
+// two successive sections of the same bg color loose a bit of gap
+.cl-section-regular + .cl-section-regular,
+.cl-section-alternate + .cl-section-alternate,
+.cl-section-dark + .cl-section-dark,
+.cl-section-light + .cl-section-light,
+.cl-section-primary + .cl-section-primary,
+.cl-section-secondary + .cl-section-secondary {
+  margin-top: $spacing-small * -3;
+}
+
+.cl-section-primary,
+.cl-section-secondary,
+.cl-section-dark {
+  color: $color-white-100;
+
+  h1,
+  h2,
+  h3 {
+    color: $color-white-100;
+  }
+
+  a {
+    @include typography-links(
+      $color-ci-white,
+      rgba($color-white-80a, $color-hover-opacity),
+      2px,
+      $color-ci-white,
+      rgba($color-white-80a, $color-hover-opacity)
+    );
+  }
+}
+
+.cl-section-primary {
+  background-color: $color-primary;
+
+  @include media-breakpoint-up(sm) {
+    min-height: px(88);
+  }
+}
+
+.cl-section-secondary {
+  background-color: $color-secondary;
+}
+
+.cl-section-dark {
+  background-color: $color-dark;
+}
+
+.cl-section-light,
+.cl-section-alternate {
+  background-color: $color-ci-haze;
+}
+
+.cl-section-tight {
+  // deprecated
+  padding-bottom: 1rem;
+  padding-top: 0;
+}
+
+main {
+  > .cl-section-regular:last-child {
+    padding-bottom: $grid-spacing * 3;
+  }
+}

package/src/styles/layout/spacing.scss

@@ -0,0 +1,295 @@
+////
+/// @group layout
+/// @access public
+////
+
+// This file contains spacing elements and helpers.
+
+// We move all margins to the top of entities. This makes it soo much easier
+// to use the + selector for fine-tuning situation specific spacings later on.
+
+audio,
+address,
+article,
+aside,
+blockquote,
+button,
+canvas,
+details,
+dialog,
+dd,
+dl,
+dt,
+embed,
+fieldset,
+figcaption,
+figure,
+footer,
+form,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+header,
+hgroup,
+hr,
+iframe,
+li,
+main,
+math,
+nav,
+object,
+ol,
+p,
+pre,
+section,
+svg,
+table,
+ul,
+img,
+label,
+input,
+textarea,
+video {
+  margin-bottom: 0;
+}
+
+main {
+  audio,
+  address,
+  article,
+  aside,
+  blockquote,
+  canvas,
+  details,
+  dialog,
+  dd,
+  dl,
+  dt,
+  embed,
+  fieldset,
+  figcaption,
+  figure,
+  footer,
+  form,
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  header,
+  hgroup,
+  hr,
+  iframe,
+  li,
+  math,
+  nav,
+  object,
+  ol,
+  p,
+  pre,
+  // section,
+  svg,
+  table,
+  ul,
+  img,
+  label,
+  input,
+  textarea,
+  video {
+    @include spacing-before-auto($spacing-small);
+  }
+
+  label,
+  .cl-p-label {
+    + ul,
+    + p {
+      margin-top: $spacing-micro;
+    }
+  }
+}
+
+.cl-p,
+.cl-h1,
+.cl-h2,
+.cl-h3,
+.cl-h4,
+.cl-h5,
+.cl-h6 {
+  @include spacing-before-auto($spacing-small);
+}
+
+// remove margins for divs in certain flexbox variants
+%cl-grid-flex-centered,
+.cl-grid-flex-centered {
+  > * {
+    @include spacing-before(0);
+  }
+}
+
+// -----------------------------------------------------------------------------
+
+.cl-spacing {
+  + * {
+    margin-top: 0;
+  }
+}
+
+.cl-spacing-huge {
+  margin-top: $spacing-huge !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-large {
+  margin-top: $spacing-large !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-medium {
+  margin-top: $spacing-medium !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-small {
+  margin-top: $spacing-small !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-tiny {
+  margin-top: $spacing-tiny !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-micro {
+  margin-top: $spacing-micro !important; // sass-lint:disable-line no-important
+}
+
+.cl-spacing-none {
+  margin-top: 0 !important; // sass-lint:disable-line no-important
+}
+
+.cl-md-padding {
+  @include media-breakpoint-up(md) {
+    padding-right: $spacing-medium;
+  }
+}
+
+@mixin spacing-box-x($spacing) {
+  line-height: 1em;
+
+  > *,
+  > *:first-child {
+    display: inline-block;
+    margin: $spacing $spacing 0 0;
+
+    @include media-breakpoint-down(sm) {
+      // buttons are 100% width on sm
+      &.btn {
+        display: block;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    &.cl-spread {
+      display: flex;
+      justify-content: space-between;
+
+      > *:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+
+  &.text-center,
+  &.cl-text-center {
+    // move margins to half-half of items
+    > *,
+    > *:first-child {
+      margin: $spacing ($spacing * 0.5) 0;
+
+      @include media-breakpoint-down(sm) {
+        // buttons are 100% width on sm
+        &.btn {
+          margin-left: 0;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  &.text-end,
+  &.cl-text-end {
+    // move margins to left of items
+    > *,
+    > *:first-child {
+      margin: $spacing 0 0 $spacing;
+
+      @include media-breakpoint-down(sm) {
+        // buttons are 100% width on sm
+        &.btn {
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  &.cl-spacing-huge {
+    margin-top: $spacing-huge - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-large {
+    margin-top: $spacing-large - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-medium {
+    margin-top: $spacing-medium - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-small {
+    margin-top: $spacing-small - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-tiny {
+    margin-top: $spacing-tiny - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-micro {
+    margin-top: $spacing-micro - $spacing !important; // sass-lint:disable-line no-important
+  }
+
+  &.cl-spacing-none {
+    margin-top: 0 - $spacing !important; // sass-lint:disable-line no-important
+  }
+}
+
+.cl-spacing-box-huge {
+  @include spacing-box-x($spacing-huge);
+}
+
+.cl-spacing-box-large {
+  @include spacing-box-x($spacing-large);
+}
+
+.cl-spacing-box-medium {
+  @include spacing-box-x($spacing-medium);
+}
+
+.cl-spacing-box,
+.cl-spacing-box-small {
+  @include spacing-box-x($spacing-small);
+}
+
+.cl-spacing-box-tiny {
+  @include spacing-box-x($spacing-tiny);
+}
+
+.cl-spacing-box-micro {
+  @include spacing-box-x($spacing-micro);
+}
+
+.cl-mobile-reverse {
+  // reverse order of vertical items (usually buttons) on mobile
+  @include media-breakpoint-down(sm) {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+}