@appscode/design-system 2.0.11 → 2.0.12
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.
- package/base/utilities/_extended.scss +2 -3
- package/package.json +1 -1
- package/vue-components/v3/cards/Cluster.vue +4 -3
- package/vue-components/v3/cards/Counter.vue +1 -1
- package/vue-components/v3/cards/FeatureCard.vue +1 -0
- package/vue-components/v3/cards/Monitoring.vue +1 -0
- package/vue-components/v3/cards/{OrgClusterCard.vue → OrgCard.vue} +14 -7
- package/vue-components/v3/cards/Vendor.vue +1 -1
package/package.json
CHANGED
|
@@ -71,21 +71,22 @@ const OptionDots = defineAsyncComponent(
|
|
|
71
71
|
<style lang="scss" scoped>
|
|
72
72
|
.card-details {
|
|
73
73
|
border: 1px solid $primary-90;
|
|
74
|
-
padding:
|
|
74
|
+
padding: 24px 20px;
|
|
75
75
|
transition: 0.3s ease-in-out;
|
|
76
76
|
position: relative;
|
|
77
77
|
z-index: 1;
|
|
78
78
|
width: 100%;
|
|
79
|
+
border-radius: 2px;
|
|
79
80
|
|
|
80
81
|
.ac-options {
|
|
81
82
|
position: absolute;
|
|
82
83
|
right: 20px;
|
|
83
|
-
top:
|
|
84
|
+
top: 24px;
|
|
84
85
|
z-index: 999;
|
|
85
86
|
}
|
|
86
87
|
.c-header {
|
|
87
88
|
display: flex;
|
|
88
|
-
margin-bottom:
|
|
89
|
+
margin-bottom: 24px;
|
|
89
90
|
|
|
90
91
|
.c-logo {
|
|
91
92
|
width: 54px;
|
|
@@ -32,7 +32,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
32
32
|
</script>
|
|
33
33
|
<template>
|
|
34
34
|
<div
|
|
35
|
-
class="card-details"
|
|
35
|
+
class="card-details has-hover-style"
|
|
36
36
|
:class="[
|
|
37
37
|
modifierClasses,
|
|
38
38
|
{ 'no-data-available is-justify-content-center': noDataAvailable },
|
|
@@ -42,7 +42,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
42
42
|
class="left-content"
|
|
43
43
|
:class="{ 'is-align-items-center': noDataAvailable }"
|
|
44
44
|
>
|
|
45
|
-
<figure class="image" :class="{ 'is-
|
|
45
|
+
<figure class="image" :class="{ 'is-48x48': !noDataAvailable }">
|
|
46
46
|
<img :class="{ 'is-rounded': !noDataAvailable }" :src="thumbnail" />
|
|
47
47
|
</figure>
|
|
48
48
|
<h5>{{ title }}</h5>
|
|
@@ -61,7 +61,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
61
61
|
</AcButton>
|
|
62
62
|
</div>
|
|
63
63
|
<div class="right-content" v-if="!noDataAvailable">
|
|
64
|
-
<figure class="image is-
|
|
64
|
+
<figure class="image is-48x48">
|
|
65
65
|
<img
|
|
66
66
|
v-if="type === 'organization'"
|
|
67
67
|
src="../../images/icons/org-icon.svg"
|
|
@@ -77,20 +77,27 @@ withDefaults(defineProps<Props>(), {
|
|
|
77
77
|
align-items: flex-end;
|
|
78
78
|
justify-content: space-between;
|
|
79
79
|
border: 1px solid $primary-90;
|
|
80
|
-
padding:
|
|
81
|
-
border-radius:
|
|
80
|
+
padding: 24px 20px;
|
|
81
|
+
border-radius: 2px;
|
|
82
82
|
transition: 0.3s ease-in-out;
|
|
83
|
+
position: relative;
|
|
84
|
+
|
|
85
|
+
figure {
|
|
86
|
+
margin-bottom: 8px;
|
|
87
|
+
}
|
|
83
88
|
|
|
84
89
|
button.ac-button.is-text {
|
|
85
90
|
color: $primary;
|
|
86
91
|
transition: 0.3s ease-in-out;
|
|
92
|
+
padding: 2px 0;
|
|
93
|
+
height: auto;
|
|
87
94
|
&:hover {
|
|
88
95
|
background-color: transparent;
|
|
89
96
|
}
|
|
90
97
|
}
|
|
91
98
|
|
|
92
99
|
&:hover:not(.no-data-available) {
|
|
93
|
-
border: 1px solid $primary;
|
|
100
|
+
// border: 1px solid $primary;
|
|
94
101
|
button.ac-button.is-text {
|
|
95
102
|
gap: 16px;
|
|
96
103
|
}
|
|
@@ -106,7 +113,7 @@ withDefaults(defineProps<Props>(), {
|
|
|
106
113
|
display: flex;
|
|
107
114
|
flex-direction: column;
|
|
108
115
|
align-items: flex-start;
|
|
109
|
-
gap:
|
|
116
|
+
gap: 8px;
|
|
110
117
|
justify-content: space-between;
|
|
111
118
|
|
|
112
119
|
.image {
|