|
|
/** * Spinners * -------------------------------------------------- */
.spinner { svg { width: $spinner-width; height: $spinner-height; }
stroke: $spinner-default-stroke; fill: $spinner-default-fill;
&.spinner-light { stroke: $spinner-light-stroke; fill: $spinner-light-fill; } &.spinner-stable { stroke: $spinner-stable-stroke; fill: $spinner-stable-fill; } &.spinner-positive { stroke: $spinner-positive-stroke; fill: $spinner-positive-fill; } &.spinner-calm { stroke: $spinner-calm-stroke; fill: $spinner-calm-fill; } &.spinner-balanced { stroke: $spinner-balanced-stroke; fill: $spinner-balanced-fill; } &.spinner-assertive { stroke: $spinner-assertive-stroke; fill: $spinner-assertive-fill; } &.spinner-energized { stroke: $spinner-energized-stroke; fill: $spinner-energized-fill; } &.spinner-royal { stroke: $spinner-royal-stroke; fill: $spinner-royal-fill; } &.spinner-dark { stroke: $spinner-dark-stroke; fill: $spinner-dark-fill; } }
.spinner-android { stroke: #4b8bf4; }
.spinner-ios, .spinner-ios-small { stroke: #69717d; }
.spinner-spiral { .stop1 { stop-color: $spinner-light-fill; stop-opacity: 0; }
&.spinner-light { .stop1 { stop-color: $spinner-default-fill; } .stop2 { stop-color: $spinner-light-fill; } } &.spinner-stable .stop2 { stop-color: $spinner-stable-fill; } &.spinner-positive .stop2 { stop-color: $spinner-positive-fill; } &.spinner-calm .stop2 { stop-color: $spinner-calm-fill; } &.spinner-balanced .stop2 { stop-color: $spinner-balanced-fill; } &.spinner-assertive .stop2 { stop-color: $spinner-assertive-fill; } &.spinner-energized .stop2 { stop-color: $spinner-energized-fill; } &.spinner-royal .stop2 { stop-color: $spinner-royal-fill; } &.spinner-dark .stop2 { stop-color: $spinner-dark-fill; } }
|