library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add nav, Enhance tabs

Browse Source
This commit is contained in:
Jeremy Thomas 2016-05-07 23:40:06 +01:00
parent c0f0f9f9d8
commit 368ab78c38
10 changed files with 231 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/base/helpers.sass
View File

@ -101,4 +101,4 @@ $displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'
margin: 0 !important
.is-unselectable
+unselectable
@extend .unselectable

1
sass/components/components.sass
View File

@ -7,6 +7,7 @@
@import "menu"
@import "message"
@import "modal"
@import "nav"
@import "navbar"
@import "pagination"
@import "panel"

104
sass/components/nav.sass Normal file
View File

@ -0,0 +1,104 @@
.nav
align-items: stretch
background: $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%
+tablet
& > .container
& > .nav-left
margin-left: -10px
& > .nav-right
margin-left: -10px
.nav-toggle
@extend .hamburger
// Responsiveness
+tablet
display: none
// Elements
.nav-item
align-items: center
display: flex
justify-content: center
padding: 10px
a
flex-grow: 1
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
.nav-tab
align-items: center
border-bottom: 1px solid transparent
color: $text
display: block
height: $nav-height
line-height: 24px
padding: 13px 15px
&:hover
border-bottom: 1px solid $link
// Modifiers
&.is-active
border-bottom: 3px solid $link
color: $link
// Containers
.nav-menu
// Responsiveness
+mobile
background: $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: 10px
// Modifiers
&.is-active
display: block
.nav-left
align-items: stretch
display: flex
flex: 1
overflow: hidden
overflow-x: auto
white-space: nowrap
.nav-right
align-items: stretch
// Responsiveness
+tablet
display: flex

97
sass/components/tabs.sass
View File

@ -1,5 +1,9 @@
.tabs
@extend .block
@extend .unselectable
align-items: stretch
display: flex
justify-content: space-between
line-height: 24px
overflow: hidden
overflow-x: auto
@ -11,78 +15,70 @@
display: flex
justify-content: center
margin-bottom: -1px
padding: 5px 0
padding: 6px 12px
vertical-align: top
&:hover
border-bottom-color: $text-strong
color: $text-strong
li
display: block
vertical-align: top
& + li
margin-left: 20px
// Modifiers
&.is-active
a
border-bottom-color: $link
color: $link
ul
align-items: center
border-bottom: 1px solid $border
display: flex
flex: 1
justify-content: flex-start
&.is-left
padding-right: 10px
&.is-center
flex: none
justify-content: center
padding-left: 10px
padding-right: 10px
&.is-right
justify-content: flex-end
padding-left: 10px
.icon
&:first-child
margin-right: 5px
margin-right: 8px
&:last-child
margin-left: 5px
// Modifiers
margin-left: 8px
// Alignment
&.is-centered
ul
justify-content: center
&.is-right
ul
justify-content: flex-end
// Styles
&.is-boxed
a
border: 1px solid transparent
border-radius: $radius $radius 0 0
padding: 5px 15px
padding-bottom: 5px
padding-top: 5px
&:hover
background: $background
border-bottom-color: $border
li
& + li
margin-left: 5px
// Modifiers
&.is-active
a
background: $white
border-color: $border
border-bottom-color: transparent
// Modifiers
&.is-centered
li
&,
& + li
margin: 0 2px
&.is-centered
a
padding: 5px 10px
li
& + li
margin-left: 0
ul
justify-content: center
text-align: center
&.is-fullwidth
li
flex: 1
& + li
margin-left: 0
ul
justify-content: center
text-align: center
&.is-right
ul
justify-content: flex-end
&.is-toggle
a
border: 1px solid $border
margin-bottom: 0
padding: 5px 10px
padding-bottom: 5px
padding-top: 5px
position: relative
&:hover
background: $background
@ -95,7 +91,6 @@
border-radius: $radius 0 0 $radius
&:last-child a
border-radius: 0 $radius $radius 0
// Modifiers
&.is-active
a
background: $primary
@ -104,3 +99,31 @@
z-index: 1
ul
border-bottom: none
// Sizes
&.is-small
font-size: $size-small
a
padding: 2px 8px
&.is-boxed,
&.is-toggle
a
padding-bottom: 1px
padding-top: 1px
&.is-medium
font-size: $size-medium
a
padding: 10px 16px
&.is-boxed,
&.is-toggle
a
padding-bottom: 9px
padding-top: 9px
&.is-large
font-size: $size-large
a
padding: 14px 20px
&.is-boxed,
&.is-toggle
a
padding-bottom: 13px
padding-top: 13px

4
sass/elements/button.sass
View File

@ -18,7 +18,7 @@
.button
+control
+unselectable
@extend .unselectable
justify-content: center
padding-left: 10px
padding-right: 10px
@ -95,8 +95,6 @@
&[disabled],
&.is-disabled
opacity: 0.5
&.is-flexible
height: auto
&.is-fullwidth
display: block
width: 100%

