srcdev-nuxt-forms 6.1.6 → 6.1.7
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.
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
:checked="isChecked"
|
|
20
20
|
/>
|
|
21
21
|
<div class="symbol-wrapper" :class="[{ round }]">
|
|
22
|
-
<div class="symbol" :class="[{ round }]">
|
|
23
|
-
<div class="symbol-icon icon-on">
|
|
22
|
+
<div class="symbol" :class="[{ round }, { checked: isChecked }]">
|
|
23
|
+
<div class="symbol-icon icon-on" :class="{ active: isChecked }">
|
|
24
24
|
<slot name="iconOn">
|
|
25
25
|
<Icon name="material-symbols:circle-outline" class="icon" />
|
|
26
26
|
</slot>
|
|
27
27
|
</div>
|
|
28
28
|
|
|
29
|
-
<div class="symbol-icon icon-off">
|
|
29
|
+
<div class="symbol-icon icon-off" :class="{ active: !isChecked }">
|
|
30
30
|
<slot name="iconOff">
|
|
31
31
|
<Icon name="material-symbols:circle-outline" class="icon" />
|
|
32
32
|
</slot>
|
|
@@ -121,28 +121,6 @@ const toggleSwitchValue = () => {
|
|
|
121
121
|
}
|
|
122
122
|
|
|
123
123
|
.toggle-switch-wrapper {
|
|
124
|
-
--theme-form-toggle-border-color: var(--blue-12);
|
|
125
|
-
--theme-form-toggle-border-width: 0.1rem;
|
|
126
|
-
--theme-form-toggle-outline-color: var(--gray-2);
|
|
127
|
-
--theme-form-toggle-outline-width: 0.1rem;
|
|
128
|
-
|
|
129
|
-
--_transition-duration: 0.4s;
|
|
130
|
-
--_switch-padding: 0.2rem;
|
|
131
|
-
--_icon-color: inherit;
|
|
132
|
-
--_icon-on-opacity: 0;
|
|
133
|
-
--_icon-off-opacity: 1;
|
|
134
|
-
--_icon-font-size: 2.4rem;
|
|
135
|
-
--_symbol-size: 3.4rem;
|
|
136
|
-
--_symbol-background-color: var(--blue-12);
|
|
137
|
-
--_symbol-outline-color: transparent;
|
|
138
|
-
--_symbol-outline-width: 1px;
|
|
139
|
-
--_symbol-margin-inline-start: 0;
|
|
140
|
-
--_symbol-checked-offset: calc(var(--_symbol-size) * 0.75);
|
|
141
|
-
|
|
142
|
-
&.use-default-icons {
|
|
143
|
-
--_icon-color: transparent;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
124
|
display: flex;
|
|
147
125
|
flex-direction: column;
|
|
148
126
|
|
|
@@ -152,61 +130,34 @@ const toggleSwitchValue = () => {
|
|
|
152
130
|
visibility: hidden;
|
|
153
131
|
}
|
|
154
132
|
|
|
155
|
-
&:has(input:checked) {
|
|
156
|
-
--_icon-on-opacity: 1;
|
|
157
|
-
--_icon-off-opacity: 0;
|
|
158
|
-
--_symbol-margin-inline-start: var(--_symbol-checked-offset);
|
|
159
|
-
}
|
|
160
|
-
|
|
161
133
|
.symbol-wrapper {
|
|
162
|
-
/* background: blue; */
|
|
163
|
-
border: var(--theme-form-toggle-border-width) solid var(--theme-form-toggle-border-color);
|
|
164
|
-
outline: var(--theme-form-toggle-outline-width) solid var(--theme-form-toggle-outline-color);
|
|
165
|
-
border-radius: calc(
|
|
166
|
-
var(--_symbol-size) + calc(var(--theme-form-toggle-border-width) * 2) + calc(var(--_switch-padding) * 2)
|
|
167
|
-
);
|
|
168
134
|
display: inline-flex;
|
|
169
135
|
align-items: center;
|
|
170
136
|
justify-content: start;
|
|
171
|
-
|
|
172
|
-
var(--_symbol-size) + var(--_symbol-checked-offset) + calc(var(--theme-form-toggle-border-width) * 2) +
|
|
173
|
-
calc(var(--_switch-padding) * 2)
|
|
174
|
-
);
|
|
175
|
-
padding: var(--_switch-padding);
|
|
137
|
+
position: relative;
|
|
176
138
|
|
|
177
139
|
.symbol {
|
|
178
140
|
display: inline-grid;
|
|
179
141
|
grid-template-areas: "icon";
|
|
180
142
|
place-content: center;
|
|
143
|
+
position: absolute;
|
|
144
|
+
overflow: hidden;
|
|
145
|
+
left: var(--_switch-padding);
|
|
181
146
|
|
|
182
147
|
aspect-ratio: 1/1;
|
|
183
|
-
/* width: var(--_symbol-size); */
|
|
184
|
-
padding: calc(calc(var(--_symbol-size) - var(--_icon-font-size)) / 2);
|
|
185
|
-
|
|
186
|
-
outline: var(--_symbol-outline-width) solid var(--_symbol-outline-color);
|
|
187
|
-
border-radius: 50%;
|
|
188
|
-
margin-inline-start: var(--_symbol-margin-inline-start);
|
|
189
148
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
transition: margin var(--_transition-duration);
|
|
149
|
+
&.checked {
|
|
150
|
+
left: calc(100% - var(--_symbol-size) - var(--_switch-padding) - (2 * var(--_toggle-symbol-border-width)));
|
|
151
|
+
}
|
|
195
152
|
|
|
196
153
|
.symbol-icon {
|
|
197
154
|
display: grid;
|
|
198
155
|
grid-area: icon;
|
|
199
156
|
place-content: center;
|
|
157
|
+
opacity: 0;
|
|
200
158
|
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
transition: opacity var(--_transition-duration);
|
|
204
|
-
|
|
205
|
-
&.icon-on {
|
|
206
|
-
opacity: var(--_icon-on-opacity);
|
|
207
|
-
}
|
|
208
|
-
&.icon-off {
|
|
209
|
-
opacity: var(--_icon-off-opacity);
|
|
159
|
+
&.active {
|
|
160
|
+
opacity: 1;
|
|
210
161
|
}
|
|
211
162
|
}
|
|
212
163
|
}
|
package/package.json
CHANGED