mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix panel
This commit is contained in:
Jeremy Thomas
parent
385c412242
commit
db6380b9fb
@ -23,6 +23,7 @@
|
||||
* Fix `.nav`
|
||||
* Fix `.pagination`
|
||||
* Fix `.tabs`
|
||||
* Fix `.panel`
|
||||
|
||||
## 0.2.2
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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><a></code> or a label <code><label></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>
|
||||
|
||||
@ -1,20 +1,39 @@
|
||||
.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
|
||||
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: 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
|
||||
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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user