menu.css 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020
  1. /*
  2. * # Semantic - Menu
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11. /*******************************
  12. Standard
  13. *******************************/
  14. /*--------------
  15. Menu
  16. ---------------*/
  17. .ui.menu {
  18. display: -webkit-box;
  19. display: -webkit-flex;
  20. display: -ms-flexbox;
  21. display: flex;
  22. margin: 1rem 0em;
  23. font-family: 'Lato', 'Helvetica Neue', Arial, Helvetica, sans-serif;
  24. background: #FFFFFF;
  25. font-weight: normal;
  26. border: 1px solid rgba(34, 36, 38, 0.15);
  27. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  28. border-radius: 0.28571429rem;
  29. min-height: 2.85714286em;
  30. }
  31. .ui.menu:after {
  32. content: '';
  33. display: block;
  34. height: 0px;
  35. clear: both;
  36. visibility: hidden;
  37. }
  38. .ui.menu:first-child {
  39. margin-top: 0rem;
  40. }
  41. .ui.menu:last-child {
  42. margin-bottom: 0rem;
  43. }
  44. /*--------------
  45. Sub-Menu
  46. ---------------*/
  47. .ui.menu .menu {
  48. margin: 0em;
  49. }
  50. .ui.menu:not(.vertical) > .menu {
  51. display: -webkit-box;
  52. display: -webkit-flex;
  53. display: -ms-flexbox;
  54. display: flex;
  55. }
  56. /*--------------
  57. Item
  58. ---------------*/
  59. .ui.menu:not(.vertical) .item {
  60. display: -webkit-box;
  61. display: -webkit-flex;
  62. display: -ms-flexbox;
  63. display: flex;
  64. -webkit-box-align: center;
  65. -webkit-align-items: center;
  66. -ms-flex-align: center;
  67. align-items: center;
  68. }
  69. .ui.menu .item {
  70. position: relative;
  71. vertical-align: middle;
  72. line-height: 1;
  73. text-decoration: none;
  74. -webkit-tap-highlight-color: transparent;
  75. -webkit-box-flex: 0;
  76. -webkit-flex: 0 0 auto;
  77. -ms-flex: 0 0 auto;
  78. flex: 0 0 auto;
  79. -webkit-user-select: none;
  80. -moz-user-select: none;
  81. -ms-user-select: none;
  82. user-select: none;
  83. background: none;
  84. padding: 0.92857143em 1.14285714em;
  85. text-transform: none;
  86. color: rgba(0, 0, 0, 0.87);
  87. font-weight: normal;
  88. -webkit-transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  89. transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  90. }
  91. .ui.menu > .item:first-child {
  92. border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  93. }
  94. /* Border */
  95. .ui.menu .item:before {
  96. position: absolute;
  97. content: '';
  98. top: 0%;
  99. right: 0px;
  100. height: 100%;
  101. width: 1px;
  102. background: rgba(34, 36, 38, 0.1);
  103. }
  104. /*--------------
  105. Text Content
  106. ---------------*/
  107. .ui.menu .text.item > *,
  108. .ui.menu .item > a:not(.ui),
  109. .ui.menu .item > p:only-child {
  110. -webkit-user-select: text;
  111. -moz-user-select: text;
  112. -ms-user-select: text;
  113. user-select: text;
  114. line-height: 1.3;
  115. }
  116. .ui.menu .item > p:first-child {
  117. margin-top: 0;
  118. }
  119. .ui.menu .item > p:last-child {
  120. margin-bottom: 0;
  121. }
  122. /*--------------
  123. Icons
  124. ---------------*/
  125. .ui.menu .item > i.icon {
  126. opacity: 0.9;
  127. float: none;
  128. margin: 0em 0.35714286em 0em 0em;
  129. }
  130. /*--------------
  131. Button
  132. ---------------*/
  133. .ui.menu:not(.vertical) .item > .button {
  134. position: relative;
  135. top: 0em;
  136. margin: -0.5em 0em;
  137. padding-bottom: 0.78571429em;
  138. padding-top: 0.78571429em;
  139. font-size: 1em;
  140. }
  141. /*----------------
  142. Grid / Container
  143. -----------------*/
  144. .ui.menu > .grid,
  145. .ui.menu > .container {
  146. display: -webkit-box;
  147. display: -webkit-flex;
  148. display: -ms-flexbox;
  149. display: flex;
  150. -webkit-box-align: inherit;
  151. -webkit-align-items: inherit;
  152. -ms-flex-align: inherit;
  153. align-items: inherit;
  154. -webkit-box-orient: vertical;
  155. -webkit-box-direction: normal;
  156. -webkit-flex-direction: inherit;
  157. -ms-flex-direction: inherit;
  158. flex-direction: inherit;
  159. }
  160. /*--------------
  161. Inputs
  162. ---------------*/
  163. .ui.menu .item > .input {
  164. width: 100%;
  165. }
  166. .ui.menu:not(.vertical) .item > .input {
  167. position: relative;
  168. top: 0em;
  169. margin: -0.5em 0em;
  170. }
  171. .ui.menu .item > .input input {
  172. font-size: 1em;
  173. padding-top: 0.57142857em;
  174. padding-bottom: 0.57142857em;
  175. }
  176. /*--------------
  177. Header
  178. ---------------*/
  179. .ui.menu .header.item,
  180. .ui.vertical.menu .header.item {
  181. margin: 0em;
  182. background: '';
  183. text-transform: normal;
  184. font-weight: bold;
  185. }
  186. .ui.vertical.menu .item > .header:not(.ui) {
  187. margin: 0em 0em 0.5em;
  188. font-size: 1em;
  189. font-weight: bold;
  190. }
  191. /*--------------
  192. Dropdowns
  193. ---------------*/
  194. /* Dropdown Icon */
  195. .ui.menu .item > i.dropdown.icon {
  196. padding: 0em;
  197. float: right;
  198. margin: 0em 0em 0em 1em;
  199. }
  200. /* Menu */
  201. .ui.menu .dropdown.item .menu {
  202. left: 0px;
  203. min-width: calc(100% - 1px);
  204. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  205. background: #FFFFFF;
  206. margin: 0em 0px 0px;
  207. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  208. -webkit-box-orient: vertical !important;
  209. -webkit-box-direction: normal !important;
  210. -webkit-flex-direction: column !important;
  211. -ms-flex-direction: column !important;
  212. flex-direction: column !important;
  213. }
  214. /* Menu Items */
  215. .ui.menu .ui.dropdown .menu > .item {
  216. margin: 0;
  217. text-align: left;
  218. font-size: 1em !important;
  219. padding: 0.78571429em 1.14285714em !important;
  220. background: transparent !important;
  221. color: rgba(0, 0, 0, 0.87) !important;
  222. text-transform: none !important;
  223. font-weight: normal !important;
  224. box-shadow: none !important;
  225. -webkit-transition: none !important;
  226. transition: none !important;
  227. }
  228. .ui.menu .ui.dropdown .menu > .item:hover {
  229. background: rgba(0, 0, 0, 0.05) !important;
  230. color: rgba(0, 0, 0, 0.95) !important;
  231. }
  232. .ui.menu .ui.dropdown .menu > .selected.item {
  233. background: rgba(0, 0, 0, 0.05) !important;
  234. color: rgba(0, 0, 0, 0.95) !important;
  235. }
  236. .ui.menu .ui.dropdown .menu > .active.item {
  237. background: rgba(0, 0, 0, 0.03) !important;
  238. font-weight: bold !important;
  239. color: rgba(0, 0, 0, 0.95) !important;
  240. }
  241. .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
  242. display: block;
  243. }
  244. .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
  245. display: inline-block;
  246. font-size: 1em !important;
  247. float: none;
  248. margin: 0em 0.75em 0em 0em;
  249. }
  250. /* Secondary */
  251. .ui.secondary.menu .dropdown.item > .menu,
  252. .ui.text.menu .dropdown.item > .menu {
  253. border-radius: 0.28571429rem;
  254. margin-top: 0.35714286em;
  255. }
  256. /* Pointing */
  257. .ui.menu .pointing.dropdown.item .menu {
  258. margin-top: 0.75em;
  259. }
  260. /* Inverted */
  261. .ui.inverted.menu .search.dropdown.item > .search,
  262. .ui.inverted.menu .search.dropdown.item > .text {
  263. color: rgba(255, 255, 255, 0.9);
  264. }
  265. /* Vertical */
  266. .ui.vertical.menu .dropdown.item > .icon {
  267. float: right;
  268. content: "\f0da";
  269. margin-left: 1em;
  270. }
  271. .ui.vertical.menu .dropdown.item .menu {
  272. left: 100%;
  273. min-width: 0;
  274. margin: 0em 0em 0em 0em;
  275. box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  276. border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem;
  277. }
  278. .ui.vertical.menu .dropdown.item.upward .menu {
  279. bottom: 0;
  280. }
  281. .ui.vertical.menu .dropdown.item:not(.upward) .menu {
  282. top: 0;
  283. }
  284. .ui.vertical.menu .active.dropdown.item {
  285. border-top-right-radius: 0em;
  286. border-bottom-right-radius: 0em;
  287. }
  288. .ui.vertical.menu .dropdown.active.item {
  289. box-shadow: none;
  290. }
  291. /* Evenly Divided */
  292. .ui.item.menu .dropdown .menu .item {
  293. width: 100%;
  294. }
  295. /*--------------
  296. Labels
  297. ---------------*/
  298. .ui.menu .item > .label {
  299. background: #999999;
  300. color: #FFFFFF;
  301. margin-left: 1em;
  302. padding: 0.3em 0.78571429em;
  303. }
  304. .ui.vertical.menu .item > .label {
  305. background: #999999;
  306. color: #FFFFFF;
  307. margin-top: -0.15em;
  308. margin-bottom: -0.15em;
  309. padding: 0.3em 0.78571429em;
  310. }
  311. .ui.menu .item > .floating.label {
  312. padding: 0.3em 0.78571429em;
  313. }
  314. /*--------------
  315. Images
  316. ---------------*/
  317. .ui.menu .item > img:not(.ui) {
  318. display: inline-block;
  319. vertical-align: middle;
  320. margin: -0.3em 0em;
  321. width: 2.5em;
  322. }
  323. .ui.vertical.menu .item > img:not(.ui):only-child {
  324. display: block;
  325. max-width: 100%;
  326. width: auto;
  327. }
  328. /*******************************
  329. Coupling
  330. *******************************/
  331. /*--------------
  332. Sidebar
  333. ---------------*/
  334. /* Show vertical dividers below last */
  335. .ui.vertical.sidebar.menu > .item:first-child:before {
  336. display: block !important;
  337. }
  338. .ui.vertical.sidebar.menu > .item::before {
  339. top: auto;
  340. bottom: 0px;
  341. }
  342. /*--------------
  343. Container
  344. ---------------*/
  345. @media only screen and (max-width: 767px) {
  346. .ui.menu > .ui.container {
  347. width: 100% !important;
  348. margin-left: 0em !important;
  349. margin-right: 0em !important;
  350. }
  351. }
  352. @media only screen and (min-width: 768px) {
  353. .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
  354. border-left: 1px solid rgba(34, 36, 38, 0.1);
  355. }
  356. }
  357. /*******************************
  358. States
  359. *******************************/
  360. /*--------------
  361. Hover
  362. ---------------*/
  363. .ui.link.menu .item:hover,
  364. .ui.menu .dropdown.item:hover,
  365. .ui.menu .link.item:hover,
  366. .ui.menu a.item:hover {
  367. cursor: pointer;
  368. background: rgba(0, 0, 0, 0.03);
  369. color: rgba(0, 0, 0, 0.95);
  370. }
  371. /*--------------
  372. Pressed
  373. ---------------*/
  374. .ui.link.menu .item:active,
  375. .ui.menu .link.item:active,
  376. .ui.menu a.item:active {
  377. background: rgba(0, 0, 0, 0.03);
  378. color: rgba(0, 0, 0, 0.95);
  379. }
  380. /*--------------
  381. Active
  382. ---------------*/
  383. .ui.menu .active.item {
  384. background: rgba(0, 0, 0, 0.05);
  385. color: rgba(0, 0, 0, 0.95);
  386. font-weight: normal;
  387. box-shadow: none;
  388. }
  389. .ui.menu .active.item > i.icon {
  390. opacity: 1;
  391. }
  392. /*--------------
  393. Active Hover
  394. ---------------*/
  395. .ui.menu .active.item:hover,
  396. .ui.vertical.menu .active.item:hover {
  397. background-color: rgba(0, 0, 0, 0.05);
  398. color: rgba(0, 0, 0, 0.95);
  399. }
  400. /*--------------
  401. Disabled
  402. ---------------*/
  403. .ui.menu .item.disabled,
  404. .ui.menu .item.disabled:hover {
  405. cursor: default;
  406. background-color: transparent !important;
  407. color: rgba(40, 40, 40, 0.3);
  408. }
  409. /*******************************
  410. Types
  411. *******************************/
  412. /*------------------
  413. Floated Menu / Item
  414. -------------------*/
  415. /* Left Floated */
  416. .ui.menu:not(.vertical) .left.item,
  417. .ui.menu:not(.vertical) .left.menu {
  418. display: -webkit-box;
  419. display: -webkit-flex;
  420. display: -ms-flexbox;
  421. display: flex;
  422. margin-right: auto !important;
  423. }
  424. /* Right Floated */
  425. .ui.menu:not(.vertical) .right.item,
  426. .ui.menu:not(.vertical) .right.menu {
  427. display: -webkit-box;
  428. display: -webkit-flex;
  429. display: -ms-flexbox;
  430. display: flex;
  431. margin-left: auto !important;
  432. }
  433. /* Swapped Borders */
  434. .ui.menu .right.item::before,
  435. .ui.menu .right.menu > .item::before {
  436. right: auto;
  437. left: 0;
  438. }
  439. /*--------------
  440. Vertical
  441. ---------------*/
  442. .ui.vertical.menu {
  443. display: block;
  444. -webkit-box-orient: vertical;
  445. -webkit-box-direction: normal;
  446. -webkit-flex-direction: column;
  447. -ms-flex-direction: column;
  448. flex-direction: column;
  449. background: #FFFFFF;
  450. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  451. }
  452. /*--- Item ---*/
  453. .ui.vertical.menu .item {
  454. display: block;
  455. background: none;
  456. border-top: none;
  457. border-right: none;
  458. }
  459. .ui.vertical.menu > .item:first-child {
  460. border-radius: 0.28571429rem 0.28571429rem 0px 0px;
  461. }
  462. .ui.vertical.menu > .item:last-child {
  463. border-radius: 0px 0px 0.28571429rem 0.28571429rem;
  464. }
  465. /*--- Label ---*/
  466. .ui.vertical.menu .item > .label {
  467. float: right;
  468. text-align: center;
  469. }
  470. /*--- Icon ---*/
  471. .ui.vertical.menu .item > i.icon {
  472. width: 1.18em;
  473. float: right;
  474. margin: 0em 0em 0em 0.5em;
  475. }
  476. .ui.vertical.menu .item > .label + i.icon {
  477. float: none;
  478. margin: 0em 0.5em 0em 0em;
  479. }
  480. /*--- Border ---*/
  481. .ui.vertical.menu .item:before {
  482. position: absolute;
  483. content: '';
  484. top: 0%;
  485. left: 0px;
  486. width: 100%;
  487. height: 1px;
  488. background: rgba(34, 36, 38, 0.1);
  489. }
  490. .ui.vertical.menu .item:first-child:before {
  491. display: none !important;
  492. }
  493. /*--- Sub Menu ---*/
  494. .ui.vertical.menu .item > .menu {
  495. margin: 0.5em -1.14285714em 0em;
  496. }
  497. .ui.vertical.menu .menu .item {
  498. background: none;
  499. padding: 0.5em 1.33333333em;
  500. font-size: 0.85714286em;
  501. color: rgba(0, 0, 0, 0.5);
  502. }
  503. .ui.vertical.menu .item .menu a.item:hover,
  504. .ui.vertical.menu .item .menu .link.item:hover {
  505. color: rgba(0, 0, 0, 0.85);
  506. }
  507. .ui.vertical.menu .menu .item:before {
  508. display: none;
  509. }
  510. /* Vertical Active */
  511. .ui.vertical.menu .active.item {
  512. background: rgba(0, 0, 0, 0.05);
  513. border-radius: 0em;
  514. box-shadow: none;
  515. }
  516. .ui.vertical.menu > .active.item:first-child {
  517. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  518. }
  519. .ui.vertical.menu > .active.item:last-child {
  520. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  521. }
  522. .ui.vertical.menu > .active.item:only-child {
  523. border-radius: 0.28571429rem;
  524. }
  525. .ui.vertical.menu .active.item .menu .active.item {
  526. border-left: none;
  527. }
  528. .ui.vertical.menu .item .menu .active.item {
  529. background-color: transparent;
  530. font-weight: bold;
  531. color: rgba(0, 0, 0, 0.95);
  532. }
  533. /*--------------
  534. Tabular
  535. ---------------*/
  536. .ui.tabular.menu {
  537. border-radius: 0em;
  538. box-shadow: none !important;
  539. border: none;
  540. background: none transparent;
  541. border-bottom: 1px solid #D4D4D5;
  542. }
  543. .ui.tabular.fluid.menu {
  544. width: calc(100% + 2px ) !important;
  545. }
  546. .ui.tabular.menu .item {
  547. background: transparent;
  548. border-bottom: none;
  549. border-left: 1px solid transparent;
  550. border-right: 1px solid transparent;
  551. border-top: 2px solid transparent;
  552. padding: 0.92857143em 1.42857143em;
  553. color: rgba(0, 0, 0, 0.87);
  554. }
  555. .ui.tabular.menu .item:before {
  556. display: none;
  557. }
  558. /* Hover */
  559. .ui.tabular.menu .item:hover {
  560. background-color: transparent;
  561. color: rgba(0, 0, 0, 0.8);
  562. }
  563. /* Active */
  564. .ui.tabular.menu .active.item {
  565. background: none #FFFFFF;
  566. color: rgba(0, 0, 0, 0.95);
  567. border-top-width: 1px;
  568. border-color: #D4D4D5;
  569. font-weight: bold;
  570. margin-bottom: -1px;
  571. box-shadow: none;
  572. border-radius: 0.28571429rem 0.28571429rem 0px 0px !important;
  573. }
  574. /* Coupling with segment for attachment */
  575. .ui.tabular.menu + .attached:not(.top).segment,
  576. .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
  577. border-top: none;
  578. margin-left: 0px;
  579. margin-top: 0px;
  580. margin-right: 0px;
  581. width: 100%;
  582. }
  583. .top.attached.segment + .ui.bottom.tabular.menu {
  584. position: relative;
  585. width: calc(100% + 2px );
  586. left: -1px;
  587. }
  588. /* Bottom Vertical Tabular */
  589. .ui.bottom.tabular.menu {
  590. background: none transparent;
  591. border-radius: 0em;
  592. box-shadow: none !important;
  593. border-bottom: none;
  594. border-top: 1px solid #D4D4D5;
  595. }
  596. .ui.bottom.tabular.menu .item {
  597. background: none;
  598. border-left: 1px solid transparent;
  599. border-right: 1px solid transparent;
  600. border-bottom: 1px solid transparent;
  601. border-top: none;
  602. }
  603. .ui.bottom.tabular.menu .active.item {
  604. background: none #FFFFFF;
  605. color: rgba(0, 0, 0, 0.95);
  606. border-color: #D4D4D5;
  607. margin: -1px 0px 0px 0px;
  608. border-radius: 0px 0px 0.28571429rem 0.28571429rem !important;
  609. }
  610. /* Vertical Tabular (Left) */
  611. .ui.vertical.tabular.menu {
  612. background: none transparent;
  613. border-radius: 0em;
  614. box-shadow: none !important;
  615. border-bottom: none;
  616. border-right: 1px solid #D4D4D5;
  617. }
  618. .ui.vertical.tabular.menu .item {
  619. background: none;
  620. border-left: 1px solid transparent;
  621. border-bottom: 1px solid transparent;
  622. border-top: 1px solid transparent;
  623. border-right: none;
  624. }
  625. .ui.vertical.tabular.menu .active.item {
  626. background: none #FFFFFF;
  627. color: rgba(0, 0, 0, 0.95);
  628. border-color: #D4D4D5;
  629. margin: 0px -1px 0px 0px;
  630. border-radius: 0.28571429rem 0px 0px 0.28571429rem !important;
  631. }
  632. /* Vertical Right Tabular */
  633. .ui.vertical.right.tabular.menu {
  634. background: none transparent;
  635. border-radius: 0em;
  636. box-shadow: none !important;
  637. border-bottom: none;
  638. border-right: none;
  639. border-left: 1px solid #D4D4D5;
  640. }
  641. .ui.vertical.right.tabular.menu .item {
  642. background: none;
  643. border-right: 1px solid transparent;
  644. border-bottom: 1px solid transparent;
  645. border-top: 1px solid transparent;
  646. border-left: none;
  647. }
  648. .ui.vertical.right.tabular.menu .active.item {
  649. background: none #FFFFFF;
  650. color: rgba(0, 0, 0, 0.95);
  651. border-color: #D4D4D5;
  652. margin: 0px 0px 0px -1px;
  653. border-radius: 0px 0.28571429rem 0.28571429rem 0px !important;
  654. }
  655. /* Dropdown */
  656. .ui.tabular.menu .active.dropdown.item {
  657. margin-bottom: 0px;
  658. border-left: 1px solid transparent;
  659. border-right: 1px solid transparent;
  660. border-top: 2px solid transparent;
  661. border-bottom: none;
  662. }
  663. /*--------------
  664. Pagination
  665. ---------------*/
  666. .ui.pagination.menu {
  667. margin: 0em;
  668. display: -webkit-inline-box;
  669. display: -webkit-inline-flex;
  670. display: -ms-inline-flexbox;
  671. display: inline-flex;
  672. vertical-align: middle;
  673. }
  674. .ui.pagination.menu .item:last-child {
  675. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  676. }
  677. .ui.compact.menu .item:last-child {
  678. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  679. }
  680. .ui.pagination.menu .item:last-child:before {
  681. display: none;
  682. }
  683. .ui.pagination.menu .item {
  684. min-width: 3em;
  685. text-align: center;
  686. }
  687. .ui.pagination.menu .icon.item i.icon {
  688. vertical-align: top;
  689. }
  690. /* Active */
  691. .ui.pagination.menu .active.item {
  692. border-top: none;
  693. padding-top: 0.92857143em;
  694. background-color: rgba(0, 0, 0, 0.05);
  695. color: rgba(0, 0, 0, 0.95);
  696. box-shadow: none;
  697. }
  698. /*--------------
  699. Secondary
  700. ---------------*/
  701. .ui.secondary.menu {
  702. background: none;
  703. margin-left: -0.35714286em;
  704. margin-right: -0.35714286em;
  705. border-radius: 0em;
  706. border: none;
  707. box-shadow: none;
  708. }
  709. /* Item */
  710. .ui.secondary.menu .item {
  711. -webkit-align-self: center;
  712. -ms-flex-item-align: center;
  713. align-self: center;
  714. box-shadow: none;
  715. border: none;
  716. padding: 0.78571429em 0.92857143em;
  717. margin: 0em 0.35714286em;
  718. background: none;
  719. -webkit-transition: color 0.1s ease;
  720. transition: color 0.1s ease;
  721. border-radius: 0.28571429rem;
  722. }
  723. /* No Divider */
  724. .ui.secondary.menu .item:before {
  725. display: none !important;
  726. }
  727. /* Header */
  728. .ui.secondary.menu .header.item {
  729. border-radius: 0em;
  730. border-right: none;
  731. background: none transparent;
  732. }
  733. /* Image */
  734. .ui.secondary.menu .item > img:not(.ui) {
  735. margin: 0em;
  736. }
  737. /* Hover */
  738. .ui.secondary.menu .dropdown.item:hover,
  739. .ui.secondary.menu .link.item:hover,
  740. .ui.secondary.menu a.item:hover {
  741. background: rgba(0, 0, 0, 0.05);
  742. color: rgba(0, 0, 0, 0.95);
  743. }
  744. /* Active */
  745. .ui.secondary.menu .active.item {
  746. box-shadow: none;
  747. background: rgba(0, 0, 0, 0.05);
  748. color: rgba(0, 0, 0, 0.95);
  749. border-radius: 0.28571429rem;
  750. }
  751. /* Active Hover */
  752. .ui.secondary.menu .active.item:hover {
  753. box-shadow: none;
  754. background: rgba(0, 0, 0, 0.05);
  755. color: rgba(0, 0, 0, 0.95);
  756. }
  757. /* Inverted */
  758. .ui.secondary.inverted.menu .link.item,
  759. .ui.secondary.inverted.menu a.item {
  760. color: rgba(255, 255, 255, 0.7) !important;
  761. }
  762. .ui.secondary.inverted.menu .dropdown.item:hover,
  763. .ui.secondary.inverted.menu .link.item:hover,
  764. .ui.secondary.inverted.menu a.item:hover {
  765. background: rgba(255, 255, 255, 0.08);
  766. color: #ffffff !important;
  767. }
  768. .ui.secondary.inverted.menu .active.item {
  769. background: rgba(255, 255, 255, 0.15);
  770. color: #ffffff !important;
  771. }
  772. /* Fix item margins */
  773. .ui.secondary.item.menu {
  774. margin-left: 0em;
  775. margin-right: 0em;
  776. }
  777. .ui.secondary.item.menu .item:last-child {
  778. margin-right: 0em;
  779. }
  780. .ui.secondary.attached.menu {
  781. box-shadow: none;
  782. }
  783. /* Sub Menu */
  784. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
  785. margin: 0em -0.92857143em;
  786. }
  787. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
  788. margin: 0em;
  789. padding: 0.5em 1.33333333em;
  790. }
  791. /*---------------------
  792. Secondary Vertical
  793. -----------------------*/
  794. .ui.secondary.vertical.menu > .item {
  795. border: none;
  796. margin: 0em 0em 0.35714286em;
  797. border-radius: 0.28571429rem !important;
  798. }
  799. .ui.secondary.vertical.menu > .header.item {
  800. border-radius: 0em;
  801. }
  802. /* Sub Menu */
  803. .ui.vertical.secondary.menu .item > .menu .item {
  804. background-color: transparent;
  805. }
  806. /* Inverted */
  807. .ui.secondary.inverted.menu {
  808. background-color: transparent;
  809. }
  810. /*---------------------
  811. Secondary Pointing
  812. -----------------------*/
  813. .ui.secondary.pointing.menu {
  814. margin-left: 0em;
  815. margin-right: 0em;
  816. border-bottom: 2px solid rgba(34, 36, 38, 0.15);
  817. }
  818. .ui.secondary.pointing.menu .item {
  819. border-bottom-color: transparent;
  820. border-bottom-style: solid;
  821. border-radius: 0em;
  822. -webkit-align-self: flex-end;
  823. -ms-flex-item-align: end;
  824. align-self: flex-end;
  825. margin: 0em 0em -2px;
  826. padding: 0.85714286em 1.14285714em;
  827. border-bottom-width: 2px;
  828. -webkit-transition: color 0.1s ease;
  829. transition: color 0.1s ease;
  830. }
  831. /* Item Types */
  832. .ui.secondary.pointing.menu .header.item {
  833. color: rgba(0, 0, 0, 0.85) !important;
  834. }
  835. .ui.secondary.pointing.menu .text.item {
  836. box-shadow: none !important;
  837. }
  838. .ui.secondary.pointing.menu .item:after {
  839. display: none;
  840. }
  841. /* Hover */
  842. .ui.secondary.pointing.menu .dropdown.item:hover,
  843. .ui.secondary.pointing.menu .link.item:hover,
  844. .ui.secondary.pointing.menu a.item:hover {
  845. background-color: transparent;
  846. color: rgba(0, 0, 0, 0.87);
  847. }
  848. /* Pressed */
  849. .ui.secondary.pointing.menu .dropdown.item:active,
  850. .ui.secondary.pointing.menu .link.item:active,
  851. .ui.secondary.pointing.menu a.item:active {
  852. background-color: transparent;
  853. border-color: rgba(34, 36, 38, 0.15);
  854. }
  855. /* Active */
  856. .ui.secondary.pointing.menu .active.item {
  857. background-color: transparent;
  858. box-shadow: none;
  859. border-color: #1B1C1D;
  860. font-weight: bold;
  861. color: rgba(0, 0, 0, 0.95);
  862. }
  863. /* Active Hover */
  864. .ui.secondary.pointing.menu .active.item:hover {
  865. border-color: #1B1C1D;
  866. color: rgba(0, 0, 0, 0.95);
  867. }
  868. /* Active Dropdown */
  869. .ui.secondary.pointing.menu .active.dropdown.item {
  870. border-color: transparent;
  871. }
  872. /* Vertical Pointing */
  873. .ui.secondary.vertical.pointing.menu {
  874. border-bottom-width: 0px;
  875. border-right-width: 2px;
  876. border-right-style: solid;
  877. border-right-color: rgba(34, 36, 38, 0.15);
  878. }
  879. .ui.secondary.vertical.pointing.menu .item {
  880. border-bottom: none;
  881. border-right-style: solid;
  882. border-right-color: transparent;
  883. border-radius: 0em !important;
  884. margin: 0em -2px 0em 0em;
  885. border-right-width: 2px;
  886. }
  887. /* Vertical Active */
  888. .ui.secondary.vertical.pointing.menu .active.item {
  889. border-color: #1B1C1D;
  890. }
  891. /* Inverted */
  892. .ui.secondary.inverted.pointing.menu {
  893. border-color: rgba(255, 255, 255, 0.1);
  894. }
  895. .ui.secondary.inverted.pointing.menu {
  896. border-width: 2px;
  897. border-color: rgba(34, 36, 38, 0.15);
  898. }
  899. .ui.secondary.inverted.pointing.menu .item {
  900. color: rgba(255, 255, 255, 0.9);
  901. }
  902. .ui.secondary.inverted.pointing.menu .header.item {
  903. color: #FFFFFF !important;
  904. }
  905. /* Hover */
  906. .ui.secondary.inverted.pointing.menu .link.item:hover,
  907. .ui.secondary.inverted.pointing.menu a.item:hover {
  908. color: rgba(0, 0, 0, 0.95);
  909. }
  910. /* Active */
  911. .ui.secondary.inverted.pointing.menu .active.item {
  912. border-color: #FFFFFF;
  913. color: #ffffff;
  914. }
  915. /*--------------
  916. Text Menu
  917. ---------------*/
  918. .ui.text.menu {
  919. background: none transparent;
  920. border-radius: 0px;
  921. box-shadow: none;
  922. border: none;
  923. margin: 1em -0.5em;
  924. }
  925. .ui.text.menu .item {
  926. border-radius: 0px;
  927. box-shadow: none;
  928. -webkit-align-self: center;
  929. -ms-flex-item-align: center;
  930. align-self: center;
  931. margin: 0em 0em;
  932. padding: 0.35714286em 0.5em;
  933. font-weight: normal;
  934. color: rgba(0, 0, 0, 0.6);
  935. -webkit-transition: opacity 0.1s ease;
  936. transition: opacity 0.1s ease;
  937. }
  938. /* Border */
  939. .ui.text.menu .item:before,
  940. .ui.text.menu .menu .item:before {
  941. display: none !important;
  942. }
  943. /* Header */
  944. .ui.text.menu .header.item {
  945. background-color: transparent;
  946. opacity: 1;
  947. color: rgba(0, 0, 0, 0.85);
  948. font-size: 0.92857143em;
  949. text-transform: uppercase;
  950. font-weight: bold;
  951. }
  952. /* Image */
  953. .ui.text.menu .item > img:not(.ui) {
  954. margin: 0em;
  955. }
  956. /*--- fluid text ---*/
  957. .ui.text.item.menu .item {
  958. margin: 0em;
  959. }
  960. /*--- vertical text ---*/
  961. .ui.vertical.text.menu {
  962. margin: 1em 0em;
  963. }
  964. .ui.vertical.text.menu:first-child {
  965. margin-top: 0rem;
  966. }
  967. .ui.vertical.text.menu:last-child {
  968. margin-bottom: 0rem;
  969. }
  970. .ui.vertical.text.menu .item {
  971. margin: 0.57142857em 0em;
  972. padding-left: 0em;
  973. padding-right: 0em;
  974. }
  975. .ui.vertical.text.menu .item > i.icon {
  976. float: none;
  977. margin: 0em 0.35714286em 0em 0em;
  978. }
  979. .ui.vertical.text.menu .header.item {
  980. margin: 0.57142857em 0em 0.71428571em;
  981. }
  982. /* Vertical Sub Menu */
  983. .ui.vertical.text.menu .item:not(.dropdown) > .menu {
  984. margin: 0em;
  985. }
  986. .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
  987. margin: 0em;
  988. padding: 0.5em 0em;
  989. }
  990. /*--- hover ---*/
  991. .ui.text.menu .item:hover {
  992. opacity: 1;
  993. background-color: transparent;
  994. }
  995. /*--- active ---*/
  996. .ui.text.menu .active.item {
  997. background-color: transparent;
  998. border: none;
  999. box-shadow: none;
  1000. font-weight: normal;
  1001. color: rgba(0, 0, 0, 0.95);
  1002. }
  1003. /*--- active hover ---*/
  1004. .ui.text.menu .active.item:hover {
  1005. background-color: transparent;
  1006. }
  1007. /* Disable Bariations */
  1008. .ui.text.pointing.menu .active.item:after {
  1009. box-shadow: none;
  1010. }
  1011. .ui.text.attached.menu {
  1012. box-shadow: none;
  1013. }
  1014. /* Inverted */
  1015. .ui.inverted.text.menu,
  1016. .ui.inverted.text.menu .item,
  1017. .ui.inverted.text.menu .item:hover,
  1018. .ui.inverted.text.menu .active.item {
  1019. background-color: transparent !important;
  1020. }
  1021. /* Fluid */
  1022. .ui.fluid.text.menu {
  1023. margin-left: 0em;
  1024. margin-right: 0em;
  1025. }
  1026. /*--------------
  1027. Icon Only
  1028. ---------------*/
  1029. /* Vertical Menu */
  1030. .ui.vertical.icon.menu {
  1031. display: inline-block;
  1032. width: auto;
  1033. }
  1034. /* Item */
  1035. .ui.icon.menu .item {
  1036. height: auto;
  1037. text-align: center;
  1038. color: #1B1C1D;
  1039. }
  1040. /* Icon */
  1041. .ui.icon.menu .item > .icon:not(.dropdown) {
  1042. margin: 0;
  1043. opacity: 1;
  1044. }
  1045. /* Icon Gylph */
  1046. .ui.icon.menu .icon:before {
  1047. opacity: 1;
  1048. }
  1049. /* (x) Item Icon */
  1050. .ui.menu .icon.item > .icon {
  1051. width: auto;
  1052. margin: 0em auto;
  1053. }
  1054. /* Vertical Icon */
  1055. .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
  1056. display: block;
  1057. opacity: 1;
  1058. margin: 0em auto;
  1059. float: none;
  1060. }
  1061. /* Inverted */
  1062. .ui.inverted.icon.menu .item {
  1063. color: #FFFFFF;
  1064. }
  1065. /*--------------
  1066. Labeled Icon
  1067. ---------------*/
  1068. /* Menu */
  1069. .ui.labeled.icon.menu {
  1070. text-align: center;
  1071. }
  1072. /* Item */
  1073. .ui.labeled.icon.menu .item {
  1074. min-width: 6em;
  1075. -webkit-box-orient: vertical;
  1076. -webkit-box-direction: normal;
  1077. -webkit-flex-direction: column;
  1078. -ms-flex-direction: column;
  1079. flex-direction: column;
  1080. }
  1081. /* Icon */
  1082. .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
  1083. height: 1em;
  1084. display: block;
  1085. font-size: 1.71428571em !important;
  1086. margin: 0em auto 0.5rem !important;
  1087. }
  1088. /* Fluid */
  1089. .ui.fluid.labeled.icon.menu > .item {
  1090. min-width: 0em;
  1091. }
  1092. /*******************************
  1093. Variations
  1094. *******************************/
  1095. /*--------------
  1096. Stackable
  1097. ---------------*/
  1098. @media only screen and (max-width: 767px) {
  1099. .ui.stackable.menu {
  1100. -webkit-box-orient: vertical;
  1101. -webkit-box-direction: normal;
  1102. -webkit-flex-direction: column;
  1103. -ms-flex-direction: column;
  1104. flex-direction: column;
  1105. }
  1106. .ui.stackable.menu .item {
  1107. width: 100% !important;
  1108. }
  1109. .ui.stackable.menu .item:before {
  1110. position: absolute;
  1111. content: '';
  1112. top: auto;
  1113. bottom: 0px;
  1114. left: 0px;
  1115. width: 100%;
  1116. height: 1px;
  1117. background: rgba(34, 36, 38, 0.1);
  1118. }
  1119. .ui.stackable.menu .left.menu,
  1120. .ui.stackable.menu .left.item {
  1121. margin-right: 0 !important;
  1122. }
  1123. .ui.stackable.menu .right.menu,
  1124. .ui.stackable.menu .right.item {
  1125. margin-left: 0 !important;
  1126. }
  1127. }
  1128. /*--------------
  1129. Colors
  1130. ---------------*/
  1131. /*--- Standard Colors ---*/
  1132. .ui.menu .red.active.item,
  1133. .ui.red.menu .active.item {
  1134. border-color: #DB2828 !important;
  1135. color: #DB2828 !important;
  1136. }
  1137. .ui.menu .orange.active.item,
  1138. .ui.orange.menu .active.item {
  1139. border-color: #F2711C !important;
  1140. color: #F2711C !important;
  1141. }
  1142. .ui.menu .yellow.active.item,
  1143. .ui.yellow.menu .active.item {
  1144. border-color: #FBBD08 !important;
  1145. color: #FBBD08 !important;
  1146. }
  1147. .ui.menu .olive.active.item,
  1148. .ui.olive.menu .active.item {
  1149. border-color: #B5CC18 !important;
  1150. color: #B5CC18 !important;
  1151. }
  1152. .ui.menu .green.active.item,
  1153. .ui.green.menu .active.item {
  1154. border-color: #21BA45 !important;
  1155. color: #21BA45 !important;
  1156. }
  1157. .ui.menu .teal.active.item,
  1158. .ui.teal.menu .active.item {
  1159. border-color: #00B5AD !important;
  1160. color: #00B5AD !important;
  1161. }
  1162. .ui.menu .blue.active.item,
  1163. .ui.blue.menu .active.item {
  1164. border-color: #2185D0 !important;
  1165. color: #2185D0 !important;
  1166. }
  1167. .ui.menu .violet.active.item,
  1168. .ui.violet.menu .active.item {
  1169. border-color: #6435C9 !important;
  1170. color: #6435C9 !important;
  1171. }
  1172. .ui.menu .purple.active.item,
  1173. .ui.purple.menu .active.item {
  1174. border-color: #A333C8 !important;
  1175. color: #A333C8 !important;
  1176. }
  1177. .ui.menu .pink.active.item,
  1178. .ui.pink.menu .active.item {
  1179. border-color: #E03997 !important;
  1180. color: #E03997 !important;
  1181. }
  1182. .ui.menu .brown.active.item,
  1183. .ui.brown.menu .active.item {
  1184. border-color: #A5673F !important;
  1185. color: #A5673F !important;
  1186. }
  1187. .ui.menu .grey.active.item,
  1188. .ui.grey.menu .active.item {
  1189. border-color: #767676 !important;
  1190. color: #767676 !important;
  1191. }
  1192. /*--------------
  1193. Inverted
  1194. ---------------*/
  1195. .ui.inverted.menu {
  1196. border: 0px solid transparent;
  1197. background: #1B1C1D;
  1198. box-shadow: none;
  1199. }
  1200. /* Menu Item */
  1201. .ui.inverted.menu .item,
  1202. .ui.inverted.menu .item > a:not(.ui) {
  1203. background: transparent;
  1204. color: rgba(255, 255, 255, 0.9);
  1205. }
  1206. .ui.inverted.menu .item.menu {
  1207. background: transparent;
  1208. }
  1209. /*--- Border ---*/
  1210. .ui.inverted.menu .item:before {
  1211. background: rgba(255, 255, 255, 0.08);
  1212. }
  1213. .ui.vertical.inverted.menu .item:before {
  1214. background: rgba(255, 255, 255, 0.08);
  1215. }
  1216. /* Sub Menu */
  1217. .ui.vertical.inverted.menu .menu .item,
  1218. .ui.vertical.inverted.menu .menu .item a:not(.ui) {
  1219. color: rgba(255, 255, 255, 0.5);
  1220. }
  1221. /* Header */
  1222. .ui.inverted.menu .header.item {
  1223. margin: 0em;
  1224. background: transparent;
  1225. box-shadow: none;
  1226. }
  1227. /* Disabled */
  1228. .ui.inverted.menu .item.disabled,
  1229. .ui.inverted.menu .item.disabled:hover {
  1230. color: rgba(225, 225, 225, 0.3);
  1231. }
  1232. /*--- Hover ---*/
  1233. .ui.link.inverted.menu .item:hover,
  1234. .ui.inverted.menu .dropdown.item:hover,
  1235. .ui.inverted.menu .link.item:hover,
  1236. .ui.inverted.menu a.item:hover {
  1237. background: rgba(255, 255, 255, 0.08);
  1238. color: #ffffff;
  1239. }
  1240. .ui.vertical.inverted.menu .item .menu a.item:hover,
  1241. .ui.vertical.inverted.menu .item .menu .link.item:hover {
  1242. background: transparent;
  1243. color: #ffffff;
  1244. }
  1245. /*--- Pressed ---*/
  1246. .ui.inverted.menu a.item:active,
  1247. .ui.inverted.menu .link.item:active {
  1248. background: rgba(255, 255, 255, 0.08);
  1249. color: #ffffff;
  1250. }
  1251. /*--- Active ---*/
  1252. .ui.inverted.menu .active.item {
  1253. background: rgba(255, 255, 255, 0.15);
  1254. color: #ffffff !important;
  1255. }
  1256. .ui.inverted.vertical.menu .item .menu .active.item {
  1257. background: transparent;
  1258. color: #FFFFFF;
  1259. }
  1260. .ui.inverted.pointing.menu .active.item:after {
  1261. background: #3D3E3F !important;
  1262. margin: 0em !important;
  1263. box-shadow: none !important;
  1264. border: none !important;
  1265. }
  1266. /*--- Active Hover ---*/
  1267. .ui.inverted.menu .active.item:hover {
  1268. background: rgba(255, 255, 255, 0.15);
  1269. color: #FFFFFF !important;
  1270. }
  1271. .ui.inverted.pointing.menu .active.item:hover:after {
  1272. background: #3D3E3F !important;
  1273. }
  1274. /*--------------
  1275. Floated
  1276. ---------------*/
  1277. .ui.floated.menu {
  1278. float: left;
  1279. margin: 0rem 0.5rem 0rem 0rem;
  1280. }
  1281. .ui.floated.menu .item:last-child:before {
  1282. display: none;
  1283. }
  1284. .ui.right.floated.menu {
  1285. float: right;
  1286. margin: 0rem 0rem 0rem 0.5rem;
  1287. }
  1288. /*--------------
  1289. Inverted
  1290. ---------------*/
  1291. /* Red */
  1292. .ui.inverted.menu .red.active.item,
  1293. .ui.inverted.red.menu {
  1294. background-color: #DB2828;
  1295. }
  1296. .ui.inverted.red.menu .item:before {
  1297. background-color: rgba(34, 36, 38, 0.1);
  1298. }
  1299. .ui.inverted.red.menu .active.item {
  1300. background-color: rgba(0, 0, 0, 0.1) !important;
  1301. }
  1302. /* Orange */
  1303. .ui.inverted.menu .orange.active.item,
  1304. .ui.inverted.orange.menu {
  1305. background-color: #F2711C;
  1306. }
  1307. .ui.inverted.orange.menu .item:before {
  1308. background-color: rgba(34, 36, 38, 0.1);
  1309. }
  1310. .ui.inverted.orange.menu .active.item {
  1311. background-color: rgba(0, 0, 0, 0.1) !important;
  1312. }
  1313. /* Yellow */
  1314. .ui.inverted.menu .yellow.active.item,
  1315. .ui.inverted.yellow.menu {
  1316. background-color: #FBBD08;
  1317. }
  1318. .ui.inverted.yellow.menu .item:before {
  1319. background-color: rgba(34, 36, 38, 0.1);
  1320. }
  1321. .ui.inverted.yellow.menu .active.item {
  1322. background-color: rgba(0, 0, 0, 0.1) !important;
  1323. }
  1324. /* Olive */
  1325. .ui.inverted.menu .olive.active.item,
  1326. .ui.inverted.olive.menu {
  1327. background-color: #B5CC18;
  1328. }
  1329. .ui.inverted.olive.menu .item:before {
  1330. background-color: rgba(34, 36, 38, 0.1);
  1331. }
  1332. .ui.inverted.olive.menu .active.item {
  1333. background-color: rgba(0, 0, 0, 0.1) !important;
  1334. }
  1335. /* Green */
  1336. .ui.inverted.menu .green.active.item,
  1337. .ui.inverted.green.menu {
  1338. background-color: #21BA45;
  1339. }
  1340. .ui.inverted.green.menu .item:before {
  1341. background-color: rgba(34, 36, 38, 0.1);
  1342. }
  1343. .ui.inverted.green.menu .active.item {
  1344. background-color: rgba(0, 0, 0, 0.1) !important;
  1345. }
  1346. /* Teal */
  1347. .ui.inverted.menu .teal.active.item,
  1348. .ui.inverted.teal.menu {
  1349. background-color: #00B5AD;
  1350. }
  1351. .ui.inverted.teal.menu .item:before {
  1352. background-color: rgba(34, 36, 38, 0.1);
  1353. }
  1354. .ui.inverted.teal.menu .active.item {
  1355. background-color: rgba(0, 0, 0, 0.1) !important;
  1356. }
  1357. /* Blue */
  1358. .ui.inverted.menu .blue.active.item,
  1359. .ui.inverted.blue.menu {
  1360. background-color: #2185D0;
  1361. }
  1362. .ui.inverted.blue.menu .item:before {
  1363. background-color: rgba(34, 36, 38, 0.1);
  1364. }
  1365. .ui.inverted.blue.menu .active.item {
  1366. background-color: rgba(0, 0, 0, 0.1) !important;
  1367. }
  1368. /* Violet */
  1369. .ui.inverted.menu .violet.active.item,
  1370. .ui.inverted.violet.menu {
  1371. background-color: #6435C9;
  1372. }
  1373. .ui.inverted.violet.menu .item:before {
  1374. background-color: rgba(34, 36, 38, 0.1);
  1375. }
  1376. .ui.inverted.violet.menu .active.item {
  1377. background-color: rgba(0, 0, 0, 0.1) !important;
  1378. }
  1379. /* Purple */
  1380. .ui.inverted.menu .purple.active.item,
  1381. .ui.inverted.purple.menu {
  1382. background-color: #A333C8;
  1383. }
  1384. .ui.inverted.purple.menu .item:before {
  1385. background-color: rgba(34, 36, 38, 0.1);
  1386. }
  1387. .ui.inverted.purple.menu .active.item {
  1388. background-color: rgba(0, 0, 0, 0.1) !important;
  1389. }
  1390. /* Pink */
  1391. .ui.inverted.menu .pink.active.item,
  1392. .ui.inverted.pink.menu {
  1393. background-color: #E03997;
  1394. }
  1395. .ui.inverted.pink.menu .item:before {
  1396. background-color: rgba(34, 36, 38, 0.1);
  1397. }
  1398. .ui.inverted.pink.menu .active.item {
  1399. background-color: rgba(0, 0, 0, 0.1) !important;
  1400. }
  1401. /* Brown */
  1402. .ui.inverted.menu .brown.active.item,
  1403. .ui.inverted.brown.menu {
  1404. background-color: #A5673F;
  1405. }
  1406. .ui.inverted.brown.menu .item:before {
  1407. background-color: rgba(34, 36, 38, 0.1);
  1408. }
  1409. .ui.inverted.brown.menu .active.item {
  1410. background-color: rgba(0, 0, 0, 0.1) !important;
  1411. }
  1412. /* Grey */
  1413. .ui.inverted.menu .grey.active.item,
  1414. .ui.inverted.grey.menu {
  1415. background-color: #767676;
  1416. }
  1417. .ui.inverted.grey.menu .item:before {
  1418. background-color: rgba(34, 36, 38, 0.1);
  1419. }
  1420. .ui.inverted.grey.menu .active.item {
  1421. background-color: rgba(0, 0, 0, 0.1) !important;
  1422. }
  1423. /*--------------
  1424. Fitted
  1425. ---------------*/
  1426. .ui.fitted.menu .item,
  1427. .ui.fitted.menu .item .menu .item,
  1428. .ui.menu .fitted.item {
  1429. padding: 0em;
  1430. }
  1431. .ui.horizontally.fitted.menu .item,
  1432. .ui.horizontally.fitted.menu .item .menu .item,
  1433. .ui.menu .horizontally.fitted.item {
  1434. padding-top: 0.92857143em;
  1435. padding-bottom: 0.92857143em;
  1436. }
  1437. .ui.vertically.fitted.menu .item,
  1438. .ui.vertically.fitted.menu .item .menu .item,
  1439. .ui.menu .vertically.fitted.item {
  1440. padding-left: 1.14285714em;
  1441. padding-right: 1.14285714em;
  1442. }
  1443. /*--------------
  1444. Borderless
  1445. ---------------*/
  1446. .ui.borderless.menu .item:before,
  1447. .ui.borderless.menu .item .menu .item:before,
  1448. .ui.menu .borderless.item:before {
  1449. background: none !important;
  1450. }
  1451. /*-------------------
  1452. Compact
  1453. --------------------*/
  1454. .ui.compact.menu {
  1455. display: -webkit-inline-box;
  1456. display: -webkit-inline-flex;
  1457. display: -ms-inline-flexbox;
  1458. display: inline-flex;
  1459. margin: 0em;
  1460. vertical-align: middle;
  1461. }
  1462. .ui.compact.vertical.menu {
  1463. display: inline-block;
  1464. }
  1465. .ui.compact.menu .item:last-child {
  1466. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  1467. }
  1468. .ui.compact.menu .item:last-child:before {
  1469. display: none;
  1470. }
  1471. .ui.compact.vertical.menu {
  1472. width: auto !important;
  1473. }
  1474. .ui.compact.vertical.menu .item:last-child::before {
  1475. display: block;
  1476. }
  1477. /*-------------------
  1478. Fluid
  1479. --------------------*/
  1480. .ui.menu.fluid,
  1481. .ui.vertical.menu.fluid {
  1482. width: 100% !important;
  1483. }
  1484. /*-------------------
  1485. Evenly Sized
  1486. --------------------*/
  1487. .ui.item.menu,
  1488. .ui.item.menu .item {
  1489. width: 100%;
  1490. padding-left: 0em !important;
  1491. padding-right: 0em !important;
  1492. margin-left: 0em !important;
  1493. margin-right: 0em !important;
  1494. text-align: center;
  1495. -webkit-box-pack: center;
  1496. -webkit-justify-content: center;
  1497. -ms-flex-pack: center;
  1498. justify-content: center;
  1499. }
  1500. .ui.item.menu .item:last-child:before {
  1501. display: none;
  1502. }
  1503. .ui.menu.two.item .item {
  1504. width: 50%;
  1505. }
  1506. .ui.menu.three.item .item {
  1507. width: 33.333%;
  1508. }
  1509. .ui.menu.four.item .item {
  1510. width: 25%;
  1511. }
  1512. .ui.menu.five.item .item {
  1513. width: 20%;
  1514. }
  1515. .ui.menu.six.item .item {
  1516. width: 16.666%;
  1517. }
  1518. .ui.menu.seven.item .item {
  1519. width: 14.285%;
  1520. }
  1521. .ui.menu.eight.item .item {
  1522. width: 12.500%;
  1523. }
  1524. .ui.menu.nine.item .item {
  1525. width: 11.11%;
  1526. }
  1527. .ui.menu.ten.item .item {
  1528. width: 10.0%;
  1529. }
  1530. .ui.menu.eleven.item .item {
  1531. width: 9.09%;
  1532. }
  1533. .ui.menu.twelve.item .item {
  1534. width: 8.333%;
  1535. }
  1536. /*--------------
  1537. Fixed
  1538. ---------------*/
  1539. .ui.menu.fixed {
  1540. position: fixed;
  1541. z-index: 101;
  1542. margin: 0em;
  1543. width: 100%;
  1544. }
  1545. .ui.menu.fixed,
  1546. .ui.menu.fixed .item:first-child,
  1547. .ui.menu.fixed .item:last-child {
  1548. border-radius: 0px !important;
  1549. }
  1550. .ui.fixed.menu,
  1551. .ui[class*="top fixed"].menu {
  1552. top: 0px;
  1553. left: 0px;
  1554. right: auto;
  1555. bottom: auto;
  1556. }
  1557. .ui[class*="top fixed"].menu {
  1558. border-top: none;
  1559. border-left: none;
  1560. border-right: none;
  1561. }
  1562. .ui[class*="right fixed"].menu {
  1563. border-top: none;
  1564. border-bottom: none;
  1565. border-right: none;
  1566. top: 0px;
  1567. right: 0px;
  1568. left: auto;
  1569. bottom: auto;
  1570. width: auto;
  1571. height: 100%;
  1572. }
  1573. .ui[class*="bottom fixed"].menu {
  1574. border-bottom: none;
  1575. border-left: none;
  1576. border-right: none;
  1577. bottom: 0px;
  1578. left: 0px;
  1579. top: auto;
  1580. right: auto;
  1581. }
  1582. .ui[class*="left fixed"].menu {
  1583. border-top: none;
  1584. border-bottom: none;
  1585. border-left: none;
  1586. top: 0px;
  1587. left: 0px;
  1588. right: auto;
  1589. bottom: auto;
  1590. width: auto;
  1591. height: 100%;
  1592. }
  1593. /* Coupling with Grid */
  1594. .ui.fixed.menu + .ui.grid {
  1595. padding-top: 2.75rem;
  1596. }
  1597. /*-------------------
  1598. Pointing
  1599. --------------------*/
  1600. .ui.pointing.menu .item:after {
  1601. visibility: hidden;
  1602. position: absolute;
  1603. content: '';
  1604. top: 100%;
  1605. left: 50%;
  1606. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1607. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1608. background: none;
  1609. margin: 0.5px 0em 0em;
  1610. width: 0.57142857em;
  1611. height: 0.57142857em;
  1612. border: none;
  1613. border-bottom: 1px solid #D4D4D5;
  1614. border-right: 1px solid #D4D4D5;
  1615. z-index: 2;
  1616. -webkit-transition: background 0.1s ease;
  1617. transition: background 0.1s ease;
  1618. }
  1619. .ui.vertical.pointing.menu .item:after {
  1620. position: absolute;
  1621. top: 50%;
  1622. right: 0%;
  1623. bottom: auto;
  1624. left: auto;
  1625. -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1626. transform: translateX(50%) translateY(-50%) rotate(45deg);
  1627. margin: 0em -0.5px 0em 0em;
  1628. border: none;
  1629. border-top: 1px solid #D4D4D5;
  1630. border-right: 1px solid #D4D4D5;
  1631. }
  1632. /* Active */
  1633. .ui.pointing.menu .active.item:after {
  1634. visibility: visible;
  1635. }
  1636. .ui.pointing.menu .active.dropdown.item:after {
  1637. visibility: hidden;
  1638. }
  1639. /* Don't double up pointers */
  1640. .ui.pointing.menu .dropdown.active.item:after,
  1641. .ui.pointing.menu .active.item .menu .active.item:after {
  1642. display: none;
  1643. }
  1644. /* Colors */
  1645. .ui.pointing.menu .active.item:hover:after {
  1646. background-color: #F2F2F2;
  1647. }
  1648. .ui.pointing.menu .active.item:after {
  1649. background-color: #F2F2F2;
  1650. }
  1651. .ui.pointing.menu .active.item:hover:after {
  1652. background-color: #F2F2F2;
  1653. }
  1654. .ui.vertical.pointing.menu .active.item:hover:after {
  1655. background-color: #F2F2F2;
  1656. }
  1657. .ui.vertical.pointing.menu .active.item:after {
  1658. background-color: #F2F2F2;
  1659. }
  1660. .ui.vertical.pointing.menu .menu .active.item:after {
  1661. background-color: #FFFFFF;
  1662. }
  1663. /*--------------
  1664. Attached
  1665. ---------------*/
  1666. /* Middle */
  1667. .ui.attached.menu {
  1668. top: 0px;
  1669. bottom: 0px;
  1670. border-radius: 0px;
  1671. margin: 0em -1px;
  1672. width: calc(100% + 2px );
  1673. max-width: calc(100% + 2px );
  1674. box-shadow: none;
  1675. }
  1676. .ui.attached + .ui.attached.menu:not(.top) {
  1677. border-top: none;
  1678. }
  1679. /* Top */
  1680. .ui[class*="top attached"].menu {
  1681. bottom: 0px;
  1682. margin-bottom: 0em;
  1683. top: 0px;
  1684. margin-top: 1rem;
  1685. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  1686. }
  1687. .ui.menu[class*="top attached"]:first-child {
  1688. margin-top: 0em;
  1689. }
  1690. /* Bottom */
  1691. .ui[class*="bottom attached"].menu {
  1692. bottom: 0px;
  1693. margin-top: 0em;
  1694. top: 0px;
  1695. margin-bottom: 1rem;
  1696. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1697. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  1698. }
  1699. .ui[class*="bottom attached"].menu:last-child {
  1700. margin-bottom: 0em;
  1701. }
  1702. /* Attached Menu Item */
  1703. .ui.top.attached.menu > .item:first-child {
  1704. border-radius: 0.28571429rem 0em 0em 0em;
  1705. }
  1706. .ui.bottom.attached.menu > .item:first-child {
  1707. border-radius: 0em 0em 0em 0.28571429rem;
  1708. }
  1709. /* Tabular Attached */
  1710. .ui.attached.menu:not(.tabular) {
  1711. border: 1px solid #D4D4D5;
  1712. }
  1713. .ui.attached.inverted.menu {
  1714. border: none;
  1715. }
  1716. .ui.attached.tabular.menu {
  1717. margin-left: 0;
  1718. margin-right: 0;
  1719. width: 100%;
  1720. }
  1721. /*--------------
  1722. Sizes
  1723. ---------------*/
  1724. /* Mini */
  1725. .ui.mini.menu {
  1726. font-size: 0.78571429rem;
  1727. }
  1728. .ui.mini.vertical.menu {
  1729. width: 9rem;
  1730. }
  1731. /* Tiny */
  1732. .ui.tiny.menu {
  1733. font-size: 0.85714286rem;
  1734. }
  1735. .ui.tiny.vertical.menu {
  1736. width: 11rem;
  1737. }
  1738. /* Small */
  1739. .ui.small.menu {
  1740. font-size: 0.92857143rem;
  1741. }
  1742. .ui.small.vertical.menu {
  1743. width: 13rem;
  1744. }
  1745. /* Medium */
  1746. .ui.menu {
  1747. font-size: 1rem;
  1748. }
  1749. .ui.vertical.menu {
  1750. width: 15rem;
  1751. }
  1752. /* Large */
  1753. .ui.large.menu {
  1754. font-size: 1.07142857rem;
  1755. }
  1756. .ui.large.vertical.menu {
  1757. width: 18rem;
  1758. }
  1759. /* Huge */
  1760. .ui.huge.menu {
  1761. font-size: 1.14285714rem;
  1762. }
  1763. .ui.huge.vertical.menu {
  1764. width: 20rem;
  1765. }
  1766. /* Big */
  1767. .ui.big.menu {
  1768. font-size: 1.21428571rem;
  1769. }
  1770. .ui.big.vertical.menu {
  1771. width: 22rem;
  1772. }
  1773. /* Massive */
  1774. .ui.massive.menu {
  1775. font-size: 1.28571429rem;
  1776. }
  1777. .ui.massive.vertical.menu {
  1778. width: 25rem;
  1779. }
  1780. /*******************************
  1781. Theme Overrides
  1782. *******************************/
  1783. /*******************************
  1784. Site Overrides
  1785. *******************************/