Build mobile apps with simple HTML, CSS, and JS components. http://goratchet.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

51 lines
1.3 KiB

11 years ago
//
// Toggle styles (to be used with toggles.js)
// --------------------------------------------------
12 years ago
.toggle {
position: relative;
width: 47px;
height: 30px;
background-color: #fff;
border: 2px solid #e6e6e6;
12 years ago
border-radius: 20px;
@include box-shadow(inset 0 0 0 0 #e1e1e1);
@include transition-property(box-shadow, border);
@include transition-duration(.2s);
12 years ago
11 years ago
// Sliding handle
.toggle-handle {
position: absolute;
top: -1px;
left: -1px;
z-index: 2;
width: 28px;
height: 28px;
background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
11 years ago
border-radius: 100px;
11 years ago
@include box-shadow(0 3px 3px rgba(0,0,0,.08));
@include transition-property(-webkit-transform, border, width);
@include transition-duration(.2s);
11 years ago
}
12 years ago
&:active .toggle-handle {
width: 35px;
}
11 years ago
// Active state for toggle
&.active {
border: 2px solid $positive-color;
@include box-shadow(inset 0 0 0 13px $positive-color);
.toggle-handle {
border-color: $positive-color;
@include transform(translate3d(17px,0,0));
}
// Handle when the handle and the container is active
&:active .toggle-handle,
.toggle-handle:active {
@include transform(translate3d(10px,0,0) !important); // Evil important tag is used to overwrite js.
}
11 years ago
}
12 years ago
}