@appscode/design-system 1.1.0-alpha.10 → 1.1.0-alpha.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.
@@ -1,4 +1,4 @@
1
- %card-hover {
1
+ .has-hover-style{
2
2
  cursor: pointer;
3
3
 
4
4
  &::before {
@@ -8,13 +8,6 @@
8
8
  transition: 0.3s ease-in-out;
9
9
  position: relative;
10
10
  z-index: 1;
11
- &.has-hover-style {
12
- @extend %card-hover;
13
- }
14
-
15
- // &:hover {
16
- // border: 1px solid #1971bd;
17
- // }
18
11
 
19
12
  .c-header {
20
13
  display: flex;
@@ -101,9 +94,6 @@
101
94
  max-width: 390px;
102
95
  min-width: 290px;
103
96
  position: relative;
104
- &.has-hover-style {
105
- @extend %card-hover;
106
- }
107
97
 
108
98
  .required {
109
99
  position: absolute;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.1.0-alpha.10",
3
+ "version": "1.1.0-alpha.12",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
@@ -0,0 +1,40 @@
1
+ <template>
2
+ <!-- single card wrapper start -->
3
+ <div class="card-basic b-1">
4
+ <div class="c-header is-flex is-justify-content-space-between">
5
+ <div
6
+ v-if="isRequired"
7
+ class="tag has-background-warning has-text-secondary is-rounded required"
8
+ >
9
+ Required
10
+ </div>
11
+
12
+ <div class="c-title is-flex is-align-items-center">
13
+ <div class="icon mr-8">
14
+ <slot name="card-logo" />
15
+ </div>
16
+ <h4><slot name="card-title" /></h4>
17
+ </div>
18
+ <!-- <span class="tag has-background-dark-light has-text-dark is-rounded"
19
+ >Dark</span
20
+ > -->
21
+ <slot name="card-status" />
22
+ </div>
23
+ <div class="c-body">
24
+ <p><slot name="card-sub-title" /></p>
25
+ </div>
26
+ </div>
27
+ <!-- single card wrapper end -->
28
+ </template>
29
+ <script setup lang="ts">
30
+ withDefaults(
31
+ defineProps<{
32
+ isRequired: boolean
33
+ statusClass: string
34
+ }>(),
35
+ {
36
+ isRequired: false,
37
+ statusClass: 'has-background-primary-light has-text-primary',
38
+ }
39
+ )
40
+ </script>
@@ -0,0 +1,5 @@
1
+ <template>
2
+ <div class="is-flex is-flex-wrap-wrap" style="gap: 16px">
3
+ <slot />
4
+ </div>
5
+ </template>