Fix panel

2026-03-15 10:14:29 -07:00 · 2016-10-30 23:35:30 +00:00
parent 385c412242
commit db6380b9fb
4 changed files with 201 additions and 148 deletions
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -4226,32 +4226,54 @@ 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,
+.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: 4px 4px 0 0;
+  border-radius: 3px 3px 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;
-  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;
 }

-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 {
-  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 {
--- a/docs/documentation/components/panel.html
+++ b/docs/documentation/components/panel.html
@@ -13,92 +13,88 @@ 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>
+    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>