npm - @skygraph/styles - Versions diffs - 0.6.4 → 0.6.6 - Mend

@skygraph/styles 0.6.4 → 0.6.6

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 (68) hide show

package/README.md +98 -98
package/components/autocomplete.css +35 -35
package/components/autofield.css +67 -67
package/components/avatar.css +37 -37
package/components/badge.css +102 -102
package/components/breadcrumb.css +29 -29
package/components/button.css +181 -181
package/components/calendar.css +408 -408
package/components/carousel.css +102 -102
package/components/cascader.css +380 -380
package/components/charts.css +408 -408
package/components/checkbox.css +114 -114
package/components/collapse.css +166 -166
package/components/colorpicker.css +252 -252
package/components/context-menu.css +95 -95
package/components/descriptions.css +82 -82
package/components/diagram.css +435 -435
package/components/drawer.css +124 -124
package/components/dropdown.css +110 -110
package/components/empty.css +25 -25
package/components/event-timeline.css +134 -134
package/components/field.css +35 -35
package/components/form.css +115 -115
package/components/gantt.css +166 -166
package/components/input-number.css +76 -76
package/components/input-password.css +104 -104
package/components/input.css +211 -211
package/components/list.css +366 -366
package/components/mentions.css +54 -54
package/components/menu.css +326 -326
package/components/modal.css +1 -0
package/components/notification.css +128 -128
package/components/pagination.css +162 -162
package/components/popconfirm.css +95 -95
package/components/progress.css +116 -116
package/components/radio.css +95 -95
package/components/rate.css +48 -48
package/components/resource-calendar.css +224 -224
package/components/result.css +45 -45
package/components/schema-form-editor.css +433 -433
package/components/search-input.css +112 -112
package/components/segmented.css +76 -76
package/components/select.css +181 -181
package/components/skeleton.css +72 -72
package/components/slider.css +51 -51
package/components/spin.css +102 -102
package/components/steps.css +194 -194
package/components/switch.css +75 -75
package/components/table.css +9 -1
package/components/tabs.css +137 -137
package/components/tag.css +61 -61
package/components/textarea.css +22 -22
package/components/timeline.css +169 -169
package/components/timepicker.css +224 -224
package/components/tooltip.css +91 -91
package/components/transfer.css +140 -140
package/components/tree.css +601 -601
package/components/treeselect.css +221 -221
package/components/upload.css +124 -124
package/index.css +70 -70
package/index.d.ts +9 -9
package/package.json +1 -1
package/print.css +88 -88
package/reset.css +17 -17
package/themes/dark.css +17 -17
package/themes/default.css +14 -14
package/tokens.css +310 -310
package/transitions.css +158 -158

package/components/spin.css CHANGED Viewed

