mirror of https://github.com/TryGhost/Ghost.git
208 lines
4.5 KiB
SCSS
208 lines
4.5 KiB
SCSS
/*
|
|
* The icons used in Ghost are the Pictos set by Drew Wilson - http://pictos.css
|
|
* They are embedded via a custom icon font built with http://icomoon.io
|
|
*
|
|
* Table of Contents:
|
|
*
|
|
* Font Face
|
|
* Icon Element
|
|
* Icon Variables / Short Names
|
|
* Usage
|
|
*/
|
|
|
|
|
|
/* =============================================================================
|
|
The Font Face
|
|
============================================================================= */
|
|
|
|
/* Generated by icomoon.co */
|
|
|
|
@font-face {
|
|
font-family: 'Icons';
|
|
src:url('../fonts/icons.eot');
|
|
src:url('../fonts/icons.eot?#iefix') format('embedded-opentype'),
|
|
url('../fonts/icons.woff') format('woff'),
|
|
url('../fonts/icons.ttf') format('truetype'),
|
|
url('../fonts/icons.svg#icons') format('svg');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/* =============================================================================
|
|
The Icon Element
|
|
============================================================================= */
|
|
|
|
/*
|
|
* Epic dynamic icon element by Eric Eggert, this thing is so fucking cool it's
|
|
* actually unreal. http://cl.ly/O40t
|
|
*/
|
|
|
|
%icon:before,
|
|
%icon:after {
|
|
font-family: "Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
vertical-align: -7%;
|
|
text-transform:none;
|
|
speak: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
}
|
|
|
|
@mixin icon($char, $size: '', $color: '') {
|
|
@extend %icon;
|
|
|
|
&:before {
|
|
content: '#{$char}';
|
|
@if $size != '' {
|
|
font-size: $size;
|
|
}
|
|
@if $color != '' {
|
|
color: $color;
|
|
}
|
|
@content;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
/*
|
|
* Special use case for when we want to add an icon after an element rather
|
|
* than before it. For things like dropdowns.
|
|
*/
|
|
|
|
@mixin icon-after($char, $size: '', $color: '') {
|
|
@extend %icon;
|
|
|
|
&:after {
|
|
content: '#{$char}';
|
|
@if $size != '' {
|
|
font-size: $size;
|
|
}
|
|
@if $color != '' {
|
|
color: $color;
|
|
}
|
|
@content;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
|
|
/* =============================================================================
|
|
Icon Variables / Short Names
|
|
============================================================================= */
|
|
|
|
/*
|
|
* For accessibility, icon characters in the icon font are stored in Unicode's
|
|
* Private Use Area characters. This means that screen readers won't attempt to
|
|
* read them out loud. For code maintainability, we then store these Unicode
|
|
* references inside Sass variables.
|
|
*/
|
|
|
|
$i-ghost: \e000;
|
|
$i-chevron-down: \e001;
|
|
$i-users: \e002;
|
|
$i-tag: \e003;
|
|
$i-tablet: \e004;
|
|
$i-menu: \e005;
|
|
$i-settings: \e006;
|
|
$i-search: \e007;
|
|
$i-search-left: \e008;
|
|
$i-rss: \e009;
|
|
$i-preview: \e00a;
|
|
$i-plugins: \e00b;
|
|
$i-pin: \e00c;
|
|
$i-pc: \e00d;
|
|
$i-pacman: \e00e;
|
|
$i-edit: \e00f;
|
|
$i-mobile: \e010;
|
|
$i-image: \e011;
|
|
$i-mail: \e012;
|
|
$i-list: \e013;
|
|
$i-info: \e014;
|
|
$i-home: \e015;
|
|
$i-grid: \e016;
|
|
$i-fullscreen: \e017;
|
|
$i-question: \e018;
|
|
$i-external: \e019;
|
|
$i-error: \e01a;
|
|
$i-comments: \e01b;
|
|
$i-close: \e01c;
|
|
$i-chevron: \e01d;
|
|
$i-calendar: \e01e;
|
|
$i-archive: \e01f;
|
|
$i-services: \e020;
|
|
$i-appearance: \e021;
|
|
$i-video: \e022;
|
|
$i-remove: \e023;
|
|
$i-----: \e024;
|
|
$i-stats: \e025;
|
|
$i-featured: \e026;
|
|
$i-unfeatured: \e027;
|
|
$i-clock: \e028;
|
|
$i-settings2: \e029;
|
|
$i-camera: \e02a;
|
|
$i-power: \e02b;
|
|
$i-lock: \e02c;
|
|
$i-content: \e02d;
|
|
$i-user: \e02e;
|
|
$i-support: \e02f;
|
|
$i-success: \e030;
|
|
$i-notification: \e031;
|
|
$i-add: \e032;
|
|
$i-check: \e033;
|
|
$i-x: \e034;
|
|
$i-link: \e035;
|
|
$i-camera: \e036;
|
|
|
|
// Placeholder
|
|
$i: \e018;
|
|
|
|
|
|
/* =============================================================================
|
|
Usage
|
|
=============================================================================
|
|
|
|
To create a button with a label that is prefixed with a camera icon, we might
|
|
write our Sass something like this:
|
|
|
|
#button {
|
|
display: block;
|
|
width: 200px;
|
|
height: 40px;
|
|
@include icon($i-camera, 16px, #fff) {vertical-align:-10%;};
|
|
}
|
|
|
|
Thi would then output full CSS something like this:
|
|
|
|
#button {
|
|
display: block;
|
|
width: 200px;
|
|
height: 40px;
|
|
}
|
|
|
|
#button:before {
|
|
content: "\e02a";
|
|
size: 16px;
|
|
color: #fff;
|
|
font-family: "Icons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
vertical-align: -10%;
|
|
text-transform:none;
|
|
speak: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
*/
|
|
|
|
|