blob: 0e5cf6501c39796de190aeefaa9a50d78d634e5d (
plain)
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
@import (reference) "../mixins";
@import (reference) "../variables";
@import (reference) "ui";
.dropdown {
position: relative;
}
.dropdown-toggle:focus {
outline: 0;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none; // none by default, but block on "open" of the menu
float: left;
min-width: 160px;
padding: 5px 0;
list-style: none;
font-size: @smallFontSize;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: #fff;
border: 1px solid @barBorderColor;
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
background-clip: padding-box;
&.pull-right {
right: 0;
left: auto;
}
// Links within the dropdown menu
> li > a {
display: block;
padding: 3px 20px;
line-height: 1.5;
clear: both;
font-weight: normal;
color: @baseFontColor;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
}
// Hover/Focus state
.dropdown-menu > li > a {
&:hover,
&:focus {
text-decoration: none;
color: @baseFontColor;
background-color: @lightBlue;
}
}
// Active state
.dropdown-menu > .active > a {
&,
&:hover,
&:focus {
color: @baseFontColor;
text-decoration: none;
outline: 0;
background-color: @lightBlue;
}
}
// Open state for the dropdown
.open {
// Show the menu
> .dropdown-menu {
display: block;
}
// Remove the outline when :focus is triggered
> a {
outline: 0;
}
}
// Menu positioning
//
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
// menu with the parent.
.dropdown-menu-right {
left: auto; // Reset the default from `.dropdown-menu`
right: 0;
}
// With v3, we enabled auto-flipping if you have a dropdown within a right
// aligned nav component. To enable the undoing of that, we provide an override
// to restore the default dropdown menu alignment.
//
// This is only for left-aligning a dropdown menu within a `.navbar-right` or
// `.pull-right` nav component.
.dropdown-menu-left {
left: 0;
right: auto;
}
// Dropdown section headers
.dropdown-header {
display: block;
padding: 3px 8px 5px;
font-size: @smallFontSize;
color: @secondFontColor;
white-space: nowrap; // as with > li > a
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
.dropdown-menu .small-divider {
height: 1px;
margin: 4px 20px;
overflow: hidden;
background-color: @barBackgroundColor;
}
// Backdrop to catch body clicks on mobile, etc.
.dropdown-backdrop {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: (1000 - 10);
}
|
