Issue #620: Spike growl CSS modularization

12 files changed, 88 insertions, 24 deletions

diff --git a/web-ui/app/scss/_alerts.scss b/web-ui/app/scss/_alerts.scss
deleted file mode 100644
index cfb31cbe..00000000
--- a/web-ui/app/scss/_alerts.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.message-panel {
-  width: 100%;
-  margin: 10px auto;
-  position: fixed;
-  z-index: 10000;
-  text-align: center;
-  span{
-    padding: 5px 60px;
-    &.success {
-        background: $warning;
-        color: darken($warning, 50%);
-        border: 1px solid darken($warning, 10%);
-        @include box-shadow(1px 1px 3px darken($warning, 60%));
-    }
-    &.error {
-        font-weight: bold;
-        color: white;
-        background: $error;
-        border: 1px solid darken($error, 10%);
-        @include box-shadow(1px 1px 3px darken($error, 60%));
-    }
-  }
-}
diff --git a/web-ui/app/scss/main.scss b/web-ui/app/scss/_main.scss
index b582a5d5..b582a5d5 100644
--- a/web-ui/app/scss/main.scss
+++ b/web-ui/app/scss/_main.scss
diff --git a/web-ui/app/scss/_mixins.scss b/web-ui/app/scss/_mixins.scss
index 5bb84105..4583c55d 100644
--- a/web-ui/app/scss/_mixins.scss
+++ b/web-ui/app/scss/_mixins.scss
@@ -1,4 +1,4 @@
-@import 'colors';
+@import 'base/colors';
 
 // SHARED MIXINS
 @mixin btn-transition {
diff --git a/web-ui/app/scss/_others.scss b/web-ui/app/scss/_others.scss
new file mode 100644
index 00000000..e73ed33d
--- /dev/null
+++ b/web-ui/app/scss/_others.scss
@@ -0,0 +1,7 @@
+.no-padding {
+    padding: 0;
+}
+
+.text-right {
+    text-align: right;
+}
diff --git a/web-ui/app/scss/_colors.scss b/web-ui/app/scss/base/_colors.scss
index de5f76b3..de5f76b3 100644
--- a/web-ui/app/scss/_colors.scss
+++ b/web-ui/app/scss/base/_colors.scss
diff --git a/web-ui/app/scss/opensans.scss b/web-ui/app/scss/base/_fonts.scss
index ada6a025..ada6a025 100644
--- a/web-ui/app/scss/opensans.scss
+++ b/web-ui/app/scss/base/_fonts.scss
diff --git a/web-ui/app/scss/base/_scaffolding.scss b/web-ui/app/scss/base/_scaffolding.scss
new file mode 100644
index 00000000..b8b5fa3b
--- /dev/null
+++ b/web-ui/app/scss/base/_scaffolding.scss
@@ -0,0 +1,10 @@
+html {
+    height: 100% ;
+}
+
+body {
+    min-height: 100% ;
+    overflow: hidden;
+    background: $white;
+}
+
diff --git a/web-ui/app/scss/layout/_message-panel.scss b/web-ui/app/scss/layout/_message-panel.scss
new file mode 100644
index 00000000..e311a9bf
--- /dev/null
+++ b/web-ui/app/scss/layout/_message-panel.scss
@@ -0,0 +1,9 @@
+message-panel-container {
+    overflow: hidden;
+    position: fixed;
+    top: 0;
+    width: 100% ;
+    position: relative;
+    margin-bottom: 0;
+}
+
diff --git a/web-ui/app/scss/style.scss b/web-ui/app/scss/style.scss
new file mode 100644
index 00000000..eeadd662
--- /dev/null
+++ b/web-ui/app/scss/style.scss
@@ -0,0 +1,35 @@
+// vendor stylesheets and resets
+@import "vendor/reset";
+@import "compass/css3";
+@import "vendor/foundation";
+
+// basic configuration
+@import "base/fonts";
+@import "base/colors";
+@import "base/scaffolding";
+
+// templates
+
+
+// mixins
+@import "mixins";
+
+
+// layout
+@import "layout/message-panel";
+
+// modules
+@import "views/message-panel";
+
+
+// misc stuff
+@import "others";
+
+// TODO
+@import "compose";
+@import "mascot";
+@import "read";
+@import "reply";
+@import "security";
+@import "styles";
+
diff --git a/web-ui/app/scss/foundation.scss b/web-ui/app/scss/vendor/_foundation.scss
index 7918cf26..7918cf26 100644
--- a/web-ui/app/scss/foundation.scss
+++ b/web-ui/app/scss/vendor/_foundation.scss
diff --git a/web-ui/app/scss/reset.scss b/web-ui/app/scss/vendor/_reset.scss
index 55f8d054..55f8d054 100644
--- a/web-ui/app/scss/reset.scss
+++ b/web-ui/app/scss/vendor/_reset.scss
diff --git a/web-ui/app/scss/views/_message-panel.scss b/web-ui/app/scss/views/_message-panel.scss
new file mode 100644
index 00000000..4a0a7a6b
--- /dev/null
+++ b/web-ui/app/scss/views/_message-panel.scss
@@ -0,0 +1,26 @@
+.message-panel {
+  width: 100%;
+  margin: 10px auto;
+  position: fixed;
+  z-index: 10000;
+  text-align: center;
+
+  &__growl {
+    padding: 5px 60px;
+
+    &--success {
+      background: $warning;
+      color: darken($warning, 50%);
+      border: 1px solid darken($warning, 10%);
+      @include box-shadow(1px 1px 3px darken($warning, 60%));
+    }
+
+    &--error {
+      font-weight: bold;
+      color: white;
+      background: $error;
+      border: 1px solid darken($error, 10%);
+      @include box-shadow(1px 1px 3px darken($error, 60%));
+    }
+  }
+}