@castlabs/ui 4.18.2

package/src/components/navigation/ClNavSide/style.scss

@@ -0,0 +1,81 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines our sidenav. It does not define the sidenav's content inside
+// the drawer, only how the drawer operates/opens/closes.
+
+$sidenav-width-open: 18rem;
+$sidenav-width-closed: 0;
+$sidenav-z-index: $layer-z-sidenav;
+$sidenav-backdrop: $color-black-40a;
+$sidenav-breakpoint: xl;
+
+.cl-nav-side {
+  @include spacing-before(0);
+
+  & {
+    box-shadow: $color-shadow-3d;
+    left: 0;
+    position: fixed;
+    top: 0;
+    z-index: $sidenav-z-index;
+  }
+
+  .cl-nav-drawer {
+    @include spacing-before(0);
+
+    & {
+      background-color: $color-ci-white;
+      height: 100vh;
+      overflow-x: hidden;
+      position: relative;
+      width: $sidenav-width-closed;
+      z-index: $sidenav-z-index + 1;
+    }
+
+    > div {
+      height: 100%;
+      width: $sidenav-width-open;
+    }
+  }
+}
+
+.cl-nav-checkbox {
+  // this checkbox right before the nav opens/closes it
+  opacity: 0;
+  position: absolute;
+
+  &:checked {
+    ~ .cl-nav-side .cl-nav-drawer {
+      // open drawer if checked
+      width: $sidenav-width-open;
+    }
+
+    @include media-breakpoint-down($sidenav-breakpoint) {
+      ~ nav .cl-nav-backdrop {
+        background-color: $sidenav-backdrop;
+        width: 100%; // show on small screens where sidenav overlaps content
+      }
+    }
+
+    @include media-breakpoint-up($sidenav-breakpoint) {
+      ~ .cl-main {
+        padding-left: $sidenav-width-open;
+      }
+
+      ~ * .modal {
+        padding-left: $sidenav-width-open;
+      }
+    }
+  }
+}
+
+.cl-nav-backdrop {
+  background-color: transparent;
+  height: 100%;
+  position: fixed;
+  width: 0;
+  z-index: $sidenav-z-index - 1;
+}

package/src/components/navigation/ClNavTop/style.scss

