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.

1635 lines
38 KiB

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