@castlabs/ui 5.0.0 → 5.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "5.0.0",
+  "version": "5.1.1",
   "repository": "https://github.com/castlabs/ui-styleguide",
   "private": false,
   "description": "A vanilla HTML/CS/JS & Vue.js component library for castLabs.",

package/src/components/ClDropdown/style.scss

@@ -38,7 +38,6 @@ $dropdown-line-height: 1.25em;
       padding: $spacing-small - $dropdown-border $spacing-small - $dropdown-border;
       padding-right: $spacing-small * 3; // for chevron
       position: relative;
-      white-space: preserve;
     }
 
     &::after {
@@ -59,6 +58,11 @@ $dropdown-line-height: 1.25em;
       }
     }
 
+    > span,
+    > div {
+      white-space: preserve-breaks;
+    }
+
     > [class^='cl-badge'] {
       position: absolute;
       right: $spacing-small;
@@ -188,7 +192,6 @@ div.cl-dropdown summary {
     margin-right: 0;
     padding: $spacing-tiny + $spacing-micro $spacing-small;
     position: relative;
-    white-space: preserve;
     width: 100%;
   }
 
@@ -204,6 +207,11 @@ div.cl-dropdown summary {
     opacity: $color-hover-opacity;
   }
 
+  > span,
+  > div {
+    white-space: preserve-breaks;
+  }
+
   > [class^='cl-badge'] {
     position: absolute;
     right: $spacing-small;

package/src/components/ClHighlight/style.scss

@@ -0,0 +1,21 @@
+////
+/// @group components
+/// @access public
+////
+
+// This file defines .cl-highlight modifiers for various components
+
+$highlight-background: $color-ci-sand;
+
+.cl-highlight {
+  background-color: $highlight-background;
+}
+
+.card-body,
+.card-footer,
+td,
+tr {
+  &.cl-highlight {
+    background-color: $highlight-background !important; // sass-lint:disable-line no-important
+  }
+}

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

@@ -8,6 +8,7 @@ $table-padding-vertical: 0.5rem;
 $table-padding-horizontal: 0.5rem;
 $table-icon-size: 2rem;
 $table-responsive: sm;
+$table-lineheight: 1.2em;
 
 %cl-table-data {
   border: 0;
@@ -42,6 +43,8 @@ $table-responsive: sm;
   }
 
   tbody {
+    line-height: $table-lineheight;
+
     tr {
       &:nth-child(odd) {
         background-color: $color-ci-haze;
@@ -108,6 +111,24 @@ $table-responsive: sm;
     @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;
+  }
+
   // --- wrapping long columns -------------------------------------------------
 
   @for $col from 1 through 16 {
@@ -119,6 +140,7 @@ $table-responsive: sm;
   }
 
   // --- responsive phone tables -----------------------------------------------
+
   @include media-breakpoint-down($table-responsive) {
     &:not(.cl-table-nonresponsive) {
       td,

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

@@ -1,8 +1,13 @@
 .cl-table-data {
   .cl-td-code {
-    @include typography-font($typography-font-list-monospace, 400, px(15), 1.25, 0.025em, 80%);
-
-    padding-top: 0.6rem;
+    @include typography-font(
+      $typography-font-list-monospace,
+      400,
+      px(15),
+      $table-lineheight * 1.066666667,
+      0.025em,
+      80%
+    );
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {

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

@@ -1,9 +1,15 @@
 .cl-table-data {
   .cl-td-id,
   .cl-td-uuid {
-    @include typography-font($typography-font-list-monospace, 400, px(15), 1, 0.025em, 80%);
+    @include typography-font(
+      $typography-font-list-monospace,
+      400,
+      px(15),
+      $table-lineheight * 1.066666667,
+      0.025em,
+      80%
+    );
 
-    padding-top: 0.6rem;
     width: 2.5em;
     word-wrap: unset;
 

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

@@ -2,7 +2,7 @@
 
 %cl-table-data-cel {
   td {
-    @include typography-font($typography-font-list-sans, 400, px(16), 1.2em);
+    @include typography-font($typography-font-list-sans, 400, px(16), $table-lineheight);
 
     padding-bottom: $table-padding-vertical;
     padding-top: $table-padding-vertical;

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

@@ -1,5 +1,5 @@
 ////
-/// @group layout
+/// @group components
 /// @access public
 ////
 

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

@@ -1,5 +1,5 @@
 ////
-/// @group layout
+/// @group components
 /// @access public
 ////
 

package/src/styles/ui.scss

@@ -29,6 +29,7 @@ $castlabs-ui-asset-prefix: '..' !default;
 @import '../components/ClDropdown/style';
 @import '../components/ClDropzone/style';
 @import '../components/ClFooter/style';
+@import '../components/ClHighlight/style';
 @import '../components/ClIcon/style';
 @import '../components/ClIconotron/style';
 @import '../components/ClList/style';