@magicgol/polyjuice 0.25.0 → 0.28.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/src/components/footballer/box/FootballerBox.stories.js +1 -0
- package/src/components/footballer/box/FootballerBox.vue +43 -1
- package/src/components/footballer/horizontal-footballer/HFootballer.vue +1 -1
- package/src/components/label/label/Label.stories.js +1 -1
- package/src/components/label/label/Label.vue +32 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<div
|
3
|
-
class="
|
3
|
+
class="px-2 py-1"
|
4
4
|
:class="classes"
|
5
5
|
>
|
6
6
|
<slot></slot>
|
@@ -19,6 +19,10 @@ export default {
|
|
19
19
|
return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
|
20
20
|
},
|
21
21
|
},
|
22
|
+
background: {
|
23
|
+
type: Boolean,
|
24
|
+
default: false
|
25
|
+
},
|
22
26
|
left: {
|
23
27
|
type: Boolean,
|
24
28
|
default: false,
|
@@ -35,12 +39,18 @@ export default {
|
|
35
39
|
type: Boolean,
|
36
40
|
default: false,
|
37
41
|
},
|
42
|
+
opacity: {
|
43
|
+
type: Boolean,
|
44
|
+
default: false,
|
45
|
+
},
|
38
46
|
},
|
39
47
|
|
40
48
|
computed: {
|
41
49
|
classes() {
|
42
50
|
return {
|
43
51
|
'mg-footballer-box': true,
|
52
|
+
'mg-footballer-box--background': this.background === true,
|
53
|
+
'mg-footballer-box--opacity': this.opacity === true,
|
44
54
|
'mg-footballer-box--goalkeeper': this.role === 'P',
|
45
55
|
'mg-footballer-box--defender': this.role === 'D',
|
46
56
|
'mg-footballer-box--midfielder': this.role === 'C',
|
@@ -64,18 +74,50 @@ export default {
|
|
64
74
|
|
65
75
|
&--goalkeeper {
|
66
76
|
border-color: map-get($palette, 'goalkeeper');
|
77
|
+
|
78
|
+
&.mg-footballer-box--background {
|
79
|
+
background-color: map-get($palette, 'goalkeeper');
|
80
|
+
|
81
|
+
&.mg-footballer-box--opacity {
|
82
|
+
background-color: rgba(map-get($palette, 'goalkeeper'), 0.1);
|
83
|
+
}
|
84
|
+
}
|
67
85
|
}
|
68
86
|
|
69
87
|
&--defender {
|
70
88
|
border-color: map-get($palette, 'defender');
|
89
|
+
|
90
|
+
&.mg-footballer-box--background {
|
91
|
+
background-color: map-get($palette, 'defender');
|
92
|
+
|
93
|
+
&.mg-footballer-box--opacity {
|
94
|
+
background-color: rgba(map-get($palette, 'defender'), 0.1);
|
95
|
+
}
|
96
|
+
}
|
71
97
|
}
|
72
98
|
|
73
99
|
&--midfielder {
|
74
100
|
border-color: map-get($palette, 'midfielder');
|
101
|
+
|
102
|
+
&.mg-footballer-box--background {
|
103
|
+
background-color: map-get($palette, 'midfielder');
|
104
|
+
|
105
|
+
&.mg-footballer-box--opacity {
|
106
|
+
background-color: rgba(map-get($palette, 'midfielder'), 0.1);
|
107
|
+
}
|
108
|
+
}
|
75
109
|
}
|
76
110
|
|
77
111
|
&--forward {
|
78
112
|
border-color: map-get($palette, 'forward');
|
113
|
+
|
114
|
+
&.mg-footballer-box--background {
|
115
|
+
background-color: map-get($palette, 'forward');
|
116
|
+
|
117
|
+
&.mg-footballer-box--opacity {
|
118
|
+
background-color: rgba(map-get($palette, 'forward'), 0.1);
|
119
|
+
}
|
120
|
+
}
|
79
121
|
}
|
80
122
|
|
81
123
|
&--left {
|
@@ -6,7 +6,7 @@
|
|
6
6
|
<!-- FOOTBALLER NAME -->
|
7
7
|
<div
|
8
8
|
class="d-flex flex-fill text-truncate"
|
9
|
-
:class="{'
|
9
|
+
:class="{'justify-content-end': inverted, 'order-1': !inverted, 'flex-row': !isLarge, 'flex-column': isLarge}"
|
10
10
|
>
|
11
11
|
<div class="text-truncate">
|
12
12
|
<!-- LAST NAME ONLY -->
|
@@ -25,7 +25,7 @@ export default {
|
|
25
25
|
type: String,
|
26
26
|
default: 'light',
|
27
27
|
validator: function (value) {
|
28
|
-
return ['light', 'dark'].indexOf(value) !== -1;
|
28
|
+
return ['light', 'dark', 'goalkeeper', 'defender', 'midfielder', 'forward'].indexOf(value) !== -1;
|
29
29
|
},
|
30
30
|
},
|
31
31
|
},
|
@@ -38,6 +38,10 @@ export default {
|
|
38
38
|
'mg-label--size-normal': this.size === 'normal',
|
39
39
|
'mg-label--theme-light': this.theme === 'light',
|
40
40
|
'mg-label--theme-dark': this.theme === 'dark',
|
41
|
+
'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
|
42
|
+
'mg-label--theme-defender': this.theme === 'defender',
|
43
|
+
'mg-label--theme-midfielder': this.theme === 'midfielder',
|
44
|
+
'mg-label--theme-forward': this.theme === 'forward',
|
41
45
|
};
|
42
46
|
}
|
43
47
|
},
|
@@ -48,6 +52,7 @@ export default {
|
|
48
52
|
@import '../../../assets/palette';
|
49
53
|
|
50
54
|
.mg-label {
|
55
|
+
border: 2px solid;
|
51
56
|
border-radius: 32px;
|
52
57
|
padding-top: 0.0625rem;
|
53
58
|
padding-bottom: 0.0625rem;
|
@@ -70,13 +75,39 @@ export default {
|
|
70
75
|
&--theme {
|
71
76
|
&-light {
|
72
77
|
background: #f7f7f7;
|
78
|
+
border-color: #f7f7f7;
|
73
79
|
color: map-get($palette, 'text');
|
74
80
|
}
|
75
81
|
|
76
82
|
&-dark {
|
77
83
|
background: #5b5b5b;
|
84
|
+
border-color: #5b5b5b;
|
78
85
|
color: #fff;
|
79
86
|
}
|
87
|
+
|
88
|
+
&-goalkeeper {
|
89
|
+
background: map-get($palette, 'goalkeeper');
|
90
|
+
border-color: #f7f7f7;
|
91
|
+
color: map-get($palette, 'text');
|
92
|
+
}
|
93
|
+
|
94
|
+
&-defender {
|
95
|
+
background: map-get($palette, 'defender');
|
96
|
+
border-color: #f7f7f7;
|
97
|
+
color: map-get($palette, 'text');
|
98
|
+
}
|
99
|
+
|
100
|
+
&-midfielder {
|
101
|
+
background: map-get($palette, 'midfielder');
|
102
|
+
border-color: #f7f7f7;
|
103
|
+
color: map-get($palette, 'text');
|
104
|
+
}
|
105
|
+
|
106
|
+
&-forward {
|
107
|
+
background: map-get($palette, 'forward');
|
108
|
+
border-color: #f7f7f7;
|
109
|
+
color: map-get($palette, 'text');
|
110
|
+
}
|
80
111
|
}
|
81
112
|
}
|
82
113
|
</style>
|