@carbon/styles 1.17.0-rc.2 → 1.18.0-rc.0

package/css/styles.css

@@ -4826,6 +4826,17 @@ li.cds--accordion__item--disabled:last-of-type {
   }
 }
 
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+textarea:-webkit-autofill,
+textarea:-webkit-autofill:hover,
+textarea:-webkit-autofill:focus {
+  -webkit-box-shadow: 0 0 0 1000px var(--cds-field) inset;
+          box-shadow: 0 0 0 1000px var(--cds-field) inset;
+  -webkit-text-fill-color: var(--cds-text-primary, #161616);
+}
+
 .cds--fieldset html {
   font-size: 100%;
 }
@@ -5282,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;
 }
@@ -5740,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: "";
 }
 
@@ -8016,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;
@@ -8026,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);
@@ -8097,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);
 }
 
@@ -8662,15 +8736,6 @@ fieldset[disabled] .cds--form__helper-text {
   transition: background-color 70ms cubic-bezier(0, 0, 0.38, 0.9);
 }
 
-.cds--data-table .cds--table-column-checkbox .cds--checkbox:focus + .cds--checkbox-label::before {
-  outline-offset: 0.375rem;
-}
-
-.cds--data-table--compact .cds--table-column-checkbox .cds--checkbox:focus + .cds--checkbox-label::before,
-.cds--data-table--xs .cds--table-column-checkbox .cds--checkbox:focus + .cds--checkbox-label::before {
-  outline-offset: 0.125rem;
-}
-
 .cds--data-table thead th.cds--table-column-checkbox,
 .cds--data-table tbody td.cds--table-column-checkbox,
 .cds--data-table thead th.cds--table-expand,
@@ -11421,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;
@@ -12942,6 +13016,70 @@ button.cds--dropdown-text:focus {
   top: 5rem;
 }
 
+.cds--date-picker--fluid__skeleton {
+  height: 4rem;
+  border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
+  background: var(--cds-skeleton-background, #e8e8e8);
+}
+
+.cds--date-picker--fluid__skeleton--container {
+  position: relative;
+  width: 100%;
+  height: 4rem;
+  padding: 0.8125rem 2.5rem 0.8125rem 1rem;
+}
+
+.cds--date-picker--fluid__skeleton .cds--skeleton {
+  height: 1rem;
+}
+
+.cds--date-picker--fluid__skeleton .cds--label {
+  margin-bottom: 0.25rem;
+}
+
+.cds--date-picker--fluid__skeleton .cds--text-input {
+  width: 80%;
+  height: 1.125rem;
+}
+
+.cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
+  top: auto;
+  bottom: 0.125rem;
+}
+
+.cds--date-picker--fluid__skeleton--range {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: horizontal;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: row;
+          flex-direction: row;
+}
+
+.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 50%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
+.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container:first-of-type {
+  border-right: 1px solid var(--cds-skeleton-element, #c6c6c6);
+}
+
+.cds--date-picker--fluid__skeleton--range .cds--text-input {
+  width: 100%;
+}
+
+.cds--date-picker--fluid__skeleton--range .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
+  bottom: 0.3125rem;
+}
+
 .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
   outline: none;
   outline-offset: 0;
@@ -13200,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;
@@ -14450,6 +14597,36 @@ optgroup.cds--select-optgroup:disabled,
   visibility: hidden;
 }
 
+.cds--multi-select.cds--multi-select--readonly,
+.cds--multi-select.cds--multi-select--readonly:hover {
+  background-color: transparent;
+}
+
+.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--multi-select.cds--multi-select--readonly .cds--tag--filter,
+.cds--multi-select.cds--multi-select--readonly .cds--tag__close-icon:hover {
+  background-color: transparent;
+  color: var(--cds-text-primary, #161616);
+  cursor: default;
+}
+
+.cds--multi-select.cds--multi-select--readonly .cds--tag--filter {
+  -webkit-box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
+          box-shadow: 0 0 0 1px var(--cds-background-inverse, #393939);
+}
+
+.cds--multi-select.cds--multi-select--readonly .cds--tag--filter svg {
+  fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
+}
+
+.cds--multi-select.cds--multi-select--readonly .cds--list-box__field,
+.cds--multi-select.cds--multi-select--readonly .cds--list-box__menu-icon {
+  cursor: default;
+}
+
 .cds--inline-notification {
   position: relative;
   display: -webkit-box;
@@ -16055,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 {
@@ -16206,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 {
@@ -16676,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);
 }
 
@@ -16710,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;
 }
@@ -18311,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;
@@ -19228,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;
@@ -19885,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;
@@ -20745,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);
@@ -20989,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 {