17
sass/elements/other.sass
View File

@ -1,5 +1,5 @@
.delete
+unselectable
@extend .unselectable
-moz-appearance: none
-webkit-appearance: none
background: rgba($black, 0.2)
@ -56,9 +56,9 @@
.hamburger
cursor: pointer
display: block
height: 50px
height: $nav-height
position: relative
width: 50px
width: $nav-height
span
background: $text
display: block
@ -92,9 +92,6 @@
margin-left: -5px
transform: rotate(-45deg)
transform-origin: left bottom
+tablet
height: $header-height
width: $header-height
.heading
display: block
@ -180,3 +177,11 @@
.delete
margin-left: 4px
margin-right: -8px
.unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none

11
sass/layout/header.sass
View File

@ -3,16 +3,18 @@
background: $white
display: flex
line-height: 24px
min-height: $header-height
position: relative
text-align: center
z-index: 2
.container
align-items: stretch
display: flex
min-height: $header-height
width: 100%
// Modifiers
&.has-shadow
box-shadow: 0 1px 2px rgba($black, 0.1)
box-shadow: 0 2px 3px rgba($black, 0.1)
// Responsiveness
+mobile
.container
@ -62,13 +64,6 @@ a.header-item
&.is-active
color: $link-active
.header-icon
+fa(14px, 24px)
color: $text
margin: 0 5px
&:hover
color: $link-hover
.header-tab
align-items: center
border-bottom: 1px solid transparent

103
sass/layout/hero.sass
View File

@ -1,3 +1,5 @@
// Components
.hero-video
+overlay
overflow: hidden
@ -15,18 +17,12 @@
+mobile
display: none
.hero-content
padding: 40px 20px
// Responsiveness
+desktop
padding: 40px 0
.hero-buttons
margin-top: 20px
// Responsiveness
+mobile
.button
display: block
display: flex
&:not(:last-child)
margin-bottom: 10px
+tablet
@ -35,21 +31,37 @@
.button:not(:last-child)
margin-right: 20px
// Containers
.hero-head,
.hero-foot
flex-shrink: 0
.hero-body
flex: 1
padding: 40px 20px
// Responsiveness
+desktop
padding-left: 0
padding-right: 0
// Main container
.hero
align-items: stretch
background: $white
.header
display: flex
flex-direction: column
justify-content: space-between
.nav
background: none
.container
& > .container
box-shadow: 0 1px 0 rgba($border, 0.3)
.tabs
a
border: none
ul
border-bottom: none
// Modifiers
&.is-boxed
a
padding: 8px 15px
// Colors
@each $name, $pair in $colors
$color: nth($pair, 1)
@ -67,11 +79,11 @@
a,
strong
color: $color-invert
.header .container
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
.header-icon,
a.header-item,
.header-item > a:not(.button)
.nav
& > .container
box-shadow: 0 1px 0 rgba($color-invert, 0.2)
a.nav-item,
.nav-item a:not(.button)
color: rgba($color-invert, 0.5)
&:hover,
&.is-active
@ -82,8 +94,9 @@
opacity: 0.5
&:hover
opacity: 1
li.is-active a
opacity: 1
li
&.is-active a
opacity: 1
&.is-boxed,
&.is-toggle
a
@ -102,7 +115,7 @@
background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
// Responsiveness
+mobile
.header-toggle
.nav-toggle
span
background: $color-invert
&:hover
@ -110,46 +123,26 @@
&.is-active
span
background: $color-invert
.header-menu
.header-item
.nav-menu
.nav-item
border-top-color: rgba($color-invert, 0.2)
// Sizes
&.is-fullheight,
&.is-large
// Responsiveness
+tablet
.tabs
font-size: $size-medium
&.is-medium
// Responsiveness
+tablet
.hero-content
padding: 120px 20px
+desktop
.hero-content
padding: 120px 0
.hero-body
padding-bottom: 120px
padding-top: 120px
&.is-large
+tablet
.hero-body
padding-bottom: 240px
padding-top: 240px
&.is-fullheight
align-items: stretch
display: flex
flex-direction: column
justify-content: space-between
min-height: 100vh
.tabs
a
padding: 15px 20px
.hero-content
.hero-body
align-items: stretch
display: flex
flex: 1
flex-direction: column
justify-content: center
&.is-large
.tabs
a
padding: 10px 15px
// Responsiveness
+tablet
.hero-content
padding: 240px 20px
+desktop
.hero-content
padding: 240px 0
padding-bottom: 240px
padding-top: 240px

7
sass/utilities/mixins.sass
View File

@ -55,13 +55,6 @@
text-indent: -290486px
width: $width
=unselectable
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: none
-ms-user-select: none
user-select: none
=from($device)
@media screen and (min-width: $device)
@content

2
sass/utilities/variables.sass
View File

@ -49,6 +49,8 @@ $column-gap: 20px !default
$header-height: 50px !default
$nav-height: 50px !default
// Miscellaneous
$easing: ease-out !default