Mailspring/static/components/switch.less
Jackie Luo 45ef25fc02 🎨(preferences): Updates preferences to look prettier
Summary:
Adds new redesigned preferences with horizontal tab bar and refactored code.

Converts Preferences, Plugins, and a few components to ES6.

Test Plan: Tested locally.

Reviewers: evan, bengotow

Reviewed By: bengotow

Subscribers: juan

Differential Revision: https://phab.nylas.com/D2818
2016-04-01 14:01:26 -07:00

30 lines
606 B
Text

@import "ui-variables";
.slide-switch {
border-radius: 12px;
box-shadow: inset 0 1px 1.5px rgba(0,0,0,0.3);
background-color: @gray-light;
position: relative;
display: inline-block;
vertical-align: middle;
height: 21px;
width: 40px;
.handle {
border-radius: 14px;
width: 25px;
height: 25px;
position: absolute;
top: -2px;
left: -3px;
background-color: @white;
box-shadow: 0 0.5px 3px rgba(0,0,0,0.4);
transition: all 150ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
&.active {
background-color: #69ba55;
.handle {
left: 18px;
}
}
}