@eturnity/eturnity_reusable_components 1.2.19-EPDM-5310.6 → 1.2.19-EPDM-5310.8
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,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<component-wrapper :layout="layout">
|
|
3
3
|
<radio-wrapper v-for="(item, index) in options" :key="item.value">
|
|
4
|
-
<label-container :size="size" :isDisabled="item.disabled">
|
|
4
|
+
<label-container :size="size" :isDisabled="item.disabled" :isChecked="selectedOption === item.value">
|
|
5
5
|
<radio
|
|
6
6
|
type="radio"
|
|
7
7
|
:value="selectedOption"
|
|
@@ -76,14 +76,6 @@ const Radio = styled.input`
|
|
|
76
76
|
cursor: pointer;
|
|
77
77
|
height: 0;
|
|
78
78
|
width: 0;
|
|
79
|
-
|
|
80
|
-
&:checked ~ .checkmark {
|
|
81
|
-
background-color: white;
|
|
82
|
-
|
|
83
|
-
&:after {
|
|
84
|
-
display: block;
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
79
|
`
|
|
88
80
|
|
|
89
81
|
const RadioWrapper = styled.div`
|
|
@@ -91,14 +83,14 @@ const RadioWrapper = styled.div`
|
|
|
91
83
|
grid-gap: 10px;
|
|
92
84
|
`
|
|
93
85
|
|
|
94
|
-
const containerProps = { size: String, isDisabled: Boolean }
|
|
86
|
+
const containerProps = { size: String, isDisabled: Boolean, isChecked: Boolean }
|
|
95
87
|
const LabelContainer = styled("label", containerProps)`
|
|
96
88
|
display: grid;
|
|
97
89
|
grid-template-columns: auto 1fr auto;
|
|
98
90
|
grid-gap: 15px;
|
|
99
91
|
align-items: center;
|
|
100
92
|
color: ${(props) =>
|
|
101
|
-
props.isDisabled ? props.theme.colors.
|
|
93
|
+
props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
|
|
102
94
|
position: relative;
|
|
103
95
|
cursor: ${(props) => (props.isDisabled ? "not-allowed" : "pointer")};
|
|
104
96
|
font-size: ${(props) =>
|
|
@@ -133,32 +125,29 @@ const LabelContainer = styled("label", containerProps)`
|
|
|
133
125
|
|
|
134
126
|
&:after {
|
|
135
127
|
content: "";
|
|
136
|
-
display: none;
|
|
128
|
+
display: ${(props) => props.isChecked ? 'block' : 'none'};
|
|
129
|
+
width: ${(props) =>
|
|
130
|
+
props.size === "large"
|
|
131
|
+
? "10px"
|
|
132
|
+
: props.size === "medium"
|
|
133
|
+
? "8px"
|
|
134
|
+
: "6px"};
|
|
135
|
+
height: ${(props) =>
|
|
136
|
+
props.size === "large"
|
|
137
|
+
? "10px"
|
|
138
|
+
: props.size === "medium"
|
|
139
|
+
? "8px"
|
|
140
|
+
: "6px"};
|
|
141
|
+
border-radius: 100%;
|
|
142
|
+
background: ${(props) => props.theme.colors.primary};
|
|
137
143
|
}
|
|
138
144
|
}
|
|
139
|
-
|
|
140
|
-
.checkmark:after {
|
|
141
|
-
width: ${(props) =>
|
|
142
|
-
props.size === "large"
|
|
143
|
-
? "10px"
|
|
144
|
-
: props.size === "medium"
|
|
145
|
-
? "8px"
|
|
146
|
-
: "6px"};
|
|
147
|
-
height: ${(props) =>
|
|
148
|
-
props.size === "large"
|
|
149
|
-
? "10px"
|
|
150
|
-
: props.size === "medium"
|
|
151
|
-
? "8px"
|
|
152
|
-
: "6px"};
|
|
153
|
-
border-radius: 100%;
|
|
154
|
-
background: ${(props) => props.theme.colors.primary};
|
|
155
|
-
}
|
|
156
145
|
`
|
|
157
146
|
|
|
158
147
|
const textAttrs = { isDisabled: Boolean }
|
|
159
148
|
const LabelText = styled("div", textAttrs)`
|
|
160
149
|
color: ${(props) =>
|
|
161
|
-
props.isDisabled ? props.theme.colors.
|
|
150
|
+
props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
|
|
162
151
|
`
|
|
163
152
|
|
|
164
153
|
const RadioImage = styled.img`
|