ocelot-Social-Community/Ocelot-Social
1
0
Fork 0
mirror of https://github.com/Ocelot-Social-Community/Ocelot-Social.git synced 2025-12-13 07:46:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor of click event to use a methhod and the @click rather than mouse down. Small adjustment to button spacing.

Browse Source
This commit is contained in:
Brandon Tripp 2020-11-20 13:39:43 -07:00
parent 59df64027e
commit f56664b334
1 changed files with 23 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
webapp/components/LoginForm/LoginForm.vue
View File

@ -32,12 +32,7 @@
/> />
<a <a
class="click-wrapper" class="click-wrapper"
@mousedown=" @click="toggleShowPassword"
(event) => {
showPassword = !showPassword
event.preventDefault()
}
"
> >
<base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" /> <base-icon class="toggle-icon" :name="showPassword ? 'eye-slash' : 'eye'" />
</a> </a>
@ -94,6 +89,11 @@ export default {
this.$toast.error(this.$t('login.failure')) this.$toast.error(this.$t('login.failure'))
} }
}, },
toggleShowPassword(event) {
console.log(event);
event.preventDefault();
this.showPassword = !this.showPassword
}
}, },
} }
</script> </script>
@ -118,6 +118,7 @@ export default {
align-items: center; align-items: center;
padding: $input-padding-vertical $space-x-small; padding: $input-padding-vertical $space-x-small;
padding-left: 0; padding-left: 0;
padding-right: 0;
height: $input-height; height: $input-height;
margin-bottom: 10px; margin-bottom: 10px;
@ -130,10 +131,24 @@ export default {
transition: all $duration-short $ease-out; transition: all $duration-short $ease-out;
.click-wrapper { .click-wrapper {
padding: 5px; padding: 8px;
margin: 4px;
color: $text-color-disabled; color: $text-color-disabled;
} }
.click-wrapper:hover {
cursor: pointer;
&:focus-within {
background-color: $background-color-base;
border: $input-border-size solid $border-color-active;
.toggle-icon {
color: $text-color-base;
}
}
}
&:focus-within { &:focus-within {
background-color: $background-color-base; background-color: $background-color-base;
border: $input-border-size solid $border-color-active; border: $input-border-size solid $border-color-active;
@ -145,7 +160,7 @@ export default {
.password-field { .password-field {
position: relative; position: relative;
padding-top: 16px; padding-top: 16px;
padding-right: 20px; padding-right: 16px;
border: none; border: none;
border-style: none; border-style: none;
appearance: none; appearance: none;