@appscode/design-system 1.1.0-beta.38 → 1.1.0-beta.40

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 (7) hide show
  1. package/base/utilities/_global.scss +1 -1
  2. package/components/_graph.scss +10 -10
  3. package/package.json +1 -1
  4. package/vue-components/v3/long-running-tasks/LongRunningTaskItem.vue +7 -7
  5. package/vue-components/v3/modals/LongRunningTasksModal.vue +4 -4
  6. package/vue-components/v3/option-dots/Options.vue +1 -1
  7. package/vue-components/v3/table/Table.vue +3 -3
package/base/utilities/_global.scss CHANGED
@@ -38,7 +38,7 @@ $positions: (
38
38
  }
39
39
 
40
40
  .form-content {
41
- width: 720px;
41
+ width: 800px;
42
42
  }
43
43
 
44
44
  // .dropdown-content {
package/components/_graph.scss CHANGED
@@ -1,13 +1,13 @@
1
1
  .graph-tooltip-wrapper {
2
- background-color: var(--ac-white);
3
- border: 1px solid var(--ac-white-light);
2
+ background-color: $white-100;
3
+ border: 1px solid $primary-90;
4
4
 
5
5
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
6
6
  border-radius: 4px;
7
7
  overflow: hidden;
8
8
  h6 {
9
9
  padding: 10px 20px;
10
- border-bottom: 1px solid var(--ac-white-light);
10
+ border-bottom: 1px solid $primary-90;
11
11
  }
12
12
  .table-wrapper {
13
13
  padding: 10px 20px;
@@ -16,7 +16,7 @@
16
16
  &:first-child {
17
17
  font-weight: 450;
18
18
  padding-right: 10px;
19
- color: var(--ac-text-heading);
19
+ color: $primary-10;
20
20
  }
21
21
  padding: 4px 0;
22
22
  font-size: 13px;
@@ -26,18 +26,18 @@
26
26
  }
27
27
 
28
28
  .is-hovering .label text tspan {
29
- stroke: var(--ac-white);
30
- fill: var(--ac-white);
29
+ stroke: $white-100;
30
+ fill: $white-100;
31
31
  stroke-width: 0.3px;
32
32
  }
33
33
  .is-selected .label text tspan {
34
- stroke: var(--ac-white);
35
- fill: var(--ac-white);
34
+ stroke: $white-100;
35
+ fill: $white-100;
36
36
  stroke-width: 0.3px;
37
37
  }
38
38
  .label text tspan {
39
- stroke: var(--ac-black);
40
- fill: var(--ac-black);
39
+ stroke: $primary-5;
40
+ fill: $primary-5;
41
41
  stroke-width: 0.3px;
42
42
  }
43
43
  .edgeLabel .label text tspan {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-beta.38",
3
+ "version": "1.1.0-beta.40",
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/long-running-tasks/LongRunningTaskItem.vue CHANGED
@@ -38,14 +38,14 @@ const statusIcon = computed(() => {
38
38
  border-radius: 5px;
39
39
  transition: all 0.3s ease-in-out;
40
40
  &:hover {
41
- background-color: var(--ac-white-light);
41
+ background-color: $primary-97;
42
42
  cursor: pointer;
43
43
  }
44
44
  &.is-active {
45
- background-color: var(--ac-white-light);
45
+ background-color: $primary-97;
46
46
  }
47
47
  &.is-pending {
48
- color: var(--ac-gray-light);
48
+ color: $black-50;
49
49
  i {
50
50
  visibility: hidden;
51
51
  }
@@ -55,7 +55,7 @@ const statusIcon = computed(() => {
55
55
  }
56
56
  }
57
57
  &.is-aborted {
58
- color: var(--ac-gray-light);
58
+ color: $black-50;
59
59
  &:hover {
60
60
  background-color: transparent;
61
61
  cursor: not-allowed;
@@ -64,7 +64,7 @@ const statusIcon = computed(() => {
64
64
  &.is-running,
65
65
  &.is-started {
66
66
  i {
67
- color: var(--ac-primary);
67
+ color: $primary;
68
68
  animation-name: spin;
69
69
  animation-duration: 1000ms;
70
70
  animation-iteration-count: infinite;
@@ -82,12 +82,12 @@ const statusIcon = computed(() => {
82
82
  }
83
83
  &.is-success {
84
84
  i {
85
- color: #158748;
85
+ color: $success;
86
86
  }
87
87
  }
88
88
  &.is-failed {
89
89
  i {
90
- color: #ff3729;
90
+ color: $danger;
91
91
  }
92
92
  }
93
93
  }
package/vue-components/v3/modals/LongRunningTasksModal.vue CHANGED
@@ -351,7 +351,7 @@ watch(longRunningTaskStatus, (n) => {
351
351
  align-items: center;
352
352
  justify-content: center;
353
353
  font-size: 20px;
354
- color: var(--ac-primary);
354
+ color: $primary;
355
355
  }
356
356
  .task-log {
357
357
  width: 100%;
@@ -366,12 +366,12 @@ watch(longRunningTaskStatus, (n) => {
366
366
  font-size: 16px;
367
367
  }
368
368
  i {
369
- color: var(--ac-primary);
369
+ color: $primary;
370
370
  &.is-success {
371
- color: #158748;
371
+ color: $success;
372
372
  }
373
373
  &.is-failed {
374
- color: #ff3729;
374
+ color: $danger;
375
375
  }
376
376
  }
377
377
  font-weight: 500;
package/vue-components/v3/option-dots/Options.vue CHANGED
@@ -44,7 +44,7 @@ const documentClick = (e: Event) => {
44
44
  </div>
45
45
  <!-- dropdown Item start -->
46
46
  <!-- use "is-hidden" class in the line below for hide dropdown element -->
47
- <slot v-if="showOptions" />
47
+ <slot :class="{ 'is-hidden': !showOptions }" />
48
48
  <!-- dropdown Item end -->
49
49
  </button>
50
50
  </template>
package/vue-components/v3/table/Table.vue CHANGED
@@ -338,7 +338,7 @@ onUpdated(() => {
338
338
  }
339
339
 
340
340
  tr {
341
- border-bottom: 1px solid var(--ac-white-light);
341
+ border-bottom: 1px solid $primary-90;
342
342
  &.is-link {
343
343
  cursor: pointer;
344
344
  }
@@ -466,8 +466,8 @@ onUpdated(() => {
466
466
  width: 36px;
467
467
 
468
468
  .increase-innner {
469
- border-bottom: 1px solid var(--ac-white-light);
470
- border-top: 1px solid var(--ac-white-light);
469
+ border-bottom: 1px solid $primary-90;
470
+ border-top: 1px solid $primary-90;
471
471
  bottom: -1px;
472
472
  left: 0;
473
473
  position: absolute;