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

2 files changed, 42 insertions, 30 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
diff --git a/res/css/style.css b/res/css/style.css
index 3e8374e7..e19d6b29 100644
--- a/res/css/style.css
+++ b/res/css/style.css
@@ -408,7 +408,8 @@ input {
 .task-alert {
   position: relative;
   width: 100%;
-  height: 48px;
+  min-height: 48px;
+  text-align: center;
   background-color: #d3f2f8;
   color: #1d6e7f;
   border-top: 1px solid #8eb6bf;
@@ -416,23 +417,28 @@ input {
   z-index: 1; }
 
 .task-desc {
-  position: fixed;
-  width: 100%;
-  height: 20px;
-  top: 98px;
+  display: inline-block;
+  width: 70%;
   text-align: center;
-  font-size: 18px; }
-
-.task-close-text {
-  position: fixed;
-  top: 99px;
-  right: 70px;
-  font-size: 14px; }
+  font-size: 18px;
+  margin: 12px 70px 12px 70px; }
 
 .task-close-button {
-  position: fixed;
-  top: 98px;
-  right: 50px; }
+  cursor: pointer;
+  font-size: 14px;
+  margin: 15px 70px 15px 15px;
+  float: right;
+  width: 70px;
+  text-align: right; }
+
+.task-close-button:after {
+  content: " ";
+  min-height: 20px;
+  padding-right: 20px;
+  margin-left: 4px;
+  background: url(../img/close-alert-button.png);
+  background-position: center;
+  background-repeat: no-repeat; }
 
 .top-bar {
   position: relative;