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.

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