Components

Toggle

Toggles help users activate and deactivate parameters that affect a specific outcome in Neon.

Use toggles in system settings to activate user settings, utilities, or forms and transactions to flag accounts for specific criteria.

Base Code 

.toggle_label_base {
font-family: Lato-Regular;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
}

States

There are 3 different states for the checkbox;

  • off
  • on
  • off and disabled
  • on and disabled

Off

Created with Sketch. Unselected 
.switch {
background: #FFFFFF;
width: 20px;
height: 20px;
}

.toggle {
background: #A8B7C7;
border-radius: 12px;
}

On

Created with Sketch. Selected 
.switch {
background: #FFFFFF;
width: 20px;
height: 20px;
}

.toggle_on {
background: #0070D2;
border-radius: 12px;
width: 48px;
height: 24px;
}

.toggle_label_on {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
line-height: 17px;
}

Off and Disabled

Created with Sketch. Disabled
wrong code - needs replacing 
.switch {
background: #FFFFFF;
width: 20px;
height: 20px;
}

.toggle_disabled_on {
background: #0070D2;
border-radius: 12px;
width: 48px;
height: 24px;
}

.toggle_label_disabled_on {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
}

On and Disabled

Created with Sketch. Selected 
.switch {
background: #FFFFFF;
width: 20px;
height: 20px;
}

.toggle_disabled_on {
background: #0070D2;
border-radius: 12px;
width: 48px;
height: 24px;
}

.toggle_label_disabled_on {
font-family: Lato-Bold;
font-size: 14px;
color: #54698D;
letter-spacing: 0;
}

Overview of CSS Classes

Selector
Summary
Parent Selector

coming

coming