@mixin base-slider($primaryStyleName : v-slider) { .#{$primaryStyleName} { margin: 5px 0; } .#{$primaryStyleName}-base { /* changing the borders will require adjustments to ISlider.java */ height: 2px; border-top: 1px solid #ddd; background: #eee; border-left: 1px solid #ddd; border-right: 1px solid #eee; } .#{$primaryStyleName}-handle { background: #aaa; width: 12px; height: 12px; margin-top: -5px; font-size: 0; -ms-touch-action: none; touch-action: none; } .#{$primaryStyleName}-vertical { width: 2px; height: auto; margin: 0 5px; border: none; border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } .#{$primaryStyleName}-vertical .#{$primaryStyleName}-base { width: 2px; border-bottom: 1px solid #eee; border-right: none; } .#{$primaryStyleName}-vertical .#{$primaryStyleName}-handle { width: 12px; height: 12px; font-size: 0; margin-left: -5px; } .#{$primaryStyleName}-feedback { padding: 2px 5px; background: #444; color: #fff; font-size: 11px; line-height: 13px; font-weight: bold; font-family: Arial, Helvetica, sans-serif; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; margin: -2px 0 0 2px; text-shadow: 0 1px 0 #000; } /* Disabled by default .#{$primaryStyleName}-error .#{$primaryStyleName}-base { background: #FFE0E0; } */ /* Disabled by default .#{$primaryStyleName}-required .#{$primaryStyleName}-base { background: #FFE0E0; } */ }