_components.scss in workarea-admin-3.5.0.beta.1

- old
+ new

@@ -1,34 +1,47 @@
 /*------------------------------------*\
     #LAYOUT
 \*------------------------------------*/
+
+$email-container-font-color: $dark-gray !default;
 $email-container-main-bg-color: $white !default;
+$email-container-main-shadow-color: $light-gray !default;
+$email-container-main-accent-color: $blue !default;
 
 .email-container {
-    margin: auto;
+    margin: 0 auto;
     text-align: center;
+    font-family: $font-family;
+    color: $email-container-font-color;
 }
 
 .email-container--main {
+    box-shadow: 0 0 10px $email-container-main-shadow-color;
+    border-bottom: 8px solid $email-container-main-accent-color;
+
     & > tr > td {
         background: $email-container-main-bg-color;
-        text-align: center;
+        text-align: left;
         vertical-align: top;
-        padding: $spacing-unit;
+        padding: $spacing-unit * 3;
     }
 }
 
 .email-header {
-    padding: ($spacing-unit * 2) 0;
+    padding: ($spacing-unit * 4) 0;
 }
 
 .email-footer {
     padding: ($spacing-unit * 4) $spacing-unit;
     font-family: $font-family;
 }
 
+.section {
+    padding: ($spacing-unit * 2) 0;
+}
 
+
 /*------------------------------------*\
     #PREHEADER-TEXT
 \*------------------------------------*/
 .preheader-text {
     display: none;
@@ -45,14 +58,18 @@
 
 /*------------------------------------*\
     #LOGO
 \*------------------------------------*/
 .logo {
+    display: inline-block;
+    vertical-align: top;
     text-decoration: none;
 }
 
-    .logo__image {}
+    .logo__image {
+        display: block;
+    }
 
 
 /*------------------------------------*\
     #PRODUCT-GRID
 \*------------------------------------*/
@@ -110,5 +127,49 @@
     th {
         background: $item-table-th-bg-color;
     }
 }
 
+/*------------------------------------*\
+    #BOX
+\*------------------------------------*/
+$box-border-color: $blue !default;
+
+.box {
+    border: 1px solid $box-border-color;
+    border-left-width: 8px;
+    padding: $spacing-unit * 2;
+    margin: ($spacing-unit * 4) 0;
+}
+
+/*------------------------------------*\
+    #COMMENT
+\*------------------------------------*/
+
+.comment {
+    @extend .box;
+    margin: $spacing-unit * 4;
+}
+
+    .comment__author-info {
+        display: block;
+        font-size: $font-size - 2;
+        font-style: italic;
+        margin-top: $spacing-unit * 2;
+    }
+
+
+/*------------------------------------*\
+    #BUTTON
+\*------------------------------------*/
+$button-color: $white !default;
+$button-bg-color: $blue !default;
+
+.button {
+    display: inline-block;
+    padding: $spacing-unit ($spacing-unit * 4);
+    background: $button-bg-color;
+    color: $button-color;
+    text-decoration: none;
+    font-weight: bold;
+    border-radius: 11px;
+}