_dropdown.scss 2.62 KB
Newer Older
1
// The dropdown wrapper (`<div>`)
2
.dropup,
Guillermo González de Agüero's avatar
Guillermo González de Agüero committed
3
4
5
6
.dropdown {
  position: relative;
}

7
8
.dropdown-toggle {
  // Generate the caret automatically
9
  @include caret;
Mark Otto's avatar
Mark Otto committed
10
11
}

Johann-S's avatar
Johann-S committed
12
13
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// Just add .dropup after the standard .dropdown class and you're set.
14
.dropup {
15
16
17
18
19
  .dropdown-menu {
    margin-top: 0;
    margin-bottom: $dropdown-spacer;
  }

20
  .dropdown-toggle {
21
    @include caret(up);
22
23
24
  }
}

25
// The dropdown menu
26
27
.dropdown-menu {
  position: absolute;
28
  top: 100%;
29
  left: 0;
Mark Otto's avatar
Mark Otto committed
30
  z-index: $zindex-dropdown;
31
  display: none; // none by default, but block on "open" of the menu
Jacob Thornton's avatar
Jacob Thornton committed
32
  float: left;
33
  min-width: $dropdown-min-width;
34
  padding: $dropdown-padding-y 0;
35
  margin: $dropdown-spacer 0 0; // override default ul
36
  font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
37
  color: $body-color;
38
  text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
39
  list-style: none;
Mark Otto's avatar
Mark Otto committed
40
  background-color: $dropdown-bg;
41
  background-clip: padding-box;
42
  border: $dropdown-border-width solid $dropdown-border-color;
43
  @include border-radius($border-radius);
44
  @include box-shadow($dropdown-box-shadow);
Mark Otto's avatar
Mark Otto committed
45
}
46

47
// Dividers (basically an `<hr>`) within the dropdown
Mark Otto's avatar
Mark Otto committed
48
49
.dropdown-divider {
  @include nav-divider($dropdown-divider-bg);
50
}
51

Mark Otto's avatar
Mark Otto committed
52
// Links, buttons, and more within the dropdown menu
Mark Otto's avatar
Mark Otto committed
53
//
54
// `<button>`-specific styles are denoted with `// For <button>s`
Mark Otto's avatar
Mark Otto committed
55
56
.dropdown-item {
  display: block;
Mark Otto's avatar
Mark Otto committed
57
  width: 100%; // For `<button>`s
Mark Otto's avatar
Mark Otto committed
58
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
Mark Otto's avatar
Mark Otto committed
59
  clear: both;
60
  font-weight: $font-weight-normal;
Mark Otto's avatar
Mark Otto committed
61
  color: $dropdown-link-color;
Mark Otto's avatar
Mark Otto committed
62
  text-align: inherit; // For `<button>`s
Mark Otto's avatar
Mark Otto committed
63
  white-space: nowrap; // prevent links from randomly breaking onto new lines
Mark Otto's avatar
Mark Otto committed
64
65
  background: none; // For `<button>`s
  border: 0; // For `<button>`s
66

67
  @include hover-focus {
Mark Otto's avatar
Mark Otto committed
68
    color: $dropdown-link-hover-color;
69
    text-decoration: none;
Mark Otto's avatar
Mark Otto committed
70
    background-color: $dropdown-link-hover-bg;
71
  }
72

Mark Otto's avatar
Mark Otto committed
73
74
75
76
77
  &.active,
  &:active {
    color: $dropdown-link-active-color;
    text-decoration: none;
    background-color: $dropdown-link-active-bg;
78
  }
79

Mark Otto's avatar
Mark Otto committed
80
81
82
83
84
85
86
  &.disabled,
  &:disabled {
    color: $dropdown-link-disabled-color;
    background-color: transparent;
    // Remove CSS gradients if they're enabled
    @if $enable-gradients {
      background-image: none;
Mark Otto's avatar
Mark Otto committed
87
    }
88
  }
89
90
}

Johann-S's avatar
Johann-S committed
91
92
93
94
.dropdown-menu.show {
  display: block;
}

95
96
97
// Dropdown section headers
.dropdown-header {
  display: block;
98
  padding: $dropdown-padding-y $dropdown-item-padding-x;
Mark Otto's avatar
Mark Otto committed
99
  margin-bottom: 0; // for use with heading elements
Mark Otto's avatar
Mark Otto committed
100
101
  font-size: $font-size-sm;
  color: $dropdown-header-color;
102
  white-space: nowrap; // as with > li > a
103
}