zenkit-css 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zenkit-css",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "A minimal, modern CSS framework for peaceful development",
   "main": "dist/zenkit.css",
   "scripts": {

package/scss/components/_cards.scss

@@ -263,3 +263,370 @@
   gap: 1.5rem;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
 }
+
+// ----------------------------------------
+// Card Variants - Outlined, Filled, Elevated
+// ----------------------------------------
+.card-outlined {
+  background-color: transparent;
+  border: 2px solid var(--border);
+  box-shadow: none;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+    border-color: var(--border);
+  }
+}
+
+.card-filled {
+  background-color: var(--bg-muted);
+  border: none;
+  box-shadow: none;
+
+  .card-header,
+  .card-footer {
+    background-color: rgba(0, 0, 0, 0.03);
+    border-color: rgba(0, 0, 0, 0.05);
+  }
+}
+
+.card-elevated {
+  background-color: var(--bg-card);
+  border: none;
+  box-shadow: var(--shadow-md);
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+    border-color: var(--border);
+  }
+
+  &:hover {
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+.card-elevated-lg {
+  box-shadow: var(--shadow-lg);
+
+  &:hover {
+    box-shadow: var(--shadow-xl);
+  }
+}
+
+// ----------------------------------------
+// Card Actions
+// ----------------------------------------
+.card-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  padding: 0.75rem 1.25rem;
+  border-top: $border-width solid var(--border);
+  background-color: transparent;
+
+  .btn {
+    margin: 0;
+  }
+}
+
+.card-actions-start {
+  justify-content: flex-start;
+}
+
+.card-actions-center {
+  justify-content: center;
+}
+
+.card-actions-between {
+  justify-content: space-between;
+}
+
+.card-actions-stacked {
+  flex-direction: column;
+  align-items: stretch;
+
+  .btn {
+    width: 100%;
+  }
+}
+
+// ----------------------------------------
+// Card with Borderless Header/Footer
+// ----------------------------------------
+.card-borderless {
+  .card-header {
+    border-bottom: none;
+    background-color: transparent;
+  }
+
+  .card-footer {
+    border-top: none;
+    background-color: transparent;
+  }
+}
+
+// ----------------------------------------
+// Card Ghost (No background)
+// ----------------------------------------
+.card-ghost {
+  background-color: transparent;
+  border: none;
+  box-shadow: none;
+
+  .card-header,
+  .card-footer {
+    background-color: transparent;
+    border-color: var(--border);
+  }
+}
+
+// ----------------------------------------
+// Card Interactive States
+// ----------------------------------------
+.card-selectable {
+  cursor: pointer;
+  transition: border-color $transition-fast ease-in-out,
+              box-shadow $transition-fast ease-in-out;
+
+  &:hover {
+    border-color: var(--primary-300);
+  }
+
+  &.is-selected {
+    border-color: var(--primary);
+    box-shadow: 0 0 0 2px rgba($primary, 0.15);
+  }
+}
+
+.card-focusable {
+  &:focus {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba($primary, 0.15);
+  }
+
+  &:focus-visible {
+    outline: none;
+    border-color: var(--primary);
+    box-shadow: 0 0 0 3px rgba($primary, 0.15);
+  }
+}
+
+// ----------------------------------------
+// Card with Badge/Ribbon
+// ----------------------------------------
+.card-badge {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 1;
+}
+
+.card-ribbon {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.25rem 0.75rem;
+  font-size: var(--text-xs);
+  font-weight: $font-weight-semibold;
+  color: var(--white);
+  background-color: var(--primary);
+  border-radius: 0 calc(var(--radius-lg) - 1px) 0 var(--radius);
+}
+
+.card-ribbon-success {
+  background-color: var(--success);
+}
+
+.card-ribbon-danger {
+  background-color: var(--danger);
+}
+
+.card-ribbon-warning {
+  background-color: var(--warning);
+  color: var(--gray-900);
+}
+
+// ----------------------------------------
+// Card Loading State
+// ----------------------------------------
+.card-loading {
+  position: relative;
+  pointer-events: none;
+
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-color: rgba(255, 255, 255, 0.7);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: inherit;
+    z-index: 10;
+  }
+
+  .card-loading-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 11;
+    width: 2rem;
+    height: 2rem;
+    border: 2px solid var(--border);
+    border-top-color: var(--primary);
+    border-radius: 50%;
+    animation: card-spin 0.6s linear infinite;
+  }
+}
+
+@keyframes card-spin {
+  to {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+// ----------------------------------------
+// Card Expandable
+// ----------------------------------------
+.card-expandable {
+  .card-expand-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+    padding: 0.75rem 1.25rem;
+    font-size: var(--text-sm);
+    color: var(--text-muted);
+    background: transparent;
+    border: none;
+    border-top: $border-width solid var(--border);
+    cursor: pointer;
+    transition: color $transition-fast ease-in-out;
+
+    &:hover {
+      color: var(--text);
+    }
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+      transition: transform $transition-fast ease-in-out;
+    }
+  }
+
+  &.is-expanded .card-expand-btn svg {
+    transform: rotate(180deg);
+  }
+
+  .card-expand-content {
+    max-height: 0;
+    overflow: hidden;
+    transition: max-height $transition-base ease-in-out;
+  }
+
+  &.is-expanded .card-expand-content {
+    max-height: 1000px;
+  }
+}
+
+// ----------------------------------------
+// Card Media (Full-width sections)
+// ----------------------------------------
+.card-media {
+  position: relative;
+  overflow: hidden;
+
+  img,
+  video {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.card-media-top {
+  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
+}
+
+.card-media-bottom {
+  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
+}
+
+// ----------------------------------------
+// Card Compact
+// ----------------------------------------
+.card-compact {
+  .card-header,
+  .card-footer {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .card-body {
+    padding: 0.75rem;
+  }
+
+  .card-actions {
+    padding: 0.5rem 0.75rem;
+  }
+}
+
+// ----------------------------------------
+// Card Link (Entire card is clickable)
+// ----------------------------------------
+.card-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
+// ----------------------------------------
+// Dark Mode Enhancements
+// ----------------------------------------
+[data-theme="dark"] {
+  .card-outlined {
+    border-color: var(--gray-700);
+
+    .card-header,
+    .card-footer {
+      border-color: var(--gray-700);
+    }
+  }
+
+  .card-filled {
+    background-color: var(--gray-800);
+
+    .card-header,
+    .card-footer {
+      background-color: rgba(0, 0, 0, 0.2);
+      border-color: var(--gray-700);
+    }
+  }
+
+  .card-elevated {
+    background-color: var(--gray-800);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
+
+    &:hover {
+      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
+    }
+  }
+
+  .card-loading::after {
+    background-color: rgba(0, 0, 0, 0.7);
+  }
+
+  .card-loading .card-loading-spinner {
+    border-color: var(--gray-600);
+    border-top-color: var(--primary);
+  }
+}