@castlabs/ui 7.21.2 → 7.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@castlabs/ui",
-  "version": "7.21.2",
+  "version": "7.22.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/ClButton/style.scss

@@ -85,7 +85,7 @@ a.btn {
   font-weight: 500;
   line-height: 1;
   margin-left: $spacing-tiny;
-  min-width: 0;
+  min-width: $spacing-small;
   padding: 0;
 
   &:not(:hover, [class*='cl-color-']) {

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

@@ -13,6 +13,24 @@
       margin-left: $spacing-tiny;
     }
 
+    > [type='range'] {
+      border-radius: $brand-border-radius !important;
+      margin-bottom: $spacing-tiny;
+      margin-top: $spacing-tiny;
+
+      + [type='range'] {
+        margin-left: $spacing-tiny;
+      }
+
+      &:has(+ [type='range']) {
+        margin-right: $spacing-tiny;
+      }
+    }
+
+    > :not(.cl-btn-quickaction) + .cl-btn-quickaction {
+      margin-left: $spacing-small;
+    }
+
     > .btn {
       flex-shrink: 0;
     }
@@ -70,60 +88,62 @@
       }
     }
 
-    @include media-breakpoint-down(sm) {
-      flex-direction: column;
-
-      > * {
-        width: 100% !important;
-
-        &:not(:first-child) {
-          margin-top: $spacing-tiny;
-        }
-
-        &.btn {
-          font-size: 0.75em;
-          margin-left: 0 !important;
+    &:not(.cl-no-wrap) {
+      @include media-breakpoint-up(sm) {
+        > .form-control,
+        > .input-group-text {
+          &:has(+ .form-control),
+          &:has(+ p + .form-control),
+          &:has(+ p + p + .form-control),
+          &:has(+ .input-group-text) {
+            border-bottom-right-radius: 0;
+            border-right-color: $color-ci-clay;
+            border-top-right-radius: 0;
+          }
+
+          + .input-group-text,
+          + p + .form-control,
+          + p + p + .form-control,
+          + .form-control {
+            border-bottom-left-radius: 0;
+            border-left-width: 0; // trick to share one ][ border between 2 inputs
+            border-top-left-radius: 0;
+          }
+
+          &:has(+ .form-control.invalid),
+          &:has(+ .form-control[invalid]),
+          &:has(+ p + .form-control.invalid),
+          &:has(+ p + .form-control[invalid]),
+          &:has(+ p + p + .form-control.invalid),
+          &:has(+ p + p + .form-control[invalid]) {
+            border-right-color: $color-error;
+          }
+
+          &:has(+ .form-control:focus),
+          &:has(+ .form-control:focus-visible),
+          &:has(+ p + .form-control:focus),
+          &:has(+ p + .form-control:focus-visible),
+          &:has(+ p + p + .form-control:focus),
+          &:has(+ p + p + .form-control:focus-visible) {
+            border-right-color: $color-focus !important;
+          }
         }
       }
-    }
 
-    @include media-breakpoint-up(sm) {
-      > .form-control,
-      > .input-group-text {
-        &:has(+ .form-control),
-        &:has(+ p + .form-control),
-        &:has(+ p + p + .form-control),
-        &:has(+ .input-group-text) {
-          border-bottom-right-radius: 0;
-          border-right-color: $color-ci-clay;
-          border-top-right-radius: 0;
-        }
+      @include media-breakpoint-down(sm) {
+        flex-direction: column;
 
-        + .input-group-text,
-        + p + .form-control,
-        + p + p + .form-control,
-        + .form-control {
-          border-bottom-left-radius: 0;
-          border-left-width: 0; // trick to share one ][ border between 2 inputs
-          border-top-left-radius: 0;
-        }
+        > * {
+          width: 100% !important;
 
-        &:has(+ .form-control.invalid),
-        &:has(+ .form-control[invalid]),
-        &:has(+ p + .form-control.invalid),
-        &:has(+ p + .form-control[invalid]),
-        &:has(+ p + p + .form-control.invalid),
-        &:has(+ p + p + .form-control[invalid]) {
-          border-right-color: $color-error;
-        }
+          &:not(:first-child) {
+            margin-top: $spacing-tiny;
+          }
 
-        &:has(+ .form-control:focus),
-        &:has(+ .form-control:focus-visible),
-        &:has(+ p + .form-control:focus),
-        &:has(+ p + .form-control:focus-visible),
-        &:has(+ p + p + .form-control:focus),
-        &:has(+ p + p + .form-control:focus-visible) {
-          border-right-color: $color-focus !important;
+          &.btn {
+            font-size: 0.75em;
+            margin-left: 0 !important;
+          }
         }
       }
     }

package/src/components/widget/ClPage/style.scss

@@ -39,6 +39,7 @@
 
 .cl-section-fullscreen {
   height: 100%;
+  padding-bottom: 0;
 
   .cl-table-scroll,
   > .container,
@@ -52,6 +53,10 @@
     padding-top: 0 !important;
   }
 
+  .cl-table-scroll {
+    margin-bottom: $spacing-small !important;
+  }
+
   table {
     display: block;
     max-height: 100%;
@@ -66,3 +71,25 @@
     z-index: 1;
   }
 }
+
+.cl-fullscreen-scroller {
+  max-height: 100%;
+  overflow: scroll;
+
+  .cl-table-scroll {
+    overflow: unset;
+  }
+
+  table {
+    display: table !important;
+  }
+
+  .cl-table-data .cl-td-links {
+    padding-left: $spacing-small;
+  }
+
+  .cl-resizer {
+    background-color: var(--cl-color-background) !important;
+    margin-left: calc(-0.5rem - 2px) !important;
+  }
+}

package/src/styles/layout/meta.scss

@@ -1,3 +1,3 @@
 :root {
-  #{'--cl-version'}: 'v7.21.2';
+  #{'--cl-version'}: 'v7.22.0';
 }

package/src/styles/themes/dark.scss

@@ -9,12 +9,14 @@ $cl-url-postfix: '' !default;
   .cl-color-haze,
   .cl-section-alternate,
   .card.cl-color-haze {
-    #{'--cl-color-icon'}: $color-ci-steel;
     #{'--cl-color-code'}: $color-ci-sky;
+    #{'--cl-color-focus'}: $color-ci-steel;
+    #{'--cl-color-icon'}: $color-ci-steel;
     #{'--cl-color-input-background'}: $color-ci-night;
     #{'--cl-color-input-border'}: $color-ci-clay;
-    #{'--cl-color-text'}: $color-ci-eggshell;
+    #{'--cl-color-line'}: $color-ci-steel;
     #{'--cl-color-link'}: $color-ci-eggshell;
+    #{'--cl-color-text'}: $color-ci-eggshell;
     #{'--cl-color-text-inverted'}: $color-ci-night;
 
     textarea[disabled],