@mixin reindeer-button-standard($primaryStyleName : v-button) { .#{$primaryStyleName}:focus { background-image: url(img/left-focus.png); /** sprite-ref: buttons */ outline: none; } .#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap { background-image: url(img/right-focus.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } .#{$primaryStyleName}:active, .#{$primaryStyleName}.v-pressed { background-image: url(img/left-pressed.png); /** sprite-ref: buttons */ outline: none; } .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap, .#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/right-pressed.png); /** sprite-ref: buttons; sprite-alignment: right */ outline: none; } .#{$primaryStyleName}, .v-disabled.#{$primaryStyleName} { height: 26px; padding: 0 0 0 6px; background-color: transparent; background-repeat: no-repeat; background-image: url(img/left.png); /** sprite-ref: buttons */ border: none; cursor: default; } .#{$primaryStyleName}-wrap, .v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap { display: block; height: 22px; padding: 4px 15px 0 9px; background-color: transparent; background-repeat: no-repeat; background-position: right top; background-image: url(img/right.png); /** sprite-ref: buttons; sprite-alignment: right */ } .#{$primaryStyleName}-caption { color: #222; text-shadow: #fff 0 1px 0; font-weight: bold; font-size: 11px; line-height: 16px; } /************************** * Black style **************************/ .black .#{$primaryStyleName}:focus { background-image: url(img/black/left-focus.png); /** sprite-ref: black-buttons */ } .black .#{$primaryStyleName}:focus .#{$primaryStyleName}-wrap { background-image: url(img/black/right-focus.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } .black .#{$primaryStyleName}:active, .black .#{$primaryStyleName}.v-pressed { background-image: url(img/black/left-pressed.png); /** sprite-ref: black-buttons */ } .black .#{$primaryStyleName}:active .#{$primaryStyleName}-wrap, .black .#{$primaryStyleName}.v-pressed .#{$primaryStyleName}-wrap { background-image: url(img/black/right-pressed.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } .black .#{$primaryStyleName}, .black .v-disabled.#{$primaryStyleName} { background-image: url(img/black/left.png); /** sprite-ref: black-buttons */ } .black .#{$primaryStyleName}-wrap, .black .v-disabled.#{$primaryStyleName} .#{$primaryStyleName}-wrap { background-image: url(img/black/right.png); /** sprite-ref: black-buttons; sprite-alignment: right */ } .black .#{$primaryStyleName}-caption { color: #c9ccce; text-shadow: #121314 0 -1px 0; } }