From 3f72028a73972e1afc6c94ab9956be4bfb7f05e8 Mon Sep 17 00:00:00 2001
From: Paul Adam Davis <pauladamdavis@gmail.com>
Date: Sun, 31 Aug 2014 20:56:05 +0100
Subject: [PATCH] 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.
---
core/client/assets/sass/components/modals.scss | 6 +++---
core/client/assets/sass/components/notifications.scss | 10 +++++-----
core/client/assets/sass/patterns/buttons.scss | 5 ++++-
3 files changed, 12 insertions(+), 9 deletions(-)
diff --git a/core/client/assets/sass/components/modals.scss b/core/client/assets/sass/components/modals.scss
index ec55ebb908..fad882692b 100644
--- a/core/client/assets/sass/components/modals.scss
+++ b/core/client/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;
}
}
diff --git a/core/client/assets/sass/components/notifications.scss b/core/client/assets/sass/components/notifications.scss
index 1cc0b7c5bc..97d9578849 100644
--- a/core/client/assets/sass/components/notifications.scss
+++ b/core/client/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;
}
diff --git a/core/client/assets/sass/patterns/buttons.scss b/core/client/assets/sass/patterns/buttons.scss
index 9ab2f12b5c..9cbf17c022 100644
--- a/core/client/assets/sass/patterns/buttons.scss
+++ b/core/client/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