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.

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