@carbon/styles 1.17.0-rc.1 → 1.17.0-rc.2

package/css/styles.css

@@ -11156,6 +11156,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 +12749,199 @@ 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--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
   outline: none;
   outline-offset: 0;
@@ -13216,7 +13415,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,
@@ -19874,7 +20073,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 +20222,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 {