gitea源码

dropdown.css 40KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756
  1. /*!
  2. * # Fomantic-UI - Dropdown
  3. * http://github.com/fomantic/Fomantic-UI/
  4. *
  5. *
  6. * Released under the MIT license
  7. * http://opensource.org/licenses/MIT
  8. *
  9. */
  10. /*******************************
  11. Dropdown
  12. *******************************/
  13. .ui.dropdown {
  14. cursor: pointer;
  15. position: relative;
  16. display: inline-block;
  17. outline: none;
  18. text-align: left;
  19. transition: box-shadow 0.1s ease, width 0.1s ease;
  20. -webkit-user-select: none;
  21. -moz-user-select: none;
  22. user-select: none;
  23. -webkit-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. outline: none;
  36. top: 100%;
  37. min-width: -moz-max-content;
  38. min-width: max-content;
  39. margin: 0;
  40. padding: 0 0;
  41. background: #FFFFFF;
  42. font-size: 1em;
  43. text-shadow: none;
  44. text-align: left;
  45. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  46. border: 1px solid rgba(34, 36, 38, 0.15);
  47. border-radius: 0.28571429rem;
  48. transition: opacity 0.1s ease;
  49. z-index: 11;
  50. will-change: transform, opacity;
  51. }
  52. .ui.dropdown .menu > * {
  53. white-space: nowrap;
  54. }
  55. /*--------------
  56. Hidden Input
  57. ---------------*/
  58. .ui.dropdown > input:not(.search):first-child,
  59. .ui.dropdown > select {
  60. display: none !important;
  61. }
  62. /*--------------
  63. Dropdown Icon
  64. ---------------*/
  65. .ui.dropdown:not(.labeled) > .dropdown.icon {
  66. position: relative;
  67. width: auto;
  68. font-size: 0.85714286em;
  69. margin: 0 0 0 1em;
  70. }
  71. .ui.dropdown .menu > .item .dropdown.icon {
  72. width: auto;
  73. float: right;
  74. margin: 0em 0 0 1em;
  75. }
  76. .ui.dropdown .menu > .item .dropdown.icon + .text {
  77. margin-right: 1em;
  78. }
  79. /*--------------
  80. Text
  81. ---------------*/
  82. .ui.dropdown > .text {
  83. display: inline-block;
  84. transition: none;
  85. }
  86. /*--------------
  87. Menu Item
  88. ---------------*/
  89. .ui.dropdown .menu > .item {
  90. position: relative;
  91. cursor: pointer;
  92. display: block;
  93. border: none;
  94. height: auto;
  95. min-height: 2.57142857rem;
  96. text-align: left;
  97. border-top: none;
  98. line-height: 1em;
  99. font-size: 1rem;
  100. color: rgba(0, 0, 0, 0.87);
  101. padding: 0.78571429rem 1.14285714rem !important;
  102. text-transform: none;
  103. font-weight: normal;
  104. box-shadow: none;
  105. -webkit-touch-callout: none;
  106. }
  107. .ui.dropdown .menu > .item:first-child {
  108. border-top-width: 0;
  109. }
  110. .ui.dropdown .menu > .item.vertical {
  111. display: flex;
  112. flex-direction: column-reverse;
  113. }
  114. /*--------------
  115. Floated Content
  116. ---------------*/
  117. .ui.dropdown > .text > [class*="right floated"],
  118. .ui.dropdown .menu .item > [class*="right floated"] {
  119. float: right !important;
  120. margin-right: 0 !important;
  121. margin-left: 1em !important;
  122. }
  123. .ui.dropdown > .text > [class*="left floated"],
  124. .ui.dropdown .menu .item > [class*="left floated"] {
  125. float: left !important;
  126. margin-left: 0 !important;
  127. margin-right: 1em !important;
  128. }
  129. .ui.dropdown .menu .item > i.icon.floated,
  130. .ui.dropdown .menu .item > .flag.floated,
  131. .ui.dropdown .menu .item > .image.floated,
  132. .ui.dropdown .menu .item > img.floated {
  133. margin-top: 0em;
  134. }
  135. /*--------------
  136. Menu Divider
  137. ---------------*/
  138. .ui.dropdown .menu > .header {
  139. margin: 1rem 0 0.75rem;
  140. padding: 0 1.14285714rem;
  141. font-weight: 500;
  142. text-transform: uppercase;
  143. }
  144. .ui.dropdown .menu > .header:not(.ui) {
  145. color: rgba(0, 0, 0, 0.85);
  146. font-size: 0.78571429em;
  147. }
  148. .ui.dropdown .menu > .divider {
  149. border-top: 1px solid rgba(34, 36, 38, 0.1);
  150. height: 0;
  151. margin: 0.5em 0;
  152. }
  153. .ui.dropdown .menu > .horizontal.divider {
  154. border-top: none;
  155. }
  156. .ui.dropdown.dropdown .menu > .input {
  157. width: auto;
  158. display: flex;
  159. margin: 1.14285714rem 0.78571429rem;
  160. min-width: 10rem;
  161. }
  162. .ui.dropdown .menu > .header + .input {
  163. margin-top: 0;
  164. }
  165. .ui.dropdown .menu > .input:not(.transparent) input {
  166. padding: 0.5em 1em;
  167. }
  168. .ui.dropdown .menu > .input:not(.transparent) .button,
  169. .ui.dropdown .menu > .input:not(.transparent) i.icon,
  170. .ui.dropdown .menu > .input:not(.transparent) .label {
  171. padding-top: 0.5em;
  172. padding-bottom: 0.5em;
  173. }
  174. /*-----------------
  175. Item Description
  176. -------------------*/
  177. .ui.dropdown > .text > .description,
  178. .ui.dropdown .menu > .item > .description {
  179. float: right;
  180. margin: 0 0 0 1em;
  181. color: rgba(0, 0, 0, 0.4);
  182. }
  183. .ui.dropdown .menu > .item.vertical > .description {
  184. margin: 0;
  185. }
  186. /*-----------------
  187. Item Text
  188. -------------------*/
  189. .ui.dropdown .menu > .item.vertical > .text {
  190. margin-bottom: 0.25em;
  191. }
  192. /*-----------------
  193. Message
  194. -------------------*/
  195. .ui.dropdown .menu > .message {
  196. padding: 0.78571429rem 1.14285714rem;
  197. font-weight: normal;
  198. }
  199. .ui.dropdown .menu > .message:not(.ui) {
  200. color: rgba(0, 0, 0, 0.4);
  201. }
  202. /*--------------
  203. Sub Menu
  204. ---------------*/
  205. .ui.dropdown .menu .menu {
  206. top: 0;
  207. left: 100%;
  208. right: auto;
  209. margin: 0 -0.5em !important;
  210. border-radius: 0.28571429rem !important;
  211. z-index: 21 !important;
  212. }
  213. /* Hide Arrow */
  214. .ui.dropdown .menu .menu:after {
  215. display: none;
  216. }
  217. /*--------------
  218. Sub Elements
  219. ---------------*/
  220. /* Icons / Flags / Labels / Image */
  221. .ui.dropdown > .text > i.icon,
  222. .ui.dropdown > .text > .label,
  223. .ui.dropdown > .text > .flag,
  224. .ui.dropdown > .text > img,
  225. .ui.dropdown > .text > .image {
  226. margin-top: 0em;
  227. }
  228. .ui.dropdown .menu > .item > i.icon,
  229. .ui.dropdown .menu > .item > .label,
  230. .ui.dropdown .menu > .item > .flag,
  231. .ui.dropdown .menu > .item > .image,
  232. .ui.dropdown .menu > .item > img {
  233. margin-top: 0em;
  234. }
  235. .ui.dropdown > .text > i.icon,
  236. .ui.dropdown > .text > .label,
  237. .ui.dropdown > .text > .flag,
  238. .ui.dropdown > .text > img,
  239. .ui.dropdown > .text > .image,
  240. .ui.dropdown .menu > .item > i.icon,
  241. .ui.dropdown .menu > .item > .label,
  242. .ui.dropdown .menu > .item > .flag,
  243. .ui.dropdown .menu > .item > .image,
  244. .ui.dropdown .menu > .item > img {
  245. margin-left: 0;
  246. float: none;
  247. margin-right: 0.78571429rem;
  248. }
  249. /*--------------
  250. Image
  251. ---------------*/
  252. .ui.dropdown > .text > img,
  253. .ui.dropdown > .text > .image:not(.icon),
  254. .ui.dropdown .menu > .item > .image:not(.icon),
  255. .ui.dropdown .menu > .item > img {
  256. display: inline-block;
  257. vertical-align: top;
  258. width: auto;
  259. margin-top: -0.5em;
  260. margin-bottom: -0.5em;
  261. max-height: 2em;
  262. }
  263. /*******************************
  264. Coupling
  265. *******************************/
  266. /*--------------
  267. Menu
  268. ---------------*/
  269. /* Remove Menu Item Divider */
  270. .ui.dropdown .ui.menu > .item:before,
  271. .ui.menu .ui.dropdown .menu > .item:before {
  272. display: none;
  273. }
  274. /* Prevent Menu Item Border */
  275. .ui.menu .ui.dropdown .menu .active.item {
  276. border-left: none;
  277. }
  278. /* Automatically float dropdown menu right on last menu item */
  279. .ui.menu .right.menu .dropdown:last-child > .menu:not(.left),
  280. .ui.menu .right.dropdown.item > .menu:not(.left),
  281. .ui.buttons > .ui.dropdown:last-child > .menu:not(.left) {
  282. left: auto;
  283. right: 0;
  284. }
  285. /*--------------
  286. Label
  287. ---------------*/
  288. /* Dropdown Menu */
  289. .ui.label.dropdown .menu {
  290. min-width: 100%;
  291. }
  292. /*--------------
  293. Button
  294. ---------------*/
  295. /* No Margin On Icon Button */
  296. .ui.dropdown.icon.button > .dropdown.icon {
  297. margin: 0;
  298. }
  299. .ui.button.dropdown .menu {
  300. min-width: 100%;
  301. }
  302. /*******************************
  303. Types
  304. *******************************/
  305. select.ui.dropdown {
  306. height: 38px;
  307. padding: 0.5em;
  308. border: 1px solid rgba(34, 36, 38, 0.15);
  309. visibility: visible;
  310. }
  311. /*--------------
  312. Selection
  313. ---------------*/
  314. /* Displays like a select box */
  315. .ui.selection.dropdown {
  316. cursor: pointer;
  317. word-wrap: break-word;
  318. line-height: 1em;
  319. white-space: normal;
  320. outline: 0;
  321. transform: rotateZ(0deg);
  322. min-width: 14em;
  323. min-height: 2.71428571em;
  324. background: #FFFFFF;
  325. display: inline-block;
  326. padding: 0.78571429em 3.2em 0.78571429em 1em;
  327. color: rgba(0, 0, 0, 0.87);
  328. box-shadow: none;
  329. border: 1px solid rgba(34, 36, 38, 0.15);
  330. border-radius: 0.28571429rem;
  331. transition: box-shadow 0.1s ease, width 0.1s ease;
  332. }
  333. .ui.selection.dropdown.visible,
  334. .ui.selection.dropdown.active {
  335. z-index: 10;
  336. }
  337. .ui.selection.dropdown > .search.icon,
  338. .ui.selection.dropdown > .delete.icon,
  339. .ui.selection.dropdown > .dropdown.icon {
  340. cursor: pointer;
  341. position: absolute;
  342. width: auto;
  343. height: auto;
  344. line-height: 1.21428571em;
  345. top: 0.78571429em;
  346. right: 1em;
  347. z-index: 3;
  348. margin: -0.78571429em;
  349. padding: 0.91666667em;
  350. opacity: 0.8;
  351. transition: opacity 0.1s ease;
  352. }
  353. /* Compact */
  354. .ui.compact.selection.dropdown {
  355. min-width: 0;
  356. }
  357. /* Selection Menu */
  358. .ui.selection.dropdown .menu {
  359. overflow-x: hidden;
  360. overflow-y: auto;
  361. backface-visibility: hidden;
  362. -webkit-overflow-scrolling: touch;
  363. border-top-width: 0 !important;
  364. width: auto;
  365. outline: none;
  366. margin: 0 -1px;
  367. min-width: calc(100% + 2px);
  368. width: calc(100% + 2px);
  369. border-radius: 0 0 0.28571429rem 0.28571429rem;
  370. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  371. transition: opacity 0.1s ease;
  372. }
  373. .ui.selection.dropdown .menu:after,
  374. .ui.selection.dropdown .menu:before {
  375. display: none;
  376. }
  377. /*--------------
  378. Message
  379. ---------------*/
  380. .ui.selection.dropdown .menu > .message {
  381. padding: 0.78571429rem 1.14285714rem;
  382. }
  383. @media only screen and (max-width: 767.98px) {
  384. .ui.selection.dropdown.short .menu {
  385. max-height: 6.01071429rem;
  386. }
  387. .ui.selection.dropdown[class*="very short"] .menu {
  388. max-height: 4.00714286rem;
  389. }
  390. .ui.selection.dropdown .menu {
  391. max-height: 8.01428571rem;
  392. }
  393. .ui.selection.dropdown.long .menu {
  394. max-height: 16.02857143rem;
  395. }
  396. .ui.selection.dropdown[class*="very long"] .menu {
  397. max-height: 24.04285714rem;
  398. }
  399. }
  400. @media only screen and (min-width: 768px) {
  401. .ui.selection.dropdown.short .menu {
  402. max-height: 8.01428571rem;
  403. }
  404. .ui.selection.dropdown[class*="very short"] .menu {
  405. max-height: 5.34285714rem;
  406. }
  407. .ui.selection.dropdown .menu {
  408. max-height: 10.68571429rem;
  409. }
  410. .ui.selection.dropdown.long .menu {
  411. max-height: 21.37142857rem;
  412. }
  413. .ui.selection.dropdown[class*="very long"] .menu {
  414. max-height: 32.05714286rem;
  415. }
  416. }
  417. @media only screen and (min-width: 992px) {
  418. .ui.selection.dropdown.short .menu {
  419. max-height: 12.02142857rem;
  420. }
  421. .ui.selection.dropdown[class*="very short"] .menu {
  422. max-height: 8.01428571rem;
  423. }
  424. .ui.selection.dropdown .menu {
  425. max-height: 16.02857143rem;
  426. }
  427. .ui.selection.dropdown.long .menu {
  428. max-height: 32.05714286rem;
  429. }
  430. .ui.selection.dropdown[class*="very long"] .menu {
  431. max-height: 48.08571429rem;
  432. }
  433. }
  434. @media only screen and (min-width: 1920px) {
  435. .ui.selection.dropdown.short .menu {
  436. max-height: 16.02857143rem;
  437. }
  438. .ui.selection.dropdown[class*="very short"] .menu {
  439. max-height: 10.68571429rem;
  440. }
  441. .ui.selection.dropdown .menu {
  442. max-height: 21.37142857rem;
  443. }
  444. .ui.selection.dropdown.long .menu {
  445. max-height: 42.74285714rem;
  446. }
  447. .ui.selection.dropdown[class*="very long"] .menu {
  448. max-height: 64.11428571rem;
  449. }
  450. }
  451. /* Menu Item */
  452. .ui.selection.dropdown .menu > .item {
  453. border-top: 1px solid #FAFAFA;
  454. padding: 0.78571429rem 1.14285714rem !important;
  455. white-space: normal;
  456. word-wrap: normal;
  457. }
  458. /* User Item */
  459. .ui.selection.dropdown .menu > .hidden.addition.item {
  460. display: none;
  461. }
  462. /* Hover */
  463. .ui.selection.dropdown:hover {
  464. border-color: rgba(34, 36, 38, 0.35);
  465. box-shadow: none;
  466. }
  467. /* Active */
  468. .ui.selection.active.dropdown {
  469. border-color: #96C8DA;
  470. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  471. }
  472. .ui.selection.active.dropdown .menu {
  473. border-color: #96C8DA;
  474. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  475. }
  476. /* Focus */
  477. .ui.selection.dropdown:focus {
  478. border-color: #96C8DA;
  479. box-shadow: none;
  480. }
  481. .ui.selection.dropdown:focus .menu {
  482. border-color: #96C8DA;
  483. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  484. }
  485. /* Visible */
  486. .ui.selection.visible.dropdown > .text:not(.default) {
  487. font-weight: normal;
  488. color: rgba(0, 0, 0, 0.8);
  489. }
  490. /* Visible Hover */
  491. .ui.selection.active.dropdown:hover {
  492. border-color: #96C8DA;
  493. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  494. }
  495. .ui.selection.active.dropdown:hover .menu {
  496. border-color: #96C8DA;
  497. box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15);
  498. }
  499. /* Dropdown Icon */
  500. .ui.active.selection.dropdown > .dropdown.icon,
  501. .ui.visible.selection.dropdown > .dropdown.icon {
  502. opacity: '';
  503. z-index: 3;
  504. }
  505. /* Connecting Border */
  506. .ui.active.selection.dropdown {
  507. border-bottom-left-radius: 0 !important;
  508. border-bottom-right-radius: 0 !important;
  509. }
  510. /* Empty Connecting Border */
  511. .ui.active.empty.selection.dropdown {
  512. border-radius: 0.28571429rem !important;
  513. box-shadow: none !important;
  514. }
  515. .ui.active.empty.selection.dropdown .menu {
  516. border: none !important;
  517. box-shadow: none !important;
  518. }
  519. /* CSS specific to iOS devices or firefox mobile only */
  520. @supports (-webkit-touch-callout: none) or (-webkit-overflow-scrolling: touch) or (-moz-appearance:none) {
  521. @media (-moz-touch-enabled), (pointer: coarse) {
  522. .ui.dropdown .scrollhint.menu:not(.hidden):before {
  523. animation: scrollhint 2s ease 2;
  524. content: '';
  525. z-index: 15;
  526. display: block;
  527. position: absolute;
  528. opacity: 0;
  529. right: 0.25em;
  530. top: 0;
  531. height: 100%;
  532. border-right: 0.25em solid;
  533. border-left: 0;
  534. -o-border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
  535. border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0)) 1 100%;
  536. }
  537. .ui.inverted.dropdown .scrollhint.menu:not(.hidden):before {
  538. -o-border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
  539. border-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0)) 1 100%;
  540. }
  541. @keyframes scrollhint {
  542. 0% {
  543. opacity: 1;
  544. top: 100%;
  545. }
  546. 100% {
  547. opacity: 0;
  548. top: 0;
  549. }
  550. }
  551. }
  552. }
  553. /*--------------
  554. Searchable
  555. ---------------*/
  556. /* Search Selection */
  557. .ui.search.dropdown {
  558. min-width: '';
  559. }
  560. /* Search Dropdown */
  561. .ui.search.dropdown > input.search {
  562. background: none transparent !important;
  563. border: none !important;
  564. box-shadow: none !important;
  565. cursor: text;
  566. top: 0;
  567. left: 1px;
  568. width: 100%;
  569. outline: none;
  570. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  571. padding: inherit;
  572. }
  573. /* Text Layering */
  574. .ui.search.dropdown > input.search {
  575. position: absolute;
  576. z-index: 2;
  577. }
  578. .ui.search.dropdown > .text {
  579. cursor: text;
  580. position: relative;
  581. left: 1px;
  582. z-index: auto;
  583. }
  584. /* Search Selection */
  585. .ui.search.selection.dropdown > input.search {
  586. line-height: 1.21428571em;
  587. padding: 0.67857143em 3.2em 0.67857143em 1em;
  588. }
  589. /* Used to size multi select input to character width */
  590. .ui.search.selection.dropdown > span.sizer {
  591. line-height: 1.21428571em;
  592. padding: 0.67857143em 3.2em 0.67857143em 1em;
  593. display: none;
  594. white-space: pre;
  595. }
  596. /* Active/Visible Search */
  597. .ui.search.dropdown.active > input.search,
  598. .ui.search.dropdown.visible > input.search {
  599. cursor: auto;
  600. }
  601. .ui.search.dropdown.active > .text,
  602. .ui.search.dropdown.visible > .text {
  603. pointer-events: none;
  604. }
  605. /* Filtered Text */
  606. .ui.active.search.dropdown input.search:focus + .text i.icon,
  607. .ui.active.search.dropdown input.search:focus + .text .flag {
  608. opacity: var(--opacity-disabled);
  609. }
  610. .ui.active.search.dropdown input.search:focus + .text {
  611. color: rgba(115, 115, 115, 0.87) !important;
  612. }
  613. .ui.search.dropdown.button > span.sizer {
  614. display: none;
  615. }
  616. /* Search Menu */
  617. .ui.search.dropdown .menu {
  618. overflow-x: hidden;
  619. overflow-y: auto;
  620. backface-visibility: hidden;
  621. -webkit-overflow-scrolling: touch;
  622. }
  623. @media only screen and (max-width: 767.98px) {
  624. .ui.search.dropdown .menu {
  625. max-height: 8.01428571rem;
  626. }
  627. }
  628. @media only screen and (min-width: 768px) {
  629. .ui.search.dropdown .menu {
  630. max-height: 10.68571429rem;
  631. }
  632. }
  633. @media only screen and (min-width: 992px) {
  634. .ui.search.dropdown .menu {
  635. max-height: 16.02857143rem;
  636. }
  637. }
  638. @media only screen and (min-width: 1920px) {
  639. .ui.search.dropdown .menu {
  640. max-height: 21.37142857rem;
  641. }
  642. }
  643. /* Clearable Selection */
  644. .ui.dropdown > .remove.icon {
  645. cursor: pointer;
  646. font-size: 0.85714286em;
  647. margin: -0.78571429em;
  648. padding: 0.91666667em;
  649. right: 3em;
  650. top: 0.78571429em;
  651. position: absolute;
  652. opacity: 0.6;
  653. z-index: 3;
  654. }
  655. .ui.clearable.dropdown .text,
  656. .ui.clearable.dropdown a:last-of-type {
  657. margin-right: 1.5em;
  658. }
  659. .ui.dropdown select.noselection ~ .remove.icon,
  660. .ui.dropdown input[value=''] ~ .remove.icon,
  661. .ui.dropdown input:not([value]) ~ .remove.icon,
  662. .ui.dropdown.loading > .remove.icon {
  663. display: none;
  664. }
  665. /*--------------
  666. Multiple
  667. ---------------*/
  668. /* Multiple Selection */
  669. .ui.ui.multiple.dropdown {
  670. padding: 0.22619048em 3.2em 0.22619048em 0.35714286em;
  671. }
  672. .ui.multiple.dropdown .menu {
  673. cursor: auto;
  674. }
  675. /* Selection Label */
  676. .ui.multiple.dropdown > .label {
  677. display: inline-block;
  678. white-space: normal;
  679. font-size: 1em;
  680. padding: 0.35714286em 0.78571429em;
  681. margin: 0.14285714rem 0.28571429rem 0.14285714rem 0;
  682. box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset;
  683. }
  684. /* Dropdown Icon */
  685. .ui.multiple.dropdown .dropdown.icon {
  686. margin: '';
  687. padding: '';
  688. }
  689. /* Text */
  690. .ui.multiple.dropdown > .text {
  691. position: static;
  692. padding: 0;
  693. max-width: 100%;
  694. margin: 0.45238095em 0 0.45238095em 0.64285714em;
  695. line-height: 1.21428571em;
  696. }
  697. .ui.multiple.dropdown > .text.default {
  698. white-space: nowrap;
  699. overflow: hidden;
  700. text-overflow: ellipsis;
  701. }
  702. .ui.multiple.dropdown > .label ~ input.search {
  703. margin-left: 0.14285714em !important;
  704. }
  705. .ui.multiple.dropdown > .label ~ .text {
  706. display: none;
  707. }
  708. .ui.multiple.dropdown > .label:not(.image) > img:not(.centered) {
  709. margin-right: 0.78571429rem;
  710. }
  711. .ui.multiple.dropdown > .label:not(.image) > img.ui:not(.avatar) {
  712. margin-bottom: 0.39285714rem;
  713. }
  714. .ui.multiple.dropdown > .image.label img {
  715. margin: -0.35714286em 0.78571429em -0.35714286em -0.78571429em;
  716. height: 1.71428571em;
  717. }
  718. /*-----------------
  719. Multiple Search
  720. -----------------*/
  721. /* Multiple Search Selection */
  722. .ui.multiple.search.dropdown,
  723. .ui.multiple.search.dropdown > input.search {
  724. cursor: text;
  725. }
  726. /* Prompt Text */
  727. .ui.multiple.search.dropdown > .text {
  728. display: inline-block;
  729. position: absolute;
  730. top: 0;
  731. left: 0;
  732. padding: inherit;
  733. margin: 0.45238095em 0 0.45238095em 0.64285714em;
  734. line-height: 1.21428571em;
  735. }
  736. .ui.multiple.search.dropdown > .label ~ .text {
  737. display: none;
  738. }
  739. /* Search */
  740. .ui.multiple.search.dropdown > input.search {
  741. position: static;
  742. padding: 0;
  743. max-width: 100%;
  744. margin: 0.45238095em 0 0.45238095em 0.64285714em;
  745. width: 2.2em;
  746. line-height: 1.21428571em;
  747. }
  748. .ui.multiple.search.dropdown.button {
  749. min-width: 14em;
  750. }
  751. /*--------------
  752. Inline
  753. ---------------*/
  754. .ui.inline.dropdown {
  755. cursor: pointer;
  756. display: inline-block;
  757. color: inherit;
  758. }
  759. .ui.inline.dropdown .dropdown.icon {
  760. margin: 0 0.21428571em 0 0.21428571em;
  761. vertical-align: baseline;
  762. }
  763. .ui.inline.dropdown > .text {
  764. font-weight: 500;
  765. }
  766. .ui.inline.dropdown .menu {
  767. cursor: auto;
  768. margin-top: 0.21428571em;
  769. border-radius: 0.28571429rem;
  770. }
  771. /*******************************
  772. States
  773. *******************************/
  774. /*--------------------
  775. Active
  776. ----------------------*/
  777. /* Menu Item Active */
  778. .ui.dropdown .menu .active.item {
  779. background: transparent;
  780. font-weight: 500;
  781. color: rgba(0, 0, 0, 0.95);
  782. box-shadow: none;
  783. z-index: 12;
  784. }
  785. /*--------------------
  786. Hover
  787. ----------------------*/
  788. /* Menu Item Hover */
  789. .ui.dropdown .menu > .item:hover {
  790. background: rgba(0, 0, 0, 0.05);
  791. color: rgba(0, 0, 0, 0.95);
  792. z-index: 13;
  793. }
  794. /*--------------------
  795. Default Text
  796. ----------------------*/
  797. .ui.dropdown:not(.button) > .default.text,
  798. .ui.default.dropdown:not(.button) > .text {
  799. color: rgba(191, 191, 191, 0.87);
  800. }
  801. .ui.dropdown:not(.button) > input:focus ~ .default.text,
  802. .ui.default.dropdown:not(.button) > input:focus ~ .text {
  803. color: rgba(115, 115, 115, 0.87);
  804. }
  805. /*--------------------
  806. Loading
  807. ---------------------*/
  808. .ui.loading.dropdown > i.icon {
  809. height: 1em !important;
  810. }
  811. .ui.loading.selection.dropdown > i.icon {
  812. padding: 1.5em 1.28571429em !important;
  813. }
  814. .ui.loading.dropdown > i.icon:before {
  815. position: absolute;
  816. content: '';
  817. top: 50%;
  818. left: 50%;
  819. margin: -0.64285714em 0 0 -0.64285714em;
  820. width: 1.28571429em;
  821. height: 1.28571429em;
  822. border-radius: 500rem;
  823. border: 0.2em solid rgba(0, 0, 0, 0.1);
  824. }
  825. .ui.loading.dropdown > i.icon:after {
  826. position: absolute;
  827. content: '';
  828. top: 50%;
  829. left: 50%;
  830. box-shadow: 0 0 0 1px transparent;
  831. margin: -0.64285714em 0 0 -0.64285714em;
  832. width: 1.28571429em;
  833. height: 1.28571429em;
  834. animation: loader 0.6s infinite linear;
  835. border: 0.2em solid #767676;
  836. border-radius: 500rem;
  837. }
  838. /* Coupling */
  839. .ui.loading.dropdown.button > i.icon:before,
  840. .ui.loading.dropdown.button > i.icon:after {
  841. display: none;
  842. }
  843. .ui.loading.dropdown > .text {
  844. transition: none;
  845. }
  846. /* Used To Check Position */
  847. .ui.dropdown .loading.menu {
  848. display: block;
  849. visibility: hidden;
  850. z-index: -1;
  851. }
  852. .ui.dropdown > .loading.menu {
  853. left: 0 !important;
  854. right: auto !important;
  855. }
  856. .ui.dropdown > .menu .loading.menu {
  857. left: 100% !important;
  858. right: auto !important;
  859. }
  860. /*--------------------
  861. Keyboard Select
  862. ----------------------*/
  863. /* Selected Item */
  864. .ui.dropdown.selected,
  865. .ui.dropdown .menu .selected.item {
  866. background: rgba(0, 0, 0, 0.03);
  867. color: rgba(0, 0, 0, 0.95);
  868. }
  869. /*--------------------
  870. Search Filtered
  871. ----------------------*/
  872. /* Filtered Item */
  873. .ui.dropdown > .filtered.text {
  874. visibility: hidden;
  875. }
  876. .ui.dropdown .filtered.item {
  877. display: none !important;
  878. }
  879. /*--------------------
  880. States
  881. ----------------------*/
  882. .ui.dropdown.error,
  883. .ui.dropdown.error > .text,
  884. .ui.dropdown.error > .default.text {
  885. color: #9F3A38;
  886. }
  887. .ui.selection.dropdown.error {
  888. background: #FFF6F6;
  889. border-color: #E0B4B4;
  890. }
  891. .ui.selection.dropdown.error:hover {
  892. border-color: #E0B4B4;
  893. }
  894. .ui.multiple.selection.error.dropdown > .label {
  895. border-color: #E0B4B4;
  896. }
  897. .ui.dropdown.error > .menu,
  898. .ui.dropdown.error > .menu .menu {
  899. border-color: #E0B4B4;
  900. }
  901. .ui.dropdown.error > .menu > .item {
  902. color: #9F3A38;
  903. }
  904. /* Item Hover */
  905. .ui.dropdown.error > .menu > .item:hover {
  906. background-color: #FBE7E7;
  907. }
  908. /* Item Active */
  909. .ui.dropdown.error > .menu .active.item {
  910. background-color: #FDCFCF;
  911. }
  912. .ui.dropdown.info,
  913. .ui.dropdown.info > .text,
  914. .ui.dropdown.info > .default.text {
  915. color: #276F86;
  916. }
  917. .ui.selection.dropdown.info {
  918. background: #F8FFFF;
  919. border-color: #A9D5DE;
  920. }
  921. .ui.selection.dropdown.info:hover {
  922. border-color: #A9D5DE;
  923. }
  924. .ui.multiple.selection.info.dropdown > .label {
  925. border-color: #A9D5DE;
  926. }
  927. .ui.dropdown.info > .menu,
  928. .ui.dropdown.info > .menu .menu {
  929. border-color: #A9D5DE;
  930. }
  931. .ui.dropdown.info > .menu > .item {
  932. color: #276F86;
  933. }
  934. /* Item Hover */
  935. .ui.dropdown.info > .menu > .item:hover {
  936. background-color: #e9f2fb;
  937. }
  938. /* Item Active */
  939. .ui.dropdown.info > .menu .active.item {
  940. background-color: #cef1fd;
  941. }
  942. .ui.dropdown.success,
  943. .ui.dropdown.success > .text,
  944. .ui.dropdown.success > .default.text {
  945. color: #2C662D;
  946. }
  947. .ui.selection.dropdown.success {
  948. background: #FCFFF5;
  949. border-color: #A3C293;
  950. }
  951. .ui.selection.dropdown.success:hover {
  952. border-color: #A3C293;
  953. }
  954. .ui.multiple.selection.success.dropdown > .label {
  955. border-color: #A3C293;
  956. }
  957. .ui.dropdown.success > .menu,
  958. .ui.dropdown.success > .menu .menu {
  959. border-color: #A3C293;
  960. }
  961. .ui.dropdown.success > .menu > .item {
  962. color: #2C662D;
  963. }
  964. /* Item Hover */
  965. .ui.dropdown.success > .menu > .item:hover {
  966. background-color: #e9fbe9;
  967. }
  968. /* Item Active */
  969. .ui.dropdown.success > .menu .active.item {
  970. background-color: #dafdce;
  971. }
  972. .ui.dropdown.warning,
  973. .ui.dropdown.warning > .text,
  974. .ui.dropdown.warning > .default.text {
  975. color: #573A08;
  976. }
  977. .ui.selection.dropdown.warning {
  978. background: #FFFAF3;
  979. border-color: #C9BA9B;
  980. }
  981. .ui.selection.dropdown.warning:hover {
  982. border-color: #C9BA9B;
  983. }
  984. .ui.multiple.selection.warning.dropdown > .label {
  985. border-color: #C9BA9B;
  986. }
  987. .ui.dropdown.warning > .menu,
  988. .ui.dropdown.warning > .menu .menu {
  989. border-color: #C9BA9B;
  990. }
  991. .ui.dropdown.warning > .menu > .item {
  992. color: #573A08;
  993. }
  994. /* Item Hover */
  995. .ui.dropdown.warning > .menu > .item:hover {
  996. background-color: #fbfbe9;
  997. }
  998. /* Item Active */
  999. .ui.dropdown.warning > .menu .active.item {
  1000. background-color: #fdfdce;
  1001. }
  1002. /*--------------------
  1003. Clear
  1004. ----------------------*/
  1005. .ui.dropdown > .clear.dropdown.icon {
  1006. opacity: 0.8;
  1007. transition: opacity 0.1s ease;
  1008. }
  1009. .ui.dropdown > .clear.dropdown.icon:hover {
  1010. opacity: 1;
  1011. }
  1012. /*--------------------
  1013. Disabled
  1014. ----------------------*/
  1015. /* Disabled */
  1016. .ui.disabled.dropdown,
  1017. .ui.dropdown .menu > .disabled.item {
  1018. cursor: default;
  1019. pointer-events: none;
  1020. opacity: var(--opacity-disabled);
  1021. }
  1022. /*******************************
  1023. Variations
  1024. *******************************/
  1025. /*--------------
  1026. Direction
  1027. ---------------*/
  1028. /* Flyout Direction */
  1029. .ui.dropdown .menu {
  1030. left: 0;
  1031. }
  1032. /* Default Side (Right) */
  1033. .ui.dropdown .right.menu > .menu,
  1034. .ui.dropdown .menu .right.menu {
  1035. left: 100% !important;
  1036. right: auto !important;
  1037. border-radius: 0.28571429rem !important;
  1038. }
  1039. /* Leftward Opening Menu */
  1040. .ui.dropdown > .left.menu {
  1041. left: auto !important;
  1042. right: 0 !important;
  1043. }
  1044. .ui.dropdown > .left.menu .menu,
  1045. .ui.dropdown .menu .left.menu {
  1046. left: auto;
  1047. right: 100%;
  1048. margin: 0 -0.5em 0 0 !important;
  1049. border-radius: 0.28571429rem !important;
  1050. }
  1051. .ui.dropdown .item .left.dropdown.icon,
  1052. .ui.dropdown .left.menu .item .dropdown.icon {
  1053. width: auto;
  1054. float: left;
  1055. margin: 0em 0 0 0;
  1056. }
  1057. .ui.dropdown .item .left.dropdown.icon,
  1058. .ui.dropdown .left.menu .item .dropdown.icon {
  1059. width: auto;
  1060. float: left;
  1061. margin: 0em 0 0 0;
  1062. }
  1063. .ui.dropdown .item .left.dropdown.icon + .text,
  1064. .ui.dropdown .left.menu .item .dropdown.icon + .text {
  1065. margin-left: 1em;
  1066. margin-right: 0;
  1067. }
  1068. /*--------------
  1069. Upward
  1070. ---------------*/
  1071. /* Upward Main Menu */
  1072. .ui.upward.dropdown > .menu {
  1073. top: auto;
  1074. bottom: 100%;
  1075. box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
  1076. border-radius: 0.28571429rem 0.28571429rem 0 0;
  1077. }
  1078. /* Upward Sub Menu */
  1079. .ui.dropdown .upward.menu {
  1080. top: auto !important;
  1081. bottom: 0 !important;
  1082. }
  1083. /* Active Upward */
  1084. .ui.simple.upward.active.dropdown,
  1085. .ui.simple.upward.dropdown:hover {
  1086. border-radius: 0.28571429rem 0.28571429rem 0 0 !important;
  1087. }
  1088. .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
  1089. border-radius: 0.28571429rem 0.28571429rem 0 0;
  1090. }
  1091. /* Selection */
  1092. .ui.upward.selection.dropdown .menu {
  1093. border-top-width: 1px !important;
  1094. border-bottom-width: 0 !important;
  1095. box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
  1096. }
  1097. .ui.upward.selection.dropdown:hover {
  1098. box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.05);
  1099. }
  1100. /* Active Upward */
  1101. .ui.active.upward.selection.dropdown {
  1102. border-radius: 0 0 0.28571429rem 0.28571429rem !important;
  1103. }
  1104. /* Visible Upward */
  1105. .ui.upward.selection.dropdown.visible {
  1106. box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.08);
  1107. border-radius: 0 0 0.28571429rem 0.28571429rem !important;
  1108. }
  1109. /* Visible Hover Upward */
  1110. .ui.upward.active.selection.dropdown:hover {
  1111. box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.05);
  1112. }
  1113. .ui.upward.active.selection.dropdown:hover .menu {
  1114. box-shadow: 0 -2px 3px 0 rgba(0, 0, 0, 0.08);
  1115. }
  1116. /*--------------
  1117. Scrolling
  1118. ---------------*/
  1119. /* Selection Menu */
  1120. .ui.scrolling.dropdown .menu,
  1121. .ui.dropdown .scrolling.menu {
  1122. overflow-x: hidden;
  1123. overflow-y: auto;
  1124. }
  1125. .ui.scrolling.dropdown .menu {
  1126. overflow-x: hidden;
  1127. overflow-y: auto;
  1128. backface-visibility: hidden;
  1129. -webkit-overflow-scrolling: touch;
  1130. min-width: 100% !important;
  1131. width: auto !important;
  1132. }
  1133. .ui.dropdown .scrolling.menu {
  1134. position: static;
  1135. overflow-y: auto;
  1136. border: none;
  1137. box-shadow: none !important;
  1138. border-radius: 0 !important;
  1139. margin: 0 !important;
  1140. min-width: 100% !important;
  1141. width: auto !important;
  1142. border-top: 1px solid rgba(34, 36, 38, 0.15);
  1143. }
  1144. .ui.scrolling.dropdown .menu .item.item.item,
  1145. .ui.dropdown .scrolling.menu > .item.item.item {
  1146. border-top: none;
  1147. }
  1148. .ui.scrolling.dropdown .menu .item:first-child,
  1149. .ui.dropdown .scrolling.menu .item:first-child {
  1150. border-top: none;
  1151. }
  1152. .ui.dropdown > .animating.menu .scrolling.menu,
  1153. .ui.dropdown > .visible.menu .scrolling.menu {
  1154. display: block;
  1155. }
  1156. /* Scrollbar in IE */
  1157. @media all and (-ms-high-contrast: none) {
  1158. .ui.scrolling.dropdown .menu,
  1159. .ui.dropdown .scrolling.menu {
  1160. min-width: calc(100% - 17px);
  1161. }
  1162. }
  1163. @media only screen and (max-width: 767.98px) {
  1164. .ui.scrolling.dropdown .menu,
  1165. .ui.dropdown .scrolling.menu {
  1166. max-height: 10.28571429rem;
  1167. }
  1168. }
  1169. @media only screen and (min-width: 768px) {
  1170. .ui.scrolling.dropdown .menu,
  1171. .ui.dropdown .scrolling.menu {
  1172. max-height: 15.42857143rem;
  1173. }
  1174. }
  1175. @media only screen and (min-width: 992px) {
  1176. .ui.scrolling.dropdown .menu,
  1177. .ui.dropdown .scrolling.menu {
  1178. max-height: 20.57142857rem;
  1179. }
  1180. }
  1181. @media only screen and (min-width: 1920px) {
  1182. .ui.scrolling.dropdown .menu,
  1183. .ui.dropdown .scrolling.menu {
  1184. max-height: 20.57142857rem;
  1185. }
  1186. }
  1187. /*--------------
  1188. Columnar
  1189. ---------------*/
  1190. .ui.column.dropdown > .menu {
  1191. flex-wrap: wrap;
  1192. }
  1193. .ui.dropdown[class*="two column"] > .menu > .item {
  1194. width: 50%;
  1195. }
  1196. .ui.dropdown[class*="three column"] > .menu > .item {
  1197. width: 33%;
  1198. }
  1199. .ui.dropdown[class*="four column"] > .menu > .item {
  1200. width: 25%;
  1201. }
  1202. .ui.dropdown[class*="five column"] > .menu > .item {
  1203. width: 20%;
  1204. }
  1205. /*--------------
  1206. Simple
  1207. ---------------*/
  1208. /* Displays without javascript */
  1209. .ui.simple.dropdown .menu:before,
  1210. .ui.simple.dropdown .menu:after {
  1211. display: none;
  1212. }
  1213. .ui.simple.dropdown .menu {
  1214. position: absolute;
  1215. /* IE hack to make dropdown icons appear inline */
  1216. display: -ms-inline-flexbox !important;
  1217. display: block;
  1218. overflow: hidden;
  1219. top: -9999px;
  1220. opacity: 0;
  1221. width: 0;
  1222. height: 0;
  1223. transition: opacity 0.1s ease;
  1224. margin-top: 0 !important;
  1225. }
  1226. .ui.simple.active.dropdown,
  1227. .ui.simple.dropdown:hover {
  1228. border-bottom-left-radius: 0 !important;
  1229. border-bottom-right-radius: 0 !important;
  1230. }
  1231. .ui.simple.active.dropdown > .menu,
  1232. .ui.simple.dropdown:hover > .menu {
  1233. overflow: visible;
  1234. width: auto;
  1235. height: auto;
  1236. top: 100%;
  1237. opacity: 1;
  1238. }
  1239. .ui.simple.dropdown > .menu > .item:active > .menu,
  1240. .ui.simple.dropdown .menu .item:hover > .menu {
  1241. overflow: visible;
  1242. width: auto;
  1243. height: auto;
  1244. top: 0 !important;
  1245. left: 100%;
  1246. opacity: 1;
  1247. }
  1248. .ui.simple.dropdown > .menu > .item:active > .left.menu,
  1249. .ui.simple.dropdown .menu .item:hover > .left.menu,
  1250. .right.menu .ui.simple.dropdown > .menu > .item:active > .menu:not(.right),
  1251. .right.menu .ui.simple.dropdown > .menu .item:hover > .menu:not(.right) {
  1252. left: auto;
  1253. right: 100%;
  1254. }
  1255. .ui.simple.disabled.dropdown:hover .menu {
  1256. display: none;
  1257. height: 0;
  1258. width: 0;
  1259. overflow: hidden;
  1260. }
  1261. /* Visible */
  1262. .ui.simple.visible.dropdown > .menu {
  1263. display: block;
  1264. }
  1265. /* Scrolling */
  1266. .ui.simple.scrolling.active.dropdown > .menu,
  1267. .ui.simple.scrolling.dropdown:hover > .menu {
  1268. overflow-x: hidden;
  1269. overflow-y: auto;
  1270. }
  1271. /*--------------
  1272. Fluid
  1273. ---------------*/
  1274. .ui.fluid.dropdown {
  1275. display: block;
  1276. width: 100% !important;
  1277. min-width: 0;
  1278. }
  1279. .ui.fluid.dropdown > .dropdown.icon {
  1280. float: right;
  1281. }
  1282. /*--------------
  1283. Floating
  1284. ---------------*/
  1285. .ui.floating.dropdown .menu {
  1286. left: 0;
  1287. right: auto;
  1288. box-shadow: 0 2px 4px 0 rgba(34, 36, 38, 0.12), 0 2px 10px 0 rgba(34, 36, 38, 0.15) !important;
  1289. border-radius: 0.28571429rem !important;
  1290. }
  1291. .ui.floating.dropdown > .menu {
  1292. border-radius: 0.28571429rem !important;
  1293. }
  1294. .ui:not(.upward).floating.dropdown > .menu {
  1295. margin-top: 0.5em;
  1296. }
  1297. .ui.upward.floating.dropdown > .menu {
  1298. margin-bottom: 0.5em;
  1299. }
  1300. /*--------------
  1301. Pointing
  1302. ---------------*/
  1303. .ui.pointing.dropdown > .menu {
  1304. top: 100%;
  1305. margin-top: 0.78571429rem;
  1306. border-radius: 0.28571429rem;
  1307. }
  1308. .ui.pointing.dropdown > .menu:not(.hidden):after {
  1309. display: block;
  1310. position: absolute;
  1311. pointer-events: none;
  1312. content: '';
  1313. visibility: visible;
  1314. transform: rotate(45deg);
  1315. width: 0.5em;
  1316. height: 0.5em;
  1317. box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
  1318. background: #FFFFFF;
  1319. z-index: 2;
  1320. }
  1321. .ui.pointing.dropdown > .menu:not(.hidden):after {
  1322. top: -0.25em;
  1323. left: 50%;
  1324. margin: 0 0 0 -0.25em;
  1325. }
  1326. /* Top Left Pointing */
  1327. .ui.top.left.pointing.dropdown > .menu {
  1328. top: 100%;
  1329. bottom: auto;
  1330. left: 0;
  1331. right: auto;
  1332. margin: 1em 0 0;
  1333. }
  1334. .ui.top.left.pointing.dropdown > .menu {
  1335. top: 100%;
  1336. bottom: auto;
  1337. left: 0;
  1338. right: auto;
  1339. margin: 1em 0 0;
  1340. }
  1341. .ui.top.left.pointing.dropdown > .menu:after {
  1342. top: -0.25em;
  1343. left: 1em;
  1344. right: auto;
  1345. margin: 0;
  1346. transform: rotate(45deg);
  1347. }
  1348. /* Top Right Pointing */
  1349. .ui.top.right.pointing.dropdown > .menu {
  1350. top: 100%;
  1351. bottom: auto;
  1352. right: 0;
  1353. left: auto;
  1354. margin: 1em 0 0;
  1355. }
  1356. .ui.top.pointing.dropdown > .left.menu:after,
  1357. .ui.top.right.pointing.dropdown > .menu:after {
  1358. top: -0.25em;
  1359. left: auto !important;
  1360. right: 1em !important;
  1361. margin: 0;
  1362. transform: rotate(45deg);
  1363. }
  1364. /* Left Pointing */
  1365. .ui.left.pointing.dropdown > .menu {
  1366. top: 0;
  1367. left: 100%;
  1368. right: auto;
  1369. margin: 0 0 0 1em;
  1370. }
  1371. .ui.left.pointing.dropdown > .menu:after {
  1372. top: 1em;
  1373. left: -0.25em;
  1374. margin: 0 0 0 0;
  1375. transform: rotate(-45deg);
  1376. }
  1377. .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
  1378. left: auto !important;
  1379. right: 100% !important;
  1380. margin: 0 1em 0 0;
  1381. }
  1382. .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
  1383. top: 1em;
  1384. left: auto;
  1385. right: -0.25em;
  1386. margin: 0 0 0 0;
  1387. transform: rotate(135deg);
  1388. }
  1389. /* Right Pointing */
  1390. .ui.right.pointing.dropdown > .menu {
  1391. top: 0;
  1392. left: auto;
  1393. right: 100%;
  1394. margin: 0 1em 0 0;
  1395. }
  1396. .ui.right.pointing.dropdown > .menu:after {
  1397. top: 1em;
  1398. left: auto;
  1399. right: -0.25em;
  1400. margin: 0 0 0 0;
  1401. transform: rotate(135deg);
  1402. }
  1403. /* Bottom Pointing */
  1404. .ui.bottom.pointing.dropdown > .menu {
  1405. top: auto;
  1406. bottom: 100%;
  1407. left: 0;
  1408. right: auto;
  1409. margin: 0 0 1em;
  1410. }
  1411. .ui.bottom.pointing.dropdown > .menu:after {
  1412. top: auto;
  1413. bottom: -0.25em;
  1414. right: auto;
  1415. margin: 0;
  1416. transform: rotate(-135deg);
  1417. }
  1418. /* Reverse Sub-Menu Direction */
  1419. .ui.bottom.pointing.dropdown > .menu .menu {
  1420. top: auto !important;
  1421. bottom: 0 !important;
  1422. }
  1423. /* Bottom Left */
  1424. .ui.bottom.left.pointing.dropdown > .menu {
  1425. left: 0;
  1426. right: auto;
  1427. }
  1428. .ui.bottom.left.pointing.dropdown > .menu:after {
  1429. left: 1em;
  1430. right: auto;
  1431. }
  1432. /* Bottom Right */
  1433. .ui.bottom.right.pointing.dropdown > .menu {
  1434. right: 0;
  1435. left: auto;
  1436. }
  1437. .ui.bottom.right.pointing.dropdown > .menu:after {
  1438. left: auto;
  1439. right: 1em;
  1440. }
  1441. /* Upward pointing */
  1442. .ui.pointing.upward.dropdown .menu,
  1443. .ui.top.pointing.upward.dropdown .menu {
  1444. top: auto !important;
  1445. bottom: 100% !important;
  1446. margin: 0 0 0.78571429rem;
  1447. border-radius: 0.28571429rem;
  1448. }
  1449. .ui.pointing.upward.dropdown .menu:after,
  1450. .ui.top.pointing.upward.dropdown .menu:after {
  1451. top: 100% !important;
  1452. bottom: auto !important;
  1453. box-shadow: 1px 1px 0 0 rgba(34, 36, 38, 0.15);
  1454. margin: -0.25em 0 0;
  1455. }
  1456. /* Right Pointing Upward */
  1457. .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
  1458. top: auto !important;
  1459. bottom: 0 !important;
  1460. margin: 0 1em 0 0;
  1461. }
  1462. .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
  1463. top: auto !important;
  1464. bottom: 0 !important;
  1465. margin: 0 0 1em 0;
  1466. box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
  1467. }
  1468. /* Left Pointing Upward */
  1469. .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
  1470. top: auto !important;
  1471. bottom: 0 !important;
  1472. margin: 0 0 0 1em;
  1473. }
  1474. .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
  1475. top: auto !important;
  1476. bottom: 0 !important;
  1477. margin: 0 0 1em 0;
  1478. box-shadow: -1px -1px 0 0 rgba(34, 36, 38, 0.15);
  1479. }
  1480. /*--------------------
  1481. Sizes
  1482. ---------------------*/
  1483. .ui.dropdown,
  1484. .ui.dropdown .menu > .item {
  1485. font-size: 1rem;
  1486. }
  1487. .ui.mini.dropdown,
  1488. .ui.mini.dropdown .menu > .item {
  1489. font-size: 0.78571429rem;
  1490. }
  1491. .ui.tiny.dropdown,
  1492. .ui.tiny.dropdown .menu > .item {
  1493. font-size: 0.85714286rem;
  1494. }
  1495. .ui.small.dropdown,
  1496. .ui.small.dropdown .menu > .item {
  1497. font-size: 0.92857143rem;
  1498. }
  1499. .ui.large.dropdown,
  1500. .ui.large.dropdown .menu > .item {
  1501. font-size: 1.14285714rem;
  1502. }
  1503. .ui.big.dropdown,
  1504. .ui.big.dropdown .menu > .item {
  1505. font-size: 1.28571429rem;
  1506. }
  1507. .ui.huge.dropdown,
  1508. .ui.huge.dropdown .menu > .item {
  1509. font-size: 1.42857143rem;
  1510. }
  1511. .ui.massive.dropdown,
  1512. .ui.massive.dropdown .menu > .item {
  1513. font-size: 1.71428571rem;
  1514. }
  1515. /*******************************
  1516. Theme Overrides
  1517. *******************************/
  1518. /* Dropdown Carets */
  1519. @font-face {
  1520. font-family: 'Dropdown';
  1521. src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggjB5AAAAC8AAAAYGNtYXAPfuIIAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5Zjo82LgAAAFwAAABVGhlYWQAQ88bAAACxAAAADZoaGVhAwcB6QAAAvwAAAAkaG10eAS4ABIAAAMgAAAAIGxvY2EBNgDeAAADQAAAABJtYXhwAAoAFgAAA1QAAAAgbmFtZVcZpu4AAAN0AAABRXBvc3QAAwAAAAAEvAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADw2gHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIPDa//3//wAAAAAAIPDX//3//wAB/+MPLQADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAIABJQElABMAABM0NzY3BTYXFhUUDwEGJwYvASY1AAUGBwEACAUGBoAFCAcGgAUBEgcGBQEBAQcECQYHfwYBAQZ/BwYAAQAAAG4BJQESABMAADc0PwE2MzIfARYVFAcGIyEiJyY1AAWABgcIBYAGBgUI/wAHBgWABwaABQWABgcHBgUFBgcAAAABABIASQC3AW4AEwAANzQ/ATYXNhcWHQEUBwYnBi8BJjUSBoAFCAcFBgYFBwgFgAbbBwZ/BwEBBwQJ/wgEBwEBB38GBgAAAAABAAAASQClAW4AEwAANxE0NzYzMh8BFhUUDwEGIyInJjUABQYHCAWABgaABQgHBgVbAQAIBQYGgAUIBwWABgYFBwAAAAEAAAABAADZuaKOXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAAAAACgAUAB4AQgBkAIgAqgAAAAEAAAAIABQAAQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAOAAAAAQAAAAAAAgAOAEcAAQAAAAAAAwAOACQAAQAAAAAABAAOAFUAAQAAAAAABQAWAA4AAQAAAAAABgAHADIAAQAAAAAACgA0AGMAAwABBAkAAQAOAAAAAwABBAkAAgAOAEcAAwABBAkAAwAOACQAAwABBAkABAAOAFUAAwABBAkABQAWAA4AAwABBAkABgAOADkAAwABBAkACgA0AGMAaQBjAG8AbQBvAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AbgBSAGUAZwB1AGwAYQByAGkAYwBvAG0AbwBvAG4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('truetype'), url(data:application/font-woff;charset=utf-8;base64,d09GRk9UVE8AAAVwAAoAAAAABSgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABDRkYgAAAA9AAAAdkAAAHZLDXE/09TLzIAAALQAAAAYAAAAGAIIweQY21hcAAAAzAAAABMAAAATA9+4ghnYXNwAAADfAAAAAgAAAAIAAAAEGhlYWQAAAOEAAAANgAAADYAQ88baGhlYQAAA7wAAAAkAAAAJAMHAelobXR4AAAD4AAAACAAAAAgBLgAEm1heHAAAAQAAAAABgAAAAYACFAAbmFtZQAABAgAAAFFAAABRVcZpu5wb3N0AAAFUAAAACAAAAAgAAMAAAEABAQAAQEBCGljb21vb24AAQIAAQA6+BwC+BsD+BgEHgoAGVP/i4seCgAZU/+LiwwHi2v4lPh0BR0AAACIDx0AAACNER0AAAAJHQAAAdASAAkBAQgPERMWGyAlKmljb21vb25pY29tb29udTB1MXUyMHVGMEQ3dUYwRDh1RjBEOXVGMERBAAACAYkABgAIAgABAAQABwAKAA0AVgCfAOgBL/yUDvyUDvyUDvuUDvtvi/emFYuQjZCOjo+Pj42Qiwj3lIsFkIuQiY6Hj4iNhouGi4aJh4eHCPsU+xQFiIiGiYaLhouHjYeOCPsU9xQFiI+Jj4uQCA77b4v3FBWLkI2Pjo8I9xT3FAWPjo+NkIuQi5CJjogI9xT7FAWPh42Hi4aLhomHh4eIiIaJhosI+5SLBYaLh42HjoiPiY+LkAgO+92d928Vi5CNkI+OCPcU9xQFjo+QjZCLkIuPiY6Hj4iNhouGCIv7lAWLhomHh4iIh4eJhouGi4aNiI8I+xT3FAWHjomPi5AIDvvdi+YVi/eUBYuQjZCOjo+Pj42Qi5CLkImOhwj3FPsUBY+IjYaLhouGiYeHiAj7FPsUBYiHhomGi4aLh42Hj4iOiY+LkAgO+JQU+JQViwwKAAAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA8NoB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDw2v/9//8AAAAAACDw1//9//8AAf/jDy0AAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAABAAA5emozXw889QALAgAAAAAA0ABHWAAAAADQAEdYAAAAAAElAW4AAAAIAAIAAAAAAAAAAQAAAeD/4AAAAgAAAAAAASUAAQAAAAAAAAAAAAAAAAAAAAgAAAAAAAAAAAAAAAABAAAAASUAAAElAAAAtwASALcAAAAAUAAACAAAAAAADgCuAAEAAAAAAAEADgAAAAEAAAAAAAIADgBHAAEAAAAAAAMADgAkAAEAAAAAAAQADgBVAAEAAAAAAAUAFgAOAAEAAAAAAAYABwAyAAEAAAAAAAoANABjAAMAAQQJAAEADgAAAAMAAQQJAAIADgBHAAMAAQQJAAMADgAkAAMAAQQJAAQADgBVAAMAAQQJAAUAFgAOAAMAAQQJAAYADgA5AAMAAQQJAAoANABjAGkAYwBvAG0AbwBvAG4AVgBlAHIAcwBpAG8AbgAgADEALgAwAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG4AUgBlAGcAdQBsAGEAcgBpAGMAbwBtAG8AbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format('woff');
  1522. font-weight: normal;
  1523. font-style: normal;
  1524. }
  1525. .ui.dropdown > .dropdown.icon {
  1526. font-family: 'Dropdown';
  1527. line-height: 1;
  1528. height: 1em;
  1529. width: 1.23em;
  1530. backface-visibility: hidden;
  1531. font-weight: normal;
  1532. font-style: normal;
  1533. text-align: center;
  1534. }
  1535. .ui.dropdown > .dropdown.icon {
  1536. width: auto;
  1537. }
  1538. .ui.dropdown > .dropdown.icon:before {
  1539. content: '\f0d7';
  1540. }
  1541. /* Sub Menu */
  1542. .ui.dropdown .menu .item .dropdown.icon:before {
  1543. content: '\f0da' /*rtl:'\f0d9'*/;
  1544. }
  1545. .ui.dropdown .item .left.dropdown.icon:before,
  1546. .ui.dropdown .left.menu .item .dropdown.icon:before {
  1547. content: "\f0d9" /*rtl:"\f0da"*/;
  1548. }
  1549. /* Vertical Menu Dropdown */
  1550. .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
  1551. content: "\f0da" /*rtl:"\f0d9"*/;
  1552. }
  1553. /* Icons for Reference
  1554. .dropdown.down.icon {
  1555. content: "\f0d7";
  1556. }
  1557. .dropdown.up.icon {
  1558. content: "\f0d8";
  1559. }
  1560. .dropdown.left.icon {
  1561. content: "\f0d9";
  1562. }
  1563. .dropdown.icon.icon {
  1564. content: "\f0da";
  1565. }
  1566. */
  1567. /*******************************
  1568. User Overrides
  1569. *******************************/