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.

971 lines
23 KiB

11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
11 years ago
  1. /*
  2. * # Semantic Menu - Flat
  3. * http://github.com/quirkyinc/semantic
  4. *
  5. *
  6. * Copyright 2013 Contributors
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. * Released: April 17 2013
  11. */
  12. /*******************************
  13. Standard
  14. *******************************/
  15. /*--------------
  16. Menu
  17. ---------------*/
  18. .ui.menu {
  19. background-color: #FFFFFF;
  20. font-size: 0px;
  21. -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  22. -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  23. box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
  24. -webkit-border-radius: 5px;
  25. -moz-border-radius: 5px;
  26. border-radius: 5px;
  27. }
  28. .ui.menu:after {
  29. content: ".";
  30. display: block;
  31. height: 0;
  32. clear: both;
  33. visibility: hidden;
  34. }
  35. .ui.menu > .item:first-child {
  36. border-radius: 5px 0px 0px 5px;
  37. }
  38. .ui.menu > .item:last-child {
  39. border-radius: 0px 5px 5px 0px;
  40. }
  41. .ui.menu .item,
  42. .ui.menu .item > a {
  43. -webkit-user-select: none;
  44. -moz-user-select: none;
  45. -ms-user-select: none;
  46. user-select: none;
  47. -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  48. vertical-align: middle;
  49. line-height: 1.25em;
  50. min-height: 1.25em;
  51. -webkit-box-sizing: border-box;
  52. -moz-box-sizing: border-box;
  53. -ms-box-sizing: border-box;
  54. box-sizing: border-box;
  55. -webkit-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  56. -moz-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  57. -o-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  58. -ms-transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  59. transition: opacity 0.1s linear, background 0.1s linear, box-shadow 0.1s linear;
  60. }
  61. /*--------------
  62. Colors
  63. ---------------*/
  64. /* Text Color */
  65. .ui.menu .item .header {
  66. color: rgba(50, 50, 50, 0.95);
  67. }
  68. .ui.menu .item,
  69. .ui.menu .item > a {
  70. color: rgba(80, 80, 80, 0.95);
  71. }
  72. .ui.menu .item > a:hover {
  73. background-color: rgba(0, 0, 0, 0.03);
  74. color: rgba(30, 30, 30, 0.95);
  75. }
  76. .ui.menu .item .item,
  77. .ui.menu .item .item > a {
  78. color: rgba(30, 30, 30, 0.8);
  79. }
  80. .ui.menu .item .item .item,
  81. .ui.menu .item .item .item > a {
  82. color: rgba(30, 30, 30, 0.6);
  83. }
  84. .ui.menu .dropdown.item .menu .item,
  85. .ui.menu .dropdown.item .menu .item a {
  86. color: rgba(0, 0, 0, 0.75);
  87. }
  88. /* Hover */
  89. .ui.menu .item .menu a.item:hover,
  90. .ui.menu .item .menu a.item.hover,
  91. .ui.menu .item .menu .link.item:hover,
  92. .ui.menu .item .menu .link.item.hover {
  93. color: rgba(35, 35, 35, 0.95);
  94. }
  95. .ui.menu .dropdown.item .menu .item a:hover {
  96. color: rgba(0, 0, 0, 0.9);
  97. }
  98. /* Active */
  99. .ui.menu .active.item,
  100. .ui.menu .active.item a {
  101. color: rgba(0, 0, 0, 0.95);
  102. -moz-border-radius: 0px;
  103. -webkit-border-radius: 0px;
  104. border-radius: 0px;
  105. }
  106. /*--------------
  107. Items
  108. ---------------*/
  109. .ui.menu .item {
  110. position: relative;
  111. display: inline-block;
  112. padding: 0.75em 0.95em;
  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 .item > a {
  119. display: block;
  120. margin: -0.75em -0.95em;
  121. padding: 0.75em 0.95em;
  122. }
  123. .ui.menu .menu.left,
  124. .ui.menu .item.left {
  125. float: left;
  126. }
  127. .ui.menu .menu.right,
  128. .ui.menu .item.right {
  129. float: right;
  130. }
  131. /*--------------
  132. Borders
  133. ---------------*/
  134. .ui.menu .item:before {
  135. position: absolute;
  136. content: '';
  137. top: 0%;
  138. right: 0px;
  139. width: 1px;
  140. height: 100%;
  141. 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%);
  142. 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%);
  143. 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%);
  144. 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%);
  145. 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%);
  146. }
  147. .ui.menu .menu.right .item:before,
  148. .ui.menu .item.right:before {
  149. right: auto;
  150. left: 0px;
  151. }
  152. /*--------------
  153. Text Content
  154. ---------------*/
  155. .ui.menu .text.item > *,
  156. .ui.menu .item > p:only-child {
  157. line-height: 1.3;
  158. }
  159. .ui.menu .item > p:first-child {
  160. margin-top: 0px;
  161. }
  162. .ui.menu .item > p:only-child {
  163. margin: 0px;
  164. }
  165. /*--------------
  166. Header
  167. ---------------*/
  168. .ui.menu .header.item {
  169. background-color: rgba(0, 0, 0, 0.15);
  170. font-weight: bold;
  171. -webkit-box-shadow: 0 -0.1em 0 0 rgba(0, 0, 0, 0.1) inset;
  172. -moz-box-shadow: 0 -0.1em 0 0 rgba(0, 0, 0, 0.1) inset;
  173. box-shadow: 0 -0.1em 0 0 rgba(0, 0, 0, 0.1) inset;
  174. }
  175. /*--------------
  176. Dropdowns
  177. ---------------*/
  178. .ui.menu .dropdown.item {
  179. box-shadow: none !important;
  180. z-index: 10;
  181. }
  182. .ui.menu .dropdown.item .menu {
  183. overflow: hidden;
  184. height: 0px;
  185. width: 0px;
  186. position: absolute;
  187. top: 100%;
  188. left: 0px;
  189. background-color: #FFFFFF;
  190. opacity: 0;
  191. border-top: 0.2em solid rgba(50, 50, 50, 0.8);
  192. -moz-border-radius: 0px 0px 5px 5px;
  193. -webkit-border-radius: 0px 0px 5px 5px;
  194. border-radius: 0px 0px 5px 5px;
  195. -webkit-transition: opacity 0.2s ease-out;
  196. -moz-transition: opacity 0.2s ease-out;
  197. -o-transition: opacity 0.2s ease-out;
  198. -ms-transition: opacity 0.2s ease-out;
  199. transition: opacity 0.2s ease-out;
  200. z-index: 11;
  201. }
  202. .ui.menu .dropdown.item .menu .item {
  203. border: none;
  204. border-top: 1px solid rgba(0, 0, 0, 0.1);
  205. font-size: 0.9em;
  206. display: block;
  207. color: rgba(0, 0, 0, 0.75);
  208. -webkit-touch-callout: none;
  209. -webkit-user-select: none;
  210. -khtml-user-select: none;
  211. -moz-user-select: none;
  212. -ms-user-select: none;
  213. user-select: none;
  214. }
  215. .ui.menu .dropdown.item .menu .active.item {
  216. font-weight: bold;
  217. }
  218. .ui.menu .dropdown.item .menu .item:first-child {
  219. border-top: none;
  220. }
  221. .ui.menu .dropdown.item:last-child .menu {
  222. left: auto;
  223. right: 0px;
  224. }
  225. /*--------------
  226. Labels
  227. ---------------*/
  228. .ui.menu .item > .label,
  229. .ui.menu .item > a > .label {
  230. font-size: 0.9em;
  231. line-height: 1.33;
  232. margin: -0.2em 0.6em;
  233. padding: 0.2em 0.6em;
  234. vertical-align: top;
  235. text-transform: none;
  236. }
  237. .ui.vertical.menu .item > .label,
  238. .ui.vertical.menu .item > a > .label {
  239. display: block;
  240. float: right;
  241. }
  242. /*--------------
  243. Images
  244. ---------------*/
  245. .ui.menu .item > img:only-child {
  246. display: block;
  247. max-width: 100%;
  248. margin: 0em auto;
  249. }
  250. /*******************************
  251. States
  252. *******************************/
  253. /*--------------
  254. Hover
  255. ---------------*/
  256. /* Pseudo states cautiously used for convenience */
  257. .ui.link.menu .item:hover,
  258. .ui.menu .item.hover,
  259. .ui.menu .link.item:hover,
  260. .ui.menu a.item:hover,
  261. .ui.menu .dropdown.item .menu .item.hover,
  262. .ui.menu .dropdown.item .menu .item:hover {
  263. cursor: pointer;
  264. background-color: rgba(0, 0, 0, 0.02);
  265. }
  266. .ui.menu .dropdown.item.hover,
  267. .ui.menu .dropdown.item:hover {
  268. background-color: rgba(0, 0, 0, 0.05);
  269. color: rgba(170, 170, 170, 0.6);
  270. -webkit-border-bottom-right-radius: 0em;
  271. -moz-border-bottom-right-radius: 0em;
  272. border-bottom-right-radius: 0em;
  273. -webkit-border-bottom-left-radius: 0em;
  274. -moz-border-bottom-left-radius: 0em;
  275. border-bottom-left-radius: 0em;
  276. }
  277. /* Dropdown Display */
  278. .ui.menu .dropdown.item:hover .menu {
  279. display: block;
  280. overflow: visible;
  281. min-width: 150px;
  282. width: 100%;
  283. height: auto;
  284. opacity: 1;
  285. border: 1px solid rgba(0, 0, 0, 0.1);
  286. border-top: 1px rgba(50, 50, 50, 0.8);
  287. border-top: none;
  288. -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  289. -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  290. box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  291. }
  292. /*--------------
  293. Down
  294. ---------------*/
  295. .ui.link.menu .item:active,
  296. .ui.menu .item.down,
  297. .ui.menu .link.item:active,
  298. .ui.menu a.item:active,
  299. .ui.menu .item > a:active,
  300. .ui.menu .dropdown.item .menu .item.down,
  301. .ui.menu .dropdown.item .menu .item:active {
  302. background-color: rgba(0, 0, 0, 0.05);
  303. }
  304. /*--------------
  305. Active
  306. ---------------*/
  307. .ui.menu .active.item {
  308. padding-top: 0.55em;
  309. border-top: 0.2em solid rgba(50, 50, 50, 0.8);
  310. color: rgba(0, 0, 0, 0.95);
  311. background-color: rgba(0, 0, 0, 0.01);
  312. }
  313. .ui.vertical.menu .active.item {
  314. border-top: none;
  315. border-left: 0.2em solid rgba(50, 50, 50, 0.8);
  316. padding-top: 0.75em;
  317. padding-left: 0.75em;
  318. }
  319. .ui.vertical.menu .active.item .menu .active.item {
  320. border-left: none;
  321. }
  322. .ui.vertical.menu .item .menu .active.item {
  323. padding-top: 0.5rem;
  324. padding-left: 1.3rem;
  325. }
  326. /*--------------
  327. Disabled
  328. ---------------*/
  329. .ui.menu .item.disabled,
  330. .ui.menu .item.disabled:hover,
  331. .ui.menu .item.disabled.hover {
  332. cursor: default;
  333. opacity: 0.3;
  334. background-color: transparent;
  335. }
  336. /*******************************
  337. Variations
  338. *******************************/
  339. /*--------------
  340. Inverted
  341. ---------------*/
  342. .ui.inverted.menu {
  343. background-color: #333333;
  344. box-shadow: none;
  345. }
  346. .ui.inverted.menu .header.item {
  347. background-color: rgba(255, 255, 255, 0.15);
  348. -webkit-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
  349. -moz-box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
  350. box-shadow: 0px -0.1em 0px 0px rgba(255, 255, 255, 0.1) inset;
  351. }
  352. .ui.inverted.menu .item,
  353. .ui.inverted.menu .item > a {
  354. color: #FFFFFF;
  355. }
  356. .ui.inverted.menu .item .item,
  357. .ui.inverted.menu .item .item > a {
  358. color: rgba(255, 255, 255, 0.8);
  359. }
  360. .ui.inverted.menu .item .item > a:hover {
  361. background-color: rgba(255, 255, 255, 0.03);
  362. color: rgba(255, 255, 255, 0.9);
  363. }
  364. .ui.inverted.menu .dropdown.item .menu .item,
  365. .ui.inverted.menu .dropdown.item .menu .item a {
  366. color: rgba(0, 0, 0, 0.75);
  367. }
  368. /*--- Border ---*/
  369. .ui.inverted.menu .item:before {
  370. 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%);
  371. 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%);
  372. 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%);
  373. 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%);
  374. 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%);
  375. }
  376. .ui.vertical.inverted.menu .item:before {
  377. background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  378. background-image: -moz-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  379. background-image: -o-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  380. background-image: -ms-linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  381. background-image: linear-gradient(left, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.03) 100%);
  382. }
  383. /*--- Hover ---*/
  384. .ui.link.inverted.menu .item:hover,
  385. .ui.inverted.menu .item.hover,
  386. .ui.inverted.menu .link.item:hover,
  387. .ui.inverted.menu a.item:hover,
  388. .ui.inverted.menu .dropdown.item.hover,
  389. .ui.inverted.menu .dropdown.item:hover {
  390. background-color: rgba(255, 255, 255, 0.1);
  391. }
  392. .ui.inverted.menu .item .menu a.item:hover,
  393. .ui.inverted.menu .item .menu a.item.hover,
  394. .ui.inverted.menu .item .menu .link.item:hover,
  395. .ui.inverted.menu .item .menu .link.item.hover {
  396. color: #ffffff;
  397. }
  398. /*--- Down ---*/
  399. .ui.inverted.menu .item.down,
  400. .ui.inverted.menu .dropdown.item:active,
  401. .ui.inverted.menu .link.item:active,
  402. .ui.inverted.menu a.item:active {
  403. background-color: rgba(255, 255, 255, 0.15);
  404. }
  405. /*--- Active ---*/
  406. .ui.inverted.menu .active.item {
  407. border-color: transparent;
  408. background-color: rgba(255, 255, 255, 0.2);
  409. }
  410. .ui.inverted.menu .active.item,
  411. .ui.inverted.menu .active.item a {
  412. color: #ffffff;
  413. }
  414. /*--- Pointers ---*/
  415. .ui.inverted.pointing.menu .active.item:after {
  416. background-color: #505050;
  417. box-shadow: none;
  418. }
  419. .ui.inverted.pointing.menu .active.item:hover:after {
  420. background-color: #3B3B3B;
  421. }
  422. /*--------------
  423. Colors
  424. ---------------*/
  425. /*--- Light Colors ---*/
  426. .ui.grey.menu {
  427. background-color: #F0F0F0;
  428. }
  429. /*--- Inverted Colors ---*/
  430. .ui.green.menu .active.item {
  431. border-color: #A1CF64;
  432. }
  433. .ui.red.menu .active.item {
  434. border-color: #EF4D6D;
  435. }
  436. .ui.blue.menu .active.item {
  437. border-color: #6ECFF5;
  438. }
  439. .ui.purple.menu .active.item {
  440. border-color: #564F8A;
  441. }
  442. .ui.orange.menu .active.item {
  443. border-color: #F05940;
  444. }
  445. .ui.teal.menu .active.item {
  446. border-color: #00B5AD;
  447. }
  448. /*--------------
  449. Inverted Colors
  450. ---------------*/
  451. /*--- Light Colors ---*/
  452. .ui.grey.menu {
  453. background-color: #F0F0F0;
  454. }
  455. /*--- Inverted Colors ---*/
  456. .ui.inverted.green.menu {
  457. background-color: #A1CF64;
  458. }
  459. .ui.inverted.green.pointing.menu .active.item:after {
  460. background-color: #A1CF64;
  461. }
  462. .ui.inverted.red.menu {
  463. background-color: #EF4D6D;
  464. }
  465. .ui.inverted.red.pointing.menu .active.item:after {
  466. background-color: #F16883;
  467. }
  468. .ui.inverted.blue.menu {
  469. background-color: #6ECFF5;
  470. }
  471. .ui.inverted.blue.pointing.menu .active.item:after {
  472. background-color: #6ECFF5;
  473. }
  474. .ui.inverted.purple.menu {
  475. background-color: #564F8A;
  476. }
  477. .ui.inverted.purple.pointing.menu .active.item:after {
  478. background-color: #564F8A;
  479. }
  480. .ui.inverted.orange.menu {
  481. background-color: #F05940;
  482. }
  483. .ui.inverted.orange.pointing.menu .active.item:after {
  484. background-color: #F05940;
  485. }
  486. .ui.inverted.teal.menu {
  487. background-color: #00B5AD;
  488. }
  489. .ui.inverted.teal.pointing.menu .active.item:after {
  490. background-color: #00B5AD;
  491. }
  492. /*--------------
  493. Text Menu
  494. ---------------*/
  495. .ui.text.menu {
  496. background-color: transparent;
  497. -moz-border-radius: 0px;
  498. -webkit-border-radius: 0px;
  499. border-radius: 0px;
  500. -webkit-box-shadow: none;
  501. -moz-box-shadow: none;
  502. box-shadow: none;
  503. }
  504. .ui.text.menu .item {
  505. opacity: 0.6;
  506. margin: 0.35em 0.5em;
  507. padding: 0em;
  508. -webkit-border-radius: 0px;
  509. -moz-border-radius: 0px;
  510. border-radius: 0px;
  511. -webkit-box-shadow: none;
  512. -moz-box-shadow: none;
  513. box-shadow: none;
  514. -webkit-transition: opacity 0.1s linear
  515. ;
  516. -moz-transition: opacity 0.1s linear
  517. ;
  518. -o-transition: opacity 0.1s linear
  519. ;
  520. -ms-transition: opacity 0.1s linear
  521. ;
  522. transition: opacity 0.1s linear
  523. ;
  524. }
  525. .ui.text.menu .item:before {
  526. display: none;
  527. }
  528. .ui.text.menu .header.item {
  529. background-color: transparent;
  530. margin: 0em 0.5em 0em 0em;
  531. padding: 0.35em 0.5em;
  532. opacity: 1;
  533. color: rgba(50, 50, 50, 0.8);
  534. font-size: 0.9rem;
  535. text-transform: uppercase;
  536. font-weight: bold;
  537. }
  538. /*--- fluid text ---*/
  539. .ui.fluid.text.menu {
  540. margin: 0em;
  541. }
  542. /*--- vertical text ---*/
  543. .ui.vertical.text.menu .item {
  544. float: left;
  545. clear: left;
  546. }
  547. .ui.vertical.text.menu .header.item {
  548. margin: 0em 0em 0.5em 0em;
  549. padding: 0.35em 0.5em;
  550. }
  551. /*--- hover ---*/
  552. .ui.text.menu .item.hover,
  553. .ui.text.menu .item:hover {
  554. opacity: 1;
  555. background-color: transparent;
  556. }
  557. /*--- active ---*/
  558. .ui.text.menu .active.item {
  559. background-color: transparent;
  560. padding: 0em;
  561. border: none;
  562. opacity: 1;
  563. font-weight: bold;
  564. }
  565. /* disable variations */
  566. .ui.text.pointing.menu .active.item:after {
  567. -webkit-box-shadow: none;
  568. -moz-box-shadow: none;
  569. box-shadow: none;
  570. }
  571. .ui.text.attached.menu {
  572. -webkit-box-shadow: none;
  573. -moz-box-shadow: none;
  574. box-shadow: none;
  575. }
  576. /*--------------
  577. Basic
  578. ---------------*/
  579. .ui.basic.menu {
  580. background-color: transparent;
  581. -webkit-box-shadow: none;
  582. -moz-box-shadow: none;
  583. box-shadow: none;
  584. -webkit-border-radius: 0px;
  585. -moz-border-radius: 0px;
  586. border-radius: 0px;
  587. }
  588. .ui.basic.menu .item {
  589. -webkit-box-shadow: none;
  590. -moz-box-shadow: none;
  591. box-shadow: none;
  592. padding: 0.4em 1.3em;
  593. margin: 0em 0.2em;
  594. -webkit-border-radius: 5px;
  595. -moz-border-radius: 5px;
  596. border-radius: 5px;
  597. }
  598. .ui.basic.menu .item:before {
  599. display: none;
  600. }
  601. /* active */
  602. .ui.basic.menu .active.item {
  603. border-top: none;
  604. background-color: rgba(0, 0, 0, 0.08);
  605. }
  606. .ui.basic.inverted.menu .active.item {
  607. background-color: rgba(255, 255, 255, 0.2);
  608. }
  609. /* disable variations */
  610. .ui.basic.pointing.menu item.active:after {
  611. -webkit-box-shadow: none;
  612. -moz-box-shadow: none;
  613. box-shadow: none;
  614. }
  615. .ui.basic.attached.menu {
  616. -webkit-box-shadow: none;
  617. -moz-box-shadow: none;
  618. box-shadow: none;
  619. }
  620. /*--------------
  621. Icon Only
  622. ---------------*/
  623. .ui.icon.menu,
  624. .ui.vertical.icon.menu {
  625. width: auto;
  626. display: inline-block;
  627. min-height: 0em;
  628. }
  629. .ui.icon.menu .item {
  630. text-align: center;
  631. color: rgba(60, 60, 60, 0.7);
  632. }
  633. .ui.icon.menu .icon {
  634. display: block;
  635. margin: 0em auto;
  636. color: #3c3c3c;
  637. }
  638. .ui.icon.menu .icon:before {
  639. opacity: 1;
  640. }
  641. /*--- inverted ---*/
  642. .ui.inverted.icon.menu .item {
  643. color: rgba(255, 255, 255, 0.8);
  644. }
  645. .ui.inverted.icon.menu .icon {
  646. color: #ffffff;
  647. }
  648. /*--------------
  649. Labeled Icon
  650. ---------------*/
  651. .ui.labeled.icon.menu {
  652. text-align: center;
  653. }
  654. .ui.labeled.icon.menu .icon {
  655. display: block;
  656. font-size: 1.5em;
  657. margin: 0em auto 0.3em;
  658. }
  659. /*--------------
  660. Vertical
  661. ---------------*/
  662. .ui.vertical.menu .item {
  663. display: block;
  664. border-left: none;
  665. border-right: none;
  666. }
  667. .ui.vertical.menu > .item:first-child {
  668. border-radius: 0.325em 0.325em 0px 0px;
  669. }
  670. .ui.vertical.menu > .item:last-child {
  671. border-radius: 0px 0px 0.325em 0.325em;
  672. }
  673. /*--- Border ---*/
  674. .ui.vertical.menu .item:before {
  675. position: absolute;
  676. content: '';
  677. top: 0%;
  678. left: 0px;
  679. width: 100%;
  680. height: 1px;
  681. background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  682. background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  683. background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  684. background-image: -ms-linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  685. background-image: linear-gradient(left, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.1) 1.5em, rgba(0, 0, 0, 0.03) 100%);
  686. }
  687. .ui.vertical.menu .item:first-child:before {
  688. background-image: none;
  689. }
  690. /*--- Dropdown ---*/
  691. .ui.vertical.menu .dropdown.item > i {
  692. float: right;
  693. }
  694. .ui.vertical.menu .dropdown.item .menu {
  695. width: auto;
  696. top: 0%;
  697. left: 100%;
  698. margin: 0px 0px 0px 1px;
  699. -moz-border-radius: 0px 5px 5px 0px;
  700. -webkit-border-radius: 0px 5px 5px 0px;
  701. border-radius: 0px 5px 5px 0px;
  702. border-left: 0.2em solid rgba(50, 50, 50, 0.8);
  703. border: 1px solid rgba(0, 0, 0, 0.1);
  704. font-size: 1em;
  705. }
  706. .ui.vertical.menu .dropdown.item .menu .item {
  707. font-size: 1em;
  708. }
  709. /*--- Sub Menu ---*/
  710. .ui.vertical.menu .item > .menu {
  711. margin: 0.5em -1em 0em;
  712. }
  713. .ui.vertical.menu .item > .menu > .item > .icon {
  714. margin-right: 0.7em;
  715. }
  716. .ui.vertical.menu .item > .menu > .item {
  717. padding: 0.5rem 1.5rem;
  718. font-size: 0.85em;
  719. }
  720. .ui.vertical.menu .item > .menu > .item:before {
  721. display: none;
  722. }
  723. .ui.vertical.menu .item > .menu > .item > a {
  724. margin: -0.5rem -1.5rem;
  725. padding: 0.5rem 1.5rem;
  726. }
  727. /*--------------
  728. Fitted
  729. ---------------*/
  730. .ui.fitted.menu .item,
  731. .ui.fitted.menu .item > a,
  732. .ui.fitted.menu .item .menu .item,
  733. .ui.fitted.menu .item .menu .item > a,
  734. .ui.menu .fitted.item,
  735. .ui.menu .fitted.item > a {
  736. padding-top: 0em;
  737. padding-bottom: 0em;
  738. }
  739. /*--------------
  740. Tight
  741. ---------------*/
  742. .ui.tight.menu .item,
  743. .ui.tight.menu .item > a,
  744. .ui.tight.menu .item .menu .item,
  745. .ui.tight.menu .item .menu .item > a,
  746. .ui.menu .tight.item,
  747. .ui.menu .tight.item > a {
  748. padding: 0em;
  749. }
  750. /*--------------
  751. Borderless
  752. ---------------*/
  753. .ui.borderless.menu .item:before,
  754. .ui.borderless.menu .item > a:before,
  755. .ui.borderless.menu .item .menu .item:before,
  756. .ui.borderless.menu .item .menu .item > a:before,
  757. .ui.menu .borderless.item:before,
  758. .ui.menu .borderless.item > a:before {
  759. background-image: none;
  760. }
  761. /*-------------------
  762. Compact
  763. --------------------*/
  764. .ui.compact.menu {
  765. display: inline-block;
  766. }
  767. .ui.vertical.compact.menu {
  768. width: auto !important;
  769. }
  770. /*-------------------
  771. Fluid
  772. --------------------*/
  773. .ui.menu.fluid,
  774. .ui.vertical.menu.fluid {
  775. width: 100%;
  776. }
  777. /*-------------------
  778. Evenly Sized
  779. --------------------*/
  780. .ui.item.menu,
  781. .ui.item.menu .item {
  782. width: 100%;
  783. padding-left: 0px !important;
  784. padding-right: 0px !important;
  785. text-align: center;
  786. }
  787. .ui.menu.two.item .item {
  788. width: 50%;
  789. }
  790. .ui.menu.three.item .item {
  791. width: 33.333%;
  792. }
  793. .ui.menu.four.item .item {
  794. width: 25%;
  795. }
  796. .ui.menu.five.item .item {
  797. width: 20%;
  798. }
  799. .ui.menu.six.item .item {
  800. width: 16.666%;
  801. }
  802. .ui.menu.seven.item .item {
  803. width: 14.285%;
  804. }
  805. .ui.menu.eight.item .item {
  806. width: 12.500%;
  807. }
  808. .ui.menu.nine.item .item {
  809. width: 11.11%;
  810. }
  811. .ui.menu.ten.item .item {
  812. width: 10.0%;
  813. }
  814. .ui.menu.eleven.item .item {
  815. width: 9.09%;
  816. }
  817. .ui.menu.twelve.item .item {
  818. width: 8.333%;
  819. }
  820. /*--------------
  821. Fixed
  822. ---------------*/
  823. .ui.menu.fixed {
  824. position: fixed;
  825. z-index: 10;
  826. width: 100%;
  827. border: none;
  828. }
  829. .ui.menu.fixed,
  830. .ui.menu.fixed .item:first-child,
  831. .ui.menu.fixed .item:last-child {
  832. -webkit-border-radius: 0px !important;
  833. -moz-border-radius: 0px !important;
  834. border-radius: 0px !important;
  835. }
  836. .ui.menu.fixed.top {
  837. top: 0px;
  838. left: 0px;
  839. right: auto;
  840. bottom: auto;
  841. }
  842. .ui.menu.fixed.right {
  843. top: 0px;
  844. right: 0px;
  845. left: auto;
  846. bottom: auto;
  847. width: auto;
  848. height: 100%;
  849. }
  850. .ui.menu.fixed.bottom {
  851. bottom: 0px;
  852. left: 0px;
  853. top: auto;
  854. right: auto;
  855. }
  856. .ui.menu.fixed.left {
  857. top: 0px;
  858. left: 0px;
  859. right: auto;
  860. bottom: auto;
  861. width: auto;
  862. height: 100%;
  863. }
  864. /*-------------------
  865. Pointing
  866. --------------------*/
  867. .ui.pointing.menu .active.item:after {
  868. position: absolute;
  869. bottom: -0.35em;
  870. left: 50%;
  871. content: "";
  872. margin-left: -0.3em;
  873. width: 0.6em;
  874. height: 0.6em;
  875. border: none;
  876. border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  877. border-right: 1px solid rgba(0, 0, 0, 0.1);
  878. background-image: none;
  879. -webkit-transform: rotate(45deg);
  880. -moz-transform: rotate(45deg);
  881. transform: rotate(45deg);
  882. z-index: 2;
  883. -webkit-transition: background 0.1s linear
  884. ;
  885. -moz-transition: background 0.1s linear
  886. ;
  887. -o-transition: background 0.1s linear
  888. ;
  889. -ms-transition: background 0.1s linear
  890. ;
  891. transition: background 0.1s linear
  892. ;
  893. }
  894. .ui.vertical.pointing.menu .active.item:after {
  895. position: absolute;
  896. top: 50%;
  897. right: -0.4em;
  898. bottom: auto;
  899. left: auto;
  900. border: none;
  901. border-top: 1px solid rgba(0, 0, 0, 0.1);
  902. border-right: 1px solid rgba(0, 0, 0, 0.1);
  903. margin-top: -0.3em;
  904. }
  905. /* Colors */
  906. .ui.pointing.menu .active.item:after {
  907. background-color: #FCFCFC;
  908. }
  909. .ui.pointing.menu .active.item.hover:after,
  910. .ui.pointing.menu .active.item:hover:after {
  911. background-color: #FAFAFA;
  912. }
  913. .ui.pointing.menu .active.item.down:after,
  914. .ui.pointing.menu .active.item:active:after {
  915. background-color: #F0F0F0;
  916. }
  917. /*--------------
  918. Attached
  919. ---------------*/
  920. .ui.menu.attached {
  921. -moz-border-radius: 0px;
  922. -webkit-border-radius: 0px;
  923. border-radius: 0px;
  924. /* avoid rgba multiplying */
  925. -moz-box-shadow: 0px 0px 0px 1px #DDDDDD;
  926. -webkit-box-shadow: 0px 0px 0px 1px #DDDDDD;
  927. box-shadow: 0px 0px 0px 1px #DDDDDD;
  928. }
  929. .ui.top.attached.menu {
  930. -moz-border-radius: 5px 5px 0px 0px;
  931. -webkit-border-radius: 5px 5px 0px 0px;
  932. border-radius: 5px 5px 0px 0px;
  933. }
  934. .ui.menu.bottom.attached {
  935. -moz-border-radius: 0px 0px 5px 5px;
  936. -webkit-border-radius: 0px 0px 5px 5px;
  937. border-radius: 0px 0px 5px 5px;
  938. }
  939. /*---------------------
  940. Stateful Dropdown
  941. ----------------------*/
  942. .ui.menu .dynamic.dropdown.item:hover .menu {
  943. display: none;
  944. }
  945. .ui.menu .dynamic.dropdown.item.hover .menu {
  946. display: block;
  947. }
  948. /*--------------
  949. Sizes
  950. ---------------*/
  951. .ui.small.menu .item {
  952. font-size: 0.875rem;
  953. min-height: 1.2em;
  954. }
  955. .ui.small.vertical.menu {
  956. width: 13rem;
  957. }
  958. .ui.menu .item {
  959. font-size: 1rem;
  960. }
  961. .ui.vertical.menu {
  962. width: 15rem;
  963. }
  964. .ui.large.menu .item {
  965. font-size: 1.125rem;
  966. min-height: 1.35em;
  967. }
  968. .ui.large.vertical.menu {
  969. width: 18rem;
  970. }