search

PlatformOfTrust / react-elements-of-trust

Other
1 stars 0 forks source link

Check Box #5

Open Nazarah opened 5 years ago

Nazarah commented 5 years ago

Minimum Requirements

tbd

Input Validations

tbd

Nazarah commented 5 years ago

Checkbox

1. Normal

checkbox border: 1px solid #4729b3 Label text: #555555 /alt. #4729b3 (if preferred) transition: border .15s

2. hover

border: 1px solid #7955FF

3. checked

checkbox background: #7955ff check icon: #FFFFFF

4. Disabled

checkbox border: 1 px solid #C8D8E6 label text: #C8D8E6 /alt. #555555 (if preferred)

5. Alert

checkbox border: 1 px solid #FF6CC0

6. Inline

gap between 2 checkboxes(inc label): 20px

7. parent - child

(only some children checked) parent: checkbox border: 1 px solid #7955FF, background: #7955FF, background-border: 4px solid #ffffff

Checkbox - Light
Nazarah commented 5 years ago

Checkbox - Dark Background

1. Normal

checkbox border: 1px solid #FFFFFF Label text: #FFFFFF transition: box-shadow .15s

2. hover

box-shadow: 3px 3px #FFFFFF 60%

3. checked

checkbox background: #FFFFFF check icon: #F7955FF

4. Disabled

checkbox-background: 8D6EFF checkbox border: 1 px solid #B5A1FF label text: #B5A1FF /alt. #555555 (if preferred)

5. Alert

checkbox border: 1 px solid #FF6CC0

6. Inline

gap between 2 checkboxes(inc label): 20px

7. parent - child

(only some children checked) parent: checkbox border: 1 px solid #FFFFFF, background: #FFFFFF, background-border: 4px solid #7955FF

Checkbox - Dark