List docs init

CHANGELOG.md

@@ -10,8 +10,8 @@
 * #1919 New `is-arrowless` class for navbar items
 * #1764 New `.is-sr-only` helper
 * #2109 Add and use `$navbar-breakpoint` variable
-
 * New variables `$control-height`, `$control-line-height`, `$pagination-min-width`, `$input-height`
+* #1720 Add list element feature
 
 ### Improvements
 

docs/_sass/specific.sass

@@ -73,7 +73,7 @@
 
 .bd-link-figure
   position: absolute
-  right: calc(100% + 0.5em)
+  right: calc(100% + 0.75em)
   text-align: center
   top: 0
   min-width: 1.5em

docs/documentation/components/list.html

@@ -0,0 +1,61 @@
+---
+title: List
+layout: documentation
+doc-tab: components
+doc-subtab: list
+breadcrumb:
+- home
+- documentation
+- components
+- components-list
+meta:
+  colors: false
+  sizes: false
+  variables: true
+---
+
+{% capture list_example %}
+<div class="list is-hoverable">
+  <a class="list-item">
+    Featured
+  </a>
+  <a class="list-item">
+    All Posts
+  </a>
+  <a class="list-item is-active">
+    Announcements
+  </a>
+  <a class="list-item">
+    Business
+  </a>
+  <a class="list-item">
+    Community
+  </a>
+  <a class="list-item">
+    Data
+  </a>
+  <a class="list-item">
+    Editor Tools
+  </a>
+  <a class="list-item">
+    Education
+  </a>
+  <a class="list-item">
+    Engineering
+  </a>
+  <a class="list-item">
+    Events
+  </a>
+  <a class="list-item">
+    Policy
+  </a>
+</div>
+{% endcapture %}
+
+<div class="content">
+  <p>
+    The list component consists of several elements:
+  </p>
+</div>
+
+{% include elements/snippet.html content=list_example more=true %}

sass/components/list.sass

@@ -9,19 +9,31 @@ $list-item-active-color: $link-invert !default
 $list-item-hover-background-color: $background !default
 
 .list
+  @extend %block
   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
+  box-shadow: $list-shadow
+  // &.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
+  &:not(a)
+    color: $list-item-color
+  &:first-child
+    border-top-left-radius: $list-radius
+    border-top-right-radius: $list-radius
+  &:last-child
+    border-top-left-radius: $list-radius
+    border-top-right-radius: $list-radius
+  &:not(:last-child)
+    border-bottom: $list-item-border
   &.is-active
     background-color: $list-item-active-background-color
     color: $list-item-active-color
-  &:not(:last-child)
-    border-bottom: $list-item-border
+
+a.list-item
+  background-color: $list-item-hover-background-color
+  cursor: pointer