@workday/canvas-kit-css 14.0.0-alpha.1169-next.0 → 14.0.0-alpha.1174-next.0

package/action-bar.css

@@ -0,0 +1,32 @@
+.cnvs-action-bar-list {
+  box-sizing: border-box;
+  display: flex;
+  box-shadow: var(--cnvs-sys-depth-1);
+  gap: var(--cnvs-sys-space-x4);
+  background: var(--cnvs-sys-color-bg-default);
+  border-block-start: solid 1px var(--cnvs-sys-color-border-divider);
+  padding: var(--cnvs-sys-space-x4) var(--cnvs-sys-space-x10);
+  position: fixed;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  inset-inline-end: 0;
+}
+
+@media (max-width: 767.5px) {
+.cnvs-action-bar-list {
+  padding: var(--cnvs-sys-space-x4);
+}
+
+.cnvs-action-bar-list >* {
+  flex: 1;
+}
+
+
+}
+
+
+.cnvs-action-bar-overflow-button {
+  box-sizing: border-box;
+  flex: 0;
+}
+

package/avatar.css

@@ -0,0 +1,186 @@
+.cnvs-avatar {
+  box-sizing: border-box;
+  background: var(--cnvs-sys-color-bg-caution-default);
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border: 0;
+  overflow: hidden;
+  cursor: default;
+  pointer-events: none;
+  border-radius: var(--cnvs-sys-shape-round);
+  width: var(--cnvs-avatar-size);
+  height: var(--cnvs-avatar-size);
+}
+
+.cnvs-avatar:focus-visible, .cnvs-avatar.focus {
+  outline: none;
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+.cnvs-avatar :is(button) {
+  cursor: pointer;
+  pointer-events: auto;
+}
+
+.cnvs-avatar:disabled, .cnvs-avatar.disabled {
+  opacity: var(--cnvs-sys-opacity-disabled);
+}
+
+.cnvs-avatar [data-part="avatar-icon"] {
+  transition: opacity 150ms linear;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  --cnvs-svg-size: calc(var(--cnvs-avatar-size) * 0.625);
+  opacity: 1;
+}
+
+.cnvs-avatar [data-part="avatar-image"] {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 999px;
+  transition: opacity 150ms linear;
+  opacity: 0;
+}
+
+
+.cnvs-avatar.variant-light {
+  background-color: var(--cnvs-sys-color-bg-alt-default);
+}
+
+.cnvs-avatar.variant-light [data-part="avatar-icon"] {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-default);
+}
+
+
+.cnvs-avatar.variant-dark {
+  background-color: var(--cnvs-sys-color-bg-primary-default);
+}
+
+.cnvs-avatar.variant-dark [data-part="avatar-icon"] {
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-inverse);
+}
+
+
+.cnvs-avatar.size-extra-small {
+  width: var(--cnvs-sys-space-x4);
+  height: var(--cnvs-sys-space-x4);
+}
+
+.cnvs-avatar.size-extra-small [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(var(--cnvs-sys-space-x4) * 0.625);
+}
+
+
+.cnvs-avatar.size-small {
+  width: var(--cnvs-sys-space-x6);
+  height: var(--cnvs-sys-space-x6);
+}
+
+.cnvs-avatar.size-small [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(var(--cnvs-sys-space-x6) * 0.625);
+}
+
+
+.cnvs-avatar.size-medium {
+  width: var(--cnvs-sys-space-x8);
+  height: var(--cnvs-sys-space-x8);
+}
+
+.cnvs-avatar.size-medium [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(var(--cnvs-sys-space-x8) * 0.625);
+}
+
+
+.cnvs-avatar.size-large {
+  width: var(--cnvs-sys-space-x10);
+  height: var(--cnvs-sys-space-x10);
+}
+
+.cnvs-avatar.size-large [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(var(--cnvs-sys-space-x10) * 0.625);
+}
+
+
+.cnvs-avatar.size-extra-large {
+  width: var(--cnvs-sys-space-x16);
+  height: var(--cnvs-sys-space-x16);
+}
+
+.cnvs-avatar.size-extra-large [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(var(--cnvs-sys-space-x16) * 0.625);
+}
+
+
+.cnvs-avatar.size-extra-extra-large {
+  width: calc(var(--cnvs-sys-space-x10) * 3);
+  height: calc(var(--cnvs-sys-space-x10) * 3);
+}
+
+.cnvs-avatar.size-extra-extra-large [data-part="avatar-icon"] {
+  --cnvs-svg-size: calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);
+}
+
+
+.cnvs-avatar.object-fit-contain [data-part="avatar-image"] {
+  object-fit: contain;
+}
+
+
+.cnvs-avatar.object-fit-fill [data-part="avatar-image"] {
+  object-fit: fill;
+}
+
+
+.cnvs-avatar.object-fit-cover [data-part="avatar-image"] {
+  object-fit: cover;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: scale-down;
+}
+
+
+.cnvs-avatar.object-fit-none [data-part="avatar-image"] {
+  object-fit: none;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: -moz-initial;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: initial;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: inherit;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: revert;
+}
+
+
+.cnvs-avatar.object-fit [data-part="avatar-image"] {
+  object-fit: unset;
+}
+
+
+.cnvs-avatar.is-image-loaded [data-part="avatar-icon"] {
+  opacity: 0;
+}
+
+.cnvs-avatar.is-image-loaded [data-part="avatar-image"] {
+  opacity: 1;
+}
+

