library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add dropdown

Browse Source
This commit is contained in:
Jeremy Thomas 2017-06-30 23:16:22 +01:00
parent 02a3b1f7fe
commit a4a146468d
4 changed files with 127 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/_includes/navbar.html
View File

@ -1,16 +1,17 @@
<div class="container">
<nav class="navbar"> <nav class="navbar">
<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">
</a> </a>
<a class="navbar-item"> <a class="navbar-item is-hidden-desktop">
<span class="icon"> <span class="icon">
<i class="fa fa-github"></i> <i class="fa fa-github"></i>
</span> </span>
</a> </a>
<a class="navbar-item"> <a class="navbar-item is-hidden-desktop">
<span class="icon"> <span class="icon">
<i class="fa fa-twitter"></i> <i class="fa fa-twitter"></i>
</span> </span>
@ -69,7 +70,7 @@
<a class="navbar-link"> <a class="navbar-link">
Blog Blog
</a> </a>
<div class="navbar-dropdown" style="width: 18rem;"> <div class="navbar-dropdown" data-style="width: 18rem;">
{% for post in site.posts %} {% for post in site.posts %}
<a class="navbar-item" href="{{ post.url }}"> <a class="navbar-item" href="{{ post.url }}">
<div class="navbar-content"> <div class="navbar-content">
@ -83,7 +84,7 @@
<hr class="navbar-divider"> <hr class="navbar-divider">
<div class="navbar-item"> <div class="navbar-item">
<div class="navbar-content"> <div class="navbar-content">
<div class="level"> <div class="level is-mobile">
<div class="level-left"> <div class="level-left">
<div class="level-item"> <div class="level-item">
<strong>Stay up to date!</strong> <strong>Stay up to date!</strong>
@ -145,3 +146,4 @@
</div> </div>
</div> </div>
</nav> </nav>
</div>

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

