Toggle switch (update default version + new larger version)

[ulde01]

Design update 2020-11-13

Change

• The default version has adjusted sizes, states and colours (please see the details in the link below)
• A new mobile-friendly larger version has been added

Component identifier
component-slidetoggle

Reason
The slide toggle was too small for a mobile context. We also noticed that the standard version needed to be updated and specified better.

Specification
https://designlibrary.sebgroup.com/components/component-slidetoggle

Thanks,
/Ulrika

[ulde01]

Addition:

Details

All states

• Changed border radius to 0.625rem
• Changed height from 1.25rem to 1.5rem
• Changed switch size from 1.125rem to 1.25rem
• Changed with to 2.75rem from 2.5rem
• Added version with and without label.

Normal/Off

• Changed background color from Grey 400 to Grey 300
• Changed state name to “Off”

Hover

• Removed blue ring in switch
• Changed left margin of switch to 0.375rem

Focus

• Removed blue ring in switch
• Added border: 1px solid #007AC7; (Blue Dark 2)
• Added box-shadow: 0 0 4px 1px #41B0EE; (Blue)

Pressed/On

• Changed state name to “On”
• Changed background from Blue to Green Dark 1

Pressed & Hover

• Change state name to "On & Focused"
• Removed blue ring in switch
• Changed background from Blue to Green Dark 2
• Changed right margin of switch to 0.375rem

Contextual helpbutton

• On & Off have symbols with contextual help button for both default & large size versions.

Default Size
Component has a

• Default size

Large Size

• Added a Large Size version of the component