From 61c56cc177b1e39a29df1aab2722a394031898ed Mon Sep 17 00:00:00 2001
From: mmk2410 <marcelmichaelkapfer@yahoo.co.nz>
Date: Wed, 1 Apr 2015 19:23:40 +0200
Subject: [PATCH] Switched to SASS

---
 .gitignore        |   2 +
 index.html        |   2 +-
 res/css/main.css  | 177 ++++++++++++++++++++++------------------------
 res/css/main.sass | 112 +++++++++++++++++++++++++++++
 4 files changed, 200 insertions(+), 93 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 res/css/main.sass

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..54da032
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+/res/css/.sass-cache
+/res/css/*.map
diff --git a/index.html b/index.html
index e7b02ab..d52efaa 100644
--- a/index.html
+++ b/index.html
@@ -26,4 +26,4 @@
                 </div>
             </div>
     </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/res/css/main.css b/res/css/main.css
index b1327fd..70b9343 100644
--- a/res/css/main.css
+++ b/res/css/main.css
@@ -1,105 +1,98 @@
-body{
-    font-family: 'Roboto', sans-serif;
-    background: #f4f4f4;
-    margin: 0px;
-}
-.actionbar{
-    width: 100%;
-    height: 60px;
-    position: fixed;
-    background: #03A9F4;
-    top: 0px;
-    left: 0px;
-    padding-left: 340px;
-    color: #fff;
-    font-size: 25px;
-    line-height: 60px;
-    box-shadow: 4px 4px 4px 0px #999;
-}
+body {
+  font-family: "Roboto", sans-serif;
+  background: #f4f4f4;
+  margin: 0px; }
 
-.drawer{
-    width: 320px;
-    top: 0px;
-    left: 0px;
-    position: absolute;
-    height: 100%;
-    background: #FFF;
-    border-right-width: 1px;
-    border-right-color: #cecece;
-    border-right-style: solid;
-}
+.actionbar {
+  width: 100%;
+  height: 60px;
+  position: fixed;
+  background: #03a9f4;
+  top: 0px;
+  left: 0px;
+  padding-left: 340px;
+  color: #fff;
+  font-size: 25px;
+  line-height: 60px;
+  -webkit-box-shadow: 4px 4px 4px 0px #999;
+  -moz-box-shadow: 4px 4px 4px 0px #999;
+  -ms-box-shadow: 4px 4px 4px 0px #999;
+  box-shadow: 4px 4px 4px 0px #999; }
 
-.drawerimg{
-    width: 100%;   
-}
+.drawer {
+  width: 320px;
+  top: 0px;
+  left: 0px;
+  position: absolute;
+  height: 100%;
+  background: #fff;
+  border-right-width: 1px;
+  border-right-color: #cecece;
+  border-right-style: solid; }
 
-.draweritem{
-    height: 72px;
-    line-height: 72px;
-    font-size: 18px;
-    padding-left: 16px;
-}
+.drawerimg {
+  width: 100%; }
 
-.draweritem:hover{
-    background: #e0e0e0;   
-}
+.draweritem {
+  height: 72px;
+  line-height: 72px;
+  font-size: 18px;
+  padding-left: 16px; }
 
-.drawerdivider{
-    border-top-color: #cecece;
-    border-top-width: 1px;
-    border-top-style: solid;
-}
+.draweritem:hover {
+  background: #e0e0e0; }
 
-.main{
-    width: calc(100% - 320px);
-    height: 100%;
-    margin-left: 320px;
-    margin-top: 60px;
-}
+.drawerdivider, .carddivider {
+  border-top-color: #cecece;
+  border-top-width: 1px;
+  border-top-style: solid; }
 
-.card{
-    width: calc(50% - 36px);
-    background: #fff;
-    border-radius: 1px;
-    box-shadow: 0px 0px 2px 2px #cecece;
-    display: inline-block;
-    margin: 16px;
-    float: left;
-}
+.main {
+  width: calc(100% - 320px);
+  height: 100%;
+  margin-left: 320px;
+  margin-top: 60px; }
 
-.input{
-    width: 100%;
-    resize: none;
-    border: 0px;
-    height: 100px;
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    padding: 20px;
-}
+.card {
+  width: calc(50% - 36px);
+  background: #fff;
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  -ms-border-radius: 1px;
+  border-radius: 1px;
+  -webkit-box-shadow: 0px 0px 2px 2px #cecece;
+  -moz-box-shadow: 0px 0px 2px 2px #cecece;
+  -ms-box-shadow: 0px 0px 2px 2px #cecece;
+  box-shadow: 0px 0px 2px 2px #cecece;
+  display: inline-block;
+  margin: 16px;
+  float: left; }
 
-.carddivider{
-    width: 100%;
-    border-top-color: #cecece;
-    border-top-width: 1px;
-    border-top-style: solid;
-}
+.input {
+  width: 100%;
+  resize: none;
+  border: 0px;
+  height: 100px;
+  font-family: "Roboto", sans-serif;
+  font-size: 16px;
+  padding: 20px; }
 
-.cardtext{
-    margin: 20px;   
-}
+.carddivider {
+  width: 100%; }
 
-.cardbuttons{
-    float: right;
-    padding: 20px;
-}
+.cardtext {
+  padding: 20px; }
 
-.cardbutton{
-    min-width: 64px;
-    margin-left: 8px;
-    color: #000000;
-    padding: 5px;
-}
+.cardbuttons {
+  float: right;
+  padding: 20px; }
 
-.cardbutton:hover{
-    background: #e0e0e0;   
-}
\ No newline at end of file
+.cardbutton {
+  min-width: 64px;
+  margin-left: 8px;
+  padding: 5px; }
+
+.cardbutton:hover {
+  background: #e0e0e0; }
+
+/*# sourceMappingURL=main.css.map */
diff --git a/res/css/main.sass b/res/css/main.sass
new file mode 100644
index 0000000..2ea73ad
--- /dev/null
+++ b/res/css/main.sass
@@ -0,0 +1,112 @@
+$font-stack: 'Roboto', sans-serif
+$body-color: #f4f4f4
+$primary-color: #03a9f4
+$drawer-width: 320px
+$actionbar-height: 60px
+$actionbar-shadow: #999
+$divider-color: #cecece
+$drawer-item-height: 72px
+$drawer-item-font-size: 18px
+$hovered-element-color: #e0e0e0
+$card-padding: 20px
+
+=border-radius($radius)
+    -webkit-border-radius: $radius
+    -moz-border-radius: $radius
+    -ms-border-radius: $radius
+    border-radius: $radius
+
+=box-shadow($horizontal, $vertical, $blur, $spread, $color)
+    -webkit-box-shadow: $horizontal $vertical $blur $spread $color
+    -moz-box-shadow: $horizontal $vertical $blur $spread $color
+    -ms-box-shadow: $horizontal $vertical $blur $spread $color
+    box-shadow: $horizontal $vertical $blur $spread $color
+
+body
+    font-family: $font-stack
+    background: $body-color
+    margin: 0px
+
+.actionbar
+    width: 100%
+    height: $actionbar-height
+    position: fixed
+    background: $primary-color
+    top: 0px
+    left: 0px
+    padding-left: $drawer-width + 20
+    color: #fff
+    font-size: 25px
+    line-height: $actionbar-height
+    +box-shadow(4px,4px,4px,0px,$actionbar-shadow)
+
+.drawer
+    width: $drawer-width
+    top: 0px
+    left: 0px
+    position: absolute
+    height: 100%
+    background: #fff
+    border-right-width: 1px
+    border-right-color: $divider-color
+    border-right-style: solid
+
+.drawerimg
+    width: 100%
+
+.draweritem
+    height: $drawer-item-height
+    line-height: $drawer-item-height
+    font-size: $drawer-item-font-size
+    padding-left: 16px
+
+.draweritem:hover
+    background: $hovered-element-color
+
+.drawerdivider
+    border-top-color: $divider-color
+    border-top-width: 1px
+    border-top-style: solid
+
+.main
+    width: calc(100% - 320px)
+    height: 100%
+    margin-left: $drawer-width
+    margin-top: $actionbar-height
+
+.card
+    width: calc(50% - 36px)
+    background: #fff
+    +border-radius(1px)
+    +box-shadow(0px,0px,2px,2px,$divider-color)
+    display: inline-block
+    margin: 16px
+    float: left
+
+.input
+    width: 100%
+    resize: none
+    border: 0px
+    height: 100px
+    font-family: $font-stack
+    font-size: 16px
+    padding: $card-padding
+
+.carddivider
+    @extend .drawerdivider
+    width: 100%
+
+.cardtext
+    padding: $card-padding
+
+.cardbuttons
+    float: right
+    padding: $card-padding
+
+.cardbutton
+    min-width: 64px
+    margin-left: 8px
+    padding: 5px
+
+.cardbutton:hover
+    background: $hovered-element-color