@ -134,6 +134,7 @@ body {
font-size: 1rem; font-size: 1rem;
font-weight: 400; font-weight: 400;
line-height: 1.5; line-height: 1.5;
overflow-x: hidden;
} }
a { a {
@ -4380,9 +4381,8 @@ a.nav-item.is-tab.is-active {
.navbar-item, .navbar-item,
.navbar-link { .navbar-link {
align-items: center;
color: #4a4a4a; color: #4a4a4a;
display: flex; display: block;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
position: relative; position: relative;
@ -4403,26 +4403,9 @@ a.navbar-item:hover,
} }
.navbar-item.has-dropdown { .navbar-item.has-dropdown {
align-items: stretch;
padding: 0; padding: 0;
} }
.navbar-item.has-dropdown::after {
border: 1px solid #00d1b2;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.5em;
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
top: 50%;
}
.navbar-content { .navbar-content {
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
@ -4433,40 +4416,35 @@ a.navbar-item:hover,
} }
.navbar-dropdown { .navbar-dropdown {
background-color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
font-size: 0.875rem; font-size: 0.875rem;
left: 0; padding-bottom: 0.5rem;
min-width: 100%; padding-top: 0.5rem;
padding-bottom: 0.25rem;
padding-top: 0.25rem;
position: absolute;
top: 100%;
z-index: 20;
} }
.navbar-dropdown .navbar-item { .navbar-dropdown .navbar-item {
padding: 0.375rem 1rem; padding-left: 1.5rem;
padding-right: 1.5rem;
} }
.navbar-divider { .navbar-divider {
background-color: #dbdbdb; background-color: #dbdbdb;
border: none; border: none;
display: block; display: none;
height: 1px; height: 1px;
margin: 0.25rem 0; margin: 0.5rem 0;
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 999px) {
.navbar-brand .navbar-item {
align-items: center;
display: flex;
}
.navbar-menu { .navbar-menu {
background-color: whitesmoke;
padding: 0.5rem 0; padding: 0.5rem 0;
} }
} }
@media screen and (min-width: 769px), print { @media screen and (min-width: 1000px) {
.navbar, .navbar,
.navbar-menu, .navbar-menu,
.navbar-start, .navbar-start,
@ -4474,9 +4452,38 @@ a.navbar-item:hover,
align-items: stretch; align-items: stretch;
display: flex; display: flex;
} }
.navbar {
height: 3.25rem;
}
.navbar-burger { .navbar-burger {
display: none; display: none;
} }
.navbar-item,
.navbar-link {
align-items: center;
display: flex;
}
.navbar-item.has-dropdown {
align-items: stretch;
}
.navbar-item.has-dropdown::after {
border: 1px solid #00d1b2;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.5em;
pointer-events: none;
position: absolute;
transform: rotate(-45deg);
width: 0.5em;
margin-top: -0.375em;
right: 1.125em;
top: 50%;
}
.navbar-item.has-dropdown:hover .navbar-dropdown {
display: block;
}
.navbar-menu { .navbar-menu {
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
@ -4489,6 +4496,31 @@ a.navbar-item:hover,
justify-content: flex-end; justify-content: flex-end;
margin-left: auto; margin-left: auto;
} }
.navbar-dropdown {
background-color: white;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-top: 1px solid #dbdbdb;
box-shadow: 0 8px 8px rgba(10, 10, 10, 0.1);
display: none;
font-size: 0.875rem;
left: 0;
min-width: 100%;
position: absolute;
top: 100%;
z-index: 20;
}
.navbar-dropdown .navbar-item {
padding: 0.375rem 1rem;
white-space: nowrap;
}
.navbar-divider {
display: block;
}
.container > .navbar {
margin-left: -1rem;
margin-right: -1rem;
}
} }
.pagination { .pagination {

1
sass/base/generic.sass
View File

@ -35,6 +35,7 @@ body
font-size: 1rem font-size: 1rem
font-weight: $weight-normal font-weight: $weight-normal
line-height: 1.5 line-height: 1.5
overflow-x: hidden
// Inline // Inline

80
sass/components/navbar.sass
View File

@ -20,9 +20,8 @@ $navbar-height: 3.25rem !default
.navbar-item, .navbar-item,
.navbar-link .navbar-link
align-items: center
color: $navbar-color color: $navbar-color
display: flex display: block
line-height: 1.5 line-height: 1.5
padding: 0.5rem 1rem padding: 0.5rem 1rem
position: relative position: relative
@ -33,19 +32,12 @@ a.navbar-item,
background-color: $background background-color: $background
.navbar-item .navbar-item
// border-right: 1px solid $border
flex-grow: 0 flex-grow: 0
flex-shrink: 0 flex-shrink: 0
img img
max-height: 1.75rem max-height: 1.75rem
&.has-dropdown &.has-dropdown
align-items: stretch
padding: 0 padding: 0
&::after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
.navbar-content .navbar-content
flex-grow: 1 flex-grow: 1
@ -55,43 +47,54 @@ a.navbar-item,
padding-right: 2.5em padding-right: 2.5em
.navbar-dropdown .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 font-size: 0.875rem
left: 0 padding-bottom: 0.5rem
min-width: 100% padding-top: 0.5rem
padding-bottom: 0.25rem
padding-top: 0.25rem
position: absolute
top: 100%
z-index: 20
.navbar-item .navbar-item
padding: 0.375rem 1rem padding-left: 1.5rem
padding-right: 1.5rem
.navbar-divider .navbar-divider
background-color: $border background-color: $border
border: none border: none
display: block display: none
height: 1px height: 1px
margin: 0.25rem 0 margin: 0.5rem 0
+mobile +touch
.navbar-brand
.navbar-item
align-items: center
display: flex
.navbar-menu .navbar-menu
background-color: $background
padding: 0.5rem 0 padding: 0.5rem 0
+tablet +desktop
.navbar, .navbar,
.navbar-menu, .navbar-menu,
.navbar-start, .navbar-start,
.navbar-end .navbar-end
align-items: stretch align-items: stretch
display: flex display: flex
.navbar
height: $navbar-height
.navbar-burger .navbar-burger
display: none display: none
.navbar-item,
.navbar-link
align-items: center
display: flex
.navbar-item
&.has-dropdown
align-items: stretch
&::after
+arrow($input-arrow)
margin-top: -0.375em
right: 1.125em
top: 50%
&:hover
.navbar-dropdown
display: block
.navbar-menu .navbar-menu
flex-grow: 1 flex-grow: 1
flex-shrink: 0 flex-shrink: 0
@ -100,4 +103,25 @@ a.navbar-item,
margin-right: auto margin-right: auto
.navbar-end .navbar-end
justify-content: flex-end justify-content: flex-end
margin-left: auto margin-left: auto
.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)
display: none
font-size: 0.875rem
left: 0
min-width: 100%
position: absolute
top: 100%
z-index: 20
.navbar-item
padding: 0.375rem 1rem
white-space: nowrap
.navbar-divider
display: block
.container > .navbar
margin-left: -1rem
margin-right: -1rem