diff --git a/core/client/assets/sass/components/modals.scss b/core/client/assets/sass/components/modals.scss index ab506dbce2e..3f69b3c0a16 100644 --- a/core/client/assets/sass/components/modals.scss +++ b/core/client/assets/sass/components/modals.scss @@ -105,7 +105,7 @@ margin: 0; border: none; - @include icon('close', 1.4rem, $midgrey) { + @include icon($i-close, 1.4rem, $midgrey) { transition: color 0.3s linear; }; diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss index 9eb39c147dd..47264c8e904 100644 --- a/core/client/assets/sass/components/notifications.scss +++ b/core/client/assets/sass/components/notifications.scss @@ -37,7 +37,7 @@ // -------------------------------------------------- %notification { - @include icon('notification') { + @include icon($i-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('close') { + @include icon-after($i-close) { padding: 10px; position: absolute; top: 4px; @@ -103,7 +103,7 @@ .notification-success { @extend %notification; - @include icon('success'); + @include icon($i-success); background: $green; &.notification-passive { @@ -120,19 +120,19 @@ .notification-error { @extend %notification; - @include icon('error'); + @include icon($i-error); background: $red; } .notification-warn { @extend %notification; - @include icon('info'); + @include icon($i-info); background: $orange; } .notification-info { @extend %notification; - @include icon('info'); + @include icon($i-info); background: $blue; } diff --git a/core/client/assets/sass/components/splitbuttons.scss b/core/client/assets/sass/components/splitbuttons.scss index a610bc5f244..fc1ea7f88e8 100644 --- a/core/client/assets/sass/components/splitbuttons.scss +++ b/core/client/assets/sass/components/splitbuttons.scss @@ -69,7 +69,7 @@ text-align: center; color: #fff; - @include icon('chevron-down', 9px) { + @include icon($i-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('chevron-down', 9px) { + @include icon($i-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('chevron-down') { + @include icon($i-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('chevron-down') { + @include icon($i-chevron-down) { margin-top:-4px; transform: rotate(540deg); transition-property: transform; diff --git a/core/client/assets/sass/components/uploader.scss b/core/client/assets/sass/components/uploader.scss index 6fc28eb8c1a..eeb994a4c05 100644 --- a/core/client/assets/sass/components/uploader.scss +++ b/core/client/assets/sass/components/uploader.scss @@ -38,7 +38,7 @@ } .media { - @include icon('image', 60px, darken($lightbrown, 3%)) { + @include icon($i-image, 60px, darken($lightbrown, 3%)) { display: inline-block; vertical-align: initial; transition: transform 1s ease; @@ -63,15 +63,15 @@ } .image-webcam { - @include icon('camera', 12px); + @include icon($i-camera, 12px); } .image-url { - @include icon('link', 12px); + @include icon($i-link, 12px); } .image-upload { - @include icon('image', 12px); + @include icon($i-image, 12px); } .btn-green { @@ -194,7 +194,7 @@ } .image-cancel { - @include icon('trash', 11px); + @include icon($i-trash, 11px); position: absolute; top: 10px; right: 10px; diff --git a/core/client/assets/sass/layouts/about.scss b/core/client/assets/sass/layouts/about.scss index e5e5da08d36..de0a1b2db08 100644 --- a/core/client/assets/sass/layouts/about.scss +++ b/core/client/assets/sass/layouts/about.scss @@ -42,11 +42,11 @@ .ghost_logo { position: relative; left: 3px; - @include icon('ghost', 1.7rem, $midgrey) { + @include icon($i-ghost, 1.7rem, $midgrey) { position: relative; top: -6px; }; - @include icon-after('ghost-logo', 3.2rem, $darkgrey) { + @include icon-after($i-ghost-logo, 3.2rem, $darkgrey) { position: relative; left: -5px; }; diff --git a/core/client/assets/sass/layouts/content.scss b/core/client/assets/sass/layouts/content.scss index 8bd7880739a..59f4815f227 100644 --- a/core/client/assets/sass/layouts/content.scss +++ b/core/client/assets/sass/layouts/content.scss @@ -90,7 +90,7 @@ } .btn-green { - @include icon('add'); + @include icon($i-add); position: absolute; top: 9px; right: 20px; @@ -161,7 +161,7 @@ } .featured { - @include icon('featured', 11px) { + @include icon($i-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('chevron') { + @include icon-after($i-chevron) { position: absolute; top: 50%; margin-top: -6px; @@ -245,14 +245,14 @@ } .unfeatured { - @include icon('unfeatured', 14px); + @include icon($i-unfeatured, 14px); vertical-align: -6%; margin: 0 7px 0 -5px; padding: 3px; } .featured { - @include icon('featured', 14px); + @include icon($i-featured, 14px); vertical-align: -6%; margin: 0 7px 0 -5px; padding: 3px; @@ -297,7 +297,7 @@ } .post-edit { - @include icon('edit', 14px); + @include icon($i-edit, 14px); } img { diff --git a/core/client/assets/sass/layouts/default.scss b/core/client/assets/sass/layouts/default.scss index db88d411bf2..f42306e251e 100644 --- a/core/client/assets/sass/layouts/default.scss +++ b/core/client/assets/sass/layouts/default.scss @@ -142,7 +142,7 @@ // The burger to expand .global-nav menu .menu-button { - @include icon('menu', 18px) { + @include icon($i-menu, 18px) { position: absolute; top: 50%; left: 12px; diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss index b3a7584651e..06eea603275 100644 --- a/core/client/assets/sass/layouts/editor.scss +++ b/core/client/assets/sass/layouts/editor.scss @@ -346,12 +346,12 @@ position: relative; top: -3px; right: -5px; - @include icon('markdown', '16px', lighten($brown, 15%)); + @include icon($i-markdown, '16px', lighten($brown, 15%)); float: right; padding: 5px; &:hover { - @include icon('markdown', '', $brown); + @include icon($i-markdown, '', $brown); } } @@ -549,7 +549,7 @@ body.zen { } .tag { - @include icon-after('x', 10px, #fff) { + @include icon-after($i-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('settings', 14px); + @include icon($i-settings, 14px); display: inline-block; padding: 8px 10px; color: $midgrey; diff --git a/core/client/assets/sass/layouts/settings.scss b/core/client/assets/sass/layouts/settings.scss index 763989f969b..1f0eacbef4d 100644 --- a/core/client/assets/sass/layouts/settings.scss +++ b/core/client/assets/sass/layouts/settings.scss @@ -78,7 +78,7 @@ @media (max-width: 900px) { padding-left: 45px; - @include icon-after('chevron') { + @include icon-after($i-chevron) { float: right; margin-top: 5px; } diff --git a/core/client/assets/sass/modules/icons.scss b/core/client/assets/sass/modules/icons.scss index e6e5ed6164f..775f4ff7ccf 100755 --- a/core/client/assets/sass/modules/icons.scss +++ b/core/client/assets/sass/modules/icons.scss @@ -12,7 +12,6 @@ // * The Icon (before) Mixin // * The Icon (after) Mixin // * Icon Variables -// * Icon Getter Function // * Icon Class Styles // * Icon Classes // * Div-based Icon Classes @@ -58,7 +57,7 @@ &:before { @extend %icon-base; - content: iconvar($char, 'string'); + content: '#{$char}'; @if $size != '' { font-size: $size; } @@ -81,7 +80,7 @@ &:after { @extend %icon-base; - content: iconvar($char, 'string'); + content: '#{$char}'; @if $size != '' { font-size: $size; } @@ -105,95 +104,76 @@ // read them out loud. // -$icons: ( - add: \f632, - app: \f60b, - appearance: \f621, - archive: \f61f, - atom: \f63e, - book: \f642, - calendar: \f61e, - camera: \f62a, - check: \f633, - chevron-down: \f601, - chevron-left: \f643, - chevron: \f61d, - clock: \f628, - close: \f61c, - code: \f63d, - comments: \f61b, - compass: \f63f, - content: \f62d, - edit: \f60f, - error: \f61a, - external: \f619, - featured: \f626, - fullscreen: \f617, - ghost-logo: \f644, - ghost: \f600, - grid: \f616, - home: \f615, - image: \f611, - info: \f614, - lightning: \f63c, - link: \f635, - list: \f613, - lock: \f62c, - mail: \f612, - markdown: \f640, - menu: \f605, - mobile: \f610, - notification: \f631, - pacman: \f60e, - pc: \f60d, - pin: \f60c, - power: \f62b, - preview: \f60a, - question: \f618, - reply: \f624, - repost: \f636, - rss: \f609, - search-left: \f608, - search: \f607, - services: \f620, - settings: \f606, - settings2: \f629, - stats: \f625, - success: \f630, - support: \f62f, - tablet: \f604, - tag: \f603, - trash: \f623, - twitter: \f641, - unfeatured: \f627, - user: \f62e, - users: \f602, - video: \f622, - weather-cloudy: \f63b, - weather-partial: \f639, - weather-rain: \f637, - weather-snow: \f63a, - weather-sun: \f638, - x: \f634 -); - -// -// 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; -} +$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; // @@ -215,11 +195,211 @@ $icons: ( // Icon Classes // -------------------------------------------------- -@each $key, $content in $icons { - .icon-#{$key}:before { - content: '#{$content}'; - } +.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}'; } +x // Specific icon size adjustments .icon-list:before { diff --git a/core/client/assets/sass/patterns/forms.scss b/core/client/assets/sass/patterns/forms.scss index fcb2215e09a..a8399aadf25 100644 --- a/core/client/assets/sass/patterns/forms.scss +++ b/core/client/assets/sass/patterns/forms.scss @@ -313,7 +313,7 @@ textarea { padding: 0; border-width: 0; - @include icon-after('chevron-down', 0.85em, $midbrown) { + @include icon-after($i-chevron-down, 0.85em, $midbrown) { position: absolute; top: 50%; right: 0.8em; diff --git a/core/client/assets/sass/patterns/navlist.scss b/core/client/assets/sass/patterns/navlist.scss index 315593a1bc1..d6ff7a869dc 100644 --- a/core/client/assets/sass/patterns/navlist.scss +++ b/core/client/assets/sass/patterns/navlist.scss @@ -30,7 +30,7 @@ // -------------------------------------------------- .nav-list-item { - @include icon('chevron', 1.4rem, $midbrown) { + @include icon($i-chevron, 1.4rem, $midbrown) { position: absolute; top: 50%; right: 10px;