Ghost/ghost/admin/assets/sass/modules/icons.scss

387 lines
7.7 KiB
SCSS
Raw Normal View History

// ------------------------------------------------------------
// 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;
}
2014-10-26 20:07:35 +03:00
//
// Base styled for icons
2014-10-26 20:07:35 +03:00
// --------------------------------------------------
%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 {
2014-10-26 20:07:35 +03:00
@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 {
2014-10-26 20:07:35 +03:00
@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.
2014-10-26 20:07:35 +03:00
//
// 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 {
2014-10-26 20:07:35 +03:00
@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}';
}