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

Add navbar fixed classes

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-24 10:31:45 +01:00
parent 202c5996a4
commit 0e6e22e70a
7 changed files with 780 additions and 1890 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/_includes/navbar.html
View File

@ -1,4 +1,8 @@
<nav class="navbar {% if include.transparent %}is-transparent{% endif %}"> <nav class="navbar {% if include.fixed %}is-fixed-top has-shadow{% endif %} {% if include.transparent %}is-transparent{% endif %}">
{% if include.has_container %}
<div class="container">
{% endif %}
<div class="navbar-brand"> <div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}"> <a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28"> <img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
@ -182,4 +186,8 @@
</div> </div>
</div> </div>
</div> </div>
{% if include.has_container %}
</div>
{% endif %}
</nav> </nav>

2
docs/_layouts/default.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}"> <html lang="en" class="{% if page.fixed_navbar %}has-navbar-fixed-top{% endif %} {% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
{% include head.html %} {% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}"> <body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{% include deprecated.html %} {% include deprecated.html %}

3
docs/_sass/global.sass
View File

@ -15,6 +15,7 @@ $carbon-space: 15px
#carbon #carbon
flex-grow: 1 flex-grow: 1
min-height: 100px + ($carbon-space * 2)
padding: 0 padding: 0
position: relative position: relative
&:hover &:hover
@ -61,4 +62,4 @@ $carbon-space: 15px
display: inline display: inline
font-size: $size-small font-size: $size-small
position: absolute position: absolute
right: 10px right: 10px

3
docs/_sass/specific.sass
View File

@ -53,6 +53,7 @@
height: 240px height: 240px
margin-left: auto margin-left: auto
margin-right: auto margin-right: auto
overflow: hidden
position: relative position: relative
text-align: center text-align: center
@each $name, $pair in $colors @each $name, $pair in $colors
@ -160,4 +161,4 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
td td
vertical-align: middle vertical-align: middle
img img
vertical-align: middle vertical-align: middle

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

File diff suppressed because it is too large Load Diff

5
docs/index.html
View File

@ -1,11 +1,10 @@
--- ---
layout: default layout: default
route: index route: index
fixed_navbar: true
--- ---
<div class="container"> {% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
{% include navbar.html id="Index" transparent=true boxed=true %}
</div>
{% include index/intro.html %} {% include index/intro.html %}

52
sass/components/navbar.sass
View File

@ -1,5 +1,6 @@
$navbar-background-color: $white !default $navbar-background-color: $white !default
$navbar-height: 3.25rem !default $navbar-height: 3.25rem !default
$navbar-fixed-z: 30 !default
$navbar-item-color: $grey-dark !default $navbar-item-color: $grey-dark !default
$navbar-item-hover-color: $black !default $navbar-item-hover-color: $black !default
@ -33,6 +34,17 @@ $navbar-dropdown-item-active-background-color: $background !default
$navbar-divider-background-color: $border !default $navbar-divider-background-color: $border !default
=navbar-fixed
left: 0
position: fixed
right: 0
z-index: $navbar-fixed-z
=navbar-fixed-html
left: 0
position: fixed
right: 0
.navbar .navbar
background-color: $navbar-background-color background-color: $navbar-background-color
min-height: $navbar-height min-height: $navbar-height
@ -87,6 +99,19 @@ $navbar-divider-background-color: $border !default
width: 100% width: 100%
&.has-shadow &.has-shadow
box-shadow: 0 2px 3px rgba($black, 0.1) box-shadow: 0 2px 3px rgba($black, 0.1)
&.is-fixed-bottom,
&.is-fixed-top
+navbar-fixed
&.is-fixed-bottom
bottom: 0
&.is-fixed-top
top: 0
html.has-navbar-fixed-top
padding-top: $navbar-height
html.has-navbar-fixed-bottom
padding-bottom: $navbar-height
.navbar-brand, .navbar-brand,
.navbar-tabs .navbar-tabs
@ -184,6 +209,19 @@ a.navbar-item,
padding: 0.5rem 0 padding: 0.5rem 0
&.is-active &.is-active
display: block display: block
// Fixed navbar
.navbar
&.is-fixed-bottom-touch,
&.is-fixed-top-touch
+navbar-fixed
&.is-fixed-bottom-touch
bottom: 0
&.is-fixed-top-touch
top: 0
html.has-navbar-fixed-top-touch
padding-top: $navbar-height
html.has-navbar-fixed-bottom-touch
padding-bottom: $navbar-height
+desktop +desktop
.navbar, .navbar,
@ -285,11 +323,25 @@ a.navbar-item,
right: 0 right: 0
.navbar-divider .navbar-divider
display: block display: block
.navbar > .container,
.container > .navbar .container > .navbar
.navbar-brand .navbar-brand
margin-left: -1rem margin-left: -1rem
.navbar-menu .navbar-menu
margin-right: -1rem margin-right: -1rem
// Fixed navbar
.navbar
&.is-fixed-bottom-desktop,
&.is-fixed-top-desktop
+navbar-fixed
&.is-fixed-bottom-desktop
bottom: 0
&.is-fixed-top-desktop
top: 0
html.has-navbar-fixed-top-desktop
padding-top: $navbar-height
html.has-navbar-fixed-bottom-desktop
padding-bottom: $navbar-height
// Hover/Active states // Hover/Active states
a.navbar-item, a.navbar-item,
.navbar-link .navbar-link