@avakhula/ui 0.0.68 → 0.0.69
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
CHANGED
|
@@ -1,15 +1,8 @@
|
|
|
1
1
|
import IbPanel from "./Panel.vue";
|
|
2
|
-
import { panelVariant } from "./constants";
|
|
3
2
|
|
|
4
3
|
export default {
|
|
5
4
|
title: "Panel",
|
|
6
5
|
component: IbPanel,
|
|
7
|
-
argTypes: {
|
|
8
|
-
variant: {
|
|
9
|
-
control: { type: "select" },
|
|
10
|
-
options: Object.values(panelVariant),
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
6
|
};
|
|
14
7
|
|
|
15
8
|
const Template = (args) => ({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div
|
|
2
|
+
<div class="panel">
|
|
3
3
|
<div class="panel-head">
|
|
4
4
|
<div class="head-title">
|
|
5
5
|
<slot name="title" />
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
|
|
25
25
|
<script>
|
|
26
26
|
import expandAnimation from "../../mixins/expandAnimation";
|
|
27
|
-
import { panelVariant } from "./constants";
|
|
28
27
|
|
|
29
28
|
export default {
|
|
30
29
|
name: "IbPanel",
|
|
@@ -34,22 +33,14 @@ export default {
|
|
|
34
33
|
type: Boolean,
|
|
35
34
|
default: true,
|
|
36
35
|
},
|
|
37
|
-
variant: {
|
|
38
|
-
type: String,
|
|
39
|
-
default: panelVariant.primary,
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
computed: {
|
|
43
|
-
classList() {
|
|
44
|
-
const classList = ["panel", `panel-${this.variant}`];
|
|
45
|
-
|
|
46
|
-
return classList;
|
|
47
|
-
},
|
|
48
36
|
},
|
|
49
37
|
};
|
|
50
38
|
</script>
|
|
51
39
|
|
|
52
40
|
<style lang="scss" scoped>
|
|
41
|
+
@import "../../assets/scss/variables/colors.scss";
|
|
42
|
+
@import "../../assets/scss/typography.scss";
|
|
43
|
+
|
|
53
44
|
.expand-enter-active,
|
|
54
45
|
.expand-leave-active {
|
|
55
46
|
transition: height 1s ease-in-out;
|
|
@@ -61,15 +52,10 @@ export default {
|
|
|
61
52
|
height: 0;
|
|
62
53
|
}
|
|
63
54
|
|
|
64
|
-
@import "../../assets/scss/variables/colors.scss";
|
|
65
|
-
@import "../../assets/scss/typography.scss";
|
|
66
|
-
|
|
67
55
|
$panel-border-color: $gray-200;
|
|
68
56
|
$panel-title-color: $neutral-900;
|
|
69
|
-
$panel-divider-color: $gray-
|
|
70
|
-
$description-color: $gray-
|
|
71
|
-
$panel-primary-body-bg: $gray-50;
|
|
72
|
-
$panel-secondary-body-bg: $white;
|
|
57
|
+
$panel-divider-color: $gray-300;
|
|
58
|
+
$description-color: $gray-700;
|
|
73
59
|
|
|
74
60
|
.panel {
|
|
75
61
|
border: 1px solid $panel-border-color;
|
|
@@ -80,6 +66,7 @@ $panel-secondary-body-bg: $white;
|
|
|
80
66
|
width: 100%;
|
|
81
67
|
align-items: center;
|
|
82
68
|
padding: 15px;
|
|
69
|
+
background-color: $gray-50;
|
|
83
70
|
|
|
84
71
|
.head-title {
|
|
85
72
|
@include Ib-H3-medium;
|
|
@@ -99,16 +86,5 @@ $panel-secondary-body-bg: $white;
|
|
|
99
86
|
color: $description-color;
|
|
100
87
|
}
|
|
101
88
|
}
|
|
102
|
-
&.panel-primary {
|
|
103
|
-
.panel-body {
|
|
104
|
-
background-color: $panel-primary-body-bg;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
&.panel-secondary {
|
|
109
|
-
.panel-body {
|
|
110
|
-
background-color: $panel-secondary-body-bg;
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
89
|
}
|
|
114
90
|
</style>
|