@castlabs/ui 6.0.2 → 7.0.0

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

@@ -11,12 +11,11 @@
 
   @include spacing-before(0);
 
-  & {
-    background-color: $color-ci-white;
-  }
+  background-color: $color-ci-night;
+  color: $color-ci-eggshell;
 
   a:not(.btn) {
-    @include typography-links-invisible;
+    @include typography-link-invisible;
   }
 
   > .container,
@@ -31,6 +30,8 @@
     flex-direction: row;
     height: $header-nav-height;
     justify-content: space-between;
+    padding-bottom: 0;
+    padding-top: 0;
   }
 
   .cl-nav-side-burger {
@@ -38,8 +39,9 @@
   }
 
   .cl-path {
-    @extend %p-tiny;
+    @extend %cl-p-label;
 
+    color: $color-ci-eggshell;
     margin: 0;
     padding: 0 $spacing-small;
 
@@ -66,9 +68,10 @@
     display: flex;
 
     span {
-      @extend %p-tiny;
+      @extend %cl-p-label;
 
       margin-right: $spacing-tiny;
+      text-transform: uppercase;
     }
 
     i {
@@ -82,19 +85,6 @@
   }
 }
 
-.cl-nav-top-large {
-  // cl-nav-top variant that as slightly bigger
-  > .container > .row > .col-12,
-  > .container-fluid > .row > .col-12 {
-    height: 4rem;
-  }
-
-  .cl-asset-logo {
-    height: 1.5em;
-    width: 7.5em;
-  }
-}
-
 // -----------------------------------------------------------------------------
 // add & customize bootstrap navbar
 // -----------------------------------------------------------------------------
@@ -114,10 +104,6 @@
     margin-right: $spacing-medium;
   }
 
-  .dropdown-menu {
-    box-shadow: $color-shadow-3d;
-  }
-
   .cl-nav-side-burger {
     display: none;
   }
