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.
115 lines
3.1 KiB
115 lines
3.1 KiB
//
|
|
// switch styles (to be used with switchs.js)
|
|
// --------------------------------------------------
|
|
|
|
.#{$namespace}switch {
|
|
position: relative;
|
|
display: block;
|
|
width: 74px;
|
|
height: 30px;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 2px solid #ddd;
|
|
border-radius: 20px;
|
|
-webkit-transition-timing-function: ease-in-out;
|
|
transition-timing-function: ease-in-out;
|
|
-webkit-transition-duration: 0.2s;
|
|
transition-duration: 0.2s;
|
|
-webkit-transition-property: background-color, border;
|
|
transition-property: background-color, border;
|
|
&.#{$namespace}disabled {
|
|
opacity: .3;
|
|
}
|
|
// Sliding handle
|
|
.#{$namespace}switch-handle {
|
|
position: absolute;
|
|
top: -1px;
|
|
left: -1px;
|
|
z-index: z("default");
|
|
width: 28px;
|
|
height: 28px;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
// border: 1px solid #ddd;
|
|
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,.4);
|
|
box-shadow: 0 2px 5px rgba(0,0,0,.4);
|
|
border-radius: 16px;
|
|
-webkit-transition-property: -webkit-transform, width,left;
|
|
transition-property: transform, width,left;
|
|
-webkit-transition: 0.2s ease-in-out;
|
|
transition: 0.2s ease-in-out;
|
|
}
|
|
&:before {
|
|
position: absolute;
|
|
top: 3px;
|
|
right: 11px;
|
|
font-size: 13px;
|
|
color: #999;
|
|
text-transform: uppercase;
|
|
content: "Off";
|
|
}
|
|
&.#{$namespace}dragging {
|
|
background-color: $chrome-color;
|
|
border-color: $chrome-color;
|
|
.#{$namespace}switch-handle {
|
|
width: 38px;
|
|
}
|
|
&.#{$namespace}active{
|
|
.#{$namespace}switch-handle {
|
|
width: 38px;
|
|
left:-11px;
|
|
}
|
|
}
|
|
}
|
|
// Active state for switchborder: 2px solid $positive-color;
|
|
&.#{$namespace}active {
|
|
background-color: $positive-color;
|
|
border-color: $positive-color;
|
|
// @include box-shadow(inset 0 0 0 13px $positive-color);
|
|
.#{$namespace}switch-handle {
|
|
// border-color: $positive-color;
|
|
@include transform(translate(43px,0));
|
|
}
|
|
&:before {
|
|
right: auto;
|
|
left: 15px;
|
|
color: #fff;
|
|
content: "On";
|
|
}
|
|
}
|
|
// Hide the checkbox
|
|
input[type="checkbox"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$namespace}switch-mini{
|
|
width: 47px;
|
|
&:before {
|
|
display: none;
|
|
}
|
|
// Active state for switch
|
|
&.#{$namespace}active {
|
|
.#{$namespace}switch-handle {
|
|
@include transform(translate(16px,0));
|
|
}
|
|
}
|
|
}
|
|
|
|
//增加蓝色开关
|
|
.#{$namespace}switch-blue {
|
|
// Sliding handle
|
|
.#{$namespace}switch-handle {
|
|
// border: 1px solid rgba(0, 0, 0, .2);
|
|
// @include box-shadow(0 3px 3px rgba(0,0,0,.08));
|
|
}
|
|
// Active state for switch
|
|
&.#{$namespace}active {
|
|
background-color: $primary-color;
|
|
border: 2px solid $primary-color;
|
|
// @include box-shadow(inset 0 0 0 13px $primary-color);
|
|
// .#{$namespace}switch-handle {
|
|
// border-color: $primary-color;
|
|
// }
|
|
}
|
|
} |