package/badge.css

@@ -0,0 +1,38 @@
+@keyframes animation-1o6stu {
+  from {
+    transform: scale(0.85);
+  }
+  
+  to {
+    transform: scale(1.0);
+  }
+  
+}
+
+.cnvs-count-badge {
+  box-sizing: border-box;
+  align-items: center;
+  animation: animation-1o6stu 0.2s ease;
+  background: var(--cnvs-sys-color-static-red-default);
+  border-radius: var(--cnvs-sys-shape-round);
+  color: var(--cnvs-sys-color-text-inverse);
+  display: inline-flex;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-size: var(--cnvs-sys-font-size-subtext-medium);
+  font-weight: var(--cnvs-sys-font-weight-bold);
+  height: 1.25rem;
+  justify-content: center;
+  line-height: 1.25rem;
+  min-width: 1.25rem;
+  padding: 0 0.40625rem;
+  text-shadow: 0 0 0.0625rem rgba(0,0,0, 0.35);
+}
+
+
+.cnvs-count-badge.variant-inverse {
+  background: var(--cnvs-sys-color-bg-default);
+  box-shadow: 0 0.0625rem 0.125rem rgba(0,0,0, 0.25);
+  color: var(--cnvs-sys-color-text-primary-default);
+  text-shadow: none;
+}
+

package/banner.css

