library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Fix #841, Fix #842

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-16 19:44:28 +01:00
parent 2444c7ba2c
commit 3506d964ec
9 changed files with 1749 additions and 585 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@ -4,6 +4,8 @@
### Issues closed
* Fix #842 Adding modifiers in `navbar`
* Fix #841 `container` as direct child of `navbar` moves `navbar-menu` below `navbar-brand`
* Fix #861 Box in hero as text and background white
* Fix #852 charset and version number
* Fix #856 JavaScript `nav-burger` example

30
docs/_includes/subnav-components.html
View File

@ -1,47 +1,45 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<div class="navbar-brand">
{% if site.vernum >= 43 %}
<a class="nav-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'breadcrumb' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/breadcrumb/">
Breadcrumb
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
</a>
{% endif %}
<a class="nav-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'card' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/card/">
Card
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/level/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'level' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/level/">
Level
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/media-object/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'media-object' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/media-object/">
Media object
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/menu/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'menu' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/menu/">
Menu
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'message' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/message/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'message' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/message/">
Message
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'modal' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/modal/">
Modal
</a>
{% if site.vernum >= 43 %}
<a class="nav-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'navbar' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/navbar/">
Navbar
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
</a>
{% else %}
<a class="nav-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'nav' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/nav/">
Nav
</a>
{% endif %}
<a class="nav-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'pagination' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/pagination/">
Pagination
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'panel' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/panel/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'panel' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/panel/">
Panel
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'tabs' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/tabs/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'tabs' %}is-active{% endif %}" href="{{ site.url }}/documentation/components/tabs/">
Tabs
</a>
</div>

28
docs/_includes/subnav-elements.html
View File

@ -1,40 +1,40 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
<div class="navbar-brand">
<a class="navbar-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
Box
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'button' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/button/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'button' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/button/">
Button
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'content' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/content/">
Content
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'delete' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/delete/">
Delete
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'form' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/form/">
Form
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'icon' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/icon/">
Icon
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'image' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/image/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'image' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/image/">
Image
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'notification' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/notification/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'notification' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/notification/">
Notification
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'progress' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/progress/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'progress' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/progress/">
Progress
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'table' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/table/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'table' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/table/">
Table
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'tag' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/tag/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'tag' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/tag/">
Tag
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'title' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/title/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'title' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/title/">
Title
</a>
</div>

8
docs/_includes/subnav-grid.html
View File

@ -1,10 +1,10 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
<div class="navbar-brand">
<a class="navbar-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
Columns
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/tiles/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'tiles' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/tiles/">
Tiles
</a>
</div>

12
docs/_includes/subnav-layout.html
View File

@ -1,16 +1,16 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
<div class="navbar-brand">
<a class="navbar-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
Container
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/hero/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'hero' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/hero/">
Hero
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/section/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'section' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/section/">
Section
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/footer/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'footer' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/footer/">
Footer
</a>
</div>

10
docs/_includes/subnav-modifiers.html
View File

@ -1,13 +1,13 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
<div class="navbar-brand">
<a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
Syntax
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/helpers/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/helpers/">
Helpers
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsive-helpers' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/responsive-helpers/">
Responsive helpers
</a>
</div>

20
docs/_includes/subnav-overview.html
View File

@ -1,28 +1,28 @@
<nav class="nav has-shadow">
<nav class="navbar has-shadow">
<div class="container">
<div class="nav-left">
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
<div class="navbar-brand">
<a class="navbar-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
Start
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'customize' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/customize/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'customize' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/customize/">
Customize
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'classes' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/classes/">
Classes
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'modular' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/modular/">
Modular
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/responsiveness/">
Responsiveness
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'functions' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/functions/">
Functions
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'variables' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/variables/">
Variables
</a>
<a class="nav-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
<a class="navbar-item is-tab {% if page.doc-subtab == 'mixins' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/mixins/">
Mixins
</a>
</div>

2192
docs/css/bulma-docs.css
View File

File diff suppressed because one or more lines are too long

32
sass/components/navbar.sass
View File

@ -7,6 +7,12 @@ $navbar-item-hover-background: $background !default
$navbar-item-active: $black !default
$navbar-item-active-background: transparent !default
$navbar-tab-hover-background: transparent !default
$navbar-tab-hover-border: $primary !default
$navbar-tab-active: $primary !default
$navbar-tab-active-background: transparent !default
$navbar-tab-active-border: $primary !default
$navbar-dropdown-background: $white !default
$navbar-dropdown-border: $border !default
$navbar-dropdown-offset: -4px !default
@ -25,11 +31,21 @@ $navbar-divider-background: $border !default
background-color: $navbar-background
min-height: $navbar-height
position: relative
& > .container
align-items: stretch
display: flex
min-height: $navbar-height
width: 100%
&.has-shadow
box-shadow: 0 2px 3px rgba($black, 0.1)
.navbar-brand
+overflow-touch
align-items: stretch
height: $navbar-height
display: flex
min-height: $navbar-height
overflow-x: auto
overflow-y: hidden
.navbar-burger
+hamburger($navbar-height)
@ -60,6 +76,18 @@ a.navbar-item,
max-height: 1.75rem
&.has-dropdown
padding: 0
&.is-tab
border-bottom: 1px solid transparent
min-height: $navbar-height
padding-bottom: calc(0.5rem - 1px)
&:hover
background-color: $navbar-tab-hover-background
border-bottom-color: $navbar-tab-hover-border
&.is-active
background-color: $navbar-tab-active-background
border-bottom: 3px solid $navbar-tab-active-border
color: $navbar-tab-active
padding-bottom: calc(0.5rem - 3px)
.navbar-content
flex-grow: 1
@ -102,7 +130,7 @@ a.navbar-item,
align-items: stretch
display: flex
.navbar
height: $navbar-height
min-height: $navbar-height
&.is-transparent
a.navbar-item,
.navbar-link