You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

1453 lines
35 KiB

11 years ago
11 years ago
  1. /*
  2. * # Semantic - Menu
  3. * http://github.com/jlukic/semantic-ui/
  4. *
  5. *
  6. * Copyright 2013 Contributors
  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. margin: 1rem 0rem;
  19. background-color: #FFFFFF;
  20. font-size: 0px;
  21. font-weight: normal;
  22. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  23. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  24. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  25. -webkit-border-radius: 0.1875rem;
  26. -moz-border-radius: 0.1875rem;
  27. border-radius: 0.1875rem;
  28. }
  29. .ui.menu:first-child {
  30. margin-top: 0rem;
  31. }
  32. .ui.menu:last-child {
  33. margin-bottom: 0rem;
  34. }
  35. .ui.menu:after {
  36. content: ".";
  37. display: block;
  38. height: 0;
  39. clear: both;
  40. visibility: hidden;
  41. }
  42. .ui.menu > .item:first-child {
  43. border-radius: 0px 0.1875em 0.1875em 0px;
  44. }
  45. .ui.menu > .item:last-child {
  46. border-radius: 0.1875em 0px 0px 0.1875em;
  47. }
  48. .ui.menu .item {
  49. -webkit-user-select: none;
  50. -moz-user-select: none;
  51. -ms-user-select: none;
  52. user-select: none;
  53. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  54. vertical-align: middle;
  55. line-height: 1;
  56. text-decoration: none;
  57. -webkit-box-sizing: border-box;
  58. -moz-box-sizing: border-box;
  59. -ms-box-sizing: border-box;
  60. box-sizing: border-box;
  61. -webkit-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  62. -moz-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  63. -o-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  64. -ms-transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  65. transition: opacity 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  66. }
  67. /*--------------
  68. Colors
  69. ---------------*/
  70. /* Text Color */
  71. .ui.menu .item,
  72. .ui.menu .item > a {
  73. color: rgba(0, 0, 0, 0.75);
  74. }
  75. .ui.menu .item .item,
  76. .ui.menu .item .item > a {
  77. color: rgba(30, 30, 30, 0.7);
  78. }
  79. .ui.menu .item .item .item,
  80. .ui.menu .item .item .item > a {
  81. color: rgba(30, 30, 30, 0.6);
  82. }
  83. .ui.menu .dropdown.item .menu .item,
  84. .ui.menu .dropdown.item .menu .item a {
  85. color: rgba(0, 0, 0, 0.75);
  86. }
  87. /* Hover */
  88. .ui.menu .item .menu a.item:hover,
  89. .ui.menu .item .menu a.item.hover,
  90. .ui.menu .item .menu .link.item:hover,
  91. .ui.menu .item .menu .link.item.hover {
  92. color: rgba(0, 0, 0, 0.85);
  93. }
  94. .ui.menu .dropdown.item .menu .item a:hover {
  95. color: rgba(0, 0, 0, 0.85);
  96. }
  97. /* Active */
  98. .ui.menu .active.item,
  99. .ui.menu .active.item a {
  100. color: rgba(0, 0, 0, 0.85);
  101. -moz-border-radius: 0px;
  102. -webkit-border-radius: 0px;
  103. border-radius: 0px;
  104. }
  105. /*--------------
  106. Items
  107. ---------------*/
  108. .ui.menu .item {
  109. position: relative;
  110. display: inline-block;
  111. padding: 0.83em 0.95em;
  112. border-top: 0em solid rgba(0, 0, 0, 0);
  113. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  114. -moz-user-select: -moz-none;
  115. -khtml-user-select: none;
  116. user-select: none;
  117. }
  118. .ui.menu .menu {
  119. margin: 0em;
  120. }
  121. .ui.menu .item.left,
  122. .ui.menu .menu.left {
  123. float: right;
  124. }
  125. .ui.menu .item.right,
  126. .ui.menu .menu.right {
  127. float: left;
  128. }
  129. /*--------------
  130. Borders
  131. ---------------*/
  132. .ui.menu .item:before {
  133. position: absolute;
  134. content: '';
  135. top: 0%;
  136. left: 0px;
  137. width: 1px;
  138. height: 100%;
  139. background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  140. background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  141. background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  142. background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  143. background-image: linear-gradient(top, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.05) 100%);
  144. }
  145. .ui.menu .menu.right .item:before,
  146. .ui.menu .item.right:before {
  147. left: auto;
  148. right: 0px;
  149. }
  150. /*--------------
  151. Text Content
  152. ---------------*/
  153. .ui.menu .text.item > *,
  154. .ui.menu .item > p:only-child {
  155. -webkit-user-select: text;
  156. -moz-user-select: text;
  157. -ms-user-select: text;
  158. user-select: text;
  159. line-height: 1.3;
  160. color: rgba(0, 0, 0, 0.6);
  161. }
  162. .ui.menu .item > p:first-child {
  163. margin-top: 0px;
  164. }
  165. .ui.menu .item > p:last-child {
  166. margin-bottom: 0px;
  167. }
  168. /*--------------
  169. Button
  170. ---------------*/
  171. .ui.menu:not(.vertical) .item > .button {
  172. position: relative;
  173. top: -0.05em;
  174. margin: -0.55em 0;
  175. padding-bottom: 0.55em;
  176. padding-top: 0.55em;
  177. font-size: 0.875em;
  178. box-shadow: none;
  179. }
  180. /*--------------
  181. Inputs
  182. ---------------*/
  183. .ui.menu:not(.vertical) .item > .input {
  184. margin-top: -0.83em;
  185. margin-bottom: -0.83em;
  186. padding-top: 0.3em;
  187. padding-bottom: 0.3em;
  188. width: 100%;
  189. }
  190. .ui.menu .item > .input input {
  191. padding-top: 0.5em;
  192. padding-bottom: 0.5em;
  193. }
  194. .ui.vertical.menu .item > .input input {
  195. margin: 0em;
  196. padding-top: 0.63em;
  197. padding-bottom: 0.63em;
  198. }
  199. .ui.vertical.menu .ui.input > .icon {
  200. padding-top: 0.63em;
  201. }
  202. /*--------------
  203. Header
  204. ---------------*/
  205. .ui.menu .header.item {
  206. background-color: rgba(0, 0, 0, 0.04);
  207. margin: 0em;
  208. }
  209. .ui.vertical.menu .header.item {
  210. font-weight: bold;
  211. }
  212. /*--------------
  213. Dropdowns
  214. ---------------*/
  215. .ui.menu .dropdown.item .menu {
  216. right: 1px;
  217. margin: 1px 0px 0px 0px;
  218. min-width: calc(99%);
  219. box-shadow: 0 1px 1px 1px #DDDDDD;
  220. }
  221. .ui.menu .simple.dropdown.item .menu {
  222. margin: 0px !important;
  223. }
  224. .ui.menu .dropdown.item .menu .item {
  225. width: 100%;
  226. color: rgba(0, 0, 0, 0.75);
  227. }
  228. .ui.menu .dropdown.item .menu .active.item {
  229. box-shadow: none !important;
  230. }
  231. .ui.menu .ui.dropdown .menu .item:before {
  232. display: none;
  233. }
  234. /*--------------
  235. Labels
  236. ---------------*/
  237. .ui.menu .item > .label {
  238. background-color: rgba(0, 0, 0, 0.35);
  239. color: #FFFFFF;
  240. margin: -0.15em 0.5em -0.15em 0em;
  241. padding: 0.3em 0.8em;
  242. vertical-align: baseline;
  243. }
  244. .ui.menu .item > .floating.label {
  245. padding: 0.3em 0.8em;
  246. }
  247. /*--------------
  248. Images
  249. ---------------*/
  250. .ui.menu .item > img:only-child {
  251. display: block;
  252. max-width: 100%;
  253. margin: 0em auto;
  254. }
  255. /*******************************
  256. States
  257. *******************************/
  258. /*--------------
  259. Hover
  260. ---------------*/
  261. .ui.link.menu .item:hover,
  262. .ui.menu .item.hover,
  263. .ui.menu .link.item:hover,
  264. .ui.menu a.item:hover,
  265. .ui.menu .ui.dropdown .menu .item.hover,
  266. .ui.menu .ui.dropdown .menu .item:hover {
  267. cursor: pointer;
  268. background-color: rgba(0, 0, 0, 0.02);
  269. }
  270. .ui.menu .ui.dropdown.active {
  271. background-color: rgba(0, 0, 0, 0.02);
  272. -webkit-box-shadow: none;
  273. box-shadow: none;
  274. -webkit-border-bottom-left-radius: 0em;
  275. -moz-border-bottom-left-radius: 0em;
  276. border-bottom-left-radius: 0em;
  277. -webkit-border-bottom-right-radius: 0em;
  278. -moz-border-bottom-right-radius: 0em;
  279. border-bottom-right-radius: 0em;
  280. }
  281. /*--------------
  282. Down
  283. ---------------*/
  284. .ui.link.menu .item:active,
  285. .ui.menu .link.item:active,
  286. .ui.menu a.item:active,
  287. .ui.menu .ui.dropdown .menu .item:active {
  288. background-color: rgba(0, 0, 0, 0.05);
  289. }
  290. /*--------------
  291. Active
  292. ---------------*/
  293. .ui.menu .active.item {
  294. background-color: rgba(0, 0, 0, 0.01);
  295. color: rgba(0, 0, 0, 0.95);
  296. -webkit-box-shadow: 0em 0.2em 0em inset;
  297. -moz-box-shadow: 0em 0.2em 0em inset;
  298. box-shadow: 0em 0.2em 0em inset;
  299. }
  300. .ui.vertical.menu .active.item {
  301. -webkit-border-radius: 0em;
  302. -moz-border-radius: 0em;
  303. border-radius: 0em;
  304. -moz-box-shadow: 0.2em 0em 0em inset;
  305. -webkit-box-shadow: 0.2em 0em 0em inset;
  306. box-shadow: 0.2em 0em 0em inset;
  307. }
  308. .ui.vertical.menu > .active.item:first-child {
  309. -webkit-border-radius: 0.1875em 0em 0em 0em;
  310. -moz-border-radius: 0.1875em 0em 0em 0em;
  311. border-radius: 0.1875em 0em 0em 0em;
  312. }
  313. .ui.vertical.menu > .active.item:last-child {
  314. -webkit-border-radius: 0em 0em 0em 0.1875em;
  315. -moz-border-radius: 0em 0em 0em 0.1875em;
  316. border-radius: 0em 0em 0em 0.1875em;
  317. }
  318. .ui.vertical.menu > .active.item:only-child {
  319. -webkit-border-radius: 0.1875em 0em 0em 0.1875em;
  320. -moz-border-radius: 0.1875em 0em 0em 0.1875em;
  321. border-radius: 0.1875em 0em 0em 0.1875em;
  322. }
  323. .ui.vertical.menu .active.item .menu .active.item {
  324. border-right: none;
  325. }
  326. .ui.vertical.menu .active.item .menu .active.item {
  327. padding-right: 1.5rem;
  328. }
  329. .ui.vertical.menu .item .menu .active.item {
  330. background-color: rgba(0, 0, 0, 0.03);
  331. -webkit-box-shadow: none;
  332. -moz-box-shadow: none;
  333. box-shadow: none;
  334. }
  335. /*--------------
  336. Disabled
  337. ---------------*/
  338. .ui.menu .item.disabled,
  339. .ui.menu .item.disabled:hover,
  340. .ui.menu .item.disabled.hover {
  341. cursor: default;
  342. color: rgba(0, 0, 0, 0.2);
  343. background-color: transparent !important;
  344. }
  345. /*--------------------
  346. Loading
  347. ---------------------*/
  348. /* On Form */
  349. .ui.menu.loading {
  350. position: relative;
  351. }
  352. .ui.menu.loading:after {
  353. position: absolute;
  354. top: 0%;
  355. right: 0%;
  356. content: '';
  357. width: 100%;
  358. height: 100%;
  359. background: rgba(255, 255, 255, 0.8) url(../images/loader-large.gif) no-repeat 50% 50%;
  360. visibility: visible;
  361. }
  362. /*******************************
  363. Types
  364. *******************************/
  365. /*--------------
  366. Vertical
  367. ---------------*/
  368. .ui.vertical.menu .item {
  369. display: block;
  370. height: auto !important;
  371. border-top: none;
  372. border-right: 0em solid rgba(0, 0, 0, 0);
  373. border-left: none;
  374. }
  375. .ui.vertical.menu > .item:first-child {
  376. border-radius: 0.1875em 0.1875em 0px 0px;
  377. }
  378. .ui.vertical.menu > .item:last-child {
  379. border-radius: 0px 0px 0.1875em 0.1875em;
  380. }
  381. .ui.vertical.menu .item > .label {
  382. float: left;
  383. min-width: 2.5;
  384. text-align: center;
  385. }
  386. .ui.vertical.menu .item > .icon:not(.input) {
  387. float: left;
  388. width: 1.22em;
  389. margin: 0em 0.5em 0em 0em;
  390. }
  391. .ui.vertical.menu .item > .label + .icon {
  392. float: none;
  393. margin: 0em 0em 0em 0.25em;
  394. }
  395. /*--- Border ---*/
  396. .ui.vertical.menu .item:before {
  397. position: absolute;
  398. content: '';
  399. top: 0%;
  400. right: 0px;
  401. width: 100%;
  402. height: 1px;
  403. background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  404. background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  405. background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  406. background-image: -ms-linear-gradient(right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  407. background-image: linear-gradient(right, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  408. }
  409. .ui.vertical.menu .item:first-child:before {
  410. background-image: none !important;
  411. }
  412. /*--- Dropdown ---*/
  413. .ui.vertical.menu .dropdown.item > i {
  414. float: left;
  415. content: "\f0da";
  416. }
  417. .ui.vertical.menu .dropdown.item .menu {
  418. top: 0% !important;
  419. right: 100%;
  420. margin: 0px 1px 0px 0px;
  421. box-shadow: 0 0px 1px 1px #DDDDDD;
  422. }
  423. .ui.vertical.menu .dropdown.item.active {
  424. border-top-left-radius: 0em;
  425. border-bottom-left-radius: 0em;
  426. }
  427. .ui.vertical.menu .dropdown.item .menu .item {
  428. font-size: 1rem;
  429. }
  430. .ui.vertical.menu .dropdown.item .menu .item .icon {
  431. margin-left: 0em;
  432. }
  433. .ui.vertical.menu .dropdown.item.active {
  434. -webkit-box-shadow: none;
  435. -moz-box-shadow: none;
  436. box-shadow: none;
  437. }
  438. /*--- Sub Menu ---*/
  439. .ui.vertical.menu .item > .menu {
  440. margin: 0.5em -0.95em 0em;
  441. }
  442. .ui.vertical.menu .item > .menu > .item {
  443. padding: 0.5rem 1.5rem;
  444. font-size: 0.875em;
  445. }
  446. .ui.vertical.menu .item > .menu > .item:before {
  447. display: none;
  448. }
  449. /*--------------
  450. Tiered
  451. ---------------*/
  452. .ui.tiered.menu > .sub.menu > .item {
  453. color: rgba(0, 0, 0, 0.4);
  454. }
  455. .ui.tiered.menu > .menu > .item:hover,
  456. .ui.tiered.menu > .menu > .item.hover {
  457. color: rgba(0, 0, 0, 0.8);
  458. }
  459. .ui.tiered.menu .item.active {
  460. color: rgba(0, 0, 0, 0.8);
  461. }
  462. .ui.tiered.menu > .menu .item.active:after {
  463. position: absolute;
  464. content: '';
  465. margin-top: -1px;
  466. top: 100%;
  467. right: 0px;
  468. width: 100%;
  469. height: 2px;
  470. background-color: #FBFBFB;
  471. }
  472. .ui.tiered.menu .sub.menu {
  473. background-color: rgba(0, 0, 0, 0.01);
  474. border-radius: 0em;
  475. border-top: 1px solid rgba(0, 0, 0, 0.1);
  476. -webkit-box-shadow: none;
  477. -moz-box-shadow: none;
  478. box-shadow: none;
  479. color: #FFFFFF;
  480. }
  481. .ui.tiered.menu .sub.menu .item {
  482. font-size: 0.875rem;
  483. }
  484. .ui.tiered.menu .sub.menu .item:before {
  485. background-image: none;
  486. }
  487. .ui.tiered.menu .sub.menu .active.item {
  488. padding-top: 0.83em;
  489. background-color: transparent;
  490. border-radius: 0 0 0 0;
  491. border-top: medium none;
  492. -webkit-box-shadow: none;
  493. -moz-box-shadow: none;
  494. box-shadow: none;
  495. color: rgba(0, 0, 0, 0.7) !important;
  496. }
  497. .ui.tiered.menu .sub.menu .active.item:after {
  498. display: none;
  499. }
  500. /* Inverted */
  501. .ui.inverted.tiered.menu > .menu > .item {
  502. color: rgba(255, 255, 255, 0.5);
  503. }
  504. .ui.inverted.tiered.menu .sub.menu {
  505. background-color: rgba(0, 0, 0, 0.2);
  506. }
  507. .ui.inverted.tiered.menu .sub.menu .item {
  508. color: rgba(255, 255, 255, 0.6);
  509. }
  510. .ui.inverted.tiered.menu > .menu > .item:hover,
  511. .ui.inverted.tiered.menu > .menu > .item.hover {
  512. color: rgba(255, 255, 255, 0.9);
  513. }
  514. .ui.inverted.tiered.menu .active.item:after {
  515. display: none;
  516. }
  517. .ui.inverted.tiered.menu > .sub.menu > .active.item,
  518. .ui.inverted.tiered.menu > .menu > .active.item {
  519. color: #ffffff !important;
  520. -webkit-box-shadow: none;
  521. -moz-box-shadow: none;
  522. box-shadow: none;
  523. }
  524. /* Tiered pointing */
  525. .ui.pointing.tiered.menu > .menu > .item:after {
  526. display: none;
  527. }
  528. .ui.pointing.tiered.menu > .sub.menu > .item:after {
  529. display: block;
  530. }
  531. /*--------------
  532. Tabular
  533. ---------------*/
  534. .ui.tabular.menu {
  535. background-color: transparent;
  536. border-bottom: 1px solid #DCDDDE;
  537. -webkit-box-shadow: none !important;
  538. -moz-box-shadow: none !important;
  539. box-shadow: none !important;
  540. }
  541. .ui.tabular.menu .item {
  542. background-color: transparent;
  543. border-right: 1px solid transparent;
  544. border-left: 1px solid transparent;
  545. border-top: 1px solid transparent;
  546. padding-right: 1.4em;
  547. padding-left: 1.4em;
  548. color: rgba(0, 0, 0, 0.6);
  549. }
  550. .ui.tabular.menu .item:before {
  551. display: none;
  552. }
  553. /* Hover */
  554. .ui.tabular.menu .item:hover {
  555. background-color: transparent;
  556. color: rgba(0, 0, 0, 0.8);
  557. }
  558. /* Active */
  559. .ui.tabular.menu .active.item {
  560. position: relative;
  561. top: 1px;
  562. background-color: #FFFFFF;
  563. color: rgba(0, 0, 0, 0.8);
  564. border-color: #DCDDDE;
  565. padding-top: 0.83em;
  566. -webkit-box-shadow: none;
  567. -moz-box-shadow: none;
  568. box-shadow: none;
  569. -webkit-border-radius: 5px 5px 0 0;
  570. -moz-border-radius: 5px 5px 0 0;
  571. border-radius: 5px 5px 0 0;
  572. }
  573. /* Coupling with segment for attachment */
  574. .ui.attached.tabular.menu {
  575. position: relative;
  576. z-index: 2;
  577. }
  578. .ui.tabular.menu ~ .bottom.attached.segment {
  579. margin: 1px 1px 0px 0px;
  580. }
  581. /*--------------
  582. Pagination
  583. ---------------*/
  584. .ui.pagination.menu {
  585. margin: 0em;
  586. display: inline-block;
  587. vertical-align: middle;
  588. }
  589. .ui.pagination.menu .item {
  590. min-width: 3em;
  591. text-align: center;
  592. }
  593. .ui.pagination.menu .icon.item .icon {
  594. vertical-align: top;
  595. }
  596. .ui.pagination.menu.floated {
  597. display: block;
  598. }
  599. /* active */
  600. .ui.pagination.menu .active.item {
  601. border-top: none;
  602. padding-top: 0.83em;
  603. background-color: rgba(0, 0, 0, 0.05);
  604. -webkit-box-shadow: none;
  605. -moz-box-shadow: none;
  606. box-shadow: none;
  607. }
  608. /*--------------
  609. Secondary
  610. ---------------*/
  611. .ui.secondary.menu {
  612. background-color: transparent;
  613. -webkit-border-radius: 0px;
  614. -moz-border-radius: 0px;
  615. border-radius: 0px;
  616. -webkit-box-shadow: none;
  617. -moz-box-shadow: none;
  618. box-shadow: none;
  619. }
  620. .ui.secondary.menu > .menu > .item,
  621. .ui.secondary.menu > .item {
  622. -webkit-box-shadow: none;
  623. -moz-box-shadow: none;
  624. box-shadow: none;
  625. border: none;
  626. height: auto !important;
  627. margin: 0em 0.25em;
  628. padding: 0.5em 1em;
  629. -webkit-border-radius: 0.3125em;
  630. -moz-border-radius: 0.3125em;
  631. border-radius: 0.3125em;
  632. }
  633. .ui.secondary.menu > .menu > .item:before,
  634. .ui.secondary.menu > .item:before {
  635. display: none !important;
  636. }
  637. .ui.secondary.menu .item > .input input {
  638. background-color: transparent;
  639. border: none;
  640. }
  641. .ui.secondary.menu .link.item,
  642. .ui.secondary.menu a.item {
  643. opacity: 0.8;
  644. -webkit-transition: none;
  645. -moz-transition: none;
  646. -o-transition: none;
  647. -ms-transition: none;
  648. transition: none;
  649. }
  650. .ui.secondary.menu .header.item {
  651. border-left: 0.1em solid rgba(0, 0, 0, 0.1);
  652. background-color: transparent;
  653. -webkit-border-radius: 0em;
  654. -moz-border-radius: 0em;
  655. border-radius: 0em;
  656. }
  657. /* hover */
  658. .ui.secondary.menu .link.item:hover,
  659. .ui.secondary.menu a.item:hover {
  660. opacity: 1;
  661. }
  662. /* active */
  663. .ui.secondary.menu > .menu > .active.item,
  664. .ui.secondary.menu > .active.item {
  665. background-color: rgba(0, 0, 0, 0.08);
  666. opacity: 1;
  667. -webkit-box-shadow: none;
  668. -moz-box-shadow: none;
  669. box-shadow: none;
  670. }
  671. .ui.secondary.vertical.menu > .active.item {
  672. -webkit-border-radius: 0.3125em;
  673. -moz-border-radius: 0.3125em;
  674. border-radius: 0.3125em;
  675. }
  676. /* inverted */
  677. .ui.secondary.inverted.menu .link.item,
  678. .ui.secondary.inverted.menu a.item {
  679. color: rgba(255, 255, 255, 0.5);
  680. }
  681. .ui.secondary.inverted.menu .link.item:hover,
  682. .ui.secondary.inverted.menu a.item:hover {
  683. color: rgba(255, 255, 255, 0.9);
  684. }
  685. .ui.secondary.inverted.menu > .active.item {
  686. background-color: rgba(255, 255, 255, 0.9);
  687. }
  688. /* disable variations */
  689. .ui.secondary.item.menu > .item {
  690. margin: 0em;
  691. }
  692. .ui.secondary.attached.menu {
  693. -webkit-box-shadow: none;
  694. -moz-box-shadow: none;
  695. box-shadow: none;
  696. }
  697. /*---------------------
  698. Secondary Pointing
  699. -----------------------*/
  700. .ui.secondary.pointing.menu {
  701. border-bottom: 3px solid rgba(0, 0, 0, 0.1);
  702. }
  703. .ui.secondary.pointing.menu > .menu > .item,
  704. .ui.secondary.pointing.menu > .item {
  705. margin: 0em 0em -3px;
  706. padding: 0.6em 0.95em;
  707. border-bottom: 3px solid rgba(0, 0, 0, 0);
  708. -webkit-border-radius: 0em;
  709. -moz-border-radius: 0em;
  710. border-radius: 0em;
  711. -webkit-transition: color 0.2s
  712. ;
  713. -moz-transition: color 0.2s
  714. ;
  715. -o-transition: color 0.2s
  716. ;
  717. -ms-transition: color 0.2s
  718. ;
  719. transition: color 0.2s
  720. ;
  721. }
  722. /* Item Types */
  723. .ui.secondary.pointing.menu .header.item {
  724. border-left-width: 0px;
  725. font-weight: bold;
  726. }
  727. .ui.secondary.pointing.menu .text.item {
  728. box-shadow: none !important;
  729. }
  730. .ui.secondary.pointing.menu > .menu > .item:after,
  731. .ui.secondary.pointing.menu > .item:after {
  732. display: none;
  733. }
  734. /* Hover */
  735. .ui.secondary.pointing.menu > .menu > .link.item:hover,
  736. .ui.secondary.pointing.menu > .link.item:hover,
  737. .ui.secondary.pointing.menu > .menu > a.item:hover,
  738. .ui.secondary.pointing.menu > a.item:hover {
  739. background-color: transparent;
  740. color: rgba(0, 0, 0, 0.7);
  741. }
  742. /* Down */
  743. .ui.secondary.pointing.menu > .menu > .link.item:active,
  744. .ui.secondary.pointing.menu > .link.item:active,
  745. .ui.secondary.pointing.menu > .menu > a.item:active,
  746. .ui.secondary.pointing.menu > a.item:active {
  747. background-color: transparent;
  748. border-color: rgba(0, 0, 0, 0.2);
  749. }
  750. /* Active */
  751. .ui.secondary.pointing.menu > .menu > .item.active,
  752. .ui.secondary.pointing.menu > .item.active {
  753. background-color: transparent;
  754. border-color: rgba(0, 0, 0, 0.4);
  755. -webkit-box-shadow: none;
  756. -moz-box-shadow: none;
  757. box-shadow: none;
  758. }
  759. /*---------------------
  760. Secondary Vertical
  761. -----------------------*/
  762. .ui.secondary.vertical.pointing.menu {
  763. border: none;
  764. border-left: 3px solid rgba(0, 0, 0, 0.1);
  765. }
  766. .ui.secondary.vertical.menu > .item {
  767. border: none;
  768. margin: 0em 0em 0.3em;
  769. padding: 0.6em 0.8em;
  770. -webkit-border-radius: 0.1875em;
  771. -moz-border-radius: 0.1875em;
  772. border-radius: 0.1875em;
  773. }
  774. .ui.secondary.vertical.menu > .header.item {
  775. -webkit-border-radius: 0em;
  776. -moz-border-radius: 0em;
  777. border-radius: 0em;
  778. }
  779. .ui.secondary.vertical.pointing.menu > .item {
  780. margin: 0em 0em 0em -3px;
  781. border-bottom: none;
  782. border-left: 3px solid transparent;
  783. -webkit-border-radius: 0em;
  784. -moz-border-radius: 0em;
  785. border-radius: 0em;
  786. }
  787. /* Hover */
  788. .ui.secondary.vertical.pointing.menu > .item.hover,
  789. .ui.secondary.vertical.pointing.menu > .item:hover {
  790. background-color: transparent;
  791. color: rgba(0, 0, 0, 0.7);
  792. }
  793. /* Down */
  794. .ui.secondary.vertical.pointing.menu > .item:active {
  795. background-color: transparent;
  796. border-color: rgba(0, 0, 0, 0.2);
  797. }
  798. /* Active */
  799. .ui.secondary.vertical.pointing.menu > .item.active {
  800. background-color: transparent;
  801. border-color: rgba(0, 0, 0, 0.4);
  802. color: rgba(0, 0, 0, 0.85);
  803. }
  804. /*--------------
  805. Inverted
  806. ---------------*/
  807. .ui.secondary.inverted.menu {
  808. background-color: transparent;
  809. }
  810. .ui.secondary.inverted.pointing.menu {
  811. border-bottom: 3px solid rgba(255, 255, 255, 0.1);
  812. }
  813. .ui.secondary.inverted.pointing.menu > .item {
  814. color: rgba(255, 255, 255, 0.7);
  815. }
  816. /* Hover */
  817. .ui.secondary.inverted.pointing.menu > .item.hover,
  818. .ui.secondary.inverted.pointing.menu > .item:hover {
  819. color: rgba(255, 255, 255, 0.85);
  820. }
  821. /* Down */
  822. .ui.secondary.inverted.pointing.menu > .item:active {
  823. border-color: rgba(255, 255, 255, 0.4) !important;
  824. }
  825. /* Active */
  826. .ui.secondary.inverted.pointing.menu > .item.active {
  827. border-color: rgba(255, 255, 255, 0.8) !important;
  828. color: #ffffff;
  829. }
  830. /*---------------------
  831. Inverted Vertical
  832. ----------------------*/
  833. .ui.secondary.inverted.vertical.pointing.menu {
  834. border-left: 3px solid rgba(255, 255, 255, 0.1);
  835. border-bottom: none;
  836. }
  837. /*--------------
  838. Text Menu
  839. ---------------*/
  840. .ui.text.menu {
  841. background-color: transparent;
  842. margin: 1rem -1rem;
  843. -moz-border-radius: 0px;
  844. -webkit-border-radius: 0px;
  845. border-radius: 0px;
  846. -webkit-box-shadow: none;
  847. -moz-box-shadow: none;
  848. box-shadow: none;
  849. }
  850. .ui.text.menu > .item {
  851. opacity: 0.8;
  852. margin: 0em 1em;
  853. padding: 0em;
  854. height: auto !important;
  855. -webkit-border-radius: 0px;
  856. -moz-border-radius: 0px;
  857. border-radius: 0px;
  858. -webkit-box-shadow: none;
  859. -moz-box-shadow: none;
  860. box-shadow: none;
  861. -webkit-transition: opacity 0.2s ease
  862. ;
  863. -moz-transition: opacity 0.2s ease
  864. ;
  865. -o-transition: opacity 0.2s ease
  866. ;
  867. -ms-transition: opacity 0.2s ease
  868. ;
  869. transition: opacity 0.2s ease
  870. ;
  871. }
  872. .ui.text.menu > .item:before {
  873. display: none !important;
  874. }
  875. .ui.text.menu .header.item {
  876. background-color: transparent;
  877. opacity: 1;
  878. color: rgba(50, 50, 50, 0.8);
  879. font-size: 0.875rem;
  880. padding: 0em;
  881. text-transform: uppercase;
  882. font-weight: bold;
  883. }
  884. /*--- fluid text ---*/
  885. .ui.text.item.menu .item {
  886. margin: 0em;
  887. }
  888. /*--- vertical text ---*/
  889. .ui.vertical.text.menu {
  890. margin: 1rem 0em;
  891. }
  892. .ui.vertical.text.menu:first-child {
  893. margin-top: 0rem;
  894. }
  895. .ui.vertical.text.menu:last-child {
  896. margin-bottom: 0rem;
  897. }
  898. .ui.vertical.text.menu .item {
  899. float: right;
  900. clear: right;
  901. margin: 0.5em 0em;
  902. }
  903. .ui.vertical.text.menu .item > .icon {
  904. float: none;
  905. margin: 0em 0em 0em 0.83em;
  906. }
  907. .ui.vertical.text.menu .header.item {
  908. margin: 0.8em 0em;
  909. }
  910. /*--- hover ---*/
  911. .ui.text.menu .item.hover,
  912. .ui.text.menu .item:hover {
  913. opacity: 1;
  914. background-color: transparent;
  915. }
  916. /*--- active ---*/
  917. .ui.text.menu .active.item {
  918. background-color: transparent;
  919. padding: 0em;
  920. border: none;
  921. opacity: 1;
  922. font-weight: bold;
  923. -webkit-box-shadow: none;
  924. -moz-box-shadow: none;
  925. box-shadow: none;
  926. }
  927. /* disable variations */
  928. .ui.text.pointing.menu .active.item:after {
  929. -webkit-box-shadow: none;
  930. -moz-box-shadow: none;
  931. box-shadow: none;
  932. }
  933. .ui.text.attached.menu {
  934. -webkit-box-shadow: none;
  935. -moz-box-shadow: none;
  936. box-shadow: none;
  937. }
  938. .ui.inverted.text.menu,
  939. .ui.inverted.text.menu .item,
  940. .ui.inverted.text.menu .item:hover,
  941. .ui.inverted.text.menu .item.active {
  942. background-color: transparent;
  943. }
  944. /*--------------
  945. Icon Only
  946. ---------------*/
  947. .ui.icon.menu,
  948. .ui.vertical.icon.menu {
  949. width: auto;
  950. display: inline-block;
  951. height: auto;
  952. }
  953. .ui.icon.menu > .item {
  954. height: auto;
  955. text-align: center;
  956. color: rgba(60, 60, 60, 0.7);
  957. }
  958. .ui.icon.menu > .item > .icon {
  959. display: block;
  960. float: none !important;
  961. opacity: 1;
  962. margin: 0em auto !important;
  963. }
  964. .ui.icon.menu .icon:before {
  965. opacity: 1;
  966. }
  967. /* Item Icon Only */
  968. .ui.menu .icon.item .icon {
  969. margin: 0em;
  970. }
  971. .ui.vertical.icon.menu {
  972. float: none;
  973. }
  974. /*--- inverted ---*/
  975. .ui.inverted.icon.menu .item {
  976. color: rgba(255, 255, 255, 0.8);
  977. }
  978. .ui.inverted.icon.menu .icon {
  979. color: #ffffff;
  980. }
  981. /*--------------
  982. Labeled Icon
  983. ---------------*/
  984. .ui.labeled.icon.menu {
  985. text-align: center;
  986. }
  987. .ui.labeled.icon.menu > .item > .icon {
  988. display: block;
  989. font-size: 1.5em !important;
  990. margin: 0em auto 0.3em !important;
  991. }
  992. /*******************************
  993. Variations
  994. *******************************/
  995. /*--------------
  996. Colors
  997. ---------------*/
  998. /*--- Light Colors ---*/
  999. .ui.menu .green.active.item,
  1000. .ui.green.menu .active.item {
  1001. border-color: #A1CF64 !important;
  1002. color: #A1CF64 !important;
  1003. }
  1004. .ui.menu .red.active.item,
  1005. .ui.red.menu .active.item {
  1006. border-color: #D95C5C !important;
  1007. color: #D95C5C !important;
  1008. }
  1009. .ui.menu .blue.active.item,
  1010. .ui.blue.menu .active.item {
  1011. border-color: #6ECFF5 !important;
  1012. color: #6ECFF5 !important;
  1013. }
  1014. .ui.menu .purple.active.item,
  1015. .ui.purple.menu .active.item {
  1016. border-color: #564F8A !important;
  1017. color: #564F8A !important;
  1018. }
  1019. .ui.menu .orange.active.item,
  1020. .ui.orange.menu .active.item {
  1021. border-color: #F05940 !important;
  1022. color: #F05940 !important;
  1023. }
  1024. .ui.menu .teal.active.item,
  1025. .ui.teal.menu .active.item {
  1026. border-color: #00B5AD !important;
  1027. color: #00B5AD !important;
  1028. }
  1029. /*--------------
  1030. Inverted
  1031. ---------------*/
  1032. .ui.inverted.menu {
  1033. background-color: #333333;
  1034. box-shadow: none;
  1035. }
  1036. .ui.inverted.menu .header.item {
  1037. margin: 0em;
  1038. background-color: rgba(0, 0, 0, 0.3);
  1039. -webkit-box-shadow: none;
  1040. -moz-box-shadow: none;
  1041. box-shadow: none;
  1042. }
  1043. .ui.inverted.menu .item,
  1044. .ui.inverted.menu .item > a {
  1045. color: #FFFFFF;
  1046. }
  1047. .ui.inverted.menu .item .item,
  1048. .ui.inverted.menu .item .item > a {
  1049. color: rgba(255, 255, 255, 0.8);
  1050. }
  1051. .ui.inverted.menu .dropdown.item .menu .item,
  1052. .ui.inverted.menu .dropdown.item .menu .item a {
  1053. color: rgba(0, 0, 0, 0.75) !important;
  1054. }
  1055. .ui.inverted.menu .item.disabled,
  1056. .ui.inverted.menu .item.disabled:hover,
  1057. .ui.inverted.menu .item.disabled.hover {
  1058. color: rgba(255, 255, 255, 0.2);
  1059. }
  1060. /*--- Border ---*/
  1061. .ui.inverted.menu .item:before {
  1062. background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1063. background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1064. background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1065. background-image: -ms-linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1066. background-image: linear-gradient(top, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1067. }
  1068. .ui.vertical.inverted.menu .item:before {
  1069. background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1070. background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1071. background-image: -o-linear-gradient(right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1072. background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1073. background-image: linear-gradient(right, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  1074. }
  1075. /*--- Hover ---*/
  1076. .ui.link.inverted.menu .item:hover,
  1077. .ui.inverted.menu .item.hover,
  1078. .ui.inverted.menu .link.item:hover,
  1079. .ui.inverted.menu a.item:hover,
  1080. .ui.inverted.menu .dropdown.item.hover,
  1081. .ui.inverted.menu .dropdown.item:hover {
  1082. background-color: rgba(255, 255, 255, 0.1);
  1083. }
  1084. .ui.inverted.menu a.item:hover,
  1085. .ui.inverted.menu .item.hover,
  1086. .ui.inverted.menu .item > a:hover,
  1087. .ui.inverted.menu .item .menu a.item:hover,
  1088. .ui.inverted.menu .item .menu a.item.hover,
  1089. .ui.inverted.menu .item .menu .link.item:hover,
  1090. .ui.inverted.menu .item .menu .link.item.hover {
  1091. color: #ffffff;
  1092. }
  1093. /*--- Down ---*/
  1094. .ui.inverted.menu a.item:active,
  1095. .ui.inverted.menu .dropdown.item:active,
  1096. .ui.inverted.menu .link.item:active,
  1097. .ui.inverted.menu a.item:active {
  1098. background-color: rgba(255, 255, 255, 0.15);
  1099. }
  1100. /*--- Active ---*/
  1101. .ui.inverted.menu .active.item {
  1102. box-shadow: none !important;
  1103. background-color: rgba(255, 255, 255, 0.2);
  1104. }
  1105. .ui.inverted.menu .active.item,
  1106. .ui.inverted.menu .active.item a {
  1107. color: #ffffff !important;
  1108. }
  1109. .ui.inverted.vertical.menu .item .menu .active.item {
  1110. background-color: rgba(255, 255, 255, 0.2);
  1111. color: #ffffff;
  1112. }
  1113. /*--- Pointers ---*/
  1114. .ui.inverted.pointing.menu .active.item:after {
  1115. background-color: #505050;
  1116. box-shadow: none;
  1117. }
  1118. .ui.inverted.pointing.menu .active.item:hover:after {
  1119. background-color: #3B3B3B;
  1120. }
  1121. /*--------------
  1122. Selection
  1123. ---------------*/
  1124. .ui.selection.menu > .item {
  1125. color: rgba(0, 0, 0, 0.4);
  1126. }
  1127. .ui.selection.menu > .item:hover {
  1128. color: rgba(0, 0, 0, 0.6);
  1129. }
  1130. .ui.selection.menu > .item.active {
  1131. color: rgba(0, 0, 0, 0.85);
  1132. }
  1133. .ui.inverted.selection.menu > .item {
  1134. color: rgba(255, 255, 255, 0.4);
  1135. }
  1136. .ui.inverted.selection.menu > .item:hover {
  1137. color: rgba(255, 255, 255, 0.9);
  1138. }
  1139. .ui.inverted.selection.menu > .item.active {
  1140. color: #FFFFFF;
  1141. }
  1142. /*--------------
  1143. Floated
  1144. ---------------*/
  1145. .ui.floated.menu {
  1146. float: right;
  1147. margin: 0rem 0rem 0rem 0.5rem;
  1148. }
  1149. .ui.right.floated.menu {
  1150. float: left;
  1151. margin: 0rem 0.5rem 0rem 0rem;
  1152. }
  1153. /*--------------
  1154. Inverted Colors
  1155. ---------------*/
  1156. /*--- Light Colors ---*/
  1157. .ui.grey.menu {
  1158. background-color: #F0F0F0;
  1159. }
  1160. /*--- Inverted Colors ---*/
  1161. .ui.inverted.green.menu {
  1162. background-color: #A1CF64;
  1163. }
  1164. .ui.inverted.green.pointing.menu .active.item:after {
  1165. background-color: #A1CF64;
  1166. }
  1167. .ui.inverted.red.menu {
  1168. background-color: #D95C5C;
  1169. }
  1170. .ui.inverted.red.pointing.menu .active.item:after {
  1171. background-color: #F16883;
  1172. }
  1173. .ui.inverted.blue.menu {
  1174. background-color: #6ECFF5;
  1175. }
  1176. .ui.inverted.blue.pointing.menu .active.item:after {
  1177. background-color: #6ECFF5;
  1178. }
  1179. .ui.inverted.purple.menu {
  1180. background-color: #564F8A;
  1181. }
  1182. .ui.inverted.purple.pointing.menu .active.item:after {
  1183. background-color: #564F8A;
  1184. }
  1185. .ui.inverted.orange.menu {
  1186. background-color: #F05940;
  1187. }
  1188. .ui.inverted.orange.pointing.menu .active.item:after {
  1189. background-color: #F05940;
  1190. }
  1191. .ui.inverted.teal.menu {
  1192. background-color: #00B5AD;
  1193. }
  1194. .ui.inverted.teal.pointing.menu .active.item:after {
  1195. background-color: #00B5AD;
  1196. }
  1197. /*--------------
  1198. Fitted
  1199. ---------------*/
  1200. .ui.fitted.menu .item,
  1201. .ui.fitted.menu .item .menu .item,
  1202. .ui.menu .fitted.item {
  1203. padding: 0em;
  1204. }
  1205. .ui.horizontally.fitted.menu .item,
  1206. .ui.horizontally.fitted.menu .item .menu .item,
  1207. .ui.menu .horizontally.fitted.item {
  1208. padding-top: 0.83em;
  1209. padding-bottom: 0.83em;
  1210. }
  1211. .ui.vertically.fitted.menu .item,
  1212. .ui.vertically.fitted.menu .item .menu .item,
  1213. .ui.menu .vertically.fitted.item {
  1214. padding-right: 0.95em;
  1215. padding-left: 0.95em;
  1216. }
  1217. /*--------------
  1218. Borderless
  1219. ---------------*/
  1220. .ui.borderless.menu .item:before,
  1221. .ui.borderless.menu .item .menu .item:before,
  1222. .ui.menu .borderless.item:before {
  1223. background-image: none;
  1224. }
  1225. /*-------------------
  1226. Compact
  1227. --------------------*/
  1228. .ui.compact.menu {
  1229. display: inline-block;
  1230. margin: 0em;
  1231. vertical-align: middle;
  1232. }
  1233. .ui.compact.vertical.menu {
  1234. width: auto !important;
  1235. }
  1236. .ui.compact.vertical.menu .item:last-child::before {
  1237. display: block;
  1238. }
  1239. /*-------------------
  1240. Fluid
  1241. --------------------*/
  1242. .ui.menu.fluid,
  1243. .ui.vertical.menu.fluid {
  1244. display: block;
  1245. width: 100% !important;
  1246. }
  1247. /*-------------------
  1248. Evenly Sized
  1249. --------------------*/
  1250. .ui.item.menu,
  1251. .ui.item.menu .item {
  1252. width: 100%;
  1253. padding-right: 0px !important;
  1254. padding-left: 0px !important;
  1255. text-align: center;
  1256. }
  1257. .ui.menu.two.item .item {
  1258. width: 50%;
  1259. }
  1260. .ui.menu.three.item .item {
  1261. width: 33.333%;
  1262. }
  1263. .ui.menu.four.item .item {
  1264. width: 25%;
  1265. }
  1266. .ui.menu.five.item .item {
  1267. width: 20%;
  1268. }
  1269. .ui.menu.six.item .item {
  1270. width: 16.666%;
  1271. }
  1272. .ui.menu.seven.item .item {
  1273. width: 14.285%;
  1274. }
  1275. .ui.menu.eight.item .item {
  1276. width: 12.500%;
  1277. }
  1278. .ui.menu.nine.item .item {
  1279. width: 11.11%;
  1280. }
  1281. .ui.menu.ten.item .item {
  1282. width: 10.0%;
  1283. }
  1284. .ui.menu.eleven.item .item {
  1285. width: 9.09%;
  1286. }
  1287. .ui.menu.twelve.item .item {
  1288. width: 8.333%;
  1289. }
  1290. /*--------------
  1291. Fixed
  1292. ---------------*/
  1293. .ui.menu.fixed {
  1294. position: fixed;
  1295. z-index: 10;
  1296. margin: 0em;
  1297. border: none;
  1298. width: 100%;
  1299. }
  1300. .ui.menu.fixed,
  1301. .ui.menu.fixed .item:first-child,
  1302. .ui.menu.fixed .item:last-child {
  1303. -webkit-border-radius: !important 0px;
  1304. -moz-border-radius: !important 0px;
  1305. border-radius: !important 0px;
  1306. }
  1307. .ui.menu.fixed.top {
  1308. top: 0px;
  1309. right: 0px;
  1310. left: auto;
  1311. bottom: auto;
  1312. }
  1313. .ui.menu.fixed.right {
  1314. top: 0px;
  1315. left: 0px;
  1316. right: auto;
  1317. bottom: auto;
  1318. width: auto;
  1319. height: 100%;
  1320. }
  1321. .ui.menu.fixed.bottom {
  1322. bottom: 0px;
  1323. right: 0px;
  1324. top: auto;
  1325. left: auto;
  1326. }
  1327. .ui.menu.fixed.left {
  1328. top: 0px;
  1329. right: 0px;
  1330. left: auto;
  1331. bottom: auto;
  1332. width: auto;
  1333. height: 100%;
  1334. }
  1335. /*-------------------
  1336. Pointing
  1337. --------------------*/
  1338. .ui.pointing.menu .active.item:after {
  1339. position: absolute;
  1340. bottom: -0.35em;
  1341. right: 50%;
  1342. content: "";
  1343. margin-right: -0.3em;
  1344. width: 0.6em;
  1345. height: 0.6em;
  1346. border: none;
  1347. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  1348. border-left: 1px solid rgba(0, 0, 0, 0.1);
  1349. background-image: none;
  1350. -webkit-transform: rotate(45deg);
  1351. -moz-transform: rotate(45deg);
  1352. transform: rotate(45deg);
  1353. z-index: 2;
  1354. -webkit-transition: background 0.2s ease
  1355. ;
  1356. -moz-transition: background 0.2s ease
  1357. ;
  1358. -o-transition: background 0.2s ease
  1359. ;
  1360. -ms-transition: background 0.2s ease
  1361. ;
  1362. transition: background 0.2s ease
  1363. ;
  1364. }
  1365. /* Don't double up pointers */
  1366. .ui.pointing.menu .active.item .menu .active.item:after {
  1367. display: none;
  1368. }
  1369. .ui.vertical.pointing.menu .active.item:after {
  1370. position: absolute;
  1371. top: 50%;
  1372. margin-top: -0.3em;
  1373. left: -0.4em;
  1374. bottom: auto;
  1375. right: auto;
  1376. border: none;
  1377. border-top: 1px solid rgba(0, 0, 0, 0.1);
  1378. border-left: 1px solid rgba(0, 0, 0, 0.1);
  1379. }
  1380. /* Colors */
  1381. .ui.pointing.menu .active.item:after {
  1382. background-color: #FCFCFC;
  1383. }
  1384. .ui.pointing.menu .active.item.hover:after,
  1385. .ui.pointing.menu .active.item:hover:after {
  1386. background-color: #FAFAFA;
  1387. }
  1388. .ui.vertical.pointing.menu .menu .active.item:after {
  1389. background-color: #F4F4F4;
  1390. }
  1391. .ui.pointing.menu a.active.item:active:after {
  1392. background-color: #F0F0F0;
  1393. }
  1394. /*--------------
  1395. Attached
  1396. ---------------*/
  1397. .ui.menu.attached {
  1398. margin: 0rem;
  1399. -moz-border-radius: 0px;
  1400. -webkit-border-radius: 0px;
  1401. border-radius: 0px;
  1402. /* avoid rgba multiplying */
  1403. -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  1404. -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  1405. box-shadow: 0px 0px 0px 1px #DDDDDD;
  1406. }
  1407. .ui.top.attached.menu {
  1408. -moz-border-radius: 0.1875em 0.1875em 0px 0px;
  1409. -webkit-border-radius: 0.1875em 0.1875em 0px 0px;
  1410. border-radius: 0.1875em 0.1875em 0px 0px;
  1411. }
  1412. .ui.menu.bottom.attached {
  1413. -moz-border-radius: 0px 0px 0.1875em 0.1875em;
  1414. -webkit-border-radius: 0px 0px 0.1875em 0.1875em;
  1415. border-radius: 0px 0px 0.1875em 0.1875em;
  1416. }
  1417. /*--------------
  1418. Sizes
  1419. ---------------*/
  1420. .ui.small.menu .item {
  1421. font-size: 0.875rem;
  1422. }
  1423. .ui.small.menu:not(.vertical) .item > .input input {
  1424. padding-top: 0.4em;
  1425. padding-bottom: 0.4em;
  1426. }
  1427. .ui.small.vertical.menu {
  1428. width: 13rem;
  1429. }
  1430. .ui.menu .item {
  1431. font-size: 1rem;
  1432. }
  1433. .ui.vertical.menu {
  1434. width: 15rem;
  1435. }
  1436. .ui.large.menu .item {
  1437. font-size: 1.125rem;
  1438. }
  1439. .ui.large.menu .item .item {
  1440. font-size: 0.875rem;
  1441. }
  1442. .ui.large.menu:not(.vertical) .item > .input input {
  1443. top: -0.125em;
  1444. padding-bottom: 0.6em;
  1445. padding-top: 0.6em;
  1446. }
  1447. .ui.large.menu .dropdown.item .item {
  1448. font-size: 1rem;
  1449. }
  1450. .ui.large.vertical.menu {
  1451. width: 18rem;
  1452. }