zenkit-css 1.0.0

package/scss/components/_offcanvas.scss

@@ -0,0 +1,274 @@
+// ========================================
+// ZenKit - Offcanvas
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Offcanvas Variables
+// ----------------------------------------
+.offcanvas,
+.offcanvas-xxl,
+.offcanvas-xl,
+.offcanvas-lg,
+.offcanvas-md,
+.offcanvas-sm {
+  --offcanvas-zindex: #{$z-modal};
+  --offcanvas-width: 400px;
+  --offcanvas-height: 30vh;
+  --offcanvas-padding-x: 1rem;
+  --offcanvas-padding-y: 1rem;
+  --offcanvas-color: var(--text);
+  --offcanvas-bg: var(--bg-card);
+  --offcanvas-border-width: #{$border-width};
+  --offcanvas-border-color: var(--border);
+  --offcanvas-box-shadow: #{$shadow-xl};
+  --offcanvas-transition: transform 0.3s ease-in-out;
+  --offcanvas-title-line-height: 1.5;
+}
+
+// ----------------------------------------
+// Offcanvas Base
+// ----------------------------------------
+.offcanvas {
+  position: fixed;
+  bottom: 0;
+  z-index: var(--offcanvas-zindex);
+  display: flex;
+  flex-direction: column;
+  max-width: 100%;
+  color: var(--offcanvas-color);
+  visibility: hidden;
+  background-color: var(--offcanvas-bg);
+  background-clip: padding-box;
+  outline: 0;
+  box-shadow: var(--offcanvas-box-shadow);
+  transition: var(--offcanvas-transition);
+
+  &.showing,
+  &.show:not(.hiding) {
+    transform: none;
+  }
+
+  &.showing,
+  &.hiding,
+  &.show {
+    visibility: visible;
+  }
+}
+
+// ----------------------------------------
+// Offcanvas Backdrop
+// ----------------------------------------
+.offcanvas-backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: calc(var(--offcanvas-zindex) - 1);
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+
+  &.fade {
+    opacity: 0;
+  }
+
+  &.show {
+    opacity: 1;
+  }
+}
+
+// ----------------------------------------
+// Offcanvas Positions
+// ----------------------------------------
+.offcanvas-start {
+  top: 0;
+  left: 0;
+  width: var(--offcanvas-width);
+  border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  transform: translateX(-100%);
+}
+
+.offcanvas-end {
+  top: 0;
+  right: 0;
+  width: var(--offcanvas-width);
+  border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  transform: translateX(100%);
+}
+
+.offcanvas-top {
+  top: 0;
+  right: 0;
+  left: 0;
+  height: var(--offcanvas-height);
+  max-height: 100%;
+  border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  transform: translateY(-100%);
+}
+
+.offcanvas-bottom {
+  right: 0;
+  left: 0;
+  height: var(--offcanvas-height);
+  max-height: 100%;
+  border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  transform: translateY(100%);
+}
+
+// ----------------------------------------
+// Offcanvas Header
+// ----------------------------------------
+.offcanvas-header {
+  display: flex;
+  align-items: center;
+  padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
+  border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+
+  .btn-close {
+    padding: calc(var(--offcanvas-padding-y) * 0.5) calc(var(--offcanvas-padding-x) * 0.5);
+    margin: calc(-0.5 * var(--offcanvas-padding-y)) calc(-0.5 * var(--offcanvas-padding-x)) calc(-0.5 * var(--offcanvas-padding-y)) auto;
+  }
+}
+
+// ----------------------------------------
+// Offcanvas Title
+// ----------------------------------------
+.offcanvas-title {
+  margin-bottom: 0;
+  line-height: var(--offcanvas-title-line-height);
+  font-weight: $font-weight-semibold;
+  font-size: var(--text-lg);
+}
+
+// ----------------------------------------
+// Offcanvas Body
+// ----------------------------------------
+.offcanvas-body {
+  flex-grow: 1;
+  padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
+  overflow-y: auto;
+}
+
+// ----------------------------------------
+// Offcanvas Footer
+// ----------------------------------------
+.offcanvas-footer {
+  display: flex;
+  flex-shrink: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
+  border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+  gap: 0.5rem;
+}
+
+// ----------------------------------------
+// Responsive Offcanvas
+// ----------------------------------------
+@each $breakpoint, $value in $breakpoints {
+  @media (max-width: #{$value - 0.02px}) {
+    .offcanvas-#{$breakpoint} {
+      position: fixed;
+      bottom: 0;
+      z-index: var(--offcanvas-zindex);
+      display: flex;
+      flex-direction: column;
+      max-width: 100%;
+      color: var(--offcanvas-color);
+      visibility: hidden;
+      background-color: var(--offcanvas-bg);
+      background-clip: padding-box;
+      outline: 0;
+      box-shadow: var(--offcanvas-box-shadow);
+      transition: var(--offcanvas-transition);
+
+      &.showing,
+      &.show:not(.hiding) {
+        transform: none;
+      }
+
+      &.showing,
+      &.hiding,
+      &.show {
+        visibility: visible;
+      }
+    }
+
+    .offcanvas-#{$breakpoint}.offcanvas-start {
+      top: 0;
+      left: 0;
+      width: var(--offcanvas-width);
+      border-right: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+      transform: translateX(-100%);
+    }
+
+    .offcanvas-#{$breakpoint}.offcanvas-end {
+      top: 0;
+      right: 0;
+      width: var(--offcanvas-width);
+      border-left: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+      transform: translateX(100%);
+    }
+
+    .offcanvas-#{$breakpoint}.offcanvas-top {
+      top: 0;
+      right: 0;
+      left: 0;
+      height: var(--offcanvas-height);
+      max-height: 100%;
+      border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+      transform: translateY(-100%);
+    }
+
+    .offcanvas-#{$breakpoint}.offcanvas-bottom {
+      right: 0;
+      left: 0;
+      height: var(--offcanvas-height);
+      max-height: 100%;
+      border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
+      transform: translateY(100%);
+    }
+  }
+
+  @media (min-width: $value) {
+    .offcanvas-#{$breakpoint} {
+      --offcanvas-height: auto;
+      --offcanvas-border-width: 0;
+      background-color: transparent !important;
+      box-shadow: none;
+
+      .offcanvas-header {
+        display: none;
+      }
+
+      .offcanvas-body {
+        display: flex;
+        flex-grow: 0;
+        padding: 0;
+        overflow-y: visible;
+        background-color: transparent !important;
+      }
+    }
+  }
+}
+
+// ----------------------------------------
+// Offcanvas Sizes
+// ----------------------------------------
+.offcanvas-sm {
+  --offcanvas-width: 300px;
+}
+
+.offcanvas-lg {
+  --offcanvas-width: 500px;
+}
+
+.offcanvas-xl {
+  --offcanvas-width: 600px;
+}
+
+.offcanvas-fullwidth {
+  --offcanvas-width: 100%;
+}

