@carbon/styles 1.23.0 → 1.24.0-rc.0

package/css/styles.css

@@ -4282,6 +4282,7 @@ li.cds--accordion__item--disabled:last-of-type {
 }
 
 .cds--link.cds--link--inline {
+  display: inline;
   text-decoration: underline;
 }
 .cds--link.cds--link--inline:focus, .cds--link.cds--link--inline:visited {
@@ -15730,6 +15731,7 @@ optgroup.cds--select-optgroup:disabled,
   max-width: 18rem;
   padding: 0.25rem 0;
   background-color: var(--cds-layer);
+  opacity: 0;
   visibility: hidden;
 }
 
@@ -15745,124 +15747,107 @@ optgroup.cds--select-optgroup:disabled,
   }
 }
 
-.cds--menu--invisible {
-  opacity: 0;
-  pointer-events: none;
+.cds--menu:not(.cds--menu--open) .cds--menu--open {
+  visibility: hidden;
 }
 
-.cds--menu-option {
-  position: relative;
-  display: list-item;
+.cds--menu--shown {
+  opacity: 1;
+}
+
+.cds--menu-item {
+  font-size: var(--cds-body-short-01-font-size, 0.875rem);
+  font-weight: var(--cds-body-short-01-font-weight, 400);
+  line-height: var(--cds-body-short-01-line-height, 1.28572);
+  letter-spacing: var(--cds-body-short-01-letter-spacing, 0.16px);
+  display: grid;
   height: 2rem;
-  background-color: var(--cds-layer);
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
   color: var(--cds-text-primary, #161616);
+  -webkit-column-gap: 0.5rem;
+     -moz-column-gap: 0.5rem;
+          column-gap: 0.5rem;
   cursor: pointer;
+  grid-template-columns: 0 1fr -webkit-max-content;
+  grid-template-columns: 0 1fr max-content;
+  padding-inline: 1rem;
   -webkit-transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
   transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
 }
-.cds--menu-option:focus {
+.cds--menu-item:focus {
   outline: 2px solid var(--cds-focus, #0f62fe);
   outline-offset: -2px;
 }
 @media screen and (prefers-contrast) {
-  .cds--menu-option:focus {
+  .cds--menu-item:focus {
     outline-style: dotted;
   }
 }
 
-.cds--menu-option--active,
-.cds--menu-option:hover {
+.cds--menu-item:hover {
   background-color: var(--cds-layer-hover);
 }
 
-.cds--menu-option--danger:hover,
-.cds--menu-option--danger:focus {
-  background-color: var(--cds-button-danger-primary, #da1e28);
-  color: var(--cds-text-on-color, #ffffff);
-}
-
-.cds--menu-option > .cds--menu {
-  margin-top: calc(0.25rem * -1);
+.cds--menu--xs .cds--menu-item {
+  height: 1.5rem;
 }
 
-.cds--menu-option__content {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  height: 100%;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  padding: 0 1rem;
+.cds--menu--sm .cds--menu-item {
+  height: 2rem;
 }
 
-.cds--menu-option__content--disabled {
-  background-color: var(--cds-layer);
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
-  cursor: not-allowed;
+.cds--menu--md .cds--menu-item {
+  height: 2.5rem;
 }
 
-.cds--menu-option__content--disabled .cds--menu-option__label,
-.cds--menu-option__content--disabled .cds--menu-option__info,
-.cds--menu-option__content--disabled .cds--menu-option__icon {
-  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+.cds--menu--lg .cds--menu-item {
+  height: 3rem;
 }
 
-.cds--menu-option__content--indented .cds--menu-option__label {
-  margin-left: 1rem;
+.cds--menu-item__icon {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
 }
 
-.cds--menu-option__label {
-  font-size: var(--cds-body-compact-01-font-size, 0.875rem);
-  font-weight: var(--cds-body-compact-01-font-weight, 400);
-  line-height: var(--cds-body-compact-01-line-height, 1.28572);
-  letter-spacing: var(--cds-body-compact-01-letter-spacing, 0.16px);
+.cds--menu-item__label {
   overflow: hidden;
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-  padding: 0.25rem 0;
-  text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.cds--menu-option__info {
-  display: -webkit-inline-box;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  margin-left: 1rem;
+.cds--menu--with-icons > .cds--menu-item,
+.cds--menu--with-icons > .cds--menu-item-group > ul > .cds--menu-item,
+.cds--menu--with-icons > .cds--menu-item-radio-group > ul > .cds--menu-item {
+  grid-template-columns: 1rem 1fr -webkit-max-content;
+  grid-template-columns: 1rem 1fr max-content;
 }
 
-.cds--menu-option__icon {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  width: 1rem;
-  height: 1rem;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  margin-right: 0.5rem;
+.cds--menu-item--disabled {
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
 }
 
-.cds--menu-divider {
-  display: list-item;
-  width: 100%;
-  height: 1px;
-  margin: 0.25rem 0;
-  background-color: var(--cds-border-subtle);
+.cds--menu-item--disabled:hover,
+.cds--menu-item--disabled.cds--menu-item--danger:hover {
+  background-color: var(--cds-layer);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
 }
 
-.cds--menu--md .cds--menu-option {
-  height: 2.5rem;
+.cds--menu-item--danger:focus,
+.cds--menu-item--danger:hover {
+  background-color: var(--cds-button-danger-primary, #da1e28);
+  color: var(--cds-text-on-color, #ffffff);
 }
 
-.cds--menu--lg .cds--menu-option {
-  height: 3rem;
+.cds--menu-item-divider {
+  display: block;
+  width: 100%;
+  height: 0.0625rem;
+  background-color: var(--cds-border-subtle);
+  margin-block: 0.25rem;
 }
 
 .cds--modal {
@@ -18901,15 +18886,15 @@ span.cds--pagination__text.cds--pagination__items-count {
 .cds--popover--left-top .cds--popover-content {
   top: -50%;
   right: 100%;
-  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
-          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem)));
+  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
+          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(-0.5 * var(--cds-popover-offset, 0rem) + 16px));
 }
 
 .cds--popover--left-bottom .cds--popover-content {
   right: 100%;
   bottom: -50%;
-  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
-          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem)));
+  -webkit-transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
+          transform: translate(calc(-1 * var(--cds-popover-offset, 0rem)), calc(0.5 * var(--cds-popover-offset, 0rem) - 16px));
 }
 
 .cds--popover--left .cds--popover-content::before,