krikkert/habitica
1
0
Fork 0
mirror of https://github.com/HabitRPG/habitica.git synced 2025-12-19 07:37:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(signup): 18+ verbiage, refactor forms scss

Browse Source
This commit is contained in:
Kalista Payne
2025-08-22 17:38:44 -05:00
parent 384fb505c1
commit 635a258d62
5 changed files with 215 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
website/client/src/assets/scss/form.scss
View File

@@ -19,21 +19,20 @@ label small {
// Inputs and textareas // Inputs and textareas
input, textarea, input.form-control, textarea.form-control { input, textarea, input.form-control, textarea.form-control {
border-radius: 3px; padding: 10px 12px;
border-radius: 2px;
font-size: 14px; font-size: 14px;
line-height: 1.714; line-height: 1.43;
padding: 4px 12px;
color: $gray-50; color: $gray-50;
border: 1px solid $gray-400; border: 1px solid $gray-400;
&:hover:not(:disabled):not(:read-only):not(:focus):not(:disabled):not(.input-valid):not(.input-invalid):not(.dark) { &:hover:not(:disabled):not(:read-only) {
border-color: $gray-200; border-color: $gray-300;
} }
&:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only), &:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only) {
&:active:not(:disabled):not(:read-only).dark, &:focus:not(:disabled):not(:read-only).dark { border-color: $purple-400;
border: 1px solid $purple-400; outline: 0;
outline: 1px solid $purple-400;
box-shadow: none; box-shadow: none;
} }
@@ -64,68 +63,13 @@ input, textarea, input.form-control, textarea.form-control {
padding-right: 27px; padding-right: 27px;
background-image: url(@/assets/svg/for-css/check.svg); background-image: url(@/assets/svg/for-css/check.svg);
background-size: 1rem; background-size: 1rem;
border-color: $green-10;
} }
&.input-invalid, .input-invalid:hover { &.input-invalid {
padding-right: 40px; padding-right: 40px;
background-image: url(@/assets/svg/for-css/alert.svg); background-image: url(@/assets/svg/for-css/alert.svg);
background-size: 16px 16px; background-size: 16px 16px;
border-color: $red-100; border-color: $red-100 !important;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $gray-200;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $gray-200;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $gray-200;
}
&:-moz-placeholder { /* Firefox 18- */
color: $gray-200;
}
&::placeholder { // Standard browsers
color: $gray-200;
}
.input-invalid.input-with-error {
margin-bottom: 0.5em;
}
&.dark {
background-color: $purple-100;
color: $white;
&:not(.input-valid):not(.input-invalid) {
border: 1px solid $purple-300;
}
&:focus {
background-color: $purple-100;
color: $white;
}
&:hover:not(:focus):not(:disabled):not(.input-valid):not(.input-invalid) {
border-color: $purple-400;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $purple-500;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $purple-500;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $purple-500;
}
&:-moz-placeholder { /* Firefox 18- */
color: $purple-500;
}
&::placeholder { // Standard browsers
color: $purple-500;
}
} }
} }
@@ -235,7 +179,8 @@ input, textarea, input.form-control, textarea.form-control {
.input-error { .input-error {
font-size: 12px; font-size: 12px;
line-height: 1.33; line-height: 1.33;
color: $maroon-500;
color: $maroon-10;
} }
.input-group-spaced { .input-group-spaced {
@@ -284,17 +229,9 @@ $bg-disabled-control: $gray-10;
} }
.custom-control-input { .custom-control-input {
&:hover~.custom-control-label::before { opacity: 0;
border-color: $gray-100;
}
&:checked~.custom-control-label::before { &:checked~.custom-control-label::before {
background-color: $purple-300;
border-color: $purple-300;
}
&:hover:checked:not(:disabled)~.custom-control-label::before,
&:active:not(:disabled)~.custom-control-label::before {
background-color: $purple-400; background-color: $purple-400;
border-color: $purple-400; border-color: $purple-400;
} }
@@ -306,46 +243,36 @@ $bg-disabled-control: $gray-10;
background-size: 13px 10px; background-size: 13px 10px;
} }
&:checked:disabled~.custom-control-label::after {
background-image: url(@/assets/svg/for-css/checkbox-gray.svg);
}
&:active~.custom-control-label::before { &:active~.custom-control-label::before {
background-color: inherit; background-color: inherit;
} }
&:focus~.custom-control-label::before, &:focus:not(:checked):not(:disabled)~.custom-control-label::before,
&:active~.custom-control-label::before { &:active:not(:checked):not(:disabled)~.custom-control-label::before {
border-color: $purple-400; border: 2px solid $gray-300;
box-shadow: none; box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
} }
&:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before { &:focus:checked:not(:disabled)~.custom-control-label::before,
&:active:checked:not(:disabled)~.custom-control-label::before {
box-shadow: 0 0 0 2px rgba(146, 92, 243, 0.5);
border-color: 2 px solid $purple-400;
background-color: $purple-400;
}
&:focus:disabled~.custom-control-label::before,
&:active:disabled~.custom-control-label::before {
box-shadow: 0 0 0 6px rgba($bg-disabled-control, 0.1);
}
&:disabled:checked~.custom-control-label::before {
border-color: $gray-400; border-color: $gray-400;
background-color: $gray-400; background-color: $gray-400;
} }
&.dark { &:disabled:not(:checked)~.custom-control-label::before {
~.custom-control-label::before { border-color: $gray-400;
border-color: $purple-100; background-color: transparent;
}
&:hover~.custom-control-label::before,
&:active~.custom-control-label::before {
border-color: $purple-50;
}
&:checked~.custom-control-label::before {
background-color: $purple-100;
border-color: $purple-100;
}
&:focus~.custom-control-label::before,
&:active~.custom-control-label::before {
border-color: $purple-400;
box-shadow: none;
}
&:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
border-color: $gray-400;
background-color: $gray-400;
}
} }
} }
} }

