@carbon/styles 1.12.0-rc.1 → 1.12.0

package/css/styles.css

@@ -6596,6 +6596,13 @@ fieldset[disabled] .cds--form__helper-text {
   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;
 }
 
@@ -6614,12 +6621,12 @@ fieldset[disabled] .cds--form__helper-text {
 }
 
 .cds--form--fluid .cds--text-input--invalid,
-.cds--form--fluid .cds--text-input--warn {
+.cds--form--fluid .cds--text-input--warning {
   border-bottom: none;
 }
 
 .cds--form--fluid .cds--text-input--invalid + .cds--text-input__divider,
-.cds--form--fluid .cds--text-input--warn + .cds--text-input__divider {
+.cds--form--fluid .cds--text-input--warning + .cds--text-input__divider {
   display: block;
   border-style: solid;
   border-color: var(--cds-border-subtle);
@@ -6631,13 +6638,13 @@ fieldset[disabled] .cds--form__helper-text {
   top: 5rem;
 }
 
-.cds--form--fluid .cds--text-input-wrapper--light {
-  background: var(--cds-field-02, #ffffff);
+.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
+.cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
+  outline: none;
 }
 
-.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid {
-  outline: 2px solid transparent;
-  outline-offset: -2px;
+.cds--form--fluid .cds--text-input__field-wrapper--warning {
+  border-bottom: 1px solid var(--cds-border-strong);
 }
 
 .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
@@ -6650,16 +6657,23 @@ fieldset[disabled] .cds--form__helper-text {
   }
 }
 
-.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
+.cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus {
+  .cds--form--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--form--fluid .cds--text-input__field-wrapper--warning:focus-within {
     outline-style: dotted;
   }
 }
 
+.cds--form--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
+.cds--form--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
+  outline: none;
+}
+
 .cds--text-input-wrapper.cds--text-input-wrapper--inline {
   -webkit-box-orient: horizontal;
   -webkit-box-direction: normal;
@@ -12258,11 +12272,117 @@ button.cds--dropdown-text:focus {
 }
 
 /* stylelint-enable */
+.cds--text-input--fluid.cds--text-input-wrapper {
+  position: relative;
+  height: 100%;
+  background: var(--cds-field);
+  -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--text-input--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--text-input--fluid .cds--form__helper-text {
+  display: none;
+}
+
+.cds--text-input--fluid .cds--text-input {
+  min-height: 4rem;
+  padding: 2rem 1rem 0.8125rem;
+}
+
+.cds--text-input__divider,
+.cds--text-input--fluid .cds--text-input__divider {
+  display: none;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid],
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
+  display: block;
+}
+
+.cds--text-input--fluid input[data-invalid] {
+  outline: none;
+}
+
+.cds--text-input--fluid .cds--form-requirement {
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+}
+
+.cds--text-input--fluid .cds--text-input--invalid,
+.cds--text-input--fluid .cds--text-input--warning {
+  border-bottom: none;
+}
+
+.cds--text-input--fluid .cds--text-input--invalid + .cds--text-input__divider,
+.cds--text-input--fluid .cds--text-input--warning + .cds--text-input__divider {
+  display: block;
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--text-input--fluid .cds--text-input__invalid-icon {
+  top: 5rem;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning {
+  outline: none;
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning {
+  border-bottom: 1px solid var(--cds-border-strong);
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:not(:focus) {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid]:focus-within,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning:focus-within {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-input--fluid .cds--text-input__field-wrapper[data-invalid] > .cds--text-input--invalid:focus,
+.cds--text-input--fluid .cds--text-input__field-wrapper--warning > .cds--text-input--warning:focus {
+  outline: none;
+}
+
 @-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: 0;
   }
 }
+
 @keyframes stroke {
   100% {
     stroke-dashoffset: 0;