@appscode/design-system 1.1.0-alpha.9 → 1.1.0-beta.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 (186) hide show
  1. package/base/utilities/_all.scss +1 -1
  2. package/base/utilities/_default.scss +41 -41
  3. package/base/utilities/_derived-variables.scss +8 -9
  4. package/base/utilities/_extended.scss +1 -1
  5. package/base/utilities/_initial-variables.scss +52 -50
  6. package/base/utilities/_mixin.scss +11 -11
  7. package/base/utilities/_typography.scss +22 -22
  8. package/base/utilities/dark-theme.scss +1 -1
  9. package/components/_ac-accordion.scss +6 -6
  10. package/components/_ac-alert-box.scss +27 -28
  11. package/components/_ac-calendar.scss +4 -4
  12. package/components/_ac-card.scss +55 -55
  13. package/components/_ac-code-highlight.scss +6 -6
  14. package/components/_ac-content-layout.scss +165 -165
  15. package/components/_ac-drag.scss +11 -11
  16. package/components/_ac-input.scss +85 -85
  17. package/components/_ac-modal.scss +8 -8
  18. package/components/_ac-multi-select.scss +751 -751
  19. package/components/_ac-options.scss +12 -13
  20. package/components/_ac-select-box.scss +5 -5
  21. package/components/_ac-table.scss +55 -55
  22. package/components/_ac-tabs.scss +36 -36
  23. package/components/_ac-tags.scss +22 -22
  24. package/components/_ac-terminal.scss +253 -253
  25. package/components/_add-card.scss +3 -3
  26. package/components/_app-drawer.scss +4 -4
  27. package/components/_basic-card.scss +108 -118
  28. package/components/_breadcumb.scss +5 -5
  29. package/components/_buttons.scss +64 -64
  30. package/components/_card-body-wrapper.scss +5 -5
  31. package/components/_dashboard-header.scss +29 -29
  32. package/components/_direct-deploy.scss +8 -8
  33. package/components/_go-to-top.scss +1 -1
  34. package/components/_image-upload.scss +3 -3
  35. package/components/_left-sidebar-menu.scss +374 -376
  36. package/components/_monaco-editor.scss +1 -1
  37. package/components/_navbar.scss +65 -65
  38. package/components/_nested-list.scss +1 -1
  39. package/components/_overview-info.scss +7 -7
  40. package/components/_overview-page.scss +4 -4
  41. package/components/_pagination.scss +110 -110
  42. package/components/_payment-card.scss +20 -20
  43. package/components/_preloader.scss +1 -1
  44. package/components/_preview-modal.scss +18 -18
  45. package/components/_pricing-table.scss +10 -10
  46. package/components/_progress-bar.scss +12 -12
  47. package/components/_subscription-card.scss +14 -14
  48. package/components/_table-of-content.scss +4 -4
  49. package/components/_tfa.scss +9 -9
  50. package/components/_widget-menu.scss +17 -17
  51. package/components/_wizard.scss +82 -82
  52. package/components/ac-toaster/_ac-toasted.scss +1 -1
  53. package/components/bbum/_activities-header.scss +1 -1
  54. package/components/bbum/_card-team.scss +12 -12
  55. package/components/bbum/_information-center.scss +13 -13
  56. package/components/bbum/_left-sidebar.scss +8 -8
  57. package/components/bbum/_mobile-desktop.scss +7 -7
  58. package/components/bbum/_post.scss +5 -5
  59. package/components/bbum/_sign-up-notification.scss +10 -10
  60. package/components/bbum/_single-post-preview.scss +21 -21
  61. package/components/bbum/_user-profile.scss +10 -10
  62. package/components/ui-builder/_ui-builder.scss +15 -15
  63. package/components/ui-builder/_vue-open-api.scss +2 -2
  64. package/layouts/_code-preview.scss +11 -11
  65. package/package.json +1 -1
  66. package/vue-components/plugins/time-convert.js +49 -0
  67. package/vue-components/text.vue +1 -0
  68. package/vue-components/types/cluster.ts +6 -0
  69. package/vue-components/types/longRunningTasks.ts +20 -0
  70. package/vue-components/types/notification.ts +6 -0
  71. package/vue-components/types/previewYaml.ts +8 -0
  72. package/vue-components/types/table.ts +54 -0
  73. package/vue-components/types/theme.ts +10 -0
  74. package/vue-components/types/user.ts +22 -0
  75. package/vue-components/v2/card/OverviewCards.vue +17 -2
  76. package/vue-components/v2/editor/ResourceKeyValueEditor.vue +21 -21
  77. package/vue-components/v2/icons/Ellipsis.vue +2 -1
  78. package/vue-components/v2/modal/Modal.vue +0 -5
  79. package/vue-components/v2/navbar/Appdrawer.vue +37 -12
  80. package/vue-components/v2/navbar/Navbar.vue +3 -3
  81. package/vue-components/v2/navbar/NavbarItem.vue +3 -1
  82. package/vue-components/v2/navbar/NavbarItemContent.vue +1 -1
  83. package/vue-components/v2/navbar/User.vue +5 -22
  84. package/vue-components/v2/pagination/Pagination.vue +65 -0
  85. package/vue-components/v2/sidebar/SidebarItem.vue +10 -7
  86. package/vue-components/v3/accordion/Accordion.vue +151 -0
  87. package/vue-components/v3/alert/Alert.vue +238 -0
  88. package/vue-components/v3/alert/Toast.vue +79 -0
  89. package/vue-components/v3/banner/Banner.vue +10 -0
  90. package/vue-components/v3/breadcrumbs/Breadcrumb.vue +104 -0
  91. package/vue-components/v3/button/Button.vue +831 -58
  92. package/vue-components/v3/button/Buttons.vue +6 -0
  93. package/vue-components/v3/button/DownloadBtn.vue +31 -0
  94. package/vue-components/v3/cards/Card.vue +32 -0
  95. package/vue-components/v3/cards/CardContent.vue +7 -0
  96. package/vue-components/v3/cards/CardHeader.vue +14 -0
  97. package/vue-components/v3/cards/Cards.vue +7 -0
  98. package/vue-components/v3/cards/Cluster.vue +150 -0
  99. package/vue-components/v3/cards/Counter.vue +27 -0
  100. package/vue-components/v3/cards/FeatureCard.vue +40 -0
  101. package/vue-components/v3/cards/FeatureCards.vue +6 -0
  102. package/vue-components/v3/cards/InfoCard.vue +248 -0
  103. package/vue-components/v3/cards/Monitoring.vue +94 -0
  104. package/vue-components/v3/cards/OverviewCard.vue +24 -0
  105. package/vue-components/v3/cards/OverviewCards.vue +31 -0
  106. package/vue-components/v3/cards/Payment.vue +62 -0
  107. package/vue-components/v3/cards/Vendor.vue +23 -0
  108. package/vue-components/v3/content/ContentHeader.vue +39 -30
  109. package/vue-components/v3/content/ContentLayout.vue +20 -0
  110. package/vue-components/v3/content/ContentTable.vue +37 -61
  111. package/vue-components/v3/dropdown/DropdownDivider.vue +2 -0
  112. package/vue-components/v3/dropdown/DropdownItem.vue +2 -0
  113. package/vue-components/v3/dropdown/DropdownMenu.vue +85 -91
  114. package/vue-components/v3/editor/Editor.vue +100 -113
  115. package/vue-components/v3/editor/FilteredFileEditor.vue +124 -127
  116. package/vue-components/v3/editor/ResourceKeyValueEditor.vue +70 -94
  117. package/vue-components/v3/footer/FooterArea.vue +34 -0
  118. package/vue-components/v3/footer/FooterItem.vue +29 -0
  119. package/vue-components/v3/footer/FooterItems.vue +15 -0
  120. package/vue-components/v3/footer/Info.vue +23 -0
  121. package/vue-components/v3/footer/Status.vue +42 -0
  122. package/vue-components/v3/footer/Usage.vue +44 -0
  123. package/vue-components/v3/form/Form.vue +24 -33
  124. package/vue-components/v3/form/FormFooterControl.vue +7 -0
  125. package/vue-components/v3/form/FormFooterControls.vue +7 -0
  126. package/vue-components/v3/form-fields/AcSingleInput.vue +520 -0
  127. package/vue-components/v3/form-fields/Input.vue +19 -14
  128. package/vue-components/v3/header/Header.vue +117 -24
  129. package/vue-components/v3/header/HeaderItem.vue +18 -0
  130. package/vue-components/v3/header/HeaderItems.vue +4 -0
  131. package/vue-components/v3/icons/Ellipsis.vue +2 -0
  132. package/vue-components/v3/loaders/ResourceLoader.vue +4 -12
  133. package/vue-components/v3/loaders/SidebarLoader.vue +4 -12
  134. package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue +17 -15
  135. package/vue-components/v3/modal/Modal.vue +292 -96
  136. package/vue-components/v3/modals/DeleteConfirmationModal.vue +37 -50
  137. package/vue-components/v3/modals/JsonShowModal.vue +62 -68
  138. package/vue-components/v3/modals/LongRunningTasksModal.vue +145 -143
  139. package/vue-components/v3/navbar/Appdrawer.vue +196 -51
  140. package/vue-components/v3/navbar/Navbar.vue +296 -0
  141. package/vue-components/v3/navbar/NavbarItem.vue +81 -0
  142. package/vue-components/v3/navbar/NavbarItemContent.vue +284 -0
  143. package/vue-components/v3/navbar/Notification.vue +179 -0
  144. package/vue-components/v3/navbar/ThemeMode.vue +128 -112
  145. package/vue-components/v3/navbar/User.vue +383 -268
  146. package/vue-components/v3/notification/AlertBox.vue +39 -42
  147. package/vue-components/v3/notification/Notification.vue +49 -43
  148. package/vue-components/v3/notification/NotificationItem.vue +51 -19
  149. package/vue-components/v3/option-dots/Options.vue +188 -0
  150. package/vue-components/v3/pagination/Pagination.vue +203 -99
  151. package/vue-components/v3/preloader/Preloader.vue +23 -0
  152. package/vue-components/v3/searchbars/SearchBar.vue +51 -34
  153. package/vue-components/v3/sidebar/AccentColorPicker.vue +97 -0
  154. package/vue-components/v3/sidebar/ClusterSwitcher.vue +834 -81
  155. package/vue-components/v3/sidebar/Sidebar.vue +271 -0
  156. package/vue-components/v3/sidebar/SidebarBody.vue +7 -0
  157. package/vue-components/v3/sidebar/SidebarFooter.vue +80 -0
  158. package/vue-components/v3/sidebar/SidebarHeader.vue +124 -0
  159. package/vue-components/v3/sidebar/SidebarItem.vue +62 -0
  160. package/vue-components/v3/sidebar/SidebarItemWithDropDown.vue +101 -104
  161. package/vue-components/v3/sidebar/SidebarMenuList.vue +9 -0
  162. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +128 -0
  163. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +29 -0
  164. package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue +99 -0
  165. package/vue-components/v3/tab/TabItem.vue +10 -12
  166. package/vue-components/v3/tab/Tabs.vue +9 -0
  167. package/vue-components/v3/tab/TabsBody.vue +7 -0
  168. package/vue-components/v3/table/EmptyTableInfo.vue +8 -0
  169. package/vue-components/v3/table/FakeTableCell.vue +22 -31
  170. package/vue-components/v3/table/InfoTable.vue +85 -59
  171. package/vue-components/v3/table/MultiInfoTable.vue +72 -95
  172. package/vue-components/v3/table/Table.vue +582 -151
  173. package/vue-components/v3/table/TableCell.vue +20 -23
  174. package/vue-components/v3/table/TableContainer.vue +50 -28
  175. package/vue-components/v3/table/TableRow.vue +63 -85
  176. package/vue-components/v3/table/table-cell/ArrayCell.vue +67 -79
  177. package/vue-components/v3/table/table-cell/CellValue.vue +97 -103
  178. package/vue-components/v3/table/table-cell/GenericCell.vue +43 -42
  179. package/vue-components/v3/table/table-cell/ObjectCell.vue +67 -79
  180. package/vue-components/v3/table/table-cell/ValueWithModal.vue +22 -31
  181. package/vue-components/v3/tabs/EditorTabs.vue +18 -24
  182. package/vue-components/v3/tag/Tag.vue +15 -12
  183. package/vue-components/v3/tag/Tags.vue +7 -0
  184. package/vue-components/v3/terminal/LongRunningTaskTerminal.vue +26 -23
  185. package/mixins/stickyContent.js +0 -141
  186. package/plugins/caching.ts +0 -243
