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.

1633 lines
38 KiB

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