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

diff --git a/sass/components/_all.sass b/sass/components/_all.sass
index 1de2c214ed00a9f759688f65c5a8c258b55f415f..88fd45c5a6483fff2c493a811ea5ca78f37dd6a2 100644 (file)
--- a/sass/components/_all.sass
+++ b/sass/components/_all.sass
@@ -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"

diff --git a/sass/components/list.sass b/sass/components/list.sass
new file mode 100644 (file)
index 0000000..a40a3f8
--- /dev/null
+++ b/sass/components/list.sass
@@ -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