@@ -0,0 +1,95 @@
+.cnvs-banner-icon {
+  box-sizing: border-box;
+  margin-inline-end: var(--cnvs-sys-space-x3);
+}
+
+
+.cnvs-banner-label {
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 0%;
+}
+
+
+.cnvs-action-bar-text {
+  box-sizing: border-box;
+  text-decoration: underline;
+  display: inline;
+}
+
+
+.cnvs-action-bar-text.is-sticky {
+  display: none;
+}
+
+
+.cnvs-banner {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default),Helvetica Neue,Helvetica,Arial,sans-serif;
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  padding: var(--cnvs-sys-space-x2) var(--cnvs-sys-space-x4);
+  border: 0;
+  display: flex;
+  align-items: center;
+  text-align: left;
+  border-start-start-radius: var(--cnvs-sys-shape-x1);
+  border-start-end-radius: var(--cnvs-sys-shape-x1);
+  border-end-start-radius: var(--cnvs-sys-shape-x1);
+  border-end-end-radius: var(--cnvs-sys-shape-x1);
+  cursor: pointer;
+  transition: background-color 120ms;
+  outline: var(--cnvs-sys-space-x1) solid transparent;
+}
+
+.cnvs-banner:focus-visible, .cnvs-banner.focus {
+  outline: var(--cnvs-sys-shape-x1) double transparent;
+  box-shadow: 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)),0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));
+}
+
+
+.cnvs-banner.has-errors {
+  background-color: var(--cnvs-brand-error-base);
+  color: var(--cnvs-brand-error-accent);
+}
+
+.cnvs-banner.has-errors:hover, .cnvs-banner.has-errors.hover {
+  background: var(--cnvs-brand-error-dark);
+}
+
+.cnvs-banner.has-errors [data-part="exclamation-circle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-color: var(--cnvs-brand-error-accent);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.has-errors-false {
+  background-color: var(--cnvs-brand-alert-base);
+  color: var(--cnvs-sys-color-fg-contrast-default);
+}
+
+.cnvs-banner.has-errors-false:hover, .cnvs-banner.has-errors-false.hover {
+  background: var(--cnvs-brand-alert-dark);
+}
+
+.cnvs-banner.has-errors-false [data-part="exclamation-triangle-icon"] {
+  --cnvs-system-icon-accent-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-color: var(--cnvs-sys-color-fg-contrast-default);
+  --cnvs-system-icon-background-color: none;
+}
+
+
+.cnvs-banner.is-sticky {
+  width: 13.875rem;
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+
+.cnvs-banner.is-sticky-false {
+  width: 20.5rem;
+}
+

package/breadcrumbs.css

@@ -0,0 +1,98 @@
+.cnvs-breadcrumbs-list {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  align-items: center;
+  min-height: var(--cnvs-sys-space-x10);
+  list-style: none;
+  width: 100%;
+}
+
+
+.cnvs-breadcrumbs-overflow-button {
+  box-sizing: border-box;
+  align-items: center;
+  display: flex;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
+  --cnvs-svg-size: 1.25rem;
+}
+
+.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] {
+  height: var(--cnvs-sys-space-x8);
+  width: var(--cnvs-sys-space-x8);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.cnvs-breadcrumbs-overflow-button [data-part="breadcrumbs-overflow-button-chevron-right-icon"] :dir(rtl) {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-breadcrumbs-link {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-normal);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  max-width: var(--cnvs-breadcrumbs-link-max-width);
+}
+
+
+.cnvs-breadcrumbs-item {
+  box-sizing: border-box;
+  align-items: center;
+  display: inline-flex;
+  white-space: nowrap;
+  --cnvs-svg-size: 1.25rem;
+  --cnvs-system-icon-color: var(--cnvs-sys-color-icon-default);
+}
+
+.cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] {
+  height: var(--cnvs-sys-space-x8);
+  width: var(--cnvs-sys-space-x8);
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.cnvs-breadcrumbs-item [data-part="breadcrumbs-item-chevron-right-icon"] :dir(rtl) {
+  transform: scaleX(-1);
+}
+
+
+.cnvs-breadcrumbs-current-item {
+  box-sizing: border-box;
+  font-family: var(--cnvs-sys-font-family-default);
+  font-weight: var(--cnvs-sys-font-weight-medium);
+  line-height: var(--cnvs-sys-line-height-subtext-large);
+  font-size: var(--cnvs-sys-font-size-subtext-large);
+  letter-spacing: var(--cnvs-base-letter-spacing-150);
+  color: var(--cnvs-sys-color-text-default);
+  display: inline-block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: var(--cnvs-breadcrumbs-current-item-max-width);
+}
+
+
+.cnvs-breadcrumbs-menu-item {
+  box-sizing: border-box;
+  text-decoration: none;
+}
+
+
+.cnvs-breadcrumbs-menu-card {
+  box-sizing: border-box;
+  width: 17.5rem;
+  max-width: 17.5rem;
+  max-height: 18.5rem;
+}
+