Fix panel

CHANGELOG.md

@@ -23,6 +23,7 @@
 * Fix `.nav`
 * Fix `.pagination`
 * Fix `.tabs`
+* Fix `.panel`
 
 ## 0.2.2
 

docs/css/bulma-docs.css

@@ -4226,53 +4226,49 @@ a.nav-item.is-tab.is-active {
   }
 }
 
-.panel-icon {
-  display: inline-block;
-  font-size: 14px;
-  height: 16px;
-  line-height: 16px;
-  text-align: center;
-  vertical-align: top;
-  width: 16px;
-  color: #7a7a7a;
-  float: left;
-  margin: 0 4px 0 -2px;
+.panel {
+  font-size: 1rem;
 }
 
-.panel-icon .fa {
-  font-size: inherit;
-  line-height: inherit;
+.panel:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.panel-heading {
-  background-color: whitesmoke;
+.panel-heading,
+.panel-tabs,
+.panel-block {
   border-bottom: 1px solid #dbdbdb;
-  border-radius: 4px 4px 0 0;
-  color: #363636;
-  font-size: 1.25rem;
-  font-weight: 300;
-  padding: 10px;
+  border-left: 1px solid #dbdbdb;
+  border-right: 1px solid #dbdbdb;
 }
 
-.panel-list a {
-  color: #4a4a4a;
+.panel-heading:first-child,
+.panel-tabs:first-child,
+.panel-block:first-child {
+  border-top: 1px solid #dbdbdb;
 }
 
-.panel-list a:hover {
-  color: #00d1b2;
+.panel-heading {
+  background-color: whitesmoke;
+  border-radius: 3px 3px 0 0;
+  color: #363636;
+  font-size: 1.25em;
+  font-weight: 300;
+  line-height: 1.25;
+  padding: 0.5em 0.75em;
 }
 
 .panel-tabs {
+  align-items: flex-end;
   display: flex;
-  font-size: 0.75rem;
-  padding: 5px 10px 0;
+  font-size: 0.875em;
   justify-content: center;
 }
 
 .panel-tabs a {
   border-bottom: 1px solid #dbdbdb;
   margin-bottom: -1px;
-  padding: 5px;
+  padding: 0.5em;
 }
 
 .panel-tabs a.is-active {
@@ -4280,32 +4276,66 @@ a.nav-item.is-tab.is-active {
   color: #363636;
 }
 
-.panel-tabs:not(:last-child) {
-  border-bottom: 1px solid #dbdbdb;
+.panel-list a {
+  color: #4a4a4a;
+}
+
+.panel-list a:hover {
+  color: #00d1b2;
 }
 
 .panel-block {
+  align-items: center;
   color: #363636;
-  display: block;
-  line-height: 16px;
-  padding: 10px;
+  display: flex;
+  justify-content: flex-start;
+  padding: 0.5em 0.75em;
 }
 
-.panel-block:not(:last-child) {
-  border-bottom: 1px solid #dbdbdb;
+.panel-block input[type="checkbox"] {
+  margin-right: 0.75em;
+}
+
+.panel-block > .control {
+  flex-grow: 1;
+  flex-shrink: 1;
+  width: 100%;
+}
+
+.panel-block.is-active {
+  border-left-color: #00d1b2;
+  color: #363636;
 }
 
-a.panel-block:hover {
+.panel-block.is-active .panel-icon {
+  color: #00d1b2;
+}
+
+a.panel-block,
+label.panel-block {
+  cursor: pointer;
+}
+
+a.panel-block:hover,
+label.panel-block:hover {
   background-color: whitesmoke;
 }
 
-.panel {
-  border: 1px solid #dbdbdb;
-  border-radius: 5px;
+.panel-icon {
+  display: inline-block;
+  font-size: 14px;
+  height: 1em;
+  line-height: 1em;
+  text-align: center;
+  vertical-align: top;
+  width: 1em;
+  color: #7a7a7a;
+  margin-right: 0.75em;
 }
 
-.panel:not(:last-child) {
-  margin-bottom: 20px;
+.panel-icon .fa {
+  font-size: inherit;
+  line-height: inherit;
 }
 
 .tabs {

docs/documentation/components/panel.html

@@ -13,91 +13,87 @@ doc-subtab: panel
 
     <hr>
 
-    <div class="columns">
-      <div class="column is-4">
-        <nav class="panel">
-          <p class="panel-heading">
-            Repositories
-          </p>
-          <p class="panel-tabs">
-            <a class="is-active" href="#">All</a>
-            <a href="#">Public</a>
-            <a href="#">Private</a>
-            <a href="#">Sources</a>
-            <a href="#">Forks</a>
-          </p>
-          <a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</a>
-          <label class="panel-block">
-            <input type="checkbox">
-            Remember me
-          </label>
-          <div class="panel-block">
-            <button class="button is-primary is-outlined is-fullwidth">
-              Reset all filters
-            </button>
-          </div>
-        </nav>
-      </div>
-      <div class="column">
-{% highlight html %}
+    <div class="content">
+      <p>
+        The <code>panel</code> is container for several types:
+      </p>
+      <ul>
+        <li>
+          <code>panel-heading</code> as the first child
+        </li>
+        <li>
+          <code>panel-tabs</code> for navigation
+        </li>
+        <li>
+          <code>panel-block</code> which can contain other elements, like:
+          <ul>
+            <li><code>control</code></li>
+            <li><code>input</code></li>
+            <li><code>button</code></li>
+            <li><code>panel-icon</code></li>
+          </ul>
+        </li>
+      </ul>
+      <p>
+        The <code>panel-block</code> can be an anchor tag <code>&lt;a&gt;</code> or a label <code>&lt;label&gt;</code> with a checkbox inside.
+      </p>
+    </div>
+
+{% capture panel_example %}
 <nav class="panel">
   <p class="panel-heading">
     Repositories
   </p>
+  <div class="panel-block">
+    <p class="control has-icon">
+      <input class="input is-small" type="text" placeholder="Search">
+      <span class="icon is-small">
+        <i class="fa fa-search"></i>
+      </span>
+    </p>
+  </div>
   <p class="panel-tabs">
-    <a class="is-active" href="#">All</a>
-    <a href="#">Public</a>
-    <a href="#">Private</a>
-    <a href="#">Sources</a>
-    <a href="#">Forks</a>
+    <a class="is-active">All</a>
+    <a>Public</a>
+    <a>Private</a>
+    <a>Sources</a>
+    <a>Forks</a>
   </p>
-  <a class="panel-block is-active" href="#">
-    <span class="panel-icon">
-      <i class="fa fa-book"></i>
-    </span>
-    bulma-website
-  </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block is-active">
     <span class="panel-icon">
       <i class="fa fa-book"></i>
     </span>
     bulma
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-book"></i>
     </span>
     marksheet
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-code-fork"></i>
+      <i class="fa fa-book"></i>
     </span>
-    daniellowtw/infBoard
+    minireset.css
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-book"></i>
     </span>
     jgthms.github.io
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
       <i class="fa fa-code-fork"></i>
     </span>
-    mojs
+    daniellowtw/infBoard
   </a>
-  <a class="panel-block" href="#">
+  <a class="panel-block">
     <span class="panel-icon">
-      <i class="fa fa-book"></i>
+      <i class="fa fa-code-fork"></i>
     </span>
-    grumpy-cat
+    mojs
   </a>
   <label class="panel-block">
     <input type="checkbox">
@@ -109,8 +105,17 @@ doc-subtab: panel
     </button>
   </div>
 </nav>
+{% endcapture %}
+    <div class="columns">
+      <div class="column is-4">
+{{panel_example}}
+      </div>
+      <div class="column">
+{% highlight html %}
+{{panel_example}}
 {% endhighlight %}
       </div>
     </div>
+
   </div>
 </section>

sass/components/panel.sass

@@ -1,57 +1,74 @@
-.panel-icon
-  +fa(14px, 16px)
-  color: $text-light
-  float: left
-  margin: 0 4px 0 -2px
-  .fa
-    font-size: inherit
-    line-height: inherit
+.panel
+  font-size: $size-normal
+  &:not(:last-child)
+    margin-bottom: 1.5rem
+
+.panel-heading,
+.panel-tabs,
+.panel-block
+  border-bottom: 1px solid $border
+  border-left: 1px solid $border
+  border-right: 1px solid $border
+  &:first-child
+    border-top: 1px solid $border
 
 .panel-heading
   background-color: $background
-  border-bottom: 1px solid $border
-  border-radius: 4px 4px 0 0
+  border-radius: $radius $radius 0 0
   color: $text-strong
-  font-size: $size-medium
-  font-weight: 300
-  padding: 10px
-
-.panel-list
-  a
-    color: $text
-    &:hover
-      color: $link
+  font-size: 1.25em
+  font-weight: $weight-light
+  line-height: 1.25
+  padding: 0.5em 0.75em
 
 .panel-tabs
+  align-items: flex-end
   display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
+  font-size: 0.875em
   justify-content: center
   a
     border-bottom: 1px solid $border
     margin-bottom: -1px
-    padding: 5px
+    padding: 0.5em
     // Modifiers
     &.is-active
       border-bottom-color: $link-active-border
       color: $link-active
-  &:not(:last-child)
-    border-bottom: 1px solid $border
+
+.panel-list
+  a
+    color: $text
+    &:hover
+      color: $link
 
 .panel-block
+  align-items: center
   color: $text-strong
-  display: block
-  line-height: 16px
-  padding: 10px
-  &:not(:last-child)
-    border-bottom: 1px solid $border
+  display: flex
+  justify-content: flex-start
+  padding: 0.5em 0.75em
+  input[type="checkbox"]
+    margin-right: 0.75em
+  & > .control
+    flex-grow: 1
+    flex-shrink: 1
+    width: 100%
+  &.is-active
+    border-left-color: $link
+    color: $link-active
+    .panel-icon
+      color: $link
 
-a.panel-block
+a.panel-block,
+label.panel-block
+  cursor: pointer
   &:hover
     background-color: $background
 
-.panel
-  border: 1px solid $border
-  border-radius: $radius-large
-  &:not(:last-child)
-    margin-bottom: 20px
+.panel-icon
+  +fa(14px, 1em)
+  color: $text-light
+  margin-right: 0.75em
+  .fa
+    font-size: inherit
+    line-height: inherit