mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-01-13 22:41:32 -05:00
778e05045c
No issue According to [caniuse](http://caniuse.com/#feat=woff), all the browsers we support (last 2 versions of major browsers) support the `.woff` font format. It's actually what pretty much all browsers will serve if its offered anyway. This PR removes the .eot and .ttf font formats. SVG remains as its the base file we use to add new icons & convert into other formats. It is not referenced anywhere.
387 lines
No EOL
7.7 KiB
SCSS
Executable file
387 lines
No EOL
7.7 KiB
SCSS
Executable file
// ------------------------------------------------------------
|
|
// Icons
|
|
//
|
|
// Defined the @font-face rule for the icon font, as well as
|
|
// the base styles for when using icons.
|
|
// Includes the mixins for adding icons directly and the
|
|
// variables for each icon.
|
|
//
|
|
// * Font-face rule
|
|
// * Base styled for icons
|
|
// * Base styled for icons
|
|
// * The Icon (before) Mixin
|
|
// * The Icon (after) Mixin
|
|
// * Icon Variables
|
|
// * Icon Class Styles
|
|
// * Icon Classes
|
|
// ------------------------------------------------------------
|
|
|
|
|
|
//
|
|
// Font-face rule
|
|
// Icon-font is generated by http://icomoon.co
|
|
// Pictos, by Drew Wilson - http://pictos.cc/
|
|
// --------------------------------------------------
|
|
|
|
@font-face {
|
|
font-family: 'GhostIcons';
|
|
src:url('../fonts/icons.woff') format('woff');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
//
|
|
// Base styled for icons
|
|
// --------------------------------------------------
|
|
|
|
%icon-base {
|
|
font-family: "GhostIcons";
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
vertical-align: -7%;
|
|
text-transform:none;
|
|
speak: none;
|
|
line-height: 1;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
|
|
//
|
|
// The Icon (before) Mixin
|
|
// --------------------------------------------------
|
|
|
|
@mixin icon($char, $size: '', $color: '') {
|
|
&:before {
|
|
@extend %icon-base;
|
|
|
|
content: '#{$char}';
|
|
@if $size != '' {
|
|
font-size: $size;
|
|
}
|
|
@if $color != '' {
|
|
color: $color;
|
|
}
|
|
@content;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
//
|
|
// The Icon (after) Mixin
|
|
// --------------------------------------------------
|
|
|
|
@mixin icon-after($char, $size: '', $color: '') {
|
|
&:after {
|
|
@extend %icon-base;
|
|
|
|
content: '#{$char}';
|
|
@if $size != '' {
|
|
font-size: $size;
|
|
}
|
|
@if $color != '' {
|
|
color: $color;
|
|
}
|
|
@content;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration:none;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Icon Variables
|
|
// --------------------------------------------------
|
|
// 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.
|
|
//
|
|
|
|
// Placeholder
|
|
$i: \e018;
|
|
|
|
// Icons
|
|
$i-ghost: \e000;
|
|
$i-ghost-logo: \e600;
|
|
$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-app: \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-chevron-left: \e11d;
|
|
$i-calendar: \e01e;
|
|
$i-archive: \e01f;
|
|
$i-services: \e020;
|
|
$i-appearance: \e021;
|
|
$i-video: \e022;
|
|
$i-trash: \e023;
|
|
$i-reply: \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;
|
|
$i-repost: \e037;
|
|
$i-weather-rain: \e038;
|
|
$i-weather-sun: \e039;
|
|
$i-weather-partial: \e03a;
|
|
$i-weather-snow: \e03b;
|
|
$i-weather-cloudy: \e03c;
|
|
$i-lightning: \e03d;
|
|
$i-code: \e03e;
|
|
|
|
|
|
//
|
|
// Icon Class Styles
|
|
// --------------------------------------------------
|
|
|
|
[class*=icon-] {
|
|
&:before {
|
|
@extend %icon-base;
|
|
}
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Icon Classes
|
|
// --------------------------------------------------
|
|
|
|
.icon-ghost:before {
|
|
content: '#{$i-ghost}';
|
|
}
|
|
.icon-ghost-logo:before {
|
|
content: '#{$i-ghost-logo}';
|
|
}
|
|
.icon-chevron-down:before {
|
|
content: '#{$i-chevron-down}';
|
|
}
|
|
.icon-users:before {
|
|
content: '#{$i-users}';
|
|
}
|
|
.icon-tag:before {
|
|
content: '#{$i-tag}';
|
|
}
|
|
.icon-tablet:before {
|
|
content: '#{$i-tablet}';
|
|
}
|
|
.icon-menu:before {
|
|
content: '#{$i-menu}';
|
|
}
|
|
.icon-settings:before {
|
|
content: '#{$i-settings}';
|
|
}
|
|
.icon-search:before {
|
|
content: '#{$i-search}';
|
|
}
|
|
.icon-search-left:before {
|
|
content: '#{$i-search-left}';
|
|
}
|
|
.icon-rss:before {
|
|
content: '#{$i-rss}';
|
|
}
|
|
.icon-preview:before {
|
|
content: '#{$i-preview}';
|
|
}
|
|
.icon-app:before {
|
|
content: '#{$i-app}';
|
|
}
|
|
.icon-pin:before {
|
|
content: '#{$i-pin}';
|
|
}
|
|
.icon-pc:before {
|
|
content: '#{$i-pc}';
|
|
}
|
|
.icon-pacman:before {
|
|
content: '#{$i-pacman}';
|
|
}
|
|
.icon-edit:before {
|
|
content: '#{$i-edit}';
|
|
}
|
|
.icon-mobile:before {
|
|
content: '#{$i-mobile}';
|
|
}
|
|
.icon-image:before {
|
|
content: '#{$i-image}';
|
|
}
|
|
.icon-mail:before {
|
|
content: '#{$i-mail}';
|
|
}
|
|
.icon-list:before {
|
|
content: '#{$i-list}';
|
|
}
|
|
.icon-info:before {
|
|
content: '#{$i-info}';
|
|
}
|
|
.icon-home:before {
|
|
content: '#{$i-home}';
|
|
}
|
|
.icon-grid:before {
|
|
content: '#{$i-grid}';
|
|
}
|
|
.icon-fullscreen:before {
|
|
content: '#{$i-fullscreen}';
|
|
}
|
|
.icon-question:before {
|
|
content: '#{$i-question}';
|
|
}
|
|
.icon-external:before {
|
|
content: '#{$i-external}';
|
|
}
|
|
.icon-error:before {
|
|
content: '#{$i-error}';
|
|
}
|
|
.icon-comments:before {
|
|
content: '#{$i-comments}';
|
|
}
|
|
.icon-close:before {
|
|
content: '#{$i-close}';
|
|
}
|
|
.icon-chevron:before {
|
|
content: '#{$i-chevron}';
|
|
}
|
|
.icon-chevron-left:before {
|
|
content: '#{$i-chevron-left}';
|
|
}
|
|
.icon-calendar:before {
|
|
content: '#{$i-calendar}';
|
|
}
|
|
.icon-archive:before {
|
|
content: '#{$i-archive}';
|
|
}
|
|
.icon-services:before {
|
|
content: '#{$i-services}';
|
|
}
|
|
.icon-appearance:before {
|
|
content: '#{$i-appearance}';
|
|
}
|
|
.icon-video:before {
|
|
content: '#{$i-video}';
|
|
}
|
|
.icon-trash:before {
|
|
content: '#{$i-trash}';
|
|
}
|
|
.icon-reply:before {
|
|
content: '#{$i-reply}';
|
|
}
|
|
.icon-stats:before {
|
|
content: '#{$i-stats}';
|
|
}
|
|
.icon-featured:before {
|
|
content: '#{$i-featured}';
|
|
}
|
|
.icon-unfeatured:before {
|
|
content: '#{$i-unfeatured}';
|
|
}
|
|
.icon-clock:before {
|
|
content: '#{$i-clock}';
|
|
}
|
|
.icon-settings2:before {
|
|
content: '#{$i-settings2}';
|
|
}
|
|
.icon-camera:before {
|
|
content: '#{$i-camera}';
|
|
}
|
|
.icon-power:before {
|
|
content: '#{$i-power}';
|
|
}
|
|
.icon-lock:before {
|
|
content: '#{$i-lock}';
|
|
}
|
|
.icon-content:before {
|
|
content: '#{$i-content}';
|
|
}
|
|
.icon-user:before {
|
|
content: '#{$i-user}';
|
|
}
|
|
.icon-support:before {
|
|
content: '#{$i-support}';
|
|
}
|
|
.icon-success:before {
|
|
content: '#{$i-success}';
|
|
}
|
|
.icon-notification:before {
|
|
content: '#{$i-notification}';
|
|
}
|
|
.icon-add:before {
|
|
content: '#{$i-add}';
|
|
}
|
|
.icon-check:before {
|
|
content: '#{$i-check}';
|
|
}
|
|
.icon-x:before {
|
|
content: '#{$i-x}';
|
|
}
|
|
.icon-link:before {
|
|
content: '#{$i-link}';
|
|
}
|
|
.icon-camera:before {
|
|
content: '#{$i-camera}';
|
|
}
|
|
.icon-repost:before {
|
|
content: '#{$i-repost}';
|
|
}
|
|
.icon-weather-rain:before {
|
|
content: '#{$i-weather-rain}';
|
|
}
|
|
.icon-weather-sun:before {
|
|
content: '#{$i-weather-sun}';
|
|
}
|
|
.icon-weather-partial:before {
|
|
content: '#{$i-weather-partial}';
|
|
}
|
|
.icon-weather-snow:before {
|
|
content: '#{$i-weather-snow}';
|
|
}
|
|
.icon-weather-cloudy:before {
|
|
content: '#{$i-weather-cloudy}';
|
|
}
|
|
.icon-lightning:before {
|
|
content: '#{$i-lightning}';
|
|
} |