mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add dropdown
This commit is contained in:
Jeremy Thomas
parent
691021082b
commit
962c9224ad
@ -1,16 +1,17 @@
|
||||
<div class="container">
|
||||
<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">
|
||||
<a class="navbar-item is-hidden-desktop">
|
||||
<span class="icon">
|
||||
<i class="fa fa-github"></i>
|
||||
</span>
|
||||
</a>
|
||||
|
||||
<a class="navbar-item">
|
||||
<a class="navbar-item is-hidden-desktop">
|
||||
<span class="icon">
|
||||
<i class="fa fa-twitter"></i>
|
||||
</span>
|
||||
@ -69,7 +70,7 @@
|
||||
<a class="navbar-link">
|
||||
Blog
|
||||
</a>
|
||||
<div class="navbar-dropdown" style="width: 18rem;">
|
||||
<div class="navbar-dropdown" data-style="width: 18rem;">
|
||||
{% for post in site.posts %}
|
||||
<a class="navbar-item" href="{{ post.url }}">
|
||||
<div class="navbar-content">
|
||||
@ -83,7 +84,7 @@
|
||||
<hr class="navbar-divider">
|
||||
<div class="navbar-item">
|
||||
<div class="navbar-content">
|
||||
<div class="level">
|
||||
<div class="level is-mobile">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<strong>Stay up to date!</strong>
|
||||
@ -145,3 +146,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
@ -134,6 +134,7 @@ body {
|
||||
font-size: 1rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -4380,9 +4381,8 @@ a.nav-item.is-tab.is-active {
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link {
|
||||
align-items: center;
|
||||
color: #4a4a4a;
|
||||
display: flex;
|
||||
display: block;
|
||||
line-height: 1.5;
|
||||
padding: 0.5rem 1rem;
|
||||
position: relative;
|
||||
@ -4403,26 +4403,9 @@ a.navbar-item:hover,
|
||||
}
|
||||
|
||||
.navbar-item.has-dropdown {
|
||||
align-items: stretch;
|
||||
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 {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
@ -4433,40 +4416,35 @@ a.navbar-item:hover,
|
||||
}
|
||||
|
||||
.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;
|
||||
left: 0;
|
||||
min-width: 100%;
|
||||
padding-bottom: 0.25rem;
|
||||
padding-top: 0.25rem;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
z-index: 20;
|
||||
padding-bottom: 0.5rem;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.navbar-dropdown .navbar-item {
|
||||
padding: 0.375rem 1rem;
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: #dbdbdb;
|
||||
border: none;
|
||||
display: block;
|
||||
display: none;
|
||||
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 {
|
||||
background-color: whitesmoke;
|
||||
padding: 0.5rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
@media screen and (min-width: 1000px) {
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
@ -4474,9 +4452,38 @@ a.navbar-item:hover,
|
||||
align-items: stretch;
|
||||
display: flex;
|
||||
}
|
||||
.navbar {
|
||||
height: 3.25rem;
|
||||
}
|
||||
.navbar-burger {
|
||||
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 {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
@ -4489,6 +4496,31 @@ a.navbar-item:hover,
|
||||
justify-content: flex-end;
|
||||
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 {
|
||||
|
||||
@ -35,6 +35,7 @@ body
|
||||
font-size: 1rem
|
||||
font-weight: $weight-normal
|
||||
line-height: 1.5
|
||||
overflow-x: hidden
|
||||
|
||||
// Inline
|
||||
|
||||
|
||||
@ -20,9 +20,8 @@ $navbar-height: 3.25rem !default
|
||||
|
||||
.navbar-item,
|
||||
.navbar-link
|
||||
align-items: center
|
||||
color: $navbar-color
|
||||
display: flex
|
||||
display: block
|
||||
line-height: 1.5
|
||||
padding: 0.5rem 1rem
|
||||
position: relative
|
||||
@ -33,19 +32,12 @@ a.navbar-item,
|
||||
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
|
||||
@ -55,43 +47,54 @@ a.navbar-item,
|
||||
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
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
.navbar-item
|
||||
padding: 0.375rem 1rem
|
||||
padding-left: 1.5rem
|
||||
padding-right: 1.5rem
|
||||
|
||||
.navbar-divider
|
||||
background-color: $border
|
||||
border: none
|
||||
display: block
|
||||
display: none
|
||||
height: 1px
|
||||
margin: 0.25rem 0
|
||||
margin: 0.5rem 0
|
||||
|
||||
+mobile
|
||||
+touch
|
||||
.navbar-brand
|
||||
.navbar-item
|
||||
align-items: center
|
||||
display: flex
|
||||
.navbar-menu
|
||||
background-color: $background
|
||||
padding: 0.5rem 0
|
||||
|
||||
+tablet
|
||||
+desktop
|
||||
.navbar,
|
||||
.navbar-menu,
|
||||
.navbar-start,
|
||||
.navbar-end
|
||||
align-items: stretch
|
||||
display: flex
|
||||
.navbar
|
||||
height: $navbar-height
|
||||
.navbar-burger
|
||||
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
|
||||
flex-grow: 1
|
||||
flex-shrink: 0
|
||||
@ -100,4 +103,25 @@ a.navbar-item,
|
||||
margin-right: auto
|
||||
.navbar-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
|
||||
Loading…
Reference in New Issue
Block a user