@@ -1,102 +1,102 @@
-/* === Spin circle — the core element === */
-.sg-spin {
-  --sg-spin-color: var(--sg-color-primary);
-  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
-  display: inline-block;
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  border: 3px solid var(--sg-spin-color);
-  border-top-color: transparent;
-  border-radius: 50%;
-  animation: sg-spin-rotate 0.8s linear infinite;
-  vertical-align: middle;
-}
-/* Size variants */
-.sg-spin-small {
-  width: 12px;
-  height: 12px;
-  border-width: 1.5px;
-}
-.sg-spin-default {
-  width: 24px;
-  height: 24px;
-  border-width: 3px;
-}
-.sg-spin-large {
-  width: 36px;
-  height: 36px;
-  border-width: 4px;
-}
-/* === Standalone (no children) === */
-.sg-spin-standalone {
-  display: inline-flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sg-margin-sm);
-}
-/* === Container (wrapping children) === */
-.sg-spin-container {
-  position: relative;
-}
-.sg-spin-overlay {
-  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--sg-margin-sm);
-  z-index: var(--sg-z-loading);
-  background: var(--sg-spin-overlay-bg);
-  border-radius: var(--sg-border-radius);
-}
-[data-sg-theme='dark'] .sg-spin-overlay,
-[data-sg-theme='dark'] .sg-spin-fullscreen {
-  --sg-spin-overlay-bg: rgba(20, 20, 20, 0.65);
-}
-.sg-spin-blur {
-  pointer-events: none;
-  user-select: none;
-  opacity: 0.4;
-}
-/* === Fullscreen === */
-.sg-spin-fullscreen {
-  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
-  position: fixed;
-  inset: 0;
-  z-index: var(--sg-z-modal);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--sg-spin-overlay-bg);
-}
-.sg-spin-fullscreen-inner {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: var(--sg-margin-sm);
-}
-/* === Tip text === */
-.sg-spin-tip {
-  color: var(--sg-color-primary);
-  font-size: var(--sg-font-size-sm);
-}
-@keyframes sg-spin-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
+/* === Spin circle — the core element === */
+.sg-spin {
+  --sg-spin-color: var(--sg-color-primary);
+  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
+  display: inline-block;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  border: 3px solid var(--sg-spin-color);
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: sg-spin-rotate 0.8s linear infinite;
+  vertical-align: middle;
+}
+/* Size variants */
+.sg-spin-small {
+  width: 12px;
+  height: 12px;
+  border-width: 1.5px;
+}
+.sg-spin-default {
+  width: 24px;
+  height: 24px;
+  border-width: 3px;
+}
+.sg-spin-large {
+  width: 36px;
+  height: 36px;
+  border-width: 4px;
+}
+/* === Standalone (no children) === */
+.sg-spin-standalone {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sg-margin-sm);
+}
+/* === Container (wrapping children) === */
+.sg-spin-container {
+  position: relative;
+}
+.sg-spin-overlay {
+  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--sg-margin-sm);
+  z-index: var(--sg-z-loading);
+  background: var(--sg-spin-overlay-bg);
+  border-radius: var(--sg-border-radius);
+}
+[data-sg-theme='dark'] .sg-spin-overlay,
+[data-sg-theme='dark'] .sg-spin-fullscreen {
+  --sg-spin-overlay-bg: rgba(20, 20, 20, 0.65);
+}
+.sg-spin-blur {
+  pointer-events: none;
+  user-select: none;
+  opacity: 0.4;
+}
+/* === Fullscreen === */
+.sg-spin-fullscreen {
+  --sg-spin-overlay-bg: rgba(255, 255, 255, 0.65);
+  position: fixed;
+  inset: 0;
+  z-index: var(--sg-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--sg-spin-overlay-bg);
+}
+.sg-spin-fullscreen-inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sg-margin-sm);
+}
+/* === Tip text === */
+.sg-spin-tip {
+  color: var(--sg-color-primary);
+  font-size: var(--sg-font-size-sm);
+}
+@keyframes sg-spin-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/components/steps.css CHANGED Viewed

