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

Init navbar

Browse Source
This commit is contained in:
Jeremy Thomas 2017-06-30 22:34:13 +01:00
parent aacb7334d9
commit 02a3b1f7fe
6 changed files with 934 additions and 1553 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_includes/blog-hero.html
View File

@ -1,6 +1,4 @@
<div class="container">
{% include header.html %}
</div>
{% include navbar.html %}
<section class="hero is-primary">
<div class="hero-body">
@ -21,7 +19,7 @@
</a>
</div>
<div class="column is-narrow">
{% include carbon.html %}
<!-- {% include carbon.html %} -->
</div>
</div>
</div>

147
docs/_includes/navbar.html Normal file
View 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>

1
docs/_layouts/default.html
View File

@ -3,6 +3,5 @@
{% include head.html %}
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
{{ content }}
{% include footer.html %}
</body>
</html>

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

File diff suppressed because one or more lines are too long

1
sass/components/_all.sass
View File

@ -8,6 +8,7 @@
@import "message.sass"
@import "modal.sass"
@import "nav.sass"
@import "navbar.sass"
@import "pagination.sass"
@import "panel.sass"
@import "tabs.sass"

103
sass/components/navbar.sass Normal file
View 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