@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

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 (47) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.css.map +1 -1
  3. package/package.json +1 -1
  4. package/src/common/var.scss +247 -247
  5. package/src/components/avatar-group.scss +113 -113
  6. package/src/components/avatar.scss +123 -123
  7. package/src/components/badge.scss +210 -210
  8. package/src/components/breadcrumb.scss +203 -203
  9. package/src/components/button.scss +975 -975
  10. package/src/components/card.scss +699 -696
  11. package/src/components/checkbox-group.scss +22 -22
  12. package/src/components/checkbox.scss +320 -320
  13. package/src/components/col.scss +43 -43
  14. package/src/components/dialog.scss +360 -360
  15. package/src/components/divider.scss +250 -250
  16. package/src/components/empty.scss +99 -99
  17. package/src/components/form-item.scss +189 -189
  18. package/src/components/form.scss +59 -59
  19. package/src/components/icon.scss +83 -83
  20. package/src/components/image-preview.scss +147 -147
  21. package/src/components/image.scss +351 -351
  22. package/src/components/input-number.scss +129 -129
  23. package/src/components/input.scss +362 -362
  24. package/src/components/loading.scss +64 -64
  25. package/src/components/notification.scss +348 -348
  26. package/src/components/pagination.scss +287 -280
  27. package/src/components/pattern-background.scss +18 -18
  28. package/src/components/popover.scss +438 -438
  29. package/src/components/progress.scss +438 -438
  30. package/src/components/radio-group.scss +22 -22
  31. package/src/components/radio.scss +286 -286
  32. package/src/components/row.scss +12 -12
  33. package/src/components/scrollbar.scss +40 -40
  34. package/src/components/segmented.scss +566 -566
  35. package/src/components/select.scss +15 -1
  36. package/src/components/slider.scss +421 -421
  37. package/src/components/status-indicator.scss +206 -206
  38. package/src/components/switch.scss +405 -405
  39. package/src/components/table.scss +474 -474
  40. package/src/components/tag.scss +416 -416
  41. package/src/components/text.scss +310 -271
  42. package/src/components/textarea.scss +106 -104
  43. package/src/components/timeline.scss +379 -379
  44. package/src/components/tree.scss +397 -397
  45. package/src/components/upload.scss +509 -509
  46. package/src/index.scss +60 -60
  47. package/src/mixins/mixins.scss +156 -156
