@sdata/web-vue 3.10.0 → 3.11.0

package/dist/sd.css

@@ -17801,6 +17801,210 @@ body.sd-tour-active .sd-tour-popover * {
   box-shadow: 0 4px 10px rgb(var(--sd-gray-1), 40%);
 }
 
+.sd-selectable-card {
+  position: relative;
+  box-sizing: border-box;
+  color: var(--sd-color-text-1);
+  background: var(--sd-color-bg-2);
+  border: 1px solid var(--sd-color-neutral-3);
+  border-radius: var(--sd-border-radius-large);
+  cursor: pointer;
+  transition: color 0.2s cubic-bezier(0, 0, 1, 1), background-color 0.2s cubic-bezier(0, 0, 1, 1), border-color 0.2s cubic-bezier(0, 0, 1, 1), box-shadow 0.2s cubic-bezier(0, 0, 1, 1);
+}
+.sd-selectable-card::after {
+  position: absolute;
+  background: transparent;
+  border-radius: inherit;
+  transition: background 0.2s cubic-bezier(0, 0, 1, 1);
+  content: "";
+  pointer-events: none;
+  inset: 0;
+}
+@media (hover: hover) {
+  .sd-selectable-card:not(.sd-selectable-card--disabled):hover::after {
+    background: rgba(0, 0, 0, 0.05);
+  }
+}
+.sd-selectable-card:not(.sd-selectable-card--disabled):active::after {
+  background: rgba(0, 0, 0, 0.1);
+}
+.sd-selectable-card:has(.sd-selectable-card-input:focus-visible) {
+  outline: 2px solid rgb(var(--sd-primary-6));
+  outline-offset: 2px;
+}
+.sd-selectable-card-body {
+  display: flex;
+  min-width: 0;
+}
+.sd-selectable-card-content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+}
+.sd-selectable-card-figure {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  color: var(--sd-selectable-card-accent);
+  font-size: 2em;
+}
+.sd-selectable-card-title {
+  color: var(--sd-color-text-2);
+  font-size: 14px;
+}
+.sd-selectable-card-value {
+  color: var(--sd-color-text-1);
+  font-weight: 600;
+  line-height: 1.25;
+}
+.sd-selectable-card-description, .sd-selectable-card-default {
+  color: var(--sd-color-text-3);
+  font-size: 13px;
+  line-height: 1.5715;
+}
+.sd-selectable-card-actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.sd-selectable-card--layout-horizontal .sd-selectable-card-body {
+  flex-direction: row;
+  align-items: center;
+}
+.sd-selectable-card--layout-vertical .sd-selectable-card-body {
+  flex-direction: column;
+}
+.sd-selectable-card--align-center .sd-selectable-card-body, .sd-selectable-card--align-center .sd-selectable-card-content {
+  align-items: center;
+  text-align: center;
+}
+.sd-selectable-card--size-small {
+  padding: 12px;
+}
+.sd-selectable-card--size-small .sd-selectable-card-body, .sd-selectable-card--size-small .sd-selectable-card-content {
+  gap: 8px;
+}
+.sd-selectable-card--size-small .sd-selectable-card-value {
+  font-size: 16px;
+}
+.sd-selectable-card--size-medium {
+  padding: 16px;
+}
+.sd-selectable-card--size-medium .sd-selectable-card-body, .sd-selectable-card--size-medium .sd-selectable-card-content {
+  gap: 12px;
+}
+.sd-selectable-card--size-medium .sd-selectable-card-value {
+  font-size: 20px;
+}
+.sd-selectable-card--size-large {
+  padding: 24px;
+}
+.sd-selectable-card--size-large .sd-selectable-card-body, .sd-selectable-card--size-large .sd-selectable-card-content {
+  gap: 20px;
+}
+.sd-selectable-card--size-large .sd-selectable-card-value {
+  font-size: 24px;
+}
+.sd-selectable-card--color-red {
+  --sd-selectable-card-accent: rgb(var(--sd-red-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-red-1));
+  --sd-selectable-card-border: rgb(var(--sd-red-6));
+}
+.sd-selectable-card--color-orangered {
+  --sd-selectable-card-accent: rgb(var(--sd-orangered-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-orangered-1));
+  --sd-selectable-card-border: rgb(var(--sd-orangered-6));
+}
+.sd-selectable-card--color-orange {
+  --sd-selectable-card-accent: rgb(var(--sd-orange-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-orange-1));
+  --sd-selectable-card-border: rgb(var(--sd-orange-6));
+}
+.sd-selectable-card--color-gold {
+  --sd-selectable-card-accent: rgb(var(--sd-gold-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-gold-1));
+  --sd-selectable-card-border: rgb(var(--sd-gold-6));
+}
+.sd-selectable-card--color-lime {
+  --sd-selectable-card-accent: rgb(var(--sd-lime-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-lime-1));
+  --sd-selectable-card-border: rgb(var(--sd-lime-6));
+}
+.sd-selectable-card--color-green {
+  --sd-selectable-card-accent: rgb(var(--sd-green-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-green-1));
+  --sd-selectable-card-border: rgb(var(--sd-green-6));
+}
+.sd-selectable-card--color-cyan {
+  --sd-selectable-card-accent: rgb(var(--sd-cyan-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-cyan-1));
+  --sd-selectable-card-border: rgb(var(--sd-cyan-6));
+}
+.sd-selectable-card--color-blue {
+  --sd-selectable-card-accent: rgb(var(--sd-blue-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-blue-1));
+  --sd-selectable-card-border: rgb(var(--sd-blue-6));
+}
+.sd-selectable-card--color-sdblue {
+  --sd-selectable-card-accent: rgb(var(--sd-sdblue-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-sdblue-1));
+  --sd-selectable-card-border: rgb(var(--sd-sdblue-6));
+}
+.sd-selectable-card--color-purple {
+  --sd-selectable-card-accent: rgb(var(--sd-purple-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-purple-1));
+  --sd-selectable-card-border: rgb(var(--sd-purple-6));
+}
+.sd-selectable-card--color-pinkpurple {
+  --sd-selectable-card-accent: rgb(var(--sd-pinkpurple-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-pinkpurple-1));
+  --sd-selectable-card-border: rgb(var(--sd-pinkpurple-6));
+}
+.sd-selectable-card--color-magenta {
+  --sd-selectable-card-accent: rgb(var(--sd-magenta-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-magenta-1));
+  --sd-selectable-card-border: rgb(var(--sd-magenta-6));
+}
+.sd-selectable-card--color-gray {
+  --sd-selectable-card-accent: rgb(var(--sd-gray-6));
+  --sd-selectable-card-soft-bg: rgb(var(--sd-gray-2));
+  --sd-selectable-card-border: rgb(var(--sd-gray-6));
+}
+.sd-selectable-card--selected {
+  border-color: var(--sd-selectable-card-border);
+  box-shadow: inset 0 0 0 2px var(--sd-selectable-card-border);
+}
+.sd-selectable-card--selected.sd-selectable-card--soft {
+  color: var(--sd-selectable-card-accent);
+  background: var(--sd-selectable-card-soft-bg);
+}
+.sd-selectable-card--selected.sd-selectable-card--filled {
+  color: #fff;
+  background: var(--sd-selectable-card-border);
+}
+.sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-title, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-value, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-description, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-default, .sd-selectable-card--selected.sd-selectable-card--filled .sd-selectable-card-figure {
+  color: inherit;
+}
+.sd-selectable-card--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+.sd-selectable-card-input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
 .sd-calendar--default-theme,
 [class$=-calendar--default-theme] {
   --sd-calendar-primary-color: rgb(var(--sd-primary-6));