editor: canvas fix - restore deleting selected text
[fnpeditor.git] / libs / bootstrap / less / dropdowns.less
1 //
2 // Dropdown menus
3 // --------------------------------------------------
4
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
21 // --------------------
22 .caret {
23   display: inline-block;
24   width: 0;
25   height: 0;
26   vertical-align: top;
27   border-top:   4px solid @black;
28   border-right: 4px solid transparent;
29   border-left:  4px solid transparent;
30   content: "";
31 }
32
33 // Place the caret
34 .dropdown .caret {
35   margin-top: 8px;
36   margin-left: 2px;
37 }
38
39 // The dropdown menu (ul)
40 // ----------------------
41 .dropdown-menu {
42   position: absolute;
43   top: 100%;
44   left: 0;
45   z-index: @zindexDropdown;
46   display: none; // none by default, but block on "open" of the menu
47   float: left;
48   min-width: 160px;
49   padding: 5px 0;
50   margin: 2px 0 0; // override default ul
51   list-style: none;
52   background-color: @dropdownBackground;
53   border: 1px solid #ccc; // Fallback for IE7-8
54   border: 1px solid @dropdownBorder;
55   *border-right-width: 2px;
56   *border-bottom-width: 2px;
57   .border-radius(6px);
58   .box-shadow(0 5px 10px rgba(0,0,0,.2));
59   -webkit-background-clip: padding-box;
60      -moz-background-clip: padding;
61           background-clip: padding-box;
62
63   // Aligns the dropdown menu to right
64   &.pull-right {
65     right: 0;
66     left: auto;
67   }
68
69   // Dividers (basically an hr) within the dropdown
70   .divider {
71     .nav-divider(@dropdownDividerTop, @dropdownDividerBottom);
72   }
73
74   // Links within the dropdown menu
75   > li > a {
76     display: block;
77     padding: 3px 20px;
78     clear: both;
79     font-weight: normal;
80     line-height: @baseLineHeight;
81     color: @dropdownLinkColor;
82     white-space: nowrap;
83   }
84 }
85
86 // Hover/Focus state
87 // -----------
88 .dropdown-menu > li > a:hover,
89 .dropdown-menu > li > a:focus,
90 .dropdown-submenu:hover > a,
91 .dropdown-submenu:focus > a {
92   text-decoration: none;
93   color: @dropdownLinkColorHover;
94   #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
95 }
96
97 // Active state
98 // ------------
99 .dropdown-menu > .active > a,
100 .dropdown-menu > .active > a:hover,
101 .dropdown-menu > .active > a:focus {
102   color: @dropdownLinkColorActive;
103   text-decoration: none;
104   outline: 0;
105   #gradient > .vertical(@dropdownLinkBackgroundActive, darken(@dropdownLinkBackgroundActive, 5%));
106 }
107
108 // Disabled state
109 // --------------
110 // Gray out text and ensure the hover/focus state remains gray
111 .dropdown-menu > .disabled > a,
112 .dropdown-menu > .disabled > a:hover,
113 .dropdown-menu > .disabled > a:focus {
114   color: @grayLight;
115 }
116 // Nuke hover/focus effects
117 .dropdown-menu > .disabled > a:hover,
118 .dropdown-menu > .disabled > a:focus {
119   text-decoration: none;
120   background-color: transparent;
121   background-image: none; // Remove CSS gradient
122   .reset-filter();
123   cursor: default;
124 }
125
126 // Open state for the dropdown
127 // ---------------------------
128 .open {
129   // IE7's z-index only goes to the nearest positioned ancestor, which would
130   // make the menu appear below buttons that appeared later on the page
131   *z-index: @zindexDropdown;
132
133   & > .dropdown-menu {
134     display: block;
135   }
136 }
137
138 // Right aligned dropdowns
139 // ---------------------------
140 .pull-right > .dropdown-menu {
141   right: 0;
142   left: auto;
143 }
144
145 // Allow for dropdowns to go bottom up (aka, dropup-menu)
146 // ------------------------------------------------------
147 // 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?
149 .dropup,
150 .navbar-fixed-bottom .dropdown {
151   // Reverse the caret
152   .caret {
153     border-top: 0;
154     border-bottom: 4px solid @black;
155     content: "";
156   }
157   // Different positioning for bottom up menu
158   .dropdown-menu {
159     top: auto;
160     bottom: 100%;
161     margin-bottom: 1px;
162   }
163 }
164
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
182 // Dropups
183 .dropup .dropdown-submenu > .dropdown-menu {
184   top: auto;
185   bottom: 0;
186   margin-top: 0;
187   margin-bottom: -2px;
188   .border-radius(5px 5px 5px 0);
189 }
190
191 // Caret to indicate there is a submenu
192 .dropdown-submenu > a:after {
193   display: block;
194   content: " ";
195   float: right;
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   }
221 }
222
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 }