168
website/client/src/assets/scss/forms.scss Normal file
View File

@@ -0,0 +1,168 @@
// Inputs and textareas
input, textarea, input.form-control, textarea.form-control {
border-radius: 3px;
font-size: 14px;
line-height: 1.714;
padding: 4px 12px;
color: $gray-50;
border: 1px solid $gray-400;
&:hover:not(:disabled):not(:read-only):not(:focus):not(:disabled):not(.input-valid):not(.input-invalid):not(.dark) {
border-color: $gray-200;
}
&:active:not(:disabled):not(:read-only), &:focus:not(:disabled):not(:read-only),
&:active:not(:disabled):not(:read-only).dark, &:focus:not(:disabled):not(:read-only).dark {
border: 1px solid $purple-400;
outline: 1px solid $purple-400;
box-shadow: none;
}
&.input-valid {
padding-right: 27px;
background-image: url(@/assets/svg/for-css/check.svg);
background-size: 1rem;
border-color: $green-10;
}
&.input-invalid, .input-invalid:hover {
padding-right: 40px;
background-image: url(@/assets/svg/for-css/alert.svg);
background-size: 16px 16px;
border-color: $red-100;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $gray-200;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $gray-200;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $gray-200;
}
&:-moz-placeholder { /* Firefox 18- */
color: $gray-200;
}
&::placeholder { // Standard browsers
color: $gray-200;
}
.input-invalid.input-with-error {
margin-bottom: 0.5em;
}
&.dark {
background-color: $purple-100;
color: $white;
&:not(.input-valid):not(.input-invalid) {
border: 1px solid $purple-300;
}
&:focus {
background-color: $purple-100;
color: $white;
}
&:hover:not(:focus):not(:disabled):not(.input-valid):not(.input-invalid) {
border-color: $purple-400;
}
&::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: $purple-500;
}
&::-moz-placeholder { /* Firefox 19+ */
color: $purple-500;
}
&:-ms-input-placeholder { /* IE 10+ */
color: $purple-500;
}
&:-moz-placeholder { /* Firefox 18- */
color: $purple-500;
}
&::placeholder { // Standard browsers
color: $purple-500;
}
}
}
.input-error {
font-size: 12px;
line-height: 1.33;
color: $maroon-500;
}
// checkboxes
.custom-checkbox {
.custom-control-label::before {
border-radius: 2px;
}
.custom-control-input {
&:hover~.custom-control-label::before {
border-color: $gray-100;
}
&:checked~.custom-control-label::before {
background-color: $purple-300;
border-color: $purple-300;
}
&:hover:checked:not(:disabled)~.custom-control-label::before,
&:active:not(:disabled)~.custom-control-label::before {
background-color: $purple-400;
border-color: $purple-400;
}
&:checked~.custom-control-label::after {
width: 18px;
height: 18px;
background-image: url(@/assets/svg/for-css/checkbox-white.svg);
background-size: 13px 10px;
}
&:checked:disabled~.custom-control-label::after {
background-image: url(@/assets/svg/for-css/checkbox-gray.svg);
}
&:active~.custom-control-label::before {
background-color: inherit;
}
&:focus~.custom-control-label::before,
&:active~.custom-control-label::before {
border-color: $purple-400;
box-shadow: none;
}
&:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
border-color: $gray-400;
background-color: $gray-400;
}
&.dark {
~.custom-control-label::before {
border-color: $purple-100;
}
&:hover~.custom-control-label::before,
&:active~.custom-control-label::before {
border-color: $purple-50;
}
&:checked~.custom-control-label::before {
background-color: $purple-100;
border-color: $purple-100;
}
&:focus~.custom-control-label::before,
&:active~.custom-control-label::before {
border-color: $purple-400;
box-shadow: none;
}
&:disabled~.custom-control-label::before, &:disabled:checked~.custom-control-label::before {
border-color: $gray-400;
background-color: $gray-400;
}
}
}
}

