RubyGems - rails_onboarding - Versions diffs - 0.6.1 - Mend

rails_onboarding 0.6.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (148) hide show

data/app/assets/stylesheets/rails_onboarding/tooltips.css ADDED Viewed

@@ -0,0 +1,468 @@
+/* ======================
+   Tooltip System Styles
+   ====================== */
+/* Tooltip container - relative positioning for absolute tooltips */
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+/* Main tooltip element.
+ *
+ * tooltip_controller.js appends the tooltip to <body> and computes top/left in
+ * pixels with viewport collision detection, so this block must NOT set
+ * top/left/bottom/right or a centring transform - those would fight the computed
+ * position. Appearance only; the controller sets opacity/transform/transition
+ * inline because animateTooltipIn/Out drive them imperatively.
+ *
+ * The onboarding-top / -bottom / -left / -right classes the controller adds are
+ * kept for the arrow direction and for host-app styling hooks. They intentionally
+ * carry no positioning of their own. */
+.onboarding-tooltip {
+  position: absolute;
+  z-index: 10000;
+  max-width: 20rem;
+  background: var(--onboarding-text);
+  color: var(--onboarding-background);
+  border-radius: 0.75rem;
+  font-size: var(--onboarding-text-sm);
+  line-height: 1.4;
+  box-shadow: var(--onboarding-shadow-lg);
+  pointer-events: auto;
+}
+.onboarding-tooltip .tooltip-inner {
+  position: relative;
+  padding: var(--onboarding-space-md);
+}
+/* Reserve room on the right for the absolutely-positioned dismiss button so
+   multi-line content doesn't wrap underneath it. The button sits at
+   right: 0.25rem and is 1.5rem wide, so pad the inner past its left edge. */
+.onboarding-tooltip .tooltip-inner:has(.tooltip-dismiss) {
+  padding-right: calc(var(--onboarding-space-md) + 1.5rem);
+}
+/* Arrow element. styleArrowForPosition() sets the offsets and the border width
+   and style, but deliberately not the border colour - an inline `border-top`
+   shorthand would always beat a stylesheet's `border-top-color`, which is what
+   previously pinned the arrow to a hardcoded #1f2937 and left it mismatched in
+   dark mode. The colour is supplied here so it tracks the tooltip background. */
+.onboarding-tooltip .tooltip-arrow {
+  position: absolute;
+  width: 0;
+  height: 0;
+}
+.onboarding-tooltip.onboarding-top .tooltip-arrow { border-top-color: var(--onboarding-text); }
+.onboarding-tooltip.onboarding-bottom .tooltip-arrow { border-bottom-color: var(--onboarding-text); }
+.onboarding-tooltip.onboarding-left .tooltip-arrow { border-left-color: var(--onboarding-text); }
+.onboarding-tooltip.onboarding-right .tooltip-arrow { border-right-color: var(--onboarding-text); }
+.onboarding-tooltip .tooltip-dismiss {
+  position: absolute;
+  top: 0.25rem;
+  right: 0.25rem;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  background: none;
+  border: none;
+  color: var(--onboarding-text-light);
+  font-size: var(--onboarding-text-xl);
+  line-height: 1;
+  cursor: pointer;
+}
+.onboarding-tooltip .tooltip-dismiss:hover {
+  color: var(--onboarding-background);
+}
+/* Tooltip content structure */
+.tooltip-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--onboarding-space-sm);
+  gap: var(--onboarding-space-sm);
+}
+.tooltip-title {
+  font-weight: 600;
+  font-size: var(--onboarding-text-base);
+  color: var(--onboarding-background);
+  margin: 0;
+  line-height: 1.3;
+}
+.tooltip-close {
+  background: none;
+  border: none;
+  color: var(--onboarding-background);
+  cursor: pointer;
+  padding: 0;
+  font-size: var(--onboarding-text-lg);
+  line-height: 1;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+  flex-shrink: 0;
+  width: 1.5rem;
+  height: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tooltip-close:hover {
+  opacity: 1;
+}
+.tooltip-body {
+  color: var(--onboarding-background);
+  margin: 0;
+  line-height: 1.4;
+}
+.tooltip-body p {
+  margin: 0 0 var(--onboarding-space-sm);
+}
+.tooltip-body p:last-child {
+  margin-bottom: 0;
+}
+/* Tooltip trigger elements */
+.tooltip-trigger {
+  cursor: help;
+  position: relative;
+}
+.tooltip-trigger.has-tooltip {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-decoration-color: var(--onboarding-primary);
+  text-underline-offset: 0.2em;
+}
+/* Interactive tooltips */
+.onboarding-tooltip.onboarding-interactive {
+  pointer-events: auto;
+}
+.onboarding-tooltip.onboarding-interactive:hover {
+  opacity: 1;
+  visibility: visible;
+}
+/* Tooltip with actions */
+.tooltip-actions {
+  margin-top: var(--onboarding-space-md);
+  padding-top: var(--onboarding-space-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+  display: flex;
+  gap: var(--onboarding-space-sm);
+  justify-content: flex-end;
+}
+.tooltip-action {
+  background: var(--onboarding-primary);
+  color: white;
+  border: none;
+  padding: var(--onboarding-space-xs) var(--onboarding-space-sm);
+  border-radius: 0.375rem;
+  font-size: var(--onboarding-text-xs);
+  font-weight: 500;
+  cursor: pointer;
+  transition: var(--onboarding-transition);
+}
+.tooltip-action:hover {
+  background: var(--onboarding-primary-hover);
+}
+.tooltip-action.onboarding-secondary {
+  background: rgba(255, 255, 255, 0.2);
+  color: var(--onboarding-background);
+}
+.tooltip-action.onboarding-secondary:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+/* Feature tooltips (specific to onboarding features) */
+.feature-tooltip {
+  background: linear-gradient(135deg, var(--onboarding-primary), var(--onboarding-success));
+  color: white;
+  padding: var(--onboarding-space-lg);
+  border-radius: 1rem;
+  max-width: 24rem;
+  font-size: var(--onboarding-text-base);
+}
+.feature-tooltip .tooltip-title {
+  color: white;
+  font-size: var(--onboarding-text-lg);
+  margin-bottom: var(--onboarding-space-sm);
+}
+.feature-tooltip .tooltip-body {
+  color: rgba(255, 255, 255, 0.9);
+}
+/* Arrow. These rules previously set only a border colour, with no `content`,
+   `position` or `border-style`, so the pseudo-element was never generated and no
+   arrow ever appeared. onboarding_controller.js positions the tooltip with
+   `position: fixed` and adds onboarding-top or onboarding-bottom, so the base is
+   declared here and each direction supplies its own offset and colour.
+   The body is a 135deg gradient from --onboarding-primary to
+   --onboarding-success, so a border-triangle cannot reproduce it exactly; each
+   arrow takes the colour of the gradient nearest the edge it sits on. */
+.feature-tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border: 0.5rem solid transparent;
+}
+/* Tooltip below its target - arrow points up, off the top edge. */
+.feature-tooltip.onboarding-bottom::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-top-width: 0;
+  border-bottom-color: var(--onboarding-primary);
+}
+/* Tooltip above its target - arrow points down, off the bottom edge. */
+.feature-tooltip.onboarding-top::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  border-bottom-width: 0;
+  border-top-color: var(--onboarding-success);
+}
+/* Warning tooltips */
+.warning-tooltip {
+  background: var(--onboarding-warning);
+  color: white;
+}
+.warning-tooltip::before {
+  border-top-color: var(--onboarding-warning);
+}
+.warning-tooltip.onboarding-top::before {
+  border-bottom-color: var(--onboarding-warning);
+}
+.warning-tooltip.onboarding-left::before {
+  border-left-color: var(--onboarding-warning);
+}
+.warning-tooltip.onboarding-right::before {
+  border-right-color: var(--onboarding-warning);
+}
+/* Success tooltips */
+.success-tooltip {
+  background: var(--onboarding-success);
+  color: white;
+}
+.success-tooltip::before {
+  border-top-color: var(--onboarding-success);
+}
+.success-tooltip.onboarding-top::before {
+  border-bottom-color: var(--onboarding-success);
+}
+.success-tooltip.onboarding-left::before {
+  border-left-color: var(--onboarding-success);
+}
+.success-tooltip.onboarding-right::before {
+  border-right-color: var(--onboarding-success);
+}
+/* Tooltip progress indicator */
+.tooltip-progress {
+  margin-top: var(--onboarding-space-md);
+  padding-top: var(--onboarding-space-md);
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+.tooltip-progress-text {
+  font-size: var(--onboarding-text-xs);
+  color: rgba(255, 255, 255, 0.8);
+  text-align: center;
+  margin-bottom: var(--onboarding-space-xs);
+}
+.tooltip-progress-bar {
+  width: 100%;
+  height: 0.25rem;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 0.125rem;
+  overflow: hidden;
+}
+.tooltip-progress-fill {
+  height: 100%;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 0.125rem;
+  transition: width 0.3s ease;
+}
+/* Responsive tooltip adjustments */
+@media screen and (max-width: 48em) {
+  .onboarding-tooltip {
+    max-width: calc(100vw - 2rem);
+    min-width: auto;
+  }
+  /* On mobile, show tooltips as overlays */
+  .onboarding-tooltip.mobile-overlay {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    right: auto;
+    bottom: auto;
+    transform: translate(-50%, -50%);
+    z-index: 10001;
+  }
+  .onboarding-tooltip.mobile-overlay::before {
+    display: none;
+  }
+  /* Mobile overlay backdrop */
+  .tooltip-backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 10000;
+    opacity: 0;
+    visibility: hidden;
+    transition: all 0.2s ease-in-out;
+  }
+  .tooltip-backdrop.onboarding-show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+/* High contrast mode support */
+@media (prefers-contrast: high) {
+  .onboarding-tooltip {
+    border: 2px solid var(--onboarding-text);
+  }
+  .tooltip-trigger.has-tooltip {
+    text-decoration-color: currentColor;
+    text-decoration-thickness: 2px;
+  }
+}
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  .onboarding-tooltip {
+    transition: opacity 0.1s ease;
+    transform: none;
+  }
+  .onboarding-tooltip.onboarding-show {
+    transform: none;
+  }
+  .onboarding-tooltip.onboarding-bottom {
+    transform: translateX(-50%);
+  }
+  .onboarding-tooltip.onboarding-top {
+    transform: translateX(-50%);
+  }
+  .onboarding-tooltip.onboarding-left {
+    transform: translateY(-50%);
+  }
+  .onboarding-tooltip.onboarding-right {
+    transform: translateY(-50%);
+  }
+}
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .onboarding-tooltip {
+    background: var(--onboarding-surface-elevated);
+    color: var(--onboarding-text);
+    border: 1px solid var(--onboarding-border);
+  }
+  /* Keep the arrow the same colour as the tooltip body in dark mode. These
+     target .tooltip-arrow, the element the controller actually renders - the
+     ::before pseudo-element these rules used to target was never created. */
+  .onboarding-tooltip.onboarding-top .tooltip-arrow {
+    border-top-color: var(--onboarding-surface-elevated);
+  }
+  .onboarding-tooltip.onboarding-bottom .tooltip-arrow {
+    border-bottom-color: var(--onboarding-surface-elevated);
+  }
+  .onboarding-tooltip.onboarding-left .tooltip-arrow {
+    border-left-color: var(--onboarding-surface-elevated);
+  }
+  .onboarding-tooltip.onboarding-right .tooltip-arrow {
+    border-right-color: var(--onboarding-surface-elevated);
+  }
+  .tooltip-title {
+    color: var(--onboarding-text);
+  }
+  .tooltip-body {
+    color: var(--onboarding-text-muted);
+  }
+  .tooltip-close {
+    color: var(--onboarding-text-muted);
+  }
+  .tooltip-actions {
+    border-top-color: var(--onboarding-border);
+  }
+  .tooltip-action.onboarding-secondary {
+    background: var(--onboarding-surface);
+    color: var(--onboarding-text);
+  }
+  .tooltip-action.onboarding-secondary:hover {
+    background: var(--onboarding-border);
+  }
+}
+/* Print styles */
+@media print {
+  .onboarding-tooltip {
+    display: none;
+  }
+  .tooltip-trigger.has-tooltip {
+    text-decoration: none;
+  }
+}