@carbon/styles 1.18.0-rc.0 → 1.18.0

package/css/styles.css

@@ -6569,6 +6569,17 @@ fieldset[disabled] .cds--form__helper-text {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
+.cds--text-input__counter-alert {
+  position: absolute;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  margin: -1px;
+  clip: rect(0, 0, 0, 0);
+}
+
 .cds--text-input:disabled {
   outline: 2px solid transparent;
   outline-offset: -2px;
@@ -12767,19 +12778,19 @@ button.cds--dropdown-text:focus {
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field {
   position: absolute;
-  bottom: 0.8125rem;
+  top: 2.25rem;
   left: 1rem;
   width: 50%;
-  height: 1rem;
+  height: 0.5rem;
   padding: 0;
 }
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__label {
   position: absolute;
-  top: 0.8125rem;
+  top: 1rem;
   left: 1rem;
   width: 25%;
-  height: 1rem;
+  height: 0.5rem;
 }
 
 .cds--list-box__wrapper--fluid .cds--skeleton .cds--list-box__field,
@@ -13025,12 +13036,15 @@ button.cds--dropdown-text:focus {
 .cds--date-picker--fluid__skeleton--container {
   position: relative;
   width: 100%;
-  height: 4rem;
-  padding: 0.8125rem 2.5rem 0.8125rem 1rem;
+  height: 100%;
 }
 
 .cds--date-picker--fluid__skeleton .cds--skeleton {
-  height: 1rem;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  width: 25%;
+  height: 0.5rem;
 }
 
 .cds--date-picker--fluid__skeleton .cds--label {
@@ -13038,13 +13052,17 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--date-picker--fluid__skeleton .cds--text-input {
-  width: 80%;
-  height: 1.125rem;
+  position: absolute;
+  top: 2.25rem;
+  left: 1rem;
+  width: 50%;
+  height: 0.5rem;
+  padding: 0;
 }
 
 .cds--date-picker--fluid__skeleton--container .cds--date-picker__icon {
   top: auto;
-  bottom: 0.125rem;
+  bottom: 0.5rem;
 }
 
 .cds--date-picker--fluid__skeleton--range {
@@ -13072,12 +13090,8 @@ button.cds--dropdown-text:focus {
   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;
+  bottom: 0.5rem;
 }
 
 .cds--list-box__wrapper--fluid .cds--multi-select--filterable--input-focused {
@@ -13415,13 +13429,13 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--select--fluid .cds--select-input {
   min-height: 4rem;
-  padding: 2rem 1rem 0.8125rem;
+  padding: 2rem 2rem 0.8125rem 1rem;
   outline: none;
+  text-overflow: ellipsis;
 }
 
 .cds--select--fluid .cds--select__arrow {
-  top: auto;
-  bottom: 1rem;
+  top: 2rem;
   height: 1rem;
 }
 
@@ -13431,13 +13445,12 @@ optgroup.cds--select-optgroup:disabled,
   transition: border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
 
-.cds--select--fluid .cds--select--invalid {
+.cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
   outline: 2px solid var(--cds-support-error, #da1e28);
   outline-offset: -2px;
-  outline-offset: 0;
 }
 @media screen and (prefers-contrast) {
-  .cds--select--fluid .cds--select--invalid {
+  .cds--select--fluid .cds--select--invalid .cds--select-input__wrapper {
     outline-style: dotted;
   }
 }
@@ -13453,6 +13466,7 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input,
 .cds--select--fluid .cds--select--warning .cds--select-input {
+  padding-right: 2rem;
   border-bottom: 1px solid transparent;
 }
 
@@ -13460,11 +13474,29 @@ optgroup.cds--select-optgroup:disabled,
   border-bottom: 1px solid var(--cds-border-strong);
 }
 
+.cds--select--fluid .cds--select-input__wrapper {
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+}
+
 .cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--select-input:not(:focus),
 .cds--select--fluid .cds--select--warning .cds--select-input:not(:focus) {
   outline: none;
 }
 
+.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement,
+.cds--select--fluid .cds--select--warning .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+}
+
+.cds--select--fluid .cds--select-input__wrapper[data-invalid] .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
 .cds--select--fluid .cds--form-requirement {
   padding: 0.5rem 2.5rem 0.5rem 1rem;
   margin: 0;
@@ -13482,13 +13514,12 @@ optgroup.cds--select-optgroup:disabled,
   pointer-events: none;
 }
 
-.cds--select--fluid .cds--select--fluid--focus {
+.cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
-  outline-offset: 0;
 }
 @media screen and (prefers-contrast) {
-  .cds--select--fluid .cds--select--fluid--focus {
+  .cds--select--fluid .cds--select--fluid--focus .cds--select-input__wrapper {
     outline-style: dotted;
   }
 }
@@ -13781,22 +13812,209 @@ optgroup.cds--select-optgroup:disabled,
 
 .cds--text-input--fluid__skeleton {
   position: relative;
-  height: 100%;
-  padding: 1rem;
+  height: 4rem;
   border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
   background: var(--cds-skeleton-background, #e8e8e8);
 }
 
 .cds--text-input--fluid__skeleton .cds--skeleton {
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+  width: 25%;
   height: 0.5rem;
 }
 
 .cds--text-input--fluid__skeleton .cds--label {
-  margin-bottom: 0.75rem;
+  position: absolute;
+  top: 2.25rem;
+  left: 1rem;
+  width: 50%;
+  height: 0.5rem;
+  padding: 0;
 }
 
-.cds--text-input--fluid__skeleton .cds--text-input {
-  width: 80%;
+.cds--time-picker--fluid {
+  background: var(--cds-field);
+}
+
+.cds--time-picker--fluid .cds--time-picker--fluid__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+
+.cds--time-picker--fluid__wrapper > *:nth-child(1),
+.cds--time-picker--fluid__wrapper > *:nth-child(2) {
+  -ms-flex-preferred-size: 25%;
+      flex-basis: 25%;
+}
+
+.cds--time-picker--equal-width .cds--time-picker--fluid__wrapper > * {
+  -ms-flex-preferred-size: 50%;
+      flex-basis: 50%;
+}
+
+.cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
+  position: absolute;
+  display: block;
+  width: 1px;
+  height: calc(100% - 1px);
+  background-color: var(--cds-border-strong);
+  content: "";
+  opacity: 1;
+  -webkit-transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+  transition: opacity 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::after {
+  right: 0;
+}
+
+.cds--time-picker--fluid__wrapper .cds--select-input__wrapper::before {
+  left: 0;
+}
+
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child):hover .cds--select-input__wrapper::before,
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:nth-child(2):hover:not(:last-child) ~ * .cds--select-input__wrapper::before,
+.cds--time-picker--fluid:not(.cds--time-picker--fluid--disabled) .cds--time-picker--fluid__wrapper > *:last-child:hover .cds--select-input__wrapper::before {
+  opacity: 0;
+}
+
+.cds--time-picker--fluid--disabled .cds--time-picker--fluid__wrapper .cds--select--disabled .cds--select-input__wrapper::before {
+  background: var(--cds-border-disabled, #c6c6c6);
+}
+
+.cds--time-picker--fluid .cds--form-requirement {
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+  background: var(--cds-field);
+}
+
+.cds--time-picker--fluid--invalid {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+  position: relative;
+}
+@media screen and (prefers-contrast) {
+  .cds--time-picker--fluid--invalid {
+    outline-style: dotted;
+  }
+}
+
+.cds--time-picker--fluid--invalid .cds--text-input,
+.cds--time-picker--fluid--invalid .cds--text-input-wrapper,
+.cds--time-picker--fluid--invalid .cds--select-input,
+.cds--time-picker--fluid--invalid .cds--select {
+  background: transparent;
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input {
+  padding-top: 1.875rem;
+  border-top: 2px solid transparent;
+}
+
+.cds--select--fluid:last-of-type .cds--select-input {
+  border-right: 2px solid transparent;
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input:hover:not([disabled]) {
+  background: var(--cds-field-hover);
+}
+
+.cds--time-picker--fluid--invalid .cds--select-input:hover {
+  border-top: 2px solid var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--invalid .cds--select--fluid:last-of-type .cds--select-input:hover {
+  border-right: 2px solid var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--warning {
+  position: relative;
+}
+
+.cds--time-picker__icon {
+  display: none;
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker__icon,
+.cds--time-picker--fluid--warning .cds--time-picker__icon {
+  position: absolute;
+  top: 4.5rem;
+  right: 1rem;
+  display: block;
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker__icon {
+  fill: var(--cds-support-error, #da1e28);
+}
+
+.cds--time-picker--fluid--warning .cds--time-picker__icon {
+  fill: var(--cds-support-warning, #f1c21b);
+}
+
+.cds--time-picker--fluid--warning .cds--time-picker__icon path:first-of-type {
+  fill: var(--cds-icon-primary, #161616);
+}
+
+.cds--time-picker--fluid--invalid .cds--form-requirement,
+.cds--time-picker--fluid--warning .cds--form-requirement {
+  display: block;
+  overflow: visible;
+  max-height: 100%;
+}
+
+.cds--time-picker--fluid--invalid .cds--form-requirement {
+  color: var(--cds-text-error, #da1e28);
+}
+
+.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--invalid .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:nth-child(2):not(:last-child) .cds--select-input__wrapper::before,
+.cds--time-picker--fluid--warning .cds--time-picker--fluid__wrapper > *:last-child .cds--select-input__wrapper::before {
+  top: 8px;
+  height: calc(100% - 1rem);
+}
+
+.cds--time-picker--fluid--invalid .cds--text-input,
+.cds--time-picker--fluid--warning .cds--text-input,
+.cds--time-picker--fluid--invalid .cds--select-input,
+.cds--time-picker--fluid--warning .cds--select-input {
+  border-bottom: 1px solid transparent;
+}
+
+.cds--time-picker--fluid.cds--time-picker--fluid--invalid .cds--time-picker__divider,
+.cds--time-picker--fluid.cds--time-picker--fluid--warning .cds--time-picker__divider {
+  width: calc(100% - 2rem);
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--time-picker--fluid--skeleton {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  width: 100%;
+  height: 4rem;
+}
+
+.cds--time-picker--fluid--skeleton > * {
+  width: auto;
+  height: 100%;
+}
+
+.cds--time-picker--fluid--skeleton > *:nth-child(1),
+.cds--time-picker--fluid--skeleton > *:nth-child(2) {
+  width: 25%;
+}
+
+.cds--time-picker--fluid--skeleton > *:last-child,
+.cds--time-picker--fluid--skeleton.cds--time-picker--equal-width > *:first-child {
+  width: 50%;
 }
 
 @-webkit-keyframes stroke {