mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add navbar fixed classes
This commit is contained in:
parent
202c5996a4
commit
0e6e22e70a
@ -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">
|
||||
<a class="navbar-item" href="{{ site.url }}">
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
|
||||
@ -182,4 +186,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if include.has_container %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
@ -1,5 +1,5 @@
|
||||
<!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 %}
|
||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||
{% include deprecated.html %}
|
||||
|
@ -15,6 +15,7 @@ $carbon-space: 15px
|
||||
|
||||
#carbon
|
||||
flex-grow: 1
|
||||
min-height: 100px + ($carbon-space * 2)
|
||||
padding: 0
|
||||
position: relative
|
||||
&:hover
|
||||
@ -61,4 +62,4 @@ $carbon-space: 15px
|
||||
display: inline
|
||||
font-size: $size-small
|
||||
position: absolute
|
||||
right: 10px
|
||||
right: 10px
|
||||
|
@ -53,6 +53,7 @@
|
||||
height: 240px
|
||||
margin-left: auto
|
||||
margin-right: auto
|
||||
overflow: hidden
|
||||
position: relative
|
||||
text-align: center
|
||||
@each $name, $pair in $colors
|
||||
@ -160,4 +161,4 @@ $notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default
|
||||
td
|
||||
vertical-align: middle
|
||||
img
|
||||
vertical-align: middle
|
||||
vertical-align: middle
|
||||
|
File diff suppressed because it is too large
Load Diff
@ -1,11 +1,10 @@
|
||||
---
|
||||
layout: default
|
||||
route: index
|
||||
fixed_navbar: true
|
||||
---
|
||||
|
||||
<div class="container">
|
||||
{% include navbar.html id="Index" transparent=true boxed=true %}
|
||||
</div>
|
||||
{% include navbar.html id="Index" boxed=true fixed=true has_container=true %}
|
||||
|
||||
{% include index/intro.html %}
|
||||
|
||||
|
@ -1,5 +1,6 @@
|
||||
$navbar-background-color: $white !default
|
||||
$navbar-height: 3.25rem !default
|
||||
$navbar-fixed-z: 30 !default
|
||||
|
||||
$navbar-item-color: $grey-dark !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-fixed
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
z-index: $navbar-fixed-z
|
||||
|
||||
=navbar-fixed-html
|
||||
left: 0
|
||||
position: fixed
|
||||
right: 0
|
||||
|
||||
.navbar
|
||||
background-color: $navbar-background-color
|
||||
min-height: $navbar-height
|
||||
@ -87,6 +99,19 @@ $navbar-divider-background-color: $border !default
|
||||
width: 100%
|
||||
&.has-shadow
|
||||
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-tabs
|
||||
@ -184,6 +209,19 @@ a.navbar-item,
|
||||
padding: 0.5rem 0
|
||||
&.is-active
|
||||
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
|
||||
.navbar,
|
||||
@ -285,11 +323,25 @@ a.navbar-item,
|
||||
right: 0
|
||||
.navbar-divider
|
||||
display: block
|
||||
.navbar > .container,
|
||||
.container > .navbar
|
||||
.navbar-brand
|
||||
margin-left: -1rem
|
||||
.navbar-menu
|
||||
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
|
||||
a.navbar-item,
|
||||
.navbar-link
|
||||
|
Loading…
Reference in New Issue
Block a user