@mixin base-slider($name : v-slider) { .#{$name} { margin: 5px 0; } .#{$name}-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; } .#{$name}-handle { background: #aaa; width: 12px; height: 12px; margin-top: -5px; font-size: 0; } .#{$name}-vertical { width: 2px; height: auto; margin: 0 5px; border: none; border-left: 1px solid #cccfd0; border-right: 1px solid #cccfd0; } .#{$name}-vertical .#{$name}-base { width: 2px; border-bottom: 1px solid #eee; border-right: none; } .#{$name}-vertical .#{$name}-handle { width: 12px; height: 12px; font-size: 0; margin-left: -5px; } .#{$name}-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 .#{$name}-error .#{$name}-base { background: #FFE0E0; } */ /* Disabled by default .#{$name}-required .#{$name}-base { background: #FFE0E0; } */ }