Mercurial > wikked

comparison static/bootstrap/less/dropdowns.less @ 149:d29e2f337b00

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Updated to Bootstrap 3.0.
author Ludovic Chabant <ludovic@chabant.com>
date Thu, 12 Dec 2013 21:54:04 -0800
parents a5a3d454eac9
children
comparison
equal deleted inserted replaced
148:f02e049d6546 149:d29e2f337b00
1 // 1 //
2 // Dropdown menus 2 // Dropdown menus
3 // -------------------------------------------------- 3 // --------------------------------------------------
4 4
5 5
6 // Use the .menu class on any <li> element within the topbar or ul.tabs and you'll get some superfancy dropdowns
7 .dropup,
8 .dropdown {
9 position: relative;
10 }
11 .dropdown-toggle {
12 // The caret makes the toggle a bit too tall in IE7
13 *margin-bottom: -3px;
14 }
15 .dropdown-toggle:active,
16 .open .dropdown-toggle {
17 outline: 0;
18 }
19
20 // Dropdown arrow/caret 6 // Dropdown arrow/caret
21 // --------------------
22 .caret { 7 .caret {
23 display: inline-block; 8 display: inline-block;
24 width: 0; 9 width: 0;
25 height: 0; 10 height: 0;
26 vertical-align: top; 11 margin-left: 2px;
27 border-top: 4px solid @black; 12 vertical-align: middle;
28 border-right: 4px solid transparent; 13 border-top: @caret-width-base solid;
29 border-left: 4px solid transparent; 14 border-right: @caret-width-base solid transparent;
30 content: ""; 15 border-left: @caret-width-base solid transparent;
31 } 16 }
32 17
33 // Place the caret 18 // The dropdown wrapper (div)
34 .dropdown .caret { 19 .dropdown {
35 margin-top: 8px; 20 position: relative;
36 margin-left: 2px; 21 }
22
23 // Prevent the focus on the dropdown toggle when closing dropdowns
24 .dropdown-toggle:focus {
25 outline: 0;
37 } 26 }
38 27
39 // The dropdown menu (ul) 28 // The dropdown menu (ul)
40 // ----------------------
41 .dropdown-menu { 29 .dropdown-menu {
42 position: absolute; 30 position: absolute;
43 top: 100%; 31 top: 100%;
44 left: 0; 32 left: 0;
45 z-index: @zindexDropdown; 33 z-index: @zindex-dropdown;
46 display: none; // none by default, but block on "open" of the menu 34 display: none; // none by default, but block on "open" of the menu
47 float: left; 35 float: left;
48 min-width: 160px; 36 min-width: 160px;
49 padding: 5px 0; 37 padding: 5px 0;
50 margin: 2px 0 0; // override default ul 38 margin: 2px 0 0; // override default ul
51 list-style: none; 39 list-style: none;
52 background-color: @dropdownBackground; 40 font-size: @font-size-base;
53 border: 1px solid #ccc; // Fallback for IE7-8 41 background-color: @dropdown-bg;
54 border: 1px solid @dropdownBorder; 42 border: 1px solid @dropdown-fallback-border; // IE8 fallback
55 *border-right-width: 2px; 43 border: 1px solid @dropdown-border;
56 *border-bottom-width: 2px; 44 border-radius: @border-radius-base;
57 .border-radius(6px); 45 .box-shadow(0 6px 12px rgba(0,0,0,.175));
58 .box-shadow(0 5px 10px rgba(0,0,0,.2)); 46 background-clip: padding-box;
59 -webkit-background-clip: padding-box;
60 -moz-background-clip: padding;
61 background-clip: padding-box;
62 47
63 // Aligns the dropdown menu to right 48 // Aligns the dropdown menu to right
64 &.pull-right { 49 &.pull-right {
65 right: 0; 50 right: 0;
66 left: auto; 51 left: auto;
67 } 52 }
68 53
69 // Dividers (basically an hr) within the dropdown 54 // Dividers (basically an hr) within the dropdown
70 .divider { 55 .divider {
71 .nav-divider(@dropdownDividerTop, @dropdownDividerBottom); 56 .nav-divider(@dropdown-divider-bg);
72 } 57 }
73 58
74 // Links within the dropdown menu 59 // Links within the dropdown menu
75 > li > a { 60 > li > a {
76 display: block; 61 display: block;
77 padding: 3px 20px; 62 padding: 3px 20px;
78 clear: both; 63 clear: both;
79 font-weight: normal; 64 font-weight: normal;
80 line-height: @baseLineHeight; 65 line-height: @line-height-base;
81 color: @dropdownLinkColor; 66 color: @dropdown-link-color;
82 white-space: nowrap; 67 white-space: nowrap; // prevent links from randomly breaking onto new lines
83 } 68 }
84 } 69 }
85 70
86 // Hover/Focus state 71 // Hover/Focus state
87 // ----------- 72 .dropdown-menu > li > a {
88 .dropdown-menu > li > a:hover, 73 &:hover,
89 .dropdown-menu > li > a:focus, 74 &:focus {
90 .dropdown-submenu:hover > a, 75 text-decoration: none;
91 .dropdown-submenu:focus > a { 76 color: @dropdown-link-hover-color;
92 text-decoration: none; 77 background-color: @dropdown-link-hover-bg;
93 color: @dropdownLinkColorHover; 78 }
94 #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
95 } 79 }
96 80
97 // Active state 81 // Active state
98 // ------------ 82 .dropdown-menu > .active > a {
99 .dropdown-menu > .active > a, 83 &,
100 .dropdown-menu > .active > a:hover, 84 &:hover,
101 .dropdown-menu > .active > a:focus { 85 &:focus {
102 color: @dropdownLinkColorActive; 86 color: @dropdown-link-active-color;
103 text-decoration: none; 87 text-decoration: none;
104 outline: 0; 88 outline: 0;
105 #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%)); 89 background-color: @dropdown-link-active-bg;
90 }
106 } 91 }
107 92
108 // Disabled state 93 // Disabled state
109 // -------------- 94 //
110 // Gray out text and ensure the hover/focus state remains gray 95 // Gray out text and ensure the hover/focus state remains gray
111 .dropdown-menu > .disabled > a, 96
112 .dropdown-menu > .disabled > a:hover, 97 .dropdown-menu > .disabled > a {
113 .dropdown-menu > .disabled > a:focus { 98 &,
114 color: @grayLight; 99 &:hover,
100 &:focus {
101 color: @dropdown-link-disabled-color;
102 }
115 } 103 }
116 // Nuke hover/focus effects 104 // Nuke hover/focus effects
117 .dropdown-menu > .disabled > a:hover, 105 .dropdown-menu > .disabled > a {
118 .dropdown-menu > .disabled > a:focus { 106 &:hover,
119 text-decoration: none; 107 &:focus {
120 background-color: transparent; 108 text-decoration: none;
121 background-image: none; // Remove CSS gradient 109 background-color: transparent;
122 .reset-filter(); 110 background-image: none; // Remove CSS gradient
123 cursor: default; 111 .reset-filter();
112 cursor: not-allowed;
113 }
124 } 114 }
125 115
126 // Open state for the dropdown 116 // Open state for the dropdown
127 // ---------------------------
128 .open { 117 .open {
129 // IE7's z-index only goes to the nearest positioned ancestor, which would 118 // Show the menu
130 // make the menu appear below buttons that appeared later on the page 119 > .dropdown-menu {
131 *z-index: @zindexDropdown; 120 display: block;
121 }
132 122
133 & > .dropdown-menu { 123 // Remove the outline when :focus is triggered
134 display: block; 124 > a {
125 outline: 0;
135 } 126 }
136 } 127 }
137 128
129 // Dropdown section headers
130 .dropdown-header {
131 display: block;
132 padding: 3px 20px;
133 font-size: @font-size-small;
134 line-height: @line-height-base;
135 color: @dropdown-header-color;
136 }
137
138 // Backdrop to catch body clicks on mobile, etc.
139 .dropdown-backdrop {
140 position: fixed;
141 left: 0;
142 right: 0;
143 bottom: 0;
144 top: 0;
145 z-index: @zindex-dropdown - 10;
146 }
147
138 // Right aligned dropdowns 148 // Right aligned dropdowns
139 // ---------------------------
140 .pull-right > .dropdown-menu { 149 .pull-right > .dropdown-menu {
141 right: 0; 150 right: 0;
142 left: auto; 151 left: auto;
143 } 152 }
144 153
145 // Allow for dropdowns to go bottom up (aka, dropup-menu) 154 // Allow for dropdowns to go bottom up (aka, dropup-menu)
146 // ------------------------------------------------------ 155 //
147 // Just add .dropup after the standard .dropdown class and you're set, bro. 156 // Just add .dropup after the standard .dropdown class and you're set, bro.
148 // TODO: abstract this so that the navbar fixed styles are not placed here? 157 // TODO: abstract this so that the navbar fixed styles are not placed here?
158
149 .dropup, 159 .dropup,
150 .navbar-fixed-bottom .dropdown { 160 .navbar-fixed-bottom .dropdown {
151 // Reverse the caret 161 // Reverse the caret
152 .caret { 162 .caret {
153 border-top: 0; 163 border-top: 0;
154 border-bottom: 4px solid @black; 164 border-bottom: @caret-width-base solid;
155 content: ""; 165 content: "";
156 } 166 }
157 // Different positioning for bottom up menu 167 // Different positioning for bottom up menu
158 .dropdown-menu { 168 .dropdown-menu {
159 top: auto; 169 top: auto;
160 bottom: 100%; 170 bottom: 100%;
161 margin-bottom: 1px; 171 margin-bottom: 1px;
162 } 172 }
163 } 173 }
164 174
165 // Sub menus
166 // ---------------------------
167 .dropdown-submenu {
168 position: relative;
169 }
170 // Default dropdowns
171 .dropdown-submenu > .dropdown-menu {
172 top: 0;
173 left: 100%;
174 margin-top: -6px;
175 margin-left: -1px;
176 .border-radius(0 6px 6px 6px);
177 }
178 .dropdown-submenu:hover > .dropdown-menu {
179 display: block;
180 }
181 175
182 // Dropups 176 // Component alignment
183 .dropup .dropdown-submenu > .dropdown-menu { 177 //
184 top: auto; 178 // Reiterate per navbar.less and the modified component alignment there.
185 bottom: 0;
186 margin-top: 0;
187 margin-bottom: -2px;
188 .border-radius(5px 5px 5px 0);
189 }
190 179
191 // Caret to indicate there is a submenu 180 @media (min-width: @grid-float-breakpoint) {
192 .dropdown-submenu > a:after { 181 .navbar-right {
193 display: block; 182 .dropdown-menu {
194 content: " "; 183 .pull-right > .dropdown-menu();
195 float: right; 184 }
196 width: 0;
197 height: 0;
198 border-color: transparent;
199 border-style: solid;
200 border-width: 5px 0 5px 5px;
201 border-left-color: darken(@dropdownBackground, 20%);
202 margin-top: 5px;
203 margin-right: -10px;
204 }
205 .dropdown-submenu:hover > a:after {
206 border-left-color: @dropdownLinkColorHover;
207 }
208
209 // Left aligned submenus
210 .dropdown-submenu.pull-left {
211 // Undo the float
212 // Yes, this is awkward since .pull-left adds a float, but it sticks to our conventions elsewhere.
213 float: none;
214
215 // Positioning the submenu
216 > .dropdown-menu {
217 left: -100%;
218 margin-left: 10px;
219 .border-radius(6px 0 6px 6px);
220 } 185 }
221 } 186 }
222 187
223 // Tweak nav headers
224 // -----------------
225 // Increase padding from 15px to 20px on sides
226 .dropdown .dropdown-menu .nav-header {
227 padding-left: 20px;
228 padding-right: 20px;
229 }
230
231 // Typeahead
232 // ---------
233 .typeahead {
234 z-index: 1051;
235 margin-top: 2px; // give it some space to breathe
236 .border-radius(@baseBorderRadius);
237 }