From 78747fb2b42b94faebddfb86f2e717e9a579c2f0 Mon Sep 17 00:00:00 2001
From: Vladimir Lugovsky <lugovsky.v@gmail.com>
Date: Tue, 5 Jan 2016 17:37:42 +0300
Subject: [PATCH] feat(panel): sample panels page

---
 src/app/pages/panels/panels.html              | 86 +++++++++++++++++--
 .../components/baPanel/baPanel.directive.js   |  2 +-
 .../baPanel/baPanelSelf.directive.js          |  2 +-
 src/sass/app/_typography.scss                 |  8 +-
 src/sass/common.scss                          |  2 +-
 src/sass/theme/_layout.scss                   |  2 +-
 .../theme/bootstrap-overrides/_panel.scss     | 61 +++++++++++--
 src/sass/theme/components/_accordion.scss     |  3 +-
 src/sass/theme/conf/_mixins.scss              | 18 ++++
 src/sass/theme/conf/_variables.scss           | 16 ++--
 10 files changed, 169 insertions(+), 31 deletions(-)

diff --git a/src/app/pages/panels/panels.html b/src/app/pages/panels/panels.html
index c192d8f..a2a23ab 100644
--- a/src/app/pages/panels/panels.html
+++ b/src/app/pages/panels/panels.html
@@ -1,7 +1,83 @@
-<div class="panel panel-danger">
-  <div class="panel-body">
-    <div class="panel-content">
-      A Basic Panel
+<div>
+
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <p>A panel in bootstrap is a bordered box with some padding around its content.</p>
+      <p>Panels are created with the <code>.panel</code> class, and content inside the panel has a
+        <code>.panel-body</code> class. The <code>.panel-default</code> class is used to style the color of the
+        panel. See the last example on this page for more contextual classes.</p>
     </div>
   </div>
