Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-15 02:04:29 -07:00
Code Issues 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 691021082b
commit 962c9224ad
4 changed files with 127 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
sass/components/navbar.sass
View File

@@ -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