Add default background colour to alert notices (#236)

* Default background color for alert * Add default background colour to alert notices
hasgeek · Jul 3, 2019 · 3d160c3 · 3d160c3
1 parent 46ad0f0
commit 3d160c3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 17 deletions.
diff --git a/baseframe/static/css/mui.css b/baseframe/static/css/mui.css
@@ -3948,10 +3948,11 @@ li p + ol {
 
 .alert {
   padding: 15px;
-  margin-top: 20px;
-  margin-bottom: 20px;
   border: 1px solid transparent;
   border-radius: 2px;
+  background-color: rgba(74, 144, 226, 0.1);
+  border-color: rgba(74, 144, 226, 0.2);
+  color: #4A90E2;
 }
 .alert .alert__heading {
   margin-top: 0;
@@ -3992,12 +3993,6 @@ li p + ol {
   border-top-color: #c9e2b3;
 }
 
-.alert--info {
-  background-color: rgba(74, 144, 226, 0.1);
-  border-color: rgba(74, 144, 226, 0.2);
-  color: #4A90E2;
-}
-
 .alert--info .alert__hr {
   border-top-color: #a6e1ec;
 }
@@ -4024,6 +4019,12 @@ li p + ol {
   border-top-color: #e4b9c0;
 }
 
+@media (min-width: 768px) {
+  .alert {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+}
 .thumbnail {
   position: relative;
   display: -ms-flexbox;

diff --git a/baseframe/static/sass/baseframe-material/_alert.scss b/baseframe/static/sass/baseframe-material/_alert.scss
@@ -1,9 +1,10 @@
 .alert {
 	padding: $mui-panel-padding;
-	margin-top: $mui-base-line-height-computed;
-	margin-bottom: $mui-base-line-height-computed;
 	border: 1px solid transparent;
 	border-radius: $mui-border-radius-default ;
+	background-color: transparentize($mui-info-color, 0.9);
+	border-color: transparentize($mui-info-color, 0.8);
+	color: $mui-info-color;
 
   	.alert__heading {
 		margin-top: 0;
@@ -50,12 +51,6 @@
   	border-top-color: #c9e2b3;
 }
 
-.alert--info {
-	background-color: transparentize($mui-info-color, 0.9);
-	border-color: transparentize($mui-info-color, 0.8);;
-	color: $mui-info-color;
-}
-
 .alert--info .alert__hr {
   	border-top-color: #a6e1ec;
 }
@@ -81,3 +76,10 @@
 .alert--danger .alert__hr {
   	border-top-color: #e4b9c0;
 }
+
+@media(min-width: 768px) {
+    .alert {
+		margin-top: $reflex-cell-spacing;
+		margin-bottom: $reflex-cell-spacing;
+	}
+}
diff --git a/baseframe/templates/baseframe/mui/components.html.jinja2 b/baseframe/templates/baseframe/mui/components.html.jinja2
@@ -2,7 +2,7 @@
   {% with messages = get_flashed_messages(with_categories=true) %}
     {% if messages %}
       {% for category, message in messages %}
-        <div class="alert alert--{{category}} test alert--dismissable">
+        <div class="alert alert--{{category}} alert--dismissable">
           <a class="alert__close" href="javascript:void(0);" aria-label="close"><i class="material-icons">clear</i></a>
           <p class="alert__text">{{ message }}</p>
         </div>