Fix notification styles

No issue

I'm not sure why, but @extend's here using placeholder selectors, not classes, work.

This fixes the notification and modal styles, which meant changing how the default button selector works. It is now a placeholder, and a real class extends that. The modal styles extended the default button style, which can now happen.

ghost/admin/assets/sass/components/modals.scss

@@ -37,7 +37,7 @@
     z-index: 1030;
 }
 
-.modal {
+%modal {
     left: 50%;
     right: auto;
     width: 450px;
@@ -70,7 +70,7 @@
 }
 
 .modal-action {
-    @extend .modal;
+    @extend %modal;
     padding: 60px 0 30px;
 
     @media (max-width: 800px) {
@@ -123,7 +123,7 @@
 .modal-footer {
     margin-top: 20px;
     .reject-button-class {
-        @extend .button;
+        @extend .btn;
     }
 }
 

ghost/admin/assets/sass/components/notifications.scss

@@ -31,7 +31,7 @@
 // Base Notification
 // --------------------------------------------------
 
-.notification {
+%notification {
     @include icon($i-notification) {
         position: absolute;
         top: 0;
@@ -94,7 +94,7 @@
 // --------------------------------------------------
 
 .notification-success {
-    @extend .notification;
+    @extend %notification;
     @include icon($i-success);
     background: $green;
 
@@ -111,20 +111,20 @@
 }
 
 .notification-error {
-    @extend .notification;
+    @extend %notification;
     @include icon($i-error);
     background: $red;
 }
 
 
 .notification-warn {
-    @extend .notification;
+    @extend %notification;
     @include icon($i-info);
     background: $orange;
 }
 
 .notification-info {
-    @extend .notification;
+    @extend %notification;
     @include icon($i-info);
     background: $blue;
 }

ghost/admin/assets/sass/patterns/buttons.scss

@@ -6,7 +6,7 @@
 // Base styles
 // --------------------------------------------------
 
-.btn {
+%button {
     display: inline-block;
     margin-bottom: 0; // For input.btn
     padding: 9px 14px;
@@ -55,6 +55,9 @@
         box-shadow: none;
     }
 }
+.btn {
+    @extend %button;
+}
 
 
 // Alternate buttons