2014-10-27 00:33:53 +03:00
|
|
|
// ------------------------------------------------------------
|
|
|
|
// Icons
|
2014-07-20 03:55:29 +04:00
|
|
|
//
|
2014-10-27 00:33:53 +03:00
|
|
|
// 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
|
2014-11-28 16:22:05 +03:00
|
|
|
// * Div-based Icon Classes
|
2014-10-27 00:33:53 +03:00
|
|
|
// ------------------------------------------------------------
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
// Font-face rule
|
2014-07-20 03:55:29 +04:00
|
|
|
// Icon-font is generated by http://icomoon.co
|
2014-10-27 00:33:53 +03:00
|
|
|
// Pictos, by Drew Wilson - http://pictos.cc/
|
2014-07-20 03:55:29 +04:00
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
font-family: 'GhostIcons';
|
2015-02-14 07:03:16 +03:00
|
|
|
src:url('fonts/icons.woff') format('woff');
|
2014-07-20 03:55:29 +04:00
|
|
|
font-weight: normal;
|
|
|
|
font-style: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2014-10-26 20:07:35 +03:00
|
|
|
//
|
2014-10-27 00:33:53 +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;
|
2015-03-07 23:35:45 +03:00
|
|
|
vertical-align: -3%;
|
2014-10-26 20:07:35 +03:00
|
|
|
text-transform:none;
|
|
|
|
speak: none;
|
|
|
|
line-height: 1;
|
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2014-07-20 03:55:29 +04:00
|
|
|
//
|
|
|
|
// The Icon (before) Mixin
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
@mixin icon($char, $size: '', $color: '') {
|
|
|
|
&:before {
|
2014-10-26 20:07:35 +03:00
|
|
|
@extend %icon-base;
|
|
|
|
|
2015-03-09 19:43:34 +03:00
|
|
|
content: '#{$char}';
|
2014-07-20 03:55:29 +04:00
|
|
|
@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;
|
|
|
|
|
2015-03-09 19:43:34 +03:00
|
|
|
content: '#{$char}';
|
2014-07-20 03:55:29 +04:00
|
|
|
@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
|
2014-10-27 00:33:53 +03:00
|
|
|
// read them out loud.
|
2014-10-26 20:07:35 +03:00
|
|
|
//
|
2014-07-20 03:55:29 +04:00
|
|
|
|
|
|
|
|
2015-03-09 19:43:34 +03:00
|
|
|
$i-add: \f632;
|
|
|
|
$i-app: \f60b;
|
|
|
|
$i-appearance: \f621;
|
|
|
|
$i-archive: \f61f;
|
|
|
|
$i-atom: \f63e;
|
|
|
|
$i-book: \f642;
|
|
|
|
$i-calendar: \f61e;
|
|
|
|
$i-camera: \f62a;
|
|
|
|
$i-check: \f633;
|
|
|
|
$i-chevron-down: \f601;
|
|
|
|
$i-chevron-left: \f643;
|
|
|
|
$i-chevron: \f61d;
|
|
|
|
$i-clock: \f628;
|
|
|
|
$i-close: \f61c;
|
|
|
|
$i-code: \f63d;
|
|
|
|
$i-comments: \f61b;
|
|
|
|
$i-compass: \f63f;
|
|
|
|
$i-content: \f62d;
|
|
|
|
$i-edit: \f60f;
|
|
|
|
$i-error: \f61a;
|
|
|
|
$i-external: \f619;
|
|
|
|
$i-featured: \f626;
|
|
|
|
$i-fullscreen: \f617;
|
|
|
|
$i-ghost-logo: \f644;
|
|
|
|
$i-ghost: \f600;
|
|
|
|
$i-grid: \f616;
|
|
|
|
$i-home: \f615;
|
|
|
|
$i-image: \f611;
|
|
|
|
$i-info: \f614;
|
|
|
|
$i-lightning: \f63c;
|
|
|
|
$i-link: \f635;
|
|
|
|
$i-list: \f613;
|
|
|
|
$i-lock: \f62c;
|
|
|
|
$i-mail: \f612;
|
|
|
|
$i-markdown: \f640;
|
|
|
|
$i-menu: \f605;
|
|
|
|
$i-mobile: \f610;
|
|
|
|
$i-notification: \f631;
|
|
|
|
$i-pacman: \f60e;
|
|
|
|
$i-pc: \f60d;
|
|
|
|
$i-pin: \f60c;
|
|
|
|
$i-power: \f62b;
|
|
|
|
$i-preview: \f60a;
|
|
|
|
$i-question: \f618;
|
|
|
|
$i-reply: \f624;
|
|
|
|
$i-repost: \f636;
|
|
|
|
$i-rss: \f609;
|
|
|
|
$i-search-left: \f608;
|
|
|
|
$i-search: \f607;
|
|
|
|
$i-services: \f620;
|
|
|
|
$i-settings: \f606;
|
|
|
|
$i-settings2: \f629;
|
|
|
|
$i-stats: \f625;
|
|
|
|
$i-success: \f630;
|
|
|
|
$i-support: \f62f;
|
|
|
|
$i-tablet: \f604;
|
|
|
|
$i-tag: \f603;
|
|
|
|
$i-trash: \f623;
|
|
|
|
$i-twitter: \f641;
|
|
|
|
$i-unfeatured: \f627;
|
|
|
|
$i-user: \f62e;
|
|
|
|
$i-users: \f602;
|
|
|
|
$i-video: \f622;
|
|
|
|
$i-weather-cloudy: \f63b;
|
|
|
|
$i-weather-partial: \f639;
|
|
|
|
$i-weather-rain: \f637;
|
|
|
|
$i-weather-snow: \f63a;
|
|
|
|
$i-weather-sun: \f638;
|
|
|
|
$i-x: \f634;
|
2014-07-20 03:55:29 +04:00
|
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
// Icon Class Styles
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
[class*=icon-] {
|
|
|
|
&:before {
|
2014-10-26 20:07:35 +03:00
|
|
|
@extend %icon-base;
|
2014-07-20 03:55:29 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
text-decoration: none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//
|
|
|
|
// Icon Classes
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
2015-03-09 19:43:34 +03:00
|
|
|
.icon-add:before {
|
|
|
|
content: '#{$i-add}';
|
|
|
|
}
|
|
|
|
.icon-app:before {
|
|
|
|
content: '#{$i-app}';
|
|
|
|
}
|
|
|
|
.icon-appearance:before {
|
|
|
|
content: '#{$i-appearance}';
|
|
|
|
}
|
|
|
|
.icon-archive:before {
|
|
|
|
content: '#{$i-archive}';
|
|
|
|
}
|
|
|
|
.icon-atom:before {
|
|
|
|
content: '#{$i-atom}';
|
|
|
|
}
|
|
|
|
.icon-book:before {
|
|
|
|
content: '#{$i-book}';
|
|
|
|
}
|
|
|
|
.icon-calendar:before {
|
|
|
|
content: '#{$i-calendar}';
|
|
|
|
}
|
|
|
|
.icon-camera:before {
|
|
|
|
content: '#{$i-camera}';
|
|
|
|
}
|
|
|
|
.icon-check:before {
|
|
|
|
content: '#{$i-check}';
|
|
|
|
}
|
|
|
|
.icon-chevron-down:before {
|
|
|
|
content: '#{$i-chevron-down}';
|
|
|
|
}
|
|
|
|
.icon-chevron-left:before {
|
|
|
|
content: '#{$i-chevron-left}';
|
|
|
|
}
|
|
|
|
.icon-chevron:before {
|
|
|
|
content: '#{$i-chevron}';
|
|
|
|
}
|
|
|
|
.icon-clock:before {
|
|
|
|
content: '#{$i-clock}';
|
|
|
|
}
|
|
|
|
.icon-close:before {
|
|
|
|
content: '#{$i-close}';
|
|
|
|
}
|
|
|
|
.icon-code:before {
|
|
|
|
content: '#{$i-code}';
|
|
|
|
}
|
|
|
|
.icon-comments:before {
|
|
|
|
content: '#{$i-comments}';
|
|
|
|
}
|
|
|
|
.icon-compass:before {
|
|
|
|
content: '#{$i-compass}';
|
|
|
|
}
|
|
|
|
.icon-content:before {
|
|
|
|
content: '#{$i-content}';
|
|
|
|
}
|
|
|
|
.icon-edit:before {
|
|
|
|
content: '#{$i-edit}';
|
|
|
|
}
|
|
|
|
.icon-error:before {
|
|
|
|
content: '#{$i-error}';
|
|
|
|
}
|
|
|
|
.icon-external:before {
|
|
|
|
content: '#{$i-external}';
|
|
|
|
}
|
|
|
|
.icon-featured:before {
|
|
|
|
content: '#{$i-featured}';
|
|
|
|
}
|
|
|
|
.icon-fullscreen:before {
|
|
|
|
content: '#{$i-fullscreen}';
|
|
|
|
}
|
|
|
|
.icon-ghost-logo:before {
|
|
|
|
content: '#{$i-ghost-logo}';
|
|
|
|
}
|
|
|
|
.icon-ghost:before {
|
|
|
|
content: '#{$i-ghost}';
|
|
|
|
}
|
|
|
|
.icon-grid:before {
|
|
|
|
content: '#{$i-grid}';
|
|
|
|
}
|
|
|
|
.icon-home:before {
|
|
|
|
content: '#{$i-home}';
|
|
|
|
}
|
|
|
|
.icon-image:before {
|
|
|
|
content: '#{$i-image}';
|
|
|
|
}
|
|
|
|
.icon-info:before {
|
|
|
|
content: '#{$i-info}';
|
|
|
|
}
|
|
|
|
.icon-lightning:before {
|
|
|
|
content: '#{$i-lightning}';
|
|
|
|
}
|
|
|
|
.icon-link:before {
|
|
|
|
content: '#{$i-link}';
|
|
|
|
}
|
|
|
|
.icon-list:before {
|
|
|
|
content: '#{$i-list}';
|
|
|
|
}
|
|
|
|
.icon-lock:before {
|
|
|
|
content: '#{$i-lock}';
|
|
|
|
}
|
|
|
|
.icon-mail:before {
|
|
|
|
content: '#{$i-mail}';
|
|
|
|
}
|
|
|
|
.icon-markdown:before {
|
|
|
|
content: '#{$i-markdown}';
|
|
|
|
}
|
|
|
|
.icon-menu:before {
|
|
|
|
content: '#{$i-menu}';
|
|
|
|
}
|
|
|
|
.icon-mobile:before {
|
|
|
|
content: '#{$i-mobile}';
|
|
|
|
}
|
|
|
|
.icon-notification:before {
|
|
|
|
content: '#{$i-notification}';
|
|
|
|
}
|
|
|
|
.icon-pacman:before {
|
|
|
|
content: '#{$i-pacman}';
|
|
|
|
}
|
|
|
|
.icon-pc:before {
|
|
|
|
content: '#{$i-pc}';
|
|
|
|
}
|
|
|
|
.icon-pin:before {
|
|
|
|
content: '#{$i-pin}';
|
|
|
|
}
|
|
|
|
.icon-power:before {
|
|
|
|
content: '#{$i-power}';
|
|
|
|
}
|
|
|
|
.icon-preview:before {
|
|
|
|
content: '#{$i-preview}';
|
|
|
|
}
|
|
|
|
.icon-question:before {
|
|
|
|
content: '#{$i-question}';
|
|
|
|
}
|
|
|
|
.icon-reply:before {
|
|
|
|
content: '#{$i-reply}';
|
|
|
|
}
|
|
|
|
.icon-repost:before {
|
|
|
|
content: '#{$i-repost}';
|
|
|
|
}
|
|
|
|
.icon-rss:before {
|
|
|
|
content: '#{$i-rss}';
|
|
|
|
}
|
|
|
|
.icon-search-left:before {
|
|
|
|
content: '#{$i-search-left}';
|
|
|
|
}
|
|
|
|
.icon-search:before {
|
|
|
|
content: '#{$i-search}';
|
|
|
|
}
|
|
|
|
.icon-services:before {
|
|
|
|
content: '#{$i-services}';
|
|
|
|
}
|
|
|
|
.icon-settings:before {
|
|
|
|
content: '#{$i-settings}';
|
|
|
|
}
|
|
|
|
.icon-settings2:before {
|
|
|
|
content: '#{$i-settings2}';
|
|
|
|
}
|
|
|
|
.icon-stats:before {
|
|
|
|
content: '#{$i-stats}';
|
|
|
|
}
|
|
|
|
.icon-success:before {
|
|
|
|
content: '#{$i-success}';
|
|
|
|
}
|
|
|
|
.icon-support:before {
|
|
|
|
content: '#{$i-support}';
|
|
|
|
}
|
|
|
|
.icon-tablet:before {
|
|
|
|
content: '#{$i-tablet}';
|
|
|
|
}
|
|
|
|
.icon-tag:before {
|
|
|
|
content: '#{$i-tag}';
|
|
|
|
}
|
|
|
|
.icon-trash:before {
|
|
|
|
content: '#{$i-trash}';
|
|
|
|
}
|
|
|
|
.icon-twitter:before {
|
|
|
|
content: '#{$i-twitter}';
|
|
|
|
}
|
|
|
|
.icon-unfeatured:before {
|
|
|
|
content: '#{$i-unfeatured}';
|
|
|
|
}
|
|
|
|
.icon-user:before {
|
|
|
|
content: '#{$i-user}';
|
|
|
|
}
|
|
|
|
.icon-users:before {
|
|
|
|
content: '#{$i-users}';
|
|
|
|
}
|
|
|
|
.icon-video:before {
|
|
|
|
content: '#{$i-video}';
|
|
|
|
}
|
|
|
|
.icon-weather-cloudy:before {
|
|
|
|
content: '#{$i-weather-cloudy}';
|
|
|
|
}
|
|
|
|
.icon-weather-partial:before {
|
|
|
|
content: '#{$i-weather-partial}';
|
|
|
|
}
|
|
|
|
.icon-weather-rain:before {
|
|
|
|
content: '#{$i-weather-rain}';
|
|
|
|
}
|
|
|
|
.icon-weather-snow:before {
|
|
|
|
content: '#{$i-weather-snow}';
|
|
|
|
}
|
|
|
|
.icon-weather-sun:before {
|
|
|
|
content: '#{$i-weather-sun}';
|
2014-11-28 16:22:05 +03:00
|
|
|
}
|
2015-03-09 19:43:34 +03:00
|
|
|
x
|
2014-11-28 16:22:05 +03:00
|
|
|
|
2015-03-07 23:35:45 +03:00
|
|
|
// Specific icon size adjustments
|
|
|
|
.icon-list:before {
|
|
|
|
font-size: 0.9em;
|
|
|
|
}
|
|
|
|
.icon-markdown:before {
|
|
|
|
font-size: 1.1em;
|
|
|
|
vertical-align: -7%;
|
|
|
|
}
|
|
|
|
.icon-twitter:before {
|
|
|
|
font-size: 1.1em;
|
|
|
|
}
|
|
|
|
|
2014-11-28 16:22:05 +03:00
|
|
|
|
|
|
|
//
|
|
|
|
// Div-based Icon Classes
|
|
|
|
// --------------------------------------------------
|
|
|
|
|
|
|
|
.icon-grab:before {
|
|
|
|
content: '';
|
|
|
|
display: inline-block;
|
|
|
|
width: 7px;
|
|
|
|
height: 15px;
|
|
|
|
background-size: 4px 4px;
|
|
|
|
background-color: $midbrown;
|
|
|
|
background-position: -1px -1px;
|
|
|
|
background-image: linear-gradient(#fff 1px, transparent 1px),
|
|
|
|
linear-gradient(90deg, #fff 1px, transparent 1px),
|
|
|
|
linear-gradient(#fff 1px, transparent 1px),
|
|
|
|
linear-gradient(90deg, #fff 1px, transparent 1px);
|
2015-03-07 23:35:45 +03:00
|
|
|
}
|