/
_dropdowns.sass
130 lines (115 loc) · 3.01 KB
/
_dropdowns.sass
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
// DROPDOWN MENUS
// --------------
// Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
.dropup,
.dropdown
position: relative
.dropdown-toggle
// The caret makes the toggle a bit too tall in IE7
*margin-bottom: -3px
.dropdown-toggle:active,
.open .dropdown-toggle
outline: 0
// Dropdown arrow/caret
// --------------------
.caret
display: inline-block
width: 0
height: 0
vertical-align: top
border-top: 4px solid $black
border-right: 4px solid transparent
border-left: 4px solid transparent
content: ""
+bootstrap-opacity(30)
// Place the caret
.dropdown .caret
margin-top: 8px
margin-left: 2px
.dropdown:hover .caret,
.open .caret
+bootstrap-opacity(100)
// The dropdown menu (ul)
// ----------------------
.dropdown-menu
position: absolute
top: 100%
left: 0
z-index: $zindexDropdown
display: none
// none by default, but block on "open" of the menu
float: left
min-width: 160px
padding: 4px 0
margin: 1px 0 0
// override default ul
list-style: none
background-color: $dropdownBackground
border: 1px solid #ccc
border: 1px solid rgba(0, 0, 0, 0.2)
*border-right-width: 2px
*border-bottom-width: 2px
+bootstrap-border-radius(5px)
+bootstrap-box-shadow(0 5px 10px rgba(0, 0, 0, 0.2))
-webkit-background-clip: padding-box
-moz-background-clip: padding
background-clip: padding-box
// Aligns the dropdown menu to right
&.pull-right
right: 0
left: auto
// Dividers (basically an hr) within the dropdown
.divider
+bootstrap-nav-divider
// Links within the dropdown menu
a
display: block
padding: 3px 15px
clear: both
font-weight: normal
line-height: $baseLineHeight
color: $dropdownLinkColor
white-space: nowrap
// Hover state
// -----------
.dropdown-menu li > a:hover,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover
color: $dropdownLinkColorHover
text-decoration: none
background-color: $dropdownLinkBackgroundHover
// Open state for the dropdown
// ---------------------------
.open
// IE7's z-index only goes to the nearest positioned ancestor, which would
// make the menu appear below buttons that appeared later on the page
*z-index: $zindexDropdown
.dropdown-menu
display: block
// Right aligned dropdowns
// ---------------------------
.pull-right .dropdown-menu
right: 0
left: auto
// Allow for dropdowns to go bottom up (aka, dropup-menu)
// ------------------------------------------------------
// Just add .dropup after the standard .dropdown class and you're set, bro.
// TODO: abstract this so that the navbar fixed styles are not placed here?
.dropup,
.navbar-fixed-bottom .dropdown
// Reverse the caret
.caret
border-top: 0
border-bottom: 4px solid $black
content: "\2191"
// Different positioning for bottom up menu
.dropdown-menu
top: auto
bottom: 100%
margin-bottom: 1px
// Typeahead
// ---------
.typeahead
margin-top: 2px
// give it some space to breathe
+bootstrap-border-radius(4px)