@appscode/design-system 2.6.4 → 2.6.5-alpha-1
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/package.json +1 -1
- package/vue-components/styles/base/utilities/_spacing.scss +46 -0
- package/vue-components/styles/components/_dropdown.scss +0 -2
- package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss +1 -0
- package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +2 -1
- package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue +0 -81
package/package.json
CHANGED
|
@@ -53,6 +53,52 @@
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
$spacing-values: (
|
|
57
|
+
112: 112px,
|
|
58
|
+
128: 128px,
|
|
59
|
+
144: 144px,
|
|
60
|
+
160: 160px,
|
|
61
|
+
176: 176px,
|
|
62
|
+
192: 192px,
|
|
63
|
+
208: 208px,
|
|
64
|
+
220: 220px,
|
|
65
|
+
224: 224px,
|
|
66
|
+
240: 240px,
|
|
67
|
+
256: 256px,
|
|
68
|
+
288: 288px,
|
|
69
|
+
320: 320px,
|
|
70
|
+
384: 384px,
|
|
71
|
+
440: 440px,
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
@each $key, $value in $spacing-values {
|
|
75
|
+
.pl-#{$key} {
|
|
76
|
+
padding-left: #{$value} !important;
|
|
77
|
+
}
|
|
78
|
+
.pr-#{$key} {
|
|
79
|
+
padding-right: #{$value} !important;
|
|
80
|
+
}
|
|
81
|
+
.pt-#{$key} {
|
|
82
|
+
padding-top: #{$value} !important;
|
|
83
|
+
}
|
|
84
|
+
.pb-#{$key} {
|
|
85
|
+
padding-bottom: #{$value} !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ml-#{$key} {
|
|
89
|
+
margin-left: #{$value} !important;
|
|
90
|
+
}
|
|
91
|
+
.mr-#{$key} {
|
|
92
|
+
margin-right: #{$value} !important;
|
|
93
|
+
}
|
|
94
|
+
.mt-#{$key} {
|
|
95
|
+
margin-top: #{$value} !important;
|
|
96
|
+
}
|
|
97
|
+
.mb-#{$key} {
|
|
98
|
+
margin-bottom: #{$value} !important;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
56
102
|
/* Deafult height & widht */
|
|
57
103
|
@for $i from 0 through 300 {
|
|
58
104
|
.height-#{$i} {
|
|
@@ -10,8 +10,9 @@ withDefaults(defineProps<Props>(), {
|
|
|
10
10
|
<template>
|
|
11
11
|
<div class="sidebar-tabs-layout is-flex">
|
|
12
12
|
<!-- sidebar tabs -->
|
|
13
|
-
<div class="sidebar-tabs-wrapper">
|
|
13
|
+
<div class="sidebar-tabs-wrapper is-flex">
|
|
14
14
|
<slot name="sidebar-tabs" />
|
|
15
|
+
<slot name="sidebar-tabs2" />
|
|
15
16
|
</div>
|
|
16
17
|
<!-- sidebar tabs -->
|
|
17
18
|
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts"></script>
|
|
2
|
-
<template>
|
|
3
|
-
<div class="content pt-10 pl-20 pb-20">
|
|
4
|
-
<h1>Heading One</h1>
|
|
5
|
-
<p>
|
|
6
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
7
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
8
|
-
magnam animi numquam?
|
|
9
|
-
</p>
|
|
10
|
-
<h2>Heading Two</h2>
|
|
11
|
-
<p>
|
|
12
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
13
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
14
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
15
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
16
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
17
|
-
</p>
|
|
18
|
-
<h3>Heading three</h3>
|
|
19
|
-
<p>
|
|
20
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
21
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
22
|
-
magnam animi numquam?
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
<h4>Heading Four</h4>
|
|
26
|
-
<p>
|
|
27
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
28
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
29
|
-
magnam animi numquam?
|
|
30
|
-
</p>
|
|
31
|
-
<h5>Heading Five</h5>
|
|
32
|
-
<p>
|
|
33
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
34
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
35
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
36
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
37
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
38
|
-
</p>
|
|
39
|
-
<h6>Heading Six</h6>
|
|
40
|
-
<p>
|
|
41
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
42
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
43
|
-
magnam animi numquam?
|
|
44
|
-
</p>
|
|
45
|
-
|
|
46
|
-
<h4>Block Quote</h4>
|
|
47
|
-
|
|
48
|
-
<blockquote>
|
|
49
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
|
|
50
|
-
dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
|
|
51
|
-
</blockquote>
|
|
52
|
-
|
|
53
|
-
<h5>Heading Five</h5>
|
|
54
|
-
<p>
|
|
55
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
56
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
57
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
58
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
59
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
60
|
-
</p>
|
|
61
|
-
<h6>Heading Six</h6>
|
|
62
|
-
<p>
|
|
63
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
64
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
65
|
-
magnam animi numquam?
|
|
66
|
-
</p>
|
|
67
|
-
|
|
68
|
-
<h4>Block Quote</h4>
|
|
69
|
-
|
|
70
|
-
<blockquote>
|
|
71
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
|
|
72
|
-
dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
|
|
73
|
-
</blockquote>
|
|
74
|
-
</div>
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<style lang="scss">
|
|
78
|
-
.content {
|
|
79
|
-
width: 100%;
|
|
80
|
-
}
|
|
81
|
-
</style>
|