search

PlatformOfTrust / react-elements-of-trust

Other
1 stars 0 forks source link

Password Input #2

Open Nazarah opened 5 years ago

Nazarah commented 5 years ago

Minimum Requirements

tbd

Input Validations

tbd

Nazarah commented 5 years ago

Password input in White Background

1. Normal State:

Label: Dark Text 2: #4729B3 Input field BG: #FFFFFF Input field border: 1px solid #4729B3 Placeholder text: #555555 Description text: #555555

2. Hover:

Input field border: 1px solid #7955ff transition: border-color .15s ease-in-out,

3. Active:

Label: #7955ff Input field border: 1px solid #7955ff Shadow around input field: 6px, #7955ff, opacity: 30% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; (While typing input) Text color: Dark Text 1: #1E1540

4. Field with no validation (after input)

Text color: #1E1540

5. Success

Label: Dark Text 2: #4729B3 Input field border: 1px solid #5CD328 Text color: Dark Text 1: #1E1540 Font-awesome icon: check-circle color: #5CD328

6. Success (on Active)

Label: #7955ff Shadow around input field: 6px, #5CD328, opacity: 30% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

7. Error

Label: Dark Text 2: #4729B3 Input field border: 1px solid #FF6CC0 Text color: Dark Text 1: #1E1540 Font-awesome icon: exclamation-circle color: #FF6CC0

8. Error (on Active)

Label: #7955ff Shadow around input field: 6px, #FF6CC0, opacity: 30% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;

9. Disabled

Label: #4F1CBA Input field BG: #C8D8E6 Input field Border: #D9D9D9 Placeholder text: #B5A1FF

password-light

Nazarah commented 5 years ago

Password input in Dark Background

1. Normal State

Label: #ffffff, font-style: medium Input field BG: NONE (transparent) Input field border: 1px solid #ffffff Placeholder text: #B5A1FF Description text: #B5A1FF

2. Hover:

Input field border: 2px solid #7955ff transition: border .15s ease-in-out,

3. Active:

Label: #ffffff, font-style: bold Input field border: 2px solid #ffffff Shadow around input field: 6px, #ffffff, opacity: 60% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; (While typing input) Text color: Dark Text 1: #FFFFFF

4. Field with no validation (after input)

Input field border: 1px solid #ffffff Text color: #ffffff

5. Success

Label: #FFFFFF, font-style: medium Input field border: 1px solid #5CD328 Text color: #FFFFFF Font-awesome icon: check-circle color: #5CD328

6. Success (on Active)

Label: #ffffff, font-style: bold Input field border: 2px solid #5CD328 Shadow around input field: 6px, #5CD328, opacity: 60% transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

7. Error

Label: #FFFFFF, font-style: medium Input field border: 1px solid #FF6CC0 Text color: #FFFFFF Font-awesome icon: exclamation-circle color: #FF6CC0

8. Error (on Active)

Label: ##FFFFFF, font-style: medium Input field border: 2px solid #FF6CC0 Shadow around input field: 6px, #FF6CC0, opacity: 60% transition: border-shadow .15s ease-in-out,box-shadow .15s ease-in-out;

9. Disabled:

Label: #FFFFFF Input field BG: #8D6EFF Input field Border: #B5A1FF Placeholder text: #B5A1FF

password-dark