better CSS for alert - moved button img out of the HTML

1 files changed, 21 insertions, 15 deletions

diff --git a/res/css/partials/task-alert.scss b/res/css/partials/task-alert.scss
index 02ddc202..b33a2da6 100644
--- a/res/css/partials/task-alert.scss
+++ b/res/css/partials/task-alert.scss
@@ -1,7 +1,8 @@
 .task-alert{
   position:relative;
   width: 100%;
-  height:$four-baselines;
+  min-height:$four-baselines;
+  text-align: center;
   background-color: $light-cyan;
   color: $darker-cyan;
   border-top: 1px solid $dark-cyan;
@@ -10,23 +11,28 @@
 }
 
 .task-desc{
-  position:fixed;
-  width:100%;
-  height: $icon-height;
-  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2;
+  display: inline-block;
+  width:70%;
   text-align: center;
   font-size: $h3-size;
+  margin: 12px $doc-margin 12px $doc-margin;
 }
 
-.task-close-text {
-  position:fixed;
-  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2 + 1 ;
-  right: 70px;
+.task-close-button {
+  cursor: pointer;
   font-size: $h4-size;
-}
+  margin: 15px $doc-margin 15px 15px;
+  float: right;
+  width: $doc-margin;
+  text-align: right;
+} 
 
-.task-close-button {
-  position: fixed;
-  top: $three-baselines + $four-baselines + ($four-baselines - $icon-height)/2;
-  right: 50px;
-} 
\ No newline at end of file
+.task-close-button:after {
+  content: " ";
+  min-height: $icon-height;
+  padding-right: $icon-height;
+  margin-left: 4px;
+  background: url(../img/close-alert-button.png);
+  background-position: center;
+  background-repeat: no-repeat;
+}
\ No newline at end of file