mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Fix #1168
This commit is contained in:
Jeremy Thomas
parent
0e869c8426
commit
e49e76ef28
@ -11,6 +11,7 @@
|
||||
|
||||
### Issues closed
|
||||
|
||||
* #1168 Undefined variable: `$navbar-item`
|
||||
* #331 Support for third party icons
|
||||
* #930 Remove `vertical-align: top` for icons
|
||||
* #735 Font awesome custom `font-size`
|
||||
|
||||
74
docs/_includes/examples/navbar-color.html
Normal file
74
docs/_includes/examples/navbar-color.html
Normal file
@ -0,0 +1,74 @@
|
||||
<nav class="navbar is-{{ include.color }}">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColor{{ include.color }}-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor{{ include.color }}-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link" href="/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://localhost:4000&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
File diff suppressed because it is too large
Load Diff
@ -68,7 +68,7 @@ variables:
|
||||
{% capture navbar_brand_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<!-- navbar items, navbar burger ... -->
|
||||
<!-- navbar items, navbar burger... -->
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
@ -100,7 +100,7 @@ variables:
|
||||
{% capture navbar_menu_example %}
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<!-- navbar items, navbar burger ... -->
|
||||
<!-- navbar items, navbar burger... -->
|
||||
</div>
|
||||
<div class="navbar-menu">
|
||||
<!-- navbar start, navbar end -->
|
||||
@ -517,129 +517,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
});
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_color_default %}
|
||||
<nav class="navbar">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColorDefault-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColorDefault-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture navbar_color_primary %}
|
||||
<nav class="navbar is-info">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo-white.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
|
||||
</a>
|
||||
<div class="navbar-burger burger" data-target="navMenuColor-example">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="navMenuColor-example" class="navbar-menu">
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="{{ site.url }}/">
|
||||
Home
|
||||
</a>
|
||||
<div class="navbar-item has-dropdown is-active">
|
||||
<a class="navbar-link" href="/documentation/overview/start/">
|
||||
Docs
|
||||
</a>
|
||||
<div class="navbar-dropdown">
|
||||
<a class="navbar-item" href="/documentation/overview/start/">
|
||||
Overview
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/modifiers/syntax/">
|
||||
Modifiers
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/columns/basics/">
|
||||
Columns
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/layout/container/">
|
||||
Layout
|
||||
</a>
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/form/general/">
|
||||
Form
|
||||
</a>
|
||||
<hr class="navbar-divider">
|
||||
<a class="navbar-item" href="{{ site.url }}/documentation/elements/box/">
|
||||
Elements
|
||||
</a>
|
||||
<a class="navbar-item is-active" href="{{ site.url }}/documentation/components/breadcrumb/">
|
||||
Components
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="navbar-end">
|
||||
<div class="navbar-item">
|
||||
<div class="field is-grouped">
|
||||
<p class="control">
|
||||
<a class="bd-tw-button button" data-social-network="Twitter" data-social-action="tweet" data-social-target="http://localhost:4000" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://localhost:4000&via=jgthms">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
<span>
|
||||
Tweet
|
||||
</span>
|
||||
</a>
|
||||
</p>
|
||||
<p class="control">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.1.zip">
|
||||
<span class="icon">
|
||||
<i class="fa fa-download"></i>
|
||||
</span>
|
||||
<span>Download</span>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% capture navbar_color_markup %}
|
||||
<nav class="navbar is-primary">
|
||||
<!-- navbar brand, navbar menu... -->
|
||||
</nav>
|
||||
{% endcapture %}
|
||||
|
||||
@ -717,18 +597,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_color_default }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_default }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_color_primary }}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
|
||||
|
||||
{% include anchor.html name="Navbar brand" %}
|
||||
|
||||
<div class="content">
|
||||
@ -1144,11 +1012,27 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
<span class="tag is-info">0.5.2</span>
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{{ navbar_color_primary }}
|
||||
{% include examples/navbar-color.html color="primary" %}
|
||||
</div>
|
||||
|
||||
{% highlight html %}{{ navbar_color_primary }}{% endhighlight %}
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="info" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="success" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="warning" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-example is-paddingless">
|
||||
{% include examples/navbar-color.html color="danger" %}
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
|
||||
|
||||
@ -48,23 +48,20 @@ $navbar-divider-background-color: $border !default
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
& > .navbar-item,
|
||||
& > .navbar-link
|
||||
.navbar-link
|
||||
color: $color-invert
|
||||
& > a.navbar-item,
|
||||
& > .navbar-link
|
||||
.navbar-link
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: darken($color, 2.5%)
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-link
|
||||
&::after
|
||||
border-color: $color-invert
|
||||
// .navbar-dropdown a.navbar-item:not(.is-active):not(:hover),
|
||||
// .navbar-dropdown .navbar-item:not(a)
|
||||
// color: $color
|
||||
.navbar-item.has-dropdown:hover .navbar-link,
|
||||
.navbar-item.has-dropdown.is-active .navbar-link
|
||||
background-color: darken($color, 2.5%)
|
||||
background-color: darken($color, 5%)
|
||||
color: $color-invert
|
||||
.navbar-dropdown
|
||||
a.navbar-item
|
||||
|
||||
Loading…
Reference in New Issue
Block a user