package/components/_left-sidebar-menu.scss CHANGED
@@ -1,23 +1,23 @@
1
1
  .ac-system-left-sidebar {
2
2
  min-height: calc(100vh - 50px);
3
3
 
4
- &.is-expanded {
5
- .ac-left-sidebar-wrapper {
6
- &.style-2 {
7
- .ac-lef-sidebar-inner {
8
- .ac-left-sidebar {
9
- .ac-menu-list {
10
- background-color: $ac-white;
11
- }
12
- }
13
- }
14
- }
15
- }
16
- }
4
+ // &.is-expanded {
5
+ // .ac-left-sidebar-wrapper {
6
+ // &.style-2 {
7
+ // .ac-left-sidebar-inner {
8
+ // .ac-left-sidebar {
9
+ // .ac-menu-list {
10
+ // background-color: $white-100;
11
+ // }
12
+ // }
13
+ // }
14
+ // }
15
+ // }
16
+ // }
17
17
 
18
18
  &.is-close {
19
19
  .ac-left-sidebar-wrapper {
20
- .ac-lef-sidebar-inner {
20
+ .ac-left-sidebar-inner {
21
21
  .ac-left-sidebar {
22
22
  .menu-list {
23
23
  &.ac-menu-list {
@@ -43,292 +43,290 @@
43
43
  }
44
44
 
45
45
  .ac-left-sidebar-wrapper {
46
- background-color: $ac-white-lightest;
46
+ background-color: $white-100-lightest;
47
47
  width: 100%;
48
48
  position: sticky;
49
49
  top: 50px;
50
50
 
51
51
  // ac-left-sidebar-2 start
52
- &.style-2 {
53
- .ac-lef-sidebar-inner {
54
- .ac-left-sidebar {
55
- .ac-product-logo {
56
- padding-left: 10px;
57
- padding-right: 10px;
58
- justify-content: center;
52
+ // &.style-2 {
53
+ // .ac-left-sidebar-inner {
54
+ // .ac-left-sidebar {
55
+ // .ac-product-logo {
56
+ // padding-left: 10px;
57
+ // padding-right: 10px;
58
+ // justify-content: center;
59
+
60
+ // .ac-product-version {
61
+ // p {
62
+ // font-size: 11px;
63
+ // line-height: 1.2;
64
+ // }
65
+ // }
66
+ // }
67
+
68
+ // .button {
69
+ // &.is-transparent {
70
+ // width: 70px;
71
+ // }
72
+ // }
73
+
74
+ // .ac-product-logo {
75
+ // padding-left: 20px;
76
+ // justify-content: inherit;
77
+ // display: flex;
78
+ // height: 50px;
79
+ // width: 70px !important;
80
+ // }
81
+
82
+ // .ac-menu-list {
83
+ // width: 70px;
84
+ // // transition: 0.3s ease-in-out;
85
+ // background-color: $primary-90;
86
+
87
+ // li {
88
+ // a {
89
+ // padding: 12px 15px 12px 26px !important;
90
+ // font-weight: 500;
91
+
92
+ // &:hover {
93
+ // &::after {
94
+ // width: calc(100% - 5px) !important;
95
+ // }
96
+
97
+ // span {
98
+ // color: $ac-link-black;
99
+ // }
100
+ // }
101
+
102
+ // &.ac-dropdown-button {
103
+ // .ac-arrow-down {
104
+ // right: 8px !important;
105
+ // }
106
+ // }
107
+ // }
108
+
109
+ // &.is-open {
110
+ // ul {
111
+ // li {
112
+ // a {
113
+ // padding-left: 25px;
114
+ // background-color: $white-100;
115
+ // }
116
+ // }
117
+ // }
118
+ // }
119
+
120
+ // a {
121
+ // strong {
122
+ // display: none;
123
+ // }
124
+
125
+ // span {
126
+ // padding: 0;
127
+ // margin-right: 0;
128
+ // }
129
+ // }
130
+ // }
131
+ // }
132
+ // }
133
+ // }
134
+ // }
59
135
 
60
- .ac-product-version {
61
- p {
62
- font-size: 11px;
63
- line-height: 1.2;
64
- }
65
- }
66
- }
136
+ // ac-left-sidebar-2 end
137
+ .ac-left-sidebar {
138
+ .ac-product-logo {
139
+ background-color: transparent;
140
+ border-bottom: 1px solid $primary-90;
141
+ height: 50px;
142
+ display: flex;
143
+ // justify-content: space-between;
144
+ padding: 0 10px 0 15px;
145
+ align-items: center;
146
+
147
+ .ac-product-version {
148
+ font-size: 12px;
149
+ font-weight: 500;
150
+ color: $ac-link-black;
151
+ }
152
+ }
67
153
 
68
- .button {
69
- &.is-transparent {
70
- width: 70px;
71
- }
72
- }
154
+ .menu-list {
155
+ &.ac-menu-list {
156
+ height: calc(100vh - 100px);
157
+ overflow-y: auto;
158
+ padding-top: 8px;
159
+ scrollbar-color: $white-100-light transparent;
73
160
 
74
- .ac-product-logo {
75
- padding-left: 20px;
76
- justify-content: inherit;
77
- display: flex;
78
- height: 50px;
79
- width: 70px !important;
161
+ /* width */
162
+ &::-webkit-scrollbar {
163
+ display: none;
80
164
  }
81
165
 
82
- .ac-menu-list {
83
- width: 70px;
84
- // transition: 0.3s ease-in-out;
85
- background-color: $ac-white-light;
166
+ &::-webkit-scrollbar {
167
+ display: none;
168
+ }
86
169
 
87
- li {
170
+ li {
171
+ &.is-open {
88
172
  a {
89
- padding: 12px 15px 12px 26px !important;
90
- font-weight: 500;
91
-
92
- &:hover {
93
- &::after {
94
- width: calc(100% - 5px) !important;
95
- }
96
-
97
- span {
98
- color: $ac-link-black;
99
- }
100
- }
101
-
102
173
  &.ac-dropdown-button {
103
174
  .ac-arrow-down {
104
- right: 8px !important;
175
+ transform: rotate(-180deg);
176
+ transform-origin: 5px;
105
177
  }
106
178
  }
107
179
  }
108
180
 
109
- &.is-open {
110
- ul {
111
- li {
112
- a {
113
- padding-left: 25px;
114
- background-color: $ac-white;
181
+ ul {
182
+ li {
183
+ a {
184
+ strong {
185
+ font-weight: 500;
115
186
  }
116
187
  }
117
188
  }
118
189
  }
190
+ }
119
191
 
120
- a {
121
- strong {
122
- display: none;
123
- }
192
+ a {
193
+ font-style: normal;
194
+ font-weight: 500;
195
+ font-size: 13px;
196
+ line-height: 16px;
197
+ color: $ac-link-black;
198
+ position: relative;
199
+ z-index: 1;
200
+ padding: 10px 15px 10px 24px;
201
+ transition: 0.3s ease-in-out;
202
+ display: flex;
203
+ align-items: center;
204
+
205
+ &:after {
206
+ position: absolute;
207
+ content: "";
208
+ left: 0;
209
+ top: 0;
210
+ width: 0;
211
+ height: 100%;
212
+ background-color: $white-100-lighter;
213
+ border-radius: 0 50px 50px 0;
214
+ z-index: -1;
215
+ transition: 0.3s ease-in-out;
216
+ }
124
217
 
125
- span {
126
- padding: 0;
218
+ strong {
219
+ max-width: calc(100% - 65px);
220
+ // line-break: anywhere;
221
+ white-space: break-spaces;
222
+ display: flex;
223
+ align-items: center;
224
+ overflow: hidden;
225
+ font-weight: 500;
226
+ }
227
+
228
+ &.ac-dropdown-button {
229
+ user-select: none;
230
+
231
+ .ac-arrow-down {
232
+ position: absolute;
127
233
  margin-right: 0;
234
+ right: 20px;
235
+ transition: transform 0.3s;
236
+ transform-origin: 4px;
128
237
  }
129
238
  }
130
- }
131
- }
132
- }
133
- }
134
- }
135
-
136
- // ac-left-sidebar-2 end
137
- .ac-lef-sidebar-inner {
138
- .ac-left-sidebar {
139
- .ac-product-logo {
140
- background-color: transparent;
141
- border-bottom: 1px solid $ac-white-light;
142
- height: 50px;
143
- display: flex;
144
- justify-content: space-between;
145
- padding: 0 10px 0 15px;
146
- align-items: center;
147
-
148
- .ac-product-version {
149
- font-size: 12px;
150
- font-weight: 500;
151
- color: $ac-link-black;
152
- }
153
- }
154
239
 
155
- .menu-list {
156
- &.ac-menu-list {
157
- height: calc(100vh - 100px);
158
- overflow-y: auto;
159
- padding-top: 8px;
160
- scrollbar-color: $ac-white-light transparent;
240
+ &:hover {
241
+ background-color: transparent;
161
242
 
162
- /* width */
163
- &::-webkit-scrollbar {
164
- display: none;
165
- }
243
+ &:after {
244
+ width: calc(100% - 15px);
245
+ color: $primary;
246
+ }
166
247
 
167
- &::-webkit-scrollbar {
168
- display: none;
169
- }
248
+ span {
249
+ color: $ac-link-black;
170
250
 
171
- li {
172
- &.is-open {
173
- a {
174
- &.ac-dropdown-button {
175
- .ac-arrow-down {
176
- transform: rotate(-180deg);
177
- transform-origin: 5px;
178
- }
251
+ img {
252
+ filter: grayscale(0);
179
253
  }
180
254
  }
255
+ }
181
256
 
182
- ul {
183
- li {
184
- a {
185
- strong {
186
- font-weight: 500;
187
- }
188
- }
257
+ &.is-active {
258
+ color: $primary !important;
259
+ background-color: transparent;
260
+
261
+ span {
262
+ i.fa {
263
+ color: $primary;
189
264
  }
190
- }
191
- }
192
265
 
193
- a {
194
- font-style: normal;
195
- font-weight: 500;
196
- font-size: $font-size-small;
197
- line-height: 16px;
198
- color: $ac-link-black;
199
- position: relative;
200
- z-index: 1;
201
- padding: 10px 15px 10px 24px;
202
- transition: 0.3s ease-in-out;
203
- display: flex;
204
- align-items: center;
266
+ img {
267
+ filter: grayscale(0);
268
+ }
269
+ }
205
270
 
206
- &:after {
271
+ &:after,
272
+ &::before {
273
+ background: linear-gradient(
274
+ 89.41deg,
275
+ hsla(
276
+ var(--hsl-hue),
277
+ var(--hsl-saturation),
278
+ var(--hsl-lightness),
279
+ 0.2
280
+ ),
281
+ rgba(25, 113, 189, 0) 138.7%
282
+ );
207
283
  position: absolute;
208
284
  content: "";
209
285
  left: 0;
210
286
  top: 0;
211
- width: 0;
287
+ width: calc(100% - 15px);
212
288
  height: 100%;
213
- background-color: $ac-white-lighter;
214
289
  border-radius: 0 50px 50px 0;
215
290
  z-index: -1;
216
- transition: 0.3s ease-in-out;
217
- }
218
-
219
- strong {
220
- max-width: calc(100% - 65px);
221
- // line-break: anywhere;
222
- white-space: break-spaces;
223
- display: flex;
224
- align-items: center;
225
- overflow: hidden;
226
- font-weight: 500;
227
291
  }
228
292
 
229
- &.ac-dropdown-button {
230
- user-select: none;
231
-
232
- .ac-arrow-down {
233
- position: absolute;
234
- margin-right: 0;
235
- right: 20px;
236
- transition: transform 0.3s;
237
- transform-origin: 4px;
238
- }
239
- }
240
-
241
- &:hover {
242
- background-color: transparent;
243
-
244
- &:after {
245
- width: calc(100% - 15px);
246
- color: $ac-primary;
247
- }
248
-
249
- span {
250
- color: $ac-link-black;
251
-
252
- img {
253
- filter: grayscale(0);
254
- }
255
- }
256
- }
257
-
258
- &.is-active {
259
- color: $ac-primary !important;
260
- background-color: transparent;
261
-
262
- span {
263
- i.fa {
264
- color: $ac-primary;
265
- }
266
-
267
- img {
268
- filter: grayscale(0);
269
- }
270
- }
271
-
272
- &:after,
273
- &::before {
274
- background: linear-gradient(
275
- 89.41deg,
276
- hsla(
277
- var(--hsl-hue),
278
- var(--hsl-saturation),
279
- var(--hsl-lightness),
280
- 0.2
281
- ),
282
- rgba(25, 113, 189, 0) 138.7%
283
- );
284
- position: absolute;
285
- content: "";
286
- left: 0;
287
- top: 0;
288
- width: calc(100% - 15px);
289
- height: 100%;
290
- border-radius: 0 50px 50px 0;
291
- z-index: -1;
292
- }
293
-
294
- &::before {
295
- background-color: $ac-primary;
296
- height: 100%;
297
- width: 4px;
298
- z-index: 9;
299
- }
293
+ &::before {
294
+ background-color: $primary;
295
+ height: 100%;
296
+ width: 4px;
297
+ z-index: 9;
300
298
  }
299
+ }
301
300
 
302
- span {
303
- margin-right: 15px;
304
- width: 16px;
305
- height: 16px;
306
- color: $ac-gray-dark;
307
- font-size: 16px;
301
+ span {
302
+ margin-right: 15px;
303
+ width: 16px;
304
+ height: 16px;
305
+ color: $black-30;
306
+ font-size: 16px;
308
307
 
309
- img {
310
- width: 100%;
311
- filter: grayscale(1);
312
- transition: 0.3s ease-in-out;
313
- }
308
+ img {
309
+ width: 100%;
310
+ filter: grayscale(1);
311
+ transition: 0.3s ease-in-out;
314
312
  }
315
313
  }
314
+ }
316
315
 
317
- ul {
318
- max-height: 0;
319
- transition: max-height 0.2s ease-out;
320
- margin: 0;
321
- padding: 0;
322
- border-left: none;
323
- overflow: hidden;
316
+ ul {
317
+ max-height: 0;
318
+ transition: max-height 0.2s ease-out;
319
+ margin: 0;
320
+ padding: 0;
321
+ border-left: none;
322
+ overflow: hidden;
324
323
 
325
- li {
326
- a {
327
- padding-left: 60px;
328
- font-size: $font-size-extra-small;
329
- padding-top: 10px;
330
- padding-bottom: 10px;
331
- }
324
+ li {
325
+ a {
326
+ padding-left: 60px;
327
+ font-size: 12px;
328
+ padding-top: 10px;
329
+ padding-bottom: 10px;
332
330
  }
333
331
  }
334
332
  }
@@ -353,7 +351,7 @@
353
351
 
354
352
  &:active {
355
353
  i.fa {
356
- background-color: $ac-white-lighter;
354
+ background-color: $white-100-lighter;
357
355
  width: 25px;
358
356
  height: 25px;
359
357
  text-align: center;
@@ -363,7 +361,7 @@
363
361
  }
364
362
 
365
363
  &:hover {
366
- color: $ac-primary !important;
364
+ color: $primary !important;
367
365
  transform: scale(1.2);
368
366
  }
369
367
  }
@@ -376,136 +374,136 @@
376
374
  padding: 5px;
377
375
  }
378
376
 
379
- .multiselect {
380
- height: 50px;
381
-
382
- // commented out to set full width select box when right content is not present
383
- // width: 234px;
384
-
385
- left: 0px;
386
- top: -5px;
387
-
388
- .multiselect__select {
389
- height: 50px;
390
- top: 4px;
391
- }
392
-
393
- .multiselect__tags {
394
- border: none !important;
395
- background-color: $ac-bg-light-gray;
396
- min-height: 54px;
397
- border-radius: 0;
398
-
399
- .multiselect__placeholder {
400
- padding-top: 12px !important;
401
- font-size: 14px;
402
- }
403
-
404
- .multiselect__input {
405
- background-color: $ac-bg-light-gray !important;
406
- top: 13px;
407
-
408
- &::placeholder {
409
- font-size: 12px;
410
- font-weight: 500;
411
- }
412
- }
413
- }
414
-
415
- .multiselect__single {
416
- background-color: $ac-bg-light-gray !important;
417
- top: 14px !important;
418
-
419
- img {
420
- width: 20px;
421
- margin-right: 8px;
422
- }
423
-
424
- span {
425
- span {
426
- overflow: hidden;
427
- text-overflow: ellipsis;
428
- display: -webkit-box;
429
- line-clamp: 1;
430
- -webkit-line-clamp: 1;
431
- box-orient: vertical;
432
- -webkit-box-orient: vertical;
433
- }
434
- }
435
- }
436
- }
437
-
438
- .multiselect__content-wrapper {
439
- border: 1px solid $ac-white-light;
440
-
441
- .multiselect__content {
442
- .multiselect__element {
443
- .multiselect__option {
444
- display: flex;
445
- align-items: center;
446
- font-size: 14px;
447
-
448
- img {
449
- width: 25px;
450
- }
451
-
452
- p {
453
- color: $ac-color-text;
454
- font-weight: 500;
455
- }
456
-
457
- .location {
458
- color: $ac-color-text;
459
- font-weight: 400;
460
- opacity: 0.8;
461
- }
462
- }
463
- }
464
- }
465
- }
377
+ // .multiselect {
378
+ // height: 50px;
379
+
380
+ // // commented out to set full width select box when right content is not present
381
+ // // width: 234px;
382
+
383
+ // left: 0px;
384
+ // top: -5px;
385
+
386
+ // .multiselect__select {
387
+ // height: 50px;
388
+ // top: 4px;
389
+ // }
390
+
391
+ // .multiselect__tags {
392
+ // border: none !important;
393
+ // background-color: $black-60;
394
+ // min-height: 54px;
395
+ // border-radius: 0;
396
+
397
+ // .multiselect__placeholder {
398
+ // padding-top: 12px !important;
399
+ // font-size: 14px;
400
+ // }
401
+
402
+ // .multiselect__input {
403
+ // background-color: $ac-bg-light-gray !important;
404
+ // top: 13px;
405
+
406
+ // &::placeholder {
407
+ // font-size: 12px;
408
+ // font-weight: 500;
409
+ // }
410
+ // }
411
+ // }
412
+
413
+ // .multiselect__single {
414
+ // background-color: $ac-bg-light-gray !important;
415
+ // top: 14px !important;
416
+
417
+ // img {
418
+ // width: 20px;
419
+ // margin-right: 8px;
420
+ // }
421
+
422
+ // span {
423
+ // span {
424
+ // overflow: hidden;
425
+ // text-overflow: ellipsis;
426
+ // display: -webkit-box;
427
+ // line-clamp: 1;
428
+ // -webkit-line-clamp: 1;
429
+ // box-orient: vertical;
430
+ // -webkit-box-orient: vertical;
431
+ // }
432
+ // }
433
+ // }
434
+ // }
435
+
436
+ // .multiselect__content-wrapper {
437
+ // border: 1px solid $primary-90;
438
+
439
+ // .multiselect__content {
440
+ // .multiselect__element {
441
+ // .multiselect__option {
442
+ // display: flex;
443
+ // align-items: center;
444
+ // font-size: 14px;
445
+
446
+ // img {
447
+ // width: 25px;
448
+ // }
449
+
450
+ // p {
451
+ // color: $primary-10;
452
+ // font-weight: 500;
453
+ // }
454
+
455
+ // .location {
456
+ // color: $primary-10;
457
+ // font-weight: 400;
458
+ // opacity: 0.8;
459
+ // }
460
+ // }
461
+ // }
462
+ // }
463
+ // }
466
464
  }
467
465
 
468
466
  // cluster switcher end
469
467
 
470
468
  // dark theme start
471
- .is-dark-theme {
472
- body {
473
- .ac-system-body {
474
- .ac-system-left-sidebar {
475
- background-color: var(--dark-bg);
476
- }
477
- }
478
-
479
- .ac-left-sidebar-wrapper {
480
- .ac-lef-sidebar-inner {
481
- .ac-left-sidebar {
482
- .menu-list {
483
- &.ac-menu-list {
484
- li {
485
- a {
486
- &.is-active {
487
- font-weight: 500;
488
- color: $ac-full-white !important;
489
-
490
- span {
491
- i.fa {
492
- color: $ac-primary;
493
- }
494
- }
495
-
496
- &:after {
497
- background: var(--dark-bg-light) !important;
498
- }
499
- }
500
- }
501
- }
502
- }
503
- }
504
- }
505
- }
506
- }
507
- }
508
- }
469
+ // .is-dark-theme {
470
+ // body {
471
+ // .ac-system-body {
472
+ // .ac-system-left-sidebar {
473
+ // background-color: var(--dark-bg);
474
+ // }
475
+ // }
476
+
477
+ // .ac-left-sidebar-wrapper {
478
+ // .ac-left-sidebar-inner {
479
+ // .ac-left-sidebar {
480
+ // .menu-list {
481
+ // &.ac-menu-list {
482
+ // li {
483
+ // a {
484
+ // &.is-active {
485
+ // font-weight: 500;
486
+ // color: $ac-full-white !important;
487
+
488
+ // span {
489
+ // i.fa {
490
+ // color: $primary;
491
+ // }
492
+ // }
493
+
494
+ // &:after {
495
+ // background: var(--dark-bg-light) !important;
496
+ // }
497
+ // }
498
+ // }
499
+ // }
500
+ // }
501
+ // }
502
+ // }
503
+ // }
504
+ // }
505
+ // }
506
+ // }
509
507
 
510
508
  // dark theme end
511
509
  /****************************************
@@ -525,7 +523,7 @@ Responsive Classes
525
523
  .dropdown-2 {
526
524
  ul {
527
525
  li {
528
- background-color: $ac-white;
526
+ background-color: $white-100;
529
527
  }
530
528
  }
531
529
  }
@@ -538,7 +536,7 @@ Responsive Classes
538
536
  }
539
537
  }
540
538
 
541
- .ac-lef-sidebar-inner {
539
+ .ac-left-sidebar-inner {
542
540
  .ac-left-sidebar {
543
541
  .ac-product-logo {
544
542
  .ac-product-version {