From e6e4a5a01adf0b13c3830717ae1d759d60b3af90 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20D=C3=A4schle?= <daniel.daeschle@gmail.com>
Date: Tue, 2 Oct 2018 09:34:10 +0200
Subject: [PATCH] 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
---
 sass/components/_all.sass |  1 +
 sass/components/list.sass | 27 +++++++++++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 sass/components/list.sass

diff --git a/sass/components/_all.sass b/sass/components/_all.sass
index 1de2c214..88fd45c5 100644
--- 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
index 00000000..a40a3f84
--- /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