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

docs/documentation/components/panel.html

@@ -13,92 +13,88 @@ doc-subtab: panel
 
     <hr>
 
-    <div class="columns">
+    <div class="content">
-      <div class="column is-4">
+      <p>
-        <nav class="panel">
+        The <code>panel</code> is container for several types:
-          <p class="panel-heading">
+      </p>
-            Repositories
+      <ul>
-          </p>
+        <li>
-          <p class="panel-tabs">
+          <code>panel-heading</code> as the first child
-            <a class="is-active" href="#">All</a>
+        </li>
-            <a href="#">Public</a>
+        <li>
-            <a href="#">Private</a>
+          <code>panel-tabs</code> for navigation
-            <a href="#">Sources</a>
+        </li>
-            <a href="#">Forks</a>
+        <li>
-          </p>
+          <code>panel-block</code> which can contain other elements, like:
-          <a class="panel-block is-active" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma-website</a>
+          <ul>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>bulma</a>
+            <li><code>control</code></li>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>marksheet</a>
+            <li><code>input</code></li>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>daniellowtw/infBoard</a>
+            <li><code>button</code></li>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>jgthms.github.io</a>
+            <li><code>panel-icon</code></li>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-code-fork"></i></span>mojs</a>
+          </ul>
-          <a class="panel-block" href="#"><span class="panel-icon"><i class="fa fa-book"></i></span>grumpy-cat</a>
+        </li>
-          <label class="panel-block">
+      </ul>
-            <input type="checkbox">
+      <p>
-            Remember me
+        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.
-          </label>
+      </p>
-          <div class="panel-block">
+    </div>
-            <button class="button is-primary is-outlined is-fullwidth">
+
-              Reset all filters
+{% capture panel_example %}
-            </button>
-          </div>
-        </nav>
-      </div>
-      <div class="column">
-{% highlight html %}
 <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 class="is-active">All</a>
-    <a href="#">Public</a>
+    <a>Public</a>
-    <a href="#">Private</a>
+    <a>Private</a>
-    <a href="#">Sources</a>
+    <a>Sources</a>
-    <a href="#">Forks</a>
+    <a>Forks</a>
   </p>
-  <a class="panel-block is-active" href="#">
+  <a class="panel-block is-active">
-    <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="#">
+  <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>
+    daniellowtw/infBoard
+  </a>
+  <a class="panel-block">
     <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
@@ -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,20 +1,39 @@
-.panel-icon
+.panel
-  +fa(14px, 16px)
+  font-size: $size-normal
-  color: $text-light
+  &:not(:last-child)
-  float: left
+    margin-bottom: 1.5rem
-  margin: 0 4px 0 -2px
+
-  .fa
+.panel-heading,
-    font-size: inherit
+.panel-tabs,
-    line-height: inherit
+.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: $radius $radius 0 0
-  border-radius: 4px 4px 0 0
   color: $text-strong
-  font-size: $size-medium
+  font-size: 1.25em
-  font-weight: 300
+  font-weight: $weight-light
-  padding: 10px
+  line-height: 1.25
+  padding: 0.5em 0.75em
+
+.panel-tabs
+  align-items: flex-end
+  display: flex
+  font-size: 0.875em
+  justify-content: center
+  a
+    border-bottom: 1px solid $border
+    margin-bottom: -1px
+    padding: 0.5em
+    // Modifiers
+    &.is-active
+      border-bottom-color: $link-active-border
+      color: $link-active
 
 .panel-list
   a
@@ -22,36 +41,34 @@
     &:hover
       color: $link
 
-.panel-tabs
-  display: flex
-  font-size: $size-small
-  padding: 5px 10px 0
-  justify-content: center
-  a
-    border-bottom: 1px solid $border
-    margin-bottom: -1px
-    padding: 5px
-    // Modifiers
-    &.is-active
-      border-bottom-color: $link-active-border
-      color: $link-active
-  &:not(:last-child)
-    border-bottom: 1px solid $border
-
 .panel-block
+  align-items: center
   color: $text-strong
-  display: block
+  display: flex
-  line-height: 16px
+  justify-content: flex-start
-  padding: 10px
+  padding: 0.5em 0.75em
-  &:not(:last-child)
+  input[type="checkbox"]
-    border-bottom: 1px solid $border
+    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
+.panel-icon
-  border: 1px solid $border
+  +fa(14px, 1em)
-  border-radius: $radius-large
+  color: $text-light
-  &:not(:last-child)
+  margin-right: 0.75em
-    margin-bottom: 20px
+  .fa
+    font-size: inherit
+    line-height: inherit