@carbon/styles 1.17.0-rc.1 → 1.17.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%;
 }
@@ -8662,15 +8673,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,
@@ -11156,6 +11158,12 @@ th .cds--table-sort__flex {
           justify-content: space-between;
 }
 
+.cds--date-picker-container .cds--label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
 .cds--date-picker-input__wrapper {
   position: relative;
   display: -webkit-box;
@@ -12743,6 +12751,263 @@ button.cds--dropdown-text:focus {
   right: 1rem;
 }
 
+.cds--date-picker--fluid {
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  background: var(--cds-field);
+}
+
+.cds--date-picker--fluid .cds--date-picker {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  -webkit-transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9), outline 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--date-picker--fluid .cds--label {
+  position: absolute;
+  z-index: 1;
+  top: 0.8125rem;
+  left: 1rem;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  height: 1rem;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin: 0;
+}
+
+.cds--date-picker--fluid .cds--date-picker-input__wrapper .cds--date-picker__input {
+  min-width: 9rem;
+  min-height: 4rem;
+  padding: 2rem 1rem 0.8125rem;
+  border-bottom: none;
+  background: transparent;
+}
+
+.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__icon {
+  display: none;
+}
+
+.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker__input:not(.cds--date-picker__input--invalid):not(.cds--date-picker__input--warn),
+.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn {
+  border-bottom: 1px solid var(--cds-border-strong);
+}
+
+.cds--date-picker--fluid .cds--date-picker__icon {
+  top: 2.6875rem;
+}
+
+.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input {
+  width: 100%;
+}
+
+.cds--date-picker--fluid .cds--date-picker--single {
+  border-bottom: none;
+}
+
+.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker__input:not(.cds--date-picker__input--invalid),
+.cds--date-picker--single .cds--date-picker--fluid--warn {
+  border-bottom: 1px solid var(--cds-border-strong);
+}
+
+.cds--date-picker--fluid:not(.cds--date-picker--fluid--invalid):not(.cds--date-picker--fluid--warn) .cds--date-picker--range .cds--date-picker-container:not(.cds--date-picker--fluid--invalid) {
+  border-bottom: 1px solid var(--cds-border-strong);
+}
+
+.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker__input,
+.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker-container {
+  width: 100%;
+  min-width: 9rem;
+  min-height: 3.9375rem;
+}
+
+.cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:first-child {
+  margin-right: 0;
+}
+
+.cds--date-picker--fluid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input {
+  border-left: 1px solid var(--cds-border-strong);
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid,
+.cds--date-picker-container.cds--date-picker--fluid--invalid {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--date-picker--fluid.cds--date-picker--fluid--invalid,
+.cds--date-picker-container.cds--date-picker--fluid--invalid {
+    outline-style: dotted;
+  }
+}
+
+.cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid {
+  outline: none;
+}
+
+.cds--date-picker--fluid .cds--date-picker-container:last-child.cds--date-picker--fluid--invalid .cds--date-picker__input--invalid,
+.cds--date-picker--fluid .cds--date-picker-container.cds--date-picker--fluid--invalid + .cds--date-picker-container .cds--date-picker__input {
+  border-left: none;
+}
+
+.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--form-requirement,
+.cds--date-picker-container.cds--date-picker--fluid--warn .cds--form-requirement {
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+}
+
+.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker,
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker,
+.cds--date-picker--fluid .cds--date-picker--single .cds--date-picker--fluid--warn .cds--date-picker__input,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range .cds--date-picker-container {
+  border-bottom: 1px solid transparent;
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:last-child .cds--date-picker__input,
+.cds--date-picker--fluid .cds--date-picker--fluid--warn + .cds--date-picker-container:last-child .cds--date-picker__input,
+.cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child .cds--date-picker__input {
+  border-left: 1px solid transparent;
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range > .cds--date-picker-container:first-child::after,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range > .cds--date-picker-container:first-child::after,
+.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:first-child::after,
+.cds--date-picker--fluid .cds--date-picker--range .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after {
+  position: absolute;
+  top: 0.5rem;
+  right: 0;
+  display: block;
+  width: 1px;
+  height: calc(100% - 1rem);
+  background: var(--cds-border-strong);
+  content: "";
+}
+
+.cds--date-picker--fluid .cds--date-picker--fluid--warn.cds--date-picker-container:last-child::after {
+  left: 0;
+}
+
+.cds--date-picker--fluid .cds--date-picker__divider {
+  width: calc(100% - 2rem);
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid,
+.cds--date-picker-container.cds--date-picker--fluid--warn .cds--date-picker__icon--warn {
+  top: 5rem;
+}
+
+.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--invalid .cds--date-picker__icon--invalid,
+.cds--date-picker--fluid .cds--date-picker--simple .cds--date-picker--fluid--warn .cds--date-picker__icon--warn {
+  display: block;
+}
+
+.cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--date-picker-container.cds--date-picker--fluid--invalid .cds--date-picker__input:focus {
+    outline-style: dotted;
+  }
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range ~ .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin-top: 0;
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range ~ .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn {
+  position: relative;
+}
+
+.cds--date-picker--fluid.cds--date-picker--fluid--invalid .cds--date-picker--range + .cds--date-picker__icon,
+.cds--date-picker--fluid.cds--date-picker--fluid--warn .cds--date-picker--range + .cds--date-picker__icon {
+  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;
@@ -13216,7 +13481,7 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--text-area--fluid .cds--text-area--invalid,
 .cds--text-area--fluid .cds--text-area:focus {
-  border-bottom: none;
+  border-bottom: 1px solid transparent;
 }
 
 .cds--text-area__divider,
@@ -14251,6 +14516,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;
@@ -19874,7 +20169,6 @@ span.cds--pagination__text.cds--pagination__items-count {
   letter-spacing: var(--cds-body-01-letter-spacing, 0.16px);
   outline: 2px solid transparent;
   outline-offset: -2px;
-  width: 100%;
   min-width: 10rem;
   height: 100%;
   min-height: 2.5rem;
@@ -20024,6 +20318,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   -webkit-box-shadow: none;
           box-shadow: none;
   pointer-events: none;
+  width: 100%;
   height: 6.25rem;
 }
 .cds--text-area.cds--skeleton:hover, .cds--text-area.cds--skeleton:focus, .cds--text-area.cds--skeleton:active {