mirror of
https://github.com/scratchfoundation/scratchx.git
synced 2024-11-25 09:08:28 -05:00
90 lines
No EOL
2.6 KiB
SCSS
90 lines
No EOL
2.6 KiB
SCSS
$font-icon: "ScratchX";
|
|
@font-face {
|
|
font-family: '#{$font-icon}';
|
|
src:url('../fonts/ScratchX.eot?-omdesu');
|
|
src:url('../fonts/ScratchX.eot?#iefix-omdesu') format('embedded-opentype'),
|
|
url('../fonts/ScratchX.woff?-omdesu') format('woff'),
|
|
url('../fonts/ScratchX.ttf?-omdesu') format('truetype'),
|
|
url('../fonts/ScratchX.svg?-omdesu#ScratchX') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
$icon-documentation: "\e600";
|
|
$icon-download: "\e601";
|
|
$icon-github: "\e602";
|
|
$icon-link: "\e603";
|
|
$icon-right-arrow: "\e604";
|
|
$icon-twitter: "\e605";
|
|
$icon-upload: "\e606";
|
|
$icon-warning: "\e607";
|
|
$icon-new-link: "\e608";
|
|
$icon-wifi: "\e609";
|
|
$icon-faq: "\e60a";
|
|
$icon-doc: "\e60b";
|
|
$icon-blocks: "\e60c";
|
|
$icon-gears: "\e60d";
|
|
$icon-gear: "\e60e";
|
|
|
|
$icons: (
|
|
"documentation": "#{$icon-documentation}",
|
|
"download": "#{$icon-download}",
|
|
"github": "#{$icon-github}",
|
|
"link": "#{$icon-link}",
|
|
"right-arrow": "#{$icon-right-arrow}",
|
|
"twitter": "#{$icon-twitter}",
|
|
"upload": "#{$icon-upload}",
|
|
"warning": "#{$icon-warning}",
|
|
"new-link": "#{$icon-new-link}",
|
|
"wifi": "#{$icon-wifi}",
|
|
"faq": "#{$icon-faq}",
|
|
"doc": "#{$icon-doc}",
|
|
"blocks": "#{$icon-blocks}",
|
|
"gears": "#{$icon-gears}",
|
|
"gear": "#{$icon-gear}",
|
|
);
|
|
|
|
@mixin icon($position: before, $icon: false, $style: plain, $centered: false, $font-size: 1em) {
|
|
@if $position == both {
|
|
$position: 'before, &:after';
|
|
}
|
|
// Either a :before or :after pseudo-element, or both, defaulting to :before
|
|
&:#{$position} {
|
|
@if $icon {
|
|
// A particular icon has been specified
|
|
content: "#{map-get($icons, $icon)}";
|
|
}
|
|
|
|
font-family: $font-icon;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
font-size: $font-size;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
@if $style == circular {
|
|
border-radius: $font-size/4;
|
|
width: $font-size/2;
|
|
height: $font-size/2;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
@if $centered {
|
|
line-height: 1.5;
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -$font-size/4;
|
|
}
|
|
|
|
// Include any extra rules supplied for the pseudo-element
|
|
@content;
|
|
}
|
|
} |