package/scss/components/_pagination.scss

@@ -0,0 +1,176 @@
+// ========================================
+// ZenKit - Pagination
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Pagination Container
+// ----------------------------------------
+.pagination {
+  --pagination-padding-x: 0.75rem;
+  --pagination-padding-y: 0.375rem;
+  --pagination-font-size: var(--text-base);
+  --pagination-color: var(--link);
+  --pagination-bg: var(--bg-card);
+  --pagination-border-width: #{$border-width};
+  --pagination-border-color: var(--border);
+  --pagination-border-radius: var(--radius);
+  --pagination-hover-color: var(--link-hover);
+  --pagination-hover-bg: var(--bg-muted);
+  --pagination-hover-border-color: var(--border);
+  --pagination-focus-color: var(--link-hover);
+  --pagination-focus-bg: var(--bg-muted);
+  --pagination-focus-box-shadow: 0 0 0 0.25rem #{rgba($primary, 0.25)};
+  --pagination-active-color: var(--white);
+  --pagination-active-bg: var(--primary);
+  --pagination-active-border-color: var(--primary);
+  --pagination-disabled-color: var(--text-muted);
+  --pagination-disabled-bg: var(--bg-card);
+  --pagination-disabled-border-color: var(--border);
+
+  display: flex;
+  padding-left: 0;
+  list-style: none;
+}
+
+// ----------------------------------------
+// Page Link
+// ----------------------------------------
+.page-link {
+  position: relative;
+  display: block;
+  padding: var(--pagination-padding-y) var(--pagination-padding-x);
+  font-size: var(--pagination-font-size);
+  color: var(--pagination-color);
+  text-decoration: none;
+  background-color: var(--pagination-bg);
+  border: var(--pagination-border-width) solid var(--pagination-border-color);
+  transition: color $transition-fast ease-in-out,
+              background-color $transition-fast ease-in-out,
+              border-color $transition-fast ease-in-out,
+              box-shadow $transition-fast ease-in-out;
+
+  &:hover {
+    z-index: 2;
+    color: var(--pagination-hover-color);
+    background-color: var(--pagination-hover-bg);
+    border-color: var(--pagination-hover-border-color);
+  }
+
+  &:focus {
+    z-index: 3;
+    color: var(--pagination-focus-color);
+    background-color: var(--pagination-focus-bg);
+    outline: 0;
+    box-shadow: var(--pagination-focus-box-shadow);
+  }
+}
+
+// ----------------------------------------
+// Page Item
+// ----------------------------------------
+.page-item {
+  &:not(:first-child) .page-link {
+    margin-left: calc(-1 * var(--pagination-border-width));
+  }
+
+  &:first-child .page-link {
+    border-top-left-radius: var(--pagination-border-radius);
+    border-bottom-left-radius: var(--pagination-border-radius);
+  }
+
+  &:last-child .page-link {
+    border-top-right-radius: var(--pagination-border-radius);
+    border-bottom-right-radius: var(--pagination-border-radius);
+  }
+
+  &.active .page-link {
+    z-index: 3;
+    color: var(--pagination-active-color);
+    background-color: var(--pagination-active-bg);
+    border-color: var(--pagination-active-border-color);
+  }
+
+  &.disabled .page-link {
+    color: var(--pagination-disabled-color);
+    pointer-events: none;
+    background-color: var(--pagination-disabled-bg);
+    border-color: var(--pagination-disabled-border-color);
+  }
+}
+
+// ----------------------------------------
+// Pagination Sizes
+// ----------------------------------------
+.pagination-lg {
+  --pagination-padding-x: 1rem;
+  --pagination-padding-y: 0.5rem;
+  --pagination-font-size: var(--text-lg);
+  --pagination-border-radius: var(--radius-lg);
+}
+
+.pagination-sm {
+  --pagination-padding-x: 0.5rem;
+  --pagination-padding-y: 0.25rem;
+  --pagination-font-size: var(--text-sm);
+  --pagination-border-radius: var(--radius-sm);
+}
+
+// ----------------------------------------
+// Pagination Alignment
+// ----------------------------------------
+.pagination-center {
+  justify-content: center;
+}
+
+.pagination-end {
+  justify-content: flex-end;
+}
+
+// ----------------------------------------
+// Pagination with Gap
+// ----------------------------------------
+.pagination-gap {
+  gap: 0.25rem;
+
+  .page-item:not(:first-child) .page-link {
+    margin-left: 0;
+  }
+
+  .page-link {
+    border-radius: var(--pagination-border-radius);
+  }
+}
+
+// ----------------------------------------
+// Pagination Circle
+// ----------------------------------------
+.pagination-circle {
+  gap: 0.25rem;
+
+  .page-link {
+    width: 2.5rem;
+    height: 2.5rem;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+
+  .page-item:not(:first-child) .page-link {
+    margin-left: 0;
+  }
+}
+
+.pagination-circle.pagination-sm .page-link {
+  width: 2rem;
+  height: 2rem;
+}
+
+.pagination-circle.pagination-lg .page-link {
+  width: 3rem;
+  height: 3rem;
+}

package/scss/components/_placeholder.scss

@@ -0,0 +1,237 @@
+// ========================================
+// ZenKit - Placeholders (Skeleton Loaders)
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Base Placeholder
+// ----------------------------------------
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentColor;
+  opacity: 0.5;
+
+  &.btn::before {
+    display: inline-block;
+    content: "";
+  }
+}
+
+// ----------------------------------------
+// Placeholder with Text
+// ----------------------------------------
+a.placeholder {
+  pointer-events: none;
+}
+
+// ----------------------------------------
+// Placeholder Sizing
+// ----------------------------------------
+.placeholder-xs {
+  min-height: 0.6em;
+}
+
+.placeholder-sm {
+  min-height: 0.8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+// ----------------------------------------
+// Placeholder Widths
+// ----------------------------------------
+.placeholder-w-25 { width: 25%; }
+.placeholder-w-50 { width: 50%; }
+.placeholder-w-75 { width: 75%; }
+.placeholder-w-100 { width: 100%; }
+
+// ----------------------------------------
+// Placeholder Glow Animation
+// ----------------------------------------
+.placeholder-glow .placeholder {
+  animation: placeholder-glow 2s ease-in-out infinite;
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: 0.2;
+  }
+}
+
+// ----------------------------------------
+// Placeholder Wave Animation
+// ----------------------------------------
+.placeholder-wave {
+  mask-image: linear-gradient(
+    130deg,
+    #000 55%,
+    rgba(0, 0, 0, 0.8) 75%,
+    #000 95%
+  );
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}
+
+// ----------------------------------------
+// Skeleton Card
+// ----------------------------------------
+.skeleton-card {
+  .skeleton-img {
+    width: 100%;
+    height: 200px;
+    background-color: var(--gray-200);
+    border-radius: var(--radius) var(--radius) 0 0;
+  }
+
+  .skeleton-body {
+    padding: 1rem;
+  }
+
+  .skeleton-title {
+    height: 1.5rem;
+    width: 60%;
+    background-color: var(--gray-200);
+    border-radius: var(--radius-sm);
+    margin-bottom: 0.75rem;
+  }
+
+  .skeleton-text {
+    height: 1rem;
+    background-color: var(--gray-200);
+    border-radius: var(--radius-sm);
+    margin-bottom: 0.5rem;
+
+    &:last-child {
+      width: 80%;
+    }
+  }
+}
+
+// ----------------------------------------
+// Skeleton Avatar
+// ----------------------------------------
+.skeleton-avatar {
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+  background-color: var(--gray-200);
+}
+
+.skeleton-avatar-sm {
+  width: 2rem;
+  height: 2rem;
+}
+
+.skeleton-avatar-lg {
+  width: 4rem;
+  height: 4rem;
+}
+
+// ----------------------------------------
+// Skeleton Button
+// ----------------------------------------
+.skeleton-btn {
+  display: inline-block;
+  height: 2.5rem;
+  width: 6rem;
+  background-color: var(--gray-200);
+  border-radius: var(--radius);
+}
+
+.skeleton-btn-sm {
+  height: 2rem;
+  width: 4rem;
+}
+
+.skeleton-btn-lg {
+  height: 3rem;
+  width: 8rem;
+}
+
+// ----------------------------------------
+// Skeleton List
+// ----------------------------------------
+.skeleton-list {
+  .skeleton-list-item {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--border);
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  .skeleton-list-avatar {
+    flex-shrink: 0;
+    width: 2.5rem;
+    height: 2.5rem;
+    border-radius: 50%;
+    background-color: var(--gray-200);
+  }
+
+  .skeleton-list-content {
+    flex: 1;
+  }
+
+  .skeleton-list-title {
+    height: 0.875rem;
+    width: 40%;
+    background-color: var(--gray-200);
+    border-radius: var(--radius-sm);
+    margin-bottom: 0.5rem;
+  }
+
+  .skeleton-list-subtitle {
+    height: 0.75rem;
+    width: 60%;
+    background-color: var(--gray-200);
+    border-radius: var(--radius-sm);
+  }
+}
+
+// ----------------------------------------
+// Animated Skeleton (Shimmer Effect)
+// ----------------------------------------
+.skeleton-shimmer {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--gray-200);
+
+  &::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background: linear-gradient(
+      90deg,
+      transparent,
+      rgba(255, 255, 255, 0.4),
+      transparent
+    );
+    animation: skeleton-shimmer 1.5s infinite;
+    content: "";
+  }
+}
+
+@keyframes skeleton-shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}