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.

409 lines
8.0 KiB

  1. .ui.dropdown {
  2. position: relative;
  3. display: inline-block;
  4. line-height: 1;
  5. -webkit-transition: border-radius .1s ease,width .2s ease;
  6. transition: border-radius .1s ease,width .2s ease;
  7. -webkit-tap-highlight-color: rgba(0,0,0,0);
  8. -moz-tap-highlight-color: rgba(0,0,0,0);
  9. tap-highlight-color: rgba(0,0,0,0);
  10. }
  11. .ui.dropdown .menu {
  12. position: absolute;
  13. display: none;
  14. top: 100%;
  15. margin: 0;
  16. background-color: #FFF;
  17. min-width: 100%;
  18. white-space: nowrap;
  19. font-size: .875em;
  20. text-shadow: none;
  21. -webkit-box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  22. box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
  23. border-radius: 0 0 .325em .325em;
  24. -webkit-transition: opacity .2s ease;
  25. transition: opacity .2s ease;
  26. z-index: 11;
  27. }
  28. .ui.dropdown>.dropdown.icon {
  29. width: auto;
  30. margin: 0 0 0 1em;
  31. }
  32. .ui.dropdown>.dropdown.icon:before {
  33. content: "\f0d7";
  34. }
  35. .ui.dropdown .menu .item .dropdown.icon {
  36. width: auto;
  37. float: right;
  38. margin: 0 0 0 .5em;
  39. }
  40. .ui.dropdown .menu .item .dropdown.icon:before {
  41. content: "\f0da";
  42. }
  43. .ui.dropdown>.text {
  44. cursor: pointer;
  45. display: inline-block;
  46. -webkit-transition: color .2s ease;
  47. transition: color .2s ease;
  48. }
  49. .ui.dropdown .menu {
  50. left: 0;
  51. }
  52. .ui.dropdown .menu .menu {
  53. top: 0!important;
  54. left: 100%!important;
  55. margin: 0!important;
  56. border-radius: 0 .325em .325em 0!important;
  57. }
  58. .ui.dropdown .menu .menu:after {
  59. display: none;
  60. }
  61. .ui.dropdown .menu .item {
  62. cursor: pointer;
  63. border: 0;
  64. border-top: 1px solid rgba(0,0,0,.05);
  65. height: auto;
  66. font-size: .875em;
  67. display: block;
  68. color: rgba(0,0,0,.75);
  69. padding: .85em 1em!important;
  70. font-size: .875rem;
  71. text-transform: none;
  72. font-weight: 400;
  73. text-align: left;
  74. -webkit-touch-callout: none;
  75. }
  76. .ui.dropdown .menu .item:before {
  77. display: none;
  78. }
  79. .ui.dropdown .menu .item .icon {
  80. margin-right: .75em;
  81. }
  82. .ui.dropdown .menu .item:first-child {
  83. border-top: 0;
  84. }
  85. .ui.menu .right.menu .dropdown:last-child .menu,
  86. .ui.buttons>.ui.dropdown:last-child .menu {
  87. left: auto;
  88. right: 0;
  89. }
  90. .ui.vertical.menu .dropdown.item>.dropdown.icon:before {
  91. content: "\f0da";
  92. }
  93. .ui.dropdown.icon.button>.dropdown.icon {
  94. margin: 0;
  95. }
  96. .ui.visible.dropdown>.menu {
  97. display: block;
  98. }
  99. .ui.dropdown .menu .item:hover {
  100. background-color: rgba(0,0,0,.02);
  101. z-index: 12;
  102. }
  103. .ui.dropdown .menu .active.item {
  104. background-color: rgba(0,0,0,.06)!important;
  105. border-left: 0;
  106. border-color: transparent!important;
  107. -webkit-box-shadow: none;
  108. -moz-shadow: none;
  109. box-shadow: none;
  110. z-index: 12;
  111. }
  112. .ui.dropdown>.default.text,
  113. .ui.default.dropdown>.text {
  114. color: rgba(0,0,0,.5);
  115. }
  116. .ui.dropdown:hover>.default.text,
  117. .ui.default.dropdown:hover>.text {
  118. color: rgba(0,0,0,.8);
  119. }
  120. .ui.simple.dropdown .menu:before,
  121. .ui.simple.dropdown .menu:after {
  122. display: none;
  123. }
  124. .ui.simple.dropdown .menu {
  125. display: block;
  126. overflow: hidden;
  127. top: -9999px!important;
  128. position: absolute;
  129. opacity: 0;
  130. width: 0;
  131. height: 0;
  132. -webkit-transition: opacity .2s ease-out;
  133. transition: opacity .2s ease-out;
  134. }
  135. .ui.simple.active.dropdown,
  136. .ui.simple.dropdown:hover {
  137. border-bottom-left-radius: 0!important;
  138. border-bottom-right-radius: 0!important;
  139. }
  140. .ui.simple.active.dropdown>.menu,
  141. .ui.simple.dropdown:hover>.menu {
  142. overflow: visible;
  143. width: auto;
  144. height: auto;
  145. top: 100%!important;
  146. opacity: 1;
  147. }
  148. .ui.simple.dropdown>.menu .item:active>.menu,
  149. .ui.simple.dropdown:hover>.menu .item:hover>.menu {
  150. overflow: visible;
  151. width: auto;
  152. height: auto;
  153. top: 0!important;
  154. left: 100%!important;
  155. opacity: 1;
  156. }
  157. .ui.simple.disabled.dropdown:hover .menu {
  158. display: none;
  159. height: 0;
  160. width: 0;
  161. overflow: hidden;
  162. }
  163. .ui.selection.dropdown {
  164. cursor: pointer;
  165. display: inline-block;
  166. word-wrap: break-word;
  167. white-space: normal;
  168. background-color: #FFF;
  169. padding: .5em 1em;
  170. line-height: 1.33;
  171. color: rgba(0,0,0,.8);
  172. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.1)!important;
  173. box-shadow: 0 0 0 1px rgba(0,0,0,.1)!important;
  174. border-radius: .3125em!important;
  175. }
  176. .ui.selection.dropdown select {
  177. display: none;
  178. }
  179. .ui.selection.dropdown>.dropdown.icon {
  180. opacity: .7;
  181. margin: .2em 0 .2em 1.25em;
  182. -webkit-transition: opacity .2s ease-out;
  183. transition: opacity .2s ease-out;
  184. }
  185. .ui.selection.dropdown,
  186. .ui.selection.dropdown .menu {
  187. top: 100%;
  188. -webkit-transition: -webkit-box-shadow .2s ease-out;
  189. transition: box-shadow .2s ease-out;
  190. }
  191. .ui.selection.dropdown .menu {
  192. max-height: 312px;
  193. overflow-x: hidden;
  194. overflow-y: auto;
  195. -webkit-box-shadow: 0 1px 0 1px #E0E0E0;
  196. box-shadow: 0 1px 0 1px #E0E0E0;
  197. border-radius: 0 0 .325em .325em;
  198. }
  199. .ui.selection.dropdown .menu:after,
  200. .ui.selection.dropdown .menu:before {
  201. display: none;
  202. }
  203. .ui.selection.dropdown .menu img {
  204. height: 2.5em;
  205. display: inline-block;
  206. vertical-align: middle;
  207. margin-right: .5em;
  208. }
  209. .ui.selection.dropdown:hover {
  210. -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.2)!important;
  211. box-shadow: 0 0 0 1px rgba(0,0,0,.2)!important;
  212. }
  213. .ui.selection.dropdown:hover .menu {
  214. -webkit-box-shadow: 0 1px 0 1px #D3D3D3;
  215. box-shadow: 0 1px 0 1px #D3D3D3;
  216. }
  217. .ui.selection.dropdown:hover>.dropdown.icon {
  218. opacity: 1;
  219. }
  220. .ui.visible.selection.dropdown {
  221. border-bottom-left-radius: 0!important;
  222. border-bottom-right-radius: 0!important;
  223. }
  224. .ui.active.selection.dropdown {
  225. border-radius: .3125em .3125em 0 0!important;
  226. }
  227. .ui.active.selection.dropdown>.dropdown.icon {
  228. opacity: 1;
  229. }
  230. .ui.fluid.dropdown {
  231. display: block;
  232. }
  233. .ui.fluid.dropdown>.dropdown.icon {
  234. float: right;
  235. }
  236. .ui.inline.dropdown {
  237. cursor: pointer;
  238. display: inline-block;
  239. color: inherit;
  240. }
  241. .ui.inline.dropdown .dropdown.icon {
  242. margin: 0 .5em 0 .25em;
  243. }
  244. .ui.inline.dropdown .text {
  245. font-weight: 700;
  246. }
  247. .ui.inline.dropdown .menu {
  248. cursor: auto;
  249. margin-top: .25em;
  250. border-radius: .325em;
  251. }
  252. .ui.floating.dropdown .menu {
  253. left: 0;
  254. right: auto;
  255. margin-top: .5em;
  256. border-radius: .325em;
  257. }
  258. .ui.pointing.dropdown .menu {
  259. top: 100%;
  260. margin-top: .75em;
  261. border-radius: .325em;
  262. }
  263. .ui.pointing.dropdown .menu:after {
  264. display: block;
  265. position: absolute;
  266. pointer-events: none;
  267. content: " ";
  268. visibility: visible;
  269. width: .5em;
  270. height: .5em;
  271. -webkit-box-shadow: -1px -1px 0 1px rgba(0,0,0,.05);
  272. box-shadow: -1px -1px 0 1px rgba(0,0,0,.05);
  273. background-image: none;
  274. background-color: #FFF;
  275. -webkit-transform: rotate(45deg);
  276. -ms-transform: rotate(45deg);
  277. transform: rotate(45deg);
  278. z-index: 2;
  279. }
  280. .ui.pointing.dropdown .menu .active.item:first-child {
  281. background: transparent -webkit-linear-gradient(transparent,rgba(0,0,0,.03));
  282. background: transparent-webkit-gradient(linear, top left, bottom left, from(transparent), to(rgba(0,0,0,.03)));
  283. background: transparent -webkit-linear-gradient(transparent, rgba(0,0,0,.03));
  284. background: transparent linear-gradient(transparent,rgba(0,0,0,.03));
  285. }
  286. .ui.pointing.dropdown .menu:after {
  287. top: -.25em;
  288. left: 50%;
  289. margin: 0 0 0 -.25em;
  290. }
  291. .ui.top.left.pointing.dropdown .menu {
  292. top: 100%;
  293. bottom: auto;
  294. left: 0;
  295. right: auto;
  296. margin: .75em 0 0;
  297. }
  298. .ui.top.left.pointing.dropdown .menu:after {
  299. top: -.25em;
  300. left: 1.25em;
  301. right: auto;
  302. margin: 0;
  303. -webkit-transform: rotate(45deg);
  304. -ms-transform: rotate(45deg);
  305. transform: rotate(45deg);
  306. }
  307. .ui.top.right.pointing.dropdown .menu {
  308. top: 100%;
  309. bottom: auto;
  310. right: 0;
  311. left: auto;
  312. margin: .75em 0 0;
  313. }
  314. .ui.top.right.pointing.dropdown .menu:after {
  315. top: -.25em;
  316. left: auto;
  317. right: 1.25em;
  318. margin: 0;
  319. -webkit-transform: rotate(45deg);
  320. -ms-transform: rotate(45deg);
  321. transform: rotate(45deg);
  322. }
  323. .ui.left.pointing.dropdown .menu {
  324. top: 0;
  325. left: 100%;
  326. right: auto;
  327. margin: 0 0 0 .75em;
  328. }
  329. .ui.left.pointing.dropdown .menu:after {
  330. top: 1em;
  331. left: -.25em;
  332. margin: 0;
  333. -webkit-transform: rotate(-45deg);
  334. -ms-transform: rotate(-45deg);
  335. transform: rotate(-45deg);
  336. }
  337. .ui.right.pointing.dropdown .menu {
  338. top: 0;
  339. left: auto;
  340. right: 100%;
  341. margin: 0 .75em 0 0;
  342. }
  343. .ui.right.pointing.dropdown .menu:after {
  344. top: 1em;
  345. left: auto;
  346. right: -.25em;
  347. margin: 0;
  348. -webkit-transform: rotate(135deg);
  349. -ms-transform: rotate(135deg);
  350. transform: rotate(135deg);
  351. }