From b8213934a4e8c93510481d49128491510592b454 Mon Sep 17 00:00:00 2001
From: Max Lynch <max@drifty.com>
Date: Sat, 31 Aug 2013 22:35:47 -0500
Subject: [PATCH] Added panels

---
 dist/ionic.css                       | 135 +++++++++++++++++++++++-
 example/menu_controller.html         |   8 +-
 scss/ionic-structure.scss            |   2 +-
 scss/ionic/_mixins.scss              |  18 ++++
 scss/ionic/_structure-variables.scss |  30 +++++-
 scss/ionic/_theme-variables.scss     |   4 +-
 scss/ionic/structure/_menu.scss      |   8 +-
 scss/ionic/structure/_panel.scss     |   4 -
 scss/ionic/structure/_panels.scss    | 152 +++++++++++++++++++++++++++
 scss/ionic/theme/_menu.scss          |   7 +-
 10 files changed, 345 insertions(+), 23 deletions(-)
 delete mode 100644 scss/ionic/structure/_panel.scss
 create mode 100644 scss/ionic/structure/_panels.scss

diff --git a/dist/ionic.css b/dist/ionic.css
index 34d94d99a6..d4698b2932 100644
--- a/dist/ionic.css
+++ b/dist/ionic.css
@@ -1075,9 +1075,137 @@ a.list-item {
   transition: transform 200ms ease; }
 
 .panel {
-  margin: 10px;
-  background-color: #fff; }
+  margin-bottom: 20px;
+  background-color: white;
+  border: 1px solid transparent;
+  border-radius: 2px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); }
 
