@magicgol/polyjuice 0.33.1 → 0.33.4
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/context/footballer/horizontal-footballer/HFootballer.stories.js +10 -0
- package/src/components/context/footballer/horizontal-footballer/HFootballer.vue +15 -2
- package/src/components/context/footballer/list/footballer-list-body/FootballerListBody.vue +15 -0
- package/src/components/context/footballer/list/footballer-list-head/FootballerListHead.vue +1 -0
- package/src/components/context/footballer/role/role-badge/RoleBadge.stories.js +7 -0
- package/src/components/context/footballer/role/role-badge/RoleBadge.vue +9 -0
- package/src/components/modal/selection-box/SelectionBox.vue +10 -1
package/package.json
CHANGED
@@ -79,3 +79,13 @@ Large.args = {
|
|
79
79
|
lastname: 'Dybala',
|
80
80
|
};
|
81
81
|
|
82
|
+
export const ThemeInverted = Template.bind({});
|
83
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
84
|
+
ThemeInverted.args = {
|
85
|
+
size: 'large',
|
86
|
+
role: 'A',
|
87
|
+
firstname: 'Paulo',
|
88
|
+
lastname: 'Dybala',
|
89
|
+
themeInverted: true
|
90
|
+
};
|
91
|
+
|
@@ -33,6 +33,7 @@
|
|
33
33
|
<mg-role-badge
|
34
34
|
:role="role"
|
35
35
|
:size="size"
|
36
|
+
:theme-inverted="themeInverted"
|
36
37
|
></mg-role-badge>
|
37
38
|
</div>
|
38
39
|
<!-- end of ROLE BADGE -->
|
@@ -58,6 +59,10 @@ export default {
|
|
58
59
|
type: Boolean,
|
59
60
|
default: false,
|
60
61
|
},
|
62
|
+
themeInverted: {
|
63
|
+
type: Boolean,
|
64
|
+
default: false,
|
65
|
+
},
|
61
66
|
role: {
|
62
67
|
type: String,
|
63
68
|
default: null,
|
@@ -86,8 +91,10 @@ export default {
|
|
86
91
|
classes() {
|
87
92
|
return {
|
88
93
|
'mg-h-footballer': true,
|
89
|
-
'mg-h-footballer--disabled': this.disabled,
|
90
|
-
'mg-h-footballer--deactivated': this.deactivated,
|
94
|
+
'mg-h-footballer--disabled': this.disabled === true,
|
95
|
+
'mg-h-footballer--deactivated': this.deactivated === true,
|
96
|
+
'mg-h-footballer--inverted': this.inverted === true,
|
97
|
+
'mg-h-footballer--theme-inverted': this.themeInverted === true,
|
91
98
|
'mg-h-footballer--size-normal': this.size === 'normal',
|
92
99
|
'mg-h-footballer--size-large': this.size === 'large',
|
93
100
|
};
|
@@ -150,6 +157,12 @@ export default {
|
|
150
157
|
}
|
151
158
|
}
|
152
159
|
|
160
|
+
&--theme-inverted {
|
161
|
+
.mg-h-footballer-subtext {
|
162
|
+
color: map-get($palette, 'text') !important;
|
163
|
+
}
|
164
|
+
}
|
165
|
+
|
153
166
|
&--size {
|
154
167
|
&-normal {
|
155
168
|
font-size: 0.875rem;
|
@@ -52,6 +52,10 @@ export default {
|
|
52
52
|
type: Boolean,
|
53
53
|
default: false
|
54
54
|
},
|
55
|
+
unselectable: {
|
56
|
+
type: Boolean,
|
57
|
+
default: false
|
58
|
+
},
|
55
59
|
role: {
|
56
60
|
type: String,
|
57
61
|
default: null,
|
@@ -67,6 +71,7 @@ export default {
|
|
67
71
|
'mg-footballer-list-body': true,
|
68
72
|
'mg-footballer-list-body--disabled': this.disabled === true,
|
69
73
|
'mg-footballer-list-body--selected': this.selected === true,
|
74
|
+
'mg-footballer-list-body--unselectable': this.unselectable === true,
|
70
75
|
'mg-footballer-list-body--goalkeeper': this.role === 'P',
|
71
76
|
'mg-footballer-list-body--defender': this.role === 'D',
|
72
77
|
'mg-footballer-list-body--midfielder': this.role === 'C',
|
@@ -112,6 +117,7 @@ export default {
|
|
112
117
|
> div {
|
113
118
|
border: 1px solid #f6f6f6;
|
114
119
|
background: #f6f6f6;
|
120
|
+
cursor: pointer;
|
115
121
|
}
|
116
122
|
|
117
123
|
&--disabled {
|
@@ -152,5 +158,14 @@ export default {
|
|
152
158
|
}
|
153
159
|
}
|
154
160
|
}
|
161
|
+
|
162
|
+
&--unselectable {
|
163
|
+
> div {
|
164
|
+
border: 0 !important;
|
165
|
+
box-shadow: none !important;
|
166
|
+
background: none !important;
|
167
|
+
cursor: default !important;
|
168
|
+
}
|
169
|
+
}
|
155
170
|
}
|
156
171
|
</style>
|
@@ -66,3 +66,10 @@ export const Forward = Template.bind({});
|
|
66
66
|
Forward.args = {
|
67
67
|
role: 'A',
|
68
68
|
};
|
69
|
+
|
70
|
+
export const ThemeInverted = Template.bind({});
|
71
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
72
|
+
ThemeInverted.args = {
|
73
|
+
role: 'A',
|
74
|
+
themeInverted: true
|
75
|
+
};
|
@@ -29,6 +29,10 @@ export default {
|
|
29
29
|
validator: function (value) {
|
30
30
|
return ['normal', 'large', 'huge'].indexOf(value) !== -1;
|
31
31
|
},
|
32
|
+
},
|
33
|
+
themeInverted: {
|
34
|
+
type: Boolean,
|
35
|
+
default: false
|
32
36
|
}
|
33
37
|
},
|
34
38
|
|
@@ -36,6 +40,7 @@ export default {
|
|
36
40
|
classes() {
|
37
41
|
return {
|
38
42
|
'mg-role-badge': true,
|
43
|
+
'mg-role-badge--theme-inverted': this.themeInverted === true,
|
39
44
|
'mg-role-badge--goalkeeper': this.role === 'P',
|
40
45
|
'mg-role-badge--defender': this.role === 'D',
|
41
46
|
'mg-role-badge--midfielder': this.role === 'C',
|
@@ -98,5 +103,9 @@ export default {
|
|
98
103
|
&--forward {
|
99
104
|
background-color: map-get($palette, 'forward');
|
100
105
|
}
|
106
|
+
|
107
|
+
&--theme-inverted {
|
108
|
+
background-color: #fff !important;
|
109
|
+
}
|
101
110
|
}
|
102
111
|
</style>
|
@@ -23,6 +23,13 @@
|
|
23
23
|
export default {
|
24
24
|
name: 'mg-selection-box',
|
25
25
|
|
26
|
+
props: {
|
27
|
+
stretched: {
|
28
|
+
type: Boolean,
|
29
|
+
default: false
|
30
|
+
}
|
31
|
+
},
|
32
|
+
|
26
33
|
computed: {
|
27
34
|
classes() {
|
28
35
|
return {
|
@@ -35,8 +42,10 @@ export default {
|
|
35
42
|
|
36
43
|
<style lang="scss">
|
37
44
|
.mg-selection-box {
|
45
|
+
height: 7.5rem;
|
46
|
+
|
38
47
|
&-shadow {
|
39
|
-
height:
|
48
|
+
height: 7.5rem;
|
40
49
|
}
|
41
50
|
|
42
51
|
&-content {
|