mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-04-15 03:01:37 -05:00
Merge pull request #4948 from PaulAdamDavis/simpler-icon-code
Improve icon handling code
This commit is contained in:
John O'Nolan
commit
7383820e35
12 changed files with 125 additions and 304 deletions
|
|
@ -105,7 +105,7 @@
|
|||
margin: 0;
|
||||
border: none;
|
||||
|
||||
@include icon($i-close, 1.4rem, $midgrey) {
|
||||
@include icon('close', 1.4rem, $midgrey) {
|
||||
transition: color 0.3s linear;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
%notification {
|
||||
@include icon($i-notification) {
|
||||
@include icon('notification') {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
bottom: 0;
|
||||
width: 34px;
|
||||
color: rgba(255,255,255,0.6);
|
||||
@include icon-after($i-close) {
|
||||
@include icon-after('close') {
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
|
|
@ -103,7 +103,7 @@
|
|||
|
||||
.notification-success {
|
||||
@extend %notification;
|
||||
@include icon($i-success);
|
||||
@include icon('success');
|
||||
background: $green;
|
||||
|
||||
&.notification-passive {
|
||||
|
|
@ -120,19 +120,19 @@
|
|||
|
||||
.notification-error {
|
||||
@extend %notification;
|
||||
@include icon($i-error);
|
||||
@include icon('error');
|
||||
background: $red;
|
||||
}
|
||||
|
||||
.notification-warn {
|
||||
@extend %notification;
|
||||
@include icon($i-info);
|
||||
@include icon('info');
|
||||
background: $orange;
|
||||
}
|
||||
|
||||
.notification-info {
|
||||
@extend %notification;
|
||||
@include icon($i-info);
|
||||
@include icon('info');
|
||||
background: $blue;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@
|
|||
text-align: center;
|
||||
color: #fff;
|
||||
|
||||
@include icon($i-chevron-down, 9px) {
|
||||
@include icon('chevron-down', 9px) {
|
||||
top: 0;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
|
|
@ -128,7 +128,7 @@
|
|||
rgba(0,0,0,0.02) 0 -1px 0 inset;
|
||||
transition: background-color 0.3s linear;
|
||||
|
||||
@include icon($i-chevron-down, 9px) {
|
||||
@include icon('chevron-down', 9px) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 50%;
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
will-change: box-shadow, background;
|
||||
box-shadow: none;
|
||||
background: #f8f8f8;
|
||||
@include icon($i-chevron-down) {
|
||||
@include icon('chevron-down') {
|
||||
will-change: transform;
|
||||
transform: rotate(360deg);
|
||||
};
|
||||
|
|
@ -165,7 +165,7 @@
|
|||
// If it has a class of "up" spin it an extra 180degress to point up
|
||||
&.up:hover,
|
||||
&.up:focus {
|
||||
@include icon($i-chevron-down) {
|
||||
@include icon('chevron-down') {
|
||||
margin-top:-4px;
|
||||
transform: rotate(540deg);
|
||||
transition-property: transform;
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
}
|
||||
|
||||
.media {
|
||||
@include icon($i-image, 60px, darken($lightbrown, 3%)) {
|
||||
@include icon('image', 60px, darken($lightbrown, 3%)) {
|
||||
display: inline-block;
|
||||
vertical-align: initial;
|
||||
transition: transform 1s ease;
|
||||
|
|
@ -63,15 +63,15 @@
|
|||
}
|
||||
|
||||
.image-webcam {
|
||||
@include icon($i-camera, 12px);
|
||||
@include icon('camera', 12px);
|
||||
}
|
||||
|
||||
.image-url {
|
||||
@include icon($i-link, 12px);
|
||||
@include icon('link', 12px);
|
||||
}
|
||||
|
||||
.image-upload {
|
||||
@include icon($i-image, 12px);
|
||||
@include icon('image', 12px);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
|
|
@ -194,7 +194,7 @@
|
|||
}
|
||||
|
||||
.image-cancel {
|
||||
@include icon($i-trash, 11px);
|
||||
@include icon('trash', 11px);
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
|
|
|
|||
|
|
@ -42,11 +42,11 @@
|
|||
.ghost_logo {
|
||||
position: relative;
|
||||
left: 3px;
|
||||
@include icon($i-ghost, 1.7rem, $midgrey) {
|
||||
@include icon('ghost', 1.7rem, $midgrey) {
|
||||
position: relative;
|
||||
top: -6px;
|
||||
};
|
||||
@include icon-after($i-ghost-logo, 3.2rem, $darkgrey) {
|
||||
@include icon-after('ghost-logo', 3.2rem, $darkgrey) {
|
||||
position: relative;
|
||||
left: -5px;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@
|
|||
}
|
||||
|
||||
.btn-green {
|
||||
@include icon($i-add);
|
||||
@include icon('add');
|
||||
position: absolute;
|
||||
top: 9px;
|
||||
right: 20px;
|
||||
|
|
@ -161,7 +161,7 @@
|
|||
}
|
||||
|
||||
.featured {
|
||||
@include icon($i-featured, 11px) {
|
||||
@include icon('featured', 11px) {
|
||||
vertical-align: 7%;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
|
|
@ -187,7 +187,7 @@
|
|||
padding: 19px 20px 22px 24px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
|
||||
@include icon-after($i-chevron) {
|
||||
@include icon-after('chevron') {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -6px;
|
||||
|
|
@ -245,14 +245,14 @@
|
|||
}
|
||||
|
||||
.unfeatured {
|
||||
@include icon($i-unfeatured, 14px);
|
||||
@include icon('unfeatured', 14px);
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
.featured {
|
||||
@include icon($i-featured, 14px);
|
||||
@include icon('featured', 14px);
|
||||
vertical-align: -6%;
|
||||
margin: 0 7px 0 -5px;
|
||||
padding: 3px;
|
||||
|
|
@ -297,7 +297,7 @@
|
|||
}
|
||||
|
||||
.post-edit {
|
||||
@include icon($i-edit, 14px);
|
||||
@include icon('edit', 14px);
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@
|
|||
|
||||
// The burger to expand .global-nav menu
|
||||
.menu-button {
|
||||
@include icon($i-menu, 18px) {
|
||||
@include icon('menu', 18px) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 12px;
|
||||
|
|
|
|||
|
|
@ -346,12 +346,12 @@
|
|||
position: relative;
|
||||
top: -5px;
|
||||
right: -5px;
|
||||
@include icon($i-question, '', lighten($brown, 15%));
|
||||
@include icon('question', '', lighten($brown, 15%));
|
||||
float: right;
|
||||
padding: 5px;
|
||||
|
||||
&:hover {
|
||||
@include icon($i-question, '', $brown);
|
||||
@include icon('question', '', $brown);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -549,7 +549,7 @@ body.zen {
|
|||
}
|
||||
|
||||
.tag {
|
||||
@include icon-after($i-x, 10px, #fff) {
|
||||
@include icon-after('x', 10px, #fff) {
|
||||
margin-left: 1px;
|
||||
vertical-align: 10%;
|
||||
text-shadow: rgba(255,255,255,0.15) 0 1px 0;
|
||||
|
|
@ -723,7 +723,7 @@ body.zen {
|
|||
}
|
||||
|
||||
.post-settings {
|
||||
@include icon($i-settings, 14px);
|
||||
@include icon('settings', 14px);
|
||||
display: inline-block;
|
||||
padding: 8px 10px;
|
||||
color: $midgrey;
|
||||
|
|
|
|||
|
|
@ -78,7 +78,7 @@
|
|||
|
||||
@media (max-width: 900px) {
|
||||
padding-left: 45px;
|
||||
@include icon-after($i-chevron) {
|
||||
@include icon-after('chevron') {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
// * The Icon (before) Mixin
|
||||
// * The Icon (after) Mixin
|
||||
// * Icon Variables
|
||||
// * Icon Getter Function
|
||||
// * Icon Class Styles
|
||||
// * Icon Classes
|
||||
// * Div-based Icon Classes
|
||||
|
|
@ -57,7 +58,7 @@
|
|||
&:before {
|
||||
@extend %icon-base;
|
||||
|
||||
content: '#{$char}';
|
||||
content: iconvar($char, 'string');
|
||||
@if $size != '' {
|
||||
font-size: $size;
|
||||
}
|
||||
|
|
@ -80,7 +81,7 @@
|
|||
&:after {
|
||||
@extend %icon-base;
|
||||
|
||||
content: '#{$char}';
|
||||
content: iconvar($char, 'string');
|
||||
@if $size != '' {
|
||||
font-size: $size;
|
||||
}
|
||||
|
|
@ -104,77 +105,93 @@
|
|||
// read them out loud.
|
||||
//
|
||||
|
||||
// Placeholder
|
||||
$i: \e018;
|
||||
$icons: (
|
||||
default: \e018,
|
||||
add: \e032,
|
||||
app: \e00b,
|
||||
appearance: \e021,
|
||||
archive: \e01f,
|
||||
atom: \e601,
|
||||
calendar: \e01e,
|
||||
camera: \e036,
|
||||
check: \e033,
|
||||
chevron-down: \e001,
|
||||
chevron-left: \e11d,
|
||||
chevron: \e01d,
|
||||
clock: \e028,
|
||||
close: \e01c,
|
||||
code: \e03e,
|
||||
comments: \e01b,
|
||||
compass: \e602,
|
||||
content: \e02d,
|
||||
edit: \e00f,
|
||||
error: \e01a,
|
||||
external: \e019,
|
||||
featured: \e026,
|
||||
fullscreen: \e017,
|
||||
ghost-logo: \e600,
|
||||
ghost: \e000,
|
||||
grid: \e016,
|
||||
home: \e015,
|
||||
image: \e011,
|
||||
info: \e014,
|
||||
lightning: \e03d,
|
||||
link: \e035,
|
||||
list: \e013,
|
||||
lock: \e02c,
|
||||
mail: \e012,
|
||||
menu: \e005,
|
||||
mobile: \e010,
|
||||
notification: \e031,
|
||||
pacman: \e00e,
|
||||
pc: \e00d,
|
||||
pin: \e00c,
|
||||
power: \e02b,
|
||||
preview: \e00a,
|
||||
question: \e018,
|
||||
reply: \e024,
|
||||
repost: \e037,
|
||||
rss: \e009,
|
||||
search-left: \e008,
|
||||
search: \e007,
|
||||
services: \e020,
|
||||
settings: \e006,
|
||||
settings2: \e029,
|
||||
stats: \e025,
|
||||
success: \e030,
|
||||
support: \e02f,
|
||||
tablet: \e004,
|
||||
tag: \e003,
|
||||
trash: \e023,
|
||||
unfeatured: \e027,
|
||||
user: \e02e,
|
||||
users: \e002,
|
||||
video: \e022,
|
||||
weather-cloudy: \e03c,
|
||||
weather-partial: \e03a,
|
||||
weather-rain: \e038,
|
||||
weather-snow: \e03b,
|
||||
weather-sun: \e039,
|
||||
x: \e034
|
||||
);
|
||||
|
||||
// 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;
|
||||
$i-atom: \e601;
|
||||
$i-compass: \e602;
|
||||
|
||||
//
|
||||
// Icon Getter Function
|
||||
// --------------------------------------------------
|
||||
// Take the icon name, find it in the $icons map and
|
||||
// either return the unicode itself or as a string
|
||||
//
|
||||
|
||||
@function iconvar($name, $type: 'value'){
|
||||
$unicode: map-get($icons, $name);
|
||||
@if ($type == 'string') {
|
||||
$icon: '#{$unicode}';
|
||||
} @else {
|
||||
$icon: $unicode;
|
||||
}
|
||||
@return $icon;
|
||||
}
|
||||
|
||||
|
||||
//
|
||||
|
|
@ -196,206 +213,10 @@ $i-compass: \e602;
|
|||
// 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}';
|
||||
}
|
||||
.icon-code:before {
|
||||
content: '#{$i-code}';
|
||||
}
|
||||
.icon-atom:before {
|
||||
content: '#{$i-atom}';
|
||||
}
|
||||
.icon-compass:before {
|
||||
content: '#{$i-compass}';
|
||||
@each $key, $content in $icons {
|
||||
.icon-#{$key}:before {
|
||||
content: '#{$content}';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -313,7 +313,7 @@ textarea {
|
|||
padding: 0;
|
||||
border-width: 0;
|
||||
|
||||
@include icon-after($i-chevron-down, 0.85em, $midbrown) {
|
||||
@include icon-after('chevron-down', 0.85em, $midbrown) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0.8em;
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
// --------------------------------------------------
|
||||
|
||||
.nav-list-item {
|
||||
@include icon($i-chevron, 1.4rem, $midbrown) {
|
||||
@include icon('chevron', 1.4rem, $midbrown) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue