@carbon/styles 1.17.0 → 1.18.0-rc.0

package/css/styles.css

@@ -5293,6 +5293,31 @@ fieldset[disabled] .cds--form__helper-text {
   background-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--checkbox-wrapper--readonly .cds--checkbox-label {
+  cursor: default;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox-label-text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox + .cds--checkbox-label::before {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::before {
+  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  background: transparent;
+}
+
+.cds--checkbox-wrapper--readonly .cds--checkbox:checked + .cds--checkbox-label::after {
+  border-color: var(--cds-text-primary, #161616);
+}
+
 .cds--checkbox-skeleton .cds--checkbox-label {
   cursor: default;
 }
@@ -5751,14 +5776,14 @@ fieldset[disabled] .cds--form__helper-text {
   overflow-x: auto;
 }
 
-.cds--snippet--multi .cds--snippet-container pre::after {
+.cds--snippet--multi.cds--snippet--has-right-overflow .cds--snippet-container pre::after {
   position: absolute;
   top: 0;
   right: 0;
   width: 1rem;
   height: 100%;
-  background-image: -webkit-gradient(linear, left top, right top, from(rgba(var(--cds-layer), 0)), to(var(--cds-layer)));
-  background-image: linear-gradient(to right, rgba(var(--cds-layer), 0), var(--cds-layer));
+  background-image: -webkit-gradient(linear, left top, right top, from(transparent), to(var(--cds-layer)));
+  background-image: linear-gradient(to right, transparent, var(--cds-layer));
   content: "";
 }
 
@@ -8027,6 +8052,46 @@ fieldset[disabled] .cds--form__helper-text {
   width: 100%;
 }
 
+.cds--contained-list--on-page.cds--contained-list--sm .cds--contained-list__header {
+  height: 2rem;
+}
+
+.cds--contained-list--sm .cds--contained-list-item__content,
+.cds--contained-list--sm .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 2rem;
+  padding: calc(0.5rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--md .cds--contained-list__header {
+  height: 2.5rem;
+}
+
+.cds--contained-list--md .cds--contained-list-item__content,
+.cds--contained-list--md .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 2.5rem;
+  padding: calc(0.75rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--lg .cds--contained-list__header {
+  height: 3rem;
+}
+
+.cds--contained-list--lg .cds--contained-list-item__content,
+.cds--contained-list--lg .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 3rem;
+  padding: calc(1rem - 0.125rem) 1rem;
+}
+
+.cds--contained-list--on-page.cds--contained-list--xl .cds--contained-list__header {
+  height: 4rem;
+}
+
+.cds--contained-list--xl .cds--contained-list-item__content,
+.cds--contained-list--xl .cds--contained-list-item--clickable .cds--contained-list-item__content {
+  min-height: 4rem;
+  padding: calc(1.5rem - 0.125rem) 1rem;
+}
+
 .cds--contained-list--on-page + .cds--contained-list--on-page {
   -webkit-margin-before: 1rem;
           margin-block-start: 1rem;
@@ -8037,7 +8102,6 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-heading-compact-01-font-weight, 600);
   line-height: var(--cds-heading-compact-01-line-height, 1.28572);
   letter-spacing: var(--cds-heading-compact-01-letter-spacing, 0.16px);
-  height: 3rem;
   border-bottom: 1px solid var(--cds-border-subtle);
   background-color: var(--cds-background, #ffffff);
   color: var(--cds-text-primary, #161616);
@@ -8108,7 +8172,6 @@ fieldset[disabled] .cds--form__helper-text {
   font-weight: var(--cds-body-01-font-weight, 400);
   line-height: var(--cds-body-01-line-height, 1.42857);
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
-  padding: calc(1rem - 0.125rem) 1rem;
   color: var(--cds-text-primary, #161616);
 }
 
@@ -11423,6 +11486,15 @@ th .cds--table-sort__flex {
   }
 }
 
+.cds--date-picker__input[readonly] {
+  background: transparent;
+  cursor: text;
+}
+
+.cds--date-picker__input[readonly] + .cds--date-picker__icon {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--dropdown__wrapper--inline {
   display: inline-grid;
   -webkit-box-align: center;
@@ -13266,6 +13338,15 @@ optgroup.cds--select-optgroup:disabled,
   cursor: not-allowed;
 }
 
+.cds--select--readonly .cds--select-input {
+  background-color: transparent;
+  cursor: default;
+}
+
+.cds--select--readonly .cds--select__arrow {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--select.cds--skeleton {
   position: relative;
   padding: 0;
@@ -16151,13 +16232,29 @@ optgroup.cds--select-optgroup:disabled,
   background: transparent;
 }
 
-.cds--number--readonly .cds--number__controls {
-  display: none;
+.cds--number--readonly .cds--number__control-btn {
+  color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  pointer-events: none;
+}
+.cds--number--readonly .cds--number__control-btn:hover {
+  background-color: transparent;
+  cursor: pointer;
+}
+.cds--number--readonly .cds--number__control-btn:hover::before, .cds--number--readonly .cds--number__control-btn:hover::after {
+  background-color: transparent;
 }
 
-.cds--number__readonly-icon {
-  position: absolute;
-  right: 1rem;
+.cds--number--readonly input[type=number]:focus ~ .cds--number__controls .cds--number__control-btn:hover {
+  outline: none;
+}
+
+.cds--number--readonly .cds--number__control-btn::before,
+.cds--number--readonly .cds--number__control-btn::after {
+  background: transparent;
+}
+
+.cds--number--readonly .cds--number__controls:hover .cds--number__rule-divider:not(:first-of-type) {
+  background-color: var(--cds-border-subtle);
 }
 
 .cds--number.cds--skeleton {
@@ -16302,7 +16399,7 @@ optgroup.cds--select-optgroup:disabled,
 }
 .cds--overflow-menu:hover,
 .cds--overflow-menu__trigger:hover {
-  background-color: var(--cds-background-hover, rgba(141, 141, 141, 0.12));
+  background-color: var(--cds-layer-hover);
 }
 
 .cds--overflow-menu--sm {
@@ -16772,7 +16869,7 @@ a.cds--overflow-menu-options__btn::before {
   border-right: 1px solid var(--cds-border-subtle);
 }
 
-.cds--pagination .cds--select__page-number .cds--select-input {
+.cds--pagination__right {
   border-left: 1px solid var(--cds-border-subtle);
 }
 
@@ -16806,6 +16903,15 @@ a.cds--overflow-menu-options__btn::before {
   margin-left: 0.0625rem;
 }
 
+.cds--pagination__right .cds--pagination__text.cds--pagination__page-text {
+  margin-right: 0.0625rem;
+  margin-left: 1rem;
+}
+
+.cds--pagination__right .cds--pagination__text:empty {
+  margin: 0;
+}
+
 .cds--pagination__left {
   padding: 0 1rem 0 0;
 }
@@ -18407,6 +18513,22 @@ span.cds--pagination__text.cds--pagination__items-count {
   background-color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--radio-button-group--readonly .cds--radio-button + .cds--radio-button__label .cds--radio-button__appearance {
+  border-color: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label {
+  cursor: default;
+}
+
+.cds--radio-button-group--readonly .cds--radio-button__label-text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
 .cds--radio-button:focus + .cds--radio-button__label .cds--radio-button__appearance {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: 1.5px;
@@ -19324,6 +19446,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   outline: none;
 }
 
+.cds--slider--readonly {
+  cursor: default;
+}
+
+.cds--slider--readonly .cds--slider__thumb {
+  width: 0;
+  height: 0;
+}
+
+.cds--slider--readonly ~ .cds--slider-text-input {
+  background-color: transparent;
+}
+
 .cds--slider-container.cds--skeleton .cds--slider__range-label {
   position: relative;
   padding: 0;
@@ -19981,6 +20116,9 @@ span.cds--pagination__text.cds--pagination__items-count {
   border-bottom: 0;
   line-height: calc(3rem - (0.5rem * 2));
 }
+.cds--tabs.cds--tabs__icon--default .cds--tab--list, .cds--tabs.cds--tabs__icon--lg .cds--tab--list {
+  overflow-x: visible;
+}
 .cds--tabs .cds--tabs__nav-item--icon, .cds--tabs.cds--tabs--contained .cds--tabs__nav-item--icon {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -20841,6 +20979,19 @@ span.cds--pagination__text.cds--pagination__items-count {
   max-height: 3rem;
 }
 
+.cds--time-picker--readonly .cds--time-picker__input-field {
+  background-color: transparent;
+}
+
+.cds--time-picker--readonly .cds--select-input {
+  background-color: transparent;
+  cursor: default;
+}
+
+.cds--time-picker--readonly .cds--select-input + .cds--select__arrow {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
 .cds--toggletip-label {
   font-size: var(--cds-label-01-font-size, 0.75rem);
   font-weight: var(--cds-label-01-font-weight, 400);
@@ -21085,6 +21236,34 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-button-disabled, #c6c6c6);
 }
 
+.cds--toggle--readonly .cds--toggle__appearance {
+  cursor: default;
+}
+
+.cds--toggle--readonly .cds--toggle__switch {
+  border: 1px solid var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+  background-color: transparent;
+}
+.cds--toggle--readonly .cds--toggle__switch::before {
+  top: 0.125rem;
+  left: 0.125rem;
+  background-color: var(--cds-text-primary, #161616);
+}
+
+.cds--toggle--readonly .cds--toggle__check {
+  top: 0.3125rem;
+  right: 0.25rem;
+  fill: var(--cds-background, #ffffff);
+}
+
+.cds--toggle--readonly .cds--toggle__text {
+  cursor: text;
+  -webkit-user-select: text;
+     -moz-user-select: text;
+      -ms-user-select: text;
+          user-select: text;
+}
+
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--toggle__switch,
 .cds--toggle__switch::before {