package/src/components/divider.scss CHANGED
@@ -1,250 +1,250 @@
1
- // CpDivider 组件样式
2
- // 赛博朋克/机甲风格分割线
3
-
4
- @use "sass:map";
5
- @use "../common/var" as *;
6
- @use "../mixins/mixins" as *;
7
-
8
- @include b(divider) {
9
- // CSS 变量默认值
10
- --cp-divider-color: var(--cp-border);
11
- --cp-divider-thickness: 1px;
12
- --cp-divider-margin: 16px;
13
- --cp-divider-text-padding: 16px;
14
- --cp-divider-text-color: var(--cp-text-secondary);
15
- --cp-divider-text-bg: var(--cp-bg-base);
16
-
17
- box-sizing: border-box;
18
-
19
- // ===== 水平方向 =====
20
- @include m(horizontal) {
21
- display: flex;
22
- align-items: center;
23
- width: 100%;
24
- margin: var(--cp-divider-margin) 0;
25
- border: none;
26
- clear: both;
27
-
28
- // 无内容时 — 单条线
29
- &:not(.is-with-content) {
30
- border-top: var(--cp-divider-thickness) solid var(--cp-divider-color);
31
- }
32
-
33
- // 有内容时 — 用伪元素画两侧线条
34
- &.is-with-content {
35
- &::before,
36
- &::after {
37
- content: "";
38
- flex: 1;
39
- border-top: var(--cp-divider-thickness) solid var(--cp-divider-color);
40
- }
41
- }
42
- }
43
-
44
- // ===== 垂直方向 =====
45
- @include m(vertical) {
46
- display: inline-block;
47
- position: relative;
48
- width: var(--cp-divider-thickness);
49
- min-height: 1em;
50
- height: auto;
51
- margin: 0 var(--cp-divider-margin);
52
- vertical-align: middle;
53
- border: none;
54
- border-left: var(--cp-divider-thickness) solid var(--cp-divider-color);
55
- align-self: stretch;
56
- }
57
-
58
- // ===== 文字内容 =====
59
- @include e(text) {
60
- display: inline-flex;
61
- align-items: center;
62
- padding: 0 var(--cp-divider-text-padding);
63
- color: var(--cp-divider-text-color);
64
- font-family: var(--cp-font-family-ui);
65
- font-size: 12px;
66
- font-weight: 600;
67
- letter-spacing: 0.08em;
68
- text-transform: uppercase;
69
- white-space: nowrap;
70
- }
71
-
72
- // ===== 文字位置 =====
73
- @include m(position-left) {
74
- &.is-with-content::before {
75
- flex: 0 0 5%;
76
- max-width: 5%;
77
- }
78
- }
79
-
80
- @include m(position-right) {
81
- &.is-with-content::after {
82
- flex: 0 0 5%;
83
- max-width: 5%;
84
- }
85
- }
86
-
87
- // ===== 线条样式 =====
88
- @include when(dashed) {
89
- &.cp-divider--horizontal:not(.is-with-content) {
90
- border-top-style: dashed;
91
- }
92
- &.cp-divider--horizontal.is-with-content {
93
- &::before, &::after {
94
- border-top-style: dashed;
95
- }
96
- }
97
- &.cp-divider--vertical {
98
- border-left-style: dashed;
99
- }
100
- }
101
-
102
- @include when(dotted) {
103
- &.cp-divider--horizontal:not(.is-with-content) {
104
- border-top-style: dotted;
105
- }
106
- &.cp-divider--horizontal.is-with-content {
107
- &::before, &::after {
108
- border-top-style: dotted;
109
- }
110
- }
111
- &.cp-divider--vertical {
112
- border-left-style: dotted;
113
- }
114
- }
115
-
116
- @include when(double) {
117
- --cp-divider-thickness: 3px;
118
-
119
- &.cp-divider--horizontal:not(.is-with-content) {
120
- border-top-style: double;
121
- }
122
- &.cp-divider--horizontal.is-with-content {
123
- &::before, &::after {
124
- border-top-style: double;
125
- }
126
- }
127
- &.cp-divider--vertical {
128
- border-left-style: double;
129
- }
130
- }
131
-
132
- // ===== 颜色类型 =====
133
- @include m(type-primary) {
134
- --cp-divider-color: var(--cp-color-primary);
135
- --cp-divider-text-color: var(--cp-color-primary);
136
- }
137
-
138
- @include m(type-success) {
139
- --cp-divider-color: var(--cp-color-success);
140
- --cp-divider-text-color: var(--cp-color-success);
141
- }
142
-
143
- @include m(type-warning) {
144
- --cp-divider-color: var(--cp-color-warning);
145
- --cp-divider-text-color: var(--cp-color-warning);
146
- }
147
-
148
- @include m(type-error) {
149
- --cp-divider-color: var(--cp-color-error);
150
- --cp-divider-text-color: var(--cp-color-error);
151
- }
152
-
153
- @include m(type-info) {
154
- --cp-divider-color: var(--cp-color-info);
155
- --cp-divider-text-color: var(--cp-color-info);
156
- }
157
-
158
- // ===== 自定义颜色 =====
159
- @include when(custom-color) {
160
- .cp-divider__text {
161
- color: var(--cp-divider-color);
162
- }
163
- }
164
-
165
- // ===== Gradient 变体 =====
166
- @include m(variant-gradient) {
167
- // 水平
168
- &.cp-divider--horizontal:not(.is-with-content) {
169
- border-top: none;
170
- height: var(--cp-divider-thickness);
171
- background: linear-gradient(
172
- 90deg,
173
- transparent 0%,
174
- var(--cp-divider-color) 30%,
175
- var(--cp-divider-color) 70%,
176
- transparent 100%
177
- );
178
- }
179
-
180
- &.cp-divider--horizontal.is-with-content {
181
- &::before, &::after {
182
- border-top: none;
183
- height: var(--cp-divider-thickness);
184
- }
185
-
186
- &::before {
187
- background: linear-gradient(
188
- 90deg,
189
- transparent 0%,
190
- var(--cp-divider-color) 100%
191
- );
192
- }
193
-
194
- &::after {
195
- background: linear-gradient(
196
- 90deg,
197
- var(--cp-divider-color) 0%,
198
- transparent 100%
199
- );
200
- }
201
- }
202
-
203
- // 垂直
204
- &.cp-divider--vertical {
205
- border-left: none;
206
- background: linear-gradient(
207
- 180deg,
208
- transparent 0%,
209
- var(--cp-divider-color) 30%,
210
- var(--cp-divider-color) 70%,
211
- transparent 100%
212
- );
213
- }
214
- }
215
-
216
- // ===== Glow 变体 =====
217
- @include m(variant-glow) {
218
- // 水平
219
- &.cp-divider--horizontal:not(.is-with-content) {
220
- border-top-color: var(--cp-divider-color);
221
- box-shadow:
222
- 0 0 4px var(--cp-divider-color),
223
- 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
224
- }
225
-
226
- &.cp-divider--horizontal.is-with-content {
227
- &::before, &::after {
228
- border-top-color: var(--cp-divider-color);
229
- box-shadow:
230
- 0 0 4px var(--cp-divider-color),
231
- 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
232
- }
233
- }
234
-
235
- // 垂直
236
- &.cp-divider--vertical {
237
- border-left-color: var(--cp-divider-color);
238
- box-shadow:
239
- 0 0 4px var(--cp-divider-color),
240
- 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
241
- }
242
-
243
- // 文字也发光
244
- .cp-divider__text {
245
- text-shadow:
246
- 0 0 6px var(--cp-divider-color),
247
- 0 0 12px color-mix(in srgb, var(--cp-divider-color) 30%, transparent);
248
- }
249
- }
250
- }
1
+ // CpDivider 组件样式
2
+ // 赛博朋克/机甲风格分割线
3
+
4
+ @use "sass:map";
5
+ @use "../common/var" as *;
6
+ @use "../mixins/mixins" as *;
7
+
8
+ @include b(divider) {
9
+ // CSS 变量默认值
10
+ --cp-divider-color: var(--cp-border);
11
+ --cp-divider-thickness: 1px;
12
+ --cp-divider-margin: 16px;
13
+ --cp-divider-text-padding: 16px;
14
+ --cp-divider-text-color: var(--cp-text-secondary);
15
+ --cp-divider-text-bg: var(--cp-bg-base);
16
+
17
+ box-sizing: border-box;
18
+
19
+ // ===== 水平方向 =====
20
+ @include m(horizontal) {
21
+ display: flex;
22
+ align-items: center;
23
+ width: 100%;
24
+ margin: var(--cp-divider-margin) 0;
25
+ border: none;
26
+ clear: both;
27
+
28
+ // 无内容时 — 单条线
29
+ &:not(.is-with-content) {
30
+ border-top: var(--cp-divider-thickness) solid var(--cp-divider-color);
31
+ }
32
+
33
+ // 有内容时 — 用伪元素画两侧线条
34
+ &.is-with-content {
35
+ &::before,
36
+ &::after {
37
+ content: "";
38
+ flex: 1;
39
+ border-top: var(--cp-divider-thickness) solid var(--cp-divider-color);
40
+ }
41
+ }
42
+ }
43
+
44
+ // ===== 垂直方向 =====
45
+ @include m(vertical) {
46
+ display: inline-block;
47
+ position: relative;
48
+ width: var(--cp-divider-thickness);
49
+ min-height: 1em;
50
+ height: auto;
51
+ margin: 0 var(--cp-divider-margin);
52
+ vertical-align: middle;
53
+ border: none;
54
+ border-left: var(--cp-divider-thickness) solid var(--cp-divider-color);
55
+ align-self: stretch;
56
+ }
57
+
58
+ // ===== 文字内容 =====
59
+ @include e(text) {
60
+ display: inline-flex;
61
+ align-items: center;
62
+ padding: 0 var(--cp-divider-text-padding);
63
+ color: var(--cp-divider-text-color);
64
+ font-family: var(--cp-font-family-ui);
65
+ font-size: 12px;
66
+ font-weight: 600;
67
+ letter-spacing: 0.08em;
68
+ text-transform: uppercase;
69
+ white-space: nowrap;
70
+ }
71
+
72
+ // ===== 文字位置 =====
73
+ @include m(position-left) {
74
+ &.is-with-content::before {
75
+ flex: 0 0 5%;
76
+ max-width: 5%;
77
+ }
78
+ }
79
+
80
+ @include m(position-right) {
81
+ &.is-with-content::after {
82
+ flex: 0 0 5%;
83
+ max-width: 5%;
84
+ }
85
+ }
86
+
87
+ // ===== 线条样式 =====
88
+ @include when(dashed) {
89
+ &.cp-divider--horizontal:not(.is-with-content) {
90
+ border-top-style: dashed;
91
+ }
92
+ &.cp-divider--horizontal.is-with-content {
93
+ &::before, &::after {
94
+ border-top-style: dashed;
95
+ }
96
+ }
97
+ &.cp-divider--vertical {
98
+ border-left-style: dashed;
99
+ }
100
+ }
101
+
102
+ @include when(dotted) {
103
+ &.cp-divider--horizontal:not(.is-with-content) {
104
+ border-top-style: dotted;
105
+ }
106
+ &.cp-divider--horizontal.is-with-content {
107
+ &::before, &::after {
108
+ border-top-style: dotted;
109
+ }
110
+ }
111
+ &.cp-divider--vertical {
112
+ border-left-style: dotted;
113
+ }
114
+ }
115
+
116
+ @include when(double) {
117
+ --cp-divider-thickness: 3px;
118
+
119
+ &.cp-divider--horizontal:not(.is-with-content) {
120
+ border-top-style: double;
121
+ }
122
+ &.cp-divider--horizontal.is-with-content {
123
+ &::before, &::after {
124
+ border-top-style: double;
125
+ }
126
+ }
127
+ &.cp-divider--vertical {
128
+ border-left-style: double;
129
+ }
130
+ }
131
+
132
+ // ===== 颜色类型 =====
133
+ @include m(type-primary) {
134
+ --cp-divider-color: var(--cp-color-primary);
135
+ --cp-divider-text-color: var(--cp-color-primary);
136
+ }
137
+
138
+ @include m(type-success) {
139
+ --cp-divider-color: var(--cp-color-success);
140
+ --cp-divider-text-color: var(--cp-color-success);
141
+ }
142
+
143
+ @include m(type-warning) {
144
+ --cp-divider-color: var(--cp-color-warning);
145
+ --cp-divider-text-color: var(--cp-color-warning);
146
+ }
147
+
148
+ @include m(type-error) {
149
+ --cp-divider-color: var(--cp-color-error);
150
+ --cp-divider-text-color: var(--cp-color-error);
151
+ }
152
+
153
+ @include m(type-info) {
154
+ --cp-divider-color: var(--cp-color-info);
155
+ --cp-divider-text-color: var(--cp-color-info);
156
+ }
157
+
158
+ // ===== 自定义颜色 =====
159
+ @include when(custom-color) {
160
+ .cp-divider__text {
161
+ color: var(--cp-divider-color);
162
+ }
163
+ }
164
+
165
+ // ===== Gradient 变体 =====
166
+ @include m(variant-gradient) {
167
+ // 水平
168
+ &.cp-divider--horizontal:not(.is-with-content) {
169
+ border-top: none;
170
+ height: var(--cp-divider-thickness);
171
+ background: linear-gradient(
172
+ 90deg,
173
+ transparent 0%,
174
+ var(--cp-divider-color) 30%,
175
+ var(--cp-divider-color) 70%,
176
+ transparent 100%
177
+ );
178
+ }
179
+
180
+ &.cp-divider--horizontal.is-with-content {
181
+ &::before, &::after {
182
+ border-top: none;
183
+ height: var(--cp-divider-thickness);
184
+ }
185
+
186
+ &::before {
187
+ background: linear-gradient(
188
+ 90deg,
189
+ transparent 0%,
190
+ var(--cp-divider-color) 100%
191
+ );
192
+ }
193
+
194
+ &::after {
195
+ background: linear-gradient(
196
+ 90deg,
197
+ var(--cp-divider-color) 0%,
198
+ transparent 100%
199
+ );
200
+ }
201
+ }
202
+
203
+ // 垂直
204
+ &.cp-divider--vertical {
205
+ border-left: none;
206
+ background: linear-gradient(
207
+ 180deg,
208
+ transparent 0%,
209
+ var(--cp-divider-color) 30%,
210
+ var(--cp-divider-color) 70%,
211
+ transparent 100%
212
+ );
213
+ }
214
+ }
215
+
216
+ // ===== Glow 变体 =====
217
+ @include m(variant-glow) {
218
+ // 水平
219
+ &.cp-divider--horizontal:not(.is-with-content) {
220
+ border-top-color: var(--cp-divider-color);
221
+ box-shadow:
222
+ 0 0 4px var(--cp-divider-color),
223
+ 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
224
+ }
225
+
226
+ &.cp-divider--horizontal.is-with-content {
227
+ &::before, &::after {
228
+ border-top-color: var(--cp-divider-color);
229
+ box-shadow:
230
+ 0 0 4px var(--cp-divider-color),
231
+ 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
232
+ }
233
+ }
234
+
235
+ // 垂直
236
+ &.cp-divider--vertical {
237
+ border-left-color: var(--cp-divider-color);
238
+ box-shadow:
239
+ 0 0 4px var(--cp-divider-color),
240
+ 0 0 10px color-mix(in srgb, var(--cp-divider-color) 40%, transparent);
241
+ }
242
+
243
+ // 文字也发光
244
+ .cp-divider__text {
245
+ text-shadow:
246
+ 0 0 6px var(--cp-divider-color),
247
+ 0 0 12px color-mix(in srgb, var(--cp-divider-color) 30%, transparent);
248
+ }
249
+ }
250
+ }