bulma/sass/components/nav.sass

137 lines
2.6 KiB
Sass
Raw Normal View History

// Components
2016-05-07 22:40:06 +00:00
.nav-toggle
@extend .hamburger
// Responsiveness
+tablet
display: none
.nav-item
align-items: center
display: flex
justify-content: center
padding: 10px
a
flex-grow: 1
flex-shrink: 0
2016-05-07 22:40:06 +00:00
img
max-height: 24px
.button + .button
margin-left: 10px
.tag
&:first-child
margin-right: 5px
&:last-child
margin-left: 5px
// Responsiveness
+mobile
justify-content: flex-start
.nav-item a,
a.nav-item
color: $text
&:hover
color: $link-hover
// Modifiers
&.is-active
color: $link-active
2016-05-08 00:35:43 +00:00
&.is-tab
border-bottom: 1px solid transparent
border-top: 1px solid transparent
padding-left: 12px
padding-right: 12px
&:hover
border-bottom: 1px solid $link
border-top: 1px solid transparent
&.is-active
border-bottom: 3px solid $link
border-top: 3px solid transparent
color: $link
2016-05-07 22:40:06 +00:00
// Containers
.nav-menu
// Responsiveness
+mobile
2016-06-29 22:59:48 +00:00
background-color: $white
2016-05-07 22:40:06 +00:00
box-shadow: 0 4px 7px rgba($black, 0.1)
left: 0
display: none
right: 0
top: 100%
position: absolute
.nav-item
border-top: 1px solid rgba($border, 0.5)
padding: 10px
&.is-active
display: block
2016-07-31 17:16:11 +00:00
+tablet-only
padding-right: 20px
2016-05-07 22:40:06 +00:00
.nav-left
align-items: stretch
display: flex
2016-07-31 10:45:56 +00:00
flex-basis: 0
flex-grow: 1
flex-shrink: 0
2016-05-08 00:35:43 +00:00
justify-content: flex-start
2016-05-07 22:40:06 +00:00
overflow: hidden
overflow-x: auto
white-space: nowrap
2016-05-08 00:35:43 +00:00
.nav-center
2016-05-07 22:40:06 +00:00
align-items: stretch
2016-05-08 00:35:43 +00:00
display: flex
justify-content: center
2016-07-31 10:45:56 +00:00
margin-left: auto
margin-right: auto
2016-05-08 00:35:43 +00:00
.nav-right
2016-05-07 22:40:06 +00:00
// Responsiveness
+tablet
2016-05-08 00:35:43 +00:00
align-items: stretch
2016-05-07 22:40:06 +00:00
display: flex
2016-07-31 10:45:56 +00:00
flex-basis: 0
flex-grow: 1
flex-shrink: 0
2016-05-08 00:35:43 +00:00
justify-content: flex-end
// Main container
.nav
align-items: stretch
2016-06-29 22:59:48 +00:00
background-color: $white
display: flex
min-height: $nav-height
position: relative
text-align: center
z-index: 2
& > .container
align-items: stretch
display: flex
min-height: $nav-height
width: 100%
& > .nav-left
& > .nav-item:first-child:not(.is-tab)
padding-left: 0
& > .nav-right
& > .nav-item:last-child:not(.is-tab)
padding-right: 0
.container > &
& > .nav-left
& > .nav-item:first-child:not(.is-tab)
padding-left: 0
& > .nav-right
& > .nav-item:last-child:not(.is-tab)
padding-right: 0
// Modifiers
&.has-shadow
box-shadow: 0 2px 3px rgba($black, 0.1)
2016-07-31 17:16:11 +00:00
// Responsiveness
+touch
& > .container,
.container > &
& > .nav-left
& > .nav-item.is-brand:first-child
padding-left: 20px