@appscode/design-system 1.1.0-beta.2 → 1.1.0-beta.20

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 (90) hide show
  1. package/base/_video-player.scss +65 -0
  2. package/base/utilities/_all.scss +5 -4
  3. package/base/utilities/_colors.scss +408 -0
  4. package/base/utilities/_customize-bulma.scss +23 -27
  5. package/base/utilities/_extended.scss +3 -2
  6. package/base/utilities/{_default.scss → _global.scss} +165 -311
  7. package/base/utilities/_layouts.scss +157 -0
  8. package/base/utilities/_spacing.scss +96 -0
  9. package/base/utilities/_typography.scss +34 -2
  10. package/components/_ac-alert-box.scss +205 -262
  11. package/components/_ac-modal.scss +212 -212
  12. package/components/_ac-multi-select.scss +84 -55
  13. package/components/_ac-options.scss +122 -122
  14. package/components/_ac-table.scss +503 -502
  15. package/components/_ac-tabs.scss +4 -3
  16. package/components/_ac-tags.scss +116 -116
  17. package/components/_accordion.scss +117 -0
  18. package/components/_all.scss +34 -29
  19. package/components/_app-drawer.scss +0 -134
  20. package/components/_breadcumb.scss +0 -71
  21. package/components/_buttons.scss +779 -779
  22. package/components/_dashboard-header.scss +0 -115
  23. package/components/_image-upload.scss +2 -2
  24. package/components/_input-card.scss +232 -0
  25. package/components/_input.scss +947 -0
  26. package/components/_left-sidebar-menu.scss +346 -475
  27. package/components/_navbar.scss +786 -752
  28. package/components/_pagination.scss +9 -27
  29. package/components/_payment-card.scss +1 -1
  30. package/components/_terminal.scss +331 -0
  31. package/components/_widget-menu.scss +247 -247
  32. package/components/_wizard.scss +522 -801
  33. package/components/ac-toaster/_ac-toasted.scss +6 -11
  34. package/components/ui-builder/_ui-builder.scss +17 -21
  35. package/components/ui-builder/_vue-open-api.scss +513 -0
  36. package/main.scss +26 -10
  37. package/package.json +1 -1
  38. package/plugins/theme.js +11 -9
  39. package/plugins/vue-toaster.js +1 -1
  40. package/vue-components/types/importFlow.ts +16 -0
  41. package/vue-components/v2/banner/Banner.vue +1 -1
  42. package/vue-components/v2/card/Card.vue +1 -1
  43. package/vue-components/v2/editor/FilteredFileEditor.vue +2 -2
  44. package/vue-components/v2/modal/Modal.vue +1 -1
  45. package/vue-components/v2/pagination/Pagination.vue +1 -0
  46. package/vue-components/v3/alert/Alert.vue +6 -6
  47. package/vue-components/v3/banner/Banner.vue +2 -2
  48. package/vue-components/v3/breadcrumbs/Breadcrumb.vue +4 -2
  49. package/vue-components/v3/button/Button.vue +12 -0
  50. package/vue-components/v3/cards/Card.vue +1 -1
  51. package/vue-components/v3/cards/Cluster.vue +3 -4
  52. package/vue-components/v3/cards/Counter.vue +12 -0
  53. package/vue-components/v3/cards/FeatureCard.vue +31 -0
  54. package/vue-components/v3/cards/InfoCard.vue +4 -9
  55. package/vue-components/v3/cards/Monitoring.vue +1 -1
  56. package/vue-components/v3/cards/Vendor.vue +67 -5
  57. package/vue-components/v3/content/ContentTable.vue +7 -2
  58. package/vue-components/v3/editor/FilteredFileEditor.vue +200 -3
  59. package/vue-components/v3/footer/FooterItem.vue +4 -1
  60. package/vue-components/v3/footer/Info.vue +10 -8
  61. package/vue-components/v3/footer/Status.vue +27 -23
  62. package/vue-components/v3/footer/Usage.vue +20 -30
  63. package/vue-components/v3/form/Form.vue +0 -3
  64. package/vue-components/v3/form-fields/AcSingleInput.vue +9 -1
  65. package/vue-components/v3/header/Header.vue +4 -3
  66. package/vue-components/v3/loaders/InfoCardLoader.vue +65 -0
  67. package/vue-components/v3/modal/Modal.vue +1 -1
  68. package/vue-components/v3/navbar/Navbar.vue +3 -1
  69. package/vue-components/v3/navbar/User.vue +4 -4
  70. package/vue-components/v3/notification/AlertBox.vue +233 -4
  71. package/vue-components/v3/option-dots/Options.vue +2 -1
  72. package/vue-components/v3/pagination/Pagination.vue +2 -1
  73. package/vue-components/v3/preloader/Preloader.vue +1 -1
  74. package/vue-components/v3/searchbars/SearchBar.vue +10 -2
  75. package/vue-components/v3/sidebar/ClusterSwitcher.vue +18 -14
  76. package/vue-components/v3/sidebar/Sidebar.vue +5 -9
  77. package/vue-components/v3/sidebar/SidebarFooter.vue +3 -3
  78. package/vue-components/v3/sidebar/SidebarHeader.vue +3 -3
  79. package/vue-components/v3/sidebar/Steps.vue +152 -0
  80. package/vue-components/v3/table/InfoTable.vue +6 -4
  81. package/vue-components/v3/table/Table.vue +32 -25
  82. package/vue-components/v3/table/TableRow.vue +2 -2
  83. package/base/utilities/_derived-variables.scss +0 -24
  84. package/base/utilities/_initial-variables.scss +0 -217
  85. package/components/_ac-accordion.scss +0 -117
  86. package/components/_ac-card.scss +0 -597
  87. package/components/_ac-input.scss +0 -876
  88. package/components/_ac-terminal.scss +0 -270
  89. package/components/_basic-card.scss +0 -118
  90. /package/components/{_ac-report.scss → _report.scss} +0 -0
