@carbon/styles 1.17.0 → 1.18.0

package/scss/components/pagination/_pagination.scss

@@ -134,9 +134,7 @@
     border-right: 1px solid $border-subtle;
   }
 
-  .#{$prefix}--pagination
-    .#{$prefix}--select__page-number
-    .#{$prefix}--select-input {
+  .#{$prefix}--pagination__right {
     border-left: 1px solid $border-subtle;
   }
 
@@ -166,6 +164,16 @@
     margin-left: rem(1px);
   }
 
+  .#{$prefix}--pagination__right
+    .#{$prefix}--pagination__text.#{$prefix}--pagination__page-text {
+    margin-right: rem(1px);
+    margin-left: 1rem;
+  }
+
+  .#{$prefix}--pagination__right .#{$prefix}--pagination__text:empty {
+    margin: 0;
+  }
+
   .#{$prefix}--pagination__left {
     padding: 0 $spacing-05 0 0;
 

package/scss/components/radio-button/_radio-button.scss

@@ -135,6 +135,24 @@ $radio-border-width: 1px !default;
     }
   }
 
+  // readonly
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button
+    + .#{$prefix}--radio-button__label
+    .#{$prefix}--radio-button__appearance {
+    border-color: $icon-disabled;
+  }
+
+  .#{$prefix}--radio-button-group--readonly .#{$prefix}--radio-button__label {
+    cursor: default;
+  }
+
+  .#{$prefix}--radio-button-group--readonly
+    .#{$prefix}--radio-button__label-text {
+    cursor: text;
+    user-select: text;
+  }
+
   // Focus
 
   .#{$prefix}--radio-button:focus

package/scss/components/select/_select.scss

@@ -252,6 +252,16 @@
     }
   }
 
+  // readonly
+  .#{$prefix}--select--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  .#{$prefix}--select--readonly .#{$prefix}--select__arrow {
+    fill: $icon-disabled;
+  }
+
   //Skeleton State
   .#{$prefix}--select.#{$prefix}--skeleton {
     @include skeleton;

package/scss/components/slider/_slider.scss

@@ -200,6 +200,20 @@
     }
   }
 
+  // readonly state
+  .#{$prefix}--slider--readonly {
+    cursor: default;
+  }
+
+  .#{$prefix}--slider--readonly .#{$prefix}--slider__thumb {
+    width: 0;
+    height: 0;
+  }
+
+  .#{$prefix}--slider--readonly ~ .#{$prefix}--slider-text-input {
+    background-color: transparent;
+  }
+
   // Skeleton state
   .#{$prefix}--slider-container.#{$prefix}--skeleton
     .#{$prefix}--slider__range-label {

package/scss/components/tabs/_tabs.scss

@@ -307,6 +307,10 @@ $icon-tab-size: custom-property.get-var('icon-tab-size', rem(40px));
     //-----------------------------
     // Icon Item
     //-----------------------------
+    &.#{$prefix}--tabs__icon--default .#{$prefix}--tab--list,
+    &.#{$prefix}--tabs__icon--lg .#{$prefix}--tab--list {
+      overflow-x: visible;
+    }
 
     .#{$prefix}--tabs__nav-item--icon,
     &.#{$prefix}--tabs--contained .#{$prefix}--tabs__nav-item--icon {

package/scss/components/text-input/_text-input.scss

@@ -203,6 +203,17 @@
     }
   }
 
+  .#{$prefix}--text-input__counter-alert {
+    position: absolute;
+    overflow: hidden;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+    margin: -1px;
+    clip: rect(0, 0, 0, 0);
+  }
+
   //-----------------------------
   // Disabled
   //-----------------------------

package/scss/components/time-picker/_time-picker.scss

@@ -88,4 +88,20 @@
     height: rem(48px);
     max-height: rem(48px);
   }
+
+  // readonly
+  .#{$prefix}--time-picker--readonly .#{$prefix}--time-picker__input-field {
+    background-color: transparent;
+  }
+
+  .#{$prefix}--time-picker--readonly .#{$prefix}--select-input {
+    background-color: transparent;
+    cursor: default;
+  }
+
+  .#{$prefix}--time-picker--readonly
+    .#{$prefix}--select-input
+    + .#{$prefix}--select__arrow {
+    fill: $icon-disabled;
+  }
 }

package/scss/components/toggle/_toggle.scss

@@ -126,6 +126,10 @@
     visibility: visible;
   }
 
+  // ----------------------------------------
+  // disabled
+  // ----------------------------------------
+
   .#{$prefix}--toggle--disabled .#{$prefix}--toggle__appearance {
     cursor: not-allowed;
   }
@@ -147,6 +151,35 @@
     fill: button.$button-disabled;
   }
 
+  // ----------------------------------------
+  // readonly
+  // ----------------------------------------
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__appearance {
+    cursor: default;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__switch {
+    border: 1px solid $icon-disabled;
+    background-color: transparent;
+
+    &::before {
+      top: rem(2px);
+      left: rem(2px);
+      background-color: $text-primary;
+    }
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__check {
+    top: rem(5px);
+    right: rem(4px);
+    fill: $background;
+  }
+
+  .#{$prefix}--toggle--readonly .#{$prefix}--toggle__text {
+    cursor: text;
+    user-select: text;
+  }
+
   // HCM
 
   .#{$prefix}--toggle__switch,