@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/_card-body-wrapper.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  .card-body-wrapper {
2
- background-color: $ac-white;
2
+ background-color: $white-100;
3
3
  border-radius: 4px;
4
4
  box-shadow: none;
5
5
 
6
6
  .card-header {
7
- background-color: $ac-blue-light;
7
+ background-color: $info-light;
8
8
  border-radius: 4px 4px 0px 0px;
9
9
  padding: 10px 20px;
10
10
  box-shadow: none;
@@ -14,7 +14,7 @@
14
14
  font-weight: 500;
15
15
  font-size: 14px;
16
16
  line-height: 16px;
17
- color: $ac-color-heading;
17
+ color: $primary-5;
18
18
 
19
19
  .require {
20
20
  color: #ff0000;
@@ -24,7 +24,7 @@
24
24
  font-weight: normal;
25
25
  font-size: 14px;
26
26
  line-height: 16px;
27
- color: $ac-color-value;
27
+ color: $primary-20;
28
28
  margin-top: 10px;
29
29
  }
30
30
  }
@@ -45,7 +45,7 @@
45
45
  font-weight: normal;
46
46
  font-size: 14px;
47
47
  line-height: 16px;
48
- color: $ac-gray-darker;
48
+ color: $black-40;
49
49
  margin-top: 30px;
50
50
  margin-bottom: 10px;
51
51
  }
package/components/_dashboard-header.scss CHANGED
@@ -1,28 +1,28 @@
1
1
  // dashboard inner header start
2
2
 
3
- .inner-header {
4
- padding: 6px 20px;
5
- border-bottom: 1px solid $ac-white-light;
6
- // display: flex;
7
- // align-items: center;
8
- }
9
- // dashboard inner header end
10
- // .dashboard body header
11
- .header-items {
12
- .header-item {
13
- display: inline-block;
14
- margin-left: 8px;
15
- vertical-align: middle;
3
+ // .inner-header {
4
+ // padding: 6px 20px;
5
+ // border-bottom: 1px solid $primary-90;
6
+ // // display: flex;
7
+ // // align-items: center;
8
+ // }
9
+ // // dashboard inner header end
10
+ // // .dashboard body header
11
+ // .header-items {
12
+ // .header-item {
13
+ // display: inline-block;
14
+ // margin-left: 8px;
15
+ // vertical-align: middle;
16
16
 
17
- &:first-child {
18
- margin-left: 0;
19
- }
17
+ // &:first-child {
18
+ // margin-left: 0;
19
+ // }
20
20
 
21
- .select:not(.is-multiple) {
22
- height: auto;
23
- }
24
- }
25
- }
21
+ // .select:not(.is-multiple) {
22
+ // height: auto;
23
+ // }
24
+ // }
25
+ // }
26
26
 
27
27
  // footer control start
28
28
  .form-footer-controls {
@@ -40,14 +40,14 @@
40
40
  .dashboard-header {
41
41
  padding: 10px 20px;
42
42
  border-radius: 4px;
43
- background-color: $ac-white;
43
+ background-color: $white-100;
44
44
  min-height: 75px;
45
45
  display: table;
46
46
  width: 100%;
47
- border-left: 5px solid $ac-primary;
48
- border-bottom: 1px solid $ac-white-light;
49
- border-top: 1px solid $ac-white-light;
50
- border-right: 1px solid $ac-white-light;
47
+ border-left: 5px solid $primary;
48
+ border-bottom: 1px solid $primary-90;
49
+ border-top: 1px solid $primary-90;
50
+ border-right: 1px solid $primary-90;
51
51
 
52
52
  .dashboard-header-wrapper {
53
53
  height: 100%;
@@ -85,7 +85,7 @@
85
85
  .resource {
86
86
  display: flex;
87
87
  align-items: center;
88
- border-left: 1px solid $ac-white-light;
88
+ border-left: 1px solid $primary-90;
89
89
  padding: 0 1.5rem;
90
90
  margin-top: -10px;
91
91
  margin-bottom: -10px;
@@ -109,7 +109,7 @@
109
109
  hr {
110
110
  margin: 0;
111
111
  padding: 0;
112
- background-color: $ac-white-light;
112
+ background-color: $primary-90;
113
113
  }
114
114
  }
115
- }
115
+ }
package/components/_direct-deploy.scss CHANGED
@@ -3,17 +3,17 @@
3
3
  font-weight: 500;
4
4
  font-size: 18px;
5
5
  line-height: 21px;
6
- color: $ac-color-heading;
6
+ color: $primary-5;
7
7
  margin-bottom: 10px;
8
8
  .fa {
9
- color: $ac-primary;
9
+ color: $primary;
10
10
  }
11
11
  }
12
12
 
13
13
  p {
14
14
  font-size: 14px;
15
15
  line-height: 160%;
16
- color: $ac-color-heading;
16
+ color: $primary-5;
17
17
  margin-bottom: 20px;
18
18
  }
19
19
 
@@ -21,7 +21,7 @@
21
21
  font-weight: normal;
22
22
  font-size: 14px;
23
23
  line-height: 16px;
24
- color: $ac-color-heading;
24
+ color: $primary-5;
25
25
  }
26
26
 
27
27
  .button {
@@ -31,13 +31,13 @@
31
31
  .msg {
32
32
  font-size: 12px;
33
33
  line-height: 14px;
34
- color: $ac-color-value;
34
+ color: $primary-20;
35
35
  }
36
36
  .buttons {
37
37
  &.is-gray {
38
38
  .button {
39
39
  &.ac-primary {
40
- background-color: $ac-blue-light;
40
+ background-color: $info-light;
41
41
  }
42
42
  }
43
43
  }
@@ -50,13 +50,13 @@ h5 {
50
50
  font-weight: 500;
51
51
  font-size: 16px;
52
52
  line-height: 19px;
53
- color: $ac-color-value;
53
+ color: $primary-20;
54
54
  }
55
55
  }
56
56
  .is-gray {
57
57
  .button {
58
58
  border: none;
59
- background-color: $ac-blue-light;
59
+ background-color: $info-light;
60
60
  }
61
61
  }
62
62
 
package/components/_go-to-top.scss CHANGED
@@ -10,7 +10,7 @@
10
10
  height: 40px;
11
11
  line-height: 40px;
12
12
  border-radius: 50%;
13
- color: $ac-white;
13
+ color: $white-100;
14
14
  background-color: rgba(25, 113, 189, 0.5);
15
15
  border: none;
16
16
  opacity: 0;
package/components/_image-upload.scss CHANGED
@@ -22,12 +22,12 @@
22
22
  border-radius: 50%;
23
23
  overflow: hidden;
24
24
  margin: 0 auto 30px;
25
- border: 1px solid $ac-white-light;
25
+ border: 1px solid $primary-90;
26
26
  }
27
27
 
28
28
  .drag-and-drop-msg {
29
29
  font-size: 13px;
30
- color: $ac-color-value;
30
+ color: $primary-20;
31
31
  font-weight: 400;
32
32
  margin-bottom: 10px;
33
33
 
@@ -49,7 +49,7 @@
49
49
  .is-error {
50
50
  font-size: 12px;
51
51
  line-height: 22px;
52
- color: $ac-red;
52
+ color: $danger;
53
53
  text-align: left;
54
54
  }
55
55
  }