Change 'revert' button to title case
- Switch 'revert' button text to title case for consistency and more formal and professional look. - Update related styles to reflect the new case usage. - Adjust tests to match the new button label casing. - Remove reduntant visibility switch between to elements to simpify the DOM and style rules.
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<ToggleSwitch
|
||||
v-model="isReverted"
|
||||
:stop-click-propagation="true"
|
||||
:label="'revert'"
|
||||
:label="'Revert'"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -10,8 +10,15 @@
|
||||
>
|
||||
<div class="toggle-animation">
|
||||
<div class="circle" />
|
||||
<span class="label-off">{{ label }}</span>
|
||||
<span class="label-on">{{ label }}</span>
|
||||
<span
|
||||
class="label"
|
||||
:class="{
|
||||
'label-off': !isChecked,
|
||||
'label-on': isChecked,
|
||||
}"
|
||||
>
|
||||
{{ label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -91,16 +98,6 @@ $gap : 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin setVisibility($isVisible: true) {
|
||||
@if $isVisible {
|
||||
display: block;
|
||||
opacity: 1;
|
||||
} @else {
|
||||
display: none;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
@@ -155,34 +152,22 @@ $gap : 0.25em;
|
||||
left: $padded-left-offset;
|
||||
background-color: $color-toggle-checked;
|
||||
}
|
||||
}
|
||||
|
||||
.label-off {
|
||||
@include setVisibility(false);
|
||||
.label {
|
||||
font-weight: bold;
|
||||
transition: all 0.3s ease-out, color 0s;
|
||||
&.label-off {
|
||||
@include locateNearCircle('left');
|
||||
padding-right: $padding-horizontal;
|
||||
}
|
||||
|
||||
.label-on {
|
||||
@include setVisibility(true);
|
||||
&.label-on {
|
||||
color: $color-text-checked;
|
||||
|
||||
@include locateNearCircle('right');
|
||||
padding-left: $padding-horizontal;
|
||||
}
|
||||
}
|
||||
|
||||
.label-off, .label-on {
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
transition: all 0.3s ease-out;
|
||||
}
|
||||
|
||||
.label-off {
|
||||
@include setVisibility(true);
|
||||
@include locateNearCircle('left');
|
||||
padding-right: $padding-horizontal;
|
||||
}
|
||||
|
||||
.label-on {
|
||||
@include setVisibility(false);
|
||||
color: $color-text-checked;
|
||||
|
||||
@include locateNearCircle('right');
|
||||
padding-left: $padding-horizontal;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user