summaryrefslogtreecommitdiff
path: root/styles/_sass/components/list.sass
blob: bc99428a9a0abdb7c9d8f4b39320043ed7aa1327 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 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
  @extend %block
  background-color: $list-background-color
  border-radius: $list-radius
  box-shadow: $list-shadow
  // &.is-hoverable > .list-item:hover:not(.is-active)
  //   background-color: $list-item-hover-background-color
  //   cursor: pointer

.list-item
  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-bottom-left-radius: $list-radius
    border-bottom-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

a.list-item
  background-color: $list-item-hover-background-color
  cursor: pointer