zenkit-css 1.0.0

package/scss/components/_cards.scss

@@ -0,0 +1,265 @@
+// ========================================
+// ZenKit - Cards
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Base Card
+// ----------------------------------------
+.card {
+  @include card;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+// ----------------------------------------
+// Card Sections
+// ----------------------------------------
+.card-header {
+  padding: 1rem 1.25rem;
+  border-bottom: $border-width solid var(--border);
+  background-color: var(--bg-muted);
+
+  &:first-child {
+    border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
+  }
+}
+
+.card-body {
+  flex: 1 1 auto;
+  padding: 1.25rem;
+}
+
+.card-footer {
+  padding: 1rem 1.25rem;
+  border-top: $border-width solid var(--border);
+  background-color: var(--bg-muted);
+
+  &:last-child {
+    border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
+  }
+}
+
+// ----------------------------------------
+// Card Title & Text
+// ----------------------------------------
+.card-title {
+  margin-bottom: 0.5rem;
+  font-size: var(--text-xl);
+  font-weight: $font-weight-semibold;
+  color: var(--text);
+}
+
+.card-subtitle {
+  margin-top: -0.25rem;
+  margin-bottom: 0.5rem;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
+.card-text {
+  color: var(--text-secondary);
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// ----------------------------------------
+// Card Image
+// ----------------------------------------
+.card-img-top {
+  width: 100%;
+  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
+}
+
+.card-img-bottom {
+  width: 100%;
+  border-radius: 0 0 calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px);
+}
+
+.card-img {
+  width: 100%;
+}
+
+// Card image overlay
+.card-img-overlay {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 1.25rem;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  border-radius: calc(var(--radius-lg) - 1px);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  color: var(--white);
+
+  .card-title,
+  .card-text {
+    color: var(--white);
+  }
+}
+
+// ----------------------------------------
+// Card Variants
+// ----------------------------------------
+.card-hover {
+  transition: transform var(--transition-base) ease-in-out,
+              box-shadow var(--transition-base) ease-in-out;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: var(--shadow-lg);
+  }
+}
+
+.card-clickable {
+  cursor: pointer;
+  transition: transform var(--transition-base) ease-in-out,
+              box-shadow var(--transition-base) ease-in-out;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-md);
+  }
+
+  &:active {
+    transform: translateY(0);
+  }
+}
+
+// ----------------------------------------
+// Card Sizes
+// ----------------------------------------
+.card-sm {
+  .card-header,
+  .card-footer {
+    padding: 0.75rem 1rem;
+  }
+
+  .card-body {
+    padding: 1rem;
+  }
+}
+
+.card-lg {
+  .card-header,
+  .card-footer {
+    padding: 1.25rem 1.5rem;
+  }
+
+  .card-body {
+    padding: 1.5rem;
+  }
+}
+
+// ----------------------------------------
+// Card Colors
+// ----------------------------------------
+.card-primary {
+  background-color: var(--primary);
+  border-color: var(--primary);
+  color: var(--white);
+
+  .card-header,
+  .card-footer {
+    background-color: rgba(0, 0, 0, 0.1);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+
+  .card-title,
+  .card-text {
+    color: var(--white);
+  }
+}
+
+.card-success {
+  background-color: var(--success-light);
+  border-color: var(--success);
+
+  .card-header {
+    background-color: var(--success);
+    color: var(--white);
+    border-color: var(--success);
+  }
+}
+
+.card-danger {
+  background-color: var(--danger-light);
+  border-color: var(--danger);
+
+  .card-header {
+    background-color: var(--danger);
+    color: var(--white);
+    border-color: var(--danger);
+  }
+}
+
+.card-warning {
+  background-color: var(--warning-light);
+  border-color: var(--warning);
+
+  .card-header {
+    background-color: var(--warning);
+    color: var(--gray-900);
+    border-color: var(--warning);
+  }
+}
+
+.card-info {
+  background-color: var(--info-light);
+  border-color: var(--info);
+
+  .card-header {
+    background-color: var(--info);
+    color: var(--white);
+    border-color: var(--info);
+  }
+}
+
+// ----------------------------------------
+// Horizontal Card
+// ----------------------------------------
+.card-horizontal {
+  flex-direction: row;
+
+  .card-img-left {
+    width: 40%;
+    object-fit: cover;
+    border-radius: calc(var(--radius-lg) - 1px) 0 0 calc(var(--radius-lg) - 1px);
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+}
+
+// ----------------------------------------
+// Card Group
+// ----------------------------------------
+.card-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+
+  > .card {
+    flex: 1 1 300px;
+  }
+}
+
+// ----------------------------------------
+// Card Grid
+// ----------------------------------------
+.card-grid {
+  display: grid;
+  gap: 1.5rem;
+  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+}

package/scss/components/_carousel.scss

@@ -0,0 +1,306 @@
+// ========================================
+// ZenKit - Carousel
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Carousel Variables
+// ----------------------------------------
+.carousel {
+  --carousel-control-color: var(--white);
+  --carousel-control-width: 15%;
+  --carousel-control-opacity: 0.5;
+  --carousel-control-hover-opacity: 0.9;
+  --carousel-control-transition: opacity 0.15s ease;
+  --carousel-indicator-width: 30px;
+  --carousel-indicator-height: 3px;
+  --carousel-indicator-hit-area-height: 10px;
+  --carousel-indicator-spacer: 3px;
+  --carousel-indicator-opacity: 0.5;
+  --carousel-indicator-active-bg: var(--white);
+  --carousel-indicator-active-opacity: 1;
+  --carousel-indicator-transition: opacity 0.6s ease;
+  --carousel-caption-width: 70%;
+  --carousel-caption-color: var(--white);
+  --carousel-caption-padding-y: 1.25rem;
+  --carousel-caption-spacer: 1.25rem;
+  --carousel-control-icon-width: 2rem;
+  --carousel-transition-duration: 0.6s;
+
+  position: relative;
+}
+
+// ----------------------------------------
+// Carousel Inner
+// ----------------------------------------
+.carousel-inner {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &::after {
+    display: block;
+    clear: both;
+    content: "";
+  }
+}
+
+// ----------------------------------------
+// Carousel Item
+// ----------------------------------------
+.carousel-item {
+  position: relative;
+  display: none;
+  float: left;
+  width: 100%;
+  margin-right: -100%;
+  backface-visibility: hidden;
+  transition: transform var(--carousel-transition-duration) ease-in-out;
+}
+
+.carousel-item.active,
+.carousel-item-next,
+.carousel-item-prev {
+  display: block;
+}
+
+.carousel-item-next:not(.carousel-item-start),
+.active.carousel-item-end {
+  transform: translateX(100%);
+}
+
+.carousel-item-prev:not(.carousel-item-end),
+.active.carousel-item-start {
+  transform: translateX(-100%);
+}
+
+// ----------------------------------------
+// Carousel Fade
+// ----------------------------------------
+.carousel-fade {
+  .carousel-item {
+    opacity: 0;
+    transition-property: opacity;
+    transform: none;
+  }
+
+  .carousel-item.active,
+  .carousel-item-next.carousel-item-start,
+  .carousel-item-prev.carousel-item-end {
+    z-index: 1;
+    opacity: 1;
+  }
+
+  .active.carousel-item-start,
+  .active.carousel-item-end {
+    z-index: 0;
+    opacity: 0;
+    transition: opacity 0s var(--carousel-transition-duration);
+  }
+}
+
+// ----------------------------------------
+// Carousel Controls
+// ----------------------------------------
+.carousel-control-prev,
+.carousel-control-next {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--carousel-control-width);
+  padding: 0;
+  color: var(--carousel-control-color);
+  text-align: center;
+  background: none;
+  border: 0;
+  opacity: var(--carousel-control-opacity);
+  transition: var(--carousel-control-transition);
+
+  &:hover {
+    color: var(--carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: var(--carousel-control-hover-opacity);
+  }
+
+  &:focus {
+    color: var(--carousel-control-color);
+    text-decoration: none;
+    outline: 0;
+    opacity: var(--carousel-control-hover-opacity);
+  }
+}
+
+.carousel-control-prev {
+  left: 0;
+  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
+}
+
+.carousel-control-next {
+  right: 0;
+  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.001));
+}
+
+// ----------------------------------------
+// Carousel Control Icons
+// ----------------------------------------
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+  display: inline-block;
+  width: var(--carousel-control-icon-width);
+  height: var(--carousel-control-icon-width);
+  background-repeat: no-repeat;
+  background-position: 50%;
+  background-size: 100% 100%;
+}
+
+.carousel-control-prev-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+}
+
+.carousel-control-next-icon {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+}
+
+// ----------------------------------------
+// Carousel Indicators
+// ----------------------------------------
+.carousel-indicators {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  display: flex;
+  justify-content: center;
+  padding: 0;
+  margin-right: var(--carousel-control-width);
+  margin-bottom: 1rem;
+  margin-left: var(--carousel-control-width);
+
+  [data-slide-to] {
+    box-sizing: content-box;
+    flex: 0 1 auto;
+    width: var(--carousel-indicator-width);
+    height: var(--carousel-indicator-height);
+    padding: 0;
+    margin-right: var(--carousel-indicator-spacer);
+    margin-left: var(--carousel-indicator-spacer);
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: var(--carousel-indicator-active-bg);
+    background-clip: padding-box;
+    border: 0;
+    border-top: var(--carousel-indicator-hit-area-height) solid transparent;
+    border-bottom: var(--carousel-indicator-hit-area-height) solid transparent;
+    opacity: var(--carousel-indicator-opacity);
+    transition: var(--carousel-indicator-transition);
+  }
+
+  .active {
+    opacity: var(--carousel-indicator-active-opacity);
+  }
+}
+
+// ----------------------------------------
+// Carousel Caption
+// ----------------------------------------
+.carousel-caption {
+  position: absolute;
+  right: calc((100% - var(--carousel-caption-width)) * 0.5);
+  bottom: var(--carousel-caption-spacer);
+  left: calc((100% - var(--carousel-caption-width)) * 0.5);
+  padding-top: var(--carousel-caption-padding-y);
+  padding-bottom: var(--carousel-caption-padding-y);
+  color: var(--carousel-caption-color);
+  text-align: center;
+}
+
+// ----------------------------------------
+// Carousel Dark
+// ----------------------------------------
+.carousel-dark {
+  --carousel-control-color: var(--gray-900);
+  --carousel-indicator-active-bg: var(--gray-900);
+  --carousel-caption-color: var(--gray-900);
+
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  }
+
+  .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  }
+}
+
+// ----------------------------------------
+// Carousel Thumbnails
+// ----------------------------------------
+.carousel-thumbnails {
+  display: flex;
+  justify-content: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+
+  .carousel-thumbnail {
+    width: 60px;
+    height: 40px;
+    object-fit: cover;
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    opacity: 0.6;
+    transition: all $transition-fast ease;
+
+    &:hover {
+      opacity: 0.8;
+    }
+
+    &.active {
+      border-color: var(--primary);
+      opacity: 1;
+    }
+  }
+}
+
+// ----------------------------------------
+// Reduced Motion
+// ----------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .carousel-item {
+    transition: none;
+  }
+
+  .carousel-fade .carousel-item {
+    transition: none;
+  }
+
+  .carousel-control-prev,
+  .carousel-control-next {
+    transition: none;
+  }
+
+  .carousel-indicators [data-slide-to] {
+    transition: none;
+  }
+}
+
+// ----------------------------------------
+// Carousel Sizes
+// ----------------------------------------
+.carousel-sm {
+  --carousel-control-icon-width: 1.5rem;
+  --carousel-indicator-width: 20px;
+  --carousel-indicator-height: 2px;
+}
+
+.carousel-lg {
+  --carousel-control-icon-width: 3rem;
+  --carousel-indicator-width: 40px;
+  --carousel-indicator-height: 4px;
+}