Contents

/*------------------------------------*\
    #SVG-ICON
\*------------------------------------*/

$svg-icon-size:               $spacing-unit * 3 !default;
$svg-icon-tiny-size:          $spacing-unit !default;
$svg-icon-small-size:         $spacing-unit * 2 !default;
$svg-icon-large-size:         $spacing-unit * 4 !default;
$svg-icon-extra-large-size:   $spacing-unit * 6 !default;
$svg-icon-theme-header-color: $header-icon-color !default;
$svg-icon-theme-header-color-hover: $header-icon-color-hover !default;


.svg-icon {
    display: inline-block;
    width: $svg-icon-size;
    height: $svg-icon-size;
    vertical-align: middle;
}

/**
 * Display modifiers
 */
.svg-icon--block {
    display: block;
}


/**
 * Size Modifiers
 */
.svg-icon--tiny {
    width: $svg-icon-tiny-size;
    height: $svg-icon-tiny-size;
}

.svg-icon--small {
    width: $svg-icon-small-size;
    height: $svg-icon-small-size;
}

.svg-icon--large {
    width: $svg-icon-large-size;
    height: $svg-icon-large-size;
}

.svg-icon--extra-large {
    width: $svg-icon-extra-large-size;
    height: $svg-icon-extra-large-size;
}

.svg-icon--theme-header {
    fill: $svg-icon-theme-header-color;

    &:hover {
        fill: $svg-icon-theme-header-color-hover;
    }
}

.svg-icon--hover-primary-color {
    &:hover {
        fill: $primary-color;
    }
}

/**
 * Color Modifiers
 */
.svg-icon--link-color { fill: $link-color; }
.svg-icon--blue { fill: $blue; }
.svg-icon--yellow { fill: $yellow; }
.svg-icon--red { fill: $red; }
.svg-icon--green { fill: $green; }
.svg-icon--white { fill: $white; }
.svg-icon--gray { fill: $gray; }
.svg-icon--black { fill: $black; }
.svg-icon--black-alpha-15 { fill: $black-alpha-15; }
.svg-icon--black-alpha-50 { fill: $black-alpha-50; }

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
workarea-one_theme-1.3.1	app/assets/stylesheets/workarea/storefront/components/_svg_icon.scss
workarea-one_theme-1.3.0	app/assets/stylesheets/workarea/storefront/components/_svg_icon.scss