@@ -1,194 +1,194 @@
-.sg-steps {
-  display: flex;
-  font-size: var(--sg-font-size);
-  color: var(--sg-color-text);
-}
-.sg-steps-horizontal {
-  flex-direction: row;
-}
-.sg-steps-vertical {
-  flex-direction: column;
-}
-/* Item */
-.sg-steps-item {
-  position: relative;
-  flex: 1;
-}
-.sg-steps-vertical .sg-steps-item {
-  flex: none;
-}
-.sg-steps-item-clickable {
-  cursor: pointer;
-}
-.sg-steps-item-container {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--sg-padding-sm);
-}
-/* Icon */
-.sg-steps-item-icon {
-  flex-shrink: 0;
-  width: 32px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  border: 1px solid var(--sg-color-border);
-  font-size: var(--sg-font-size);
-  font-weight: 500;
-  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
-}
-.sg-steps-small .sg-steps-item-icon {
-  width: 24px;
-  height: 24px;
-  font-size: var(--sg-font-size-sm);
-}
-.sg-steps-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.sg-steps-icon-custom {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: var(--sg-font-size-lg);
-}
-/* Status colors */
-.sg-steps-item-process .sg-steps-item-icon {
-  background: var(--sg-color-primary);
-  border-color: var(--sg-color-primary);
-  color: var(--sg-color-white, #fff);
-}
-.sg-steps-item-finish .sg-steps-item-icon {
-  border-color: var(--sg-color-primary);
-  color: var(--sg-color-primary);
-}
-.sg-steps-item-wait .sg-steps-item-icon {
-  border-color: var(--sg-color-border);
-  color: var(--sg-color-text-disabled);
-}
-.sg-steps-item-error .sg-steps-item-icon {
-  border-color: var(--sg-color-error);
-  color: var(--sg-color-error);
-}
-/* Content */
-.sg-steps-item-content {
-  min-width: 0;
-}
-/* Horizontal: let the content row span the full width of its (flex:1) item
- * so the connector tail inside the title — which is `flex:1` — can stretch
- * across the gap to the next step. Without this the content shrinks to its
- * text width, the tail collapses to its `min-width`, and the steps read as
- * disconnected blobs separated by huge empty gaps. */
-.sg-steps-horizontal .sg-steps-item-content {
-  flex: 1;
-}
-.sg-steps-item-title {
-  display: flex;
-  align-items: center;
-  font-size: var(--sg-font-size);
-  font-weight: 500;
-  line-height: 32px;
-  color: var(--sg-color-text);
-  white-space: nowrap;
-}
-.sg-steps-small .sg-steps-item-title {
-  line-height: 24px;
-  font-size: var(--sg-font-size-sm);
-}
-.sg-steps-item-wait .sg-steps-item-title {
-  color: var(--sg-color-text-disabled);
-}
-.sg-steps-item-error .sg-steps-item-title {
-  color: var(--sg-color-error);
-}
-.sg-steps-item-description {
-  font-size: var(--sg-font-size-sm);
-  color: var(--sg-color-text-tertiary);
-  margin-top: var(--sg-margin-xs);
-}
-/* Horizontal tail (connector line) */
-.sg-steps-item-tail {
-  flex: 1;
-  display: inline-block;
-  height: 1px;
-  margin: 0 var(--sg-margin-sm);
-  background: var(--sg-color-border-secondary);
-  vertical-align: middle;
-  min-width: 32px;
-}
-.sg-steps-item-finish .sg-steps-item-tail {
-  background: var(--sg-color-primary);
-}
-/* Vertical tail */
-.sg-steps-item-tail-vertical {
-  position: absolute;
-  left: 15px;
-  top: 38px;
-  bottom: 0;
-  width: 1px;
-  background: var(--sg-color-border-secondary);
-  min-height: 24px;
-}
-.sg-steps-small .sg-steps-item-tail-vertical {
-  left: 11px;
-  top: 30px;
-}
-.sg-steps-item-finish .sg-steps-item-tail-vertical {
-  background: var(--sg-color-primary);
-}
-.sg-steps-vertical .sg-steps-item {
-  padding-bottom: var(--sg-padding-lg);
-}
-/* Navigation type */
-.sg-steps-navigation {
-  border-bottom: 1px solid var(--sg-color-border-secondary);
-}
-.sg-steps-navigation .sg-steps-item-icon {
-  display: none;
-}
-.sg-steps-navigation .sg-steps-item {
-  padding: var(--sg-padding-sm) var(--sg-padding-lg);
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-}
-.sg-steps-navigation .sg-steps-item-process {
-  border-bottom-color: var(--sg-color-primary);
-}
-.sg-steps-navigation .sg-steps-item-tail {
-  display: none;
-}
+.sg-steps {
+  display: flex;
+  font-size: var(--sg-font-size);
+  color: var(--sg-color-text);
+}
+.sg-steps-horizontal {
+  flex-direction: row;
+}
+.sg-steps-vertical {
+  flex-direction: column;
+}
+/* Item */
+.sg-steps-item {
+  position: relative;
+  flex: 1;
+}
+.sg-steps-vertical .sg-steps-item {
+  flex: none;
+}
+.sg-steps-item-clickable {
+  cursor: pointer;
+}
+.sg-steps-item-container {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--sg-padding-sm);
+}
+/* Icon */
+.sg-steps-item-icon {
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: 1px solid var(--sg-color-border);
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  transition: all var(--sg-transition-duration) var(--sg-transition-timing);
+}
+.sg-steps-small .sg-steps-item-icon {
+  width: 24px;
+  height: 24px;
+  font-size: var(--sg-font-size-sm);
+}
+.sg-steps-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.sg-steps-icon-custom {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sg-font-size-lg);
+}
+/* Status colors */
+.sg-steps-item-process .sg-steps-item-icon {
+  background: var(--sg-color-primary);
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-white, #fff);
+}
+.sg-steps-item-finish .sg-steps-item-icon {
+  border-color: var(--sg-color-primary);
+  color: var(--sg-color-primary);
+}
+.sg-steps-item-wait .sg-steps-item-icon {
+  border-color: var(--sg-color-border);
+  color: var(--sg-color-text-disabled);
+}
+.sg-steps-item-error .sg-steps-item-icon {
+  border-color: var(--sg-color-error);
+  color: var(--sg-color-error);
+}
+/* Content */
+.sg-steps-item-content {
+  min-width: 0;
+}
+/* Horizontal: let the content row span the full width of its (flex:1) item
+ * so the connector tail inside the title — which is `flex:1` — can stretch
+ * across the gap to the next step. Without this the content shrinks to its
+ * text width, the tail collapses to its `min-width`, and the steps read as
+ * disconnected blobs separated by huge empty gaps. */
+.sg-steps-horizontal .sg-steps-item-content {
+  flex: 1;
+}
+.sg-steps-item-title {
+  display: flex;
+  align-items: center;
+  font-size: var(--sg-font-size);
+  font-weight: 500;
+  line-height: 32px;
+  color: var(--sg-color-text);
+  white-space: nowrap;
+}
+.sg-steps-small .sg-steps-item-title {
+  line-height: 24px;
+  font-size: var(--sg-font-size-sm);
+}
+.sg-steps-item-wait .sg-steps-item-title {
+  color: var(--sg-color-text-disabled);
+}
+.sg-steps-item-error .sg-steps-item-title {
+  color: var(--sg-color-error);
+}
+.sg-steps-item-description {
+  font-size: var(--sg-font-size-sm);
+  color: var(--sg-color-text-tertiary);
+  margin-top: var(--sg-margin-xs);
+}
+/* Horizontal tail (connector line) */
+.sg-steps-item-tail {
+  flex: 1;
+  display: inline-block;
+  height: 1px;
+  margin: 0 var(--sg-margin-sm);
+  background: var(--sg-color-border-secondary);
+  vertical-align: middle;
+  min-width: 32px;
+}
+.sg-steps-item-finish .sg-steps-item-tail {
+  background: var(--sg-color-primary);
+}
+/* Vertical tail */
+.sg-steps-item-tail-vertical {
+  position: absolute;
+  left: 15px;
+  top: 38px;
+  bottom: 0;
+  width: 1px;
+  background: var(--sg-color-border-secondary);
+  min-height: 24px;
+}
+.sg-steps-small .sg-steps-item-tail-vertical {
+  left: 11px;
+  top: 30px;
+}
+.sg-steps-item-finish .sg-steps-item-tail-vertical {
+  background: var(--sg-color-primary);
+}
+.sg-steps-vertical .sg-steps-item {
+  padding-bottom: var(--sg-padding-lg);
+}
+/* Navigation type */
+.sg-steps-navigation {
+  border-bottom: 1px solid var(--sg-color-border-secondary);
+}
+.sg-steps-navigation .sg-steps-item-icon {
+  display: none;
+}
+.sg-steps-navigation .sg-steps-item {
+  padding: var(--sg-padding-sm) var(--sg-padding-lg);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+.sg-steps-navigation .sg-steps-item-process {
+  border-bottom-color: var(--sg-color-primary);
+}
+.sg-steps-navigation .sg-steps-item-tail {
+  display: none;
+}