@@ -0,0 +1,305 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines our top-nav
+
+.cl-nav-top {
+  // first/top line in content area
+  @extend %section-padding;
+
+  @include spacing-before(0);
+
+  & {
+    background-color: $color-ci-white;
+  }
+
+  a:not(.btn) {
+    @include typography-links-invisible;
+  }
+
+  > .container {
+    padding: 0;
+  }
+
+  > .container > .row > .col-12 {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    height: $header-nav-height;
+    justify-content: space-between;
+  }
+
+  .cl-nav-side-burger {
+    cursor: pointer;
+  }
+
+  .cl-path {
+    @extend %p-tiny;
+
+    margin: 0;
+    padding: 0 $spacing-small;
+
+    span {
+      &:not(:first-child) {
+        &::before {
+          content: ' › ';
+        }
+
+        @include media-breakpoint-down(sm) {
+          display: none;
+        }
+      }
+    }
+
+    @include media-breakpoint-down(sm) {
+      text-align: left;
+      width: 100%;
+    }
+  }
+
+  .cl-logo {
+    align-items: center;
+    display: flex;
+
+    span {
+      @extend %p-tiny;
+
+      margin-right: $spacing-tiny;
+    }
+
+    i {
+      line-height: px(20);
+    }
+
+    a {
+      line-height: 0.5;
+      padding: 0;
+    }
+  }
+}
+
+.cl-nav-top-large {
+  // cl-nav-top variant that as slightly bigger
+  > .container > .row > .col-12 {
+    height: 4rem;
+  }
+
+  .cl-asset-logo {
+    height: 1.5em;
+    width: 7.5em;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// add & customize bootstrap navbar
+// -----------------------------------------------------------------------------
+
+@import 'bootstrap/scss/transitions';
+@import 'bootstrap/scss/dropdown';
+@import 'bootstrap/scss/nav';
+@import 'bootstrap/scss/navbar';
+
+@mixin navbar-expand {
+  .nav-link {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .nav-item:not(:last-of-type) {
+    margin-right: $spacing-medium;
+  }
+
+  .dropdown-menu {
+    box-shadow: $color-shadow-3d;
+  }
+
+  .cl-nav-side-burger {
+    display: none;
+  }
+
+  .cl-nav-backdrop {
+    display: none;
+  }
+}
+
+@mixin navbar-responsive {
+  .cl-nav-drawer {
+    // open drawer if checked
+    background-color: $color-ci-haze;
+    height: 100vh;
+    left: 0;
+    overflow: hidden auto;
+    position: fixed;
+    top: 0;
+    width: 0;
+    z-index: $sidenav-z-index;
+  }
+
+  .cl-nav-checkbox:checked ~ & {
+    .cl-nav-backdrop {
+      background-color: $sidenav-backdrop;
+      inset: 0;
+      position: fixed;
+      z-index: $sidenav-z-index - 1;
+    }
+
+    .cl-nav-drawer {
+      // open drawer if checked
+      width: $sidenav-width-open;
+    }
+  }
+
+  .nav-item {
+    padding-left: $spacing-small;
+    padding-right: $spacing-small;
+  }
+
+  .active {
+    background: $color-ci-white;
+    position: relative;
+
+    a,
+    a:visited {
+      color: $color-ci-red;
+    }
+
+    &::after {
+      // we use a block item, not a border, so content does not jump
+      background-color: $color-ci-silver;
+      content: '';
+      display: block;
+      height: 100%;
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: $bar-ui-width;
+    }
+  }
+}
+
+$navbar-item-spacing: $spacing-medium;
+
+.cl-navbar {
+  @extend %p-nav;
+
+  min-height: $header-nav-height;
+  padding-bottom: 0;
+  padding-top: 0;
+
+  @include media-breakpoint-down(md) {
+    padding-left: $spacing-small;
+    padding-right: $spacing-small;
+  }
+
+  .navbar-toggler {
+    height: $header-nav-height;
+    padding: 0;
+
+    &:active,
+    &:focus {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+
+  .navbar-brand {
+    font-size: px(16);
+    line-height: 1;
+    margin: 0;
+    padding: 0.5em 0;
+  }
+
+  .nav-link {
+    @include typography-links($color-text, $color-ci-night, 0);
+
+    & {
+      display: block;
+      padding: math.div($navbar-item-spacing, 2) 0;
+    }
+  }
+
+  .active {
+    color: $color-ci-red;
+
+    a,
+    a:visited {
+      color: $color-ci-red;
+    }
+  }
+
+  .dropdown-menu {
+    background-color: $color-ci-haze;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .dropdown-item {
+    @extend %p-nav;
+
+    padding: math.div($navbar-item-spacing, 2) $spacing-small;
+
+    &.active {
+      background-color: transparent;
+      color: $color-ci-red;
+    }
+  }
+
+  .dropdown-divider {
+    background-color: $color-ci-smoke;
+    border: 0;
+    height: px(2);
+    opacity: 1;
+  }
+
+  &.navbar-expand-sm {
+    @include media-breakpoint-up(sm) {
+      @include navbar-expand;
+    }
+
+    @include media-breakpoint-down(sm) {
+      @include navbar-responsive;
+    }
+  }
+
+  &.navbar-expand-md {
+    @include media-breakpoint-up(md) {
+      @include navbar-expand;
+    }
+
+    @include media-breakpoint-down(md) {
+      @include navbar-responsive;
+    }
+  }
+
+  &.navbar-expand-lg {
+    @include media-breakpoint-up(lg) {
+      @include navbar-expand;
+    }
+
+    @include media-breakpoint-down(lg) {
+      @include navbar-responsive;
+    }
+  }
+
+  &.navbar-expand-xl {
+    @include media-breakpoint-up(xl) {
+      @include navbar-expand;
+    }
+
+    @include media-breakpoint-down(xl) {
+      @include navbar-responsive;
+    }
+  }
+
+  &.navbar-expand-xxl {
+    @include media-breakpoint-up(xxl) {
+      @include navbar-expand;
+    }
+
+    @include media-breakpoint-down(xxl) {
+      @include navbar-responsive;
+    }
+  }
+}

package/src/components/section/ClSectionHeadline/style.scss

@@ -0,0 +1,49 @@
+.cl-section-dark .cl-headline-help-icon,
+.cl-section-primary .cl-headline-help-icon,
+.cl-section-secondary .cl-headline-help-icon {
+  @include typography-links(rgba($color-ci-white, 0.5), $color-ci-white, 0);
+
+  & {
+    font-size: 0.5em;
+    line-height: 1;
+    margin-left: 0.25em;
+    position: relative;
+    top: -0.75em;
+  }
+}
+
+.cl-section-headline {
+  $height: 80;
+
+  display: flex;
+  min-height: px($height);
+  padding-bottom: 0;
+  padding-top: 0;
+
+  .row > [class^='col-'] {
+    margin-bottom: 0;
+    margin-top: 0;
+    padding-bottom: $spacing-tiny;
+    padding-top: $spacing-tiny;
+  }
+
+  .container,
+  .row {
+    min-height: px($height);
+  }
+
+  .row {
+    align-content: center;
+  }
+
+  @include media-breakpoint-down(sm) {
+    $height: 54;
+
+    min-height: px($height);
+
+    .container,
+    .row {
+      min-height: px($height);
+    }
+  }
+}

package/src/components/section/ClSectionMainSide/style.scss

@@ -0,0 +1,60 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines a type of section with a 8-4 layout (main + side area)
+
+.cl-section-main-side {
+  padding-top: 0;
+
+  // .cl-section-primary + & { // first one right below header
+  //   padding-top: $spacing-small;
+  // }
+
+  .row > [class^='col-'] {
+    margin-top: $spacing-small * 2;
+  }
+
+  // // two successive sections of the same bg color loose a bit of gap
+  // &.cl-section-regular + .cl-section-regular.cl-section-main-side,
+  // &.cl-section-alternate + .cl-section-alternate.cl-section-main-side,
+  // &.cl-section-dark + .cl-section-dark.cl-section-main-side,
+  // &.cl-section-primary + .cl-section-primary.cl-section-main-side,
+  // &.cl-section-secondary + .cl-section-secondary.cl-section-main-side {
+  //   margin-top: $spacing-small * -2;
+  // }
+
+  @include media-breakpoint-up(lg) {
+    .col-lg-8 {
+      padding-right: $spacing-medium;
+    }
+  }
+
+  @include media-breakpoint-up(xxl) {
+    .col-lg-8 {
+      padding-right: $spacing-large;
+    }
+  }
+
+  .cl-spacing-side {
+    // to align stuff in the side area in full mode
+    display: none;
+    visibility: hidden;
+
+    @include media-breakpoint-up(lg) {
+      display: block;
+    }
+  }
+}
+
+// .cl-section-regular:not(.cl-section-main-side) + .cl-section-main-side,
+// .cl-section-alternate:not(.cl-section-main-side) + .cl-section-main-side {
+//   margin-top: $spacing-small * -2;
+//   padding-top: 0;
+// }
+//
+// .cl-section-main-side + section:not(.cl-section-main-side) {
+//   margin-top: $spacing-small * -1;
+//   padding-top: 0;
+// }

package/src/components/table/ClTable/style.scss

@@ -0,0 +1,23 @@
+////
+/// @group components
+/// @access public
+////
+
+// This defines castLabs data-driven tables.
+
+@import 'style.variables';
+
+.cl-table-scroll {
+  display: block;
+  margin-top: $spacing-small;
+  max-width: 100%;
+  overflow: auto hidden;
+}
+
+.cl-table-data {
+  @extend %cl-table-data;
+}
+
+.cl-table-data-light {
+  @extend %cl-table-data-light;
+}

package/src/components/table/ClTable/style.variables.scss

@@ -0,0 +1,155 @@
+////
+/// @group components
+/// @access public
+////
+
+// This defines castLabs data-driven tables.
+$table-padding-vertical: 0.5rem;
+$table-padding-horizontal: 0.5rem;
+$table-icon-size: 2rem;
+$table-responsive: sm;
+
+%cl-table-data {
+  border: 0;
+  border-collapse: separate;
+  border-spacing: 0;
+  position: relative;
+  width: 100%;
+
+  th {
+    @extend %p-tiny;
+
+    padding-bottom: 0.6rem;
+    padding-top: 0.6rem;
+
+    i {
+      width: inherit; // usually sort-icons
+    }
+
+    &:not(:first-child) {
+      .cl-resizer {
+        background-color: transparent;
+        content: ' ';
+        cursor: col-resize;
+        height: 100%;
+        margin-left: calc(-0.5rem - 3px);
+        position: absolute;
+        top: 0;
+        width: 5px;
+        z-index: 1;
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      &:nth-child(odd) {
+        background-color: $color-ci-haze;
+
+        td {
+          &:first-of-type {
+            border-bottom-left-radius: $border-ui-radius;
+            border-top-left-radius: $border-ui-radius;
+          }
+
+          &:last-of-type {
+            border-bottom-right-radius: $border-ui-radius;
+            border-top-right-radius: $border-ui-radius;
+          }
+        }
+      }
+
+      &.cl-faded {
+        opacity: 1; // undo generic fade to not fade bg
+
+        td:not(.cl-td-audit, .cl-td-links) {
+          border-color: $color-ci-silver; // compensate for fade
+          opacity: 0.5;
+        }
+      }
+
+      &:hover {
+        color: $color-ci-night;
+
+        td {
+          border-color: $color-ci-smoke;
+        }
+
+        .btn {
+          opacity: 1;
+        }
+
+        .cl-a-btn {
+          color: $color-ci-night;
+        }
+      }
+    }
+  }
+
+  .cl-tr-no-data {
+    td {
+      height: 3em;
+      text-align: center;
+    }
+
+    .cl-spinner {
+      margin-top: 0;
+    }
+  }
+
+  // --- links in tables -------------------------------------------------------
+
+  th a {
+    // links in headline are usually sort-links
+    @include typography-links(inherit, inherit, 0); // not visible
+  }
+
+  td a:not(.btn, .badge, .cl-a-btn, .cl-a-none) {
+    @extend %cl-a-default;
+  }
+
+  // --- wrapping long columns -------------------------------------------------
+
+  @for $col from 1 through 16 {
+    &.cl-table-wrap-col#{$col} {
+      td:nth-child(#{$col}) {
+        word-wrap: anywhere;
+      }
+    }
+  }
+
+  // --- responsive phone tables -----------------------------------------------
+  @include media-breakpoint-down($table-responsive) {
+    &:not(.cl-table-nonresponsive) {
+      td,
+      th {
+        border-right: 0 !important; // sass-lint:disable-line no-important
+        display: block;
+      }
+
+      th {
+        text-align: left !important; // sass-lint:disable-line no-important
+      }
+
+      td {
+        &:first-child {
+          padding-top: $spacing-small;
+        }
+
+        &:last-child {
+          padding-bottom: $spacing-small;
+        }
+      }
+    }
+  }
+}
+
+%cl-table-data-light {
+  tbody {
+    tr {
+      &:nth-child(odd) td {
+        background-color: $color-ci-white;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/Actions/style.scss

@@ -0,0 +1,11 @@
+.cl-table-data {
+  .cl-td-actions {
+    word-wrap: unset;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        text-align: end;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/Audit/style.scss

@@ -0,0 +1,26 @@
+.cl-table-data {
+  .cl-th-audit {
+    @extend %p-tiny;
+
+    font-weight: 700;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        display: none;
+      }
+    }
+  }
+
+  .cl-td-audit {
+    color: $color-ci-silver;
+    text-align: center;
+    width: 0.9em;
+    word-wrap: unset;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        display: none;
+      }
+    }
+  }
+}

package/src/components/table/ClTableCel/Boolean/style.scss

@@ -0,0 +1,12 @@
+.cl-table-data {
+  .cl-td-boolean {
+    text-align: center;
+    word-wrap: unset;
+
+    @include media-breakpoint-down($table-responsive) {
+      table:not(.cl-table-nonresponsive) & {
+        text-align: left;
+      }
+    }
+  }
+}