@carbon/styles 1.113.0-rc.0 → 1.113.0

package/css/styles.css

@@ -7938,6 +7938,396 @@ a.cds--overflow-menu-options__btn::before {
   block-size: 1.25rem;
 }
 
+.cds--card {
+  position: relative;
+  border: 1px solid var(--cds-border-subtle-01, #c6c6c6);
+  background-color: var(--cds-layer-01, #f4f4f4);
+  color: var(--cds-text-primary, #161616);
+}
+
+.cds--card--clickable {
+  cursor: pointer;
+  transition: background-color 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+.cds--card--clickable:hover {
+  background-color: var(--cds-layer-hover-01, #e8e8e8);
+}
+.cds--card--clickable:focus {
+  outline: 2px solid var(--cds-focus, #0f62fe);
+  outline-offset: -2px;
+}
+@media screen and (prefers-contrast) {
+  .cds--card--clickable:focus {
+    outline-style: dotted;
+  }
+}
+.cds--card--clickable:active {
+  background-color: var(--cds-layer-active-01, #c6c6c6);
+}
+
+.cds--card--disabled {
+  border-color: var(--cds-border-disabled, #c6c6c6);
+  background-color: var(--cds-layer-01, #f4f4f4);
+  color: var(--cds-text-disabled, rgba(22, 22, 22, 0.25));
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.cds--card__header {
+  position: relative;
+  display: grid;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  grid-template-columns: auto 1fr;
+  row-gap: 0;
+}
+
+.cds--card__body {
+  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);
+  margin-block: 1rem;
+  margin-block-start: 0;
+  margin-inline: 1rem;
+}
+
+.cds--card > .cds--card__body:first-child {
+  margin-block-start: 1rem;
+}
+
+.cds--card__footer {
+  display: flex;
+  align-items: center;
+  padding: 1rem;
+}
+
+.cds--card__footer:has(> .cds--card__action) {
+  overflow: hidden;
+  padding: 0;
+  border-block-start: 1px solid var(--cds-border-subtle);
+  gap: 1px;
+}
+
+.cds--card__footer > .cds--card__action:not(:has(.cds--btn--icon-only)) {
+  flex: 1 0;
+  min-inline-size: 0;
+}
+.cds--card__footer > .cds--card__action:not(:has(.cds--btn--icon-only)) > .cds--btn,
+.cds--card__footer > .cds--card__action:not(:has(.cds--btn--icon-only)) > * > .cds--btn {
+  inline-size: 100%;
+  max-inline-size: none;
+}
+
+.cds--card__footer > .cds--card__action:has(.cds--btn--icon-only) {
+  flex: 0 0 auto;
+  margin-inline-start: auto;
+}
+
+.cds--card__footer > .cds--card__action:has(.cds--btn--icon-only) + .cds--card__action:has(.cds--btn--icon-only) {
+  margin-inline-start: 0;
+}
+
+.cds--card__action {
+  display: inline-flex;
+}
+
+.cds--card__header-media {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  grid-column: 1/-1;
+  margin-block: 1rem;
+  margin-inline: 1rem;
+  max-block-size: 4rem;
+}
+
+.cds--card__media {
+  grid-column: 1/-1;
+  inline-size: 100%;
+}
+.cds--card__media::before, .cds--card__media::after {
+  display: none;
+}
+
+.cds--card__media.cds--aspect-ratio--16x9 {
+  aspect-ratio: 16/9;
+}
+
+.cds--card__media.cds--aspect-ratio--9x16 {
+  aspect-ratio: 9/16;
+}
+
+.cds--card__media.cds--aspect-ratio--2x1 {
+  aspect-ratio: 2/1;
+}
+
+.cds--card__media.cds--aspect-ratio--1x2 {
+  aspect-ratio: 1/2;
+}
+
+.cds--card__media.cds--aspect-ratio--4x3 {
+  aspect-ratio: 4/3;
+}
+
+.cds--card__media.cds--aspect-ratio--3x4 {
+  aspect-ratio: 3/4;
+}
+
+.cds--card__media.cds--aspect-ratio--3x2 {
+  aspect-ratio: 3/2;
+}
+
+.cds--card__media.cds--aspect-ratio--2x3 {
+  aspect-ratio: 2/3;
+}
+
+.cds--card__media.cds--aspect-ratio--1x1 {
+  aspect-ratio: 1/1;
+}
+
+.cds--card__media > * {
+  position: static;
+  block-size: 100%;
+  inline-size: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.cds--card--horizontal {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+}
+
+.cds--card__media--horizontal {
+  overflow: hidden;
+  flex-basis: var(--cds--card--media-width, 33.33%);
+  flex-shrink: 0;
+  align-self: stretch;
+}
+
+.cds--card--horizontal > .cds--card__content {
+  display: flex;
+  flex: 1 1;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+.cds--card--horizontal > .cds--card__content > .cds--card__body {
+  flex: 1 0 auto;
+}
+
+.cds--card--horizontal > .cds--card__content > .cds--card__footer {
+  margin-block-start: auto;
+}
+
+.cds--card__title > .cds--card__label {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--card__label--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cds--card__label--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--cds--card--label-line-clamp);
+  text-overflow: ellipsis;
+}
+
+.cds--card__title {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  color: var(--cds-text-primary, #161616);
+  gap: 0.125rem;
+  margin-inline: 1rem;
+  min-inline-size: 0;
+}
+
+.cds--card__header > .cds--card__title {
+  margin-block: 1rem;
+}
+
+.cds--card--expressive .cds--card__title-text-row {
+  font-size: var(--cds-heading-03-font-size, 1.25rem);
+  font-weight: var(--cds-heading-03-font-weight, 400);
+  line-height: var(--cds-heading-03-line-height, 1.4);
+  letter-spacing: var(--cds-heading-03-letter-spacing, 0);
+}
+
+.cds--card--productive .cds--card__title-text-row {
+  font-size: var(--cds-heading-compact-02-font-size, 1rem);
+  font-weight: var(--cds-heading-compact-02-font-weight, 600);
+  line-height: var(--cds-heading-compact-02-line-height, 1.375);
+  letter-spacing: var(--cds-heading-compact-02-letter-spacing, 0);
+}
+
+.cds--card__title-text-row {
+  display: block;
+}
+
+.cds--card__title-text-row--truncate {
+  overflow: hidden;
+  max-inline-size: var(--cds--card--title-max-width, 100%);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cds--card__title-text-row--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--cds--card--title-line-clamp);
+  max-inline-size: var(--cds--card--title-max-width, 100%);
+  text-overflow: ellipsis;
+}
+
+.cds--card__title-text-row--with-start-icon {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.cds--card__title-text-row--with-end-icon {
+  display: block;
+}
+
+.cds--card__title-start-icon {
+  display: flex;
+  flex-shrink: 0;
+  margin-block-start: 0.125rem;
+}
+
+.cds--card__title-end-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-start: 0.5rem;
+  vertical-align: middle;
+}
+
+.cds--card__title > .cds--card__description {
+  font-size: var(--cds-label-01-font-size, 0.75rem);
+  font-weight: var(--cds-label-01-font-weight, 400);
+  line-height: var(--cds-label-01-line-height, 1.33333);
+  letter-spacing: var(--cds-label-01-letter-spacing, 0.32px);
+  color: var(--cds-text-secondary, #525252);
+}
+
+.cds--card__description--truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cds--card__description--truncate-multi {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: var(--cds--card--description-line-clamp);
+  text-overflow: ellipsis;
+}
+
+.cds--card__title-media {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-start;
+  justify-content: center;
+  grid-column: 1;
+  margin-block-start: 1rem;
+  margin-inline-start: 1rem;
+  max-block-size: 4rem;
+}
+
+.cds--card__header:has(> .cds--card__title-media) > .cds--card__title {
+  grid-column: 2;
+  margin-inline-start: 0;
+}
+
+.cds--card__actions {
+  position: absolute;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  block-size: 2rem;
+  gap: 0.25rem;
+  inline-size: 50%;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+  max-inline-size: 50%;
+}
+
+.cds--card--has-ai-label {
+  background: linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)) 0%, var(--cds-ai-aura-start, rgba(69, 137, 255, 0.1)) 0%, 15%, var(--cds-ai-aura-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-layer, var(--cds-ai-popover-background, #ffffff)), var(--cds-layer, var(--cds-ai-popover-background, #ffffff))) border-box;
+  border: 1px solid transparent;
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1)), 0 4px 10px 2px var(--cds-ai-drop-shadow, rgba(15, 98, 254, 0.1));
+}
+
+.cds--card__decorator {
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  block-size: 2rem;
+  inset-block-start: 0.5rem;
+  inset-inline-end: 0.5rem;
+}
+
+.cds--card--has-ai-label .cds--card__title {
+  padding-inline-end: 3rem;
+}
+
+.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__title {
+  padding-inline-end: 10rem;
+}
+
+.cds--card--has-ai-label .cds--card__label {
+  padding-inline-end: 3rem;
+}
+
+.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__label {
+  padding-inline-end: 10rem;
+}
+
+.cds--card--has-ai-label .cds--card__description {
+  padding-inline-end: 3rem;
+}
+
+.cds--card--has-ai-label:has(.cds--card__actions) .cds--card__description {
+  padding-inline-end: 10rem;
+}
+
+.cds--card--has-ai-label .cds--card__actions {
+  inset-inline-end: 2.5rem;
+}
+
+.cds--card--clickable.cds--card--has-ai-label::before {
+  background: linear-gradient(to top, var(--cds-ai-aura-hover-start, rgba(69, 137, 255, 0.32)) 0%, 15%, var(--cds-ai-aura-hover-end, rgba(255, 255, 255, 0)) 50%) padding-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) padding-box, linear-gradient(to bottom, var(--cds-ai-border-start, rgba(166, 200, 255, 0.64)), var(--cds-ai-border-end, #78a9ff)) border-box, linear-gradient(to top, var(--cds-ai-aura-hover-background, #edf5ff), var(--cds-ai-aura-hover-background, #edf5ff)) border-box;
+  position: absolute;
+  display: block;
+  block-size: 100%;
+  box-shadow: inset 0 -80px 70px -65px var(--cds-ai-inner-shadow, rgba(69, 137, 255, 0.1));
+  content: "";
+  inline-size: 100%;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  opacity: 0;
+  transition: opacity 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
+}
+
+.cds--card--clickable.cds--card--has-ai-label:hover::before {
+  opacity: 1;
+}
+
 .cds--chat-btn {
   border-radius: 1.5rem;
 }