@import "variables.less"; @import "../common/Switch.less"; /* Default Shape */ .mblSwDefaultShape { .mblSwSquareShape-styles; } .mblSwitchBgLeft { background-color: @mbl-switch-bg-left-background-color; height: 14px; margin: auto 4px; top: 50%; bottom: 50%; border-radius: 0 !important; width: 45px !important; z-index: 1; } .mblSwitch { width: 65px; float: right; display: block; clear: right; &:before { content: ''; width: 85%; height: 65%; position: absolute; border: 2px solid @win-contrast-bg-color; margin: auto 0; top: 50%; bottom: 50%; z-index: 2; } &.mblSwitchOn .mblSwitchKnob { left: 45px !important; } & .mblSwitchInner{ width: 100%; } } .mblSwitch[disabled] { & .mblSwitchKnob, & .mblSwitchBgLeft { background-color: @win-disabled-color; } &:before { border-color: @win-disabled-color; } } .mblSwitchText { display: none !important; } .mblSwitchLabel { color: @win-foreground-color; position: relative; float: left; clear: both; margin: 3px 0; } .mblSwitchContainer { width: 100%; min-height: 27px; .default-vertical-margin; }