package/components/_widget-menu.scss CHANGED
@@ -1,251 +1,251 @@
1
1
  // widget menu start
2
- .widget-menu {
3
- &.style-2 {
4
- position: sticky;
5
- top: 50px;
6
- .menu-list-wrapper {
7
- li {
8
- a {
9
- font-size: 13px;
10
- font-weight: 400;
11
- color: $primary-10;
12
- display: block;
13
- padding: 7px 10px;
14
- padding-left: 20px;
15
-
16
- &.is-active {
17
- background-color: $ac-bg;
18
- color: $primary;
19
- }
20
-
21
- .fa {
22
- color: #00a651;
23
- float: right;
24
- margin-top: 4px;
25
-
26
- &.fa-times-circle {
27
- color: $danger;
28
- }
29
- }
30
- }
31
- }
32
-
33
- .menu-list {
34
- position: relative;
35
- left: -5px;
36
- top: -3px;
37
- z-index: 1;
38
- margin-left: 15px;
39
-
40
- // &::before {
41
- // position: absolute;
42
- // z-index: 2;
43
- // content: "";
44
- // left: 10px;
45
- // top: -17px;
46
- // width: 6px;
47
- // height: 6px;
48
- // border-radius: 50%;
49
- // background-color: $primary-20;
50
- // }
51
-
52
- &::after {
53
- position: absolute;
54
- z-index: 1;
55
- content: "";
56
- left: 12.5px;
57
- top: -7px;
58
- width: 1px;
59
- height: calc(100% - 4px);
60
- background-color: $primary-20;
61
- }
62
-
63
- li {
64
- position: relative;
65
- z-index: 1;
66
- padding-left: 25px;
67
-
68
- &::before {
69
- position: absolute;
70
- z-index: 2;
71
- content: "";
72
- left: 30px;
73
- top: 15px;
74
- width: 7px;
75
- height: 7px;
76
- border-radius: 50%;
77
- background-color: $primary-20;
78
- }
79
-
80
- &::after {
81
- position: absolute;
82
- content: "";
83
- left: 13px;
84
- top: 18.4px;
85
- width: 20px;
86
- height: 1px;
87
- background-color: $primary-20;
88
- z-index: 9;
89
- }
90
-
91
- a {
92
- font-size: 13px;
93
- font-weight: 500;
94
- color: $primary-10;
95
-
96
- &:hover {
97
- color: $primary;
98
- background-color: transparent;
99
- }
100
- }
101
-
102
- ul {
103
- padding-left: 0;
104
- padding: 0;
105
- margin: 0;
106
- border-left: none;
107
- }
108
- }
109
- }
110
- }
111
- }
112
-
113
- .general-information {
114
- display: flex;
115
- align-items: center;
116
- justify-content: space-between;
117
- padding: 10px 15px 10px 20px;
118
-
119
- p {
120
- font-weight: 500;
121
- font-weight: 13px;
122
- }
123
-
124
- i.fa-check-circle {
125
- padding-left: 30px;
126
- color: #00a651;
127
- }
128
- }
129
-
130
- // title start
131
- .menu-title {
132
- display: flex;
133
- align-items: center;
134
- width: 100%;
135
- justify-content: space-between;
136
- padding: 18px;
137
- background-color: $primary-90;
138
-
139
- p {
140
- font-size: 13px;
141
- font-weight: 600;
142
- color: $primary-10;
143
- }
144
- }
145
-
146
- // title end
147
-
148
- .widget-menu-inner {
149
- a {
150
- padding: 10px;
151
- justify-content: center;
152
- padding-left: 20px;
153
- display: block;
154
- background-color: $white-100;
155
- text-align: left;
156
- color: $primary-10;
157
- font-size: 13px;
158
- font-weight: 500;
159
-
160
- &:hover {
161
- &:after {
162
- width: 100%;
163
- border-radius: 0;
164
- background-color: $ac-bg;
165
- }
166
- }
167
- }
168
-
169
- .dropdown-2 {
170
- position: relative;
171
- z-index: 1;
172
-
173
- &:hover {
174
- &::after {
175
- display: none;
176
- }
177
- }
178
-
179
- span {
180
- i {
181
- &.fa {
182
- right: 15px;
183
- position: absolute;
184
- }
185
- }
186
- }
187
-
188
- ul {
189
- position: relative;
190
- left: 0;
191
- top: 10px;
192
- z-index: 1;
193
-
194
- &::after {
195
- position: absolute;
196
- z-index: 1;
197
- content: "";
198
- left: 2.5px;
199
- top: 0;
200
- width: 1px;
201
- height: calc(100% - 22px);
202
- background-color: $primary-20;
203
- }
204
-
205
- &::before {
206
- position: absolute;
207
- z-index: 2;
208
- content: "";
209
- left: 0;
210
- top: 0;
211
- width: 6px;
212
- height: 6px;
213
- border-radius: 50%;
214
- background-color: $primary-20;
215
- }
216
-
217
- li {
218
- position: relative;
219
- z-index: 1;
220
- padding-left: 15px;
221
-
222
- &:after {
223
- position: absolute;
224
- content: "";
225
- left: 3px;
226
- bottom: 22px;
227
- width: 20px;
228
- height: 1px;
229
- background-color: $primary-20;
230
- z-index: 9;
231
- }
232
-
233
- &::before {
234
- position: absolute;
235
- z-index: 2;
236
- content: "";
237
- left: 20px;
238
- bottom: 19.5px;
239
- width: 6px;
240
- height: 6px;
241
- border-radius: 50%;
242
- background-color: $primary-20;
243
- }
244
- }
245
- }
246
- }
247
- }
248
- }
2
+ // .widget-menu {
3
+ // &.style-2 {
4
+ // position: sticky;
5
+ // top: 50px;
6
+ // .menu-list-wrapper {
7
+ // li {
8
+ // a {
9
+ // font-size: 13px;
10
+ // font-weight: 400;
11
+ // color: $primary-10;
12
+ // display: block;
13
+ // padding: 7px 10px;
14
+ // padding-left: 20px;
15
+
16
+ // &.is-active {
17
+ // background-color: $ac-bg;
18
+ // color: $primary;
19
+ // }
20
+
21
+ // .fa {
22
+ // color: #00a651;
23
+ // float: right;
24
+ // margin-top: 4px;
25
+
26
+ // &.fa-times-circle {
27
+ // color: $danger;
28
+ // }
29
+ // }
30
+ // }
31
+ // }
32
+
33
+ // .menu-list {
34
+ // position: relative;
35
+ // left: -5px;
36
+ // top: -3px;
37
+ // z-index: 1;
38
+ // margin-left: 15px;
39
+
40
+ // // &::before {
41
+ // // position: absolute;
42
+ // // z-index: 2;
43
+ // // content: "";
44
+ // // left: 10px;
45
+ // // top: -17px;
46
+ // // width: 6px;
47
+ // // height: 6px;
48
+ // // border-radius: 50%;
49
+ // // background-color: $primary-20;
50
+ // // }
51
+
52
+ // &::after {
53
+ // position: absolute;
54
+ // z-index: 1;
55
+ // content: "";
56
+ // left: 12.5px;
57
+ // top: -7px;
58
+ // width: 1px;
59
+ // height: calc(100% - 4px);
60
+ // background-color: $primary-20;
61
+ // }
62
+
63
+ // li {
64
+ // position: relative;
65
+ // z-index: 1;
66
+ // padding-left: 25px;
67
+
68
+ // &::before {
69
+ // position: absolute;
70
+ // z-index: 2;
71
+ // content: "";
72
+ // left: 30px;
73
+ // top: 15px;
74
+ // width: 7px;
75
+ // height: 7px;
76
+ // border-radius: 50%;
77
+ // background-color: $primary-20;
78
+ // }
79
+
80
+ // &::after {
81
+ // position: absolute;
82
+ // content: "";
83
+ // left: 13px;
84
+ // top: 18.4px;
85
+ // width: 20px;
86
+ // height: 1px;
87
+ // background-color: $primary-20;
88
+ // z-index: 9;
89
+ // }
90
+
91
+ // a {
92
+ // font-size: 13px;
93
+ // font-weight: 500;
94
+ // color: $primary-10;
95
+
96
+ // &:hover {
97
+ // color: $primary;
98
+ // background-color: transparent;
99
+ // }
100
+ // }
101
+
102
+ // ul {
103
+ // padding-left: 0;
104
+ // padding: 0;
105
+ // margin: 0;
106
+ // border-left: none;
107
+ // }
108
+ // }
109
+ // }
110
+ // }
111
+ // }
112
+
113
+ // .general-information {
114
+ // display: flex;
115
+ // align-items: center;
116
+ // justify-content: space-between;
117
+ // padding: 10px 15px 10px 20px;
118
+
119
+ // p {
120
+ // font-weight: 500;
121
+ // font-weight: 13px;
122
+ // }
123
+
124
+ // i.fa-check-circle {
125
+ // padding-left: 30px;
126
+ // color: #00a651;
127
+ // }
128
+ // }
129
+
130
+ // // title start
131
+ // .menu-title {
132
+ // display: flex;
133
+ // align-items: center;
134
+ // width: 100%;
135
+ // justify-content: space-between;
136
+ // padding: 18px;
137
+ // background-color: $primary-90;
138
+
139
+ // p {
140
+ // font-size: 13px;
141
+ // font-weight: 600;
142
+ // color: $primary-10;
143
+ // }
144
+ // }
145
+
146
+ // // title end
147
+
148
+ // .widget-menu-inner {
149
+ // a {
150
+ // padding: 10px;
151
+ // justify-content: center;
152
+ // padding-left: 20px;
153
+ // display: block;
154
+ // background-color: $white-100;
155
+ // text-align: left;
156
+ // color: $primary-10;
157
+ // font-size: 13px;
158
+ // font-weight: 500;
159
+
160
+ // &:hover {
161
+ // &:after {
162
+ // width: 100%;
163
+ // border-radius: 0;
164
+ // background-color: $ac-bg;
165
+ // }
166
+ // }
167
+ // }
168
+
169
+ // .dropdown-2 {
170
+ // position: relative;
171
+ // z-index: 1;
172
+
173
+ // &:hover {
174
+ // &::after {
175
+ // display: none;
176
+ // }
177
+ // }
178
+
179
+ // span {
180
+ // i {
181
+ // &.fa {
182
+ // right: 15px;
183
+ // position: absolute;
184
+ // }
185
+ // }
186
+ // }
187
+
188
+ // ul {
189
+ // position: relative;
190
+ // left: 0;
191
+ // top: 10px;
192
+ // z-index: 1;
193
+
194
+ // &::after {
195
+ // position: absolute;
196
+ // z-index: 1;
197
+ // content: "";
198
+ // left: 2.5px;
199
+ // top: 0;
200
+ // width: 1px;
201
+ // height: calc(100% - 22px);
202
+ // background-color: $primary-20;
203
+ // }
204
+
205
+ // &::before {
206
+ // position: absolute;
207
+ // z-index: 2;
208
+ // content: "";
209
+ // left: 0;
210
+ // top: 0;
211
+ // width: 6px;
212
+ // height: 6px;
213
+ // border-radius: 50%;
214
+ // background-color: $primary-20;
215
+ // }
216
+
217
+ // li {
218
+ // position: relative;
219
+ // z-index: 1;
220
+ // padding-left: 15px;
221
+
222
+ // &:after {
223
+ // position: absolute;
224
+ // content: "";
225
+ // left: 3px;
226
+ // bottom: 22px;
227
+ // width: 20px;
228
+ // height: 1px;
229
+ // background-color: $primary-20;
230
+ // z-index: 9;
231
+ // }
232
+
233
+ // &::before {
234
+ // position: absolute;
235
+ // z-index: 2;
236
+ // content: "";
237
+ // left: 20px;
238
+ // bottom: 19.5px;
239
+ // width: 6px;
240
+ // height: 6px;
241
+ // border-radius: 50%;
242
+ // background-color: $primary-20;
243
+ // }
244
+ // }
245
+ // }
246
+ // }
247
+ // }
248
+ // }
249
249
 
250
250
  // widget menu end
251
251
  /****************************************