mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Init navbar
This commit is contained in:
parent
01390a30c0
commit
691021082b
@ -1,6 +1,4 @@
|
|||||||
<div class="container">
|
{% include navbar.html %}
|
||||||
{% include header.html %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
@ -21,7 +19,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
<!-- {% include carbon.html %} -->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
147
docs/_includes/navbar.html
Normal file
147
docs/_includes/navbar.html
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
<nav class="navbar">
|
||||||
|
<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">
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-github"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<a class="navbar-item">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-twitter"></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div class="navbar-burger">
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
<span></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-menu">
|
||||||
|
<div class="navbar-start">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Home
|
||||||
|
</a>
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Docs
|
||||||
|
</a>
|
||||||
|
<div class="navbar-dropdown">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Overview
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Modifiers
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Grid
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Elements
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Components
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Layout
|
||||||
|
</a>
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div>version <p class="has-text-info">{{ site.version }}</p></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="navbar-item">
|
||||||
|
<a class="button is-primary" href="{{ site.download }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="navbar-item has-dropdown">
|
||||||
|
<a class="navbar-link">
|
||||||
|
Blog
|
||||||
|
</a>
|
||||||
|
<div class="navbar-dropdown" style="width: 18rem;">
|
||||||
|
{% for post in site.posts %}
|
||||||
|
<a class="navbar-item" href="{{ post.url }}">
|
||||||
|
<div class="navbar-content">
|
||||||
|
<p>
|
||||||
|
<small>{{ post.date | date_to_string }}</small>
|
||||||
|
</p>
|
||||||
|
<p>{{ post.title }}</p>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
{% endfor %}
|
||||||
|
<hr class="navbar-divider">
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="navbar-content">
|
||||||
|
<div class="level">
|
||||||
|
<div class="level-left">
|
||||||
|
<div class="level-item">
|
||||||
|
<strong>Stay up to date!</strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="level-right">
|
||||||
|
<div class="level-item">
|
||||||
|
<a class="button is-warning is-small" href="{{ site.download }}">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="fa fa-rss"></i>
|
||||||
|
</span>
|
||||||
|
<span>Subscribe</span>
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a class="navbar-item">
|
||||||
|
More
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="navbar-end">
|
||||||
|
<a class="navbar-item">
|
||||||
|
Github
|
||||||
|
</a>
|
||||||
|
<a class="navbar-item">
|
||||||
|
Twitter
|
||||||
|
</a>
|
||||||
|
<div class="navbar-item">
|
||||||
|
<div class="field is-grouped">
|
||||||
|
<p class="control">
|
||||||
|
<a id="twitter"
|
||||||
|
class="button"
|
||||||
|
data-social-network="Twitter"
|
||||||
|
data-social-action="tweet"
|
||||||
|
data-social-target="{{ site.url }}"
|
||||||
|
target="_blank"
|
||||||
|
href="https://twitter.com/intent/tweet?text={{ site.title | urlencode }}&url={{ site.url }}&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="{{ site.download }}">
|
||||||
|
<span class="icon">
|
||||||
|
<i class="fa fa-download"></i>
|
||||||
|
</span>
|
||||||
|
<span>Download</span>
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
@ -3,6 +3,5 @@
|
|||||||
{% 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 %}">
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% include footer.html %}
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
File diff suppressed because one or more lines are too long
@ -8,6 +8,7 @@
|
|||||||
@import "message.sass"
|
@import "message.sass"
|
||||||
@import "modal.sass"
|
@import "modal.sass"
|
||||||
@import "nav.sass"
|
@import "nav.sass"
|
||||||
|
@import "navbar.sass"
|
||||||
@import "pagination.sass"
|
@import "pagination.sass"
|
||||||
@import "panel.sass"
|
@import "panel.sass"
|
||||||
@import "tabs.sass"
|
@import "tabs.sass"
|
103
sass/components/navbar.sass
Normal file
103
sass/components/navbar.sass
Normal file
@ -0,0 +1,103 @@
|
|||||||
|
$navbar-color: $grey-dark !default
|
||||||
|
$navbar-background: $white !default
|
||||||
|
$navbar-dropdown-background: $white !default
|
||||||
|
|
||||||
|
$navbar-height: 3.25rem !default
|
||||||
|
|
||||||
|
.navbar
|
||||||
|
background-color: $navbar-background
|
||||||
|
min-height: $navbar-height
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
.navbar-brand
|
||||||
|
align-items: stretch
|
||||||
|
height: $navbar-height
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
.navbar-burger
|
||||||
|
+hamburger($navbar-height)
|
||||||
|
margin-left: auto
|
||||||
|
|
||||||
|
.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
align-items: center
|
||||||
|
color: $navbar-color
|
||||||
|
display: flex
|
||||||
|
line-height: 1.5
|
||||||
|
padding: 0.5rem 1rem
|
||||||
|
position: relative
|
||||||
|
|
||||||
|
a.navbar-item,
|
||||||
|
.navbar-link
|
||||||
|
&:hover
|
||||||
|
background-color: $background
|
||||||
|
|
||||||
|
.navbar-item
|
||||||
|
// border-right: 1px solid $border
|
||||||
|
flex-grow: 0
|
||||||
|
flex-shrink: 0
|
||||||
|
img
|
||||||
|
max-height: 1.75rem
|
||||||
|
&.has-dropdown
|
||||||
|
align-items: stretch
|
||||||
|
padding: 0
|
||||||
|
&::after
|
||||||
|
+arrow($input-arrow)
|
||||||
|
margin-top: -0.375em
|
||||||
|
right: 1.125em
|
||||||
|
top: 50%
|
||||||
|
|
||||||
|
.navbar-content
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 1
|
||||||
|
|
||||||
|
.navbar-link
|
||||||
|
padding-right: 2.5em
|
||||||
|
|
||||||
|
.navbar-dropdown
|
||||||
|
background-color: $navbar-dropdown-background
|
||||||
|
border-bottom-left-radius: $radius-large
|
||||||
|
border-bottom-right-radius: $radius-large
|
||||||
|
// border-top: 1px solid $border
|
||||||
|
box-shadow: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||||
|
font-size: 0.875rem
|
||||||
|
left: 0
|
||||||
|
min-width: 100%
|
||||||
|
padding-bottom: 0.25rem
|
||||||
|
padding-top: 0.25rem
|
||||||
|
position: absolute
|
||||||
|
top: 100%
|
||||||
|
z-index: 20
|
||||||
|
.navbar-item
|
||||||
|
padding: 0.375rem 1rem
|
||||||
|
|
||||||
|
.navbar-divider
|
||||||
|
background-color: $border
|
||||||
|
border: none
|
||||||
|
display: block
|
||||||
|
height: 1px
|
||||||
|
margin: 0.25rem 0
|
||||||
|
|
||||||
|
+mobile
|
||||||
|
.navbar-menu
|
||||||
|
background-color: $background
|
||||||
|
padding: 0.5rem 0
|
||||||
|
|
||||||
|
+tablet
|
||||||
|
.navbar,
|
||||||
|
.navbar-menu,
|
||||||
|
.navbar-start,
|
||||||
|
.navbar-end
|
||||||
|
align-items: stretch
|
||||||
|
display: flex
|
||||||
|
.navbar-burger
|
||||||
|
display: none
|
||||||
|
.navbar-menu
|
||||||
|
flex-grow: 1
|
||||||
|
flex-shrink: 0
|
||||||
|
.navbar-start
|
||||||
|
justify-content: flex-start
|
||||||
|
margin-right: auto
|
||||||
|
.navbar-end
|
||||||
|
justify-content: flex-end
|
||||||
|
margin-left: auto
|
Loading…
Reference in New Issue
Block a user