summaryrefslogtreecommitdiff
path: root/public/css/_sass/components/dropdown.sass
blob: aad663a69a1a03281a8a9719a6f1e2caa40e3dc2 (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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
$dropdown-content-background-color: $white !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) !default
$dropdown-content-z: 20 !default

$dropdown-item-color: $grey-dark !default
$dropdown-item-hover-color: $black !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default

$dropdown-divider-background-color: $border !default

.dropdown
  display: inline-flex
  position: relative
  vertical-align: top
  &.is-active,
  &.is-hoverable:hover
    .dropdown-menu
      display: block
  &.is-right
    .dropdown-menu
      left: auto
      right: 0
  &.is-up
    .dropdown-menu
      bottom: 100%
      padding-bottom: $dropdown-content-offset
      padding-top: initial
      top: auto

.dropdown-menu
  display: none
  left: 0
  min-width: 12rem
  padding-top: $dropdown-content-offset
  position: absolute
  top: 100%
  z-index: $dropdown-content-z

.dropdown-content
  background-color: $dropdown-content-background-color
  border-radius: $dropdown-content-radius
  box-shadow: $dropdown-content-shadow
  padding-bottom: 0.5rem
  padding-top: 0.5rem

.dropdown-item
  color: $dropdown-item-color
  display: block
  font-size: 0.875rem
  line-height: 1.5
  padding: 0.375rem 1rem
  position: relative

a.dropdown-item,
button.dropdown-item
  padding-right: 3rem
  text-align: left
  white-space: nowrap
  width: 100%
  &:hover
    background-color: $dropdown-item-hover-background-color
    color: $dropdown-item-hover-color
  &.is-active
    background-color: $dropdown-item-active-background-color
    color: $dropdown-item-active-color

.dropdown-divider
  background-color: $dropdown-divider-background-color
  border: none
  display: block
  height: 1px
  margin: 0.5rem 0