|
/* Colored buttons button states */ |
|
@mixin button($offset) { |
|
& { background-position: 0 -#{$offset}px; } |
|
&:after { background-position: -480px -#{$offset}px; } |
|
&>.after { background-position: -480px -#{$offset}px; } |
|
|
|
&:hover { background-position: -500px -#{$offset}px; } |
|
&:hover:after { background-position: -980px -#{$offset}px; } |
|
&:hover>.after { background-position: -980px -#{$offset}px; } |
|
|
|
&:active { background-position: -1000px -#{$offset}px; } |
|
&:active:after { background-position: -1480px -#{$offset}px; } |
|
&:active>.after { background-position: -1480px -#{$offset}px; } |
|
|
|
&.button-start:after { background-position: -480px -#{$offset+34}px; } |
|
&.button-start:hover:after { background-position: -980px -#{$offset+34}px; } |
|
&.button-start:active:after { background-position: -1480px -#{$offset+34}px; } |
|
|
|
&.button-start>.after { background-position: -480px -#{$offset+34}px; } |
|
&.button-start:hover>.after { background-position: -980px -#{$offset+34}px; } |
|
&.button-start:active>.after { background-position: -1480px -#{$offset+34}px; } |
|
|
|
&.button-end { background-position: 0 -#{$offset+34}px; } |
|
&.button-end:hover { background-position: -500px -#{$offset+34}px; } |
|
&.button-end:active { background-position: -1000px -#{$offset+34}px; } |
|
} |
|
|
|
.button { @include button(0); } |
|
.button.button-tell { @include button(68); } |
|
.button.button-report { @include button(136); } |
|
.button.button-inform { @include button(204); } |
|
.button.button-direct { @include button(272); } |
|
.button.button-argue { @include button(340); } |
|
.button.button-refer { @include button(408); } |
|
.button.button-sampletasks { @include button(476); } |
|
.button.button-languageboxes { @include button(544); } |
