tabs and sass/scss

package.json

@@ -42,14 +42,16 @@
     "karma-webpack": "^1.5.1",
     "ng-annotate-webpack-plugin": "^0.1.2",
     "node-libs-browser": "^1.0.0",
+    "node-sass": "^3.8.0",
     "node.extend": "^1.1.5",
     "phantomjs": "^2.1.7",
     "phantomjs-polyfill": "0.0.2",
     "proxy-middleware": "^0.15.0",
     "raw-loader": "^0.5.1",
+    "sass-loader": "^4.0.0",
     "style-loader": "^0.13.0",
     "url-loader": "^0.5.6",
-    "webpack": "^1.9.5",
+    "webpack": "^1.13.1",
     "webpack-dev-server": "^1.12.1"
   },
   "repository": {

shared.build.config.js

@@ -19,6 +19,8 @@ exports.webpackLoaders = [
         test: /\.html$/, loader: 'html'
     }, {
         test: /\.css$/, loader: 'style!css'
+    }, {
+        test: /\.scss$/, loader: 'style!css!sass'
     }, {
         test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url'
     }, {

src/app/mailbox/inbox/mail/mail.css

@@ -1,68 +0,0 @@
-.email .email-headers {
-    background-color: gray;
-}
-.email .email-tabs {
-    background-color: gray;
-}
-
-.email .tab-content {
-    background-color: white;
-    padding:20px
-}
-
-/* Tab Button (disabled): gray*/
-.email .nav-tabs > li.disabled > a:hover,
-.email .nav-tabs > li.disabled > a:focus {
-    background-color: #e0e0e0;
-}
-
-/* Tab Button (incative): gray*/
-.email .nav-tabs > li > a{
-    background-color: #e0e0e0;
-}
-
-/* Tab Button (active): white*/
-.email .nav-tabs > li.active > a,
-.email .nav-tabs > li.active > a:hover,
-.email .nav-tabs > li.active > a:focus {
-    background-color: white;
-}
-
-
-/*.email-table .email-header {*/
-    /*font-weight: bold;*/
-    /*border-top: 5px solid #7C96AB;*/
-    /*border-bottom: 1px solid #7C96AB;*/
-    /*padding: 10px;*/
-    /*background-color: white;*/
-/*}*/
-
-/*.email-table .email-info {*/
-    /*background-color: white;*/
-/*}*/
-
-
-/*.email-table .email-body {*/
-    /*overflow: hidden;*/
-    /*background-color: white;*/
-/*}*/
-
-/*.info-list {*/
-    /*margin: 0 0 21px;*/
-    /*border-bottom: 1px solid #ccc;*/
-    /*padding: 0 0 16px;*/
-    /*color: #999;*/
-    /*overflow: hidden;*/
-/*}*/
-
-/*.info-list dt {*/
-    /*float: left;*/
-    /*color: #666;*/
-    /*margin: 0 3px 0 0;*/
-/*}*/
-
-/*.info-list dd {*/
-    /*display: block;*/
-    /*overflow: hidden;*/
-/*}*/
-

src/app/mailbox/inbox/mail/mail.html

@@ -1,15 +1,16 @@
-<section ng-hide="$ctrl.deleted">
-    <div class="row email-header">
-        <div class="col-sm-4">{{$ctrl.mail.fromAddress}}</div>
-        <div class="col-sm-6">{{$ctrl.mail.subject}}</div>
-        <div class="col-sm-2">
+<section ng-hide="$ctrl.deleted" class="email">
+    <div class="row ">
+        <div class="col-sm-4 email-summary">{{$ctrl.mail.fromAddress}}</div>
+        <div class="col-sm-8 email-summary">{{$ctrl.mail.subject}}</div>
+        <!--<div class="col-sm-2 email-summary">-->
+            <!--&nbsp;-->
             <!--<button class="btn btn-primary" ng-click="$ctrl.deleteMail($ctrl.mail.id)">Delete</button>-->
-        </div>
+        <!--</div>-->
     </div>
 
-    <div class="row email-info">
-        <div class="col-sm-12">
-            <dl class="info-list">
+    <div class="row">
+        <div class="col-sm-12 email-headers">
+            <dl>
                 <dt>To:</dt>
                 <dd>{{$ctrl.mail.toString}}</dd>
                 <div ng-if="$ctrl.mail.cc" ng-repeat="(address,name) in $ctrl.mail.cc">
@@ -26,8 +27,7 @@
 
         </div>
     </div>
-    <div class="row">
-        <div class="col-sm-12">
+    <div class="row email-tabs">
             <uib-tabset active="1">
 
                 <uib-tab index="1" disable="!$ctrl.showTextButton()">
@@ -41,7 +41,6 @@
                 </uib-tab>
 
             </uib-tabset>
-        </div>
     </div>
 </section>
 

src/app/mailbox/inbox/mail/mail.js

@@ -5,7 +5,7 @@ import Autolinker from 'autolinker';
 
 import template from './mail.html';
 import controller from './mail.controller';
-import './mail.css';
+import './mail.scss';
 
 
 export default angular.module('mailbox.inbox.mail', [uiRouter, ngSanitize])

src/app/mailbox/inbox/mail/mail.scss

@@ -0,0 +1,72 @@
+
+$email-border-color: #7C96AB;
+$email-summary-background: white;
+$email-header-background: white;
+
+$tab-button-color: white;
+$tab-button-color-inactive: #e0e0e0;
+$tab-content-background: white;
+
+.email .email-summary {
+    font-weight: bold;
+    border-top: 5px solid $email-border-color;
+    border-bottom: 1px solid $email-border-color;
+    padding: 10px;
+    background-color: $email-summary-background;
+}
+
+.email .email-headers {
+    background-color: $email-header-background;
+
+    dl {
+        padding: 0 0 4px;
+        color: black;
+        overflow: hidden;
+
+        dt {
+            float: left;
+            color: black;
+            margin: 0 3px 0 0;
+        }
+        dd {
+            display: block;
+            overflow: hidden;
+        }
+    }
+}
+
+
+.email .email-tabs {
+    background-color: $email-header-background;
+    border-bottom: 1px solid $email-border-color;
+
+    .nav {
+        padding-left: 10px;
+    }
+
+    .tab-content {
+        background-color: $tab-content-background;
+        padding: 20px;
+        overflow: hidden;
+    }
+
+    /* Tab Button (disabled)*/
+    .nav-tabs > li.disabled > a:hover,
+    .nav-tabs > li.disabled > a:focus {
+        background-color: $tab-button-color-inactive;
+    }
+
+    /* Tab Button (incative)*/
+    .nav-tabs > li > a{
+        background-color: $tab-button-color-inactive;
+    }
+
+    /* Tab Button (active)*/
+    .nav-tabs > li.active > a,
+    .nav-tabs > li.active > a:hover,
+    .nav-tabs > li.active > a:focus {
+        background-color: $tab-button-color;
+    }
+
+}
+