@import "compass/css3/transition"; @import "compass/css3/box-shadow"; @import "compass/css3/border-radius"; @import "compass/css3/transform"; @import "mixin/_inlineblock"; @import "compass/css3/images"; /*Checkbox */ .sf-checkbox-container { display: inline-block; width:60px; height: 25px; border: 1px solid #777; clear:both; overflow:hidden; line-height: 0 !important; padding-left: 0 !important; vertical-align: middle; color: #333; text-shadow: white 0px 1px 0px; @include border-radius(3px); @include transform(translate3d(0,0,0)); @include box-shadow(rgba(255,255,255,0.7) 0px 1px 0px inset); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; background-image: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.2)); background-image: -moz-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.2)); background-image:linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0)); } .sf-checkbox-container.rounded { @include border-radius(200px); } .sf-checkbox-container label { display:block; position:relative; left:-34px; width:98px; cursor:pointer; z-index:2; color: inherit; margin-left: 0; margin-bottom: 0 !important; @include transition(left .2s ease-in-out); } .sf-checkbox-container.checked label { left: 0px; @include transition(left .2s ease-in-out); } .sf-checkbox-container input { /*left:-5000px; position:absolute;*/ display:none; } .sf-checkbox-container span { float:left; display:block; font-size:12px; font-weight:bold; height:25px; line-height:25px; position:relative; text-align:center; width:34px; z-index:3; font-family: Helvetica; } .sf-checkbox-container.rounded label span.on { background: transparent; } .sf-checkbox-container label span.on { //background-color: inherit; background-color: #0074CC; } .sf-checkbox-container.checked label span.on { background-color: #0074CC; background-image: -moz-linear-gradient(center top , #0088CC, #0055CC); color: inherit; margin-right: -5px; padding-right: 5px; text-shadow: inherit; @include border-top-left-radius(2px); @include border-bottom-left-radius(2px); } .sf-checkbox-container.rounded.checked label span.on { @include border-top-left-radius(50px); @include border-bottom-left-radius(50px); } .sf-checkbox-container span.toggle { width: 26px; margin: 0px; z-index: 4; @include box-shadow(rgba(255,255,255,0.7) 0px 1px 0px inset, #222 0 0 3px); @include border-radius(2px); background: #fff; background: -webkit-linear-gradient(bottom, #fcfcfc 50%, #cfcfcf); background: -moz-linear-gradient(bottom, #fcfcfc 50%, #cfcfcf); background: linear-gradient(bottom, #fcfcfc 50%, #cfcfcf); } .sf-checkbox-container.rounded span.toggle { @include border-radius(50px); } .sf-checkbox-container span.off { background-color: #ddd; background: -moz-linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2); background: -webkit-linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2); background: linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2); color: #666; float: left; margin-left: -10px; padding-left: 10px; text-shadow: white 0px 1px 0px; @include border-top-right-radius(2px); @include border-bottom-right-radius(2px); } .sf-checkbox-container.rounded span.off { @include border-top-right-radius(50px); @include border-bottom-right-radius(50px); } .sf-checkbox-container.rounded.checked label span.off { //background: transparent; background-color: #0074CC; }