Improve icon handling code

Closes TryGhost#4878 This changes nothing except DRYness of code. Its output is exactly the same. - Moves all icon variables into a map - Add getter function to extract variables from the map
hilln · Feb 25, 2015 · c473303 · c473303
1 parent f489cb1
commit c473303
Show file tree

Hide file tree

Showing 12 changed files with 125 additions and 304 deletions.
diff --git 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($i-close, 1.4rem, $midgrey) {
+        @include icon('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
@@ -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;
 }
 

diff --git 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($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;

diff --git a/core/client/assets/sass/components/uploader.scss b/core/client/assets/sass/components/uploader.scss
@@ -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;

diff --git 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($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;
         };

diff --git a/core/client/assets/sass/layouts/content.scss b/core/client/assets/sass/layouts/content.scss
@@ -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 {

diff --git 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($i-menu, 18px) {
+    @include icon('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
@@ -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;

diff --git 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($i-chevron) {
+                @include icon-after('chevron') {
                     float: right;
                     margin-top: 5px;
                 }