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.

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