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.

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