+.panel-body {
+  padding: 15px;
+  *zoom: 1; }
+  .panel-body:before, .panel-body:after {
+    display: table;
+    content: "";
+    line-height: 0; }
+  .panel-body:after {
+    clear: both; }
+
+.panel > .list-group {
+  margin-bottom: 0; }
+  .panel > .list-group .list-group-item {
+    border-width: 1px 0; }
+    .panel > .list-group .list-group-item:first-child {
+      -webkit-border-top-right-radius: 0;
+      -moz-border-radius-topright: 0;
+      border-top-right-radius: 0;
+      -webkit-border-top-left-radius: 0;
+      -moz-border-radius-topleft: 0;
+      border-top-left-radius: 0; }
+    .panel > .list-group .list-group-item:last-child {
+      border-bottom: 0; }
+
+.panel-heading + .list-group .list-group-item:first-child {
+  border-top-width: 0; }
+
+.panel {
+  /*
+  > .panel-body + .table {
+    border-top: 1px solid @table-border-color;
+  }
+  */ }
+  .panel > .table {
+    margin-bottom: 0; }
+
+.panel-heading {
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  -webkit-border-top-right-radius: 1px;
+  -moz-border-radius-topright: 1px;
+  border-top-right-radius: 1px;
+  -webkit-border-top-left-radius: 1px;
+  -moz-border-radius-topleft: 1px;
+  border-top-left-radius: 1px; }
+
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 16px; }
+  .panel-title > a {
+    color: inherit; }
+
+.panel-footer {
+  padding: 10px 15px;
+  background-color: whitesmoke;
+  border-top: 1px solid #dddddd;
+  -webkit-border-bottom-right-radius: 1px;
+  -moz-border-radius-bottomright: 1px;
+  border-bottom-right-radius: 1px;
+  -webkit-border-bottom-left-radius: 1px;
+  -moz-border-radius-bottomleft: 1px;
+  border-bottom-left-radius: 1px; }
+
+.panel-group .panel {
+  margin-bottom: 0;
+  border-radius: 2px;
+  overflow: hidden; }
+  .panel-group .panel + .panel {
+    margin-top: 5px; }
+.panel-group .panel-heading {
+  border-bottom: 0; }
+  .panel-group .panel-heading + .panel-collapse .panel-body {
+    border-top: 1px solid #dddddd; }
+.panel-group .panel-footer {
+  border-top: 0; }
+  .panel-group .panel-footer + .panel-collapse .panel-body {
+    border-bottom: 1px solid #dddddd; }
+
+.panel-default {
+  border-color: #dddddd; }
+  .panel-default > .panel-heading {
+    color: #333333;
+    background-color: whitesmoke;
+    border-color: #dddddd; }
+    .panel-default > .panel-heading + .panel-collapse .panel-body {
+      border-top-color: #dddddd; }
+  .panel-default > .panel-footer + .panel-collapse .panel-body {
+    border-bottom-color: #dddddd; }
+
+.panel-primary {
+  border-color: #428bca; }
+  .panel-primary > .panel-heading {
+    color: white;
+    background-color: #428bca;
+    border-color: #428bca; }
+    .panel-primary > .panel-heading + .panel-collapse .panel-body {
+      border-top-color: #428bca; }
+  .panel-primary > .panel-footer + .panel-collapse .panel-body {
+    border-bottom-color: #428bca; }
+
+.panel-success {
+  border-color: #5cb85c; }
+  .panel-success > .panel-heading {
+    color: white;
+    background-color: #5cb85c;
+    border-color: #5cb85c; }
+    .panel-success > .panel-heading + .panel-collapse .panel-body {
+      border-top-color: #5cb85c; }
+  .panel-success > .panel-footer + .panel-collapse .panel-body {
+    border-bottom-color: #5cb85c; }
+
+/*
+.panel-warning {
+  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
+}
+.panel-danger {
+  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
+}
+.panel-info {
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+}
+*/
 .ptr-capable {
   -webkit-user-drag: element; }
 
@@ -1374,8 +1502,7 @@ a.list-item {
   color: #333333; }
 
 .ion-panel {
-  background: #eeeeee;
-  width: 270px; }
+  background: #eeeeee; }
 
 .ion-panel-left .ion-panel {
   border-right: 1px solid #bbbbbb; }
diff --git a/example/menu_controller.html b/example/menu_controller.html
index 261ab1b6f0..7b6e963845 100644
--- a/example/menu_controller.html
+++ b/example/menu_controller.html
@@ -27,9 +27,13 @@
       </header>
 
       <main class="content content-padded has-header">
-        <div class="panel">
-          <h2 class="title">What</h2>
+        <div class="panel panel-default">
+          <div class="panel-heading"><h2 class="title">What</h2></div>
+          <div class="panel-body">
+            Is this
+          </div>
         </div>
+
       </main>
 
       <footer class="bar bar-footer bar-dark">
diff --git a/scss/ionic-structure.scss b/scss/ionic-structure.scss
index cc371be124..65bf9dd272 100755
--- a/scss/ionic-structure.scss
+++ b/scss/ionic-structure.scss
@@ -19,7 +19,7 @@
   "ionic/structure/img",
   "ionic/structure/listview",
   "ionic/structure/menu",
-  "ionic/structure/panel",
+  "ionic/structure/panels",
   "ionic/structure/pull-to-refresh",
   "ionic/structure/table",
   "ionic/structure/tabs";
diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss
index be1c991b49..4252db14c7 100644
--- a/scss/ionic/_mixins.scss
+++ b/scss/ionic/_mixins.scss
@@ -732,3 +732,21 @@
 @mixin grid-input-span($columns, $gridColumnWidth, $gridGutterWidth) {
   width: (($gridColumnWidth) * $columns) + ($gridGutterWidth * ($columns - 1)) - 14;
 }
+
+@mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
+  border-color: $border;
+  & > .panel-heading {
+    color: $heading-text-color;
+    background-color: $heading-bg-color;
+    border-color: $heading-border;
+    + .panel-collapse .panel-body {
+      border-top-color: $border;
+    }
+  }
+  & > .panel-footer {
+    + .panel-collapse .panel-body {
+      border-bottom-color: $border;
+    }
+  }
+}
+
diff --git a/scss/ionic/_structure-variables.scss b/scss/ionic/_structure-variables.scss
index baf37df188..6d2d0eef23 100644
--- a/scss/ionic/_structure-variables.scss
+++ b/scss/ionic/_structure-variables.scss
@@ -6,8 +6,14 @@ $fontSizeLarge: ceil($baseFontSize * 1.25);
 
 $baseLineHeight:        1.428571429; // 20/14
 $baseLineHeightComputed:    floor($baseFontSize * $baseLineHeight); // ~20px
+$lineHeightComputed: $baseLineHeightComputed;
 $baseBorderRadius:      2px !default;
 
+$brandPrimary:         #428bca;
+$brandSuccess:         #5cb85c;
+$brandWarning:         #f0ad4e;
+$brandDanger:          #d9534f;
+$brandInfo:            #5bc0de;
 
 // Grays
 // -------------------------
@@ -76,9 +82,29 @@ $listItemBorder: 1px solid #ddd;
 
 
 // Panels
+$panelBg: #fff;
+$panelBorderRadius: 2px;
+$panelInnerBorder: #ddd;
+$panelFooterBg:             #f5f5f5;
+$panelDefaultText:          $grayDark;
+$panelDefaultBorder:        #ddd;
+$panelDefaultHeadingBg:    #f5f5f5;
+
+$panelPrimaryText:          #fff;
+$panelPrimaryBorder:        $brandPrimary;
+$panelPrimaryHeadingBg:    $brandPrimary;
+
+$panelSuccessText:          #fff;
+$panelSuccessBorder:        $brandSuccess;
+$panelSuccessHeadingBg:    $brandSuccess;
+
+
+// Menus
 // -------------------------
-$panelWidth: 270px;
-$panelAnimationSpeed: 200ms;
+$menuWidth: 270px;
+$menuAnimationSpeed: 200ms;
+$menuBackgroundColor:    #eee;
+$menuInsetBorderColor:   #bbb;
 
 
 // GRID
diff --git a/scss/ionic/_theme-variables.scss b/scss/ionic/_theme-variables.scss
index 1e70c4c7e7..37d94bdcf0 100644
--- a/scss/ionic/_theme-variables.scss
+++ b/scss/ionic/_theme-variables.scss
@@ -121,5 +121,5 @@ $infoBorder:              darken(adjust-hue($infoBackground, -10), 7%);
 
 // Panels
 // -------------------------------
-$panelBackgroundColor:    #eee;
-$panelInsetBorderColor:   #bbb;
+$menuBackgroundColor:    #eee;
+$menuInsetBorderColor:   #bbb;
diff --git a/scss/ionic/structure/_menu.scss b/scss/ionic/structure/_menu.scss
index 81c86c93f3..50884d5057 100644
--- a/scss/ionic/structure/_menu.scss
+++ b/scss/ionic/structure/_menu.scss
@@ -6,7 +6,7 @@
   display: none;
   min-height: 100%;
   max-height: 100%;
-  width: $panelWidth;
+  width: $menuWidth;
   position: absolute;
   top: 0;
   bottom: 0;
@@ -22,7 +22,7 @@
 .menu-right { right: 0; }
 
 .menu-animated {
-  -webkit-transition: -webkit-transform $panelAnimationSpeed ease;
-  -moz-transition: -moz-transform $panelAnimationSpeed ease;
-  transition: transform $panelAnimationSpeed ease;
+  -webkit-transition: -webkit-transform $menuAnimationSpeed ease;
+  -moz-transition: -moz-transform $menuAnimationSpeed ease;
+  transition: transform $menuAnimationSpeed ease;
 }
diff --git a/scss/ionic/structure/_panel.scss b/scss/ionic/structure/_panel.scss
deleted file mode 100644
index 8a0b21bec8..0000000000
--- a/scss/ionic/structure/_panel.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.panel {
-  margin: $contentPadding;
-  background-color: #fff;
-}
diff --git a/scss/ionic/structure/_panels.scss b/scss/ionic/structure/_panels.scss
new file mode 100644
index 0000000000..b2d96dfd2e
--- /dev/null
+++ b/scss/ionic/structure/_panels.scss
@@ -0,0 +1,152 @@
+//
+// Panels
+// --------------------------------------------------
+
+
+// Base class
+.panel {
+  margin-bottom: $lineHeightComputed;
+  background-color: $panelBg;
+  border: 1px solid transparent;
+  border-radius: $panelBorderRadius;
+  @include box-shadow(#{0 1px 1px rgba(0,0,0,.05)});
+}
+
+// Panel contents
+.panel-body {
+  padding: 15px;
+  @include clearfix();
+}
+
+
+// List groups in panels
+//
+// By default, space out list group content from panel headings to account for
+// any kind of custom content between the two.
+
+.panel {
+  > .list-group {
+    margin-bottom: 0;
+
+    .list-group-item {
+      border-width: 1px 0;
+
+      // Remove border radius for top one
+      &:first-child {
+        @include border-top-radius(0);
+      }
+      // But keep it for the last one
+      &:last-child {
+        border-bottom: 0;
+      }
+    }
+  }
+}
+// Collapse space between when there's no additional content.
+.panel-heading + .list-group {
+  .list-group-item:first-child {
+    border-top-width: 0;
+  }
+}
+
+
+// Tables in panels
+//
+// Place a non-bordered `.table` within a panel (not within a `.panel-body`) and
+// watch it go full width.
+
+.panel {
+  > .table {
+    margin-bottom: 0;
+  }
+  /*
+  > .panel-body + .table {
+    border-top: 1px solid @table-border-color;
+  }
+  */
+}
+
+
+// Optional heading
+.panel-heading {
+  padding: 10px 15px;
+  border-bottom: 1px solid transparent;
+  @include border-top-radius($panelBorderRadius - 1);
+}
+
+// Within heading, strip any `h*` tag of it's default margins for spacing.
+.panel-title {
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: ceil(($baseFontSize * 1.125));
+  > a {
+    color: inherit;
+  }
+}
+
+// Optional footer (stays gray in every modifier class)
+.panel-footer {
+  padding: 10px 15px;
+  background-color: $panelFooterBg;
+  border-top: 1px solid $panelInnerBorder;
+  @include border-bottom-radius($panelBorderRadius - 1);
+}
+
+
+// Collapsable panels (aka, accordion)
+//
+// Wrap a series of panels in `.panel-group` to turn them into an accordion with
+// the help of our collapse JavaScript plugin.
+
+.panel-group {
+  // Tighten up margin so it's only between panels
+  .panel {
+    margin-bottom: 0;
+    border-radius: $panelBorderRadius;
+    overflow: hidden; // crop contents when collapsed
+    + .panel {
+      margin-top: 5px;
+    }
+  }
+
+  .panel-heading {
+    border-bottom: 0;
+    + .panel-collapse .panel-body {
+      border-top: 1px solid $panelInnerBorder;
+    }
+  }
+  .panel-footer {
+    border-top: 0;
+    + .panel-collapse .panel-body {
+      border-bottom: 1px solid $panelInnerBorder;
+    }
+  }
+
+  // New subcomponent for wrapping collapsable content for proper animations
+  .panel-collapse {
+
+  }
+}
+
+
+// Contextual variations
+.panel-default {
+  @include panel-variant($panelDefaultBorder, $panelDefaultText, $panelDefaultHeadingBg, $panelDefaultBorder);
+}
+.panel-primary {
+  @include panel-variant($panelPrimaryBorder, $panelPrimaryText, $panelPrimaryHeadingBg, $panelPrimaryBorder);
+}
+.panel-success {
+  @include panel-variant($panelSuccessBorder, $panelSuccessText, $panelSuccessHeadingBg, $panelSuccessBorder);
+}
+/*
+.panel-warning {
+  .panel-variant(@panel-warning-border; @panel-warning-text; @panel-warning-heading-bg; @panel-warning-border);
+}
+.panel-danger {
+  .panel-variant(@panel-danger-border; @panel-danger-text; @panel-danger-heading-bg; @panel-danger-border);
+}
+.panel-info {
+  .panel-variant(@panel-info-border; @panel-info-text; @panel-info-heading-bg; @panel-info-border);
+}
+*/
diff --git a/scss/ionic/theme/_menu.scss b/scss/ionic/theme/_menu.scss
index cec45f969b..22f632bf66 100644
--- a/scss/ionic/theme/_menu.scss
+++ b/scss/ionic/theme/_menu.scss
@@ -1,13 +1,12 @@
 
 .ion-panel {
-  background: $panelBackgroundColor;
-  width: $panelWidth;
+  background: $menuBackgroundColor;
 }
 
 .ion-panel-left .ion-panel {
-  border-right: 1px solid $panelInsetBorderColor;
+  border-right: 1px solid $menuInsetBorderColor;
 }
 
 .ion-panel-right .ion-panel {
-  border-left: 1px solid $panelInsetBorderColor;
+  border-left: 1px solid $menuInsetBorderColor;
 }