@skygraph/styles 0.2.4 → 0.6.6

package/components/timepicker.css

@@ -1,224 +1,224 @@
-/* ═══════════════════════════════════════════════════════
-   TimePicker / TimeRangePicker
-   ═══════════════════════════════════════════════════════ */
-
-.sg-timepicker {
-  position: relative;
-  display: inline-block;
-}
-
-.sg-timepicker-disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-/* ── Input ── */
-
-.sg-timepicker-input {
-  display: flex;
-  align-items: center;
-  gap: var(--sg-padding-xs);
-  height: var(--sg-height-md);
-  padding: 0 var(--sg-padding-sm) 0 var(--sg-padding-md);
-  border: 1px solid var(--sg-color-border);
-  border-radius: var(--sg-border-radius);
-  background: var(--sg-color-bg-container);
-  cursor: pointer;
-  min-width: 140px;
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-  transition:
-    border-color var(--sg-transition-duration),
-    box-shadow var(--sg-transition-duration);
-}
-
-.sg-timepicker-input:hover {
-  border-color: var(--sg-color-primary-hover);
-}
-
-.sg-timepicker-open .sg-timepicker-input {
-  border-color: var(--sg-color-primary);
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-}
-
-.sg-timepicker-input:focus-visible {
-  outline: none;
-  border-color: var(--sg-color-primary);
-  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
-}
-
-.sg-timepicker-value,
-.sg-timepicker-placeholder {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.sg-timepicker-placeholder {
-  color: var(--sg-color-text-quaternary);
-}
-
-.sg-timepicker-suffix {
-  display: flex;
-  align-items: center;
-  gap: var(--sg-padding-xs);
-  margin-left: auto;
-  color: var(--sg-color-text-tertiary);
-  flex-shrink: 0;
-}
-
-.sg-timepicker-icon-svg {
-  opacity: 0.65;
-}
-
-.sg-timepicker-clear {
-  cursor: pointer;
-  font-size: var(--sg-font-size);
-  line-height: 1;
-  color: var(--sg-color-text-quaternary);
-  transition: color var(--sg-transition-duration);
-}
-
-.sg-timepicker-clear:hover {
-  color: var(--sg-color-text-secondary);
-}
-
-/* Size variants */
-
-.sg-timepicker-small .sg-timepicker-input {
-  height: var(--sg-height-sm);
-  font-size: var(--sg-font-size-sm);
-  min-width: 120px;
-}
-
-.sg-timepicker-large .sg-timepicker-input {
-  height: var(--sg-height-lg);
-  font-size: var(--sg-font-size-lg);
-  min-width: 160px;
-}
-
-/* Range input */
-
-.sg-timepicker-range-input {
-  min-width: 240px;
-}
-
-.sg-timepicker-separator {
-  color: var(--sg-color-text-quaternary);
-  padding: 0 var(--sg-padding-xs);
-}
-
-/* ═══════════════════════════════════════════════════════
-   Dropdown
-   ═══════════════════════════════════════════════════════ */
-
-.sg-tp-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: var(--sg-z-dropdown);
-  margin-top: var(--sg-padding-xs);
-  background: var(--sg-color-bg-elevated);
-  border-radius: var(--sg-border-radius-lg);
-  box-shadow: var(--sg-shadow-lg);
-  overflow: hidden;
-}
-
-.sg-tp-dropdown-range {
-  min-width: 280px;
-}
-
-.sg-tp-range-panels {
-  display: flex;
-  gap: 1px;
-  background: var(--sg-color-border-secondary);
-}
-
-.sg-tp-range-panels > * {
-  background: var(--sg-color-bg-elevated);
-}
-
-/* ── Scroll columns ── */
-
-.sg-tp-columns {
-  display: flex;
-  max-height: 224px;
-}
-
-.sg-tp-col {
-  flex: 1;
-  overflow-y: auto;
-  min-width: 56px;
-  border-right: 1px solid var(--sg-color-border-secondary);
-  scrollbar-width: thin;
-}
-
-.sg-tp-col:last-child {
-  border-right: none;
-}
-
-.sg-tp-col-ampm {
-  min-width: 48px;
-}
-
-.sg-tp-cell {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 28px;
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text);
-  cursor: pointer;
-  transition: background var(--sg-transition-duration);
-  user-select: none;
-}
-
-.sg-tp-cell:hover {
-  background: var(--sg-color-bg-hover);
-}
-
-.sg-tp-cell-active {
-  background: var(--sg-color-primary-bg);
-  color: var(--sg-color-primary);
-  font-weight: 600;
-}
-
-.sg-tp-cell-disabled {
-  color: var(--sg-color-text-disabled);
-  cursor: not-allowed;
-}
-
-.sg-tp-cell-disabled:hover {
-  background: transparent;
-}
-
-/* ── Footer ── */
-
-.sg-tp-footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: var(--sg-padding-xs) var(--sg-padding-sm);
-  border-top: 1px solid var(--sg-color-border-secondary);
-}
-
-.sg-tp-now-btn {
-  padding: 2px var(--sg-padding-sm);
-  border: 1px solid var(--sg-color-primary);
-  border-radius: var(--sg-border-radius-sm);
-  background: transparent;
-  color: var(--sg-color-primary);
-  font-size: var(--sg-font-size-sm);
-  cursor: pointer;
-  transition:
-    color var(--sg-transition-duration),
-    background var(--sg-transition-duration),
-    border-color var(--sg-transition-duration),
-    box-shadow var(--sg-transition-duration);
-}
-
-.sg-tp-now-btn:hover {
-  background: var(--sg-color-primary);
-  color: var(--sg-color-white);
-}
+/* ═══════════════════════════════════════════════════════
+   TimePicker / TimeRangePicker
+   ═══════════════════════════════════════════════════════ */
+
+.sg-timepicker {
+  position: relative;
+  display: inline-block;
+}
+
+.sg-timepicker-disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+/* ── Input ── */
+
+.sg-timepicker-input {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  height: var(--sg-height-md);
+  padding: 0 var(--sg-padding-sm) 0 var(--sg-padding-md);
+  border: 1px solid var(--sg-color-border);
+  border-radius: var(--sg-border-radius);
+  background: var(--sg-color-bg-container);
+  cursor: pointer;
+  min-width: 140px;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+  transition:
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-timepicker-input:hover {
+  border-color: var(--sg-color-primary-hover);
+}
+
+.sg-timepicker-open .sg-timepicker-input {
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-timepicker-input:focus-visible {
+  outline: none;
+  border-color: var(--sg-color-primary);
+  box-shadow: 0 0 0 2px var(--sg-color-primary-bg);
+}
+
+.sg-timepicker-value,
+.sg-timepicker-placeholder {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sg-timepicker-placeholder {
+  color: var(--sg-color-text-quaternary);
+}
+
+.sg-timepicker-suffix {
+  display: flex;
+  align-items: center;
+  gap: var(--sg-padding-xs);
+  margin-left: auto;
+  color: var(--sg-color-text-tertiary);
+  flex-shrink: 0;
+}
+
+.sg-timepicker-icon-svg {
+  opacity: 0.65;
+}
+
+.sg-timepicker-clear {
+  cursor: pointer;
+  font-size: var(--sg-font-size);
+  line-height: 1;
+  color: var(--sg-color-text-quaternary);
+  transition: color var(--sg-transition-duration);
+}
+
+.sg-timepicker-clear:hover {
+  color: var(--sg-color-text-secondary);
+}
+
+/* Size variants */
+
+.sg-timepicker-small .sg-timepicker-input {
+  height: var(--sg-height-sm);
+  font-size: var(--sg-font-size-sm);
+  min-width: 120px;
+}
+
+.sg-timepicker-large .sg-timepicker-input {
+  height: var(--sg-height-lg);
+  font-size: var(--sg-font-size-lg);
+  min-width: 160px;
+}
+
+/* Range input */
+
+.sg-timepicker-range-input {
+  min-width: 240px;
+}
+
+.sg-timepicker-separator {
+  color: var(--sg-color-text-quaternary);
+  padding: 0 var(--sg-padding-xs);
+}
+
+/* ═══════════════════════════════════════════════════════
+   Dropdown
+   ═══════════════════════════════════════════════════════ */
+
+.sg-tp-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--sg-z-dropdown);
+  margin-top: var(--sg-padding-xs);
+  background: var(--sg-color-bg-elevated);
+  border-radius: var(--sg-border-radius-lg);
+  box-shadow: var(--sg-shadow-lg);
+  overflow: hidden;
+}
+
+.sg-tp-dropdown-range {
+  min-width: 280px;
+}
+
+.sg-tp-range-panels {
+  display: flex;
+  gap: 1px;
+  background: var(--sg-color-border-secondary);
+}
+
+.sg-tp-range-panels > * {
+  background: var(--sg-color-bg-elevated);
+}
+
+/* ── Scroll columns ── */
+
+.sg-tp-columns {
+  display: flex;
+  max-height: 224px;
+}
+
+.sg-tp-col {
+  flex: 1;
+  overflow-y: auto;
+  min-width: 56px;
+  border-right: 1px solid var(--sg-color-border-secondary);
+  scrollbar-width: thin;
+}
+
+.sg-tp-col:last-child {
+  border-right: none;
+}
+
+.sg-tp-col-ampm {
+  min-width: 48px;
+}
+
+.sg-tp-cell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text);
+  cursor: pointer;
+  transition: background var(--sg-transition-duration);
+  user-select: none;
+}
+
+.sg-tp-cell:hover {
+  background: var(--sg-color-bg-hover);
+}
+
+.sg-tp-cell-active {
+  background: var(--sg-color-primary-bg);
+  color: var(--sg-color-primary);
+  font-weight: 600;
+}
+
+.sg-tp-cell-disabled {
+  color: var(--sg-color-text-disabled);
+  cursor: not-allowed;
+}
+
+.sg-tp-cell-disabled:hover {
+  background: transparent;
+}
+
+/* ── Footer ── */
+
+.sg-tp-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  border-top: 1px solid var(--sg-color-border-secondary);
+}
+
+.sg-tp-now-btn {
+  padding: 2px var(--sg-padding-sm);
+  border: 1px solid var(--sg-color-primary);
+  border-radius: var(--sg-border-radius-sm);
+  background: transparent;
+  color: var(--sg-color-primary);
+  font-size: var(--sg-font-size-sm);
+  cursor: pointer;
+  transition:
+    color var(--sg-transition-duration),
+    background var(--sg-transition-duration),
+    border-color var(--sg-transition-duration),
+    box-shadow var(--sg-transition-duration);
+}
+
+.sg-tp-now-btn:hover {
+  background: var(--sg-color-primary);
+  color: var(--sg-color-white);
+}

