API tools faq
paste
Advertisement
Guest User

Untitled

a guest
May 22nd, 2019
151
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 60.47 KB | None | 0 0
raw download clone embed print report
  1. /*
  2. * # Semantic - Menu
  3. * http://github.com/semantic-org/semantic-ui/
  4. *
  5. *
  6. * Copyright 2015 Contributor
  7. * Released under the MIT license
  8. * http://opensource.org/licenses/MIT
  9. *
  10. */
  11.  
  12.  
  13. /*******************************
  14. Standard
  15. *******************************/
  16.  
  17.  
  18. /*--------------
  19. Menu
  20. ---------------*/
  21.  
  22. .ui.menu {
  23. display: -webkit-box;
  24. display: -ms-flexbox;
  25. display: flex;
  26. margin: 1rem 0em;
  27. background: #FFFFFF;
  28. font-weight: normal;
  29. border: 1px solid rgba(34, 36, 38, 0.15);
  30. -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  31. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  32. border-radius: 0.28571429rem;
  33. min-height: 2.85714286em;
  34. }
  35. .ui.menu:after {
  36. content: '';
  37. display: block;
  38. height: 0px;
  39. clear: both;
  40. visibility: hidden;
  41. }
  42. .ui.menu:first-child {
  43. margin-top: 0rem;
  44. }
  45. .ui.menu:last-child {
  46. margin-bottom: 0rem;
  47. }
  48.  
  49. /*--------------
  50. Sub-Menu
  51. ---------------*/
  52.  
  53. .ui.menu .menu {
  54. margin: 0em;
  55. }
  56. .ui.menu:not(.vertical) > .menu {
  57. display: -webkit-box;
  58. display: -ms-flexbox;
  59. display: flex;
  60. }
  61.  
  62. /*--------------
  63. Item
  64. ---------------*/
  65.  
  66. .ui.menu:not(.vertical) .item {
  67. display: -webkit-box;
  68. display: -ms-flexbox;
  69. display: flex;
  70. -webkit-box-align: center;
  71. -ms-flex-align: center;
  72. align-items: center;
  73. }
  74. .ui.menu .item {
  75. position: relative;
  76. vertical-align: middle;
  77. line-height: 1;
  78. text-decoration: none;
  79. -webkit-tap-highlight-color: transparent;
  80. -webkit-box-flex: 0;
  81. -ms-flex: 0 0 auto;
  82. flex: 0 0 auto;
  83. -webkit-user-select: none;
  84. -moz-user-select: none;
  85. -ms-user-select: none;
  86. user-select: none;
  87. background: none;
  88. padding: 0.92857143em 1.14285714em;
  89. text-transform: none;
  90. color: rgba(0, 0, 0, 0.87);
  91. font-weight: normal;
  92. -webkit-transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  93. transition: background 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  94. transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease;
  95. transition: background 0.1s ease, box-shadow 0.1s ease, color 0.1s ease, -webkit-box-shadow 0.1s ease;
  96. }
  97. .ui.menu > .item:first-child {
  98. border-radius: 0.28571429rem 0px 0px 0.28571429rem;
  99. }
  100.  
  101. /* Border */
  102. .ui.menu .item:before {
  103. position: absolute;
  104. content: '';
  105. top: 0%;
  106. right: 0px;
  107. height: 100%;
  108. width: 1px;
  109. background: rgba(34, 36, 38, 0.1);
  110. }
  111.  
  112. /*--------------
  113. Text Content
  114. ---------------*/
  115.  
  116. .ui.menu .text.item > *,
  117. .ui.menu .item > a:not(.ui),
  118. .ui.menu .item > p:only-child {
  119. -webkit-user-select: text;
  120. -moz-user-select: text;
  121. -ms-user-select: text;
  122. user-select: text;
  123. line-height: 1.3;
  124. }
  125. .ui.menu .item > p:first-child {
  126. margin-top: 0;
  127. }
  128. .ui.menu .item > p:last-child {
  129. margin-bottom: 0;
  130. }
  131.  
  132. /*--------------
  133. Icons
  134. ---------------*/
  135.  
  136. .ui.menu .item > i.icon {
  137. opacity: 0.9;
  138. float: none;
  139. margin: 0em 0.35714286em 0em 0em;
  140. }
  141.  
  142. /*--------------
  143. Button
  144. ---------------*/
  145.  
  146. .ui.menu:not(.vertical) .item > .button {
  147. position: relative;
  148. top: 0em;
  149. margin: -0.5em 0em;
  150. padding-bottom: 0.78571429em;
  151. padding-top: 0.78571429em;
  152. font-size: 1em;
  153. }
  154.  
  155. /*----------------
  156. Grid / Container
  157. -----------------*/
  158.  
  159. .ui.menu > .grid,
  160. .ui.menu > .container {
  161. display: -webkit-box;
  162. display: -ms-flexbox;
  163. display: flex;
  164. -webkit-box-align: inherit;
  165. -ms-flex-align: inherit;
  166. align-items: inherit;
  167. -webkit-box-orient: inherit;
  168. -webkit-box-direction: inherit;
  169. -ms-flex-direction: inherit;
  170. flex-direction: inherit;
  171. }
  172.  
  173. /*--------------
  174. Inputs
  175. ---------------*/
  176.  
  177. .ui.menu .item > .input {
  178. width: 100%;
  179. }
  180. .ui.menu:not(.vertical) .item > .input {
  181. position: relative;
  182. top: 0em;
  183. margin: -0.5em 0em;
  184. }
  185. .ui.menu .item > .input input {
  186. font-size: 1em;
  187. padding-top: 0.57142857em;
  188. padding-bottom: 0.57142857em;
  189. }
  190.  
  191. /*--------------
  192. Header
  193. ---------------*/
  194.  
  195. .ui.menu .header.item,
  196. .ui.vertical.menu .header.item {
  197. margin: 0em;
  198. background: '';
  199. text-transform: normal;
  200. font-weight: bold;
  201. }
  202. .ui.vertical.menu .item > .header:not(.ui) {
  203. margin: 0em 0em 0.5em;
  204. font-size: 1em;
  205. font-weight: bold;
  206. }
  207.  
  208. /*--------------
  209. Dropdowns
  210. ---------------*/
  211.  
  212.  
  213. /* Dropdown Icon */
  214. .ui.menu .item > i.dropdown.icon {
  215. padding: 0em;
  216. float: right;
  217. margin: 0em 0em 0em 1em;
  218. }
  219.  
  220. /* Menu */
  221. .ui.menu .dropdown.item .menu {
  222. min-width: calc(100% - 1px);
  223. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  224. background: #FFFFFF;
  225. margin: 0em 0px 0px;
  226. -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  227. box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.08);
  228. -webkit-box-orient: vertical !important;
  229. -webkit-box-direction: normal !important;
  230. -ms-flex-direction: column !important;
  231. flex-direction: column !important;
  232. }
  233.  
  234. /* Menu Items */
  235. .ui.menu .ui.dropdown .menu > .item {
  236. margin: 0;
  237. text-align: left;
  238. font-size: 1em !important;
  239. padding: 0.78571429em 1.14285714em !important;
  240. background: transparent !important;
  241. color: rgba(0, 0, 0, 0.87) !important;
  242. text-transform: none !important;
  243. font-weight: normal !important;
  244. -webkit-box-shadow: none !important;
  245. box-shadow: none !important;
  246. -webkit-transition: none !important;
  247. transition: none !important;
  248. }
  249. .ui.menu .ui.dropdown .menu > .item:hover {
  250. background: rgba(0, 0, 0, 0.05) !important;
  251. color: rgba(0, 0, 0, 0.95) !important;
  252. }
  253. .ui.menu .ui.dropdown .menu > .selected.item {
  254. background: rgba(0, 0, 0, 0.05) !important;
  255. color: rgba(0, 0, 0, 0.95) !important;
  256. }
  257. .ui.menu .ui.dropdown .menu > .active.item {
  258. background: rgba(0, 0, 0, 0.03) !important;
  259. font-weight: bold !important;
  260. color: rgba(0, 0, 0, 0.95) !important;
  261. }
  262. .ui.menu .ui.dropdown.item .menu .item:not(.filtered) {
  263. display: block;
  264. }
  265. .ui.menu .ui.dropdown .menu > .item .icon:not(.dropdown) {
  266. display: inline-block;
  267. font-size: 1em !important;
  268. float: none;
  269. margin: 0em 0.75em 0em 0em !important;
  270. }
  271.  
  272. /* Secondary */
  273. .ui.secondary.menu .dropdown.item > .menu,
  274. .ui.text.menu .dropdown.item > .menu {
  275. border-radius: 0.28571429rem;
  276. margin-top: 0.35714286em;
  277. }
  278.  
  279. /* Pointing */
  280. .ui.menu .pointing.dropdown.item .menu {
  281. margin-top: 0.75em;
  282. }
  283.  
  284. /* Inverted */
  285. .ui.inverted.menu .search.dropdown.item > .search,
  286. .ui.inverted.menu .search.dropdown.item > .text {
  287. color: rgba(255, 255, 255, 0.9);
  288. }
  289.  
  290. /* Vertical */
  291. .ui.vertical.menu .dropdown.item > .icon {
  292. float: right;
  293. content: "\f0da";
  294. margin-left: 1em;
  295. }
  296. .ui.vertical.menu .dropdown.item .menu {
  297. left: 100%;
  298. min-width: 0;
  299. margin: 0em 0em 0em 0em;
  300. -webkit-box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  301. box-shadow: 0 1px 3px 0px rgba(0, 0, 0, 0.08);
  302. border-radius: 0em 0.28571429rem 0.28571429rem 0.28571429rem;
  303. }
  304. .ui.vertical.menu .dropdown.item.upward .menu {
  305. bottom: 0;
  306. }
  307. .ui.vertical.menu .dropdown.item:not(.upward) .menu {
  308. top: 0;
  309. }
  310. .ui.vertical.menu .active.dropdown.item {
  311. border-top-right-radius: 0em;
  312. border-bottom-right-radius: 0em;
  313. }
  314. .ui.vertical.menu .dropdown.active.item {
  315. -webkit-box-shadow: none;
  316. box-shadow: none;
  317. }
  318.  
  319. /* Evenly Divided */
  320. .ui.item.menu .dropdown .menu .item {
  321. width: 100%;
  322. }
  323.  
  324. /*--------------
  325. Labels
  326. ---------------*/
  327.  
  328. .ui.menu .item > .label {
  329. background: #999999;
  330. color: #FFFFFF;
  331. margin-left: 1em;
  332. padding: 0.3em 0.78571429em;
  333. }
  334. .ui.vertical.menu .item > .label {
  335. background: #999999;
  336. color: #FFFFFF;
  337. margin-top: -0.15em;
  338. margin-bottom: -0.15em;
  339. padding: 0.3em 0.78571429em;
  340. }
  341. .ui.menu .item > .floating.label {
  342. padding: 0.3em 0.78571429em;
  343. }
  344.  
  345. /*--------------
  346. Images
  347. ---------------*/
  348.  
  349. .ui.menu .item > img:not(.ui) {
  350. display: inline-block;
  351. vertical-align: middle;
  352. margin: -0.3em 0em;
  353. width: 2.5em;
  354. }
  355. .ui.vertical.menu .item > img:not(.ui):only-child {
  356. display: block;
  357. max-width: 100%;
  358. width: auto;
  359. }
  360.  
  361.  
  362. /*******************************
  363. Coupling
  364. *******************************/
  365.  
  366.  
  367. /*--------------
  368. List
  369. ---------------*/
  370.  
  371.  
  372. /* Menu divider shouldnt apply */
  373. .ui.menu .list .item:before {
  374. background: none !important;
  375. }
  376.  
  377. /*--------------
  378. Sidebar
  379. ---------------*/
  380.  
  381.  
  382. /* Show vertical dividers below last */
  383. .ui.vertical.sidebar.menu > .item:first-child:before {
  384. display: block !important;
  385. }
  386. .ui.vertical.sidebar.menu > .item::before {
  387. top: auto;
  388. bottom: 0px;
  389. }
  390.  
  391. /*--------------
  392. Container
  393. ---------------*/
  394.  
  395. @media only screen and (max-width: 767px) {
  396. .ui.menu > .ui.container {
  397. width: 100% !important;
  398. margin-left: 0em !important;
  399. margin-right: 0em !important;
  400. }
  401. }
  402. @media only screen and (min-width: 768px) {
  403. .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child {
  404. border-left: 1px solid rgba(34, 36, 38, 0.1);
  405. }
  406. }
  407.  
  408.  
  409. /*******************************
  410. States
  411. *******************************/
  412.  
  413.  
  414. /*--------------
  415. Hover
  416. ---------------*/
  417.  
  418. .ui.link.menu .item:hover,
  419. .ui.menu .dropdown.item:hover,
  420. .ui.menu .link.item:hover,
  421. .ui.menu a.item:hover {
  422. cursor: pointer;
  423. background: rgba(0, 0, 0, 0.03);
  424. color: rgba(0, 0, 0, 0.95);
  425. }
  426.  
  427. /*--------------
  428. Pressed
  429. ---------------*/
  430.  
  431. .ui.link.menu .item:active,
  432. .ui.menu .link.item:active,
  433. .ui.menu a.item:active {
  434. background: rgba(0, 0, 0, 0.03);
  435. color: rgba(0, 0, 0, 0.95);
  436. }
  437.  
  438. /*--------------
  439. Active
  440. ---------------*/
  441.  
  442. .ui.menu .active.item {
  443. background: rgba(0, 0, 0, 0.05);
  444. color: rgba(0, 0, 0, 0.95);
  445. font-weight: normal;
  446. -webkit-box-shadow: none;
  447. box-shadow: none;
  448. }
  449. .ui.menu .active.item > i.icon {
  450. opacity: 1;
  451. }
  452.  
  453. /*--------------
  454. Active Hover
  455. ---------------*/
  456.  
  457. .ui.menu .active.item:hover,
  458. .ui.vertical.menu .active.item:hover {
  459. background-color: rgba(0, 0, 0, 0.05);
  460. color: rgba(0, 0, 0, 0.95);
  461. }
  462.  
  463. /*--------------
  464. Disabled
  465. ---------------*/
  466.  
  467. .ui.menu .item.disabled,
  468. .ui.menu .item.disabled:hover {
  469. cursor: default !important;
  470. background-color: transparent !important;
  471. color: rgba(40, 40, 40, 0.3) !important;
  472. }
  473.  
  474.  
  475. /*******************************
  476. Types
  477. *******************************/
  478.  
  479.  
  480. /*------------------
  481. Floated Menu / Item
  482. -------------------*/
  483.  
  484.  
  485. /* Left Floated */
  486. .ui.menu:not(.vertical) .left.item,
  487. .ui.menu:not(.vertical) :not(.dropdown) > .left.menu {
  488. display: -webkit-box;
  489. display: -ms-flexbox;
  490. display: flex;
  491. margin-right: auto !important;
  492. }
  493.  
  494. /* Right Floated */
  495. .ui.menu:not(.vertical) .right.item,
  496. .ui.menu:not(.vertical) .right.menu {
  497. display: -webkit-box;
  498. display: -ms-flexbox;
  499. display: flex;
  500. margin-left: auto !important;
  501. }
  502.  
  503. /* Swapped Borders */
  504. .ui.menu .right.item::before,
  505. .ui.menu .right.menu > .item::before {
  506. right: auto;
  507. left: 0;
  508. }
  509.  
  510. /*--------------
  511. Vertical
  512. ---------------*/
  513.  
  514. .ui.vertical.menu {
  515. display: block;
  516. -webkit-box-orient: vertical;
  517. -webkit-box-direction: normal;
  518. -ms-flex-direction: column;
  519. flex-direction: column;
  520. background: #FFFFFF;
  521. -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  522. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15);
  523. }
  524.  
  525. /*--- Item ---*/
  526.  
  527. .ui.vertical.menu .item {
  528. display: block;
  529. background: none;
  530. border-top: none;
  531. border-right: none;
  532. }
  533. .ui.vertical.menu > .item:first-child {
  534. border-radius: 0.28571429rem 0.28571429rem 0px 0px;
  535. }
  536. .ui.vertical.menu > .item:last-child {
  537. border-radius: 0px 0px 0.28571429rem 0.28571429rem;
  538. }
  539.  
  540. /*--- Label ---*/
  541.  
  542. .ui.vertical.menu .item > .label {
  543. float: right;
  544. text-align: center;
  545. }
  546.  
  547. /*--- Icon ---*/
  548.  
  549. .ui.vertical.menu .item > i.icon {
  550. width: 1.18em;
  551. float: right;
  552. margin: 0em 0em 0em 0.5em;
  553. }
  554. .ui.vertical.menu .item > .label + i.icon {
  555. float: none;
  556. margin: 0em 0.5em 0em 0em;
  557. }
  558.  
  559. /*--- Border ---*/
  560.  
  561. .ui.vertical.menu .item:before {
  562. position: absolute;
  563. content: '';
  564. top: 0%;
  565. left: 0px;
  566. width: 100%;
  567. height: 1px;
  568. background: rgba(34, 36, 38, 0.1);
  569. }
  570. .ui.vertical.menu .item:first-child:before {
  571. display: none !important;
  572. }
  573.  
  574. /*--- Sub Menu ---*/
  575.  
  576. .ui.vertical.menu .item > .menu {
  577. margin: 0.5em -1.14285714em 0em;
  578. }
  579. .ui.vertical.menu .menu .item {
  580. background: none;
  581. padding: 0.5em 1.33333333em;
  582. font-size: 0.85714286em;
  583. color: rgba(0, 0, 0, 0.5);
  584. }
  585. .ui.vertical.menu .item .menu a.item:hover,
  586. .ui.vertical.menu .item .menu .link.item:hover {
  587. color: rgba(0, 0, 0, 0.85);
  588. }
  589. .ui.vertical.menu .menu .item:before {
  590. display: none;
  591. }
  592.  
  593. /* Vertical Active */
  594. .ui.vertical.menu .active.item {
  595. background: rgba(0, 0, 0, 0.05);
  596. border-radius: 0em;
  597. -webkit-box-shadow: none;
  598. box-shadow: none;
  599. }
  600. .ui.vertical.menu > .active.item:first-child {
  601. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  602. }
  603. .ui.vertical.menu > .active.item:last-child {
  604. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  605. }
  606. .ui.vertical.menu > .active.item:only-child {
  607. border-radius: 0.28571429rem;
  608. }
  609. .ui.vertical.menu .active.item .menu .active.item {
  610. border-left: none;
  611. }
  612. .ui.vertical.menu .item .menu .active.item {
  613. background-color: transparent;
  614. font-weight: bold;
  615. color: rgba(0, 0, 0, 0.95);
  616. }
  617.  
  618. /*--------------
  619. Tabular
  620. ---------------*/
  621.  
  622. .ui.tabular.menu {
  623. border-radius: 0em;
  624. -webkit-box-shadow: none !important;
  625. box-shadow: none !important;
  626. border: none;
  627. background: none transparent;
  628. border-bottom: 1px solid #D4D4D5;
  629. }
  630. .ui.tabular.fluid.menu {
  631. width: calc(100% + 2px ) !important;
  632. }
  633. .ui.tabular.menu .item {
  634. background: transparent;
  635. border-bottom: none;
  636. border-left: 1px solid transparent;
  637. border-right: 1px solid transparent;
  638. border-top: 2px solid transparent;
  639. padding: 0.92857143em 1.42857143em;
  640. color: rgba(0, 0, 0, 0.87);
  641. }
  642. .ui.tabular.menu .item:before {
  643. display: none;
  644. }
  645.  
  646. /* Hover */
  647. .ui.tabular.menu .item:hover {
  648. background-color: transparent;
  649. color: rgba(0, 0, 0, 0.8);
  650. }
  651.  
  652. /* Active */
  653. .ui.tabular.menu .active.item {
  654. background: none #FFFFFF;
  655. color: rgba(0, 0, 0, 0.95);
  656. border-top-width: 1px;
  657. border-color: #D4D4D5;
  658. font-weight: bold;
  659. margin-bottom: -1px;
  660. -webkit-box-shadow: none;
  661. box-shadow: none;
  662. border-radius: 0.28571429rem 0.28571429rem 0px 0px !important;
  663. }
  664.  
  665. /* Coupling with segment for attachment */
  666. .ui.tabular.menu + .attached:not(.top).segment,
  667. .ui.tabular.menu + .attached:not(.top).segment + .attached:not(.top).segment {
  668. border-top: none;
  669. margin-left: 0px;
  670. margin-top: 0px;
  671. margin-right: 0px;
  672. width: 100%;
  673. }
  674. .top.attached.segment + .ui.bottom.tabular.menu {
  675. position: relative;
  676. width: calc(100% + 2px );
  677. left: -1px;
  678. }
  679.  
  680. /* Bottom Vertical Tabular */
  681. .ui.bottom.tabular.menu {
  682. background: none transparent;
  683. border-radius: 0em;
  684. -webkit-box-shadow: none !important;
  685. box-shadow: none !important;
  686. border-bottom: none;
  687. border-top: 1px solid #D4D4D5;
  688. }
  689. .ui.bottom.tabular.menu .item {
  690. background: none;
  691. border-left: 1px solid transparent;
  692. border-right: 1px solid transparent;
  693. border-bottom: 1px solid transparent;
  694. border-top: none;
  695. }
  696. .ui.bottom.tabular.menu .active.item {
  697. background: none #FFFFFF;
  698. color: rgba(0, 0, 0, 0.95);
  699. border-color: #D4D4D5;
  700. margin: -1px 0px 0px 0px;
  701. border-radius: 0px 0px 0.28571429rem 0.28571429rem !important;
  702. }
  703.  
  704. /* Vertical Tabular (Left) */
  705. .ui.vertical.tabular.menu {
  706. background: none transparent;
  707. border-radius: 0em;
  708. -webkit-box-shadow: none !important;
  709. box-shadow: none !important;
  710. border-bottom: none;
  711. border-right: 1px solid #D4D4D5;
  712. }
  713. .ui.vertical.tabular.menu .item {
  714. background: none;
  715. border-left: 1px solid transparent;
  716. border-bottom: 1px solid transparent;
  717. border-top: 1px solid transparent;
  718. border-right: none;
  719. }
  720. .ui.vertical.tabular.menu .active.item {
  721. background: none #FFFFFF;
  722. color: rgba(0, 0, 0, 0.95);
  723. border-color: #D4D4D5;
  724. margin: 0px -1px 0px 0px;
  725. border-radius: 0.28571429rem 0px 0px 0.28571429rem !important;
  726. }
  727.  
  728. /* Vertical Right Tabular */
  729. .ui.vertical.right.tabular.menu {
  730. background: none transparent;
  731. border-radius: 0em;
  732. -webkit-box-shadow: none !important;
  733. box-shadow: none !important;
  734. border-bottom: none;
  735. border-right: none;
  736. border-left: 1px solid #D4D4D5;
  737. }
  738. .ui.vertical.right.tabular.menu .item {
  739. background: none;
  740. border-right: 1px solid transparent;
  741. border-bottom: 1px solid transparent;
  742. border-top: 1px solid transparent;
  743. border-left: none;
  744. }
  745. .ui.vertical.right.tabular.menu .active.item {
  746. background: none #FFFFFF;
  747. color: rgba(0, 0, 0, 0.95);
  748. border-color: #D4D4D5;
  749. margin: 0px 0px 0px -1px;
  750. border-radius: 0px 0.28571429rem 0.28571429rem 0px !important;
  751. }
  752.  
  753. /* Dropdown */
  754. .ui.tabular.menu .active.dropdown.item {
  755. margin-bottom: 0px;
  756. border-left: 1px solid transparent;
  757. border-right: 1px solid transparent;
  758. border-top: 2px solid transparent;
  759. border-bottom: none;
  760. }
  761.  
  762. /*--------------
  763. Pagination
  764. ---------------*/
  765.  
  766. .ui.pagination.menu {
  767. margin: 0em;
  768. display: -webkit-inline-box;
  769. display: -ms-inline-flexbox;
  770. display: inline-flex;
  771. vertical-align: middle;
  772. }
  773. .ui.pagination.menu .item:last-child {
  774. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  775. }
  776. .ui.compact.menu .item:last-child {
  777. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  778. }
  779. .ui.pagination.menu .item:last-child:before {
  780. display: none;
  781. }
  782. .ui.pagination.menu .item {
  783. min-width: 3em;
  784. text-align: center;
  785. }
  786. .ui.pagination.menu .icon.item i.icon {
  787. vertical-align: top;
  788. }
  789.  
  790. /* Active */
  791. .ui.pagination.menu .active.item {
  792. border-top: none;
  793. padding-top: 0.92857143em;
  794. background-color: rgba(0, 0, 0, 0.05);
  795. color: rgba(0, 0, 0, 0.95);
  796. -webkit-box-shadow: none;
  797. box-shadow: none;
  798. }
  799.  
  800. /*--------------
  801. Secondary
  802. ---------------*/
  803.  
  804. .ui.secondary.menu {
  805. background: none;
  806. margin-left: -0.35714286em;
  807. margin-right: -0.35714286em;
  808. border-radius: 0em;
  809. border: none;
  810. -webkit-box-shadow: none;
  811. box-shadow: none;
  812. }
  813.  
  814. /* Item */
  815. .ui.secondary.menu .item {
  816. -ms-flex-item-align: center;
  817. align-self: center;
  818. -webkit-box-shadow: none;
  819. box-shadow: none;
  820. border: none;
  821. padding: 0.78571429em 0.92857143em;
  822. margin: 0em 0.35714286em;
  823. background: none;
  824. -webkit-transition: color 0.1s ease;
  825. transition: color 0.1s ease;
  826. border-radius: 0.28571429rem;
  827. }
  828.  
  829. /* No Divider */
  830. .ui.secondary.menu .item:before {
  831. display: none !important;
  832. }
  833.  
  834. /* Header */
  835. .ui.secondary.menu .header.item {
  836. border-radius: 0em;
  837. border-right: none;
  838. background: none transparent;
  839. }
  840.  
  841. /* Image */
  842. .ui.secondary.menu .item > img:not(.ui) {
  843. margin: 0em;
  844. }
  845.  
  846. /* Hover */
  847. .ui.secondary.menu .dropdown.item:hover,
  848. .ui.secondary.menu .link.item:hover,
  849. .ui.secondary.menu a.item:hover {
  850. background: rgba(0, 0, 0, 0.05);
  851. color: rgba(0, 0, 0, 0.95);
  852. }
  853.  
  854. /* Active */
  855. .ui.secondary.menu .active.item {
  856. -webkit-box-shadow: none;
  857. box-shadow: none;
  858. background: rgba(0, 0, 0, 0.05);
  859. color: rgba(0, 0, 0, 0.95);
  860. border-radius: 0.28571429rem;
  861. }
  862.  
  863. /* Active Hover */
  864. .ui.secondary.menu .active.item:hover {
  865. -webkit-box-shadow: none;
  866. box-shadow: none;
  867. background: rgba(0, 0, 0, 0.05);
  868. color: rgba(0, 0, 0, 0.95);
  869. }
  870.  
  871. /* Inverted */
  872. .ui.secondary.inverted.menu .link.item,
  873. .ui.secondary.inverted.menu a.item {
  874. color: rgba(255, 255, 255, 0.7) !important;
  875. }
  876. .ui.secondary.inverted.menu .dropdown.item:hover,
  877. .ui.secondary.inverted.menu .link.item:hover,
  878. .ui.secondary.inverted.menu a.item:hover {
  879. background: rgba(255, 255, 255, 0.08);
  880. color: #ffffff !important;
  881. }
  882. .ui.secondary.inverted.menu .active.item {
  883. background: rgba(255, 255, 255, 0.15);
  884. color: #ffffff !important;
  885. }
  886.  
  887. /* Fix item margins */
  888. .ui.secondary.item.menu {
  889. margin-left: 0em;
  890. margin-right: 0em;
  891. }
  892. .ui.secondary.item.menu .item:last-child {
  893. margin-right: 0em;
  894. }
  895. .ui.secondary.attached.menu {
  896. -webkit-box-shadow: none;
  897. box-shadow: none;
  898. }
  899.  
  900. /* Sub Menu */
  901. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu {
  902. margin: 0em -0.92857143em;
  903. }
  904. .ui.vertical.secondary.menu .item:not(.dropdown) > .menu > .item {
  905. margin: 0em;
  906. padding: 0.5em 1.33333333em;
  907. }
  908.  
  909. /*---------------------
  910. Secondary Vertical
  911. -----------------------*/
  912.  
  913. .ui.secondary.vertical.menu > .item {
  914. border: none;
  915. margin: 0em 0em 0.35714286em;
  916. border-radius: 0.28571429rem !important;
  917. }
  918. .ui.secondary.vertical.menu > .header.item {
  919. border-radius: 0em;
  920. }
  921.  
  922. /* Sub Menu */
  923. .ui.vertical.secondary.menu .item > .menu .item {
  924. background-color: transparent;
  925. }
  926.  
  927. /* Inverted */
  928. .ui.secondary.inverted.menu {
  929. background-color: transparent;
  930. }
  931.  
  932. /*---------------------
  933. Secondary Pointing
  934. -----------------------*/
  935.  
  936. .ui.secondary.pointing.menu {
  937. margin-left: 0em;
  938. margin-right: 0em;
  939. border-bottom: 2px solid rgba(34, 36, 38, 0.15);
  940. }
  941. .ui.secondary.pointing.menu .item {
  942. border-bottom-color: transparent;
  943. border-bottom-style: solid;
  944. border-radius: 0em;
  945. -ms-flex-item-align: end;
  946. align-self: flex-end;
  947. margin: 0em 0em -2px;
  948. padding: 0.85714286em 1.14285714em;
  949. border-bottom-width: 2px;
  950. -webkit-transition: color 0.1s ease;
  951. transition: color 0.1s ease;
  952. }
  953.  
  954. /* Item Types */
  955. .ui.secondary.pointing.menu .header.item {
  956. color: rgba(0, 0, 0, 0.85) !important;
  957. }
  958. .ui.secondary.pointing.menu .text.item {
  959. -webkit-box-shadow: none !important;
  960. box-shadow: none !important;
  961. }
  962. .ui.secondary.pointing.menu .item:after {
  963. display: none;
  964. }
  965.  
  966. /* Hover */
  967. .ui.secondary.pointing.menu .dropdown.item:hover,
  968. .ui.secondary.pointing.menu .link.item:hover,
  969. .ui.secondary.pointing.menu a.item:hover {
  970. background-color: transparent;
  971. color: rgba(0, 0, 0, 0.87);
  972. }
  973.  
  974. /* Pressed */
  975. .ui.secondary.pointing.menu .dropdown.item:active,
  976. .ui.secondary.pointing.menu .link.item:active,
  977. .ui.secondary.pointing.menu a.item:active {
  978. background-color: transparent;
  979. border-color: rgba(34, 36, 38, 0.15);
  980. }
  981.  
  982. /* Active */
  983. .ui.secondary.pointing.menu .active.item {
  984. background-color: transparent;
  985. -webkit-box-shadow: none;
  986. box-shadow: none;
  987. border-color: #1B1C1D;
  988. font-weight: bold;
  989. color: rgba(0, 0, 0, 0.95);
  990. }
  991.  
  992. /* Active Hover */
  993. .ui.secondary.pointing.menu .active.item:hover {
  994. border-color: #1B1C1D;
  995. color: rgba(0, 0, 0, 0.95);
  996. }
  997.  
  998. /* Active Dropdown */
  999. .ui.secondary.pointing.menu .active.dropdown.item {
  1000. border-color: transparent;
  1001. }
  1002.  
  1003. /* Vertical Pointing */
  1004. .ui.secondary.vertical.pointing.menu {
  1005. border-bottom-width: 0px;
  1006. border-right-width: 2px;
  1007. border-right-style: solid;
  1008. border-right-color: rgba(34, 36, 38, 0.15);
  1009. }
  1010. .ui.secondary.vertical.pointing.menu .item {
  1011. border-bottom: none;
  1012. border-right-style: solid;
  1013. border-right-color: transparent;
  1014. border-radius: 0em !important;
  1015. margin: 0em -2px 0em 0em;
  1016. border-right-width: 2px;
  1017. }
  1018.  
  1019. /* Vertical Active */
  1020. .ui.secondary.vertical.pointing.menu .active.item {
  1021. border-color: #1B1C1D;
  1022. }
  1023.  
  1024. /* Inverted */
  1025. .ui.secondary.inverted.pointing.menu {
  1026. border-color: rgba(255, 255, 255, 0.1);
  1027. }
  1028. .ui.secondary.inverted.pointing.menu {
  1029. border-width: 2px;
  1030. border-color: rgba(34, 36, 38, 0.15);
  1031. }
  1032. .ui.secondary.inverted.pointing.menu .item {
  1033. color: rgba(255, 255, 255, 0.9);
  1034. }
  1035. .ui.secondary.inverted.pointing.menu .header.item {
  1036. color: #FFFFFF !important;
  1037. }
  1038.  
  1039. /* Hover */
  1040. .ui.secondary.inverted.pointing.menu .link.item:hover,
  1041. .ui.secondary.inverted.pointing.menu a.item:hover {
  1042. color: rgba(0, 0, 0, 0.95);
  1043. }
  1044.  
  1045. /* Active */
  1046. .ui.secondary.inverted.pointing.menu .active.item {
  1047. border-color: #FFFFFF;
  1048. color: #ffffff;
  1049. }
  1050.  
  1051. /*--------------
  1052. Text Menu
  1053. ---------------*/
  1054.  
  1055. .ui.text.menu {
  1056. background: none transparent;
  1057. border-radius: 0px;
  1058. -webkit-box-shadow: none;
  1059. box-shadow: none;
  1060. border: none;
  1061. margin: 1em -0.5em;
  1062. }
  1063. .ui.text.menu .item {
  1064. border-radius: 0px;
  1065. -webkit-box-shadow: none;
  1066. box-shadow: none;
  1067. -ms-flex-item-align: center;
  1068. align-self: center;
  1069. margin: 0em 0em;
  1070. padding: 0.35714286em 0.5em;
  1071. font-weight: normal;
  1072. color: rgba(0, 0, 0, 0.6);
  1073. -webkit-transition: opacity 0.1s ease;
  1074. transition: opacity 0.1s ease;
  1075. }
  1076.  
  1077. /* Border */
  1078. .ui.text.menu .item:before,
  1079. .ui.text.menu .menu .item:before {
  1080. display: none !important;
  1081. }
  1082.  
  1083. /* Header */
  1084. .ui.text.menu .header.item {
  1085. background-color: transparent;
  1086. opacity: 1;
  1087. color: rgba(0, 0, 0, 0.85);
  1088. font-size: 0.92857143em;
  1089. text-transform: uppercase;
  1090. font-weight: bold;
  1091. }
  1092.  
  1093. /* Image */
  1094. .ui.text.menu .item > img:not(.ui) {
  1095. margin: 0em;
  1096. }
  1097.  
  1098. /*--- fluid text ---*/
  1099.  
  1100. .ui.text.item.menu .item {
  1101. margin: 0em;
  1102. }
  1103.  
  1104. /*--- vertical text ---*/
  1105.  
  1106. .ui.vertical.text.menu {
  1107. margin: 1em 0em;
  1108. }
  1109. .ui.vertical.text.menu:first-child {
  1110. margin-top: 0rem;
  1111. }
  1112. .ui.vertical.text.menu:last-child {
  1113. margin-bottom: 0rem;
  1114. }
  1115. .ui.vertical.text.menu .item {
  1116. margin: 0.57142857em 0em;
  1117. padding-left: 0em;
  1118. padding-right: 0em;
  1119. }
  1120. .ui.vertical.text.menu .item > i.icon {
  1121. float: none;
  1122. margin: 0em 0.35714286em 0em 0em;
  1123. }
  1124. .ui.vertical.text.menu .header.item {
  1125. margin: 0.57142857em 0em 0.71428571em;
  1126. }
  1127.  
  1128. /* Vertical Sub Menu */
  1129. .ui.vertical.text.menu .item:not(.dropdown) > .menu {
  1130. margin: 0em;
  1131. }
  1132. .ui.vertical.text.menu .item:not(.dropdown) > .menu > .item {
  1133. margin: 0em;
  1134. padding: 0.5em 0em;
  1135. }
  1136.  
  1137. /*--- hover ---*/
  1138.  
  1139. .ui.text.menu .item:hover {
  1140. opacity: 1;
  1141. background-color: transparent;
  1142. }
  1143.  
  1144. /*--- active ---*/
  1145.  
  1146. .ui.text.menu .active.item {
  1147. background-color: transparent;
  1148. border: none;
  1149. -webkit-box-shadow: none;
  1150. box-shadow: none;
  1151. font-weight: normal;
  1152. color: rgba(0, 0, 0, 0.95);
  1153. }
  1154.  
  1155. /*--- active hover ---*/
  1156.  
  1157. .ui.text.menu .active.item:hover {
  1158. background-color: transparent;
  1159. }
  1160.  
  1161. /* Disable Bariations */
  1162. .ui.text.pointing.menu .active.item:after {
  1163. -webkit-box-shadow: none;
  1164. box-shadow: none;
  1165. }
  1166. .ui.text.attached.menu {
  1167. -webkit-box-shadow: none;
  1168. box-shadow: none;
  1169. }
  1170.  
  1171. /* Inverted */
  1172. .ui.inverted.text.menu,
  1173. .ui.inverted.text.menu .item,
  1174. .ui.inverted.text.menu .item:hover,
  1175. .ui.inverted.text.menu .active.item {
  1176. background-color: transparent !important;
  1177. }
  1178.  
  1179. /* Fluid */
  1180. .ui.fluid.text.menu {
  1181. margin-left: 0em;
  1182. margin-right: 0em;
  1183. }
  1184.  
  1185. /*--------------
  1186. Icon Only
  1187. ---------------*/
  1188.  
  1189.  
  1190. /* Vertical Menu */
  1191. .ui.vertical.icon.menu {
  1192. display: inline-block;
  1193. width: auto;
  1194. }
  1195.  
  1196. /* Item */
  1197. .ui.icon.menu .item {
  1198. height: auto;
  1199. text-align: center;
  1200. color: #1B1C1D;
  1201. }
  1202.  
  1203. /* Icon */
  1204. .ui.icon.menu .item > .icon:not(.dropdown) {
  1205. margin: 0;
  1206. opacity: 1;
  1207. }
  1208.  
  1209. /* Icon Gylph */
  1210. .ui.icon.menu .icon:before {
  1211. opacity: 1;
  1212. }
  1213.  
  1214. /* (x) Item Icon */
  1215. .ui.menu .icon.item > .icon {
  1216. width: auto;
  1217. margin: 0em auto;
  1218. }
  1219.  
  1220. /* Vertical Icon */
  1221. .ui.vertical.icon.menu .item > .icon:not(.dropdown) {
  1222. display: block;
  1223. opacity: 1;
  1224. margin: 0em auto;
  1225. float: none;
  1226. }
  1227.  
  1228. /* Inverted */
  1229. .ui.inverted.icon.menu .item {
  1230. color: #FFFFFF;
  1231. }
  1232.  
  1233. /*--------------
  1234. Labeled Icon
  1235. ---------------*/
  1236.  
  1237.  
  1238. /* Menu */
  1239. .ui.labeled.icon.menu {
  1240. text-align: center;
  1241. }
  1242.  
  1243. /* Item */
  1244. .ui.labeled.icon.menu .item {
  1245. min-width: 6em;
  1246. -webkit-box-orient: vertical;
  1247. -webkit-box-direction: normal;
  1248. -ms-flex-direction: column;
  1249. flex-direction: column;
  1250. }
  1251.  
  1252. /* Icon */
  1253. .ui.labeled.icon.menu .item > .icon:not(.dropdown) {
  1254. height: 1em;
  1255. display: block;
  1256. font-size: 1.71428571em !important;
  1257. margin: 0em auto 0.5rem !important;
  1258. }
  1259.  
  1260. /* Fluid */
  1261. .ui.fluid.labeled.icon.menu > .item {
  1262. min-width: 0em;
  1263. }
  1264.  
  1265.  
  1266. /*******************************
  1267. Variations
  1268. *******************************/
  1269.  
  1270.  
  1271. /*--------------
  1272. Stackable
  1273. ---------------*/
  1274.  
  1275. @media only screen and (max-width: 767px) {
  1276. .ui.stackable.menu {
  1277. -webkit-box-orient: vertical;
  1278. -webkit-box-direction: normal;
  1279. -ms-flex-direction: column;
  1280. flex-direction: column;
  1281. }
  1282. .ui.stackable.menu .item {
  1283. width: 100% !important;
  1284. }
  1285. .ui.stackable.menu .item:before {
  1286. position: absolute;
  1287. content: '';
  1288. top: auto;
  1289. bottom: 0px;
  1290. left: 0px;
  1291. width: 100%;
  1292. height: 1px;
  1293. background: rgba(34, 36, 38, 0.1);
  1294. }
  1295. .ui.stackable.menu .left.menu,
  1296. .ui.stackable.menu .left.item {
  1297. margin-right: 0 !important;
  1298. }
  1299. .ui.stackable.menu .right.menu,
  1300. .ui.stackable.menu .right.item {
  1301. margin-left: 0 !important;
  1302. }
  1303. .ui.stackable.menu .right.menu,
  1304. .ui.stackable.menu .left.menu {
  1305. -webkit-box-orient: vertical;
  1306. -webkit-box-direction: normal;
  1307. -ms-flex-direction: column;
  1308. flex-direction: column;
  1309. }
  1310. }
  1311.  
  1312. /*--------------
  1313. Colors
  1314. ---------------*/
  1315.  
  1316.  
  1317. /*--- Standard Colors ---*/
  1318.  
  1319. .ui.menu .red.active.item,
  1320. .ui.red.menu .active.item {
  1321. border-color: #DB2828 !important;
  1322. color: #DB2828 !important;
  1323. }
  1324. .ui.menu .orange.active.item,
  1325. .ui.orange.menu .active.item {
  1326. border-color: #F2711C !important;
  1327. color: #F2711C !important;
  1328. }
  1329. .ui.menu .yellow.active.item,
  1330. .ui.yellow.menu .active.item {
  1331. border-color: #FBBD08 !important;
  1332. color: #FBBD08 !important;
  1333. }
  1334. .ui.menu .olive.active.item,
  1335. .ui.olive.menu .active.item {
  1336. border-color: #B5CC18 !important;
  1337. color: #B5CC18 !important;
  1338. }
  1339. .ui.menu .green.active.item,
  1340. .ui.green.menu .active.item {
  1341. border-color: #21BA45 !important;
  1342. color: #21BA45 !important;
  1343. }
  1344. .ui.menu .teal.active.item,
  1345. .ui.teal.menu .active.item {
  1346. border-color: #00B5AD !important;
  1347. color: #00B5AD !important;
  1348. }
  1349. .ui.menu .blue.active.item,
  1350. .ui.blue.menu .active.item {
  1351. border-color: #2185D0 !important;
  1352. color: #2185D0 !important;
  1353. }
  1354. .ui.menu .violet.active.item,
  1355. .ui.violet.menu .active.item {
  1356. border-color: #6435C9 !important;
  1357. color: #6435C9 !important;
  1358. }
  1359. .ui.menu .purple.active.item,
  1360. .ui.purple.menu .active.item {
  1361. border-color: #A333C8 !important;
  1362. color: #A333C8 !important;
  1363. }
  1364. .ui.menu .pink.active.item,
  1365. .ui.pink.menu .active.item {
  1366. border-color: #E03997 !important;
  1367. color: #E03997 !important;
  1368. }
  1369. .ui.menu .brown.active.item,
  1370. .ui.brown.menu .active.item {
  1371. border-color: #A5673F !important;
  1372. color: #A5673F !important;
  1373. }
  1374. .ui.menu .grey.active.item,
  1375. .ui.grey.menu .active.item {
  1376. border-color: #767676 !important;
  1377. color: #767676 !important;
  1378. }
  1379.  
  1380. /*--------------
  1381. Inverted
  1382. ---------------*/
  1383.  
  1384. .ui.inverted.menu {
  1385. border: 0px solid transparent;
  1386. background: #1B1C1D;
  1387. -webkit-box-shadow: none;
  1388. box-shadow: none;
  1389. }
  1390.  
  1391. /* Menu Item */
  1392. .ui.inverted.menu .item,
  1393. .ui.inverted.menu .item > a:not(.ui) {
  1394. background: transparent;
  1395. color: rgba(255, 255, 255, 0.9);
  1396. }
  1397. .ui.inverted.menu .item.menu {
  1398. background: transparent;
  1399. }
  1400.  
  1401. /*--- Border ---*/
  1402.  
  1403. .ui.inverted.menu .item:before {
  1404. background: rgba(255, 255, 255, 0.08);
  1405. }
  1406. .ui.vertical.inverted.menu .item:before {
  1407. background: rgba(255, 255, 255, 0.08);
  1408. }
  1409.  
  1410. /* Sub Menu */
  1411. .ui.vertical.inverted.menu .menu .item,
  1412. .ui.vertical.inverted.menu .menu .item a:not(.ui) {
  1413. color: rgba(255, 255, 255, 0.5);
  1414. }
  1415.  
  1416. /* Header */
  1417. .ui.inverted.menu .header.item {
  1418. margin: 0em;
  1419. background: transparent;
  1420. -webkit-box-shadow: none;
  1421. box-shadow: none;
  1422. }
  1423.  
  1424. /* Disabled */
  1425. .ui.inverted.menu .item.disabled,
  1426. .ui.inverted.menu .item.disabled:hover {
  1427. color: rgba(225, 225, 225, 0.3);
  1428. }
  1429.  
  1430. /*--- Hover ---*/
  1431.  
  1432. .ui.link.inverted.menu .item:hover,
  1433. .ui.inverted.menu .dropdown.item:hover,
  1434. .ui.inverted.menu .link.item:hover,
  1435. .ui.inverted.menu a.item:hover {
  1436. background: rgba(255, 255, 255, 0.08);
  1437. color: #ffffff;
  1438. }
  1439. .ui.vertical.inverted.menu .item .menu a.item:hover,
  1440. .ui.vertical.inverted.menu .item .menu .link.item:hover {
  1441. background: transparent;
  1442. color: #ffffff;
  1443. }
  1444.  
  1445. /*--- Pressed ---*/
  1446.  
  1447. .ui.inverted.menu a.item:active,
  1448. .ui.inverted.menu .link.item:active {
  1449. background: rgba(255, 255, 255, 0.08);
  1450. color: #ffffff;
  1451. }
  1452.  
  1453. /*--- Active ---*/
  1454.  
  1455. .ui.inverted.menu .active.item {
  1456. background: rgba(255, 255, 255, 0.15);
  1457. color: #ffffff !important;
  1458. }
  1459. .ui.inverted.vertical.menu .item .menu .active.item {
  1460. background: transparent;
  1461. color: #FFFFFF;
  1462. }
  1463. .ui.inverted.pointing.menu .active.item:after {
  1464. background: #3D3E3F !important;
  1465. margin: 0em !important;
  1466. -webkit-box-shadow: none !important;
  1467. box-shadow: none !important;
  1468. border: none !important;
  1469. }
  1470.  
  1471. /*--- Active Hover ---*/
  1472.  
  1473. .ui.inverted.menu .active.item:hover {
  1474. background: rgba(255, 255, 255, 0.15);
  1475. color: #FFFFFF !important;
  1476. }
  1477. .ui.inverted.pointing.menu .active.item:hover:after {
  1478. background: #3D3E3F !important;
  1479. }
  1480.  
  1481. /*--------------
  1482. Floated
  1483. ---------------*/
  1484.  
  1485. .ui.floated.menu {
  1486. float: left;
  1487. margin: 0rem 0.5rem 0rem 0rem;
  1488. }
  1489. .ui.floated.menu .item:last-child:before {
  1490. display: none;
  1491. }
  1492. .ui.right.floated.menu {
  1493. float: right;
  1494. margin: 0rem 0rem 0rem 0.5rem;
  1495. }
  1496.  
  1497. /*--------------
  1498. Inverted
  1499. ---------------*/
  1500.  
  1501.  
  1502. /* Red */
  1503. .ui.inverted.menu .red.active.item,
  1504. .ui.inverted.red.menu {
  1505. background-color: #DB2828;
  1506. }
  1507. .ui.inverted.red.menu .item:before {
  1508. background-color: rgba(34, 36, 38, 0.1);
  1509. }
  1510. .ui.inverted.red.menu .active.item {
  1511. background-color: rgba(0, 0, 0, 0.1) !important;
  1512. }
  1513.  
  1514. /* Orange */
  1515. .ui.inverted.menu .orange.active.item,
  1516. .ui.inverted.orange.menu {
  1517. background-color: #F2711C;
  1518. }
  1519. .ui.inverted.orange.menu .item:before {
  1520. background-color: rgba(34, 36, 38, 0.1);
  1521. }
  1522. .ui.inverted.orange.menu .active.item {
  1523. background-color: rgba(0, 0, 0, 0.1) !important;
  1524. }
  1525.  
  1526. /* Yellow */
  1527. .ui.inverted.menu .yellow.active.item,
  1528. .ui.inverted.yellow.menu {
  1529. background-color: #FBBD08;
  1530. }
  1531. .ui.inverted.yellow.menu .item:before {
  1532. background-color: rgba(34, 36, 38, 0.1);
  1533. }
  1534. .ui.inverted.yellow.menu .active.item {
  1535. background-color: rgba(0, 0, 0, 0.1) !important;
  1536. }
  1537.  
  1538. /* Olive */
  1539. .ui.inverted.menu .olive.active.item,
  1540. .ui.inverted.olive.menu {
  1541. background-color: #B5CC18;
  1542. }
  1543. .ui.inverted.olive.menu .item:before {
  1544. background-color: rgba(34, 36, 38, 0.1);
  1545. }
  1546. .ui.inverted.olive.menu .active.item {
  1547. background-color: rgba(0, 0, 0, 0.1) !important;
  1548. }
  1549.  
  1550. /* Green */
  1551. .ui.inverted.menu .green.active.item,
  1552. .ui.inverted.green.menu {
  1553. background-color: #21BA45;
  1554. }
  1555. .ui.inverted.green.menu .item:before {
  1556. background-color: rgba(34, 36, 38, 0.1);
  1557. }
  1558. .ui.inverted.green.menu .active.item {
  1559. background-color: rgba(0, 0, 0, 0.1) !important;
  1560. }
  1561.  
  1562. /* Teal */
  1563. .ui.inverted.menu .teal.active.item,
  1564. .ui.inverted.teal.menu {
  1565. background-color: #00B5AD;
  1566. }
  1567. .ui.inverted.teal.menu .item:before {
  1568. background-color: rgba(34, 36, 38, 0.1);
  1569. }
  1570. .ui.inverted.teal.menu .active.item {
  1571. background-color: rgba(0, 0, 0, 0.1) !important;
  1572. }
  1573.  
  1574. /* Blue */
  1575. .ui.inverted.menu .blue.active.item,
  1576. .ui.inverted.blue.menu {
  1577. background-color: #2185D0;
  1578. }
  1579. .ui.inverted.blue.menu .item:before {
  1580. background-color: rgba(34, 36, 38, 0.1);
  1581. }
  1582. .ui.inverted.blue.menu .active.item {
  1583. background-color: rgba(0, 0, 0, 0.1) !important;
  1584. }
  1585.  
  1586. /* Violet */
  1587. .ui.inverted.menu .violet.active.item,
  1588. .ui.inverted.violet.menu {
  1589. background-color: #6435C9;
  1590. }
  1591. .ui.inverted.violet.menu .item:before {
  1592. background-color: rgba(34, 36, 38, 0.1);
  1593. }
  1594. .ui.inverted.violet.menu .active.item {
  1595. background-color: rgba(0, 0, 0, 0.1) !important;
  1596. }
  1597.  
  1598. /* Purple */
  1599. .ui.inverted.menu .purple.active.item,
  1600. .ui.inverted.purple.menu {
  1601. background-color: #A333C8;
  1602. }
  1603. .ui.inverted.purple.menu .item:before {
  1604. background-color: rgba(34, 36, 38, 0.1);
  1605. }
  1606. .ui.inverted.purple.menu .active.item {
  1607. background-color: rgba(0, 0, 0, 0.1) !important;
  1608. }
  1609.  
  1610. /* Pink */
  1611. .ui.inverted.menu .pink.active.item,
  1612. .ui.inverted.pink.menu {
  1613. background-color: #E03997;
  1614. }
  1615. .ui.inverted.pink.menu .item:before {
  1616. background-color: rgba(34, 36, 38, 0.1);
  1617. }
  1618. .ui.inverted.pink.menu .active.item {
  1619. background-color: rgba(0, 0, 0, 0.1) !important;
  1620. }
  1621.  
  1622. /* Brown */
  1623. .ui.inverted.menu .brown.active.item,
  1624. .ui.inverted.brown.menu {
  1625. background-color: #A5673F;
  1626. }
  1627. .ui.inverted.brown.menu .item:before {
  1628. background-color: rgba(34, 36, 38, 0.1);
  1629. }
  1630. .ui.inverted.brown.menu .active.item {
  1631. background-color: rgba(0, 0, 0, 0.1) !important;
  1632. }
  1633.  
  1634. /* Grey */
  1635. .ui.inverted.menu .grey.active.item,
  1636. .ui.inverted.grey.menu {
  1637. background-color: #767676;
  1638. }
  1639. .ui.inverted.grey.menu .item:before {
  1640. background-color: rgba(34, 36, 38, 0.1);
  1641. }
  1642. .ui.inverted.grey.menu .active.item {
  1643. background-color: rgba(0, 0, 0, 0.1) !important;
  1644. }
  1645.  
  1646. /*--------------
  1647. Fitted
  1648. ---------------*/
  1649.  
  1650. .ui.fitted.menu .item,
  1651. .ui.fitted.menu .item .menu .item,
  1652. .ui.menu .fitted.item {
  1653. padding: 0em;
  1654. }
  1655. .ui.horizontally.fitted.menu .item,
  1656. .ui.horizontally.fitted.menu .item .menu .item,
  1657. .ui.menu .horizontally.fitted.item {
  1658. padding-top: 0.92857143em;
  1659. padding-bottom: 0.92857143em;
  1660. }
  1661. .ui.vertically.fitted.menu .item,
  1662. .ui.vertically.fitted.menu .item .menu .item,
  1663. .ui.menu .vertically.fitted.item {
  1664. padding-left: 1.14285714em;
  1665. padding-right: 1.14285714em;
  1666. }
  1667.  
  1668. /*--------------
  1669. Borderless
  1670. ---------------*/
  1671.  
  1672. .ui.borderless.menu .item:before,
  1673. .ui.borderless.menu .item .menu .item:before,
  1674. .ui.menu .borderless.item:before {
  1675. background: none !important;
  1676. }
  1677.  
  1678. /*-------------------
  1679. Compact
  1680. --------------------*/
  1681.  
  1682. .ui.compact.menu {
  1683. display: -webkit-inline-box;
  1684. display: -ms-inline-flexbox;
  1685. display: inline-flex;
  1686. margin: 0em;
  1687. vertical-align: middle;
  1688. }
  1689. .ui.compact.vertical.menu {
  1690. display: inline-block;
  1691. }
  1692. .ui.compact.menu .item:last-child {
  1693. border-radius: 0em 0.28571429rem 0.28571429rem 0em;
  1694. }
  1695. .ui.compact.menu .item:last-child:before {
  1696. display: none;
  1697. }
  1698. .ui.compact.vertical.menu {
  1699. width: auto !important;
  1700. }
  1701. .ui.compact.vertical.menu .item:last-child::before {
  1702. display: block;
  1703. }
  1704.  
  1705. /*-------------------
  1706. Fluid
  1707. --------------------*/
  1708.  
  1709. .ui.menu.fluid,
  1710. .ui.vertical.menu.fluid {
  1711. width: 100% !important;
  1712. }
  1713.  
  1714. /*-------------------
  1715. Evenly Sized
  1716. --------------------*/
  1717.  
  1718. .ui.item.menu,
  1719. .ui.item.menu .item {
  1720. width: 100%;
  1721. padding-left: 0em !important;
  1722. padding-right: 0em !important;
  1723. margin-left: 0em !important;
  1724. margin-right: 0em !important;
  1725. text-align: center;
  1726. -webkit-box-pack: center;
  1727. -ms-flex-pack: center;
  1728. justify-content: center;
  1729. }
  1730. .ui.attached.item.menu {
  1731. margin: 0em -1px !important;
  1732. }
  1733. .ui.item.menu .item:last-child:before {
  1734. display: none;
  1735. }
  1736. .ui.menu.two.item .item {
  1737. width: 50%;
  1738. }
  1739. .ui.menu.three.item .item {
  1740. width: 33.333%;
  1741. }
  1742. .ui.menu.four.item .item {
  1743. width: 25%;
  1744. }
  1745. .ui.menu.five.item .item {
  1746. width: 20%;
  1747. }
  1748. .ui.menu.six.item .item {
  1749. width: 16.666%;
  1750. }
  1751. .ui.menu.seven.item .item {
  1752. width: 14.285%;
  1753. }
  1754. .ui.menu.eight.item .item {
  1755. width: 12.500%;
  1756. }
  1757. .ui.menu.nine.item .item {
  1758. width: 11.11%;
  1759. }
  1760. .ui.menu.ten.item .item {
  1761. width: 10.0%;
  1762. }
  1763. .ui.menu.eleven.item .item {
  1764. width: 9.09%;
  1765. }
  1766. .ui.menu.twelve.item .item {
  1767. width: 8.333%;
  1768. }
  1769.  
  1770. /*--------------
  1771. Fixed
  1772. ---------------*/
  1773.  
  1774. .ui.menu.fixed {
  1775. position: fixed;
  1776. z-index: 101;
  1777. margin: 0em;
  1778. width: 100%;
  1779. }
  1780. .ui.menu.fixed,
  1781. .ui.menu.fixed .item:first-child,
  1782. .ui.menu.fixed .item:last-child {
  1783. border-radius: 0px !important;
  1784. }
  1785. .ui.fixed.menu,
  1786. .ui[class*="top fixed"].menu {
  1787. top: 0px;
  1788. left: 0px;
  1789. right: auto;
  1790. bottom: auto;
  1791. }
  1792. .ui[class*="top fixed"].menu {
  1793. border-top: none;
  1794. border-left: none;
  1795. border-right: none;
  1796. }
  1797. .ui[class*="right fixed"].menu {
  1798. border-top: none;
  1799. border-bottom: none;
  1800. border-right: none;
  1801. top: 0px;
  1802. right: 0px;
  1803. left: auto;
  1804. bottom: auto;
  1805. width: auto;
  1806. height: 100%;
  1807. }
  1808. .ui[class*="bottom fixed"].menu {
  1809. border-bottom: none;
  1810. border-left: none;
  1811. border-right: none;
  1812. bottom: 0px;
  1813. left: 0px;
  1814. top: auto;
  1815. right: auto;
  1816. }
  1817. .ui[class*="left fixed"].menu {
  1818. border-top: none;
  1819. border-bottom: none;
  1820. border-left: none;
  1821. top: 0px;
  1822. left: 0px;
  1823. right: auto;
  1824. bottom: auto;
  1825. width: auto;
  1826. height: 100%;
  1827. }
  1828.  
  1829. /* Coupling with Grid */
  1830. .ui.fixed.menu + .ui.grid {
  1831. padding-top: 2.75rem;
  1832. }
  1833.  
  1834. /*-------------------
  1835. Pointing
  1836. --------------------*/
  1837.  
  1838. .ui.pointing.menu .item:after {
  1839. visibility: hidden;
  1840. position: absolute;
  1841. content: '';
  1842. top: 100%;
  1843. left: 50%;
  1844. -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1845. transform: translateX(-50%) translateY(-50%) rotate(45deg);
  1846. background: none;
  1847. margin: 0.5px 0em 0em;
  1848. width: 0.57142857em;
  1849. height: 0.57142857em;
  1850. border: none;
  1851. border-bottom: 1px solid #D4D4D5;
  1852. border-right: 1px solid #D4D4D5;
  1853. z-index: 2;
  1854. -webkit-transition: background 0.1s ease;
  1855. transition: background 0.1s ease;
  1856. }
  1857. .ui.vertical.pointing.menu .item:after {
  1858. position: absolute;
  1859. top: 50%;
  1860. right: 0%;
  1861. bottom: auto;
  1862. left: auto;
  1863. -webkit-transform: translateX(50%) translateY(-50%) rotate(45deg);
  1864. transform: translateX(50%) translateY(-50%) rotate(45deg);
  1865. margin: 0em -0.5px 0em 0em;
  1866. border: none;
  1867. border-top: 1px solid #D4D4D5;
  1868. border-right: 1px solid #D4D4D5;
  1869. }
  1870.  
  1871. /* Active */
  1872. .ui.pointing.menu .active.item:after {
  1873. visibility: visible;
  1874. }
  1875. .ui.pointing.menu .active.dropdown.item:after {
  1876. visibility: hidden;
  1877. }
  1878.  
  1879. /* Don't double up pointers */
  1880. .ui.pointing.menu .dropdown.active.item:after,
  1881. .ui.pointing.menu .active.item .menu .active.item:after {
  1882. display: none;
  1883. }
  1884.  
  1885. /* Colors */
  1886. .ui.pointing.menu .active.item:hover:after {
  1887. background-color: #F2F2F2;
  1888. }
  1889. .ui.pointing.menu .active.item:after {
  1890. background-color: #F2F2F2;
  1891. }
  1892. .ui.pointing.menu .active.item:hover:after {
  1893. background-color: #F2F2F2;
  1894. }
  1895. .ui.vertical.pointing.menu .active.item:hover:after {
  1896. background-color: #F2F2F2;
  1897. }
  1898. .ui.vertical.pointing.menu .active.item:after {
  1899. background-color: #F2F2F2;
  1900. }
  1901. .ui.vertical.pointing.menu .menu .active.item:after {
  1902. background-color: #FFFFFF;
  1903. }
  1904.  
  1905. /*--------------
  1906. Attached
  1907. ---------------*/
  1908.  
  1909.  
  1910. /* Middle */
  1911. .ui.attached.menu {
  1912. top: 0px;
  1913. bottom: 0px;
  1914. border-radius: 0px;
  1915. margin: 0em -1px;
  1916. width: calc(100% + 2px );
  1917. max-width: calc(100% + 2px );
  1918. -webkit-box-shadow: none;
  1919. box-shadow: none;
  1920. }
  1921. .ui.attached + .ui.attached.menu:not(.top) {
  1922. border-top: none;
  1923. }
  1924.  
  1925. /* Top */
  1926. .ui[class*="top attached"].menu {
  1927. bottom: 0px;
  1928. margin-bottom: 0em;
  1929. top: 0px;
  1930. margin-top: 1rem;
  1931. border-radius: 0.28571429rem 0.28571429rem 0em 0em;
  1932. }
  1933. .ui.menu[class*="top attached"]:first-child {
  1934. margin-top: 0em;
  1935. }
  1936.  
  1937. /* Bottom */
  1938. .ui[class*="bottom attached"].menu {
  1939. bottom: 0px;
  1940. margin-top: 0em;
  1941. top: 0px;
  1942. margin-bottom: 1rem;
  1943. -webkit-box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1944. box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15), none;
  1945. border-radius: 0em 0em 0.28571429rem 0.28571429rem;
  1946. }
  1947. .ui[class*="bottom attached"].menu:last-child {
  1948. margin-bottom: 0em;
  1949. }
  1950.  
  1951. /* Attached Menu Item */
  1952. .ui.top.attached.menu > .item:first-child {
  1953. border-radius: 0.28571429rem 0em 0em 0em;
  1954. }
  1955. .ui.bottom.attached.menu > .item:first-child {
  1956. border-radius: 0em 0em 0em 0.28571429rem;
  1957. }
  1958.  
  1959. /* Tabular Attached */
  1960. .ui.attached.menu:not(.tabular) {
  1961. border: 1px solid #D4D4D5;
  1962. }
  1963. .ui.attached.inverted.menu {
  1964. border: none;
  1965. }
  1966. .ui.attached.tabular.menu {
  1967. margin-left: 0;
  1968. margin-right: 0;
  1969. width: 100%;
  1970. }
  1971.  
  1972. /*--------------
  1973. Sizes
  1974. ---------------*/
  1975.  
  1976.  
  1977. /* Mini */
  1978. .ui.mini.menu {
  1979. font-size: 0.78571429rem;
  1980. }
  1981. .ui.mini.vertical.menu {
  1982. width: 9rem;
  1983. }
  1984.  
  1985. /* Tiny */
  1986. .ui.tiny.menu {
  1987. font-size: 0.85714286rem;
  1988. }
  1989. .ui.tiny.vertical.menu {
  1990. width: 11rem;
  1991. }
  1992.  
  1993. /* Small */
  1994. .ui.small.menu {
  1995. font-size: 0.92857143rem;
  1996. }
  1997. .ui.small.vertical.menu {
  1998. width: 13rem;
  1999. }
  2000.  
  2001. /* Medium */
  2002. .ui.menu {
  2003. font-size: 1rem;
  2004. }
  2005. .ui.vertical.menu {
  2006. width: 15rem;
  2007. }
  2008.  
  2009. /* Large */
  2010. .ui.large.menu {
  2011. font-size: 1.07142857rem;
  2012. }
  2013. .ui.large.vertical.menu {
  2014. width: 18rem;
  2015. }
  2016.  
  2017. /* Huge */
  2018. .ui.huge.menu {
  2019. font-size: 1.21428571rem;
  2020. }
  2021. .ui.huge.vertical.menu {
  2022. width: 22rem;
  2023. }
  2024.  
  2025. /* Big */
  2026. .ui.big.menu {
  2027. font-size: 1.14285714rem;
  2028. }
  2029. .ui.big.vertical.menu {
  2030. width: 20rem;
  2031. }
  2032.  
  2033. /* Massive */
  2034. .ui.massive.menu {
  2035. font-size: 1.28571429rem;
  2036. }
  2037. .ui.massive.vertical.menu {
  2038. width: 25rem;
  2039. }
  2040.  
  2041.  
  2042. /*******************************
  2043. Theme Overrides
  2044. *******************************/
  2045. /*******************************
  2046. Site Overrides
  2047. *******************************/
  2048. /*******************************
  2049. Theme Overrides
  2050. *******************************/
  2051. /*******************************
  2052. Site Overrides
  2053. *******************************/
  2054. /*******************************
  2055. Theme Overrides
  2056. *******************************/
  2057. /*******************************
  2058. Site Overrides
  2059. *******************************/
  2060. /*******************************
  2061. Theme Overrides
  2062. *******************************/
  2063. /*******************************
  2064. Site Overrides
  2065. *******************************/
  2066.  
  2067.  
  2068. $color_1: #fff;
  2069. $color_2: rgb(196, 140, 218);
  2070. $color_3: rgba(255, 255, 255, .9);
  2071. $color_4: rgba(231, 171, 255);
  2072. $color_5: rgb(205, 80, 255);
  2073. $color_6: rgba(255, 255, 255, 0.6);
  2074. $background_color_1: rgba(255, 255, 255, .9);
  2075. $background_color_2: #fff;
  2076. $background_color_3: #ffd;
  2077.  
  2078. /*menu icon*/
  2079. /*navbar*/
  2080. /*generic panel styles*/
  2081. /*first panel*/
  2082. /*second panel*/
  2083. /*third panel*/
  2084. /*fourth panel*/
  2085. /*fifth panel*/
  2086. /*footer panel*/
  2087. /*other styles*/
  2088. /*navbar*/
  2089. /*second panel*/
  2090. /*third panel*/
  2091. /*fourth panel*/
  2092. /*fifth panel*/
  2093. /*footer*/
  2094.  
  2095. html {
  2096. height: 100%;
  2097. }
  2098. body {
  2099. height: 100%;
  2100. }
  2101.  
  2102. #wrap {
  2103. .col {
  2104. body{ margin: 0 auto;
  2105. }
  2106. } }
  2107.  
  2108. .ui.menu {
  2109. .item.menu {
  2110. .container {
  2111. .bar1 {
  2112. width: 17px;
  2113. height: 2px;
  2114. background-color: $background_color_1;
  2115. margin: 3px 0;
  2116. transition: 0.4s;
  2117. }
  2118. }
  2119. .change {
  2120. .bar1 {
  2121. -webkit-transform: rotate(-45deg) translate(-4px, 3px);
  2122. transform: rotate(-45deg) translate(-4px, 3px);
  2123. }
  2124. .bar2 {
  2125. opacity: 0;
  2126. }
  2127. .bar3 {
  2128. -webkit-transform: rotate(45deg) translate(-4px, -4px);
  2129. transform: rotate(45deg) translate(-4px, -4px);
  2130. }
  2131. }
  2132. }
  2133. .item {
  2134. color: $color_3;
  2135. }
  2136. }
  2137.  
  2138. .bar2 {
  2139. width: 17px;
  2140. height: 2px;
  2141. background-color: $background_color_1;
  2142. margin: 3px 0;
  2143. transition: 0.4s;
  2144. }
  2145. .bar3 {
  2146. width: 17px;
  2147. height: 2px;
  2148. background-color: $background_color_1;
  2149. margin: 3px 0;
  2150. transition: 0.4s;
  2151. }
  2152. .ui.navbar {
  2153. width: 100%;
  2154. display: table;
  2155. position: fixed;
  2156. top: 0;
  2157. left: 0;
  2158. z-index: 100;
  2159. .ui.nav.container {
  2160. display: table-row;
  2161. .ui.secondary.pointing.menu {
  2162. margin-left: 0;
  2163. margin-right: 0;
  2164. margin-bottom: 0;
  2165. border-bottom: none;
  2166. background: rgba(153, 34, 201, 0.2);
  2167. -webkit-transition: background 1000ms linear;
  2168. -ms-transition: background 1000ms linear;
  2169. transition: background 1000ms linear;
  2170. }
  2171. .ui.secondary.pointing.menu.open {
  2172. background: rgb(196, 140, 218);
  2173. .item.con {
  2174. display: none;
  2175. }
  2176. }
  2177. }
  2178. .ui.nav.menu {
  2179. display: table-row;
  2180. background: rgba(153, 34, 201, 0.2);
  2181. height: 0%;
  2182. -webkit-transition: height .3s ease-in, background 1000ms linear;
  2183. transition: height .3s ease-in, background 1000ms linear;
  2184. .ui.nav.left {
  2185. width: 50%;
  2186. max-height: 0;
  2187. -webkit-transition: max-height .3s ease-in;
  2188. transition: max-height .3s ease-in;
  2189. margin: 0% 5% 0% 5%;
  2190. overflow: hidden;
  2191. float: left;
  2192. .ui.header {
  2193. max-height: 0%;
  2194. -webkit-transition: max-height .3s ease-in;
  2195. transition: max-height .3s ease-in;
  2196. margin: 0% 5% 0% 5%;
  2197. display: none;
  2198. }
  2199. }
  2200. .ui.nav.right {
  2201. background: #fff;
  2202. width: 30%;
  2203. max-height: 0;
  2204. -webkit-transition: max-height .3s ease-in;
  2205. transition: max-height .3s ease-in;
  2206. margin: 0% 10% 0% 10%;
  2207. overflow: hidden;
  2208. float: left;
  2209. .ui.header {
  2210. height: 0px;
  2211. -webkit-transition: height .3s ease-in;
  2212. transition: height .3s ease-in;
  2213. margin: 0% 5% 0% 5%;
  2214. display: none;
  2215. margin-right: 0;
  2216. }
  2217. }
  2218. }
  2219. .ui.nav.menu.open {
  2220. background: rgb(196, 140, 218);
  2221. height: 100%;
  2222. .ui.nav.left {
  2223. margin: 5% 5% 5% 5%;
  2224. height: auto;
  2225. max-height: 100%;
  2226. .ui.header {
  2227. display: block;
  2228. height: auto;
  2229. padding-top: .5rem;
  2230. padding-bottom: .5rem;
  2231. cursor: default;
  2232. color: $color_1;
  2233. margin-left: 0;
  2234. padding-left: 5%;
  2235. max-height: 100%;
  2236. &:hover {
  2237. background: #fff;
  2238. color: $color_2;
  2239. }
  2240. }
  2241. }
  2242. .ui.nav.right {
  2243. margin: 5% 5% 5% 5%;
  2244. height: auto;
  2245. float: left;
  2246. max-height: 100%;
  2247. .ui.header {
  2248. display: block;
  2249. height: auto;
  2250. padding-top: .5rem;
  2251. padding-bottom: .5rem;
  2252. cursor: default;
  2253. color: $color_2;
  2254. margin-left: 0;
  2255. padding-left: 5%;
  2256. &:hover {
  2257. color: $color_1;
  2258. background: rgb(196, 140, 218);
  2259. }
  2260. }
  2261. }
  2262. }
  2263. }
  2264.  
  2265. .ui.navbar.open {
  2266. height: 100%;
  2267. }
  2268. .ui.full {
  2269. position: relative;
  2270. margin: 0 auto;
  2271. height: 100%;
  2272. width: 90%;
  2273. background-color: $background_color_2;
  2274. }
  2275.  
  2276. .first.panel {
  2277. background-image: url('/assets/Bitmap.png');
  2278. background-repeat: no-repeat;
  2279. background-size: 100% 100%;
  2280. width: 100%;
  2281. .ui.header {
  2282. margin: 0 auto;
  2283. color: $color_1;
  2284. font-size: 6rem;
  2285. padding-left: 10%;
  2286. padding-top: 10%;
  2287. .sub.header {
  2288. color: $color_1;
  2289. margin-bottom: 20px;
  2290. }
  2291. .ui.primary.basic.button {
  2292. -webkit-box-shadow: 0 0 0 1px rgba(231, 171, 255) inset !important;
  2293. box-shadow: 0 0 0 1px rgba(231, 171, 255) inset !important;
  2294. color: $color_4 !important;
  2295. &:hover {
  2296. background: rgba(231, 171, 255, 1);
  2297. color: $color_1 !important;
  2298. background: rgba(231, 171, 255, 1) !important;
  2299. }
  2300. }
  2301. }
  2302. }
  2303.  
  2304. .second.panel {
  2305. .ui.left {
  2306. width: 30%;
  2307. padding: 10% 0% 0% 0%;
  2308. float: left;
  2309. clear: left;
  2310. .ui.header.title {
  2311. font-size: 2.5rem;
  2312. color: $color_5;
  2313. }
  2314. .ui.header.navigator {
  2315. margin-top: 10%;
  2316. }
  2317. .ui.header.toggle {
  2318. height: 30px;
  2319. }
  2320. .ui.header {
  2321. .sub.header {
  2322. .button {
  2323. -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2324. box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2325. color: $color_5 !important;
  2326. &:hover {
  2327. background: rgba(205, 80, 255, 1);
  2328. color: $color_1 !important;
  2329. background: rgba(205, 80, 255, 1) !important;
  2330. }
  2331. }
  2332. .ui.text {
  2333. float: left;
  2334. line-height: 1.6rem;
  2335. margin-right: 1rem;
  2336. }
  2337. .ui.display.one {
  2338. display: block;
  2339. height: 16px;
  2340. width: 16px;
  2341. float: left;
  2342. border: solid rgba(0,0,0,.6) 4px;
  2343. }
  2344. .ui.display.two {
  2345. display: block;
  2346. height: 24px;
  2347. width: 24px;
  2348. float: left;
  2349. margin-left: 1rem;
  2350. .ui.top {
  2351. display: block;
  2352. height: 13px;
  2353. width: 100%;
  2354. float: left;
  2355. }
  2356. .ui.bot {
  2357. display: block;
  2358. height: 11px;
  2359. width: 100%;
  2360. }
  2361. .ui.square.one {
  2362. display: block;
  2363. height: 7px;
  2364. width: 7px;
  2365. float: left;
  2366. border: solid rgba(0,0,0,.6) 2px;
  2367. }
  2368. .ui.square.two {
  2369. display: block;
  2370. height: 7px;
  2371. width: 7px;
  2372. float: right;
  2373. border: solid rgba(0,0,0,.6) 2px;
  2374. }
  2375. }
  2376. }
  2377. }
  2378. }
  2379. .ui.right {
  2380. background: #fff;
  2381. float: left;
  2382. width: 70%;
  2383. height: 100%;
  2384. .ui.card.container {
  2385. background-color: $background_color_3;
  2386. width: 98%;
  2387. height: 88%;
  2388. margin-top: 6%;
  2389. position: relative;
  2390. overflow-x: hidden;
  2391. overflow-y: auto;
  2392. .ui.glider {
  2393. display: none;
  2394. }
  2395. }
  2396. .ui.card.container.full {
  2397. background-color: $background_color_3;
  2398. width: 100%;
  2399. height: 70%;
  2400. margin-top: 15%;
  2401. position: relative;
  2402. overflow: hidden;
  2403. .ui.card {
  2404. height: 100%;
  2405. width: 0%;
  2406. float: left;
  2407. -webkit-transition: width .3s ease-in;
  2408. transition: width .3s ease-in;
  2409. height: 100%;
  2410. width: 0%;
  2411. float: left;
  2412. -webkit-transition: width .3s ease-in;
  2413. transition: width .3s ease-in;
  2414. .ui.image {
  2415. height: 100%;
  2416. width: 100%;
  2417. background-size: cover;
  2418. }
  2419. }
  2420. .ui.card.selected {
  2421. width: 100%;
  2422. }
  2423. .ui.glider {
  2424. display: block;
  2425. position: absolute;
  2426. top: 0;
  2427. padding: 0;
  2428. z-index: 50;
  2429. }
  2430. .ui.glider.left {
  2431. width: 31px;
  2432. height: 100%;
  2433. background: rgba(0,0,0,0);
  2434. left: 0;
  2435. }
  2436. .ui.glider.right {
  2437. width: 31px;
  2438. height: 100%;
  2439. background: rgba(0,0,0,0);
  2440. right: 0;
  2441. }
  2442. .ui.glider.container {
  2443. position: relative;
  2444. top: 50%;
  2445. transform: translateY(-50%);
  2446. background: rgba(151, 151, 151, 0.4);
  2447. padding-top: 5px;
  2448. padding-bottom: 5px;
  2449. &:hover {
  2450. background: rgba(151, 151, 151, 0.8);
  2451. }
  2452. }
  2453. }
  2454. }
  2455. .ui.right2 {
  2456. background: #fff;
  2457. float: left;
  2458. width: 70%;
  2459. height: 100%;
  2460. background-image: url('/assets/Product Shot.png');
  2461. }
  2462. }
  2463.  
  2464. .third.panel {
  2465. background: rgb(205, 80, 255);
  2466. padding: 5%;
  2467. .ui.left {
  2468. float: left;
  2469. width: 30%;
  2470. color: $color_1;
  2471. padding: 10%;
  2472. .ui.huge.header {
  2473. .ui.header {
  2474. font-size: 3rem;
  2475. color: $color_1;
  2476. }
  2477. .sub.header {
  2478. font-size: .7rem;
  2479. color: $color_1;
  2480. }
  2481. }
  2482. }
  2483. .ui.right {
  2484. float: left;
  2485. width: 30%;
  2486. color: $color_1;
  2487. padding: 10% 0% 0% 0%;
  2488. .ui.huge.header {
  2489. border: solid 5px #fff;
  2490. padding: 10%;
  2491. .ui.header {
  2492. font-size: 1.8rem;
  2493. color: $color_1;
  2494. }
  2495. .sub.header {
  2496. .ui.header {
  2497. font-size: 1rem;
  2498. color: $color_1;
  2499. margin-top: 5%;
  2500. }
  2501. .sub.header {
  2502. font-size: 1rem;
  2503. color: $color_1;
  2504. }
  2505. }
  2506. }
  2507. }
  2508. }
  2509.  
  2510. .fourth.panel {
  2511. float: left;
  2512. width: 90%;
  2513. height: unset;
  2514. color: $color_1;
  2515. padding: 10% 5% 0% 5%;
  2516. position: relative;
  2517. .ui.header.title {
  2518. margin-bottom: 2%;
  2519. color: $color_5;
  2520. }
  2521. .ui.stories {
  2522. float: left;
  2523. width: 100%;
  2524. background: #fff;
  2525. margin-bottom: 5%;
  2526. .ui.content {
  2527. float: left;
  2528. width: 30%;
  2529. height: auto;
  2530. .ui.image {
  2531. float: left;
  2532. width: 100%;
  2533. height: 300px;
  2534. background: #000;
  2535. }
  2536. .ui.details {
  2537. padding-top: 8px;
  2538. clear: left;
  2539. }
  2540. }
  2541. .ui.content.mid {
  2542. margin-left: 5%;
  2543. margin-right: 5%;
  2544. }
  2545. }
  2546. .ui.primary.basic.button {
  2547. position: absolute;
  2548. top: 20%;
  2549. right: 5%;
  2550. -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2551. box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2552. color: $color_5 !important;
  2553. &:hover {
  2554. background: rgb(205, 80, 255) !important;
  2555. color: $color_1 !important;
  2556. }
  2557. }
  2558. }
  2559.  
  2560. .fifth.panel {
  2561. float: left;
  2562. width: 90%;
  2563. height: unset;
  2564. color: $color_1;
  2565. background: rgb(221, 218, 218);
  2566. padding: 10% 5% 0% 5%;
  2567. position: relative;
  2568. .ui.primary.basic.button {
  2569. position: absolute;
  2570. top: 25%;
  2571. right: 5%;
  2572. -webkit-box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2573. box-shadow: 0 0 0 1px rgba(205, 80, 255) inset !important;
  2574. color: $color_5 !important;
  2575. &:hover {
  2576. background: rgb(205, 80, 255) !important;
  2577. color: $color_1 !important;
  2578. }
  2579. }
  2580. .ui.header.title {
  2581. margin-bottom: 2%;
  2582. color: $color_5;
  2583. }
  2584. .ui.stories {
  2585. float: left;
  2586. width: 100%;
  2587. background: #fff;
  2588. margin-bottom: 5%;
  2589. .ui.content {
  2590. float: left;
  2591. width: 100%;
  2592. .ui.image {
  2593. float: left;
  2594. width: 50%;
  2595. height: 300px;
  2596. background: #000;
  2597. }
  2598. }
  2599. }
  2600. }
  2601.  
  2602. .ui.footer.panel {
  2603. width: 100%;
  2604. display: table;
  2605. background: rgb(205, 80, 255);
  2606. .ui.footer.top {
  2607. display: table-row;
  2608. .ui.link.list {
  2609. .item {
  2610. color: $color_1;
  2611. padding-bottom: .7rem;
  2612. }
  2613. .item.head {
  2614. display: none;
  2615. }
  2616. }
  2617. .ui.div1 {
  2618. width: 17.5%;
  2619. float: left;
  2620. margin-top: 3%;
  2621. margin-bottom: 3%;
  2622. }
  2623. .ui.div1.logo {
  2624. margin-left: 5%;
  2625. }
  2626. .ui.div2 {
  2627. width: 20%;
  2628. float: left;
  2629. margin-top: 3%;
  2630. .ui.form {
  2631. .field {
  2632. .ui.header {
  2633. color: $color_1;
  2634. }
  2635. label {
  2636. color: $color_1 !important;
  2637. }
  2638. }
  2639. .ui.button {
  2640. color: $color_1;
  2641. background: rgb(205, 80, 255);
  2642. width: 100%;
  2643. -webkit-box-shadow: 0 0 0 1px #fff inset !important;
  2644. box-shadow: 0 0 0 1px #fff inset !important;
  2645. &:hover {
  2646. background: #fff;
  2647. color: $color_5;
  2648. }
  2649. }
  2650. }
  2651. }
  2652. }
  2653. .ui.footer.bot {
  2654. position: relative;
  2655. width: 100%;
  2656. display: table-row;
  2657. .ui.header {
  2658. float: left;
  2659. margin: 0;
  2660. margin-bottom: 1%;
  2661. .sub.header {
  2662. color: $color_1;
  2663. font-size: .7rem;
  2664. }
  2665. }
  2666. .ui.header.rights {
  2667. margin-left: 5%;
  2668. }
  2669. .ui.header.phone {
  2670. float: right;
  2671. margin-right: 5%;
  2672. }
  2673. .ui.header.policy {
  2674. float: right;
  2675. margin-right: 2%;
  2676. cursor: default;
  2677. }
  2678. .ui.header.terms {
  2679. float: right;
  2680. margin-right: 2%;
  2681. cursor: default;
  2682. }
  2683. }
  2684. }
  2685.  
  2686. #main_menu {
  2687. a {
  2688. &:hover {
  2689. color: $color_6;
  2690. }
  2691. }
  2692. }
  2693.  
  2694.  
  2695. @media screen and (max-width: 44em) {
  2696. .ui.navbar {
  2697. .ui.nav.menu.open {
  2698. .ui.nav.left {
  2699. margin-top: 0%;
  2700. width: 90%;
  2701. .ui.header {
  2702. font-size: 1.5rem;
  2703. margin-right: 0;
  2704. }
  2705. }
  2706. .ui.nav.right {
  2707. margin-top: 0;
  2708. width: 90%;
  2709. .ui.header {
  2710. font-size: 1rem;
  2711. margin-right: 0;
  2712. }
  2713. }
  2714. }
  2715. .ui.nav.container {
  2716. .ui.secondary.pointing.menu {
  2717. .item.con {
  2718. display: none;
  2719. }
  2720. }
  2721. }
  2722. }
  2723. .second.panel {
  2724. .ui.left {
  2725. width: 100%;
  2726. margin-bottom: 0;
  2727. .ui.header.title {
  2728. margin-bottom: 0;
  2729. }
  2730. .ui.header.toggle {
  2731. display: none;
  2732. }
  2733. .ui.vertical.text.menu {
  2734. display: none;
  2735. }
  2736. .ui.header.navigator {
  2737. display: none;
  2738. }
  2739. }
  2740. .ui.right {
  2741. width: 100%;
  2742. margin-bottom: 0;
  2743. height: unset;
  2744. }
  2745. .ui.right2 {
  2746. height: 70%;
  2747. width: 100%;
  2748. margin: 0;
  2749. }
  2750. }
  2751. .third.panel {
  2752. .ui.left {
  2753. width: 100%;
  2754. padding: 10% 0 0 0;
  2755. .ui.huge.header {
  2756. .ui.header {
  2757. font-size: 1.5rem;
  2758. }
  2759. }
  2760. }
  2761. .ui.right {
  2762. width: 100%;
  2763. padding: 0;
  2764. .ui.huge.header {
  2765. .ui.header {
  2766. font-size: 1.3rem;
  2767. }
  2768. }
  2769. }
  2770. }
  2771. .fourth.panel {
  2772. .ui.stories {
  2773. .ui.content {
  2774. .ui.image {
  2775. height: 23vh;
  2776. }
  2777. }
  2778. margin-bottom: 20%;
  2779. }
  2780. .ui.primary.basic.button {
  2781. bottom: 2%;
  2782. top: unset;
  2783. width: 90%;
  2784. margin: 0;
  2785. }
  2786. }
  2787. .fifth.panel {
  2788. .ui.stories {
  2789. margin-bottom: 20%;
  2790. }
  2791. .ui.primary.basic.button {
  2792. bottom: 2%;
  2793. top: unset;
  2794. width: 90%;
  2795. margin: 0;
  2796. }
  2797. }
  2798. .ui.footer.panel {
  2799. .ui.footer.top {
  2800. .ui.div1.logo {
  2801. margin: 5%;
  2802. }
  2803. .ui.div1 {
  2804. width: 90%;
  2805. margin: 0 5% 0 5%;
  2806. .ui.link.list {
  2807. .item {
  2808. display: none;
  2809. }
  2810. .item.head {
  2811. display: block;
  2812. }
  2813. }
  2814. }
  2815. .ui.div2 {
  2816. margin: 5%;
  2817. width: 90%;
  2818. border-top: solid 2px #fff;
  2819. padding-top: 5%;
  2820. }
  2821. }
  2822. .ui.footer.bot {
  2823. .ui.header.rights {
  2824. width: 90%;
  2825. }
  2826. }
  2827. }
  2828. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!