-
+
- updateValue('boobSizeRequired', checked)"
- />
-
updateValue('boobSize', sizeRange, false)"
@change="(sizeRange) => updateValue('boobSize', sizeRange, true)"
>
@@ -96,7 +105,7 @@
-
+ Enhanced
no
+ >
yes
+ >
@@ -132,49 +141,67 @@
-
+
- updateValue('heightRequired', checked)"
- />
-
updateValue('height', heightRange, false)"
@change="(heightRange) => updateValue('height', heightRange, true)"
>
-
-
+
+
-
+
- updateValue('weightRequired', checked)"
- />
-
updateValue('weight', weightRange, false)"
@change="(weightRange) => updateValue('weight', weightRange, true)"
>
-
-
+
+
@@ -459,30 +486,38 @@ export default {
.filter-section {
width: 15rem;
max-width: 100%;
+ border-bottom: solid 1px var(--darken-hint);
}
.filter-label {
display: flex;
- justify-content: center;
- padding: 0 .5rem;
- margin: .5rem 0 0 0;
+ justify-content: space-between;
+ padding: .75rem .5rem .5rem .5rem;
color: var(--darken);
font-weight: bold;
font-size: .9rem;
+ .label {
+ display: inline-flex;
+ align-items: center;
+ }
+
+ .checkbox {
+ margin: 0 .75rem 0 0;
+ }
+
.icon {
margin: 0 .5rem 0 0;
}
}
+.label-values {
+ font-weight: normal;
+}
+
.filter-split {
display: flex;
align-items: center;
-
- .checkbox {
- display: inline-block;
- padding: 0 .5rem;
- }
}
.toggle-container,
@@ -495,6 +530,10 @@ export default {
&.on {
.toggle-label.on {
color: var(--enabled);
+
+ .icon {
+ fill: var(--enabled);
+ }
}
.toggle {
@@ -513,6 +552,10 @@ export default {
&.off {
.toggle-label.off {
color: var(--disabled);
+
+ .icon {
+ fill: var(--disabled);
+ }
}
.toggle {
@@ -530,7 +573,10 @@ export default {
}
.toggle-label {
- width: 1.5rem;
+ display: inline-flex;
+ justify-content: center;
+ min-width: 1.5rem;
+ flex-shrink: 0;
padding: 0 .5rem;
color: var(--darken);
font-weight: bold;
@@ -540,20 +586,33 @@ export default {
text-align: right;
}
+ .icon {
+ fill: var(--darken);
+ }
+
&:hover {
cursor: pointer;
&.on {
color: var(--enabled);
+
+ .icon {
+ fill: var(--enabled);
+ }
}
&.off {
color: var(--disabled);
+
+ .icon {
+ fill: var(--disabled);
+ }
}
}
}
.toggle {
+ width: 0;
flex-grow: 1;
height: 1.25rem;
appearance: none;
diff --git a/assets/components/form/range.vue b/assets/components/form/range.vue
index 7a98e8d8..ffba65ea 100644
--- a/assets/components/form/range.vue
+++ b/assets/components/form/range.vue
@@ -52,6 +52,8 @@