Select Dropdown Menu

[Nazarah]

Minimum Requirements

tbd

Input Validations

tbd

[Nazarah]

Single Selection - Light 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 Font Awesome sort down: #4729B3 Font Awesome sort up: #4729B3

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; Text color: #555555 Font Awesome sort down: #7955ff Font Awesome sort up: #7955ff menu height:114px menu border: 1px solid #7955ff border shadow: yes selected bar: #7955ff selected text color: #ffffff

4. menu with single option

height: 36px

5. Field with no validation (after input)

Text color: #555555

6. Success

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

7. 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; menu height:114px menu border: 1px solid #5CD328 border shadow: yes selected bar: #5CD328 selected text color: #ffffff

8. 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

9. 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; menu height: 114px menu border: 1px solid #FF6CC0 border shadow: yes selected bar: #FF6CC0 selected text color: #ffffff

10. Disabled

Label: #4F1CBA Input field BG: #C8D8E6 Input field Border: #D9D9D9 Placeholder text: #B5A1FF Font Awesome sort down: #B5A1FF Font Awesome sort up: #7B5A1FF

[Nazarah]

Single Selection - Dark Background

1. Normal State:

Label: Dark Text 2: #FFFFFF label opacity: 80% input field BG: #transparent Input field border: 1px solid #FFFFFF Placeholder text: #ffffff Description text: #ffffff Font Awesome sort down: #ffffff Font Awesome sort up: #ffffff *sort icon opacity:* 80%

2. Hover:

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

3. Active:

Label: #ffffff label opacity: 100% Input field border: 2px solid #7955ff Shadow around input field: 6px, #ffffff, opacity: 60% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; Text color: #ffffff Font Awesome sort down: #FFFFFF Font Awesome sort up: #FFFFFF Sort icon opacity: 100% menu height:114px menu border: 1px solid #7955ff border shadow: yes selected bar: #7955ff selected text color: #ffffff

4. menu with single option

height: 36px

5. Field with no validation (after input)

Text color: #ffffff

6. Success

Label: #ffffff label opacity: 80% Input field border: 1px solid #5CD328 Text color: Dark Text 1: #ffffff Font-awesome icon: check-circle color: #5CD328

7. Success (on Active)

Label: #ffffff label opacity: . 100% Shadow around input field: 6px, #5CD328, opacity: 60% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; menu height:114px menu border: 1px solid #5CD328 border shadow: yes selected bar: #5CD328 selected text color: #ffffff

8. Error

Label: #ffffff Label opacity: 80% Input field border: 1px solid #FF6CC0 Text color: #ffffff Font-awesome icon: exclamation-circle color: #FF6CC0

9. Error (on Active)

Label: #ffffff label opacity: 100% Shadow around input field: 6px, #FF6CC0, opacity: 60% transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; menu height: 114px menu border: 1px solid #FF6CC0 border shadow: yes selected bar: #FF6CC0 selected text color: #ffffff

10. Disabled

Label: #FFFFFF Input field BG: #8D6EFF Input field Border: #DB5A1FF Placeholder text: #B5A1FF Font Awesome sort down: #B5A1FF Font Awesome sort up: #7B5A1FF