@castlabs/ui 5.4.4 → 5.5.0

package/package.json

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

package/src/components/ClFooter/style.scss

@@ -15,7 +15,8 @@
   color: $footer-text-color;
   margin-top: 0;
 
-  .container {
+  .container,
+  .container-fluid {
     @extend %container-spacing-medium;
 
     padding-bottom: 0;

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

@@ -9,11 +9,13 @@
   // --- basic form layout -----------------------------------------------------
 
   // &.container,
-  .container {
+  .container,
+  .container-fluid {
     @extend %container-spacing-small;
   }
 
-  .container + * {
+  .container + *,
+  .container-fluid + * {
     margin-top: 0; // container already add bottom spacing
   }
 

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

@@ -19,11 +19,13 @@
     @include typography-links-invisible;
   }
 
-  > .container {
+  > .container,
+  > .container-fluid {
     padding: 0;
   }
 
-  > .container > .row > .col-12 {
+  > .container > .row > .col-12,
+  > .container-fluid > .row > .col-12 {
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -82,7 +84,8 @@
 
 .cl-nav-top-large {
   // cl-nav-top variant that as slightly bigger
-  > .container > .row > .col-12 {
+  > .container > .row > .col-12,
+  > .container-fluid > .row > .col-12 {
     height: 4rem;
   }
 

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

@@ -28,6 +28,7 @@
   }
 
   .container,
+  .container-fluid,
   .row {
     min-height: px($height);
   }
@@ -42,6 +43,7 @@
     min-height: px($height);
 
     .container,
+    .container-fluid,
     .row {
       min-height: px($height);
     }

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

@@ -14,6 +14,17 @@
   overflow: auto hidden;
 }
 
+.cl-table-nowrap {
+  text-wrap: nowrap;
+  width: fit-content;
+
+  th,
+  td {
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+
 .cl-table-data {
   @extend %cl-table-data;
 }

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

@@ -129,16 +129,6 @@ $table-lineheight: 1.2em;
     top: -1px;
   }
 
-  // --- 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) {
@@ -166,6 +156,36 @@ $table-lineheight: 1.2em;
   }
 }
 
+// --- column modifiers --------------------------------------------------------
+
+@for $col from 1 through 32 {
+  .cl-table-wrap-col-#{$col} { // deprecated
+    td:nth-child(#{$col}) {
+      word-wrap: anywhere;
+    }
+  }
+
+  .cl-table-col-#{$col}-wrap {
+    td:nth-child(#{$col}) {
+      word-wrap: anywhere;
+    }
+  }
+
+  .cl-table-col-#{$col}-nowrap {
+    td:nth-child(#{$col}) {
+      word-wrap: nowrap;
+    }
+  }
+
+  .cl-table-col-#{$col}-hide {
+    th:nth-child(#{$col}),
+    td:nth-child(#{$col}) {
+      display: none;
+    }
+  }
+}
+
+
 %cl-table-data-light {
   tbody {
     tr {
@@ -174,4 +194,12 @@ $table-lineheight: 1.2em;
       }
     }
   }
+
+  tr:nth-child(odd) .cl-td-links {
+    background-color: $color-ci-white;
+  }
+
+  tr:nth-child(even) .cl-td-links {
+    background-color: $color-ci-haze;
+  }
 }

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

@@ -2,7 +2,11 @@
   .cl-th-links {
     @extend %p-tiny;
 
+    background-color: $color-ci-white;
     font-weight: 700;
+    position: sticky;
+    text-align: end;
+    right: 0;
 
     @include media-breakpoint-down($table-responsive) {
       table:not(.cl-table-nonresponsive) & {
@@ -14,6 +18,8 @@
   .cl-td-links {
     @extend %cl-font-condensed;
 
+    position: sticky;
+    right: 0;
     white-space: nowrap;
     word-wrap: unset;
 
@@ -41,4 +47,12 @@
       }
     }
   }
+
+  tr:nth-child(even) .cl-td-links {
+    background-color: $color-ci-white;
+  }
+
+  tr:nth-child(odd) .cl-td-links {
+    background-color: $color-ci-haze;
+  }
 }

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

@@ -23,6 +23,10 @@
       top: -0.1em;
     }
   }
+
+  .fa-cog {
+    cursor: pointer;
+  }
 }
 
 .cl-table-data {

package/src/styles/layout/grid.scss

@@ -10,12 +10,14 @@
 
 // bootstrap uses a narrow container for sm, but we prefer full-width instead
 @include media-breakpoint-only(sm) {
-  .container {
+  .container,
+  .container-fluid {
     max-width: inherit;
   }
 }
 
-.container .container {
+.container .containe,
+.container-fluid .container {
   // nested containers should not limit themselves
   margin-left: 0;
   margin-right: 0;
@@ -57,7 +59,8 @@
 }
 
 // do pull out nested containers or their cel padding will indent them
-.container .container > .row {
+.container .container > .row,
+.container-fluid .container > .row {
   margin-left: -$spacing-tiny;
   margin-right: -$spacing-tiny;
 }