zenkit-css 1.0.0

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 (96) hide show
  1. package/README.md +182 -0
  2. package/dist/zenkit.css +33721 -0
  3. package/dist/zenkit.css.map +1 -0
  4. package/dist/zenkit.min.css +1 -0
  5. package/dist/zenkit.min.css.map +1 -0
  6. package/package.json +41 -0
  7. package/scss/abstracts/_functions.scss +174 -0
  8. package/scss/abstracts/_mixins.scss +272 -0
  9. package/scss/abstracts/_variables.scss +216 -0
  10. package/scss/base/_reset.scss +130 -0
  11. package/scss/base/_root.scss +194 -0
  12. package/scss/base/_typography.scss +271 -0
  13. package/scss/components/_accordion.scss +200 -0
  14. package/scss/components/_affix.scss +278 -0
  15. package/scss/components/_alerts.scss +175 -0
  16. package/scss/components/_anchor.scss +438 -0
  17. package/scss/components/_autocomplete.scss +530 -0
  18. package/scss/components/_avatar.scss +256 -0
  19. package/scss/components/_backtop.scss +329 -0
  20. package/scss/components/_badges.scss +266 -0
  21. package/scss/components/_breadcrumb.scss +102 -0
  22. package/scss/components/_buttons.scss +340 -0
  23. package/scss/components/_calendar.scss +787 -0
  24. package/scss/components/_cards.scss +265 -0
  25. package/scss/components/_carousel.scss +306 -0
  26. package/scss/components/_cascader.scss +510 -0
  27. package/scss/components/_close-button.scss +106 -0
  28. package/scss/components/_colorpicker.scss +593 -0
  29. package/scss/components/_datepicker.scss +625 -0
  30. package/scss/components/_descriptions.scss +453 -0
  31. package/scss/components/_divider.scss +253 -0
  32. package/scss/components/_drawer.scss +485 -0
  33. package/scss/components/_dropdown.scss +323 -0
  34. package/scss/components/_empty.scss +321 -0
  35. package/scss/components/_floatbutton.scss +400 -0
  36. package/scss/components/_forms.scss +753 -0
  37. package/scss/components/_image.scss +497 -0
  38. package/scss/components/_inputnumber.scss +475 -0
  39. package/scss/components/_layout.scss +538 -0
  40. package/scss/components/_list-group.scss +227 -0
  41. package/scss/components/_list.scss +528 -0
  42. package/scss/components/_mentions.scss +479 -0
  43. package/scss/components/_menu.scss +510 -0
  44. package/scss/components/_message.scss +412 -0
  45. package/scss/components/_modal.scss +304 -0
  46. package/scss/components/_navbar.scss +329 -0
  47. package/scss/components/_notification.scss +499 -0
  48. package/scss/components/_offcanvas.scss +274 -0
  49. package/scss/components/_pagination.scss +176 -0
  50. package/scss/components/_placeholder.scss +237 -0
  51. package/scss/components/_popconfirm.scss +393 -0
  52. package/scss/components/_popover.scss +298 -0
  53. package/scss/components/_progress.scss +225 -0
  54. package/scss/components/_rating.scss +314 -0
  55. package/scss/components/_result.scss +383 -0
  56. package/scss/components/_segmented.scss +441 -0
  57. package/scss/components/_select.scss +412 -0
  58. package/scss/components/_spinners.scss +229 -0
  59. package/scss/components/_statistic.scss +336 -0
  60. package/scss/components/_steps.scss +343 -0
  61. package/scss/components/_tabs.scss +239 -0
  62. package/scss/components/_tag.scss +317 -0
  63. package/scss/components/_timeline.scss +341 -0
  64. package/scss/components/_timepicker.scss +468 -0
  65. package/scss/components/_toast.scss +279 -0
  66. package/scss/components/_tooltip.scss +305 -0
  67. package/scss/components/_tour.scss +488 -0
  68. package/scss/components/_transfer.scss +556 -0
  69. package/scss/components/_tree.scss +518 -0
  70. package/scss/components/_treeselect.scss +531 -0
  71. package/scss/components/_upload.scss +510 -0
  72. package/scss/components/_watermark.scss +314 -0
  73. package/scss/content/_figures.scss +38 -0
  74. package/scss/content/_images.scss +138 -0
  75. package/scss/content/_tables.scss +232 -0
  76. package/scss/layout/_container.scss +71 -0
  77. package/scss/layout/_grid.scss +258 -0
  78. package/scss/utilities/_animations.scss +494 -0
  79. package/scss/utilities/_borders.scss +246 -0
  80. package/scss/utilities/_colors.scss +194 -0
  81. package/scss/utilities/_display.scss +263 -0
  82. package/scss/utilities/_filters.scss +328 -0
  83. package/scss/utilities/_flex.scss +178 -0
  84. package/scss/utilities/_float.scss +70 -0
  85. package/scss/utilities/_grid-utils.scss +151 -0
  86. package/scss/utilities/_helpers.scss +479 -0
  87. package/scss/utilities/_interactions.scss +249 -0
  88. package/scss/utilities/_overflow.scss +204 -0
  89. package/scss/utilities/_position.scss +245 -0
  90. package/scss/utilities/_shadows.scss +67 -0
  91. package/scss/utilities/_sizing.scss +217 -0
  92. package/scss/utilities/_spacing.scss +207 -0
  93. package/scss/utilities/_text.scss +237 -0
  94. package/scss/utilities/_transforms.scss +368 -0
  95. package/scss/utilities/_visibility.scss +251 -0
  96. package/scss/zenkit.scss +121 -0
