Add list element feature [Fixes #772] (#1720)

* Add list element feature

* Move list from elements to components

* Remove list.sass from elements

* Add is-active to list, Move list-item out of list, Change some things

* Change display: flex to block

* Change padding and border to shadow

* Change variable names and padding

* Fix undefined variable bug

* Change reference variable to local variable
This commit is contained in:
Daniel Däschle 2018-10-02 09:34:10 +02:00 committed by Jeremy Thomas
parent 375c27a62c
commit e6e4a5a01a
2 changed files with 28 additions and 0 deletions

View File

@ -4,6 +4,7 @@
@import "card.sass"
@import "dropdown.sass"
@import "level.sass"
@import "list.sass"
@import "media.sass"
@import "menu.sass"
@import "message.sass"

27
sass/components/list.sass Normal file
View File

@ -0,0 +1,27 @@
$list-background-color: $white !default
$list-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$list-radius: $radius !default
$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default
.list
background-color: $list-background-color
box-shadow: $list-shadow
border-radius: $list-radius
&.is-hoverable > .list-item:hover:not(.is-active)
background-color: $list-item-hover-background-color
cursor: pointer
.list-item
color: $list-item-color
display: block
padding: 0.5em 1em
&.is-active
background-color: $list-item-active-background-color
color: $list-item-active-color
&:not(:last-child)
border-bottom: $list-item-border