You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

504 lines
9.7 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic - Dropdown
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Dropdown
  13. *******************************/
  14. .ui.dropdown {
  15. cursor: pointer;
  16. position: relative;
  17. display: inline-block;
  18. line-height: 1;
  19. -webkit-transition: border-radius 0.1s ease, width 0.2s ease;
  20. transition: border-radius 0.1s ease, width 0.2s ease;
  21. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  22. -moz-tap-highlight-color: rgba(0, 0, 0, 0);
  23. tap-highlight-color: rgba(0, 0, 0, 0);
  24. }
  25. /*******************************
  26. Content
  27. *******************************/
  28. /*--------------
  29. Menu
  30. ---------------*/
  31. .ui.dropdown .menu {
  32. cursor: auto;
  33. position: absolute;
  34. display: none;
  35. top: 100%;
  36. margin: 0em;
  37. background-color: #FFFFFF;
  38. min-width: 100%;
  39. white-space: nowrap;
  40. font-size: 0.875em;
  41. text-shadow: none;
  42. -webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
  43. box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.1);
  44. border-radius: 0px 0px 0.325em 0.325em;
  45. -webkit-transition: opacity 0.2s ease;
  46. transition: opacity 0.2s ease;
  47. z-index: 11;
  48. }
  49. /*--------------
  50. Icon
  51. ---------------*/
  52. .ui.dropdown > .dropdown.icon {
  53. width: auto;
  54. margin: 0em 0em 0em 1em;
  55. }
  56. .ui.dropdown > .dropdown.icon:before {
  57. content: "\f0d7";
  58. }
  59. .ui.dropdown .menu .item .dropdown.icon {
  60. width: auto;
  61. float: right;
  62. margin: 0em 0em 0em 0.5em;
  63. }
  64. .ui.dropdown .menu .item .dropdown.icon:before {
  65. content: "\f0da";
  66. }
  67. /*--------------
  68. Text
  69. ---------------*/
  70. .ui.dropdown > .text {
  71. display: inline-block;
  72. -webkit-transition: color 0.2s ease;
  73. transition: color 0.2s ease;
  74. }
  75. /* Flyout Direction */
  76. .ui.dropdown .menu {
  77. left: 0px;
  78. }
  79. /*--------------
  80. Sub Menu
  81. ---------------*/
  82. .ui.dropdown .menu .menu {
  83. top: 0% !important;
  84. left: 100% !important;
  85. margin: 0em !important;
  86. border-radius: 0 0.325em 0.325em 0em !important;
  87. }
  88. .ui.dropdown .menu .menu:after {
  89. display: none;
  90. }
  91. .ui.dropdown .menu .item {
  92. cursor: pointer;
  93. border: none;
  94. border-top: 1px solid rgba(0, 0, 0, 0.05);
  95. height: auto;
  96. font-size: 0.875em;
  97. display: block;
  98. color: rgba(0, 0, 0, 0.75);
  99. padding: 0.85em 1em !important;
  100. font-size: 0.875rem;
  101. text-transform: none;
  102. font-weight: normal;
  103. text-align: left;
  104. -webkit-touch-callout: none;
  105. }
  106. .ui.dropdown .menu .item:before {
  107. display: none;
  108. }
  109. .ui.dropdown .menu .item .icon {
  110. margin-right: 0.75em;
  111. }
  112. .ui.dropdown .menu .item:first-child {
  113. border-top: none;
  114. }
  115. /*******************************
  116. Coupling
  117. *******************************/
  118. /* Opposite on last menu on right */
  119. .ui.menu .right.menu .dropdown:last-child .menu,
  120. .ui.buttons > .ui.dropdown:last-child .menu {
  121. left: auto;
  122. right: 0px;
  123. }
  124. .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
  125. content: "\f0da";
  126. }
  127. .ui.dropdown.icon.button > .dropdown.icon {
  128. margin: 0em;
  129. }
  130. /*******************************
  131. States
  132. *******************************/
  133. /* Dropdown Visible */
  134. .ui.visible.dropdown > .menu {
  135. display: block;
  136. }
  137. /* Menu Item Hover */
  138. .ui.dropdown .menu .item:hover {
  139. background-color: rgba(0, 0, 0, 0.02);
  140. z-index: 12;
  141. }
  142. /* Menu Item Active */
  143. .ui.dropdown .menu .active.item {
  144. background-color: rgba(0, 0, 0, 0.06) !important;
  145. border-left: none;
  146. border-color: transparent !important;
  147. -webkit-box-shadow: none;
  148. -moz-shadow: none;
  149. box-shadow: none;
  150. z-index: 12;
  151. }
  152. /* Default Text */
  153. .ui.dropdown > .default.text,
  154. .ui.default.dropdown > .text {
  155. color: rgba(0, 0, 0, 0.5);
  156. }
  157. .ui.dropdown:hover > .default.text,
  158. .ui.default.dropdown:hover > .text {
  159. color: rgba(0, 0, 0, 0.8);
  160. }
  161. /*******************************
  162. Variations
  163. *******************************/
  164. /*--------------
  165. Simple
  166. ---------------*/
  167. /* Displays without javascript */
  168. .ui.simple.dropdown .menu:before,
  169. .ui.simple.dropdown .menu:after {
  170. display: none;
  171. }
  172. .ui.simple.dropdown .menu {
  173. display: block;
  174. overflow: hidden;
  175. top: -9999px !important;
  176. position: absolute;
  177. opacity: 0;
  178. width: 0;
  179. height: 0;
  180. -webkit-transition: opacity 0.2s ease-out;
  181. transition: opacity 0.2s ease-out;
  182. }
  183. .ui.simple.active.dropdown,
  184. .ui.simple.dropdown:hover {
  185. border-bottom-left-radius: 0em !important;
  186. border-bottom-right-radius: 0em !important;
  187. }
  188. .ui.simple.active.dropdown > .menu,
  189. .ui.simple.dropdown:hover > .menu {
  190. overflow: visible;
  191. width: auto;
  192. height: auto;
  193. top: 100% !important;
  194. opacity: 1;
  195. }
  196. .ui.simple.dropdown > .menu .item:active > .menu,
  197. .ui.simple.dropdown:hover > .menu .item:hover > .menu {
  198. overflow: visible;
  199. width: auto;
  200. height: auto;
  201. top: 0% !important;
  202. left: 100% !important;
  203. opacity: 1;
  204. }
  205. .ui.simple.disabled.dropdown:hover .menu {
  206. display: none;
  207. height: 0px;
  208. width: 0px;
  209. overflow: hidden;
  210. }
  211. /*--------------
  212. Selection
  213. ---------------*/
  214. /* Displays like a select box */
  215. .ui.selection.dropdown {
  216. cursor: pointer;
  217. display: inline-block;
  218. word-wrap: break-word;
  219. white-space: normal;
  220. background-color: #FFFFFF;
  221. padding: 0.5em 1em;
  222. line-height: 1.33;
  223. color: rgba(0, 0, 0, 0.8);
  224. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  225. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) !important;
  226. border-radius: 0.3125em !important;
  227. }
  228. .ui.selection.dropdown select {
  229. display: none;
  230. }
  231. .ui.selection.dropdown > .dropdown.icon {
  232. opacity: 0.7;
  233. margin: 0.2em 0em 0.2em 1.25em;
  234. -webkit-transition: opacity 0.2s ease-out;
  235. transition: opacity 0.2s ease-out;
  236. }
  237. .ui.selection.dropdown,
  238. .ui.selection.dropdown .menu {
  239. top: 100%;
  240. -webkit-transition: -webkit-box-shadow 0.2s ease-out;
  241. transition: box-shadow 0.2s ease-out;
  242. }
  243. .ui.selection.dropdown .menu {
  244. max-height: 312px;
  245. overflow-x: hidden;
  246. overflow-y: auto;
  247. -webkit-box-shadow: 0px 1px 0px 1px #E0E0E0;
  248. box-shadow: 0px 1px 0px 1px #E0E0E0;
  249. border-radius: 0px 0px 0.325em 0.325em;
  250. }
  251. .ui.selection.dropdown .menu:after,
  252. .ui.selection.dropdown .menu:before {
  253. display: none;
  254. }
  255. .ui.selection.dropdown .menu img {
  256. height: 2.5em;
  257. display: inline-block;
  258. vertical-align: middle;
  259. margin-right: 0.5em;
  260. }
  261. /* Hover */
  262. .ui.selection.dropdown:hover {
  263. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
  264. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.2) !important;
  265. }
  266. .ui.selection.dropdown:hover .menu {
  267. -webkit-box-shadow: 0px 1px 0px 1px #D3D3D3;
  268. box-shadow: 0px 1px 0px 1px #D3D3D3;
  269. }
  270. .ui.selection.dropdown:hover > .dropdown.icon {
  271. opacity: 1;
  272. }
  273. /* Visible */
  274. .ui.visible.selection.dropdown {
  275. border-bottom-left-radius: 0em !important;
  276. border-bottom-right-radius: 0em !important;
  277. }
  278. /* Active */
  279. .ui.active.selection.dropdown {
  280. border-radius: 0.3125em 0.3125em 0em 0em !important;
  281. }
  282. .ui.active.selection.dropdown > .dropdown.icon {
  283. opacity: 1;
  284. }
  285. /*--------------
  286. Fluid
  287. ---------------*/
  288. .ui.fluid.dropdown {
  289. display: block;
  290. }
  291. .ui.fluid.dropdown > .dropdown.icon {
  292. float: right;
  293. }
  294. /*--------------
  295. Inline
  296. ---------------*/
  297. .ui.inline.dropdown {
  298. cursor: pointer;
  299. display: inline-block;
  300. color: inherit;
  301. }
  302. .ui.inline.dropdown .dropdown.icon {
  303. margin: 0em 0.5em 0em 0.25em;
  304. }
  305. .ui.inline.dropdown .text {
  306. font-weight: bold;
  307. }
  308. .ui.inline.dropdown .menu {
  309. cursor: auto;
  310. margin-top: 0.25em;
  311. border-radius: 0.325em;
  312. }
  313. /*--------------
  314. Floating
  315. ---------------*/
  316. .ui.floating.dropdown .menu {
  317. left: 0;
  318. right: auto;
  319. margin-top: 0.5em !important;
  320. border-radius: 0.325em;
  321. }
  322. /*--------------
  323. Pointing
  324. ---------------*/
  325. .ui.pointing.dropdown .menu {
  326. top: 100%;
  327. margin-top: 0.75em;
  328. border-radius: 0.325em;
  329. }
  330. .ui.pointing.dropdown .menu:after {
  331. display: block;
  332. position: absolute;
  333. pointer-events: none;
  334. content: " ";
  335. visibility: visible;
  336. width: 0.5em;
  337. height: 0.5em;
  338. -webkit-box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
  339. box-shadow: -1px -1px 0px 1px rgba(0, 0, 0, 0.05);
  340. background-image: none;
  341. background-color: #FFFFFF;
  342. -webkit-transform: rotate(45deg);
  343. -ms-transform: rotate(45deg);
  344. transform: rotate(45deg);
  345. z-index: 2;
  346. }
  347. .ui.pointing.dropdown .menu .active.item:first-child {
  348. background: transparent -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.03));
  349. background: transparent-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.03)));
  350. background: transparent linear-gradient(transparent, rgba(0, 0, 0, 0.03));
  351. }
  352. /* Directions */
  353. .ui.pointing.dropdown .menu:after {
  354. top: -0.25em;
  355. left: 50%;
  356. margin: 0em 0em 0em -0.25em;
  357. }
  358. .ui.top.left.pointing.dropdown .menu {
  359. top: 100%;
  360. bottom: auto;
  361. left: 0%;
  362. right: auto;
  363. margin: 0.75em 0em 0em;
  364. }
  365. .ui.top.left.pointing.dropdown .menu:after {
  366. top: -0.25em;
  367. left: 1.25em;
  368. right: auto;
  369. margin: 0em;
  370. -webkit-transform: rotate(45deg);
  371. -ms-transform: rotate(45deg);
  372. transform: rotate(45deg);
  373. }
  374. .ui.top.right.pointing.dropdown .menu {
  375. top: 100%;
  376. bottom: auto;
  377. right: 0%;
  378. left: auto;
  379. margin: 0.75em 0em 0em;
  380. }
  381. .ui.top.right.pointing.dropdown .menu:after {
  382. top: -0.25em;
  383. left: auto;
  384. right: 1.25em;
  385. margin: 0em;
  386. -webkit-transform: rotate(45deg);
  387. -ms-transform: rotate(45deg);
  388. transform: rotate(45deg);
  389. }
  390. .ui.left.pointing.dropdown .menu {
  391. top: 0%;
  392. left: 100%;
  393. right: auto;
  394. margin: 0em 0em 0em 0.75em;
  395. }
  396. .ui.left.pointing.dropdown .menu:after {
  397. top: 1em;
  398. left: -0.25em;
  399. margin: 0em 0em 0em 0em;
  400. -webkit-transform: rotate(-45deg);
  401. -ms-transform: rotate(-45deg);
  402. transform: rotate(-45deg);
  403. }
  404. .ui.right.pointing.dropdown .menu {
  405. top: 0%;
  406. left: auto;
  407. right: 100%;
  408. margin: 0em 0.75em 0em 0em;
  409. }
  410. .ui.right.pointing.dropdown .menu:after {
  411. top: 1em;
  412. left: auto;
  413. right: -0.25em;
  414. margin: 0em 0em 0em 0em;
  415. -webkit-transform: rotate(135deg);
  416. -ms-transform: rotate(135deg);
  417. transform: rotate(135deg);
  418. }