package/components/tooltip.css

@@ -1,91 +1,91 @@
-.sg-tooltip-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-.sg-tooltip {
-  position: absolute;
-  z-index: var(--sg-z-tooltip);
-  pointer-events: none;
-}
-
-.sg-tooltip-content {
-  /* `inline-block` lets the box wrap and size itself around block-level
-   * children (the Rich-content demo embeds a `<div max-width:220px;
-   * white-space:normal>` — React renders the content node as a `<div>`
-   * which already enforces `display:block`; Vue uses `<span>` so we have
-   * to lift the box ourselves, otherwise it stays a 0-px nowrap line and
-   * the tooltip looks empty). */
-  display: inline-block;
-  padding: var(--sg-padding-xs) var(--sg-padding-sm);
-  background: var(--sg-color-tooltip-bg);
-  color: var(--sg-color-tooltip-text);
-  font-size: var(--sg-font-size-sm);
-  border-radius: var(--sg-border-radius-sm);
-  white-space: nowrap;
-  box-shadow: var(--sg-shadow);
-}
-
-/* dark override handled via --sg-color-tooltip-bg token */
-
-.sg-tooltip-arrow {
-  position: absolute;
-  width: 8px;
-  height: 8px;
-  background: var(--sg-color-tooltip-bg);
-  transform: rotate(45deg);
-}
-
-/* dark override handled via --sg-color-tooltip-bg token */
-
-.sg-tooltip-top {
-  bottom: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-bottom: 8px;
-}
-
-.sg-tooltip-top .sg-tooltip-arrow {
-  bottom: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.sg-tooltip-bottom {
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 8px;
-}
-
-.sg-tooltip-bottom .sg-tooltip-arrow {
-  top: -4px;
-  left: 50%;
-  margin-left: -4px;
-}
-
-.sg-tooltip-left {
-  right: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-right: 8px;
-}
-
-.sg-tooltip-left .sg-tooltip-arrow {
-  right: -4px;
-  top: 50%;
-  margin-top: -4px;
-}
-
-.sg-tooltip-right {
-  left: 100%;
-  top: 50%;
-  transform: translateY(-50%);
-  margin-left: 8px;
-}
-
-.sg-tooltip-right .sg-tooltip-arrow {
-  left: -4px;
-  top: 50%;
-  margin-top: -4px;
-}
+.sg-tooltip-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.sg-tooltip {
+  position: absolute;
+  z-index: var(--sg-z-tooltip);
+  pointer-events: none;
+}
+
+.sg-tooltip-content {
+  /* `inline-block` lets the box wrap and size itself around block-level
+   * children (the Rich-content demo embeds a `<div max-width:220px;
+   * white-space:normal>` — React renders the content node as a `<div>`
+   * which already enforces `display:block`; Vue uses `<span>` so we have
+   * to lift the box ourselves, otherwise it stays a 0-px nowrap line and
+   * the tooltip looks empty). */
+  display: inline-block;
+  padding: var(--sg-padding-xs) var(--sg-padding-sm);
+  background: var(--sg-color-tooltip-bg);
+  color: var(--sg-color-tooltip-text);
+  font-size: var(--sg-font-size-sm);
+  border-radius: var(--sg-border-radius-sm);
+  white-space: nowrap;
+  box-shadow: var(--sg-shadow);
+}
+
+/* dark override handled via --sg-color-tooltip-bg token */
+
+.sg-tooltip-arrow {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  background: var(--sg-color-tooltip-bg);
+  transform: rotate(45deg);
+}
+
+/* dark override handled via --sg-color-tooltip-bg token */
+
+.sg-tooltip-top {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+.sg-tooltip-top .sg-tooltip-arrow {
+  bottom: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.sg-tooltip-bottom {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+.sg-tooltip-bottom .sg-tooltip-arrow {
+  top: -4px;
+  left: 50%;
+  margin-left: -4px;
+}
+
+.sg-tooltip-left {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+.sg-tooltip-left .sg-tooltip-arrow {
+  right: -4px;
+  top: 50%;
+  margin-top: -4px;
+}
+
+.sg-tooltip-right {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+.sg-tooltip-right .sg-tooltip-arrow {
+  left: -4px;
+  top: 50%;
+  margin-top: -4px;
+}