dropdown.css 5.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249
  1. /* Dropdown */
  2. .dropup,
  3. .dropdown {
  4. position: relative;
  5. display: inline-block;
  6. }
  7. .ui-dialog,
  8. .ui-datepicker,
  9. .dropdown-menu,
  10. .popover,
  11. .ui-menu,
  12. .minicolors-panel {
  13. position: absolute;
  14. z-index: 1050 !important;
  15. top: 105%;
  16. left: 0;
  17. display: none;
  18. float: left;
  19. min-width: 150px;
  20. margin: 5px 0 0;
  21. padding: 5px;
  22. list-style: none;
  23. text-align: left;
  24. border-width: 1px;
  25. border-style: solid;
  26. background: #fff;
  27. }
  28. .ui-datepicker {
  29. padding: 0;
  30. }
  31. .popover,
  32. .dropdown-menu,
  33. .ui-dialog {
  34. box-shadow: 0 1px 7px 2px rgba(135, 158, 171, 0.2);
  35. }
  36. .dropdown-menu {
  37. font-size: 13px;
  38. line-height: 1.6em;
  39. min-width: 100%;
  40. padding: 5px 0;
  41. text-transform: none;
  42. border: 0;
  43. }
  44. .dropdown-menu {
  45. min-width: 150px;
  46. }
  47. .dropdown-menu,
  48. .popover,
  49. .ui-menu,
  50. .minicolors-panel {
  51. top: 100%;
  52. }
  53. .dropdown-menu .divider {
  54. margin: 5px 1px;
  55. }
  56. .dropdown-menu.float-right {
  57. right: 0;
  58. left: auto;
  59. }
  60. .dropdown-menu .header {
  61. font-size: 11px;
  62. font-weight: bold;
  63. line-height: 1.4em;
  64. margin: 0 0 5px;
  65. padding: 5px 5px 10px;
  66. text-transform: uppercase;
  67. color: #888;
  68. border-bottom: #dfe8f1 solid 1px;
  69. }
  70. .dropdown-menu .dropdown-header {
  71. font-size: 11px;
  72. font-weight: 300;
  73. padding: 5px 15px;
  74. text-transform: uppercase;
  75. color: #000;
  76. }
  77. .dropdown-menu li {
  78. position: relative;
  79. }
  80. .dropdown-menu li > a,
  81. .ui-menu li > a {
  82. font-weight: normal;
  83. line-height: 20px;
  84. position: relative;
  85. display: block;
  86. clear: both;
  87. margin: 0;
  88. padding: 3px 20px 3px 15px;
  89. padding: 5px 15px;
  90. cursor: pointer;
  91. white-space: nowrap;
  92. }
  93. .dropdown > .dropdown-menu:before,
  94. .minicolors-position-bottom .minicolors-panel:before {
  95. position: absolute;
  96. top: -7px;
  97. left: 7px;
  98. display: inline-block;
  99. content: '';
  100. border-right: 7px solid transparent;
  101. border-bottom: 7px solid transparent;
  102. border-bottom-color: transparent;
  103. border-left: 7px solid transparent;
  104. }
  105. .dropdown > .dropdown-menu:after,
  106. .minicolors-position-bottom .minicolors-panel:after {
  107. position: absolute;
  108. top: -6px;
  109. left: 8px;
  110. display: inline-block;
  111. content: '';
  112. border-right: 6px solid transparent;
  113. border-bottom: 6px solid #fff;
  114. border-left: 6px solid transparent;
  115. }
  116. .dropdown > .dropdown-menu.float-right:before,
  117. .dropup > .dropdown-menu.float-right:before,
  118. .minicolors-position-right .minicolors-panel:before {
  119. right: 7px;
  120. left: auto;
  121. }
  122. .dropdown > .dropdown-menu.float-right:after,
  123. .dropup > .dropdown-menu.float-right:after,
  124. .minicolors-position-right .minicolors-panel:after {
  125. right: 8px;
  126. left: auto;
  127. }
  128. .minicolors-inline .minicolors-panel:after,
  129. .minicolors-inline .minicolors-panel:before {
  130. display: none;
  131. }
  132. .dropdown-dividers {
  133. padding: 0;
  134. }
  135. .dropdown-dividers li {
  136. padding: 3px;
  137. border-bottom: #ccc solid 1px;
  138. }
  139. .dropdown-dividers li:last-child {
  140. border-bottom: 0;
  141. }
  142. .dropdown-dividers li > a {
  143. padding: 2px 10px;
  144. }
  145. .push-left {
  146. left: 100% !important;
  147. margin-left: -30px;
  148. }
  149. .open {
  150. *z-index: 1000;
  151. }
  152. .open > .dropdown-menu {
  153. display: block;
  154. }
  155. .dropup .dropdown-menu {
  156. top: auto;
  157. bottom: 100%;
  158. margin-bottom: 8px;
  159. }
  160. .dropup > .dropdown-menu:before,
  161. .minicolors-position-top .minicolors-panel:before {
  162. position: absolute;
  163. bottom: -7px;
  164. left: 7px;
  165. display: inline-block;
  166. content: '';
  167. border-top: 7px solid #ccc;
  168. border-top-color: rgba(0, 0, 0, .2);
  169. border-right: 7px solid transparent;
  170. border-left: 7px solid transparent;
  171. }
  172. .dropup > .dropdown-menu:after,
  173. .minicolors-position-top .minicolors-panel:after {
  174. position: absolute;
  175. bottom: -6px;
  176. left: 8px;
  177. display: inline-block;
  178. content: '';
  179. border-top: 6px solid #fff;
  180. border-right: 6px solid transparent;
  181. border-left: 6px solid transparent;
  182. }
  183. .minicolors-position-top.minicolors-position-right .minicolors-panel:before {
  184. right: 6px;
  185. left: auto;
  186. }
  187. .minicolors-position-top.minicolors-position-right .minicolors-panel:after {
  188. right: 7px;
  189. left: auto;
  190. }
  191. .dropdown-submenu {
  192. position: relative;
  193. z-index: 40;
  194. }
  195. .dropdown-submenu > .dropdown-menu {
  196. top: 50%;
  197. left: 90%;
  198. margin-top: -6px;
  199. margin-left: -1px;
  200. border-radius: 0 4px 4px 4px;
  201. }
  202. .dropdown-submenu:hover > .dropdown-menu {
  203. display: block;
  204. }
  205. .dropup .dropdown-submenu > .dropdown-menu {
  206. top: auto;
  207. bottom: 0;
  208. margin-top: 0;
  209. margin-bottom: -2px;
  210. border-radius: 4px 4px 4px 0;
  211. }
  212. .dropdown-submenu > a:after {
  213. position: relative;
  214. display: block;
  215. float: right;
  216. width: 0;
  217. height: 0;
  218. margin-top: 5px;
  219. margin-right: -5px;
  220. content: ' ';
  221. opacity: .40;
  222. border-width: 5px 0 5px 5px;
  223. border-style: solid;
  224. border-color: transparent;
  225. border-left-color: #ccc;
  226. -moz-opacity: .40;
  227. filter: alpha(opacity: 40);
  228. }
  229. .dropdown-submenu.float-left > .dropdown-menu {
  230. left: -100%;
  231. }
  232. .dropdown-submenu:hover > a:after {
  233. border-left-color: #fff;
  234. }
  235. .dropdown-submenu.float-left {
  236. float: none !important;
  237. }
  238. .dropdown-submenu.float-left > .dropdown-menu {
  239. left: -110%;
  240. margin-left: 10px;
  241. border-radius: 4px 0 4px 4px;
  242. }
  243. .dropdown-submenu.float-left > .dropdown-menu.dropdown-dividers {
  244. margin-left: 20px;
  245. }
  246. .ui-menu-item {
  247. padding: 3px 6px;
  248. }