Add border-bottom to panel heading.

dev-onenetworkecommerce · Nov 8, 2015 · 5bab465 · 5bab465
1 parent 6106c03
commit 5bab465
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 10 deletions.
diff --git a/docs/dist/script.js b/docs/dist/script.js
@@ -29161,11 +29161,16 @@
 	          ),
 	          _react2["default"].createElement(
 	            "div",
-	            { className: "panel -default" },
+	            { className: "panel" },
+	            _react2["default"].createElement(
+	              "div",
+	              { className: "heading" },
+	              "Heading"
+	            ),
 	            _react2["default"].createElement(
 	              "div",
 	              { className: "body" },
-	              "Basic Panel Example"
+	              "I'm the body!"
 	            )
 	          )
 	        ),

diff --git a/docs/dist/style.css b/docs/dist/style.css
diff --git a/docs/sections/Docs-Panels/index.jsx b/docs/sections/Docs-Panels/index.jsx
@@ -8,17 +8,18 @@ export default class Panels extends React.Component {
 
         <section className="doc-bottom-space-large">
           <h3 className="doc-heading">Basic Panel</h3>
-          <div className="panel -default">
-            <div className="body">Basic Panel Example</div>
+          <div className="panel">
+            <div className="heading">Heading</div>
+            <div className="body">I'm the body!</div>
           </div>
         </section>
 
         <section className="doc-bottom-space-large">
           <h3 className="doc-heading"> Panel With Consecutive Body </h3>
           <div className="panel -default">
-            <div className="body"> Basic Panel Example </div> 
-            <div className="body"> Basic Panel Example </div> 
-          </div> 
+            <div className="body"> Basic Panel Example </div>
+            <div className="body"> Basic Panel Example </div>
+          </div>
         </section>
 
         <section className="doc-bottom-space-large">

diff --git a/styles/components/_panel.scss b/styles/components/_panel.scss
@@ -24,6 +24,7 @@
     padding: 10px 15px;
     border-top-left-radius: $border-radius-base;
     border-top-right-radius: $border-radius-base;
+    border-bottom: 1px solid $brand-gray;
   }
 
   > .heading > * {
@@ -48,12 +49,12 @@
   // in the discussion, it wasn't decided whether to
   // include the .-bordered modifier here (meaning, we're only dealing with .table)
   // refactor soon.
-  > .table.-bordered > thead > tr > th:first-child, 
+  > .table.-bordered > thead > tr > th:first-child,
   > .table.-bordered > tbody > tr > td:first-child {
     border-left: 0;
   }
 
-  > .table.-bordered > thead > tr > th:last-child, 
+  > .table.-bordered > thead > tr > th:last-child,
   > .table.-bordered > tbody > tr > td:last-child {
     border-right: 0;
   }