Remove unnecessary use of @extend inside mixins (#2000)

* Remove unnecessary use of @extend inside mixins

* Revert changes to +unselectable, +delete, and +loader

* Move @extend selector styling to their related mixin.

diff --git a/sass/utilities/mixins.sass b/sass/utilities/mixins.sass
index 27ebd9f49e3ff94b3c74307959c46df6a35fe01e..2c11061c3da8960bb6fc95ad45e64e5d4aa7e7a8 100644 (file)
--- a/sass/utilities/mixins.sass
+++ b/sass/utilities/mixins.sass
@@ -130,18 +130,18 @@
 
 // Placeholders
 
-%unselectable
+=unselectable
   -webkit-touch-callout: none
   -webkit-user-select: none
   -moz-user-select: none
   -ms-user-select: none
   user-select: none
 
-=unselectable
-  @extend %unselectable
+%unselectable
+  +unselectable
 
-%arrow
-  border: 3px solid transparent
+=arrow($color: transparent)
+  border: 3px solid $color
   border-radius: 2px
   border-right: 0
   border-top: 0
@@ -156,18 +156,17 @@
   transform-origin: center
   width: 0.625em
 
-=arrow($color)
-  @extend %arrow
-  border-color: $color
+%arrow
+  +arrow
 
-%block
+=block
   &:not(:last-child)
     margin-bottom: 1.5rem
 
-=block
-  @extend %block
+%block
+  +block
 
-%delete
+=delete
   @extend %unselectable
   -moz-appearance: none
   -webkit-appearance: none
@@ -233,10 +232,10 @@
     min-width: 32px
     width: 32px
 
-=delete
-  @extend %delete
+%delete
+  +delete
 
-%loader
+=loader
   animation: spinAround 500ms infinite linear
   border: 2px solid $grey-lighter
   border-radius: $radius-rounded
@@ -248,20 +247,20 @@
   position: relative
   width: 1em
 
-=loader
-  @extend %loader
+%loader
+  +loader
 
-%overlay
+=overlay($offset: 0)
   bottom: 0
   left: 0
   position: absolute
   right: 0
   top: 0
-
-=overlay($offset: 0)
-  @extend %overlay
   @if $offset != 0
     bottom: $offset
     left: $offset
     right: $offset
     top: $offset
+
+%overlay
+  +overlay