@castlabs/ui 4.23.0 → 4.24.0

package/package.json

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

@@ -8,6 +8,7 @@
 $dropdown-border: 0.125rem; // a 2px border to add so there is space for the outline
 $dropdown-color-chevron: rgba($color-ci-white, 0.5);
 $dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
+$dropdown-line-height: 1.25em;
 
 .cl-dropdown {
   #{'--element-fg-color'}: $color-text;
@@ -30,7 +31,6 @@ $dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
       border: $dropdown-border solid var(--element-bg-color); // border need so that outline is not behind ::after
       color: var(--element-fg-color);
       font-size: px(18);
-      line-height: 1.25em;
       list-style: none;
       margin-left: 0;
       margin-right: 0;
@@ -57,6 +57,13 @@ $dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
         width: $spacing-small * 2;
       }
     }
+
+    > [class^='cl-badge'] {
+      position: absolute;
+      right: $spacing-small;
+      top: $spacing-tiny + $spacing-micro;
+      z-index: 1;
+    }
   }
 
   > summary::marker,
@@ -81,7 +88,7 @@ $dropdown-color-chevron-bright: rgba($color-ci-silver, 0.5);
     font-size: px(14);
     font-weight: 400;
     letter-spacing: 0;
-    margin-top: $spacing-tiny;
+    margin-top: px(5);
     opacity: $color-hover-opacity;
   }
 
@@ -175,9 +182,10 @@ div.cl-dropdown summary {
 
   & {
     display: block;
+    line-height: $dropdown-line-height;
     margin-left: 0;
     margin-right: 0;
-    padding: $spacing-small;
+    padding: $spacing-tiny + $spacing-micro $spacing-small;
     position: relative;
     width: 100%;
   }
@@ -185,6 +193,20 @@ div.cl-dropdown summary {
   &:hover {
     background-color: $color-ci-white;
   }
+
+  .cl-subentry {
+    font-size: px(14);
+    font-weight: 400;
+    letter-spacing: 0;
+    margin-top: px(5);
+    opacity: $color-hover-opacity;
+  }
+
+  > [class^='cl-badge'] {
+    position: absolute;
+    right: $spacing-small;
+    top: $spacing-tiny + $spacing-micro;
+  }
 }
 
 .cl-dropdown-primary {

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

@@ -29,9 +29,6 @@
     color: $color-ci-silver;
   }
 
-  fieldset[disabled] input,
-  fieldset[disabled] textarea,
-  fieldset[disabled] select,
   textarea[disabled],
   input[disabled],
   select[disabled] {

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

@@ -12,5 +12,57 @@
     legend {
       @extend %p-form-label;
     }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.5;
+
+      // reset disabled element properties so fieldset-opacity does not disable twice
+      [type='text'],
+      [type='password'],
+      [type='url'],
+      [type='date'],
+      [type='email'],
+      [type='number'],
+      [type='date'],
+      [type='time'],
+      [type='datetime-local'],
+      textarea,
+      select {
+        @extend %form-field-box;
+        @extend %form-field-typography;
+
+        cursor: not-allowed;
+      }
+
+      .form-label,
+      .valid-feedback,
+      .form-check .form-check-input:disabled ~ .form-check-label {
+        color: $color-text;
+      }
+
+      [type='checkbox'] {
+        border-color: $color-ci-dim !important;
+
+        &:checked {
+          background-color: $color-ci-dim;
+        }
+
+        &:indeterminate {
+          box-shadow:
+            0 0 0 0.15em $color-white-100 inset,
+            0 0 0 1em $color-ci-dim inset !important;
+        }
+      }
+
+      [type='radio'] {
+        border-color: $color-ci-dim !important;
+
+        &:checked {
+          background-color: $color-ci-dim;
+          border-color: $color-ci-dim;
+        }
+      }
+    }
   }
 }

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

@@ -343,7 +343,8 @@ $sidenav-color-background: $color-ci-haze;
     & {
       display: inline-block;
       line-height: 1.5em;
-      padding: $spacing-tiny 0 $spacing-tiny $spacing-small;
+      padding: $spacing-tiny $spacing-small;
+      position: relative;
       width: 100%;
     }
 
@@ -351,16 +352,18 @@ $sidenav-color-background: $color-ci-haze;
       @extend %p-small;
 
       color: $color-ci-dim;
-      margin-top: 0;
+      line-height: 1.4em;
+      margin-top: px(3);
 
       + .cl-nav-item-info {
-        margin-top: $spacing-tiny;
+        margin-top: $spacing-micro;
       }
     }
 
-    .badge {
-      position: relative;
-      top: -1px;
+    > [class^='cl-badge'] {
+      position: absolute;
+      right: $spacing-small;
+      top: $spacing-tiny + $spacing-micro;
     }
 
     &:hover:not(.active) {
@@ -374,7 +377,7 @@ $sidenav-color-background: $color-ci-haze;
         background-color: $color-ci-white;
         color: $color-ci-red;
         display: inline-block;
-        padding: $spacing-tiny 0 $spacing-tiny $spacing-small;
+        padding: $spacing-tiny $spacing-small;
         position: relative;
       }