@@ -130,7 +116,7 @@
 @mixin navbar-responsive {
   .cl-nav-drawer {
     // open drawer if checked
-    background-color: $color-ci-haze;
+    background-color: $color-ci-eggshell;
     height: 100vh;
     left: 0;
     overflow: hidden auto;
@@ -142,7 +128,7 @@
 
   .cl-nav-checkbox:checked ~ & {
     .cl-nav-backdrop {
-      background-color: $sidenav-backdrop;
+      background-color: $color-ci-backdrop;
       inset: 0;
       position: fixed;
       z-index: $sidenav-z-index - 1;
@@ -185,7 +171,7 @@
 $navbar-item-spacing: $spacing-medium;
 
 .cl-navbar {
-  @extend %p-nav;
+  @extend %cl-p-nav;
 
   min-height: $header-nav-height;
   padding-bottom: 0;
@@ -212,14 +198,23 @@ $navbar-item-spacing: $spacing-medium;
     line-height: 1;
     margin: 0;
     padding: 0.5em 0;
+
+    .cl-asset-logo,
+    .cl-asset-logo-eggshell {
+      height: 2.5 * 1em;
+      width: 2.5 * 2.95em;
+    }
   }
 
   .nav-link {
-    @include typography-links($color-text, $color-ci-night, 0);
+    @include typography-link($color-text, $color-ci-night, 0);
 
-    & {
-      display: block;
-      padding: math.div($navbar-item-spacing, 2) 0;
+    display: block;
+    font-weight: 500;
+    padding: math.div($navbar-item-spacing, 2) 0;
+
+    &.show {
+      color: $color-ci-eggshell;
     }
   }
 
@@ -233,16 +228,25 @@ $navbar-item-spacing: $spacing-medium;
   }
 
   .dropdown-menu {
-    background-color: $color-ci-haze;
+    background-color: $color-ci-night;
     border: 0;
-    border-radius: 0;
+    border-radius: $brand-border-radius;
+    color: $color-ci-eggshell;
+    left: -1em;
+    top: 2.125em;
   }
 
   .dropdown-item {
-    @extend %p-nav;
+    @extend %cl-p-nav;
 
+    font-weight: 500;
     padding: math.div($navbar-item-spacing, 2) $spacing-small;
 
+    &:hover {
+      background-color: transparent;
+      color: $color-ci-red !important;
+    }
+
     &.active {
       background-color: transparent;
       color: $color-ci-red;
@@ -250,9 +254,9 @@ $navbar-item-spacing: $spacing-medium;
   }
 
   .dropdown-divider {
-    background-color: $color-ci-smoke;
+    background-color: $color-ci-clay;
     border: 0;
-    height: px(2);
+    height: px(1);
     opacity: 1;
   }
 

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

@@ -1,7 +1,10 @@
 .cl-section-form {
-  padding-top: 0;
+  border-bottom: $brand-line-width solid $color-ci-clay;
+  border-top: $brand-line-width solid $color-ci-clay;
+  padding-top: $spacing-tiny;
 
-  @include media-breakpoint-up(sm) {
-    padding-top: $spacing-small;
+  &,
+  + .cl-section {
+    margin-top: 0 !important; // do not merge form-sections with other sections
   }
 }

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

@@ -1,24 +1,22 @@
 .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;
-  }
+  @include typography-link(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;
+  // $height: 80;
 
   display: flex;
-  min-height: px($height);
-  padding-bottom: 0;
-  padding-top: 0;
+  // min-height: px($height);
+  padding-bottom: $spacing-medium;
+  padding-top: $spacing-medium;
 
   .row > [class^='col-'] {
     margin-bottom: 0;
@@ -27,25 +25,25 @@
     padding-top: $spacing-tiny;
   }
 
-  .container,
-  .container-fluid,
-  .row {
-    min-height: px($height);
-  }
+  // .container,
+  // .container-fluid,
+  // .row {
+  //   min-height: px($height);
+  // }
 
   .row {
     align-content: center;
   }
 
   @include media-breakpoint-down(sm) {
-    $height: 54;
+    // $height: 54;
 
-    min-height: px($height);
+    // min-height: px($height);
 
-    .container,
-    .container-fluid,
-    .row {
-      min-height: px($height);
-    }
+    // .container,
+    // .container-fluid,
+    // .row {
+    //   min-height: px($height);
+    // }
   }
 }

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

@@ -12,16 +12,17 @@ $table-lineheight: 1.2em;
 
 %cl-table-data {
   border: 0;
-  border-collapse: separate;
   border-spacing: 0;
   position: relative;
   width: 100%;
 
   th {
-    @extend %p-tiny;
+    @extend %cl-p-tag;
 
+    font-size: px(14);
     padding-bottom: 0.6rem;
     padding-top: 0.6rem;
+    text-transform: uppercase;
 
     i {
       width: inherit; // usually sort-icons
@@ -42,50 +43,27 @@ $table-lineheight: 1.2em;
     }
   }
 
-  tbody {
+  tbody,
+  tfoot {
     line-height: $table-lineheight;
 
     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;
-          }
-        }
-      }
+      border-top: $brand-line-width solid var(--cl-color-line);
 
       &.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
+          border-color: $color-disabled; // 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;
-        }
-      }
+  tbody tr {
+    &:last-child {
+      border-bottom: $brand-line-width solid var(--cl-color-line);
     }
   }
 
@@ -100,35 +78,6 @@ $table-lineheight: 1.2em;
     }
   }
 
-  // --- 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;
-  }
-
-  // --- badges/bubbles in tables ----------------------------------------------
-
-  [class^='cl-badge'],
-  [class*=' cl-badge'],
-  [class^='cl-hashtag'],
-  [class*=' cl-hashtag'],
-  [class^='cl-plan'],
-  [class*=' cl-plan'],
-  [class^='cl-role'],
-  [class*=' cl-role'] {
-    max-height: 1.375em; // ~17px
-    min-height: 0;
-    padding-bottom: 2px;
-    padding-top: 3px;
-    position: relative;
-    top: -1px;
-  }
-
   // --- responsive phone tables -----------------------------------------------
 
   @include media-breakpoint-down($table-responsive) {
@@ -162,19 +111,19 @@ $table-lineheight: 1.2em;
   .cl-table-wrap-col-#{$col} {
     // deprecated
     td:nth-child(#{$col}) {
-      word-wrap: anywhere;
+      overflow-wrap: anywhere;
     }
   }
 
   .cl-table-col-#{$col}-wrap {
     td:nth-child(#{$col}) {
-      word-wrap: anywhere;
+      overflow-wrap: anywhere;
     }
   }
 
   .cl-table-col-#{$col}-nowrap {
     td:nth-child(#{$col}) {
-      word-wrap: nowrap;
+      overflow-wrap: nowrap;
     }
   }
 
@@ -190,16 +139,16 @@ $table-lineheight: 1.2em;
   tbody {
     tr {
       &:nth-child(odd) td {
-        background-color: $color-ci-white;
+        background-color: $color-ci-eggshell;
       }
     }
   }
 
   tr:nth-child(odd) .cl-td-links {
-    background-color: $color-ci-white;
+    background-color: $color-ci-eggshell;
   }
 
   tr:nth-child(even) .cl-td-links {
-    background-color: $color-ci-haze;
+    background-color: var(--cl-color-highlight);
   }
 }

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

