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.

417 lines
10 KiB

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