@carbon/styles 1.13.0 → 1.14.0-rc.0

package/css/styles.css

@@ -3424,6 +3424,24 @@ em {
   --cds-tag-hover-warm-gray: #696363;
 }
 
+.cds--accordion--flush .cds--accordion__title {
+  margin-left: 0;
+}
+
+.cds--accordion--flush .cds--accordion__arrow {
+  margin-right: 0;
+}
+
+.cds--accordion--flush .cds--accordion__content {
+  padding-left: 0;
+}
+
+.cds--accordion--flush:not(.cds--skeleton) .cds--accordion__heading:hover::before,
+.cds--accordion--flush:not(.cds--skeleton) .cds--accordion__heading:focus::before {
+  left: -1rem;
+  width: calc(100% + 32px);
+}
+
 .cds--accordion {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -6504,11 +6522,14 @@ fieldset[disabled] .cds--form__helper-text {
   right: 2.5rem;
 }
 
-.cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
   cursor: not-allowed;
+}
+
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
-.cds--text-input:disabled + .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
+.cds--text-input:disabled ~ .cds--text-input--password__visibility__toggle.cds--tooltip__trigger svg:hover {
   fill: var(--cds-icon-disabled, rgba(22, 22, 22, 0.25));
 }
 
@@ -12182,7 +12203,6 @@ button.cds--dropdown-text:focus {
 }
 
 .cds--file__state-container .cds--file-complete {
-  cursor: pointer;
   fill: var(--cds-interactive, #0f62fe);
 }
 .cds--file__state-container .cds--file-complete:focus {
@@ -12385,6 +12405,161 @@ button.cds--dropdown-text:focus {
   outline: none;
 }
 
+.cds--text-input--fluid .cds--text-input.cds--password-input {
+  padding-right: 2.5rem;
+}
+
+.cds--text-input--fluid.cds--password-input-wrapper .cds--text-input__invalid-icon {
+  right: 1rem;
+}
+
+.cds--text-input--fluid .cds--btn.cds--text-input--password__visibility__toggle.cds--tooltip__trigger {
+  top: 1.625rem;
+  right: 0.5rem;
+  width: 2rem;
+  height: 2rem;
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper {
+  position: relative;
+  height: 100%;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+      -ms-flex-direction: column;
+          flex-direction: column;
+  background: var(--cds-field);
+}
+
+.cds--modal .cds--text-area--fluid .cds--text-area__wrapper {
+  background: var(--cds-field-02, #ffffff);
+}
+
+.cds--text-area--fluid .cds--text-area__label-wrapper {
+  position: relative;
+  height: 100%;
+}
+
+.cds--text-area--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-area--fluid div.cds--label {
+  right: 1rem;
+  left: initial;
+}
+
+.cds--text-area--fluid .cds--text-area {
+  min-height: 4rem;
+  padding: 0 1rem 0.8125rem;
+  margin-top: 2rem;
+  outline: none;
+}
+
+.cds--text-area--fluid .cds--form__helper-text {
+  display: none;
+}
+
+.cds--text-area--fluid .cds--text-area--invalid,
+.cds--text-area--fluid .cds--text-area:focus {
+  border-bottom: none;
+}
+
+.cds--text-area__divider,
+.cds--text-area--fluid .cds--text-area__divider {
+  display: none;
+}
+
+.cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider {
+  display: block;
+  border-style: solid;
+  border-color: var(--cds-border-subtle);
+  border-bottom: none;
+  margin: 0 1rem;
+}
+
+.cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
+  position: relative;
+  display: block;
+  overflow: visible;
+  max-height: 12.5rem;
+  padding: 0.5rem 2.5rem 0.5rem 1rem;
+  margin: 0;
+  background: var(--cds-field);
+  color: var(--cds-text-error, #da1e28);
+}
+
+.cds--modal .cds--text-area--fluid .cds--text-area--invalid + .cds--text-area__divider + .cds--form-requirement {
+  background: var(--cds-field-02, #ffffff);
+}
+
+.cds--text-area--fluid .cds--text-area__invalid-icon {
+  top: 0.5rem;
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
+  outline: 2px solid var(--cds-support-error, #da1e28);
+  outline-offset: -2px;
+  outline-offset: 0;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:not(:focus) {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
+.cds--text-area--fluid .cds--text-area__wrapper:focus-within {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+  outline-offset: 0;
+}
+@media screen and (prefers-contrast) {
+  .cds--text-area--fluid .cds--text-area__wrapper[data-invalid]:focus-within,
+.cds--text-area--fluid .cds--text-area__wrapper:focus-within {
+    outline-style: dotted;
+  }
+}
+
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid:focus,
+.cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:focus,
+.cds--text-area--fluid .cds--text-area__wrapper > .cds--text-area:active,
+.cds--text-area--fluid .cds--text-area__wrapper[data-invalid] > .cds--text-area--invalid {
+  outline: none;
+  -webkit-transition: none;
+  transition: none;
+}
+
+.cds--text-area--fluid__skeleton {
+  padding: 1rem;
+  border-bottom: 1px solid var(--cds-skeleton-element, #c6c6c6);
+  background: var(--cds-skeleton-background, #e8e8e8);
+}
+
+.cds--text-area--fluid__skeleton .cds--skeleton,
+.cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton::before {
+  height: 0.5rem;
+}
+
+.cds--text-area--fluid__skeleton .cds--label {
+  margin-bottom: 0.75rem;
+}
+
+.cds--text-area--fluid__skeleton .cds--text-area.cds--skeleton {
+  width: 80%;
+  height: 4rem;
+}
+
 @-webkit-keyframes stroke {
   100% {
     stroke-dashoffset: 0;
@@ -13539,13 +13714,13 @@ button.cds--dropdown-text:focus {
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--inline-notification__icon {
+  .cds--inline-notification .cds--inline-notification__icon {
     fill: ButtonText;
   }
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--inline-notification__close-icon {
+  .cds--inline-notification .cds--inline-notification__close-icon {
     fill: ButtonText;
   }
 }
@@ -13829,13 +14004,13 @@ button.cds--dropdown-text:focus {
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--toast-notification__close-icon {
+  .cds--toast-notification .cds--toast-notification__close-icon {
     fill: ButtonText;
   }
 }
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
-  .cds--toast-notification__icon {
+  .cds--toast-notification .cds--toast-notification__icon {
     fill: ButtonText;
   }
 }
@@ -14331,7 +14506,8 @@ button.cds--dropdown-text:focus {
 
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--actionable-notification .cds--inline-notification__icon,
-.cds--actionable-notification .cds--toast-notification__icon {
+.cds--actionable-notification .cds--toast-notification__icon,
+.cds--actionable-notification .cds--actionable-notification__close-icon {
     fill: ButtonText;
   }
 }
@@ -16869,6 +17045,10 @@ span.cds--pagination__text.cds--pagination__items-count {
   fill: var(--cds-interactive, #0f62fe);
 }
 
+.cds--progress--space-equal .cds--progress-text {
+  overflow: hidden;
+}
+
 .cds--progress-label {
   font-size: var(--cds-body-compact-01-font-size, 0.875rem);
   font-weight: var(--cds-body-compact-01-font-weight, 400);
@@ -17297,6 +17477,7 @@ span.cds--pagination__text.cds--pagination__items-count {
 @media screen and (-ms-high-contrast: active), (forced-colors: active) {
   .cds--radio-button:checked + .cds--radio-button__label .cds--radio-button__appearance::before {
     fill: ButtonText;
+    background-color: ButtonText;
   }
 }
 
@@ -19184,6 +19365,7 @@ span.cds--pagination__text.cds--pagination__items-count {
   color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
   cursor: not-allowed;
   outline: none;
+  resize: none;
 }
 
 .cds--text-area:disabled::-webkit-input-placeholder {
@@ -20715,7 +20897,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;
@@ -21748,7 +21929,6 @@ a.cds--header__menu-item.cds--header__menu-item--current:focus {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 100%;
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
       -ms-flex-direction: column;