opensource/galaxy
3
0
Fork 0
mirror of https://github.com/galaxyproject/galaxy.git synced 2026-09-24 16:30:27 +08:00
Code Issues Packages Projects Releases Wiki Activity

Keeping prebuilt sprite sheets for now

Browse Source
This commit is contained in:
Dannon Baker
2018-10-10 16:07:49 -04:00
parent 67735bf7b2
commit abb9be2ead
4 changed files with 1091 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.gitignore
+1 -4
View File
@@ -123,9 +123,6 @@ test/unit/**.log
# Jars
tool-data/shared/jars/
# CSS build artifacts.
sprite-*.scss
# JS, Local node_modules, and bower_components directories
static/maps
static/plugins
@@ -150,4 +147,4 @@ doc/source/dev/schema.rst
*.rej
*~
.idea
.vscode
.vscode
client/galaxy/style/scss/sprite-fugue.scss
+807
View File
@@ -0,0 +1,807 @@
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
}
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$application-dock-270-bw-name: 'application-dock-270-bw';
$application-dock-270-bw-x: 16px;
$application-dock-270-bw-y: 0px;
$application-dock-270-bw-offset-x: -16px;
$application-dock-270-bw-offset-y: 0px;
$application-dock-270-bw-width: 16px;
$application-dock-270-bw-height: 16px;
$application-dock-270-bw-total-width: 144px;
$application-dock-270-bw-total-height: 128px;
$application-dock-270-bw-image: 'sprite-fugue.png';
$application-dock-270-bw: (16px, 0px, -16px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'application-dock-270-bw', );
$application-dock-270-name: 'application-dock-270';
$application-dock-270-x: 48px;
$application-dock-270-y: 80px;
$application-dock-270-offset-x: -48px;
$application-dock-270-offset-y: -80px;
$application-dock-270-width: 16px;
$application-dock-270-height: 16px;
$application-dock-270-total-width: 144px;
$application-dock-270-total-height: 128px;
$application-dock-270-image: 'sprite-fugue.png';
$application-dock-270: (48px, 80px, -48px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'application-dock-270', );
$arrow-000-small-bw-name: 'arrow-000-small-bw';
$arrow-000-small-bw-x: 0px;
$arrow-000-small-bw-y: 16px;
$arrow-000-small-bw-offset-x: 0px;
$arrow-000-small-bw-offset-y: -16px;
$arrow-000-small-bw-width: 16px;
$arrow-000-small-bw-height: 16px;
$arrow-000-small-bw-total-width: 144px;
$arrow-000-small-bw-total-height: 128px;
$arrow-000-small-bw-image: 'sprite-fugue.png';
$arrow-000-small-bw: (0px, 16px, 0px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-000-small-bw', );
$arrow-090-name: 'arrow-090';
$arrow-090-x: 16px;
$arrow-090-y: 16px;
$arrow-090-offset-x: -16px;
$arrow-090-offset-y: -16px;
$arrow-090-width: 16px;
$arrow-090-height: 16px;
$arrow-090-total-width: 144px;
$arrow-090-total-height: 128px;
$arrow-090-image: 'sprite-fugue.png';
$arrow-090: (16px, 16px, -16px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-090', );
$arrow-circle-name: 'arrow-circle';
$arrow-circle-x: 32px;
$arrow-circle-y: 0px;
$arrow-circle-offset-x: -32px;
$arrow-circle-offset-y: 0px;
$arrow-circle-width: 16px;
$arrow-circle-height: 16px;
$arrow-circle-total-width: 144px;
$arrow-circle-total-height: 128px;
$arrow-circle-image: 'sprite-fugue.png';
$arrow-circle: (32px, 0px, -32px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-circle', );
$arrow-resize-090-bw-name: 'arrow-resize-090-bw';
$arrow-resize-090-bw-x: 32px;
$arrow-resize-090-bw-y: 16px;
$arrow-resize-090-bw-offset-x: -32px;
$arrow-resize-090-bw-offset-y: -16px;
$arrow-resize-090-bw-width: 16px;
$arrow-resize-090-bw-height: 16px;
$arrow-resize-090-bw-total-width: 144px;
$arrow-resize-090-bw-total-height: 128px;
$arrow-resize-090-bw-image: 'sprite-fugue.png';
$arrow-resize-090-bw: (32px, 16px, -32px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-resize-090-bw', );
$arrow-resize-090-name: 'arrow-resize-090';
$arrow-resize-090-x: 0px;
$arrow-resize-090-y: 32px;
$arrow-resize-090-offset-x: 0px;
$arrow-resize-090-offset-y: -32px;
$arrow-resize-090-width: 16px;
$arrow-resize-090-height: 16px;
$arrow-resize-090-total-width: 144px;
$arrow-resize-090-total-height: 128px;
$arrow-resize-090-image: 'sprite-fugue.png';
$arrow-resize-090: (0px, 32px, 0px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-resize-090', );
$arrow-split-bw-name: 'arrow-split-bw';
$arrow-split-bw-x: 16px;
$arrow-split-bw-y: 32px;
$arrow-split-bw-offset-x: -16px;
$arrow-split-bw-offset-y: -32px;
$arrow-split-bw-width: 16px;
$arrow-split-bw-height: 16px;
$arrow-split-bw-total-width: 144px;
$arrow-split-bw-total-height: 128px;
$arrow-split-bw-image: 'sprite-fugue.png';
$arrow-split-bw: (16px, 32px, -16px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-split-bw', );
$arrow-split-name: 'arrow-split';
$arrow-split-x: 32px;
$arrow-split-y: 32px;
$arrow-split-offset-x: -32px;
$arrow-split-offset-y: -32px;
$arrow-split-width: 16px;
$arrow-split-height: 16px;
$arrow-split-total-width: 144px;
$arrow-split-total-height: 128px;
$arrow-split-image: 'sprite-fugue.png';
$arrow-split: (32px, 32px, -32px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-split', );
$arrow-transition-270-bw-name: 'arrow-transition-270-bw';
$arrow-transition-270-bw-x: 48px;
$arrow-transition-270-bw-y: 0px;
$arrow-transition-270-bw-offset-x: -48px;
$arrow-transition-270-bw-offset-y: 0px;
$arrow-transition-270-bw-width: 16px;
$arrow-transition-270-bw-height: 16px;
$arrow-transition-270-bw-total-width: 144px;
$arrow-transition-270-bw-total-height: 128px;
$arrow-transition-270-bw-image: 'sprite-fugue.png';
$arrow-transition-270-bw: (48px, 0px, -48px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-transition-270-bw', );
$arrow-transition-bw-name: 'arrow-transition-bw';
$arrow-transition-bw-x: 48px;
$arrow-transition-bw-y: 16px;
$arrow-transition-bw-offset-x: -48px;
$arrow-transition-bw-offset-y: -16px;
$arrow-transition-bw-width: 16px;
$arrow-transition-bw-height: 16px;
$arrow-transition-bw-total-width: 144px;
$arrow-transition-bw-total-height: 128px;
$arrow-transition-bw-image: 'sprite-fugue.png';
$arrow-transition-bw: (48px, 16px, -48px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'arrow-transition-bw', );
$asterisk-small-outline-name: 'asterisk-small-outline';
$asterisk-small-outline-x: 48px;
$asterisk-small-outline-y: 32px;
$asterisk-small-outline-offset-x: -48px;
$asterisk-small-outline-offset-y: -32px;
$asterisk-small-outline-width: 16px;
$asterisk-small-outline-height: 16px;
$asterisk-small-outline-total-width: 144px;
$asterisk-small-outline-total-height: 128px;
$asterisk-small-outline-image: 'sprite-fugue.png';
$asterisk-small-outline: (48px, 32px, -48px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small-outline', );
$asterisk-small-yellow-name: 'asterisk-small-yellow';
$asterisk-small-yellow-x: 0px;
$asterisk-small-yellow-y: 48px;
$asterisk-small-yellow-offset-x: 0px;
$asterisk-small-yellow-offset-y: -48px;
$asterisk-small-yellow-width: 16px;
$asterisk-small-yellow-height: 16px;
$asterisk-small-yellow-total-width: 144px;
$asterisk-small-yellow-total-height: 128px;
$asterisk-small-yellow-image: 'sprite-fugue.png';
$asterisk-small-yellow: (0px, 48px, 0px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small-yellow', );
$asterisk-small-name: 'asterisk-small';
$asterisk-small-x: 16px;
$asterisk-small-y: 48px;
$asterisk-small-offset-x: -16px;
$asterisk-small-offset-y: -48px;
$asterisk-small-width: 16px;
$asterisk-small-height: 16px;
$asterisk-small-total-width: 144px;
$asterisk-small-total-height: 128px;
$asterisk-small-image: 'sprite-fugue.png';
$asterisk-small: (16px, 48px, -16px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'asterisk-small', );
$block-plus-bw-name: 'block--plus-bw';
$block-plus-bw-x: 32px;
$block-plus-bw-y: 48px;
$block-plus-bw-offset-x: -32px;
$block-plus-bw-offset-y: -48px;
$block-plus-bw-width: 16px;
$block-plus-bw-height: 16px;
$block-plus-bw-total-width: 144px;
$block-plus-bw-total-height: 128px;
$block-plus-bw-image: 'sprite-fugue.png';
$block-plus-bw: (32px, 48px, -32px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'block--plus-bw', );
$block-plus-name: 'block--plus';
$block-plus-x: 48px;
$block-plus-y: 48px;
$block-plus-offset-x: -48px;
$block-plus-offset-y: -48px;
$block-plus-width: 16px;
$block-plus-height: 16px;
$block-plus-total-width: 144px;
$block-plus-total-height: 128px;
$block-plus-image: 'sprite-fugue.png';
$block-plus: (48px, 48px, -48px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'block--plus', );
$bookmarks-bw-name: 'bookmarks-bw';
$bookmarks-bw-x: 64px;
$bookmarks-bw-y: 0px;
$bookmarks-bw-offset-x: -64px;
$bookmarks-bw-offset-y: 0px;
$bookmarks-bw-width: 16px;
$bookmarks-bw-height: 16px;
$bookmarks-bw-total-width: 144px;
$bookmarks-bw-total-height: 128px;
$bookmarks-bw-image: 'sprite-fugue.png';
$bookmarks-bw: (64px, 0px, -64px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bookmarks-bw', );
$bookmarks-name: 'bookmarks';
$bookmarks-x: 64px;
$bookmarks-y: 16px;
$bookmarks-offset-x: -64px;
$bookmarks-offset-y: -16px;
$bookmarks-width: 16px;
$bookmarks-height: 16px;
$bookmarks-total-width: 144px;
$bookmarks-total-height: 128px;
$bookmarks-image: 'sprite-fugue.png';
$bookmarks: (64px, 16px, -64px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bookmarks', );
$bug-name: 'bug';
$bug-x: 64px;
$bug-y: 32px;
$bug-offset-x: -64px;
$bug-offset-y: -32px;
$bug-width: 16px;
$bug-height: 16px;
$bug-total-width: 144px;
$bug-total-height: 128px;
$bug-image: 'sprite-fugue.png';
$bug: (64px, 32px, -64px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'bug', );
$chart-name: 'chart';
$chart-x: 64px;
$chart-y: 48px;
$chart-offset-x: -64px;
$chart-offset-y: -48px;
$chart-width: 16px;
$chart-height: 16px;
$chart-total-width: 144px;
$chart-total-height: 128px;
$chart-image: 'sprite-fugue.png';
$chart: (64px, 48px, -64px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chart', );
$chevron-expand-bw-name: 'chevron-expand-bw';
$chevron-expand-bw-x: 0px;
$chevron-expand-bw-y: 64px;
$chevron-expand-bw-offset-x: 0px;
$chevron-expand-bw-offset-y: -64px;
$chevron-expand-bw-width: 16px;
$chevron-expand-bw-height: 16px;
$chevron-expand-bw-total-width: 144px;
$chevron-expand-bw-total-height: 128px;
$chevron-expand-bw-image: 'sprite-fugue.png';
$chevron-expand-bw: (0px, 64px, 0px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron-expand-bw', );
$chevron-expand-name: 'chevron-expand';
$chevron-expand-x: 16px;
$chevron-expand-y: 64px;
$chevron-expand-offset-x: -16px;
$chevron-expand-offset-y: -64px;
$chevron-expand-width: 16px;
$chevron-expand-height: 16px;
$chevron-expand-total-width: 144px;
$chevron-expand-total-height: 128px;
$chevron-expand-image: 'sprite-fugue.png';
$chevron-expand: (16px, 64px, -16px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron-expand', );
$chevron-name: 'chevron';
$chevron-x: 32px;
$chevron-y: 64px;
$chevron-offset-x: -32px;
$chevron-offset-y: -64px;
$chevron-width: 16px;
$chevron-height: 16px;
$chevron-total-width: 144px;
$chevron-total-height: 128px;
$chevron-image: 'sprite-fugue.png';
$chevron: (32px, 64px, -32px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'chevron', );
$control-270-name: 'control-270';
$control-270-x: 48px;
$control-270-y: 64px;
$control-270-offset-x: -48px;
$control-270-offset-y: -64px;
$control-270-width: 16px;
$control-270-height: 16px;
$control-270-total-width: 144px;
$control-270-total-height: 128px;
$control-270-image: 'sprite-fugue.png';
$control-270: (48px, 64px, -48px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'control-270', );
$cross-button-name: 'cross-button';
$cross-button-x: 64px;
$cross-button-y: 64px;
$cross-button-offset-x: -64px;
$cross-button-offset-y: -64px;
$cross-button-width: 16px;
$cross-button-height: 16px;
$cross-button-total-width: 144px;
$cross-button-total-height: 128px;
$cross-button-image: 'sprite-fugue.png';
$cross-button: (64px, 64px, -64px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-button', );
$cross-circle-bw-name: 'cross-circle-bw';
$cross-circle-bw-x: 80px;
$cross-circle-bw-y: 0px;
$cross-circle-bw-offset-x: -80px;
$cross-circle-bw-offset-y: 0px;
$cross-circle-bw-width: 16px;
$cross-circle-bw-height: 16px;
$cross-circle-bw-total-width: 144px;
$cross-circle-bw-total-height: 128px;
$cross-circle-bw-image: 'sprite-fugue.png';
$cross-circle-bw: (80px, 0px, -80px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-circle-bw', );
$cross-circle-name: 'cross-circle';
$cross-circle-x: 80px;
$cross-circle-y: 16px;
$cross-circle-offset-x: -80px;
$cross-circle-offset-y: -16px;
$cross-circle-width: 16px;
$cross-circle-height: 16px;
$cross-circle-total-width: 144px;
$cross-circle-total-height: 128px;
$cross-circle-image: 'sprite-fugue.png';
$cross-circle: (80px, 16px, -80px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-circle', );
$cross-small-bw-name: 'cross-small-bw';
$cross-small-bw-x: 80px;
$cross-small-bw-y: 32px;
$cross-small-bw-offset-x: -80px;
$cross-small-bw-offset-y: -32px;
$cross-small-bw-width: 16px;
$cross-small-bw-height: 16px;
$cross-small-bw-total-width: 144px;
$cross-small-bw-total-height: 128px;
$cross-small-bw-image: 'sprite-fugue.png';
$cross-small-bw: (80px, 32px, -80px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross-small-bw', );
$cross-name: 'cross';
$cross-x: 80px;
$cross-y: 48px;
$cross-offset-x: -80px;
$cross-offset-y: -48px;
$cross-width: 16px;
$cross-height: 16px;
$cross-total-width: 144px;
$cross-total-height: 128px;
$cross-image: 'sprite-fugue.png';
$cross: (80px, 48px, -80px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'cross', );
$disk-arrow-bw-name: 'disk--arrow-bw';
$disk-arrow-bw-x: 80px;
$disk-arrow-bw-y: 64px;
$disk-arrow-bw-offset-x: -80px;
$disk-arrow-bw-offset-y: -64px;
$disk-arrow-bw-width: 16px;
$disk-arrow-bw-height: 16px;
$disk-arrow-bw-total-width: 144px;
$disk-arrow-bw-total-height: 128px;
$disk-arrow-bw-image: 'sprite-fugue.png';
$disk-arrow-bw: (80px, 64px, -80px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk--arrow-bw', );
$disk-arrow-name: 'disk--arrow';
$disk-arrow-x: 0px;
$disk-arrow-y: 80px;
$disk-arrow-offset-x: 0px;
$disk-arrow-offset-y: -80px;
$disk-arrow-width: 16px;
$disk-arrow-height: 16px;
$disk-arrow-total-width: 144px;
$disk-arrow-total-height: 128px;
$disk-arrow-image: 'sprite-fugue.png';
$disk-arrow: (0px, 80px, 0px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk--arrow', );
$disk-name: 'disk';
$disk-x: 16px;
$disk-y: 80px;
$disk-offset-x: -16px;
$disk-offset-y: -80px;
$disk-width: 16px;
$disk-height: 16px;
$disk-total-width: 144px;
$disk-total-height: 128px;
$disk-image: 'sprite-fugue.png';
$disk: (16px, 80px, -16px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'disk', );
$exclamation-name: 'exclamation';
$exclamation-x: 32px;
$exclamation-y: 80px;
$exclamation-offset-x: -32px;
$exclamation-offset-y: -80px;
$exclamation-width: 16px;
$exclamation-height: 16px;
$exclamation-total-width: 144px;
$exclamation-total-height: 128px;
$exclamation-image: 'sprite-fugue.png';
$exclamation: (32px, 80px, -32px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'exclamation', );
$external-name: 'external';
$external-x: 0px;
$external-y: 0px;
$external-offset-x: 0px;
$external-offset-y: 0px;
$external-width: 16px;
$external-height: 16px;
$external-total-width: 144px;
$external-total-height: 128px;
$external-image: 'sprite-fugue.png';
$external: (0px, 0px, 0px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'external', );
$eye-name: 'eye';
$eye-x: 64px;
$eye-y: 80px;
$eye-offset-x: -64px;
$eye-offset-y: -80px;
$eye-width: 16px;
$eye-height: 16px;
$eye-total-width: 144px;
$eye-total-height: 128px;
$eye-image: 'sprite-fugue.png';
$eye: (64px, 80px, -64px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'eye', );
$gear-bw-name: 'gear-bw';
$gear-bw-x: 80px;
$gear-bw-y: 80px;
$gear-bw-offset-x: -80px;
$gear-bw-offset-y: -80px;
$gear-bw-width: 16px;
$gear-bw-height: 16px;
$gear-bw-total-width: 144px;
$gear-bw-total-height: 128px;
$gear-bw-image: 'sprite-fugue.png';
$gear-bw: (80px, 80px, -80px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'gear-bw', );
$gear-name: 'gear';
$gear-x: 96px;
$gear-y: 0px;
$gear-offset-x: -96px;
$gear-offset-y: 0px;
$gear-width: 16px;
$gear-height: 16px;
$gear-total-width: 144px;
$gear-total-height: 128px;
$gear-image: 'sprite-fugue.png';
$gear: (96px, 0px, -96px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'gear', );
$globe-bw-name: 'globe-bw';
$globe-bw-x: 96px;
$globe-bw-y: 16px;
$globe-bw-offset-x: -96px;
$globe-bw-offset-y: -16px;
$globe-bw-width: 16px;
$globe-bw-height: 16px;
$globe-bw-total-width: 144px;
$globe-bw-total-height: 128px;
$globe-bw-image: 'sprite-fugue.png';
$globe-bw: (96px, 16px, -96px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'globe-bw', );
$globe-name: 'globe';
$globe-x: 96px;
$globe-y: 32px;
$globe-offset-x: -96px;
$globe-offset-y: -32px;
$globe-width: 16px;
$globe-height: 16px;
$globe-total-width: 144px;
$globe-total-height: 128px;
$globe-image: 'sprite-fugue.png';
$globe: (96px, 32px, -96px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'globe', );
$hammer-bw-name: 'hammer-bw';
$hammer-bw-x: 96px;
$hammer-bw-y: 48px;
$hammer-bw-offset-x: -96px;
$hammer-bw-offset-y: -48px;
$hammer-bw-width: 16px;
$hammer-bw-height: 16px;
$hammer-bw-total-width: 144px;
$hammer-bw-total-height: 128px;
$hammer-bw-image: 'sprite-fugue.png';
$hammer-bw: (96px, 48px, -96px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'hammer-bw', );
$hammer-name: 'hammer';
$hammer-x: 96px;
$hammer-y: 64px;
$hammer-offset-x: -96px;
$hammer-offset-y: -64px;
$hammer-width: 16px;
$hammer-height: 16px;
$hammer-total-width: 144px;
$hammer-total-height: 128px;
$hammer-image: 'sprite-fugue.png';
$hammer: (96px, 64px, -96px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'hammer', );
$information-white-name: 'information-white';
$information-white-x: 96px;
$information-white-y: 80px;
$information-white-offset-x: -96px;
$information-white-offset-y: -80px;
$information-white-width: 16px;
$information-white-height: 16px;
$information-white-total-width: 144px;
$information-white-total-height: 128px;
$information-white-image: 'sprite-fugue.png';
$information-white: (96px, 80px, -96px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'information-white', );
$layer-transparent-bw-name: 'layer-transparent-bw';
$layer-transparent-bw-x: 0px;
$layer-transparent-bw-y: 96px;
$layer-transparent-bw-offset-x: 0px;
$layer-transparent-bw-offset-y: -96px;
$layer-transparent-bw-width: 16px;
$layer-transparent-bw-height: 16px;
$layer-transparent-bw-total-width: 144px;
$layer-transparent-bw-total-height: 128px;
$layer-transparent-bw-image: 'sprite-fugue.png';
$layer-transparent-bw: (0px, 96px, 0px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layer-transparent-bw', );
$layer-transparent-name: 'layer-transparent';
$layer-transparent-x: 16px;
$layer-transparent-y: 96px;
$layer-transparent-offset-x: -16px;
$layer-transparent-offset-y: -96px;
$layer-transparent-width: 16px;
$layer-transparent-height: 16px;
$layer-transparent-total-width: 144px;
$layer-transparent-total-height: 128px;
$layer-transparent-image: 'sprite-fugue.png';
$layer-transparent: (16px, 96px, -16px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layer-transparent', );
$layers-stack-bw-name: 'layers-stack-bw';
$layers-stack-bw-x: 32px;
$layers-stack-bw-y: 96px;
$layers-stack-bw-offset-x: -32px;
$layers-stack-bw-offset-y: -96px;
$layers-stack-bw-width: 16px;
$layers-stack-bw-height: 16px;
$layers-stack-bw-total-width: 144px;
$layers-stack-bw-total-height: 128px;
$layers-stack-bw-image: 'sprite-fugue.png';
$layers-stack-bw: (32px, 96px, -32px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layers-stack-bw', );
$layers-stack-name: 'layers-stack';
$layers-stack-x: 48px;
$layers-stack-y: 96px;
$layers-stack-offset-x: -48px;
$layers-stack-offset-y: -96px;
$layers-stack-width: 16px;
$layers-stack-height: 16px;
$layers-stack-total-width: 144px;
$layers-stack-total-height: 128px;
$layers-stack-image: 'sprite-fugue.png';
$layers-stack: (48px, 96px, -48px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'layers-stack', );
$magnifier-left-name: 'magnifier-left';
$magnifier-left-x: 64px;
$magnifier-left-y: 96px;
$magnifier-left-offset-x: -64px;
$magnifier-left-offset-y: -96px;
$magnifier-left-width: 16px;
$magnifier-left-height: 16px;
$magnifier-left-total-width: 144px;
$magnifier-left-total-height: 128px;
$magnifier-left-image: 'sprite-fugue.png';
$magnifier-left: (64px, 96px, -64px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-left', );
$magnifier-zoom-out-name: 'magnifier-zoom-out';
$magnifier-zoom-out-x: 80px;
$magnifier-zoom-out-y: 96px;
$magnifier-zoom-out-offset-x: -80px;
$magnifier-zoom-out-offset-y: -96px;
$magnifier-zoom-out-width: 16px;
$magnifier-zoom-out-height: 16px;
$magnifier-zoom-out-total-width: 144px;
$magnifier-zoom-out-total-height: 128px;
$magnifier-zoom-out-image: 'sprite-fugue.png';
$magnifier-zoom-out: (80px, 96px, -80px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-zoom-out', );
$magnifier-zoom-name: 'magnifier-zoom';
$magnifier-zoom-x: 96px;
$magnifier-zoom-y: 96px;
$magnifier-zoom-offset-x: -96px;
$magnifier-zoom-offset-y: -96px;
$magnifier-zoom-width: 16px;
$magnifier-zoom-height: 16px;
$magnifier-zoom-total-width: 144px;
$magnifier-zoom-total-height: 128px;
$magnifier-zoom-image: 'sprite-fugue.png';
$magnifier-zoom: (96px, 96px, -96px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'magnifier-zoom', );
$navigation-name: 'navigation';
$navigation-x: 112px;
$navigation-y: 0px;
$navigation-offset-x: -112px;
$navigation-offset-y: 0px;
$navigation-width: 16px;
$navigation-height: 16px;
$navigation-total-width: 144px;
$navigation-total-height: 128px;
$navigation-image: 'sprite-fugue.png';
$navigation: (112px, 0px, -112px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'navigation', );
$pencil-small-name: 'pencil-small';
$pencil-small-x: 112px;
$pencil-small-y: 16px;
$pencil-small-offset-x: -112px;
$pencil-small-offset-y: -16px;
$pencil-small-width: 16px;
$pencil-small-height: 16px;
$pencil-small-total-width: 144px;
$pencil-small-total-height: 128px;
$pencil-small-image: 'sprite-fugue.png';
$pencil-small: (112px, 16px, -112px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'pencil-small', );
$pencil-name: 'pencil';
$pencil-x: 112px;
$pencil-y: 32px;
$pencil-offset-x: -112px;
$pencil-offset-y: -32px;
$pencil-width: 16px;
$pencil-height: 16px;
$pencil-total-width: 144px;
$pencil-total-height: 128px;
$pencil-image: 'sprite-fugue.png';
$pencil: (112px, 32px, -112px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'pencil', );
$plus-button-bw-name: 'plus-button-bw';
$plus-button-bw-x: 112px;
$plus-button-bw-y: 48px;
$plus-button-bw-offset-x: -112px;
$plus-button-bw-offset-y: -48px;
$plus-button-bw-width: 16px;
$plus-button-bw-height: 16px;
$plus-button-bw-total-width: 144px;
$plus-button-bw-total-height: 128px;
$plus-button-bw-image: 'sprite-fugue.png';
$plus-button-bw: (112px, 48px, -112px, -48px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-button-bw', );
$plus-button-name: 'plus-button';
$plus-button-x: 112px;
$plus-button-y: 64px;
$plus-button-offset-x: -112px;
$plus-button-offset-y: -64px;
$plus-button-width: 16px;
$plus-button-height: 16px;
$plus-button-total-width: 144px;
$plus-button-total-height: 128px;
$plus-button-image: 'sprite-fugue.png';
$plus-button: (112px, 64px, -112px, -64px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-button', );
$plus-circle-name: 'plus-circle';
$plus-circle-x: 112px;
$plus-circle-y: 80px;
$plus-circle-offset-x: -112px;
$plus-circle-offset-y: -80px;
$plus-circle-width: 16px;
$plus-circle-height: 16px;
$plus-circle-total-width: 144px;
$plus-circle-total-height: 128px;
$plus-circle-image: 'sprite-fugue.png';
$plus-circle: (112px, 80px, -112px, -80px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'plus-circle', );
$sticky-note-text-name: 'sticky-note-text';
$sticky-note-text-x: 112px;
$sticky-note-text-y: 96px;
$sticky-note-text-offset-x: -112px;
$sticky-note-text-offset-y: -96px;
$sticky-note-text-width: 16px;
$sticky-note-text-height: 16px;
$sticky-note-text-total-width: 144px;
$sticky-note-text-total-height: 128px;
$sticky-note-text-image: 'sprite-fugue.png';
$sticky-note-text: (112px, 96px, -112px, -96px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'sticky-note-text', );
$tag-plus-name: 'tag--plus';
$tag-plus-x: 0px;
$tag-plus-y: 112px;
$tag-plus-offset-x: 0px;
$tag-plus-offset-y: -112px;
$tag-plus-width: 16px;
$tag-plus-height: 16px;
$tag-plus-total-width: 144px;
$tag-plus-total-height: 128px;
$tag-plus-image: 'sprite-fugue.png';
$tag-plus: (0px, 112px, 0px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tag--plus', );
$tag-label-name: 'tag-label';
$tag-label-x: 16px;
$tag-label-y: 112px;
$tag-label-offset-x: -16px;
$tag-label-offset-y: -112px;
$tag-label-width: 16px;
$tag-label-height: 16px;
$tag-label-total-width: 144px;
$tag-label-total-height: 128px;
$tag-label-image: 'sprite-fugue.png';
$tag-label: (16px, 112px, -16px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tag-label', );
$tags-name: 'tags';
$tags-x: 32px;
$tags-y: 112px;
$tags-offset-x: -32px;
$tags-offset-y: -112px;
$tags-width: 16px;
$tags-height: 16px;
$tags-total-width: 144px;
$tags-total-height: 128px;
$tags-image: 'sprite-fugue.png';
$tags: (32px, 112px, -32px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'tags', );
$toggle-bw-name: 'toggle-bw';
$toggle-bw-x: 48px;
$toggle-bw-y: 112px;
$toggle-bw-offset-x: -48px;
$toggle-bw-offset-y: -112px;
$toggle-bw-width: 16px;
$toggle-bw-height: 16px;
$toggle-bw-total-width: 144px;
$toggle-bw-total-height: 128px;
$toggle-bw-image: 'sprite-fugue.png';
$toggle-bw: (48px, 112px, -48px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-bw', );
$toggle-expand-bw-name: 'toggle-expand-bw';
$toggle-expand-bw-x: 64px;
$toggle-expand-bw-y: 112px;
$toggle-expand-bw-offset-x: -64px;
$toggle-expand-bw-offset-y: -112px;
$toggle-expand-bw-width: 16px;
$toggle-expand-bw-height: 16px;
$toggle-expand-bw-total-width: 144px;
$toggle-expand-bw-total-height: 128px;
$toggle-expand-bw-image: 'sprite-fugue.png';
$toggle-expand-bw: (64px, 112px, -64px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-expand-bw', );
$toggle-expand-name: 'toggle-expand';
$toggle-expand-x: 80px;
$toggle-expand-y: 112px;
$toggle-expand-offset-x: -80px;
$toggle-expand-offset-y: -112px;
$toggle-expand-width: 16px;
$toggle-expand-height: 16px;
$toggle-expand-total-width: 144px;
$toggle-expand-total-height: 128px;
$toggle-expand-image: 'sprite-fugue.png';
$toggle-expand: (80px, 112px, -80px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle-expand', );
$toggle-name: 'toggle';
$toggle-x: 96px;
$toggle-y: 112px;
$toggle-offset-x: -96px;
$toggle-offset-y: -112px;
$toggle-width: 16px;
$toggle-height: 16px;
$toggle-total-width: 144px;
$toggle-total-height: 128px;
$toggle-image: 'sprite-fugue.png';
$toggle: (96px, 112px, -96px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toggle', );
$toolbox-bw-name: 'toolbox-bw';
$toolbox-bw-x: 112px;
$toolbox-bw-y: 112px;
$toolbox-bw-offset-x: -112px;
$toolbox-bw-offset-y: -112px;
$toolbox-bw-width: 16px;
$toolbox-bw-height: 16px;
$toolbox-bw-total-width: 144px;
$toolbox-bw-total-height: 128px;
$toolbox-bw-image: 'sprite-fugue.png';
$toolbox-bw: (112px, 112px, -112px, -112px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toolbox-bw', );
$toolbox-name: 'toolbox';
$toolbox-x: 128px;
$toolbox-y: 0px;
$toolbox-offset-x: -128px;
$toolbox-offset-y: 0px;
$toolbox-width: 16px;
$toolbox-height: 16px;
$toolbox-total-width: 144px;
$toolbox-total-height: 128px;
$toolbox-image: 'sprite-fugue.png';
$toolbox: (128px, 0px, -128px, 0px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'toolbox', );
$ui-slider-050-bw-name: 'ui-slider-050-bw';
$ui-slider-050-bw-x: 128px;
$ui-slider-050-bw-y: 16px;
$ui-slider-050-bw-offset-x: -128px;
$ui-slider-050-bw-offset-y: -16px;
$ui-slider-050-bw-width: 16px;
$ui-slider-050-bw-height: 16px;
$ui-slider-050-bw-total-width: 144px;
$ui-slider-050-bw-total-height: 128px;
$ui-slider-050-bw-image: 'sprite-fugue.png';
$ui-slider-050-bw: (128px, 16px, -128px, -16px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'ui-slider-050-bw', );
$ui-slider-050-name: 'ui-slider-050';
$ui-slider-050-x: 128px;
$ui-slider-050-y: 32px;
$ui-slider-050-offset-x: -128px;
$ui-slider-050-offset-y: -32px;
$ui-slider-050-width: 16px;
$ui-slider-050-height: 16px;
$ui-slider-050-total-width: 144px;
$ui-slider-050-total-height: 128px;
$ui-slider-050-image: 'sprite-fugue.png';
$ui-slider-050: (128px, 32px, -128px, -32px, 16px, 16px, 144px, 128px, 'sprite-fugue.png', 'ui-slider-050', );
$spritesheet-width: 144px;
$spritesheet-height: 128px;
$spritesheet-image: 'sprite-fugue.png';
$spritesheet-sprites: ($application-dock-270-bw, $application-dock-270, $arrow-000-small-bw, $arrow-090, $arrow-circle, $arrow-resize-090-bw, $arrow-resize-090, $arrow-split-bw, $arrow-split, $arrow-transition-270-bw, $arrow-transition-bw, $asterisk-small-outline, $asterisk-small-yellow, $asterisk-small, $block-plus-bw, $block-plus, $bookmarks-bw, $bookmarks, $bug, $chart, $chevron-expand-bw, $chevron-expand, $chevron, $control-270, $cross-button, $cross-circle-bw, $cross-circle, $cross-small-bw, $cross, $disk-arrow-bw, $disk-arrow, $disk, $exclamation, $external, $eye, $gear-bw, $gear, $globe-bw, $globe, $hammer-bw, $hammer, $information-white, $layer-transparent-bw, $layer-transparent, $layers-stack-bw, $layers-stack, $magnifier-left, $magnifier-zoom-out, $magnifier-zoom, $navigation, $pencil-small, $pencil, $plus-button-bw, $plus-button, $plus-circle, $sticky-note-text, $tag-plus, $tag-label, $tags, $toggle-bw, $toggle-expand-bw, $toggle-expand, $toggle, $toolbox-bw, $toolbox, $ui-slider-050-bw, $ui-slider-050, );
$spritesheet: (144px, 128px, 'sprite-fugue.png', $spritesheet-sprites, );
/*
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
}
.icon-email {
@include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
/*
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}
client/galaxy/style/scss/sprite-history-buttons.scss
+169
View File
@@ -0,0 +1,169 @@
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
}
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$delete-icon-name: 'delete_icon';
$delete-icon-x: 0px;
$delete-icon-y: 0px;
$delete-icon-offset-x: 0px;
$delete-icon-offset-y: 0px;
$delete-icon-width: 16px;
$delete-icon-height: 16px;
$delete-icon-total-width: 48px;
$delete-icon-total-height: 48px;
$delete-icon-image: 'sprite-history-buttons.png';
$delete-icon: (0px, 0px, 0px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon', );
$delete-icon-dark-name: 'delete_icon_dark';
$delete-icon-dark-x: 16px;
$delete-icon-dark-y: 0px;
$delete-icon-dark-offset-x: -16px;
$delete-icon-dark-offset-y: 0px;
$delete-icon-dark-width: 16px;
$delete-icon-dark-height: 16px;
$delete-icon-dark-total-width: 48px;
$delete-icon-dark-total-height: 48px;
$delete-icon-dark-image: 'sprite-history-buttons.png';
$delete-icon-dark: (16px, 0px, -16px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon_dark', );
$delete-icon-grey-name: 'delete_icon_grey';
$delete-icon-grey-x: 0px;
$delete-icon-grey-y: 16px;
$delete-icon-grey-offset-x: 0px;
$delete-icon-grey-offset-y: -16px;
$delete-icon-grey-width: 16px;
$delete-icon-grey-height: 16px;
$delete-icon-grey-total-width: 48px;
$delete-icon-grey-total-height: 48px;
$delete-icon-grey-image: 'sprite-history-buttons.png';
$delete-icon-grey: (0px, 16px, 0px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'delete_icon_grey', );
$eye-icon-name: 'eye_icon';
$eye-icon-x: 16px;
$eye-icon-y: 16px;
$eye-icon-offset-x: -16px;
$eye-icon-offset-y: -16px;
$eye-icon-width: 16px;
$eye-icon-height: 16px;
$eye-icon-total-width: 48px;
$eye-icon-total-height: 48px;
$eye-icon-image: 'sprite-history-buttons.png';
$eye-icon: (16px, 16px, -16px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon', );
$eye-icon-dark-name: 'eye_icon_dark';
$eye-icon-dark-x: 32px;
$eye-icon-dark-y: 0px;
$eye-icon-dark-offset-x: -32px;
$eye-icon-dark-offset-y: 0px;
$eye-icon-dark-width: 16px;
$eye-icon-dark-height: 16px;
$eye-icon-dark-total-width: 48px;
$eye-icon-dark-total-height: 48px;
$eye-icon-dark-image: 'sprite-history-buttons.png';
$eye-icon-dark: (32px, 0px, -32px, 0px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon_dark', );
$eye-icon-grey-name: 'eye_icon_grey';
$eye-icon-grey-x: 32px;
$eye-icon-grey-y: 16px;
$eye-icon-grey-offset-x: -32px;
$eye-icon-grey-offset-y: -16px;
$eye-icon-grey-width: 16px;
$eye-icon-grey-height: 16px;
$eye-icon-grey-total-width: 48px;
$eye-icon-grey-total-height: 48px;
$eye-icon-grey-image: 'sprite-history-buttons.png';
$eye-icon-grey: (32px, 16px, -32px, -16px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'eye_icon_grey', );
$pencil-icon-name: 'pencil_icon';
$pencil-icon-x: 0px;
$pencil-icon-y: 32px;
$pencil-icon-offset-x: 0px;
$pencil-icon-offset-y: -32px;
$pencil-icon-width: 16px;
$pencil-icon-height: 16px;
$pencil-icon-total-width: 48px;
$pencil-icon-total-height: 48px;
$pencil-icon-image: 'sprite-history-buttons.png';
$pencil-icon: (0px, 32px, 0px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon', );
$pencil-icon-dark-name: 'pencil_icon_dark';
$pencil-icon-dark-x: 16px;
$pencil-icon-dark-y: 32px;
$pencil-icon-dark-offset-x: -16px;
$pencil-icon-dark-offset-y: -32px;
$pencil-icon-dark-width: 16px;
$pencil-icon-dark-height: 16px;
$pencil-icon-dark-total-width: 48px;
$pencil-icon-dark-total-height: 48px;
$pencil-icon-dark-image: 'sprite-history-buttons.png';
$pencil-icon-dark: (16px, 32px, -16px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon_dark', );
$pencil-icon-grey-name: 'pencil_icon_grey';
$pencil-icon-grey-x: 32px;
$pencil-icon-grey-y: 32px;
$pencil-icon-grey-offset-x: -32px;
$pencil-icon-grey-offset-y: -32px;
$pencil-icon-grey-width: 16px;
$pencil-icon-grey-height: 16px;
$pencil-icon-grey-total-width: 48px;
$pencil-icon-grey-total-height: 48px;
$pencil-icon-grey-image: 'sprite-history-buttons.png';
$pencil-icon-grey: (32px, 32px, -32px, -32px, 16px, 16px, 48px, 48px, 'sprite-history-buttons.png', 'pencil_icon_grey', );
$spritesheet-width: 48px;
$spritesheet-height: 48px;
$spritesheet-image: 'sprite-history-buttons.png';
$spritesheet-sprites: ($delete-icon, $delete-icon-dark, $delete-icon-grey, $eye-icon, $eye-icon-dark, $eye-icon-grey, $pencil-icon, $pencil-icon-dark, $pencil-icon-grey, );
$spritesheet: (48px, 48px, 'sprite-history-buttons.png', $spritesheet-sprites, );
/*
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
}
.icon-email {
@include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
/*
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}
client/galaxy/style/scss/sprite-history-states.scss
+114
View File
@@ -0,0 +1,114 @@
/*
SCSS variables are information about icon's compiled state, stored under its original file name
.icon-home {
width: $icon-home-width;
}
The large array-like variables contain all information about a single icon
$icon-home: x y offset_x offset_y width height total_width total_height image_path;
At the bottom of this section, we provide information about the spritesheet itself
$spritesheet: width height image $spritesheet-sprites;
*/
$data-empty-name: 'data_empty';
$data-empty-x: 0px;
$data-empty-y: 0px;
$data-empty-offset-x: 0px;
$data-empty-offset-y: 0px;
$data-empty-width: 15px;
$data-empty-height: 15px;
$data-empty-total-width: 30px;
$data-empty-total-height: 30px;
$data-empty-image: 'sprite-history-states.png';
$data-empty: (0px, 0px, 0px, 0px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_empty', );
$data-error-name: 'data_error';
$data-error-x: 15px;
$data-error-y: 0px;
$data-error-offset-x: -15px;
$data-error-offset-y: 0px;
$data-error-width: 15px;
$data-error-height: 15px;
$data-error-total-width: 30px;
$data-error-total-height: 30px;
$data-error-image: 'sprite-history-states.png';
$data-error: (15px, 0px, -15px, 0px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_error', );
$data-ok-name: 'data_ok';
$data-ok-x: 0px;
$data-ok-y: 15px;
$data-ok-offset-x: 0px;
$data-ok-offset-y: -15px;
$data-ok-width: 15px;
$data-ok-height: 15px;
$data-ok-total-width: 30px;
$data-ok-total-height: 30px;
$data-ok-image: 'sprite-history-states.png';
$data-ok: (0px, 15px, 0px, -15px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_ok', );
$data-queued-name: 'data_queued';
$data-queued-x: 15px;
$data-queued-y: 15px;
$data-queued-offset-x: -15px;
$data-queued-offset-y: -15px;
$data-queued-width: 15px;
$data-queued-height: 15px;
$data-queued-total-width: 30px;
$data-queued-total-height: 30px;
$data-queued-image: 'sprite-history-states.png';
$data-queued: (15px, 15px, -15px, -15px, 15px, 15px, 30px, 30px, 'sprite-history-states.png', 'data_queued', );
$spritesheet-width: 30px;
$spritesheet-height: 30px;
$spritesheet-image: 'sprite-history-states.png';
$spritesheet-sprites: ($data-empty, $data-error, $data-ok, $data-queued, );
$spritesheet: (30px, 30px, 'sprite-history-states.png', $spritesheet-sprites, );
/*
The provided mixins are intended to be used with the array-like variables
.icon-home {
@include sprite-width($icon-home);
}
.icon-email {
@include sprite($icon-email);
}
*/
@mixin sprite-width($sprite) {
width: nth($sprite, 5);
}
@mixin sprite-height($sprite) {
height: nth($sprite, 6);
}
@mixin sprite-position($sprite) {
$sprite-offset-x: nth($sprite, 3);
$sprite-offset-y: nth($sprite, 4);
background-position: $sprite-offset-x $sprite-offset-y;
}
@mixin sprite-image($sprite) {
$sprite-image: nth($sprite, 9);
background-image: url(#{$sprite-image});
}
@mixin sprite($sprite) {
@include sprite-image($sprite);
@include sprite-position($sprite);
@include sprite-width($sprite);
@include sprite-height($sprite);
}
/*
The `sprites` mixin generates identical output to the CSS template
but can be overridden inside of SCSS
@include sprites($spritesheet-sprites);
*/
@mixin sprites($sprites) {
@each $sprite in $sprites {
$sprite-name: nth($sprite, 10);
.#{$sprite-name} {
@include sprite($sprite);
}
}
}