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.

1637 lines
38 KiB

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