-</div>
+
+
+  <div class="panel panel-default">
+    <div class="panel-heading">Panel Heading</div>
+    <div class="panel-body">
+      <p>The <code>.panel-heading</code> class adds a heading to the panel.</p>
+    </div>
+  </div>
+
+
+
+  <div class="panel panel-default">
+    <div class="panel-body">
+      <p>The <code>.panel-footer</code> class adds a footer to the panel.</p>
+    </div>
+    <div class="panel-footer">Panel Footer</div>
+  </div>
+
+  <hr>
+
+  <h2>Panel Group</h2>
+
+  <div class="panel-group">
+    <div class="panel panel-default">
+      <div class="panel-heading">Panel group 1</div>
+      <div class="panel-body">
+        <p>To group many panels together, wrap a <code>&lt;div&gt;</code> with class <code>
+          .panel-group</code> around them.</p>
+      </div>
+    </div>
+    <div class="panel panel-default">
+      <div class="panel-heading">Panel group 2</div>
+      <div class="panel-body">
+        <p>The <code>.panel-group</code> class clears the bottom-margin of each panel.</p>
+      </div>
+    </div>
+  </div>
+
+  <hr>
+
+  <h2>Panels with Contextual Classes</h2>
+  <div class="panel-group">
+    <div class="panel panel-default">
+      <div class="panel-heading">Panel with panel-default class</div>
+      <div class="panel-body">To color the panel, use contextual classes. This is sample <code>.panel-default</code> panel</div>
+    </div>
+
+    <div class="panel panel-primary">
+      <div class="panel-heading">Panel with panel-primary class</div>
+      <div class="panel-body">Sample <code>.panel-primary</code> panel</div>
+    </div>
+
+    <div class="panel panel-success">
+      <div class="panel-heading">Panel with panel-success class</div>
+      <div class="panel-body">Sample <code>.panel-success</code> panel</div>
+    </div>
+
+    <div class="panel panel-info">
+      <div class="panel-heading">Panel with panel-info class</div>
+      <div class="panel-body">Sample <code>.panel-info</code> panel</div>
+    </div>
+
+    <div class="panel panel-warning">
+      <div class="panel-heading">Panel with panel-warning class</div>
+      <div class="panel-body">Sample <code>.panel-warning</code> panel</div>
+    </div>
+
+    <div class="panel panel-danger">
+      <div class="panel-heading">Panel with panel-danger class</div>
+      <div class="panel-body">Sample <code>.panel-danger</code> panel</div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/app/theme/components/baPanel/baPanel.directive.js b/src/app/theme/components/baPanel/baPanel.directive.js
index 77bc422..2945d13 100644
--- a/src/app/theme/components/baPanel/baPanel.directive.js
+++ b/src/app/theme/components/baPanel/baPanel.directive.js
@@ -15,7 +15,7 @@
   function baPanel(baPanel) {
     return angular.extend({}, baPanel, {
       template: function(el, attrs) {
-        var res = '<div class="panel panel-default invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
+        var res = '<div class="panel panel-white invisible ' + (attrs.baPanelClass || '') + '" zoom-in>';
         res += baPanel.template(el, attrs);
         res += '</div>';
         return res;
diff --git a/src/app/theme/components/baPanel/baPanelSelf.directive.js b/src/app/theme/components/baPanel/baPanelSelf.directive.js
index 4359e22..1856348 100644
--- a/src/app/theme/components/baPanel/baPanelSelf.directive.js
+++ b/src/app/theme/components/baPanel/baPanelSelf.directive.js
@@ -15,7 +15,7 @@
   function baPanelSelf(baPanel) {
     return angular.extend({}, baPanel, {
       link: function(scope, el, attrs) {
-        el.addClass('panel panel-default');
+        el.addClass('panel panel-white');
         if (attrs.baPanelClass) {
           el.addClass(attrs.baPanelClass);
         }
diff --git a/src/sass/app/_typography.scss b/src/sass/app/_typography.scss
index f03b501..9648c0b 100644
--- a/src/sass/app/_typography.scss
+++ b/src/sass/app/_typography.scss
@@ -1,6 +1,5 @@
 h1, h2, h3, h4, h5, h6 {
   font-family: $font-family;
-  color: $default-text;
   width: 90%;
   margin-top: 0;
 }
@@ -19,17 +18,17 @@ a {
 
 h1 {
   font-size: 32px;
-  font-weight: 100;
+  font-weight: 400;
 }
 
 h2 {
   font-size: 24px;
-  font-weight: 200;
+  font-weight: 400;
 }
 
 h3 {
   font-size: 20px;
-  font-weight: 300;
+  font-weight: 400;
 }
 
 h4 {
@@ -274,7 +273,6 @@ h5 {
 
 p {
   margin-bottom: 12px;
-  color: $default-text;
   font-family: $font-family;
   font-size: 14px;
 }
diff --git a/src/sass/common.scss b/src/sass/common.scss
index 6e46cc6..e6f67ac 100644
--- a/src/sass/common.scss
+++ b/src/sass/common.scss
@@ -1,2 +1,2 @@
+@import 'theme/conf/mixins';
 @import 'theme/conf/variables';
-@import 'theme/conf/mixins';
\ No newline at end of file
diff --git a/src/sass/theme/_layout.scss b/src/sass/theme/_layout.scss
index f98c43d..9155867 100644
--- a/src/sass/theme/_layout.scss
+++ b/src/sass/theme/_layout.scss
@@ -14,7 +14,7 @@ html, body {
 
 body {
   font: 14px/16px $font-family;
-  color: $default-text;
+  color: white;
   @include main-background();
 }
 
diff --git a/src/sass/theme/bootstrap-overrides/_panel.scss b/src/sass/theme/bootstrap-overrides/_panel.scss
index 4ac75ef..61b80ed 100644
--- a/src/sass/theme/bootstrap-overrides/_panel.scss
+++ b/src/sass/theme/bootstrap-overrides/_panel.scss
@@ -5,6 +5,7 @@ $panel-heading-font-size: 16px;
   border: none;
   border-radius: 0;
   background-color: $panel-bg;
+  color: $default-text;
   position: relative;
   transition: all 0.2s ease;
   margin-bottom: 24px;
@@ -44,19 +45,21 @@ $panel-heading-font-size: 16px;
   height: 100%;
 }
 
-.panel-heading {
+.panel-heading, .panel-footer {
   height: $panel-title-height;
   font-size: $panel-heading-font-size;
 
   $vertical-padding: ($panel-title-height - $panel-heading-font-size) / 2;
   padding: $vertical-padding 22px;
 
-  + .panel-body {
-    padding-top: 0;
-  }
 }
 
-.panel-default {
+.panel-title {
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.panel-white {
   > .panel-heading {
     background-color: transparent;
     border: none;
@@ -64,7 +67,47 @@ $panel-heading-font-size: 16px;
   }
 }
 
-.panel-title {
-  font-weight: 600;
-  text-transform: uppercase;
-}
\ No newline at end of file
+.panel-primary {
+  > .panel-heading {
+    color: $primary;
+    background-color: $primary-bg;
+    border-color: $primary-bg;
+  }
+}
+
+.panel-success {
+  > .panel-heading {
+    color: $success;
+    background-color: $success-bg;
+    border-color: $success-bg;
+  }
+}
+
+.panel-info {
+  > .panel-heading {
+    color: $info;
+    background-color: $info-bg;
+    border-color: $info-bg;
+  }
+}
+
+.panel-warning {
+  > .panel-heading {
+    color: $warning;
+    background-color: $warning-bg;
+    border-color: $warning-bg;
+  }
+}
+
+.panel-danger {
+  > .panel-heading {
+    color: $danger;
+    background-color: $danger-bg;
+    border-color: $danger-bg;
+  }
+}
+
+/*
+.panel-group .panel {
+  border-radius: 0;
+}*/
diff --git a/src/sass/theme/components/_accordion.scss b/src/sass/theme/components/_accordion.scss
index 61208df..94abf35 100644
--- a/src/sass/theme/components/_accordion.scss
+++ b/src/sass/theme/components/_accordion.scss
@@ -1,3 +1,4 @@
+/*
 .panel-group {
   > .panel {
     > .panel-heading {
@@ -24,4 +25,4 @@
   .panel-body {
     padding: 15px;
   }
-}
\ No newline at end of file
+}*/
diff --git a/src/sass/theme/conf/_mixins.scss b/src/sass/theme/conf/_mixins.scss
index c77d9d8..ee411a4 100644
--- a/src/sass/theme/conf/_mixins.scss
+++ b/src/sass/theme/conf/_mixins.scss
@@ -1,3 +1,21 @@
+/// Slightly lighten a color
+/// @access public
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+  @return mix(white, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access public
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+  @return mix(black, $color, $percentage);
+}
+
 @mixin scrollbars($size, $foreground-color, $background-color: mix($foreground-color, white, 50%)) {
   ::-webkit-scrollbar {
     width: $size;
diff --git a/src/sass/theme/conf/_variables.scss b/src/sass/theme/conf/_variables.scss
index 0859fc9..e1dda29 100644
--- a/src/sass/theme/conf/_variables.scss
+++ b/src/sass/theme/conf/_variables.scss
@@ -7,17 +7,19 @@ $warning: #bbcb50!default;
 $danger: #9d498c!default;
 $default: #e9e9e9!default;
 
-$primary-dark: #1694bf;
-$success-dark: #1c4a42;
-$warning-dark: #8b992d;
-$danger-dark: #632e58;
+$primary-dark: shade($primary, 66%);
+$success-dark: shade($success, 66%);
+$warning-dark: shade($warning, 66%);
+$danger-dark: shade($danger, 66%);
 
 $primary-light: #5FBCBB;
 $success-light: #85BA54;
 
-$primary-bg: #C5ECF9;
-$success-bg: #C1DBD7;
-$danger-bg: #E1C8DD;
+$primary-bg: tint($primary, 70%);
+$info-bg: tint($info, 70%);
+$success-bg: tint($success, 70%);
+$warning-bg: tint($warning, 70%);
+$danger-bg: tint($danger, 70%);
 
 $facebook-color: #3b5998;
 $twitter-color: #55acee;