dropdown.css 35 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516
  1. /*!
  2. * # Semantic UI 2.4.2 - Dropdown
  3. * http://github.com/semantic-org/semantic-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. -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
  20. transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
  21. transition: box-shadow 0.1s ease, width 0.1s ease;
  22. transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease;
  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: -webkit-max-content;
  38. min-width: -moz-max-content;
  39. min-width: max-content;
  40. margin: 0em;
  41. padding: 0em 0em;
  42. background: #FFFFFF;
  43. font-size: 1em;
  44. text-shadow: none;
  45. text-align: left;
  46. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  47. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  48. border: 1px solid rgba(34, 36, 38, 0.15);
  49. border-radius: 0.28571429rem;
  50. -webkit-transition: opacity 0.1s ease;
  51. transition: opacity 0.1s ease;
  52. z-index: 11;
  53. will-change: transform, opacity;
  54. }
  55. .ui.dropdown .menu > * {
  56. white-space: nowrap;
  57. }
  58. /*--------------
  59. Hidden Input
  60. ---------------*/
  61. .ui.dropdown > input:not(.search):first-child,
  62. .ui.dropdown > select {
  63. display: none !important;
  64. }
  65. /*--------------
  66. Dropdown Icon
  67. ---------------*/
  68. .ui.dropdown > .dropdown.icon {
  69. position: relative;
  70. width: auto;
  71. font-size: 0.85714286em;
  72. margin: 0em 0em 0em 1em;
  73. }
  74. .ui.dropdown .menu > .item .dropdown.icon {
  75. width: auto;
  76. float: right;
  77. margin: 0em 0em 0em 1em;
  78. }
  79. .ui.dropdown .menu > .item .dropdown.icon + .text {
  80. margin-right: 1em;
  81. }
  82. /*--------------
  83. Text
  84. ---------------*/
  85. .ui.dropdown > .text {
  86. display: inline-block;
  87. -webkit-transition: none;
  88. transition: none;
  89. }
  90. /*--------------
  91. Menu Item
  92. ---------------*/
  93. .ui.dropdown .menu > .item {
  94. position: relative;
  95. cursor: pointer;
  96. display: block;
  97. border: none;
  98. height: auto;
  99. text-align: left;
  100. border-top: none;
  101. line-height: 1em;
  102. color: rgba(0, 0, 0, 0.87);
  103. padding: 0.78571429rem 1.14285714rem !important;
  104. font-size: 1rem;
  105. text-transform: none;
  106. font-weight: normal;
  107. -webkit-box-shadow: none;
  108. box-shadow: none;
  109. -webkit-touch-callout: none;
  110. }
  111. .ui.dropdown .menu > .item:first-child {
  112. border-top-width: 0px;
  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: 0em !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: 0em !important;
  127. margin-right: 1em !important;
  128. }
  129. .ui.dropdown .menu .item > .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 0rem 0.75rem;
  140. padding: 0em 1.14285714rem;
  141. color: rgba(0, 0, 0, 0.85);
  142. font-size: 0.78571429em;
  143. font-weight: bold;
  144. text-transform: uppercase;
  145. }
  146. .ui.dropdown .menu > .divider {
  147. border-top: 1px solid rgba(34, 36, 38, 0.1);
  148. height: 0em;
  149. margin: 0.5em 0em;
  150. }
  151. .ui.dropdown.dropdown .menu > .input {
  152. width: auto;
  153. display: -webkit-box;
  154. display: -ms-flexbox;
  155. display: flex;
  156. margin: 1.14285714rem 0.78571429rem;
  157. min-width: 10rem;
  158. }
  159. .ui.dropdown .menu > .header + .input {
  160. margin-top: 0em;
  161. }
  162. .ui.dropdown .menu > .input:not(.transparent) input {
  163. padding: 0.5em 1em;
  164. }
  165. .ui.dropdown .menu > .input:not(.transparent) .button,
  166. .ui.dropdown .menu > .input:not(.transparent) .icon,
  167. .ui.dropdown .menu > .input:not(.transparent) .label {
  168. padding-top: 0.5em;
  169. padding-bottom: 0.5em;
  170. }
  171. /*-----------------
  172. Item Description
  173. -------------------*/
  174. .ui.dropdown > .text > .description,
  175. .ui.dropdown .menu > .item > .description {
  176. float: right;
  177. margin: 0em 0em 0em 1em;
  178. color: rgba(0, 0, 0, 0.4);
  179. }
  180. /*-----------------
  181. Message
  182. -------------------*/
  183. .ui.dropdown .menu > .message {
  184. padding: 0.78571429rem 1.14285714rem;
  185. font-weight: normal;
  186. }
  187. .ui.dropdown .menu > .message:not(.ui) {
  188. color: rgba(0, 0, 0, 0.4);
  189. }
  190. /*--------------
  191. Sub Menu
  192. ---------------*/
  193. .ui.dropdown .menu .menu {
  194. top: 0% !important;
  195. left: 100%;
  196. right: auto;
  197. margin: 0em 0em 0em -0.5em !important;
  198. border-radius: 0.28571429rem !important;
  199. z-index: 21 !important;
  200. }
  201. /* Hide Arrow */
  202. .ui.dropdown .menu .menu:after {
  203. display: none;
  204. }
  205. /*--------------
  206. Sub Elements
  207. ---------------*/
  208. /* Icons / Flags / Labels / Image */
  209. .ui.dropdown > .text > .icon,
  210. .ui.dropdown > .text > .label,
  211. .ui.dropdown > .text > .flag,
  212. .ui.dropdown > .text > img,
  213. .ui.dropdown > .text > .image {
  214. margin-top: 0em;
  215. }
  216. .ui.dropdown .menu > .item > .icon,
  217. .ui.dropdown .menu > .item > .label,
  218. .ui.dropdown .menu > .item > .flag,
  219. .ui.dropdown .menu > .item > .image,
  220. .ui.dropdown .menu > .item > img {
  221. margin-top: 0em;
  222. }
  223. .ui.dropdown > .text > .icon,
  224. .ui.dropdown > .text > .label,
  225. .ui.dropdown > .text > .flag,
  226. .ui.dropdown > .text > img,
  227. .ui.dropdown > .text > .image,
  228. .ui.dropdown .menu > .item > .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-left: 0em;
  234. float: none;
  235. margin-right: 0.78571429rem;
  236. }
  237. /*--------------
  238. Image
  239. ---------------*/
  240. .ui.dropdown > .text > img,
  241. .ui.dropdown > .text > .image,
  242. .ui.dropdown .menu > .item > .image,
  243. .ui.dropdown .menu > .item > img {
  244. display: inline-block;
  245. vertical-align: top;
  246. width: auto;
  247. margin-top: -0.5em;
  248. margin-bottom: -0.5em;
  249. max-height: 2em;
  250. }
  251. /*******************************
  252. Coupling
  253. *******************************/
  254. /*--------------
  255. Menu
  256. ---------------*/
  257. /* Remove Menu Item Divider */
  258. .ui.dropdown .ui.menu > .item:before,
  259. .ui.menu .ui.dropdown .menu > .item:before {
  260. display: none;
  261. }
  262. /* Prevent Menu Item Border */
  263. .ui.menu .ui.dropdown .menu .active.item {
  264. border-left: none;
  265. }
  266. /* Automatically float dropdown menu right on last menu item */
  267. .ui.menu .right.menu .dropdown:last-child .menu,
  268. .ui.menu .right.dropdown.item .menu,
  269. .ui.buttons > .ui.dropdown:last-child .menu {
  270. left: auto;
  271. right: 0em;
  272. }
  273. /*--------------
  274. Label
  275. ---------------*/
  276. /* Dropdown Menu */
  277. .ui.label.dropdown .menu {
  278. min-width: 100%;
  279. }
  280. /*--------------
  281. Button
  282. ---------------*/
  283. /* No Margin On Icon Button */
  284. .ui.dropdown.icon.button > .dropdown.icon {
  285. margin: 0em;
  286. }
  287. .ui.button.dropdown .menu {
  288. min-width: 100%;
  289. }
  290. /*******************************
  291. Types
  292. *******************************/
  293. /*--------------
  294. Selection
  295. ---------------*/
  296. /* Displays like a select box */
  297. .ui.selection.dropdown {
  298. cursor: pointer;
  299. word-wrap: break-word;
  300. line-height: 1em;
  301. white-space: normal;
  302. outline: 0;
  303. -webkit-transform: rotateZ(0deg);
  304. transform: rotateZ(0deg);
  305. min-width: 14em;
  306. min-height: 2.71428571em;
  307. background: #FFFFFF;
  308. display: inline-block;
  309. padding: 0.78571429em 2.1em 0.78571429em 1em;
  310. color: rgba(0, 0, 0, 0.87);
  311. -webkit-box-shadow: none;
  312. box-shadow: none;
  313. border: 1px solid rgba(34, 36, 38, 0.15);
  314. border-radius: 0.28571429rem;
  315. -webkit-transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
  316. transition: width 0.1s ease, -webkit-box-shadow 0.1s ease;
  317. transition: box-shadow 0.1s ease, width 0.1s ease;
  318. transition: box-shadow 0.1s ease, width 0.1s ease, -webkit-box-shadow 0.1s ease;
  319. }
  320. .ui.selection.dropdown.visible,
  321. .ui.selection.dropdown.active {
  322. z-index: 10;
  323. }
  324. select.ui.dropdown {
  325. height: 38px;
  326. padding: 0.5em;
  327. border: 1px solid rgba(34, 36, 38, 0.15);
  328. visibility: visible;
  329. }
  330. .ui.selection.dropdown > .search.icon,
  331. .ui.selection.dropdown > .delete.icon,
  332. .ui.selection.dropdown > .dropdown.icon {
  333. cursor: pointer;
  334. position: absolute;
  335. width: auto;
  336. height: auto;
  337. line-height: 1.21428571em;
  338. top: 0.78571429em;
  339. right: 1em;
  340. z-index: 3;
  341. margin: -0.78571429em;
  342. padding: 0.91666667em;
  343. opacity: 0.8;
  344. -webkit-transition: opacity 0.1s ease;
  345. transition: opacity 0.1s ease;
  346. }
  347. /* Compact */
  348. .ui.compact.selection.dropdown {
  349. min-width: 0px;
  350. }
  351. /* Selection Menu */
  352. .ui.selection.dropdown .menu {
  353. overflow-x: hidden;
  354. overflow-y: auto;
  355. -webkit-backface-visibility: hidden;
  356. backface-visibility: hidden;
  357. -webkit-overflow-scrolling: touch;
  358. border-top-width: 0px !important;
  359. width: auto;
  360. outline: none;
  361. margin: 0px -1px;
  362. min-width: calc(100% + 2px );
  363. width: calc(100% + 2px );
  364. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  365. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  366. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  367. -webkit-transition: opacity 0.1s ease;
  368. transition: opacity 0.1s ease;
  369. }
  370. .ui.selection.dropdown .menu:after,
  371. .ui.selection.dropdown .menu:before {
  372. display: none;
  373. }
  374. /*--------------
  375. Message
  376. ---------------*/
  377. .ui.selection.dropdown .menu > .message {
  378. padding: 0.78571429rem 1.14285714rem;
  379. }
  380. @media only screen and (max-width: 767px) {
  381. .ui.selection.dropdown .menu {
  382. max-height: 8.01428571rem;
  383. }
  384. }
  385. @media only screen and (min-width: 768px) {
  386. .ui.selection.dropdown .menu {
  387. max-height: 10.68571429rem;
  388. }
  389. }
  390. @media only screen and (min-width: 992px) {
  391. .ui.selection.dropdown .menu {
  392. max-height: 16.02857143rem;
  393. }
  394. }
  395. @media only screen and (min-width: 1920px) {
  396. .ui.selection.dropdown .menu {
  397. max-height: 21.37142857rem;
  398. }
  399. }
  400. /* Menu Item */
  401. .ui.selection.dropdown .menu > .item {
  402. border-top: 1px solid #FAFAFA;
  403. padding: 0.78571429rem 1.14285714rem !important;
  404. white-space: normal;
  405. word-wrap: normal;
  406. }
  407. /* User Item */
  408. .ui.selection.dropdown .menu > .hidden.addition.item {
  409. display: none;
  410. }
  411. /* Hover */
  412. .ui.selection.dropdown:hover {
  413. border-color: rgba(34, 36, 38, 0.35);
  414. -webkit-box-shadow: none;
  415. box-shadow: none;
  416. }
  417. /* Active */
  418. .ui.selection.active.dropdown {
  419. border-color: #96C8DA;
  420. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  421. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  422. }
  423. .ui.selection.active.dropdown .menu {
  424. border-color: #96C8DA;
  425. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  426. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  427. }
  428. /* Focus */
  429. .ui.selection.dropdown:focus {
  430. border-color: #96C8DA;
  431. -webkit-box-shadow: none;
  432. box-shadow: none;
  433. }
  434. .ui.selection.dropdown:focus .menu {
  435. border-color: #96C8DA;
  436. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  437. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  438. }
  439. /* Visible */
  440. .ui.selection.visible.dropdown > .text:not(.default) {
  441. font-weight: normal;
  442. color: rgba(0, 0, 0, 0.8);
  443. }
  444. /* Visible Hover */
  445. .ui.selection.active.dropdown:hover {
  446. border-color: #96C8DA;
  447. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  448. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  449. }
  450. .ui.selection.active.dropdown:hover .menu {
  451. border-color: #96C8DA;
  452. -webkit-box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  453. box-shadow: 0px 2px 3px 0px rgba(34, 36, 38, 0.15);
  454. }
  455. /* Dropdown Icon */
  456. .ui.active.selection.dropdown > .dropdown.icon,
  457. .ui.visible.selection.dropdown > .dropdown.icon {
  458. opacity: '';
  459. z-index: 3;
  460. }
  461. /* Connecting Border */
  462. .ui.active.selection.dropdown {
  463. border-bottom-left-radius: 0em !important;
  464. border-bottom-right-radius: 0em !important;
  465. }
  466. /* Empty Connecting Border */
  467. .ui.active.empty.selection.dropdown {
  468. border-radius: 0.28571429rem !important;
  469. -webkit-box-shadow: none !important;
  470. box-shadow: none !important;
  471. }
  472. .ui.active.empty.selection.dropdown .menu {
  473. border: none !important;
  474. -webkit-box-shadow: none !important;
  475. box-shadow: none !important;
  476. }
  477. /*--------------
  478. Searchable
  479. ---------------*/
  480. /* Search Selection */
  481. .ui.search.dropdown {
  482. min-width: '';
  483. }
  484. /* Search Dropdown */
  485. .ui.search.dropdown > input.search {
  486. background: none transparent !important;
  487. border: none !important;
  488. -webkit-box-shadow: none !important;
  489. box-shadow: none !important;
  490. cursor: text;
  491. top: 0em;
  492. left: 1px;
  493. width: 100%;
  494. outline: none;
  495. -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  496. padding: inherit;
  497. }
  498. /* Text Layering */
  499. .ui.search.dropdown > input.search {
  500. position: absolute;
  501. z-index: 2;
  502. }
  503. .ui.search.dropdown > .text {
  504. cursor: text;
  505. position: relative;
  506. left: 1px;
  507. z-index: 3;
  508. }
  509. /* Search Selection */
  510. .ui.search.selection.dropdown > input.search {
  511. line-height: 1.21428571em;
  512. padding: 0.67857143em 2.1em 0.67857143em 1em;
  513. }
  514. /* Used to size multi select input to character width */
  515. .ui.search.selection.dropdown > span.sizer {
  516. line-height: 1.21428571em;
  517. padding: 0.67857143em 2.1em 0.67857143em 1em;
  518. display: none;
  519. white-space: pre;
  520. }
  521. /* Active/Visible Search */
  522. .ui.search.dropdown.active > input.search,
  523. .ui.search.dropdown.visible > input.search {
  524. cursor: auto;
  525. }
  526. .ui.search.dropdown.active > .text,
  527. .ui.search.dropdown.visible > .text {
  528. pointer-events: none;
  529. }
  530. /* Filtered Text */
  531. .ui.active.search.dropdown input.search:focus + .text .icon,
  532. .ui.active.search.dropdown input.search:focus + .text .flag {
  533. opacity: 0.45;
  534. }
  535. .ui.active.search.dropdown input.search:focus + .text {
  536. color: rgba(115, 115, 115, 0.87) !important;
  537. }
  538. /* Search Menu */
  539. .ui.search.dropdown .menu {
  540. overflow-x: hidden;
  541. overflow-y: auto;
  542. -webkit-backface-visibility: hidden;
  543. backface-visibility: hidden;
  544. -webkit-overflow-scrolling: touch;
  545. }
  546. @media only screen and (max-width: 767px) {
  547. .ui.search.dropdown .menu {
  548. max-height: 8.01428571rem;
  549. }
  550. }
  551. @media only screen and (min-width: 768px) {
  552. .ui.search.dropdown .menu {
  553. max-height: 10.68571429rem;
  554. }
  555. }
  556. @media only screen and (min-width: 992px) {
  557. .ui.search.dropdown .menu {
  558. max-height: 16.02857143rem;
  559. }
  560. }
  561. @media only screen and (min-width: 1920px) {
  562. .ui.search.dropdown .menu {
  563. max-height: 21.37142857rem;
  564. }
  565. }
  566. /*--------------
  567. Multiple
  568. ---------------*/
  569. /* Multiple Selection */
  570. .ui.multiple.dropdown {
  571. padding: 0.22619048em 2.1em 0.22619048em 0.35714286em;
  572. }
  573. .ui.multiple.dropdown .menu {
  574. cursor: auto;
  575. }
  576. /* Multiple Search Selection */
  577. .ui.multiple.search.dropdown,
  578. .ui.multiple.search.dropdown > input.search {
  579. cursor: text;
  580. }
  581. /* Selection Label */
  582. .ui.multiple.dropdown > .label {
  583. -webkit-user-select: none;
  584. -moz-user-select: none;
  585. -ms-user-select: none;
  586. user-select: none;
  587. display: inline-block;
  588. vertical-align: top;
  589. white-space: normal;
  590. font-size: 1em;
  591. padding: 0.35714286em 0.78571429em;
  592. margin: 0.14285714rem 0.28571429rem 0.14285714rem 0em;
  593. -webkit-box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
  594. box-shadow: 0px 0px 0px 1px rgba(34, 36, 38, 0.15) inset;
  595. }
  596. /* Dropdown Icon */
  597. .ui.multiple.dropdown .dropdown.icon {
  598. margin: '';
  599. padding: '';
  600. }
  601. /* Text */
  602. .ui.multiple.dropdown > .text {
  603. position: static;
  604. padding: 0;
  605. max-width: 100%;
  606. margin: 0.45238095em 0em 0.45238095em 0.64285714em;
  607. line-height: 1.21428571em;
  608. }
  609. .ui.multiple.dropdown > .label ~ input.search {
  610. margin-left: 0.14285714em !important;
  611. }
  612. .ui.multiple.dropdown > .label ~ .text {
  613. display: none;
  614. }
  615. /*-----------------
  616. Multiple Search
  617. -----------------*/
  618. /* Prompt Text */
  619. .ui.multiple.search.dropdown > .text {
  620. display: inline-block;
  621. position: absolute;
  622. top: 0;
  623. left: 0;
  624. padding: inherit;
  625. margin: 0.45238095em 0em 0.45238095em 0.64285714em;
  626. line-height: 1.21428571em;
  627. }
  628. .ui.multiple.search.dropdown > .label ~ .text {
  629. display: none;
  630. }
  631. /* Search */
  632. .ui.multiple.search.dropdown > input.search {
  633. position: static;
  634. padding: 0;
  635. max-width: 100%;
  636. margin: 0.45238095em 0em 0.45238095em 0.64285714em;
  637. width: 2.2em;
  638. line-height: 1.21428571em;
  639. }
  640. /*--------------
  641. Inline
  642. ---------------*/
  643. .ui.inline.dropdown {
  644. cursor: pointer;
  645. display: inline-block;
  646. color: inherit;
  647. }
  648. .ui.inline.dropdown .dropdown.icon {
  649. margin: 0em 0.21428571em 0em 0.21428571em;
  650. vertical-align: baseline;
  651. }
  652. .ui.inline.dropdown > .text {
  653. font-weight: bold;
  654. }
  655. .ui.inline.dropdown .menu {
  656. cursor: auto;
  657. margin-top: 0.21428571em;
  658. border-radius: 0.28571429rem;
  659. }
  660. /*******************************
  661. States
  662. *******************************/
  663. /*--------------------
  664. Active
  665. ----------------------*/
  666. /* Menu Item Active */
  667. .ui.dropdown .menu .active.item {
  668. background: transparent;
  669. font-weight: bold;
  670. color: rgba(0, 0, 0, 0.95);
  671. -webkit-box-shadow: none;
  672. box-shadow: none;
  673. z-index: 12;
  674. }
  675. /*--------------------
  676. Hover
  677. ----------------------*/
  678. /* Menu Item Hover */
  679. .ui.dropdown .menu > .item:hover {
  680. background: rgba(0, 0, 0, 0.05);
  681. color: rgba(0, 0, 0, 0.95);
  682. z-index: 13;
  683. }
  684. /*--------------------
  685. Loading
  686. ---------------------*/
  687. .ui.loading.dropdown > i.icon {
  688. height: 1em !important;
  689. }
  690. .ui.loading.selection.dropdown > i.icon {
  691. padding: 1.5em 1.28571429em !important;
  692. }
  693. .ui.loading.dropdown > i.icon:before {
  694. position: absolute;
  695. content: '';
  696. top: 50%;
  697. left: 50%;
  698. margin: -0.64285714em 0em 0em -0.64285714em;
  699. width: 1.28571429em;
  700. height: 1.28571429em;
  701. border-radius: 500rem;
  702. border: 0.2em solid rgba(0, 0, 0, 0.1);
  703. }
  704. .ui.loading.dropdown > i.icon:after {
  705. position: absolute;
  706. content: '';
  707. top: 50%;
  708. left: 50%;
  709. -webkit-box-shadow: 0px 0px 0px 1px transparent;
  710. box-shadow: 0px 0px 0px 1px transparent;
  711. margin: -0.64285714em 0em 0em -0.64285714em;
  712. width: 1.28571429em;
  713. height: 1.28571429em;
  714. -webkit-animation: dropdown-spin 0.6s linear;
  715. animation: dropdown-spin 0.6s linear;
  716. -webkit-animation-iteration-count: infinite;
  717. animation-iteration-count: infinite;
  718. border-radius: 500rem;
  719. border-color: #767676 transparent transparent;
  720. border-style: solid;
  721. border-width: 0.2em;
  722. }
  723. /* Coupling */
  724. .ui.loading.dropdown.button > i.icon:before,
  725. .ui.loading.dropdown.button > i.icon:after {
  726. display: none;
  727. }
  728. @-webkit-keyframes dropdown-spin {
  729. from {
  730. -webkit-transform: rotate(0deg);
  731. transform: rotate(0deg);
  732. }
  733. to {
  734. -webkit-transform: rotate(360deg);
  735. transform: rotate(360deg);
  736. }
  737. }
  738. @keyframes dropdown-spin {
  739. from {
  740. -webkit-transform: rotate(0deg);
  741. transform: rotate(0deg);
  742. }
  743. to {
  744. -webkit-transform: rotate(360deg);
  745. transform: rotate(360deg);
  746. }
  747. }
  748. /*--------------------
  749. Default Text
  750. ----------------------*/
  751. .ui.dropdown:not(.button) > .default.text,
  752. .ui.default.dropdown:not(.button) > .text {
  753. color: rgba(191, 191, 191, 0.87);
  754. }
  755. .ui.dropdown:not(.button) > input:focus ~ .default.text,
  756. .ui.default.dropdown:not(.button) > input:focus ~ .text {
  757. color: rgba(115, 115, 115, 0.87);
  758. }
  759. /*--------------------
  760. Loading
  761. ----------------------*/
  762. .ui.loading.dropdown > .text {
  763. -webkit-transition: none;
  764. transition: none;
  765. }
  766. /* Used To Check Position */
  767. .ui.dropdown .loading.menu {
  768. display: block;
  769. visibility: hidden;
  770. z-index: -1;
  771. }
  772. .ui.dropdown > .loading.menu {
  773. left: 0px !important;
  774. right: auto !important;
  775. }
  776. .ui.dropdown > .menu .loading.menu {
  777. left: 100% !important;
  778. right: auto !important;
  779. }
  780. /*--------------------
  781. Keyboard Select
  782. ----------------------*/
  783. /* Selected Item */
  784. .ui.dropdown.selected,
  785. .ui.dropdown .menu .selected.item {
  786. background: rgba(0, 0, 0, 0.03);
  787. color: rgba(0, 0, 0, 0.95);
  788. }
  789. /*--------------------
  790. Search Filtered
  791. ----------------------*/
  792. /* Filtered Item */
  793. .ui.dropdown > .filtered.text {
  794. visibility: hidden;
  795. }
  796. .ui.dropdown .filtered.item {
  797. display: none !important;
  798. }
  799. /*--------------------
  800. Error
  801. ----------------------*/
  802. .ui.dropdown.error,
  803. .ui.dropdown.error > .text,
  804. .ui.dropdown.error > .default.text {
  805. color: #9F3A38;
  806. }
  807. .ui.selection.dropdown.error {
  808. background: #FFF6F6;
  809. border-color: #E0B4B4;
  810. }
  811. .ui.selection.dropdown.error:hover {
  812. border-color: #E0B4B4;
  813. }
  814. .ui.dropdown.error > .menu,
  815. .ui.dropdown.error > .menu .menu {
  816. border-color: #E0B4B4;
  817. }
  818. .ui.dropdown.error > .menu > .item {
  819. color: #9F3A38;
  820. }
  821. .ui.multiple.selection.error.dropdown > .label {
  822. border-color: #E0B4B4;
  823. }
  824. /* Item Hover */
  825. .ui.dropdown.error > .menu > .item:hover {
  826. background-color: #FFF2F2;
  827. }
  828. /* Item Active */
  829. .ui.dropdown.error > .menu .active.item {
  830. background-color: #FDCFCF;
  831. }
  832. /*--------------------
  833. Clear
  834. ----------------------*/
  835. .ui.dropdown > .clear.dropdown.icon {
  836. opacity: 0.8;
  837. -webkit-transition: opacity 0.1s ease;
  838. transition: opacity 0.1s ease;
  839. }
  840. .ui.dropdown > .clear.dropdown.icon:hover {
  841. opacity: 1;
  842. }
  843. /*--------------------
  844. Disabled
  845. ----------------------*/
  846. /* Disabled */
  847. .ui.disabled.dropdown,
  848. .ui.dropdown .menu > .disabled.item {
  849. cursor: default;
  850. pointer-events: none;
  851. opacity: 0.45;
  852. }
  853. /*******************************
  854. Variations
  855. *******************************/
  856. /*--------------
  857. Direction
  858. ---------------*/
  859. /* Flyout Direction */
  860. .ui.dropdown .menu {
  861. left: 0px;
  862. }
  863. /* Default Side (Right) */
  864. .ui.dropdown .right.menu > .menu,
  865. .ui.dropdown .menu .right.menu {
  866. left: 100% !important;
  867. right: auto !important;
  868. border-radius: 0.28571429rem !important;
  869. }
  870. /* Leftward Opening Menu */
  871. .ui.dropdown > .left.menu {
  872. left: auto !important;
  873. right: 0px !important;
  874. }
  875. .ui.dropdown > .left.menu .menu,
  876. .ui.dropdown .menu .left.menu {
  877. left: auto;
  878. right: 100%;
  879. margin: 0em -0.5em 0em 0em !important;
  880. border-radius: 0.28571429rem !important;
  881. }
  882. .ui.dropdown .item .left.dropdown.icon,
  883. .ui.dropdown .left.menu .item .dropdown.icon {
  884. width: auto;
  885. float: left;
  886. margin: 0em 0em 0em 0em;
  887. }
  888. .ui.dropdown .item .left.dropdown.icon,
  889. .ui.dropdown .left.menu .item .dropdown.icon {
  890. width: auto;
  891. float: left;
  892. margin: 0em 0em 0em 0em;
  893. }
  894. .ui.dropdown .item .left.dropdown.icon + .text,
  895. .ui.dropdown .left.menu .item .dropdown.icon + .text {
  896. margin-left: 1em;
  897. margin-right: 0em;
  898. }
  899. /*--------------
  900. Upward
  901. ---------------*/
  902. /* Upward Main Menu */
  903. .ui.upward.dropdown > .menu {
  904. top: auto;
  905. bottom: 100%;
  906. -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
  907. box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
  908. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  909. }
  910. /* Upward Sub Menu */
  911. .ui.dropdown .upward.menu {
  912. top: auto !important;
  913. bottom: 0 !important;
  914. }
  915. /* Active Upward */
  916. .ui.simple.upward.active.dropdown,
  917. .ui.simple.upward.dropdown:hover {
  918. border-radius: 0.28571429rem 0.28571429rem 0em 0em !important;
  919. }
  920. .ui.upward.dropdown.button:not(.pointing):not(.floating).active {
  921. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  922. }
  923. /* Selection */
  924. .ui.upward.selection.dropdown .menu {
  925. border-top-width: 1px !important;
  926. border-bottom-width: 0px !important;
  927. -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
  928. box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
  929. }
  930. .ui.upward.selection.dropdown:hover {
  931. -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
  932. box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.05);
  933. }
  934. /* Active Upward */
  935. .ui.active.upward.selection.dropdown {
  936. border-radius: 0em 0em 0.28571429rem 0.28571429rem !important;
  937. }
  938. /* Visible Upward */
  939. .ui.upward.selection.dropdown.visible {
  940. -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
  941. box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.08);
  942. border-radius: 0em 0em 0.28571429rem 0.28571429rem !important;
  943. }
  944. /* Visible Hover Upward */
  945. .ui.upward.active.selection.dropdown:hover {
  946. -webkit-box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
  947. box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.05);
  948. }
  949. .ui.upward.active.selection.dropdown:hover .menu {
  950. -webkit-box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
  951. box-shadow: 0px -2px 3px 0px rgba(0, 0, 0, 0.08);
  952. }
  953. /*--------------
  954. Simple
  955. ---------------*/
  956. /* Selection Menu */
  957. .ui.scrolling.dropdown .menu,
  958. .ui.dropdown .scrolling.menu {
  959. overflow-x: hidden;
  960. overflow-y: auto;
  961. }
  962. .ui.scrolling.dropdown .menu {
  963. overflow-x: hidden;
  964. overflow-y: auto;
  965. -webkit-backface-visibility: hidden;
  966. backface-visibility: hidden;
  967. -webkit-overflow-scrolling: touch;
  968. min-width: 100% !important;
  969. width: auto !important;
  970. }
  971. .ui.dropdown .scrolling.menu {
  972. position: static;
  973. overflow-y: auto;
  974. border: none;
  975. -webkit-box-shadow: none !important;
  976. box-shadow: none !important;
  977. border-radius: 0 !important;
  978. margin: 0 !important;
  979. min-width: 100% !important;
  980. width: auto !important;
  981. border-top: 1px solid rgba(34, 36, 38, 0.15);
  982. }
  983. .ui.scrolling.dropdown .menu .item.item.item,
  984. .ui.dropdown .scrolling.menu > .item.item.item {
  985. border-top: none;
  986. }
  987. .ui.scrolling.dropdown .menu .item:first-child,
  988. .ui.dropdown .scrolling.menu .item:first-child {
  989. border-top: none;
  990. }
  991. .ui.dropdown > .animating.menu .scrolling.menu,
  992. .ui.dropdown > .visible.menu .scrolling.menu {
  993. display: block;
  994. }
  995. /* Scrollbar in IE */
  996. @media all and (-ms-high-contrast: none) {
  997. .ui.scrolling.dropdown .menu,
  998. .ui.dropdown .scrolling.menu {
  999. min-width: calc(100% - 17px);
  1000. }
  1001. }
  1002. @media only screen and (max-width: 767px) {
  1003. .ui.scrolling.dropdown .menu,
  1004. .ui.dropdown .scrolling.menu {
  1005. max-height: 10.28571429rem;
  1006. }
  1007. }
  1008. @media only screen and (min-width: 768px) {
  1009. .ui.scrolling.dropdown .menu,
  1010. .ui.dropdown .scrolling.menu {
  1011. max-height: 15.42857143rem;
  1012. }
  1013. }
  1014. @media only screen and (min-width: 992px) {
  1015. .ui.scrolling.dropdown .menu,
  1016. .ui.dropdown .scrolling.menu {
  1017. max-height: 20.57142857rem;
  1018. }
  1019. }
  1020. @media only screen and (min-width: 1920px) {
  1021. .ui.scrolling.dropdown .menu,
  1022. .ui.dropdown .scrolling.menu {
  1023. max-height: 20.57142857rem;
  1024. }
  1025. }
  1026. /*--------------
  1027. Simple
  1028. ---------------*/
  1029. /* Displays without javascript */
  1030. .ui.simple.dropdown .menu:before,
  1031. .ui.simple.dropdown .menu:after {
  1032. display: none;
  1033. }
  1034. .ui.simple.dropdown .menu {
  1035. position: absolute;
  1036. display: block;
  1037. overflow: hidden;
  1038. top: -9999px !important;
  1039. opacity: 0;
  1040. width: 0;
  1041. height: 0;
  1042. -webkit-transition: opacity 0.1s ease;
  1043. transition: opacity 0.1s ease;
  1044. }
  1045. .ui.simple.active.dropdown,
  1046. .ui.simple.dropdown:hover {
  1047. border-bottom-left-radius: 0em !important;
  1048. border-bottom-right-radius: 0em !important;
  1049. }
  1050. .ui.simple.active.dropdown > .menu,
  1051. .ui.simple.dropdown:hover > .menu {
  1052. overflow: visible;
  1053. width: auto;
  1054. height: auto;
  1055. top: 100% !important;
  1056. opacity: 1;
  1057. }
  1058. .ui.simple.dropdown > .menu > .item:active > .menu,
  1059. .ui.simple.dropdown:hover > .menu > .item:hover > .menu {
  1060. overflow: visible;
  1061. width: auto;
  1062. height: auto;
  1063. top: 0% !important;
  1064. left: 100% !important;
  1065. opacity: 1;
  1066. }
  1067. .ui.simple.disabled.dropdown:hover .menu {
  1068. display: none;
  1069. height: 0px;
  1070. width: 0px;
  1071. overflow: hidden;
  1072. }
  1073. /* Visible */
  1074. .ui.simple.visible.dropdown > .menu {
  1075. display: block;
  1076. }
  1077. /*--------------
  1078. Fluid
  1079. ---------------*/
  1080. .ui.fluid.dropdown {
  1081. display: block;
  1082. width: 100%;
  1083. min-width: 0em;
  1084. }
  1085. .ui.fluid.dropdown > .dropdown.icon {
  1086. float: right;
  1087. }
  1088. /*--------------
  1089. Floating
  1090. ---------------*/
  1091. .ui.floating.dropdown .menu {
  1092. left: 0;
  1093. right: auto;
  1094. -webkit-box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important;
  1095. box-shadow: 0px 2px 4px 0px rgba(34, 36, 38, 0.12), 0px 2px 10px 0px rgba(34, 36, 38, 0.15) !important;
  1096. border-radius: 0.28571429rem !important;
  1097. }
  1098. .ui.floating.dropdown > .menu {
  1099. margin-top: 0.5em !important;
  1100. border-radius: 0.28571429rem !important;
  1101. }
  1102. /*--------------
  1103. Pointing
  1104. ---------------*/
  1105. .ui.pointing.dropdown > .menu {
  1106. top: 100%;
  1107. margin-top: 0.78571429rem;
  1108. border-radius: 0.28571429rem;
  1109. }
  1110. .ui.pointing.dropdown > .menu:after {
  1111. display: block;
  1112. position: absolute;
  1113. pointer-events: none;
  1114. content: '';
  1115. visibility: visible;
  1116. -webkit-transform: rotate(45deg);
  1117. transform: rotate(45deg);
  1118. width: 0.5em;
  1119. height: 0.5em;
  1120. -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1121. box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1122. background: #FFFFFF;
  1123. z-index: 2;
  1124. }
  1125. .ui.pointing.dropdown > .menu:after {
  1126. top: -0.25em;
  1127. left: 50%;
  1128. margin: 0em 0em 0em -0.25em;
  1129. }
  1130. /* Top Left Pointing */
  1131. .ui.top.left.pointing.dropdown > .menu {
  1132. top: 100%;
  1133. bottom: auto;
  1134. left: 0%;
  1135. right: auto;
  1136. margin: 1em 0em 0em;
  1137. }
  1138. .ui.top.left.pointing.dropdown > .menu {
  1139. top: 100%;
  1140. bottom: auto;
  1141. left: 0%;
  1142. right: auto;
  1143. margin: 1em 0em 0em;
  1144. }
  1145. .ui.top.left.pointing.dropdown > .menu:after {
  1146. top: -0.25em;
  1147. left: 1em;
  1148. right: auto;
  1149. margin: 0em;
  1150. -webkit-transform: rotate(45deg);
  1151. transform: rotate(45deg);
  1152. }
  1153. /* Top Right Pointing */
  1154. .ui.top.right.pointing.dropdown > .menu {
  1155. top: 100%;
  1156. bottom: auto;
  1157. right: 0%;
  1158. left: auto;
  1159. margin: 1em 0em 0em;
  1160. }
  1161. .ui.top.pointing.dropdown > .left.menu:after,
  1162. .ui.top.right.pointing.dropdown > .menu:after {
  1163. top: -0.25em;
  1164. left: auto !important;
  1165. right: 1em !important;
  1166. margin: 0em;
  1167. -webkit-transform: rotate(45deg);
  1168. transform: rotate(45deg);
  1169. }
  1170. /* Left Pointing */
  1171. .ui.left.pointing.dropdown > .menu {
  1172. top: 0%;
  1173. left: 100%;
  1174. right: auto;
  1175. margin: 0em 0em 0em 1em;
  1176. }
  1177. .ui.left.pointing.dropdown > .menu:after {
  1178. top: 1em;
  1179. left: -0.25em;
  1180. margin: 0em 0em 0em 0em;
  1181. -webkit-transform: rotate(-45deg);
  1182. transform: rotate(-45deg);
  1183. }
  1184. .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu {
  1185. left: auto !important;
  1186. right: 100% !important;
  1187. margin: 0em 1em 0em 0em;
  1188. }
  1189. .ui.left:not(.top):not(.bottom).pointing.dropdown > .left.menu:after {
  1190. top: 1em;
  1191. left: auto;
  1192. right: -0.25em;
  1193. margin: 0em 0em 0em 0em;
  1194. -webkit-transform: rotate(135deg);
  1195. transform: rotate(135deg);
  1196. }
  1197. /* Right Pointing */
  1198. .ui.right.pointing.dropdown > .menu {
  1199. top: 0%;
  1200. left: auto;
  1201. right: 100%;
  1202. margin: 0em 1em 0em 0em;
  1203. }
  1204. .ui.right.pointing.dropdown > .menu:after {
  1205. top: 1em;
  1206. left: auto;
  1207. right: -0.25em;
  1208. margin: 0em 0em 0em 0em;
  1209. -webkit-transform: rotate(135deg);
  1210. transform: rotate(135deg);
  1211. }
  1212. /* Bottom Pointing */
  1213. .ui.bottom.pointing.dropdown > .menu {
  1214. top: auto;
  1215. bottom: 100%;
  1216. left: 0%;
  1217. right: auto;
  1218. margin: 0em 0em 1em;
  1219. }
  1220. .ui.bottom.pointing.dropdown > .menu:after {
  1221. top: auto;
  1222. bottom: -0.25em;
  1223. right: auto;
  1224. margin: 0em;
  1225. -webkit-transform: rotate(-135deg);
  1226. transform: rotate(-135deg);
  1227. }
  1228. /* Reverse Sub-Menu Direction */
  1229. .ui.bottom.pointing.dropdown > .menu .menu {
  1230. top: auto !important;
  1231. bottom: 0px !important;
  1232. }
  1233. /* Bottom Left */
  1234. .ui.bottom.left.pointing.dropdown > .menu {
  1235. left: 0%;
  1236. right: auto;
  1237. }
  1238. .ui.bottom.left.pointing.dropdown > .menu:after {
  1239. left: 1em;
  1240. right: auto;
  1241. }
  1242. /* Bottom Right */
  1243. .ui.bottom.right.pointing.dropdown > .menu {
  1244. right: 0%;
  1245. left: auto;
  1246. }
  1247. .ui.bottom.right.pointing.dropdown > .menu:after {
  1248. left: auto;
  1249. right: 1em;
  1250. }
  1251. /* Upward pointing */
  1252. .ui.pointing.upward.dropdown .menu,
  1253. .ui.top.pointing.upward.dropdown .menu {
  1254. top: auto !important;
  1255. bottom: 100% !important;
  1256. margin: 0em 0em 0.78571429rem;
  1257. border-radius: 0.28571429rem;
  1258. }
  1259. .ui.pointing.upward.dropdown .menu:after,
  1260. .ui.top.pointing.upward.dropdown .menu:after {
  1261. top: 100% !important;
  1262. bottom: auto !important;
  1263. -webkit-box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15);
  1264. box-shadow: 1px 1px 0px 0px rgba(34, 36, 38, 0.15);
  1265. margin: -0.25em 0em 0em;
  1266. }
  1267. /* Right Pointing Upward */
  1268. .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
  1269. top: auto !important;
  1270. bottom: 0 !important;
  1271. margin: 0em 1em 0em 0em;
  1272. }
  1273. .ui.right.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
  1274. top: auto !important;
  1275. bottom: 0 !important;
  1276. margin: 0em 0em 1em 0em;
  1277. -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1278. box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1279. }
  1280. /* Left Pointing Upward */
  1281. .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu {
  1282. top: auto !important;
  1283. bottom: 0 !important;
  1284. margin: 0em 0em 0em 1em;
  1285. }
  1286. .ui.left.pointing.upward.dropdown:not(.top):not(.bottom) .menu:after {
  1287. top: auto !important;
  1288. bottom: 0 !important;
  1289. margin: 0em 0em 1em 0em;
  1290. -webkit-box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1291. box-shadow: -1px -1px 0px 0px rgba(34, 36, 38, 0.15);
  1292. }
  1293. /*******************************
  1294. Theme Overrides
  1295. *******************************/
  1296. /* Dropdown Carets */
  1297. @font-face {
  1298. font-family: 'Dropdown';
  1299. src: url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAVgAA8AAAAACFAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABWAAAABwAAAAchGgaq0dERUYAAAF0AAAAHAAAAB4AJwAPT1MvMgAAAZAAAABDAAAAVnW4TJdjbWFwAAAB1AAAAEsAAAFS8CcaqmN2dCAAAAIgAAAABAAAAAQAEQFEZ2FzcAAAAiQAAAAIAAAACP//AANnbHlmAAACLAAAAQoAAAGkrRHP9WhlYWQAAAM4AAAAMAAAADYPK8YyaGhlYQAAA2gAAAAdAAAAJANCAb1obXR4AAADiAAAACIAAAAiCBkAOGxvY2EAAAOsAAAAFAAAABQBnAIybWF4cAAAA8AAAAAfAAAAIAEVAF5uYW1lAAAD4AAAATAAAAKMFGlj5HBvc3QAAAUQAAAARgAAAHJoedjqd2ViZgAABVgAAAAGAAAABrO7W5UAAAABAAAAANXulPUAAAAA1r4hgAAAAADXu2Q1eNpjYGRgYOABYjEgZmJgBEIOIGYB8xgAA/YAN3jaY2BktGOcwMDKwMI4jTGNgYHBHUp/ZZBkaGFgYGJgZWbACgLSXFMYHFT/fLjFeOD/AQY9xjMMbkBhRpAcAN48DQYAeNpjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETAwMqn8+8H649f8/lHX9//9b7Pzf+fWgusCAkY0BzmUE6gHpQwGMDMMeAACbxg7SAAARAUQAAAAB//8AAnjadZBPSsNAGMXfS+yMqYgOhpSuSlKadmUhiVEhEMQzFF22m17BbbvzCh5BXCUn6EG8gjeQ4DepwYo4i+/ffL95j4EDA+CFC7jQuKyIeVHrI3wkleq9F7XrSInKteOeHdda8bOoaeepSc00NWPz/LRec9G8GabyGtEdF7h19z033GAMTK7zbM42xNEZpzYof0RtQ5CUHAQJ73OtVyutc+3b7Ou//b8XNlsPx3jgjUifABdhEohKJJL5iM5p39uqc7X1+sRQSqmGrUVhlsJ4lpmEUVwyT8SUYtg0P9DyNzPADDs+tjrGV6KRCRfsui3eHcL4/p8ZXvfMlcnEU+CLv7hDykOP+AKTPTxbAAB42mNgZGBgAGKuf5KP4vltvjLIMzGAwLV9ig0g+vruFFMQzdjACOJzMIClARh0CTJ42mNgZGBgPPD/AJD8wgAEjA0MjAyogAMAbOQEAQAAAAC7ABEAAAAAAKoAAAH0AAABgAAAAUAACAFAAAgAwAAXAAAAAAAAACoAKgAqADIAbACGAKAAugDSeNpjYGRgYOBkUGFgYgABEMkFhAwM/xn0QAIADdUBdAB42qWQvUoDQRSFv3GjaISUQaymSmGxJoGAsRC0iPYLsU50Y6IxrvlRtPCJJKUPIBb+PIHv4EN4djKuKAqCDHfmu+feOdwZoMCUAJNbAlYUMzaUlM14jjxbngOq7HnOia89z1Pk1vMCa9x7ztPkzfMyJbPj+ZGi6Xp+omxuPD+zaD7meaFg7mb8GrBqHmhwxoAxlm0uiRkpP9X5m26pKRoMxTGR1D49Dv/Yb/91o6l8qL6eu5n2hZQzn68utR9m3FU2cB4t9cdSLG2utI+44Eh/P9bqKO+oJ/WxmXssj77YkrjasZQD6SFddythk3Wtzrf+UF2p076Udla1VNzsERP3kkjVRKel7mp1udXYcHtZSlV7RfmJe1GiFWveluaeKD5/MuJcSk8Tpm/vvwPIbmJleNpjYGKAAFYG7ICTgYGRiZGZkYWRlZGNkZ2Rg5GTLT2nsiDDEEIZsZfmZRqZujmDaDcDAxcI7WIOpS2gtCWUdgQAZkcSmQAAAAFblbO6AAA=) format('woff');
  1300. font-weight: normal;
  1301. font-style: normal;
  1302. }
  1303. .ui.dropdown > .dropdown.icon {
  1304. font-family: 'Dropdown';
  1305. line-height: 1;
  1306. height: 1em;
  1307. width: 1.23em;
  1308. -webkit-backface-visibility: hidden;
  1309. backface-visibility: hidden;
  1310. font-weight: normal;
  1311. font-style: normal;
  1312. text-align: center;
  1313. }
  1314. .ui.dropdown > .dropdown.icon {
  1315. width: auto;
  1316. }
  1317. .ui.dropdown > .dropdown.icon:before {
  1318. content: '\f0d7';
  1319. }
  1320. /* Sub Menu */
  1321. .ui.dropdown .menu .item .dropdown.icon:before {
  1322. content: '\f0da' /*rtl:'\f0d9'*/;
  1323. }
  1324. .ui.dropdown .item .left.dropdown.icon:before,
  1325. .ui.dropdown .left.menu .item .dropdown.icon:before {
  1326. content: "\f0d9" /*rtl:"\f0da"*/;
  1327. }
  1328. /* Vertical Menu Dropdown */
  1329. .ui.vertical.menu .dropdown.item > .dropdown.icon:before {
  1330. content: "\f0da" /*rtl:"\f0d9"*/;
  1331. }
  1332. .ui.dropdown > .clear.icon:before {
  1333. content: "\f00d";
  1334. }
  1335. /* Icons for Reference (Subsetted in 2.4.0)
  1336. .dropdown.down:before { content: "\f0d7"; }
  1337. .dropdown.up:before { content: "\f0d8"; }
  1338. .dropdown.left:before { content: "\f0d9"; }
  1339. .dropdown.right:before { content: "\f0da"; }
  1340. .dropdown.close:before { content: "\f00d"; }
  1341. */
  1342. /*******************************
  1343. User Overrides
  1344. *******************************/