dropdowns.less 3.66 KB
Newer Older
1
2
3
4
//
// Dropdown menus
// --------------------------------------------------

5

6
7
// Dropdown arrow/caret
.caret {
8
9
  display: inline-block;
  width: 0;
10
  height: 0;
11
12
  margin-left: 2px;
  vertical-align: middle;
13
14
15
  border-top:   @caret-width-base solid @dropdown-caret-color;
  border-right: @caret-width-base solid transparent;
  border-left:  @caret-width-base solid transparent;
16
  content: "";
17
}
18

Guillermo González de Agüero's avatar
Guillermo González de Agüero committed
19
20
21
22
23
// The dropdown wrapper (div)
.dropdown {
  position: relative;
}

24
25
26
// The dropdown menu (ul)
.dropdown-menu {
  position: absolute;
27
  top: 100%;
28
  left: 0;
29
  z-index: @zindex-dropdown;
30
  display: none; // none by default, but block on "open" of the menu
Jacob Thornton's avatar
Jacob Thornton committed
31
  float: left;
32
  min-width: 160px;
Mark Otto's avatar
Mark Otto committed
33
  padding: 5px 0;
Mark Otto's avatar
Mark Otto committed
34
  margin: 2px 0 0; // override default ul
35
  list-style: none;
Mark Otto's avatar
Mark Otto committed
36
  background-color: @dropdown-bg;
37
  border: 1px solid @dropdown-fallback-border; // IE8 fallback
Mark Otto's avatar
Mark Otto committed
38
  border: 1px solid @dropdown-border;
39
  border-radius: @border-radius-base;
40
  .box-shadow(0 6px 12px rgba(0,0,0,.175));
41
  background-clip: padding-box;
42

43
44
45
46
  // Aligns the dropdown menu to right
  &.pull-right {
    right: 0;
    left: auto;
47
48
  }

49
50
  // Dividers (basically an hr) within the dropdown
  .divider {
Mark Otto's avatar
Mark Otto committed
51
    .nav-divider(@dropdown-divider-bg);
52
53
54
  }

  // Links within the dropdown menu
55
  > li > a {
56
    display: block;
57
    padding: 3px 20px;
58
59
    clear: both;
    font-weight: normal;
60
    line-height: @line-height-base;
Mark Otto's avatar
Mark Otto committed
61
    color: @dropdown-link-color;
62
    white-space: nowrap; // prevent links from randomly breaking onto new lines
63
  }
64
}
65

66
// Hover/Focus state
67
68
69
70
71
72
.dropdown-menu > li > a {
  &:hover,
  &:focus {
    text-decoration: none;
    color: @dropdown-link-hover-color;
    #gradient > .vertical(@start-color: @dropdown-link-hover-bg; @end-color: darken(@dropdown-link-hover-bg, 5%));
73
    background-color: darken(@dropdown-link-hover-bg, 5%);
74
  }
75
76
77
}

// Active state
78
79
80
81
82
83
84
85
.dropdown-menu > .active > a {
  &,
  &:hover,
  &:focus {
    color: @dropdown-link-active-color;
    text-decoration: none;
    outline: 0;
    #gradient > .vertical(@start-color: @dropdown-link-active-bg; @end-color: darken(@dropdown-link-active-bg, 5%));
86
    background-color: darken(@dropdown-link-active-bg, 5%);
87
  }
88
89
}

90
// Disabled state
91
//
92
// Gray out text and ensure the hover/focus state remains gray
93

94
95
96
97
.dropdown-menu > .disabled > a {
  &,
  &:hover,
  &:focus {
98
    color: @dropdown-link-disabled-color;
99
  }
100
}
101
// Nuke hover/focus effects
102
103
104
105
106
107
108
.dropdown-menu > .disabled > a {
  &:hover,
  &:focus {
    text-decoration: none;
    background-color: transparent;
    background-image: none; // Remove CSS gradient
    .reset-filter();
109
    cursor: not-allowed;
110
  }
111
112
}

113
// Open state for the dropdown
Mark Otto's avatar
Mark Otto committed
114
.open {
115
116
  // Show the menu
  > .dropdown-menu {
117
118
    display: block;
  }
119
120
121
122
123

  // Remove the outline when :focus is triggered
  > a {
    outline: 0;
  }
124
}
125

126
127
128
129
130
131
// Dropdown section headers
.dropdown-header {
  display: block;
  padding: 3px 20px;
  font-size: @font-size-small;
  line-height: @line-height-base;
132
  color: @dropdown-header-color;
133
134
}

135
136
137
138
139
140
141
142
143
144
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: @zindex-dropdown - 10;
}

Mark Otto's avatar
Mark Otto committed
145
// Right aligned dropdowns
146
.pull-right > .dropdown-menu {
Mark Otto's avatar
Mark Otto committed
147
  right: 0;
Jacob Thornton's avatar
Jacob Thornton committed
148
  left: auto;
Mark Otto's avatar
Mark Otto committed
149
150
}

151
// Allow for dropdowns to go bottom up (aka, dropup-menu)
152
//
153
// Just add .dropup after the standard .dropdown class and you're set, bro.
154
// TODO: abstract this so that the navbar fixed styles are not placed here?
155

156
157
.dropup,
.navbar-fixed-bottom .dropdown {
158
159
160
  // Reverse the caret
  .caret {
    border-top: 0;
Mark Otto's avatar
Mark Otto committed
161
    border-bottom: 4px solid @dropdown-caret-color;
162
    content: "";
163
164
165
166
167
168
169
170
  }
  // Different positioning for bottom up menu
  .dropdown-menu {
    top: auto;
    bottom: 100%;
    margin-bottom: 1px;
  }
}