mirror of
https://github.com/jgthms/bulma
synced 2026-03-15 02:04:29 -07:00
Add dropdown button
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
@import "breadcrumb.sass"
|
||||
@import "card.sass"
|
||||
@import "dropdown.sass"
|
||||
@import "level.sass"
|
||||
@import "media.sass"
|
||||
@import "menu.sass"
|
||||
@@ -11,4 +12,4 @@
|
||||
@import "navbar.sass"
|
||||
@import "pagination.sass"
|
||||
@import "panel.sass"
|
||||
@import "tabs.sass"
|
||||
@import "tabs.sass"
|
||||
|
||||
64
sass/components/dropdown.sass
Normal file
64
sass/components/dropdown.sass
Normal file
@@ -0,0 +1,64 @@
|
||||
$dropdown-content-background: $white !default
|
||||
$dropdown-content-arrow: $link !default
|
||||
$dropdown-content-offset: 4px !default
|
||||
$dropdown-content-radius: $radius !default
|
||||
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
|
||||
$dropdown-content-z: 20 !default
|
||||
|
||||
$dropdown-item: $grey-dark !default
|
||||
$dropdown-item-hover: $black !default
|
||||
$dropdown-item-hover-background: $background !default
|
||||
$dropdown-item-active: $black !default
|
||||
$dropdown-item-active-background: transparent !default
|
||||
|
||||
$dropdown-divider-background: $border !default
|
||||
|
||||
.dropdown
|
||||
display: inline-flex
|
||||
position: relative
|
||||
vertical-align: top
|
||||
&.is-active,
|
||||
&.is-hoverable:hover
|
||||
.dropdown-container
|
||||
display: block
|
||||
|
||||
.dropdown-container
|
||||
display: none
|
||||
left: 0
|
||||
max-width: 20rem
|
||||
min-width: 12rem
|
||||
padding-top: $dropdown-content-offset
|
||||
position: absolute
|
||||
top: 100%
|
||||
width: 100%
|
||||
z-index: $dropdown-content-z
|
||||
|
||||
.dropdown-content
|
||||
background-color: $dropdown-content-background
|
||||
border-radius: $dropdown-content-radius
|
||||
box-shadow: $dropdown-content-shadow
|
||||
padding-bottom: 0.5rem
|
||||
padding-top: 0.5rem
|
||||
|
||||
.dropdown-item
|
||||
color: $dropdown-item
|
||||
display: block
|
||||
font-size: 0.875rem
|
||||
line-height: 1.5
|
||||
padding: 0.375rem 1rem
|
||||
position: relative
|
||||
|
||||
a.dropdown-item
|
||||
padding-right: 3rem
|
||||
white-space: nowrap
|
||||
&:hover,
|
||||
&.is-active
|
||||
background-color: $dropdown-item-hover-background
|
||||
color: $dropdown-item-hover
|
||||
|
||||
.dropdown-divider
|
||||
background-color: $dropdown-divider-background
|
||||
border: none
|
||||
display: block
|
||||
height: 1px
|
||||
margin: 0.5rem 0
|
||||
@@ -1,5 +1,6 @@
|
||||
.section
|
||||
background-color: $white
|
||||
min-height: 100vh
|
||||
padding: 3rem 1.5rem
|
||||
// Responsiveness
|
||||
+desktop
|
||||
|
||||
Reference in New Issue
Block a user