@eturnity/eturnity_reusable_components 7.20.0-EPDM-10613.0 → 7.20.0-EPDM-10842.0
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,12 +1,94 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
|
2
|
+
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
|
3
|
+
|
|
1
4
|
<svg
|
|
5
|
+
version="1.1"
|
|
6
|
+
id="svg438"
|
|
2
7
|
width="838"
|
|
3
8
|
height="833"
|
|
4
9
|
viewBox="0 0 838 833"
|
|
10
|
+
sodipodi:docname="split.svg"
|
|
11
|
+
inkscape:version="1.1.2 (0a00cf5339, 2022-02-04)"
|
|
12
|
+
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
|
13
|
+
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
|
5
14
|
xmlns="http://www.w3.org/2000/svg"
|
|
6
|
-
>
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
15
|
+
xmlns:svg="http://www.w3.org/2000/svg">
|
|
16
|
+
<defs
|
|
17
|
+
id="defs442">
|
|
18
|
+
<linearGradient
|
|
19
|
+
id="linearGradient7383"
|
|
20
|
+
inkscape:swatch="solid">
|
|
21
|
+
<stop
|
|
22
|
+
style="stop-color:#ffffff;stop-opacity:1;"
|
|
23
|
+
offset="0"
|
|
24
|
+
id="stop7381" />
|
|
25
|
+
</linearGradient>
|
|
26
|
+
<linearGradient
|
|
27
|
+
id="linearGradient6933"
|
|
28
|
+
inkscape:swatch="solid">
|
|
29
|
+
<stop
|
|
30
|
+
style="stop-color:#000000;stop-opacity:1;"
|
|
31
|
+
offset="0"
|
|
32
|
+
id="stop6931" />
|
|
33
|
+
</linearGradient>
|
|
34
|
+
</defs>
|
|
35
|
+
<sodipodi:namedview
|
|
36
|
+
id="namedview440"
|
|
37
|
+
pagecolor="#ffffff"
|
|
38
|
+
bordercolor="#666666"
|
|
39
|
+
borderopacity="1.0"
|
|
40
|
+
inkscape:pageshadow="2"
|
|
41
|
+
inkscape:pageopacity="0.0"
|
|
42
|
+
inkscape:pagecheckerboard="0"
|
|
43
|
+
showgrid="false"
|
|
44
|
+
inkscape:zoom="0.95078031"
|
|
45
|
+
inkscape:cx="466.45896"
|
|
46
|
+
inkscape:cy="549.02273"
|
|
47
|
+
inkscape:window-width="1920"
|
|
48
|
+
inkscape:window-height="1007"
|
|
49
|
+
inkscape:window-x="0"
|
|
50
|
+
inkscape:window-y="0"
|
|
51
|
+
inkscape:window-maximized="1"
|
|
52
|
+
inkscape:current-layer="g444" />
|
|
53
|
+
<g
|
|
54
|
+
inkscape:groupmode="layer"
|
|
55
|
+
inkscape:label="Image"
|
|
56
|
+
id="g444">
|
|
57
|
+
<circle
|
|
58
|
+
id="path5141"
|
|
59
|
+
style="fill:none;stroke:#fffeff;stroke-opacity:1"
|
|
60
|
+
cx="0.66903824"
|
|
61
|
+
cy="263.65976"
|
|
62
|
+
r="0.52949077" />
|
|
63
|
+
<circle
|
|
64
|
+
id="path5143"
|
|
65
|
+
style="fill:none;stroke:#fffeff;stroke-opacity:1"
|
|
66
|
+
cx="0.66903824"
|
|
67
|
+
cy="263.65976"
|
|
68
|
+
r="0.52949077" />
|
|
69
|
+
<g
|
|
70
|
+
id="path5184"
|
|
71
|
+
style="stroke:#fffeff;stroke-opacity:1;fill:none">
|
|
72
|
+
<path
|
|
73
|
+
style="color:#000000;fill:none;stroke-width:154.42;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
74
|
+
d="m -156.35359,113.32885 348.76355,221.92361 744.6236,-498.85799"
|
|
75
|
+
id="path6861" />
|
|
76
|
+
<path
|
|
77
|
+
style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
78
|
+
d="M 894.06055,-227.75 191.32227,243.04492 -114.9043,48.1875 -197.80273,178.46875 193.49609,427.45898 980.00781,-99.460937 Z"
|
|
79
|
+
id="path6863" />
|
|
80
|
+
</g>
|
|
81
|
+
<g
|
|
82
|
+
id="path5186"
|
|
83
|
+
style="stroke:#fffeff;stroke-opacity:1;fill:none">
|
|
84
|
+
<path
|
|
85
|
+
style="color:#000000;fill:none;stroke-width:166.34;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
86
|
+
d="M 816.06617,905.68984 357.97591,628.01443 1035.7943,176.14788"
|
|
87
|
+
id="path6855" />
|
|
88
|
+
<path
|
|
89
|
+
style="color:#000000;fill:none;-inkscape-stroke:none;stroke:#fffeff;stroke-opacity:1"
|
|
90
|
+
d="M 989.66016,106.94531 203.03125,631.34961 772.95312,976.81445 859.17773,834.56641 512.91992,624.67773 1081.9277,245.34961 Z"
|
|
91
|
+
id="path6857" />
|
|
92
|
+
</g>
|
|
93
|
+
</g>
|
|
12
94
|
</svg>
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<wrapper>
|
|
3
|
-
<icon-image
|
|
2
|
+
<wrapper :disabled="disabled" :size="size" :cursor="cursor">
|
|
3
|
+
<icon-image
|
|
4
|
+
:color="color"
|
|
5
|
+
:background-color="backgroundColor"
|
|
6
|
+
:hovered-color="hoveredColor"
|
|
7
|
+
>
|
|
4
8
|
<i v-html="icon.html" />
|
|
5
9
|
</icon-image>
|
|
6
|
-
<striked-line v-if="isStriked"></striked-line>
|
|
10
|
+
<striked-line v-if="isStriked" :color="color"></striked-line>
|
|
7
11
|
</wrapper>
|
|
8
12
|
</template>
|
|
9
13
|
|
|
@@ -48,27 +52,31 @@ const props = defineProps({
|
|
|
48
52
|
isStriked: {
|
|
49
53
|
required: false,
|
|
50
54
|
default: false
|
|
55
|
+
},
|
|
56
|
+
backgroundColor: {
|
|
57
|
+
required: false,
|
|
58
|
+
default: null
|
|
51
59
|
}
|
|
52
60
|
})
|
|
53
61
|
|
|
54
|
-
const Wrapper = styled('div'
|
|
62
|
+
const Wrapper = styled('div', {
|
|
63
|
+
size: String,
|
|
64
|
+
disabled: Boolean,
|
|
65
|
+
cursor: String
|
|
66
|
+
})`
|
|
55
67
|
display: flex;
|
|
56
68
|
position: relative;
|
|
57
69
|
align-content: center;
|
|
58
70
|
justify-content: center;
|
|
59
|
-
width: ${props.size};
|
|
60
|
-
height: ${props.size};
|
|
61
|
-
min-width: ${props.size};
|
|
62
|
-
min-height: ${props.size};
|
|
63
|
-
cursor: ${props.disabled ? 'not-allowed' : props.cursor};
|
|
71
|
+
width: ${(props) => props.size};
|
|
72
|
+
height: ${(props) => props.size};
|
|
73
|
+
min-width: ${(props) => props.size};
|
|
74
|
+
min-height: ${(props) => props.size};
|
|
75
|
+
cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
|
|
64
76
|
line-height: 0;
|
|
65
77
|
`
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
color: String,
|
|
69
|
-
hoveredColor: String
|
|
70
|
-
}
|
|
71
|
-
const StrikedLine = styled.div`
|
|
78
|
+
|
|
79
|
+
const StrikedLine = styled('div', { color: String })`
|
|
72
80
|
display: flex;
|
|
73
81
|
position: absolute;
|
|
74
82
|
bottom: 0;
|
|
@@ -77,29 +85,33 @@ const StrikedLine = styled.div`
|
|
|
77
85
|
justify-content: center;
|
|
78
86
|
width: 143%;
|
|
79
87
|
height: 8%;
|
|
80
|
-
background-color: ${({ theme }) => theme.colors[
|
|
88
|
+
background-color: ${({ theme, color }) => theme.colors[color] || color};
|
|
81
89
|
min-height: 0;
|
|
82
90
|
line-height: 0;
|
|
83
91
|
transform-origin: 0% 100%;
|
|
84
92
|
transform: rotate(-45deg);
|
|
85
93
|
`
|
|
86
|
-
const IconImage = styled
|
|
94
|
+
const IconImage = styled('div', {
|
|
95
|
+
color: String,
|
|
96
|
+
backgroundColor: String,
|
|
97
|
+
hoveredColor: String
|
|
98
|
+
})`
|
|
87
99
|
width: 100%;
|
|
88
100
|
svg {
|
|
89
101
|
width: 100%;
|
|
90
102
|
height: 100%;
|
|
91
|
-
background-color: ${(props) =>
|
|
92
|
-
|
|
103
|
+
background-color: ${(props) =>
|
|
104
|
+
props.backgroundColor ? props.backgroundColor : 'transparent'};
|
|
105
|
+
padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
|
|
93
106
|
}
|
|
94
107
|
svg path {
|
|
95
|
-
${({ theme }) =>
|
|
96
|
-
props.color && `fill: ${theme.colors[props.color] || props.color};`}
|
|
108
|
+
${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
|
|
97
109
|
}
|
|
98
110
|
&:hover > svg path {
|
|
99
|
-
${props.hoveredColor && `fill: ${props.hoveredColor};`}
|
|
111
|
+
${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
|
|
100
112
|
}
|
|
101
113
|
&:hover + div {
|
|
102
|
-
background-color: ${props.hoveredColor};
|
|
114
|
+
background-color: ${(props) => props.hoveredColor};
|
|
103
115
|
}
|
|
104
116
|
`
|
|
105
117
|
|