@appscode/design-system 1.1.0-beta.91 → 1.1.0-beta.93

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 (9) hide show
  1. package/package.json +1 -1
  2. package/vue-components/v3/button/Button.vue +9 -0
  3. package/vue-components/v3/header/Header.vue +1 -1
  4. package/vue-components/v3/sidebar/SidebarFooter.vue +8 -2
  5. package/vue-components/v3/sidebar/SidebarHeader.vue +3 -0
  6. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue +1 -1
  7. package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +3 -0
  8. package/vue-components/v3/table/InfoTable.vue +1 -1
  9. package/vue-components/v3/table/Table.vue +5 -5
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-beta.91",
3
+ "version": "1.1.0-beta.93",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v3/button/Button.vue CHANGED
@@ -78,17 +78,26 @@ const showUnpluginIcon = computed(() => {
78
78
  &.is-primary {
79
79
  &.is-light {
80
80
  color: $primary;
81
+ &:focus:not(:hover) {
82
+ color: $white-100;
83
+ }
81
84
  }
82
85
  }
83
86
  &.is-warning {
84
87
  &.is-light {
85
88
  color: $yellow-30;
89
+ &:focus:not(:hover) {
90
+ color: $white-100;
91
+ }
86
92
  }
87
93
  }
88
94
 
89
95
  &.is-success {
90
96
  &.is-light {
91
97
  color: $green-30;
98
+ &:focus:not(:hover) {
99
+ color: $white-100;
100
+ }
92
101
  }
93
102
  }
94
103
  &.is-light {
package/vue-components/v3/header/Header.vue CHANGED
@@ -41,7 +41,7 @@ withDefaults(defineProps<Props>(), {
41
41
  <style lang="scss" scoped>
42
42
  .inner-header {
43
43
  padding: 6px 20px;
44
- border-bottom: 1px solid $primary-93;
44
+ border-bottom: 1px solid $primary-95;
45
45
  position: sticky;
46
46
  background: $white-100;
47
47
  z-index: 99;
package/vue-components/v3/sidebar/SidebarFooter.vue CHANGED
@@ -2,10 +2,12 @@
2
2
  import { defineAsyncComponent } from "vue";
3
3
  interface Props {
4
4
  isColorpickerEnabled?: boolean;
5
+ hideBorder?: boolean;
5
6
  }
6
7
 
7
8
  withDefaults(defineProps<Props>(), {
8
9
  isColorpickerEnabled: false,
10
+ hideBorder: false,
9
11
  });
10
12
  defineEmits(["toggleSidebar"]);
11
13
  const AccentColorPicker = defineAsyncComponent(
@@ -14,9 +16,13 @@ const AccentColorPicker = defineAsyncComponent(
14
16
  </script>
15
17
 
16
18
  <template>
17
- <div class="sidebar-footer">
19
+ <div class="sidebar-footer" :class="{ 'b-t-n': hideBorder }">
18
20
  <!-- back button -->
19
- <button class="back-button is-transparent" data-testid = "sidebar-footer-back-button" @click="$emit('toggleSidebar')">
21
+ <button
22
+ class="back-button is-transparent"
23
+ data-testid="sidebar-footer-back-button"
24
+ @click="$emit('toggleSidebar')"
25
+ >
20
26
  <svg
21
27
  width="18"
22
28
  height="18"
package/vue-components/v3/sidebar/SidebarHeader.vue CHANGED
@@ -6,6 +6,7 @@ interface Props {
6
6
  brandLogoAlt?: string;
7
7
  url?: string;
8
8
  modifierClasses?: string;
9
+ hideCollapseButton?: boolean;
9
10
  }
10
11
 
11
12
  withDefaults(defineProps<Props>(), {
@@ -13,12 +14,14 @@ withDefaults(defineProps<Props>(), {
13
14
  brandLogoAlt: "",
14
15
  url: "/",
15
16
  modifierClasses: "",
17
+ hideCollapseButton: false,
16
18
  });
17
19
  </script>
18
20
  <template>
19
21
  <div class="sidebar-header">
20
22
  <!-- hamburger icon -->
21
23
  <div
24
+ v-if="!hideCollapseButton"
22
25
  class="icon hamburger-icon mr-16"
23
26
  data-testid="sidebar-menu-button"
24
27
  @click="$emit('toggleSidebar')"
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabs.vue CHANGED
@@ -8,7 +8,7 @@
8
8
  <style lang="scss">
9
9
  .sidebar-tabs {
10
10
  width: 220px;
11
- border-right: 1px solid $primary-90;
11
+ border-right: 1px solid $primary-95;
12
12
  padding: 8px;
13
13
  height: calc(100vh - 50px);
14
14
  ul {
package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue CHANGED
@@ -37,5 +37,8 @@ withDefaults(defineProps<Props>(), {
37
37
  .content-wrapper {
38
38
  padding-bottom: 40px;
39
39
  width: 100%;
40
+ &:has(.form-footer) {
41
+ padding-bottom: 0;
42
+ }
40
43
  }
41
44
  </style>
package/vue-components/v3/table/InfoTable.vue CHANGED
@@ -91,7 +91,7 @@ const isFullTableLoaderActive = computed(() => {
91
91
  // INFO TABLE START
92
92
  .table.ac-info-table {
93
93
  background-color: transparent;
94
- border-top: 1px solid $primary-93;
94
+ border-top: 1px solid $primary-95;
95
95
 
96
96
  &.is-fullwidth {
97
97
  tbody {
package/vue-components/v3/table/Table.vue CHANGED
@@ -488,9 +488,9 @@ onUpdated(() => {
488
488
  thead {
489
489
  tr {
490
490
  th {
491
- border-top: 1px solid $primary-93;
492
- border-bottom: 1px solid $primary-93;
493
- border-right: 1px solid $primary-93;
491
+ border-top: 1px solid $primary-95;
492
+ border-bottom: 1px solid $primary-95;
493
+ border-right: 1px solid $primary-95;
494
494
  background-color: $primary-97;
495
495
 
496
496
  &:first-child {
@@ -513,8 +513,8 @@ onUpdated(() => {
513
513
  font-size: 13px;
514
514
  color: $primary-20;
515
515
  background-color: transparent;
516
- border-bottom: 1px solid $primary-93;
517
- border-right: 1px solid $primary-93;
516
+ border-bottom: 1px solid $primary-95;
517
+ border-right: 1px solid $primary-95;
518
518
  &:last-child {
519
519
  border-right: 1px solid transparent;
520
520
  }