@exakt/ui 0.0.23 → 0.0.25
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/dist/module.json
CHANGED
|
@@ -35,7 +35,11 @@
|
|
|
35
35
|
>
|
|
36
36
|
<e-loading-spinner />
|
|
37
37
|
</div>
|
|
38
|
-
<span
|
|
38
|
+
<span
|
|
39
|
+
class="actual-content d-flex"
|
|
40
|
+
:style="{justifyContent:
|
|
41
|
+
justifyWrapper, alignContent: props.align, alignItems: props.align}"
|
|
42
|
+
>
|
|
39
43
|
<slot />
|
|
40
44
|
</span>
|
|
41
45
|
</div>
|
|
@@ -59,6 +63,7 @@ const props = withDefaults(
|
|
|
59
63
|
loadingGradient?: boolean;
|
|
60
64
|
fab?: boolean;
|
|
61
65
|
disabled?: boolean;
|
|
66
|
+
align?: string;
|
|
62
67
|
type?: "button" | "submit" | "reset";
|
|
63
68
|
}>(),
|
|
64
69
|
{
|
|
@@ -66,7 +71,8 @@ const props = withDefaults(
|
|
|
66
71
|
background: "primary",
|
|
67
72
|
solid: true,
|
|
68
73
|
width: undefined,
|
|
69
|
-
justify:
|
|
74
|
+
justify: "center",
|
|
75
|
+
align: "center",
|
|
70
76
|
color: undefined,
|
|
71
77
|
}
|
|
72
78
|
);
|
|
@@ -175,7 +181,6 @@ const hoverColor = computed(() => {
|
|
|
175
181
|
font-family: var(--e-font-family);
|
|
176
182
|
box-sizing: border-box;
|
|
177
183
|
|
|
178
|
-
|
|
179
184
|
border: transparent solid 0.1rem;
|
|
180
185
|
&:focus-visible {
|
|
181
186
|
transition: border-width 0.2s;
|
|
@@ -219,6 +224,7 @@ const hoverColor = computed(() => {
|
|
|
219
224
|
border-radius: 100%;
|
|
220
225
|
height: 4.2rem;
|
|
221
226
|
z-index: 3;
|
|
227
|
+
padding: 0 !important;
|
|
222
228
|
}
|
|
223
229
|
|
|
224
230
|
&.block {
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="rounded clickable-card py-4 my-2">
|
|
3
|
+
<div class=" px-6">
|
|
4
|
+
<slot />
|
|
5
|
+
</div>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
<script setup lang="ts"></script>
|
|
9
|
+
|
|
10
|
+
<style lang="scss" scoped>
|
|
11
|
+
.clickable-card {
|
|
12
|
+
background-color: var(--e-color-elev);
|
|
13
|
+
cursor: pointer;
|
|
14
|
+
transition: background 0.15s;
|
|
15
|
+
& > * {
|
|
16
|
+
transition: transform ease-in-out 0.15s;
|
|
17
|
+
}
|
|
18
|
+
&:hover {
|
|
19
|
+
background: rgba(var(--e-color-elev-rgb), 0.85);
|
|
20
|
+
}
|
|
21
|
+
&:active {
|
|
22
|
+
& > * {
|
|
23
|
+
transform: scale(0.98);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="sidebar"
|
|
3
|
+
class="sidebar d-flex flex-column justify-start"
|
|
4
4
|
@mouseenter="state.hover = true"
|
|
5
5
|
@mouseleave="state.hover = false"
|
|
6
6
|
>
|
|
@@ -56,6 +56,7 @@ const state = reactive({
|
|
|
56
56
|
);
|
|
57
57
|
}
|
|
58
58
|
.sidebar {
|
|
59
|
+
|
|
59
60
|
height: 100vh;
|
|
60
61
|
width: var(--collapsed-sidebar-width);
|
|
61
62
|
z-index: 5;
|
|
@@ -68,6 +69,7 @@ const state = reactive({
|
|
|
68
69
|
.btn-text {
|
|
69
70
|
text-align: left;
|
|
70
71
|
max-width: calc(var(--expansion-amount) - 0.1rem*2);
|
|
72
|
+
display: none;
|
|
71
73
|
}
|
|
72
74
|
|
|
73
75
|
&:hover ~ .app-content {
|
|
@@ -88,6 +90,7 @@ const state = reactive({
|
|
|
88
90
|
width: 100%;
|
|
89
91
|
flex-grow: 0;
|
|
90
92
|
flex-shrink: 0;
|
|
93
|
+
min-height: 5rem;
|
|
91
94
|
}
|
|
92
95
|
}
|
|
93
96
|
|