API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 7th, 2020
226
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 16.98 KB | None | 0 0
raw download clone embed print report
  1. // /**
  2. //  * Copyright © 2016 Magento. All rights reserved.
  3. //  * See COPYING.txt for license details.
  4. //  */
  5.  
  6. //
  7. //  Variables
  8. //  _____________________________________________
  9.  
  10. @active-nav-indent: 54px;
  11.  
  12.  
  13.  
  14. //
  15. //  Common
  16. //  _____________________________________________
  17.  
  18. & when (@media-common = true) {
  19.  
  20.     .panel.header {
  21.         .links,
  22.         .switcher {
  23.             display: none;
  24.         }
  25.     }
  26.  
  27.     .nav-sections {
  28.         .lib-css(background, #363636);
  29.         z-index: 2;
  30.     }
  31.  
  32.     .nav-toggle {
  33.         .lib-icon-font(
  34.         @icon-menu,
  35.         @_icon-font-size: 28px,
  36.         @_icon-font-color: @header-icons-color,
  37.         @_icon-font-color-hover: @header-icons-color-hover
  38.         );
  39.         .lib-icon-text-hide();
  40.         cursor: pointer;
  41.         display: block;
  42.         font-size: 0;
  43.         left: 15px;
  44.         position: absolute;
  45.         top: 50%;
  46.         margin-top: -20px;
  47.         z-index: 14;
  48.     }
  49. }
  50.  
  51.  
  52.  
  53. //
  54. //  Mobile
  55. //  _____________________________________________
  56.  
  57. .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__m) {
  58.     .navigation {
  59.         background: #363636 !important;
  60.         padding: 0;
  61.  
  62.         .parent {
  63.             .level-top {
  64.                
  65.                 .lib-icon-font(
  66.                 @_icon-font-content: @icon-down,
  67.                 @_icon-font-size: 42px,
  68.                 @_icon-font-position: after,
  69.                 @_icon-font-display: block
  70.                 );
  71.  
  72.                 &:after {
  73.                     position: absolute;
  74.                     right: 7px;
  75.                     top: -8px;
  76.                 }
  77.  
  78.                 &.ui-state-active {
  79.                     .lib-icon-font-symbol(
  80.                     @_icon-font-content: @icon-up,
  81.                     @_icon-font-position: after
  82.                     );
  83.                 }
  84.             }
  85.         }
  86.         .level0 {
  87.             border-color: #2e2e2e !important;
  88.  
  89.             > .level-top{
  90.                 color: @blanco;
  91.                 font-weight: normal !important;
  92.                 .fontParuolo();
  93.                 padding: .8rem @indent__base !important;
  94.                 font-size: 15px;
  95.  
  96.                 &:after{
  97.                     top: 8px !important;
  98.                     font-size: 14px !important;
  99.                 }
  100.             }
  101.  
  102.             a{
  103.                 color: @blanco;
  104.                 font-weight: normal;
  105.                 .fontParuolo();
  106.             }
  107.             &.active{
  108.                 > a:not(.ui-state-active){
  109.                     color: @blanco !important;
  110.                     background: #2e2e2e !important;
  111.                     border-left: 0 !important;
  112.  
  113.                     span:not(.ui-menu-icon){
  114.                         margin-left: 0 !important;
  115.                     }
  116.                 }
  117.             }
  118.         }
  119.     }
  120.  
  121.     .nav-sections {
  122.         padding: 15px;
  123.         -webkit-overflow-scrolling: touch;
  124.         .lib-css(transition, left .3s, 1);
  125.         height: 100%;
  126.         left: -80%;
  127.         left: calc(~'-1 * (100% - @{active-nav-indent})');
  128.         overflow: auto;
  129.         position: fixed;
  130.         top: 0;
  131.         width: 80%;
  132.         width: calc(~'100% - @{active-nav-indent}');
  133.  
  134.         .switcher {
  135.             border-top: 1px solid @color-gray82;
  136.             font-size: 1.6rem;
  137.             font-weight: 700;
  138.             margin: 0;
  139.             padding: .8rem 3.5rem .8rem 2rem;
  140.  
  141.             .label {
  142.                 display: block;
  143.                 margin-bottom: @indent__xs;
  144.             }
  145.  
  146.             &:last-child {
  147.                 border-bottom: 1px solid @color-gray82;
  148.             }
  149.         }
  150.  
  151.         .switcher-trigger {
  152.             strong {
  153.                 position: relative;
  154.                 .lib-icon-font(
  155.                 @_icon-font-content: @icon-down,
  156.                 @_icon-font-size: 42px,
  157.                 @_icon-font-position: after,
  158.                 @_icon-font-display: block
  159.                 );
  160.  
  161.                 &:after {
  162.                     position: absolute;
  163.                     right: -40px;
  164.                     top: -16px;
  165.                 }
  166.             }
  167.  
  168.             &.active strong {
  169.                 .lib-icon-font-symbol(
  170.                 @_icon-font-content: @icon-up,
  171.                 @_icon-font-position: after
  172.                 );
  173.             }
  174.         }
  175.  
  176.         .switcher-dropdown {
  177.             .lib-list-reset-styles();
  178.             padding: @indent__s 0;
  179.         }
  180.  
  181.         .header.links {
  182.             .lib-list-reset-styles();
  183.             border-bottom: none;
  184.  
  185.             li {
  186.                 font-size: 1.6rem;
  187.                 margin: 0;
  188.  
  189.                 &.greet.welcome {
  190.                     display: none;
  191.                 }
  192.  
  193.                 > a {
  194.                     border-top: 1px solid #2e2e2e;
  195.                     font-weight: normal;
  196.                     .fontParuolo();
  197.                     color: @blanco;
  198.                     font-size: 15px;
  199.                 }
  200.             }
  201.  
  202.             a,
  203.             a:hover {
  204.                 .lib-css(color, @navigation-level0-item__color);
  205.                 .lib-css(text-decoration, @navigation-level0-item__text-decoration);
  206.                 text-decoration: none;
  207.                 display: block;
  208.                 font-weight: 700;
  209.                 padding: .8rem @indent__base;
  210.             }
  211.  
  212.             .header.links {
  213.                 border: 0;
  214.             }
  215.         }
  216.     }
  217.  
  218.     .nav-before-open {
  219.         height: 100%;
  220.         overflow-x: hidden;
  221.         width: 100%;
  222.  
  223.         .page-wrapper {
  224.             .lib-css(transition, left .3s, 1);
  225.             height: 100%;
  226.             left: 0;
  227.             overflow: hidden;
  228.             position: relative;
  229.         }
  230.  
  231.         body {
  232.             height: 100%;
  233.             overflow: hidden;
  234.             position: relative;
  235.             width: 100%;
  236.         }
  237.     }
  238.  
  239.     .nav-open {
  240.         .page-wrapper {
  241.             left: 80%;
  242.             left: calc(~'100% - @{active-nav-indent}');
  243.         }
  244.  
  245.         .nav-sections {
  246.             @_shadow: 0 0 10px 0 rgba(50, 50, 50, .75);
  247.            
  248.             .lib-css(box-shadow, @_shadow, 1);
  249.             left: 0;
  250.             z-index: 99;
  251.         }
  252.  
  253.         .nav-toggle {
  254.             &:after{
  255.                 background: rgba(0, 0, 0, 0);
  256.                 content: '';
  257.                 display: block;
  258.                 height: 100%;
  259.                 position: fixed;
  260.                 right: 0;
  261.                 top: 0;
  262.                 width: 100%;
  263.                 z-index: 1;
  264.             }
  265.         }
  266.     }
  267.  
  268.     .nav-sections-items {
  269.         .lib-clearfix();
  270.         position: relative;
  271.         z-index: 1;
  272.     }
  273.  
  274.     .nav-sections-item-title {
  275.         background: #363636;
  276.         border: solid darken(@navigation__background, 10%);
  277.         border-width: 0;
  278.         box-sizing: border-box;
  279.         float: left;
  280.         height: 42px;
  281.         padding-top: 9px;
  282.         text-align: center;
  283.         width: 50%;
  284.         border-radius: 10px;
  285.  
  286.         .nav-sections-item-switch {
  287.             color: @blanco;
  288.             text-decoration: none;
  289.             .fontParuolo();
  290.             &:hover {
  291.                 text-decoration: none;
  292.             }
  293.         }
  294.  
  295.         &.active {
  296.             background: #2e2e2e;
  297.             border-bottom: 0;
  298.             .nav-sections-item-switch {
  299.                 .fontParuoloBold();
  300.                 color: #9a9a9a;
  301.             }
  302.         }
  303.  
  304.        
  305.     }
  306.  
  307.     .nav-sections-item-content {
  308.         .lib-clearfix();
  309.         box-sizing: border-box;
  310.         float: right;
  311.         margin-left: -100%;
  312.         margin-top: 35px;
  313.         width: 100%;
  314.  
  315.         &.active {
  316.             display: block;
  317.         }
  318.  
  319.         padding: @indent__m 0;
  320.     }
  321.  
  322.  
  323.     .nav-sections-item-content > .navigation ul .universo .universo-container
  324.     {
  325.         display: none;
  326.     }
  327.  
  328.     .universo-mobile-activo{
  329.         display:block !important;
  330.         padding-left: 15px;
  331.         padding: 0 10px;
  332.         background: #2e2e2e;
  333.         width: 100%;
  334.         .clearfixParuolo();
  335.         .universo-left{display: none;}
  336.  
  337.         .universo-right{
  338.             width: 100%;
  339.             padding: 15px 20px;
  340.             .menu{
  341.                 width: 100%;
  342.                 padding-right: 0;
  343.                 label{
  344.                     color: @blanco;
  345.                     font-weight: normal;
  346.                     .fontParuolo();
  347.                     font-size: 15px;
  348.                 }
  349.                 ul{
  350.                     display: block !important;
  351.                     li a{
  352.                         color: @blanco;
  353.                     }
  354.                 }
  355.             }  
  356.         }
  357.     }
  358.     .lib-main-navigation();
  359.  
  360.  
  361.  
  362.     .nav-sections-item-content .authorization-link a {
  363.         font-family: 'ParuoloBold' !important;
  364.         font-size: 15px !important;
  365.         letter-spacing: 0.08em !important;
  366.         color: #ffffff !important;
  367.         display:block !important;
  368.         background: #2e2e2e !important;
  369.         border-radius: 5px !important;
  370.         padding: 4px 7px 3px 7px !important;
  371.         border: 0 !important;
  372.         margin: 0 0 0 17px !important;
  373.         width: 100px !important;
  374.         text-align: center !important;
  375.     }
  376. }
  377.  
  378. //
  379. //  Desktop
  380. //  _____________________________________________
  381.  
  382. .media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
  383.  
  384.     .nav-toggle {
  385.         display: none;
  386.     }
  387.  
  388.     .nav-sections {
  389.         .lib-vendor-prefix-flex-shrink(0);
  390.         .lib-vendor-prefix-flex-basis(auto);
  391.         margin-bottom: 15px;
  392.         background: #ffffff;
  393.         border-top: 1px solid @gris_menu;
  394.         border-bottom: 1px solid @gris_menu;
  395.     }
  396.  
  397.     .cms-home .nav-sections { /* Menu de la home */
  398.         margin-bottom: 0 !important;
  399.      
  400.     }
  401. /* agregado matias*/
  402.     .menu-fixed {
  403.         position:fixed;
  404.         z-index:1000;
  405.         top:45px;
  406.         width:100%;
  407.         background-color: #ffffff;
  408.     }
  409.     .menu-fixed-sin-ticker {
  410.         position:fixed;
  411.         z-index:1000;
  412.         width:100%;
  413.         background-color: #ffffff;
  414.     }
  415.     .nav-fixed {
  416.         position:fixed;
  417.         z-index:1000;
  418.         top:149px;
  419.         width:100%;
  420.     }
  421.     .nav-fixed-sin-ticker {
  422.         position:fixed;
  423.         z-index:1000;
  424.         top:115px;
  425.         width:100%;
  426.     }
  427.     .widget-fixed {
  428.         position:fixed;
  429.         z-index:1000;
  430.         top:0px;
  431.         width:100%;
  432.     }
  433. /* fin agregado matias */
  434.  
  435.     .nav-sections-item-title {
  436.         display: none;
  437.     }
  438.  
  439.     .nav-sections-item-content {
  440.         display: block !important;
  441.     }
  442.  
  443.     .nav-sections-item-content > * {
  444.         display: none;
  445.     }
  446.  
  447.     .nav-sections-item-content {
  448.         > .navigation {
  449.             display: block;
  450.             background-color: #fff;
  451.             text-align: center;
  452.             max-width: @layout__max-width;
  453.             padding-left: @layout-indent__width;
  454.             padding-right: @layout-indent__width;
  455.             z-index: 50;
  456.  
  457.             ul{
  458.                 display: -webkit-flex;
  459.                 display: flex;
  460.                 width: 100%;
  461.                 align-items: center;
  462.                 flex-wrap: nowrap;
  463.                 -webkit-justify-content: space-between;
  464.                 justify-content: center;
  465.                 box-sizing: border-box;
  466.                 .level0 {
  467.                     font-size: 18px;
  468.                     margin-right: 0;
  469.                     padding: 3px 10px;
  470.                     position: static;
  471.                     > .level-top {
  472.                         font-size: 15px;
  473.                         font-weight: normal;
  474.                         letter-spacing: 0.09em;
  475.                         color: @negro;
  476.                         border-width: 0;
  477.                         display: inline-block;
  478.                         line-height: 1;
  479.                     }
  480.  
  481.                     &.active{
  482.                         > .level-top {
  483.                             border-width: 0;
  484.                         }
  485.                     }
  486.                     &:first-of-type{
  487.                         font-family: ParuoloBold;
  488.                     }
  489.                 }
  490.                 /* MENU UNIVERSO */
  491.                 .universo-container{
  492.                     /*display: none;*/
  493.                     position: absolute;
  494.                     top: 100%;
  495.                     width: 100% !important;
  496.                     left: 0;
  497.                     padding: 20px;
  498.                     border-radius: 0 0 25px 25px;
  499.                     border: 0;
  500.                     border-top: 0;
  501.                     background: @blanco;
  502.                     box-sizing: border-box;
  503.                     /* MODIFICACIÓN */
  504.  
  505.                     /*opacity: 0;*/
  506.                     visibility: hidden;
  507.  
  508.                     /*-webkit-transition: all .25s ease-in-out;
  509.                     -moz-transition: all .25s ease-in-out;
  510.                     -ms-transition: all .25s ease-in-out;
  511.                     -o-transition: all .25s ease-in-out;
  512.                     transition: all .25s ease-in-out;*/
  513.  
  514.                     max-height: 0;
  515.                     overflow-y: hidden;
  516.                     -webkit-transition: max-height 0.5s ease-in-out;
  517.                     -moz-transition: max-height 0.5s ease-in-out;
  518.                     -o-transition: max-height 0.5s ease-in-out;
  519.                     transition: max-height 0.5s ease-in-out;
  520.  
  521.                     .universo-left{
  522.                         float: left;
  523.                         width: 36%;
  524.                         padding-left: 50px;
  525.                         padding-right: 30px;
  526.                         position: relative;
  527.  
  528.                         p{
  529.                             padding: 0;
  530.                             margin: 0;
  531.                             font: 0;
  532.                             display: block;
  533.                             width: 100%;
  534.  
  535.                             img{
  536.                                 width: 100%;
  537.                                 display: block;
  538.                             }
  539.                         }
  540.                         &:before{
  541.                             content: '';
  542.                             display: block;
  543.                             position: absolute;
  544.                             left:20px;
  545.                             top: 3px;
  546.                             font-size: 0;
  547.                             width: 13px;
  548.                             height: 20px;
  549.                             background-image: url(../images/icon-sprite.png);
  550.                             background-size: 100px 1000px;
  551.                             background-repeat: no-repeat;
  552.                             background-position: 0 -45px;
  553.                         }
  554.                     }
  555.                     .universo-right{
  556.                         float: right;
  557.                         width: 64%;
  558.                         position: relative;
  559.  
  560.                         .menu{
  561.                             float: left;
  562.                             width: 50%;
  563.                             padding-right: 60px;
  564.                             label{
  565.                                 .fontParuoloBold();
  566.                                 font-size: 18px;
  567.                                 text-align: left;
  568.                                 border-bottom: 1px solid @gris_menu;
  569.                                 padding: 0 0 5px 0;
  570.                                 margin: 0 0 15px 0;
  571.                                 display: block;
  572.                             }
  573.                         }
  574.  
  575.                         ul{
  576.                             padding: 0;
  577.                             margin: 0;
  578.                             list-style: none;
  579.                             display: block !important;
  580.                             li{
  581.                                 display: block;
  582.                                 line-height: 1.2;
  583.                                 text-align: left;
  584.                                 padding: 4px 0;
  585.                                 a{
  586.                                     .fontParuolo();
  587.                                     color: @negro;
  588.                                     text-decoration: none;
  589.                                     font-weight: normal;
  590.                                     font-size: 14px;
  591.  
  592.                                     &:hover{
  593.                                         .fontParuoloBold();
  594.                                         letter-spacing: 0.075em;
  595.                                     }
  596.                                 }
  597.                             }
  598.                         }
  599.                     }
  600.                 }
  601.             }
  602.         }
  603.     }
  604.     .nav-sections-item-content > .navigation ul .universo:hover> .universo-container {
  605.         /*display: block;
  606.         opacity: 1;*/
  607.         max-height: 600px;
  608.         visibility: visible;
  609.     }
  610.  
  611.  
  612.     .lib-main-navigation-desktop();
  613.  
  614.     .panel.header {
  615.         .links,
  616.         .switcher {
  617.             display: inline-block;
  618.         }
  619.     }
  620. }
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!