arsenetar.github.io/assets/scss/voltaicideas/_icons.scss

157 lines
3.0 KiB
SCSS

//
// Sass Icon Fonts
//
// Main File icons.scss
// Version: 0.4
// Created By: Andrew Senetar
// Date: August, 7 2013
// Used: Font Awesome Styles, Foundation Icon Fonts Scss as Starting; animation from Fontello
/* Defaults */
$set: "voltaicideas";
// Colors (from Font Awesome)
$iconBorderColor: #eee !default;
$iconMuted: #eee !default;
$iconLight: #fff !default;
$iconDark: #333 !default;
/* Mixins */
// Mixin for creating individual icon classes
@mixin i-class($name, $pau) {
.icon-#{$name}:before {
content: "\e#{$pau}";
}
}
// Mixin to simplify font face creation
@mixin face($set) {
@font-face {
font-family: "#{$set}";
src: url("../fonts/#{$set}");
src: url("../fonts/#{$set}.eot#iefix") format('embedded-opentype'),
url("../fonts/#{$set}.woff") format('woff'),
url("../fonts/#{$set}.ttf") format('truetype'),
url("../fonts/#{$set}.svg#fontello") format('svg');
font-weight: normal;
font-style: normal;
}
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
@include face(#{$set}); //@font-face
//// global icon styles (from Foundation Icons + Font Awesome)
/* Icon font Styles */
[class*='icon-'] {
background-image: none;
background-position: 0% 0%;
background-repeat: repeat;
display: inline;
height: auto;
width: auto;
vertical-align: baseline;
line-height: 1;
margin-top: 0;
speak: none;
font-family: '#{$set}';
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
}
[class*='icon-']:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
//// Icon borders (from Font Awesome)
[class*="border icon-"] {
border: solid 1px $iconBorderColor;
padding: .2em .25em .15em;
@include border-radius(3px);
}
//// Icon sizes (from Font Awesome)
[class*="large icon-"]:before {
vertical-align: -10%;
font-size: 1.333em;
}
[class*="huge icon-"]:before {
vertical-align: -17%;
font-size: 1.75em;
}
[class*="2x icon-"] {
font-size: 2em;
& .border {
border-width: 2px;
@include border-radius(4px);
}
}
[class*="3x icon-"] {
font-size: 3em;
& .border {
border-width: 3px;
@include border-radius(5px);
}
}
[class*="4x icon-"] {
font-size: 4em;
& .border {
border-width: 4px;
@include border-radius(6px);
}
}
[class*="5x icon-"] {
font-size: 5em;
& .border {
border-width: 5px;
@include border-radius(7px);
}
}
//// Colors (from Font Awesome)
[class*="muted icon-"]{
color: $iconMuted;
}
[class*="light icon-"]{
color: $iconLight;
}
[class*="dark icon-"]{
color: $iconDark;
}
//// Fixes
//// makes sure icons active on rollover in links (from Font Awesome)
a [class*="icon-"]:before {
display: inline;
}
//// Actual Icons
/* Icon Font List */
@import "_icon_codes.scss";