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.

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