zenkit-css 1.0.0

package/scss/components/_affix.scss

@@ -0,0 +1,278 @@
+// ========================================
+// ZenKit - Affix Component
+// Sticky wrapper / Fixed position helper
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Affix Container
+// ----------------------------------------
+.affix {
+  // Default state - flows normally
+}
+
+// ----------------------------------------
+// Affix Fixed State
+// ----------------------------------------
+.affix-fixed {
+  position: fixed;
+  z-index: $z-sticky;
+}
+
+// Fixed positions
+.affix-fixed-top {
+  top: 0;
+}
+
+.affix-fixed-bottom {
+  bottom: 0;
+}
+
+// ----------------------------------------
+// Affix with Offset
+// ----------------------------------------
+// These are typically set dynamically via JS, but providing CSS utility classes
+
+.affix-offset-8 {
+  &.affix-fixed-top { top: 8px; }
+  &.affix-fixed-bottom { bottom: 8px; }
+}
+
+.affix-offset-16 {
+  &.affix-fixed-top { top: 16px; }
+  &.affix-fixed-bottom { bottom: 16px; }
+}
+
+.affix-offset-24 {
+  &.affix-fixed-top { top: 24px; }
+  &.affix-fixed-bottom { bottom: 24px; }
+}
+
+.affix-offset-32 {
+  &.affix-fixed-top { top: 32px; }
+  &.affix-fixed-bottom { bottom: 32px; }
+}
+
+.affix-offset-48 {
+  &.affix-fixed-top { top: 48px; }
+  &.affix-fixed-bottom { bottom: 48px; }
+}
+
+.affix-offset-64 {
+  &.affix-fixed-top { top: 64px; }
+  &.affix-fixed-bottom { bottom: 64px; }
+}
+
+// ----------------------------------------
+// Affix Placeholder
+// ----------------------------------------
+// Used to prevent layout shift when element becomes fixed
+.affix-placeholder {
+  // Height is set dynamically via JS
+}
+
+// ----------------------------------------
+// Affix Transitions
+// ----------------------------------------
+.affix-animated {
+  transition: top 0.2s ease, bottom 0.2s ease;
+}
+
+// ----------------------------------------
+// Affix Shadow (visual feedback)
+// ----------------------------------------
+.affix-shadow {
+  &.affix-fixed {
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  }
+}
+
+.affix-shadow-bottom {
+  &.affix-fixed {
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
+  }
+}
+
+// ----------------------------------------
+// Affix Full Width
+// ----------------------------------------
+.affix-full-width {
+  &.affix-fixed {
+    left: 0;
+    right: 0;
+  }
+}
+
+// ----------------------------------------
+// Affix Container Bound
+// ----------------------------------------
+// When affix is bound to a specific container
+.affix-container {
+  position: relative;
+}
+
+.affix-absolute {
+  position: absolute;
+}
+
+.affix-absolute-top {
+  top: 0;
+}
+
+.affix-absolute-bottom {
+  bottom: 0;
+}
+
+// ----------------------------------------
+// Affix Background
+// ----------------------------------------
+.affix-bg {
+  &.affix-fixed {
+    background-color: var(--bg-primary);
+  }
+}
+
+.affix-bg-blur {
+  &.affix-fixed {
+    background-color: rgba(var(--bg-primary-rgb, 255, 255, 255), 0.8);
+    backdrop-filter: blur(8px);
+  }
+}
+
+// ----------------------------------------
+// Affix Border
+// ----------------------------------------
+.affix-border-bottom {
+  &.affix-fixed {
+    border-bottom: 1px solid var(--border-color);
+  }
+}
+
+.affix-border-top {
+  &.affix-fixed {
+    border-top: 1px solid var(--border-color);
+  }
+}
+
+// ----------------------------------------
+// Affix Padding
+// ----------------------------------------
+.affix-padding {
+  &.affix-fixed {
+    padding: 0.75rem 1rem;
+  }
+}
+
+// ----------------------------------------
+// Affix Common Use Cases
+// ----------------------------------------
+// Sticky header
+.affix-header {
+  &.affix-fixed {
+    top: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--bg-primary);
+    border-bottom: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Sticky sidebar
+.affix-sidebar {
+  &.affix-fixed {
+    width: inherit;
+    max-width: inherit;
+  }
+}
+
+// Sticky footer / action bar
+.affix-action-bar {
+  &.affix-fixed {
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
+    padding: 0.75rem 1rem;
+  }
+}
+
+// ----------------------------------------
+// Affix Z-Index Variants
+// ----------------------------------------
+.affix-z-dropdown {
+  &.affix-fixed {
+    z-index: $z-dropdown;
+  }
+}
+
+.affix-z-fixed {
+  &.affix-fixed {
+    z-index: $z-fixed;
+  }
+}
+
+.affix-z-modal {
+  &.affix-fixed {
+    z-index: $z-modal;
+  }
+}
+
+// ----------------------------------------
+// Affix Responsive
+// ----------------------------------------
+@media (max-width: 767.98px) {
+  .affix-mobile-disabled {
+    &.affix-fixed {
+      position: static;
+    }
+  }
+}
+
+@media (min-width: 768px) {
+  .affix-desktop-only {
+    &.affix-fixed {
+      position: fixed;
+    }
+  }
+}
+
+// ----------------------------------------
+// Affix Hide on Scroll
+// ----------------------------------------
+.affix-hide-on-scroll-down {
+  &.affix-fixed {
+    transition: transform 0.3s ease;
+  }
+
+  &.is-hidden {
+    transform: translateY(-100%);
+  }
+}
+
+.affix-hide-on-scroll-up {
+  &.affix-fixed {
+    transition: transform 0.3s ease;
+  }
+
+  &.is-hidden {
+    transform: translateY(100%);
+  }
+}
+
+// ----------------------------------------
+// Affix Shrink on Scroll
+// ----------------------------------------
+.affix-shrink {
+  &.affix-fixed {
+    transition: padding 0.3s ease;
+  }
+
+  &.is-shrunk {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}

package/scss/components/_alerts.scss

@@ -0,0 +1,175 @@
+// ========================================
+// ZenKit - Alerts
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Base Alert
+// ----------------------------------------
+.alert {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.75rem;
+  padding: 1rem 1.25rem;
+  margin-bottom: 1rem;
+  border: $border-width solid transparent;
+  border-radius: var(--radius);
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// ----------------------------------------
+// Alert Variants
+// ----------------------------------------
+.alert-primary {
+  color: var(--primary-900);
+  background-color: var(--primary-50);
+  border-color: var(--primary-200);
+}
+
+.alert-secondary {
+  color: var(--gray-800);
+  background-color: var(--gray-100);
+  border-color: var(--gray-200);
+}
+
+.alert-success {
+  color: $success-dark;
+  background-color: var(--success-light);
+  border-color: $success;
+}
+
+.alert-danger {
+  color: $danger-dark;
+  background-color: var(--danger-light);
+  border-color: $danger;
+}
+
+.alert-warning {
+  color: $warning-dark;
+  background-color: var(--warning-light);
+  border-color: $warning;
+}
+
+.alert-info {
+  color: $info-dark;
+  background-color: var(--info-light);
+  border-color: $info;
+}
+
+// ----------------------------------------
+// Alert Title
+// ----------------------------------------
+.alert-title {
+  margin-bottom: 0.25rem;
+  font-weight: $font-weight-semibold;
+}
+
+// ----------------------------------------
+// Alert Icon
+// ----------------------------------------
+.alert-icon {
+  flex-shrink: 0;
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-top: 0.125rem;
+}
+
+// ----------------------------------------
+// Alert Dismiss Button
+// ----------------------------------------
+.alert-dismiss {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-sm);
+  color: currentColor;
+  opacity: 0.5;
+  cursor: pointer;
+  transition: opacity var(--transition-fast) ease-in-out;
+
+  &:hover {
+    opacity: 1;
+  }
+
+  svg {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+.alert-dismissible {
+  padding-right: 3rem;
+}
+
+// ----------------------------------------
+// Alert with Border Left
+// ----------------------------------------
+.alert-border-left {
+  border-left-width: 4px;
+  border-radius: 0 var(--radius) var(--radius) 0;
+}
+
+// ----------------------------------------
+// Alert Solid Variants
+// ----------------------------------------
+.alert-solid-primary {
+  color: var(--white);
+  background-color: var(--primary);
+  border-color: var(--primary);
+}
+
+.alert-solid-success {
+  color: var(--white);
+  background-color: var(--success);
+  border-color: var(--success);
+}
+
+.alert-solid-danger {
+  color: var(--white);
+  background-color: var(--danger);
+  border-color: var(--danger);
+}
+
+.alert-solid-warning {
+  color: var(--gray-900);
+  background-color: var(--warning);
+  border-color: var(--warning);
+}
+
+.alert-solid-info {
+  color: var(--white);
+  background-color: var(--info);
+  border-color: var(--info);
+}
+
+// ----------------------------------------
+// Alert Link
+// ----------------------------------------
+.alert-link {
+  font-weight: $font-weight-semibold;
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.alert-primary .alert-link { color: var(--primary-800); }
+.alert-success .alert-link { color: $success-dark; }
+.alert-danger .alert-link { color: $danger-dark; }
+.alert-warning .alert-link { color: $warning-dark; }
+.alert-info .alert-link { color: $info-dark; }