/* 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(../../assets/images/#{$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); } } }