bulma/sass/components/nav.sass

126 lines
2.3 KiB
Sass
Raw Normal View History

2017-03-13 12:05:02 +00:00
$nav-height: 3.25rem !default
2016-09-24 15:04:53 +00:00
// Components
2016-05-07 22:40:06 +00:00
.nav-toggle
2016-09-24 15:04:53 +00:00
+hamburger($nav-height)
2016-05-07 22:40:06 +00:00
// Responsiveness
+tablet
display: none
.nav-item
align-items: center
display: flex
2016-09-24 17:56:26 +00:00
flex-grow: 0
flex-shrink: 0
2016-10-30 20:24:23 +00:00
font-size: $size-normal
2016-05-07 22:40:06 +00:00
justify-content: center
2017-03-13 12:05:02 +00:00
line-height: 1.5
2016-10-30 20:02:48 +00:00
padding: 0.5rem 0.75rem
2016-05-07 22:40:06 +00:00
a
flex-grow: 1
flex-shrink: 0
2016-05-07 22:40:06 +00:00
img
max-height: 1.75rem
2016-05-07 22:40:06 +00:00
.tag
2016-10-30 20:24:23 +00:00
&:first-child:not(:last-child)
margin-right: 0.5rem
&:last-child:not(:first-child)
margin-left: 0.5rem
2016-05-07 22:40:06 +00:00
// Responsiveness
+mobile
justify-content: flex-start
2017-06-29 22:44:45 +00:00
.nav-item a:not(.button),
a.nav-item:not(.button)
2016-09-24 16:18:56 +00:00
color: $text-light
2016-05-07 22:40:06 +00:00
&: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
2017-03-13 12:05:02 +00:00
padding-bottom: calc(0.75rem - 1px)
2016-10-30 20:24:23 +00:00
padding-left: 1rem
padding-right: 1rem
2017-03-13 12:05:02 +00:00
padding-top: calc(0.75rem - 1px)
2016-05-08 00:35:43 +00:00
&:hover
border-bottom-color: $primary
2016-10-30 20:24:23 +00:00
border-top-color: transparent
2016-05-08 00:35:43 +00:00
&.is-active
border-bottom: 3px solid $primary
color: $primary
2017-03-13 12:05:02 +00:00
padding-bottom: calc(0.75rem - 3px)
2016-12-23 13:20:13 +00:00
// Responsiveness
+desktop
&.is-brand
padding-left: 0
2016-05-07 22:40:06 +00:00
// Containers
2016-10-30 20:24:23 +00:00
.nav-left,
.nav-right
2017-04-15 16:54:47 +00:00
+overflow-touch
2016-05-07 22:40:06 +00:00
align-items: stretch
2017-03-31 20:35:50 +00:00
display: flex
2016-07-31 10:45:56 +00:00
flex-grow: 1
flex-shrink: 0
2017-04-15 16:54:47 +00:00
max-width: 100%
overflow: auto
+widescreen
flex-basis: 0
2016-10-30 20:24:23 +00:00
.nav-left
2016-05-08 00:35:43 +00:00
justify-content: flex-start
2016-05-07 22:40:06 +00:00
white-space: nowrap
2017-03-31 20:35:50 +00:00
.nav-right
justify-content: flex-end
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
2016-10-30 20:24:23 +00:00
flex-grow: 0
flex-shrink: 0
2016-05-08 00:35:43 +00:00
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
2017-03-31 20:35:50 +00:00
.nav-menu
2016-05-07 22:40:06 +00:00
// Responsiveness
2017-03-31 20:35:50 +00:00
+mobile
&.nav-right
background-color: $white
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: 0.75rem
&.is-active
display: block
// Main container
.nav
align-items: stretch
2016-06-29 22:59:48 +00:00
background-color: $white
display: flex
2017-04-15 16:54:47 +00:00
height: $nav-height
position: relative
text-align: center
2017-04-15 16:54:47 +00:00
z-index: 10
& > .container
align-items: stretch
display: flex
min-height: $nav-height
2017-04-02 15:22:54 +00:00
width: 100%
// Modifiers
&.has-shadow
box-shadow: 0 2px 3px rgba($black, 0.1)