fix #370 by moving icon placeholder to a mixin

Author: catarak

client/styles/abstracts/_mixins.scss

@@ -16,4 +16,24 @@
       $theme-map: null !global;
     }
   }
+}
+
+@mixin icon() {
+  @include themify() {
+    color: getThemifyVariable('icon-color');
+    & g {
+      fill: getThemifyVariable('icon-color');
+    }
+    &:hover {
+      color: getThemifyVariable('icon-hover-color');
+      & g {
+        opacity: 1;
+        fill: getThemifyVariable('icon-hover-color');
+      }
+    }
+  }
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0;
 }

client/styles/abstracts/_placeholders.scss

@@ -31,26 +31,6 @@
 	}
 }
 
-%icon {
-	@include themify() {
-		color: getThemifyVariable('icon-color');
-		& g {
-			fill: getThemifyVariable('icon-color');
-		}
-		&:hover {
-			color: getThemifyVariable('icon-hover-color');
-			& g {
-				opacity: 1;
-				fill: getThemifyVariable('icon-hover-color');
-			}
-		}
-	}
-	background-color: transparent;
-	border: none;
-	cursor: pointer;
-	padding: 0;
-}
-
 %icon-toast{
 	@include themify() {
 		color: $toast-text-color

client/styles/components/_about.scss

@@ -25,9 +25,7 @@
 }
 
 .about__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .about__logo {

client/styles/components/_console.scss

@@ -72,19 +72,15 @@
 
 .preview-console__collapse {
 	padding-top: #{3 / $base-font-size}rem;
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	.preview-console--collapsed & {
 		display: none;
 	}
 }
 
 .preview-console__expand {
 	padding-top: #{3 / $base-font-size}rem;
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	display: none;
 	.preview-console--collapsed & {
 		display: inline-block;

client/styles/components/_editor.scss

@@ -187,9 +187,7 @@
   width: 14px;
   height: 14px;
 
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 
   background-repeat: no-repeat;
   background-position: center;
@@ -231,9 +229,7 @@
 
   margin-left: #{8 / $base-font-size}rem;
 
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 
   background: transparent url(../images/exit.svg) no-repeat;
 }
@@ -249,9 +245,7 @@
 }
 
 .editor__options-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{10 / $base-font-size}rem;
   right: #{2 / $base-font-size}rem;

client/styles/components/_error-modal.scss

@@ -12,9 +12,7 @@
 }
 
 .error-modal__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .error-modal__content {

client/styles/components/_modal.scss

@@ -22,9 +22,7 @@
 }
 
 .modal__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .modal__header {
@@ -96,9 +94,7 @@
 }
 
 .keyboard-shortcuts__close {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
 }
 
 .keyboard-shortcut-item {

client/styles/components/_preferences.scss

@@ -17,9 +17,7 @@
 }
 
 .preferences__exit-button {
-	@include themify() {
-		@extend %icon;
-	}
+	@include icon();
 	padding-top: #{5 / $base-font-size}rem;
 	margin-right: #{-6 / $base-font-size}rem;
 }

client/styles/components/_sidebar.scss

@@ -25,9 +25,7 @@
 }
 
 .sidebar__add {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   .sidebar--contracted & {
     display: none;
   }
@@ -124,8 +122,8 @@
 }
 
 .sidebar__file-item-show-options {
+  @include icon();
   @include themify() {
-    @extend %icon;
     padding: #{4 / $base-font-size}rem 0;
     background-color: map-get($theme-map, 'file-selected-color');
     padding-right: #{6 / $base-font-size}rem;
@@ -183,9 +181,7 @@
 }
 
 .sidebar__expand {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{7 / $base-font-size}rem;
   left: #{1 / $base-font-size}rem;
@@ -200,9 +196,7 @@
 }
 
 .sidebar__contract {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   position: absolute;
   top: #{7 / $base-font-size}rem;
   left: #{34 / $base-font-size}rem;

client/styles/components/_sketch-list.scss

@@ -68,9 +68,7 @@
 }
 
 .sketch-list__exit-button {
-  @include themify() {
-    @extend %icon;
-  }
+  @include icon();
   margin: #{12 / $base-font-size}rem #{16 / $base-font-size}rem;
 }