menu.css 42 KB

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