16
website/client/src/components/auth/registerUsername.vue
View File

@@ -101,16 +101,24 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/scss/colors.scss'; @import '@/assets/scss/colors.scss';
@import '@/assets/scss/privacy.scss'; @import '@/assets/scss/privacy.scss';
@import '@/assets/scss/forms.scss';
p.purple-600 {
line-height: 1.714;
}
.custom-checkbox {
.custom-control-label::before {
border-radius: 2px;
margin-top: 2px;
}
}
.gradient-bg { .gradient-bg {
background: linear-gradient(to bottom, $purple-200, $purple-300); background: linear-gradient(to bottom, $purple-200, $purple-300);
height: 700px; height: 700px;
} }
p.purple-600 {
line-height: 1.714;
}
.input-error { .input-error {
font-size: 90%; font-size: 90%;
width: 100%; width: 100%;

1
website/client/src/components/static/home.vue
View File

@@ -360,6 +360,7 @@
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/scss/colors.scss'; @import '@/assets/scss/colors.scss';
@import '@/assets/scss/privacy.scss'; @import '@/assets/scss/privacy.scss';
@import '@/assets/scss/forms.scss';
@import url('https://fonts.googleapis.com/css?family=Varela+Round'); @import url('https://fonts.googleapis.com/css?family=Varela+Round');

2
website/common/locales/en/front.json
View File

@@ -187,5 +187,5 @@
"learnMore": "Learn More", "learnMore": "Learn More",
"translateHabitica": "Translate Habitica", "translateHabitica": "Translate Habitica",
"whatToCallYou": "What should we call you?", "whatToCallYou": "What should we call you?",
"acceptPrivacyTOS": "You agree to our <a href='/static/terms' target='_blank'>Terms of Service</a> and have read our <a href='/static/privacy' target='_blank'>Privacy Policy</a>" "acceptPrivacyTOS": "You confirm that you are at least 18 years old, and that you have read and agree to our <a href='/static/terms' target='_blank'>Terms of Service</a> and <a href='/static/privacy' target='_blank'>Privacy Policy</a>"
} }