package/scss/components/_list-group.scss ADDED
@@ -0,0 +1,227 @@
1
+ // ========================================
2
+ // ZenKit - List Group
3
+ // ========================================
4
+
5
+ @use '../abstracts/variables' as *;
6
+
7
+ // ----------------------------------------
8
+ // Base List Group
9
+ // ----------------------------------------
10
+ .list-group {
11
+ --list-group-color: var(--text);
12
+ --list-group-bg: var(--bg-card);
13
+ --list-group-border-color: var(--border);
14
+ --list-group-border-width: #{$border-width};
15
+ --list-group-border-radius: var(--radius-lg);
16
+ --list-group-item-padding-x: 1rem;
17
+ --list-group-item-padding-y: 0.75rem;
18
+ --list-group-action-color: var(--text);
19
+ --list-group-action-hover-color: var(--text);
20
+ --list-group-action-hover-bg: var(--bg-muted);
21
+ --list-group-action-active-color: var(--text);
22
+ --list-group-action-active-bg: var(--gray-200);
23
+ --list-group-disabled-color: var(--text-muted);
24
+ --list-group-disabled-bg: var(--bg-card);
25
+ --list-group-active-color: var(--white);
26
+ --list-group-active-bg: var(--primary);
27
+ --list-group-active-border-color: var(--primary);
28
+
29
+ display: flex;
30
+ flex-direction: column;
31
+ padding-left: 0;
32
+ margin-bottom: 0;
33
+ border-radius: var(--list-group-border-radius);
34
+ }
35
+
36
+ // ----------------------------------------
37
+ // List Group Item
38
+ // ----------------------------------------
39
+ .list-group-item {
40
+ position: relative;
41
+ display: block;
42
+ padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x);
43
+ color: var(--list-group-color);
44
+ text-decoration: none;
45
+ background-color: var(--list-group-bg);
46
+ border: var(--list-group-border-width) solid var(--list-group-border-color);
47
+
48
+ &:first-child {
49
+ border-top-left-radius: inherit;
50
+ border-top-right-radius: inherit;
51
+ }
52
+
53
+ &:last-child {
54
+ border-bottom-right-radius: inherit;
55
+ border-bottom-left-radius: inherit;
56
+ }
57
+
58
+ &.disabled,
59
+ &:disabled {
60
+ color: var(--list-group-disabled-color);
61
+ pointer-events: none;
62
+ background-color: var(--list-group-disabled-bg);
63
+ }
64
+
65
+ &.active {
66
+ z-index: 2;
67
+ color: var(--list-group-active-color);
68
+ background-color: var(--list-group-active-bg);
69
+ border-color: var(--list-group-active-border-color);
70
+ }
71
+
72
+ & + & {
73
+ border-top-width: 0;
74
+
75
+ &.active {
76
+ margin-top: calc(-1 * var(--list-group-border-width));
77
+ border-top-width: var(--list-group-border-width);
78
+ }
79
+ }
80
+ }
81
+
82
+ // ----------------------------------------
83
+ // List Group Item Action (Clickable)
84
+ // ----------------------------------------
85
+ .list-group-item-action {
86
+ width: 100%;
87
+ color: var(--list-group-action-color);
88
+ text-align: inherit;
89
+ cursor: pointer;
90
+ transition: color $transition-fast ease-in-out,
91
+ background-color $transition-fast ease-in-out,
92
+ border-color $transition-fast ease-in-out;
93
+
94
+ &:hover,
95
+ &:focus {
96
+ z-index: 1;
97
+ color: var(--list-group-action-hover-color);
98
+ text-decoration: none;
99
+ background-color: var(--list-group-action-hover-bg);
100
+ }
101
+
102
+ &:active {
103
+ color: var(--list-group-action-active-color);
104
+ background-color: var(--list-group-action-active-bg);
105
+ }
106
+ }
107
+
108
+ // ----------------------------------------
109
+ // Flush (No outer borders/radius)
110
+ // ----------------------------------------
111
+ .list-group-flush {
112
+ border-radius: 0;
113
+
114
+ > .list-group-item {
115
+ border-width: 0 0 var(--list-group-border-width);
116
+
117
+ &:last-child {
118
+ border-bottom-width: 0;
119
+ }
120
+ }
121
+ }
122
+
123
+ // ----------------------------------------
124
+ // Numbered List Group
125
+ // ----------------------------------------
126
+ .list-group-numbered {
127
+ list-style-type: none;
128
+ counter-reset: section;
129
+
130
+ > .list-group-item::before {
131
+ content: counters(section, ".") ". ";
132
+ counter-increment: section;
133
+ }
134
+ }
135
+
136
+ // ----------------------------------------
137
+ // Horizontal List Group
138
+ // ----------------------------------------
139
+ .list-group-horizontal {
140
+ flex-direction: row;
141
+
142
+ > .list-group-item {
143
+ &:first-child:not(:last-child) {
144
+ border-bottom-left-radius: var(--list-group-border-radius);
145
+ border-top-right-radius: 0;
146
+ }
147
+
148
+ &:last-child:not(:first-child) {
149
+ border-top-right-radius: var(--list-group-border-radius);
150
+ border-bottom-left-radius: 0;
151
+ }
152
+
153
+ &.active {
154
+ margin-top: 0;
155
+ }
156
+
157
+ + .list-group-item {
158
+ border-top-width: var(--list-group-border-width);
159
+ border-left-width: 0;
160
+
161
+ &.active {
162
+ margin-left: calc(-1 * var(--list-group-border-width));
163
+ border-left-width: var(--list-group-border-width);
164
+ }
165
+ }
166
+ }
167
+ }
168
+
169
+ // ----------------------------------------
170
+ // Contextual Variants
171
+ // ----------------------------------------
172
+ .list-group-item-primary {
173
+ --list-group-color: var(--primary-900);
174
+ --list-group-bg: var(--primary-50);
175
+ --list-group-border-color: var(--primary-200);
176
+ --list-group-action-hover-color: var(--primary-900);
177
+ --list-group-action-hover-bg: var(--primary-100);
178
+ --list-group-action-active-bg: var(--primary-200);
179
+ }
180
+
181
+ .list-group-item-secondary {
182
+ --list-group-color: var(--gray-800);
183
+ --list-group-bg: var(--gray-100);
184
+ --list-group-border-color: var(--gray-200);
185
+ --list-group-action-hover-bg: var(--gray-200);
186
+ }
187
+
188
+ .list-group-item-success {
189
+ --list-group-color: #{$success-dark};
190
+ --list-group-bg: var(--success-light);
191
+ --list-group-border-color: #{$success};
192
+ --list-group-action-hover-bg: #{rgba($success, 0.2)};
193
+ }
194
+
195
+ .list-group-item-danger {
196
+ --list-group-color: #{$danger-dark};
197
+ --list-group-bg: var(--danger-light);
198
+ --list-group-border-color: #{$danger};
199
+ --list-group-action-hover-bg: #{rgba($danger, 0.2)};
200
+ }
201
+
202
+ .list-group-item-warning {
203
+ --list-group-color: #{$warning-dark};
204
+ --list-group-bg: var(--warning-light);
205
+ --list-group-border-color: #{$warning};
206
+ --list-group-action-hover-bg: #{rgba($warning, 0.2)};
207
+ }
208
+
209
+ .list-group-item-info {
210
+ --list-group-color: #{$info-dark};
211
+ --list-group-bg: var(--info-light);
212
+ --list-group-border-color: #{$info};
213
+ --list-group-action-hover-bg: #{rgba($info, 0.2)};
214
+ }
215
+
216
+ .list-group-item-light {
217
+ --list-group-color: var(--gray-700);
218
+ --list-group-bg: var(--gray-50);
219
+ --list-group-border-color: var(--gray-200);
220
+ }
221
+
222
+ .list-group-item-dark {
223
+ --list-group-color: var(--white);
224
+ --list-group-bg: var(--gray-800);
225
+ --list-group-border-color: var(--gray-700);
226
+ --list-group-action-hover-bg: var(--gray-700);
227
+ }