zenkit-css 1.0.0

package/scss/components/_tour.scss

@@ -0,0 +1,488 @@
+// ========================================
+// ZenKit - Tour Component
+// Guided tour / Product walkthrough
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Tour Overlay / Mask
+// ----------------------------------------
+.tour-mask {
+  position: fixed;
+  inset: 0;
+  z-index: $z-modal - 1;
+  background-color: rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+}
+
+// Mask with spotlight hole
+.tour-mask-spotlight {
+  position: fixed;
+  inset: 0;
+  z-index: $z-modal - 1;
+  pointer-events: none;
+  // The spotlight is created via JS with box-shadow or clip-path
+}
+
+// ----------------------------------------
+// Tour Highlight
+// ----------------------------------------
+.tour-highlight {
+  position: fixed;
+  z-index: $z-modal;
+  border: 2px solid var(--primary);
+  border-radius: $border-radius;
+  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
+  pointer-events: none;
+  transition: all 0.3s ease;
+}
+
+.tour-highlight-animated {
+  animation: tour-pulse 2s ease-in-out infinite;
+}
+
+@keyframes tour-pulse {
+  0%, 100% {
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
+                0 0 0 4px rgba(var(--primary-rgb), 0.3);
+  }
+  50% {
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45),
+                0 0 0 8px rgba(var(--primary-rgb), 0.1);
+  }
+}
+
+// ----------------------------------------
+// Tour Popover / Step Card
+// ----------------------------------------
+.tour {
+  position: fixed;
+  z-index: $z-modal;
+  width: 360px;
+  max-width: calc(100vw - 32px);
+  background-color: var(--bg-primary);
+  border-radius: $border-radius-lg;
+  box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),
+              0 3px 6px -4px rgba(0, 0, 0, 0.12),
+              0 9px 28px 8px rgba(0, 0, 0, 0.05);
+  animation: tour-fade-in 0.3s ease;
+}
+
+@keyframes tour-fade-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// ----------------------------------------
+// Tour Arrow
+// ----------------------------------------
+.tour-arrow {
+  position: absolute;
+  width: 16px;
+  height: 16px;
+  overflow: hidden;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    background-color: var(--bg-primary);
+    transform: rotate(45deg);
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
+  }
+}
+
+// Arrow positions (similar to popover)
+.tour-placement-top .tour-arrow,
+.tour-placement-top-left .tour-arrow,
+.tour-placement-top-right .tour-arrow {
+  bottom: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    top: -4px;
+    left: 4px;
+  }
+}
+
+.tour-placement-bottom .tour-arrow,
+.tour-placement-bottom-left .tour-arrow,
+.tour-placement-bottom-right .tour-arrow {
+  top: -8px;
+  left: 50%;
+  transform: translateX(-50%);
+
+  &::before {
+    bottom: -4px;
+    left: 4px;
+  }
+}
+
+.tour-placement-left .tour-arrow {
+  right: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    right: -4px;
+    top: 4px;
+  }
+}
+
+.tour-placement-right .tour-arrow {
+  left: -8px;
+  top: 50%;
+  transform: translateY(-50%);
+
+  &::before {
+    left: -4px;
+    top: 4px;
+  }
+}
+
+// ----------------------------------------
+// Tour Header
+// ----------------------------------------
+.tour-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 1rem 1rem 0;
+}
+
+.tour-title {
+  margin: 0;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--text-primary);
+  line-height: 1.4;
+}
+
+.tour-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  margin: -0.25rem -0.25rem 0 0.5rem;
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  transition: color 0.15s ease, background-color 0.15s ease;
+
+  &:hover {
+    color: var(--text-primary);
+    background-color: var(--bg-secondary);
+  }
+}
+
+// ----------------------------------------
+// Tour Content
+// ----------------------------------------
+.tour-content {
+  padding: 0.75rem 1rem;
+}
+
+.tour-description {
+  font-size: 0.875rem;
+  color: var(--text-muted);
+  line-height: 1.6;
+}
+
+// Tour with image/media
+.tour-cover {
+  margin-bottom: 0.75rem;
+  border-radius: $border-radius;
+  overflow: hidden;
+
+  img, video {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}
+
+// ----------------------------------------
+// Tour Footer
+// ----------------------------------------
+.tour-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.75rem 1rem 1rem;
+}
+
+.tour-indicators {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.tour-indicator {
+  width: 6px;
+  height: 6px;
+  background-color: var(--border-color);
+  border-radius: 50%;
+  transition: background-color 0.2s ease, width 0.2s ease;
+
+  &.is-active {
+    width: 16px;
+    background-color: var(--primary);
+    border-radius: 3px;
+  }
+}
+
+.tour-progress {
+  font-size: 0.75rem;
+  color: var(--text-muted);
+}
+
+.tour-buttons {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.tour-btn {
+  padding: 0.375rem 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: $border-radius-sm;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+.tour-btn-skip {
+  color: var(--text-muted);
+  background: transparent;
+  border: none;
+
+  &:hover {
+    color: var(--text-primary);
+  }
+}
+
+.tour-btn-prev {
+  color: var(--text-primary);
+  background-color: transparent;
+  border: 1px solid var(--border-color);
+
+  &:hover {
+    border-color: var(--primary);
+    color: var(--primary);
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+}
+
+.tour-btn-next,
+.tour-btn-finish {
+  color: #fff;
+  background-color: var(--primary);
+  border: 1px solid var(--primary);
+
+  &:hover {
+    background-color: var(--primary-dark);
+    border-color: var(--primary-dark);
+  }
+}
+
+// ----------------------------------------
+// Tour Types / Variants
+// ----------------------------------------
+// Primary type (default)
+.tour-primary {
+  .tour-highlight {
+    border-color: var(--primary);
+  }
+}
+
+// Default type (subtle)
+.tour-default {
+  .tour-highlight {
+    border-color: var(--border-color);
+    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.3);
+  }
+}
+
+// ----------------------------------------
+// Tour Dark Theme
+// ----------------------------------------
+.tour-dark {
+  background-color: #1f1f1f;
+
+  .tour-arrow::before {
+    background-color: #1f1f1f;
+  }
+
+  .tour-title {
+    color: rgba(255, 255, 255, 0.85);
+  }
+
+  .tour-description {
+    color: rgba(255, 255, 255, 0.65);
+  }
+
+  .tour-close {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.85);
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+  }
+
+  .tour-indicator {
+    background-color: rgba(255, 255, 255, 0.2);
+
+    &.is-active {
+      background-color: var(--primary);
+    }
+  }
+
+  .tour-progress {
+    color: rgba(255, 255, 255, 0.45);
+  }
+
+  .tour-btn-skip {
+    color: rgba(255, 255, 255, 0.45);
+
+    &:hover {
+      color: rgba(255, 255, 255, 0.85);
+    }
+  }
+
+  .tour-btn-prev {
+    color: rgba(255, 255, 255, 0.85);
+    border-color: rgba(255, 255, 255, 0.2);
+  }
+}
+
+// ----------------------------------------
+// Tour Sizes
+// ----------------------------------------
+.tour-sm {
+  width: 280px;
+
+  .tour-title {
+    font-size: 0.875rem;
+  }
+
+  .tour-description {
+    font-size: 0.8125rem;
+  }
+
+  .tour-btn {
+    padding: 0.25rem 0.625rem;
+    font-size: 0.8125rem;
+  }
+}
+
+.tour-lg {
+  width: 480px;
+
+  .tour-title {
+    font-size: 1.125rem;
+  }
+
+  .tour-description {
+    font-size: 1rem;
+  }
+}
+
+// ----------------------------------------
+// Tour Without Mask
+// ----------------------------------------
+.tour-no-mask {
+  .tour-mask,
+  .tour-mask-spotlight {
+    display: none;
+  }
+
+  .tour-highlight {
+    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.3);
+  }
+}
+
+// ----------------------------------------
+// Tour Centered (No Target)
+// ----------------------------------------
+.tour-centered {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+// ----------------------------------------
+// Tour Steps List (for debugging/accessibility)
+// ----------------------------------------
+.tour-steps-list {
+  display: none;
+}
+
+// ----------------------------------------
+// Tour Target Scrolling Indicator
+// ----------------------------------------
+.tour-scroll-indicator {
+  position: fixed;
+  bottom: 20%;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: $z-modal;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 0.875rem;
+  color: #fff;
+  background-color: rgba(0, 0, 0, 0.75);
+  border-radius: $border-radius;
+  animation: bounce 1s ease infinite;
+}
+
+@keyframes bounce {
+  0%, 100% { transform: translateX(-50%) translateY(0); }
+  50% { transform: translateX(-50%) translateY(-4px); }
+}
+
+// ----------------------------------------
+// Tour Responsive
+// ----------------------------------------
+@media (max-width: 575.98px) {
+  .tour {
+    width: calc(100vw - 24px);
+    max-width: none;
+  }
+
+  .tour-footer {
+    flex-wrap: wrap;
+    gap: 0.75rem;
+  }
+
+  .tour-indicators {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .tour-buttons {
+    width: 100%;
+    justify-content: space-between;
+  }
+}