mirror of
https://github.com/jgthms/bulma
synced 2026-03-21 20:54:30 -07:00
Fix #1168
This commit is contained in:
Jeremy Thomas
@@ -11,6 +11,7 @@
|
|||||||
|
|
||||||
### Issues closed
|
### Issues closed
|
||||||
|
|
||||||
|
* #1168 Undefined variable: `$navbar-item`
|
||||||
* #331 Support for third party icons
|
* #331 Support for third party icons
|
||||||
* #930 Remove `vertical-align: top` for icons
|
* #930 Remove `vertical-align: top` for icons
|
||||||
* #735 Font awesome custom `font-size`
|
* #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 %}
|
{% capture navbar_brand_example %}
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<!-- navbar items, navbar burger ... -->
|
<!-- navbar items, navbar burger... -->
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
@@ -100,7 +100,7 @@ variables:
|
|||||||
{% capture navbar_menu_example %}
|
{% capture navbar_menu_example %}
|
||||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||||
<div class="navbar-brand">
|
<div class="navbar-brand">
|
||||||
<!-- navbar items, navbar burger ... -->
|
<!-- navbar items, navbar burger... -->
|
||||||
</div>
|
</div>
|
||||||
<div class="navbar-menu">
|
<div class="navbar-menu">
|
||||||
<!-- navbar start, navbar end -->
|
<!-- navbar start, navbar end -->
|
||||||
@@ -517,129 +517,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
});
|
});
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% capture navbar_color_default %}
|
{% capture navbar_color_markup %}
|
||||||
<nav class="navbar">
|
<nav class="navbar is-primary">
|
||||||
<div class="navbar-brand">
|
<!-- navbar brand, navbar menu... -->
|
||||||
<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>
|
|
||||||
</nav>
|
</nav>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
@@ -717,18 +597,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</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" %}
|
{% include anchor.html name="Navbar brand" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
@@ -1144,11 +1012,27 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
<span class="tag is-info">0.5.2</span>
|
<span class="tag is-info">0.5.2</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
|
||||||
|
|
||||||
<div class="bd-example is-paddingless">
|
<div class="bd-example is-paddingless">
|
||||||
{{ navbar_color_primary }}
|
{% include examples/navbar-color.html color="primary" %}
|
||||||
</div>
|
</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 %}
|
{% include variables.html %}
|
||||||
|
|
||||||
|
|||||||
@@ -48,23 +48,20 @@ $navbar-divider-background-color: $border !default
|
|||||||
.navbar-start,
|
.navbar-start,
|
||||||
.navbar-end
|
.navbar-end
|
||||||
& > .navbar-item,
|
& > .navbar-item,
|
||||||
& > .navbar-link
|
.navbar-link
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
& > a.navbar-item,
|
& > a.navbar-item,
|
||||||
& > .navbar-link
|
.navbar-link
|
||||||
&:hover,
|
&:hover,
|
||||||
&.is-active
|
&.is-active
|
||||||
background-color: darken($color, 2.5%)
|
background-color: darken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.navbar-link
|
.navbar-link
|
||||||
&::after
|
&::after
|
||||||
border-color: $color-invert
|
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:hover .navbar-link,
|
||||||
.navbar-item.has-dropdown.is-active .navbar-link
|
.navbar-item.has-dropdown.is-active .navbar-link
|
||||||
background-color: darken($color, 2.5%)
|
background-color: darken($color, 5%)
|
||||||
color: $color-invert
|
color: $color-invert
|
||||||
.navbar-dropdown
|
.navbar-dropdown
|
||||||
a.navbar-item
|
a.navbar-item
|
||||||
|
|||||||
Reference in New Issue
Block a user