@@ -198,4 +198,153 @@ table {
position absolute ;
top 5px ;
left 10px ;
}
// Switch button
.switch {
position relative ;
display block ;
vertical-align top ;
width 100px ;
height 30px ;
padding 3px ;
margin 0 10px 10px 0 ;
background linear-gradient (to bottom , #eeeeee , #FFFFFF 25px );
background-image -webkit-linear-gradient (top , #eeeeee , #FFFFFF 25px );
border-radius 18px ;
box-shadow inset 0 -1px white , inset 0 1px 1px rgba (0 , 0 , 0 , 0.05 );
cursor : pointer ;
}
.switch-input {
position absolute ;
top 0 ;
left 0 ;
opacity 0 ;
}
.switch-label {
position relative ;
display block ;
height inherit ;
font-size 10px ;
text-transform uppercase ;
background #eceeef ;
border-radius inherit ;
box-shadow inset 0 1px 2px rgba (0 , 0 , 0 , 0.12 ), inset 0 0 2px rgba (0 , 0 , 0 , 0.15 );
}
.switch-label :before , .switch-label :after {
position absolute ;
top 50% ;
margin-top -.5em ;
line-height 1 ;
-webkit-transition inherit ;
-moz-transition inherit ;
-o-transition inherit ;
transition inherit ;
}
.switch-label :before {
content : attr (data-off );
right 11px ;
color #aaaaaa ;
text-shadow 0 1px rgba (255 , 255 , 255 , 0.5 );
}
.switch-label :after {
content : attr (data-on );
left 11px ;
color #FFFFFF ;
text-shadow 0 1px rgba (0 , 0 , 0 , 0.2 );
opacity 0 ;
}
.switch-input :checked ~ .switch-label {
background #5cb85c ;
box-shadow inset 0 1px 2px rgba (0 , 0 , 0 , 0.15 ), inset 0 0 3px rgba (0 , 0 , 0 , 0.2 );
}
.switch-input :checked ~ .switch-label :before {
opacity 0 ;
}
.switch-input :checked ~ .switch-label :after {
opacity 1 ;
}
.switch-handle {
position absolute ;
top 4px ;
left 4px ;
width 28px ;
height 28px ;
background linear-gradient (to bottom , #FFFFFF 40% , #f0f0f0 );
background-image -webkit-linear-gradient (top , #FFFFFF 40% , #f0f0f0 );
border-radius 100% ;
box-shadow 1px 1px 5px rgba (0 , 0 , 0 , 0.2 );
}
.switch-handle :before {
content : " "
position absolute ;
top 50% ;
left 50% ;
margin -6px 0 0 -6px ;
width 12px ;
height 12px ;
background linear-gradient (to bottom , #eeeeee , #FFFFFF );
background-image -webkit-linear-gradient (top , #eeeeee , #FFFFFF );
border-radius 6px ;
box-shadow inset 0 1px rgba (0 , 0 , 0 , 0.02 );
}
.switch-input :checked ~ .switch-handle {
left 74px ;
box-shadow -1px 1px 5px rgba (0 , 0 , 0 , 0.2 );
}
/* Transition
========================== */
.switch-label , .switch-handle {
transition All 0.3s ease ;
-webkit-transition All 0.3s ease ;
-moz-transition All 0.3s ease ;
-o-transition All 0.3s ease ;
}
/* Switch Yes No
==========================*/
.switch-yes-no {
padding 0 ;
margin 15px 0 0 ;
background #FFF ;
border-radius 0 ;
background-image none ;
}
.switch-yes-no .switch-label {
box-shadow none ;
background none ;
}
.switch-yes-no .switch-label :after , .switch-yes-no .switch-label :before {
width 100% ;
height 70% ;
top 5px ;
left 0 ;
text-align center ;
padding-top 10% ;
box-shadow inset 0 1px 4px rgba (0 , 0 , 0 , 0.2 ), inset 0 0 3px rgba (0 , 0 , 0 , 0.1 );
}
.switch-yes-no .switch-label :after {
color #FFFFFF ;
background #32CD32 ;
backface-visibility hidden ;
transform rotateY (180deg );
}
.switch-yes-no .switch-label :before {
background #eceeef ;
backface-visibility hidden ;
}
.switch-yes-no .switch-handle {
display none ;
}
.switch-yes-no .switch-input :checked ~ .switch-label {
background #FFF ;
border-color #0088cc ;
}
.switch-yes-no .switch-input :checked ~ .switch-label :before {
transform rotateY (180deg )
}
.switch-yes-no .switch-input :checked ~ .switch-label :after {
transform rotateY (0 )
}