library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +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 ### 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 #861 Box in hero as text and background white
* Fix #852 charset and version number * Fix #852 charset and version number
* Fix #856 JavaScript `nav-burger` example * 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="container">
<div class="nav-left"> <div class="navbar-brand">
{% if site.vernum >= 43 %} {% 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 Breadcrumb
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
</a> </a>
{% endif %} {% 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 Card
</a> </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 Level
</a> </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 Media object
</a> </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 Menu
</a> </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 Message
</a> </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 Modal
</a> </a>
{% if site.vernum >= 43 %} {% 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 Navbar
<span class="tag is-success" style="margin-left: 0.5rem;">New!</span>
</a> </a>
{% else %} {% 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 Nav
</a> </a>
{% endif %} {% 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 Pagination
</a> </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 Panel
</a> </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 Tabs
</a> </a>
</div> </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="container">
<div class="nav-left"> <div class="navbar-brand">
<a class="nav-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'box' %}is-active{% endif %}" href="{{ site.url }}/documentation/elements/box/">
Box Box
</a> </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 Button
</a> </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 Content
</a> </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 Delete
</a> </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 Form
</a> </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 Icon
</a> </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 Image
</a> </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 Notification
</a> </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 Progress
</a> </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 Table
</a> </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 Tag
</a> </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 Title
</a> </a>
</div> </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="container">
<div class="nav-left"> <div class="navbar-brand">
<a class="nav-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'columns' %}is-active{% endif %}" href="{{ site.url }}/documentation/grid/columns/">
Columns Columns
</a> </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 Tiles
</a> </a>
</div> </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="container">
<div class="nav-left"> <div class="navbar-brand">
<a class="nav-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'container' %}is-active{% endif %}" href="{{ site.url }}/documentation/layout/container/">
Container Container
</a> </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 Hero
</a> </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 Section
</a> </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 Footer
</a> </a>
</div> </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="container">
<div class="nav-left"> <div class="navbar-brand">
<a class="nav-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'syntax' %}is-active{% endif %}" href="{{ site.url }}/documentation/modifiers/syntax/">
Syntax Syntax
</a> </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 Helpers
</a> </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 Responsive helpers
</a> </a>
</div> </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="container">
<div class="nav-left"> <div class="navbar-brand">
<a class="nav-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/"> <a class="navbar-item is-tab {% if page.doc-subtab == 'start' %}is-active{% endif %}" href="{{ site.url }}/documentation/overview/start/">
Start Start
</a> </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 Customize
</a> </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 Classes
</a> </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 Modular
</a> </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 Responsiveness
</a> </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 Functions
</a> </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 Variables
</a> </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 Mixins
</a> </a>
</div> </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: $black !default
$navbar-item-active-background: transparent !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-background: $white !default
$navbar-dropdown-border: $border !default $navbar-dropdown-border: $border !default
$navbar-dropdown-offset: -4px !default $navbar-dropdown-offset: -4px !default
@ -25,11 +31,21 @@ $navbar-divider-background: $border !default
background-color: $navbar-background background-color: $navbar-background
min-height: $navbar-height min-height: $navbar-height
position: relative 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 .navbar-brand
+overflow-touch
align-items: stretch align-items: stretch
height: $navbar-height
display: flex display: flex
min-height: $navbar-height
overflow-x: auto
overflow-y: hidden
.navbar-burger .navbar-burger
+hamburger($navbar-height) +hamburger($navbar-height)
@ -60,6 +76,18 @@ a.navbar-item,
max-height: 1.75rem max-height: 1.75rem
&.has-dropdown &.has-dropdown
padding: 0 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 .navbar-content
flex-grow: 1 flex-grow: 1
@ -102,7 +130,7 @@ a.navbar-item,
align-items: stretch align-items: stretch
display: flex display: flex
.navbar .navbar
height: $navbar-height min-height: $navbar-height
&.is-transparent &.is-transparent
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link