zenkit-css 1.0.7 → 1.2.0

package/scss/components/_bottomnav.scss

@@ -0,0 +1,420 @@
+// ========================================
+// ZenKit - Bottom Navigation Component
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Bottom Navigation Container
+// ----------------------------------------
+.bottom-nav {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: stretch;
+  justify-content: space-around;
+  background-color: var(--bg);
+  border-top: 1px solid var(--border);
+  z-index: 1000;
+  padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
+// ----------------------------------------
+// Bottom Navigation Item
+// ----------------------------------------
+.bottom-nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  min-width: 0;
+  padding: 0.5rem 0.25rem;
+  color: var(--text-muted);
+  text-decoration: none;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: color $transition-fast $transition-timing;
+  -webkit-tap-highlight-color: transparent;
+
+  &:hover {
+    color: var(--text);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+}
+
+.bottom-nav-item.active {
+  color: var(--primary);
+}
+
+// ----------------------------------------
+// Bottom Navigation Icon
+// ----------------------------------------
+.bottom-nav-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  margin-bottom: 0.125rem;
+  transition: transform $transition-fast $transition-timing;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.bottom-nav-item:active .bottom-nav-icon {
+  transform: scale(0.9);
+}
+
+.bottom-nav-item.active .bottom-nav-icon {
+  transform: scale(1.1);
+}
+
+// ----------------------------------------
+// Bottom Navigation Label
+// ----------------------------------------
+.bottom-nav-label {
+  font-size: 0.625rem;
+  font-weight: $font-weight-medium;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  transition: opacity $transition-fast $transition-timing;
+}
+
+// ----------------------------------------
+// Bottom Navigation Badge
+// ----------------------------------------
+.bottom-nav-badge {
+  position: absolute;
+  top: 0.25rem;
+  right: 50%;
+  transform: translateX(1rem);
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  font-size: 0.625rem;
+  font-weight: $font-weight-semibold;
+  line-height: 1rem;
+  text-align: center;
+  color: var(--white);
+  background-color: var(--danger);
+  border-radius: 999px;
+}
+
+.bottom-nav-badge-dot {
+  min-width: 0.5rem;
+  height: 0.5rem;
+  padding: 0;
+}
+
+.bottom-nav-item {
+  position: relative;
+}
+
+// ----------------------------------------
+// Bottom Navigation Variants
+// ----------------------------------------
+
+// Icons only (no labels)
+.bottom-nav-icons-only {
+  .bottom-nav-label {
+    display: none;
+  }
+
+  .bottom-nav-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+    margin-bottom: 0;
+  }
+}
+
+// Labels only when active
+.bottom-nav-labels-active {
+  .bottom-nav-label {
+    opacity: 0;
+    height: 0;
+    margin: 0;
+  }
+
+  .bottom-nav-item.active .bottom-nav-label {
+    opacity: 1;
+    height: auto;
+  }
+}
+
+// Shifting (items shift on active)
+.bottom-nav-shifting {
+  .bottom-nav-item {
+    flex: 1;
+    transition: flex $transition-base $transition-timing;
+  }
+
+  .bottom-nav-item.active {
+    flex: 1.5;
+  }
+
+  .bottom-nav-label {
+    opacity: 0;
+    max-width: 0;
+  }
+
+  .bottom-nav-item.active .bottom-nav-label {
+    opacity: 1;
+    max-width: 100%;
+  }
+}
+
+// ----------------------------------------
+// Bottom Navigation Sizes
+// ----------------------------------------
+.bottom-nav-sm {
+  .bottom-nav-item {
+    padding: 0.375rem 0.25rem;
+  }
+
+  .bottom-nav-icon {
+    width: 1.25rem;
+    height: 1.25rem;
+  }
+
+  .bottom-nav-label {
+    font-size: 0.5625rem;
+  }
+}
+
+.bottom-nav-lg {
+  .bottom-nav-item {
+    padding: 0.75rem 0.5rem;
+  }
+
+  .bottom-nav-icon {
+    width: 1.75rem;
+    height: 1.75rem;
+  }
+
+  .bottom-nav-label {
+    font-size: 0.75rem;
+  }
+}
+
+// ----------------------------------------
+// Bottom Navigation Indicator
+// ----------------------------------------
+.bottom-nav-indicator {
+  position: relative;
+}
+
+.bottom-nav-indicator .bottom-nav-item.active::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 2rem;
+  height: 2px;
+  background-color: var(--primary);
+  border-radius: 0 0 2px 2px;
+}
+
+// Dot indicator
+.bottom-nav-dot .bottom-nav-item.active::after {
+  content: "";
+  position: absolute;
+  bottom: 0.25rem;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 4px;
+  height: 4px;
+  background-color: var(--primary);
+  border-radius: 50%;
+}
+
+// Background indicator
+.bottom-nav-bg-indicator .bottom-nav-item.active {
+  background-color: var(--primary-50);
+  border-radius: $border-radius;
+  margin: 0.25rem;
+  padding: 0.375rem 0.5rem;
+}
+
+// ----------------------------------------
+// Bottom Navigation with FAB
+// ----------------------------------------
+.bottom-nav-with-fab {
+  .bottom-nav-item:nth-child(3) {
+    visibility: hidden;
+  }
+}
+
+.bottom-nav-fab {
+  position: absolute;
+  top: -1.5rem;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3.5rem;
+  height: 3.5rem;
+  background-color: var(--primary);
+  color: var(--white);
+  border: none;
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 4px 12px rgba($primary, 0.4);
+  transition: all $transition-base $transition-timing;
+
+  &:hover {
+    background-color: var(--primary-600);
+    transform: translateX(-50%) scale(1.05);
+  }
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+}
+
+// ----------------------------------------
+// Bottom Navigation Colors
+// ----------------------------------------
+.bottom-nav-primary {
+  background-color: var(--primary);
+  border-top-color: var(--primary-600);
+
+  .bottom-nav-item {
+    color: rgba(255, 255, 255, 0.7);
+
+    &:hover {
+      color: var(--white);
+    }
+
+    &.active {
+      color: var(--white);
+    }
+  }
+
+  .bottom-nav-indicator .bottom-nav-item.active::before {
+    background-color: var(--white);
+  }
+}
+
+.bottom-nav-dark {
+  background-color: var(--gray-900);
+  border-top-color: var(--gray-800);
+
+  .bottom-nav-item {
+    color: var(--gray-500);
+
+    &:hover {
+      color: var(--gray-300);
+    }
+
+    &.active {
+      color: var(--white);
+    }
+  }
+}
+
+// ----------------------------------------
+// Bottom Navigation Shadow
+// ----------------------------------------
+.bottom-nav-shadow {
+  border-top: none;
+  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
+}
+
+// ----------------------------------------
+// Bottom Navigation Blur
+// ----------------------------------------
+.bottom-nav-blur {
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+}
+
+// ----------------------------------------
+// Hide on Scroll (JS helper classes)
+// ----------------------------------------
+.bottom-nav-hide {
+  transform: translateY(100%);
+  transition: transform $transition-base $transition-timing;
+}
+
+.bottom-nav-show {
+  transform: translateY(0);
+}
+
+// ----------------------------------------
+// Safe Area for Content
+// ----------------------------------------
+.has-bottom-nav {
+  padding-bottom: 4rem;
+}
+
+.has-bottom-nav-sm {
+  padding-bottom: 3.5rem;
+}
+
+.has-bottom-nav-lg {
+  padding-bottom: 5rem;
+}
+
+// ----------------------------------------
+// Desktop Hide
+// ----------------------------------------
+@media (min-width: 768px) {
+  .bottom-nav-mobile-only {
+    display: none;
+  }
+}
+
+// ----------------------------------------
+// Dark Mode
+// ----------------------------------------
+[data-theme="dark"] {
+  .bottom-nav {
+    background-color: var(--gray-900);
+    border-top-color: var(--gray-800);
+  }
+
+  .bottom-nav-item {
+    color: var(--gray-500);
+
+    &:hover {
+      color: var(--gray-300);
+    }
+
+    &.active {
+      color: var(--primary-300);
+    }
+  }
+
+  .bottom-nav-blur {
+    background-color: rgba(17, 24, 39, 0.8);
+  }
+
+  .bottom-nav-bg-indicator .bottom-nav-item.active {
+    background-color: rgba($primary, 0.2);
+  }
+
+  .bottom-nav-shadow {
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
+  }
+}