@@ -1,6 +1,6 @@
 .cl-table-data {
   .cl-td-actions {
-    word-wrap: unset;
+    overflow-wrap: unset;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {

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

@@ -1,8 +1,6 @@
 .cl-table-data {
   .cl-th-audit {
-    @extend %p-tiny;
-
-    font-weight: 700;
+    @extend %cl-p-label;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {
@@ -13,9 +11,9 @@
 
   .cl-td-audit {
     color: $color-ci-silver;
+    overflow-wrap: unset;
     text-align: center;
     width: 0.9em;
-    word-wrap: unset;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {

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

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

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

@@ -1,8 +1,8 @@
 .cl-table-data {
   .cl-th-checkbox {
-    @extend %p-tiny;
+    @extend %cl-p-label;
 
-    font-weight: 700;
+    text-transform: uppercase;
   }
 
   .cl-td-checkbox {

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

@@ -1,7 +1,7 @@
 .cl-table-data {
   .cl-td-code {
     @include typography-font(
-      $typography-font-list-monospace,
+      $typography-monospace-font-list,
       400,
       px(15),
       $table-lineheight * 1.066666667,

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

@@ -2,8 +2,8 @@
   @include media-breakpoint-up($table-responsive) {
     .cl-th-currency,
     .cl-td-currency {
+      overflow-wrap: unset;
       text-align: end;
-      word-wrap: unset;
     }
   }
 }

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

@@ -1,7 +1,7 @@
 .cl-table-data {
   .cl-td-date {
+    overflow-wrap: break-word;
     width: 9.5em;
-    word-wrap: break-word;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {

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

@@ -2,7 +2,7 @@
   .cl-td-id,
   .cl-td-uuid {
     @include typography-font(
-      $typography-font-list-monospace,
+      $typography-monospace-font-list,
       400,
       px(15),
       $table-lineheight * 1.066666667,
@@ -10,8 +10,8 @@
       80%
     );
 
+    overflow-wrap: unset;
     width: 2.5em;
-    word-wrap: unset;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {

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

@@ -1,9 +1,8 @@
 .cl-table-data {
   .cl-th-links {
-    @extend %p-tiny;
+    @extend %cl-p-label;
 
-    background-color: $color-ci-white;
-    font-weight: 700;
+    background-color: transparent;
     position: sticky;
     right: 0;
     text-align: end;
@@ -18,10 +17,10 @@
   .cl-td-links {
     @extend %cl-font-condensed;
 
+    overflow-wrap: unset;
     position: sticky;
     right: 0;
     white-space: nowrap;
-    word-wrap: unset;
 
     a:not(.cl-a-primary) {
       @extend %cl-a-text;
@@ -48,11 +47,11 @@
     }
   }
 
-  tr:nth-child(even) .cl-td-links {
-    background-color: $color-ci-white;
-  }
-
-  tr:nth-child(odd) .cl-td-links {
-    background-color: $color-ci-haze;
-  }
+  // tr:nth-child(even) .cl-td-links {
+  //   background-color: transparent;
+  // }
+  //
+  // tr:nth-child(odd) .cl-td-links {
+  //   background-color: var(--cl-color-highlight);
+  // }
 }

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

@@ -2,11 +2,11 @@
 
 %cl-table-data-cel {
   td {
-    @include typography-font($typography-font-list-sans, 400, px(16), $table-lineheight);
+    @include typography-font($typography-sans-font-list, 400, px(16), $table-lineheight);
 
+    overflow-wrap: anywhere;
     padding-bottom: $table-padding-vertical;
     padding-top: $table-padding-vertical;
-    word-wrap: anywhere;
 
     .badge {
       font-size: px(14);
@@ -20,6 +20,6 @@
   }
 
   td:not(:last-child) {
-    border-right: 2px dotted $color-ci-smoke;
+    border-right: $brand-line-width dotted var(--cl-color-line);
   }
 }

package/src/components/text/ClCopy/style.scss

@@ -3,30 +3,11 @@
 /// @access public
 ////
 
-@mixin cl-fontawesome-postfix($codepoint) {
-  margin-right: 1em;
-
-  &::after {
-    @include cl-fontawesome($codepoint);
-
-    & {
-      font-weight: 400;
-      left: 0.2em;
-      opacity: 0.5;
-      position: relative;
-      top: 0;
-      width: 0;
-    }
-  }
-}
-
 .cl-copy {
   @include cl-fontawesome-postfix('\f0c5');
 
-  & {
-    cursor: pointer;
-    top: 0.125em;
-  }
+  cursor: pointer;
+  top: 0.125em;
 
   &::after {
     font-size: 0.75em;
@@ -35,6 +16,8 @@
 
 .cl-copy-text {
   @extend %cl-a-text;
+
+  text-decoration: underline;
 }
 
 .cl-copy-transparent {

package/src/components/text/ClHashtag/style.scss

@@ -5,32 +5,14 @@
 
 // This file defines custom hashtag styles.
 
-[class^='cl-hashtag'],
-[class*=' cl-hashtag'] {
-  &:not(.cl-hashtag-derived) {
-    @extend %cl-badge;
+.cl-hashtag {
+  @extend %cl-badge;
+  @include cl-badge-small;
 
-    &::before {
-      @include cl-fontawesome('\f292');
+  &::before {
+    @include cl-fontawesome('\f292');
 
-      margin-right: 0.2em;
-      top: 0.015em;
-    }
-  }
-}
-
-a[class^='cl-hashtag'],
-a[class*=' cl-hashtag'] {
-  @include typography-links($badge-color-fg, rgba($badge-color-fg, $color-hover-opacity), 0);
-
-  display: inline-block !important;
-}
-
-.cl-hashtag-derived {
-  @extend %cl-badge-derived;
-
-  + [class^='cl-hashtag'],
-  + [class*=' cl-hashtag'] {
-    margin-left: -1.66em;
+    margin-right: 0.2em;
+    top: 0.015em;
   }
 }