lugarcia94

_nav_bar_default.scss

Sep 10th, 2018
291
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 7.67 KB | None | 0 0
  1. #nav_bar {
  2.   @media(min-width: 1200px) {
  3.     background: none;
  4.     height: auto;
  5.     margin: 0;
  6.     transition: $transition;
  7.     width: auto;
  8.     z-index: 100;
  9.  
  10.     > .container {
  11.       max-width: 100%;
  12.     }
  13.   }
  14. }
  15.  
  16. .level-one__item {
  17.   align-items: center;
  18.   border-bottom: 2px solid transparent;
  19.   display: flex;
  20.   flex: 0 0 auto;
  21.   height: 100%;
  22.   justify-content: center;
  23.   padding: 0;
  24.   position: relative;
  25.   text-align: center;
  26.   transition: $transition;
  27.  
  28.   @media(min-width: 1200px) {
  29.     &:not(:first-child) {
  30.       margin-left: 30px;
  31.     }
  32.  
  33.     &:hover {
  34.       border-color: $cor01;
  35.     }
  36.   }
  37. }
  38.  
  39. .level-one__category {
  40.   color: $dark-gray;
  41.   display: block;
  42.   font-size: 13px;
  43.   font-weight: 600;
  44.   line-height: 48px;
  45.   text-align: center;
  46.   text-transform: uppercase;
  47.   width: 100%;
  48.  
  49.   @media(min-width: 1200px) {
  50.     &:after {
  51.       background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAFBAMAAAB7tOvrAAAALVBMVEUAAABELkJELUFFLUFELkJFMUJELUJELUFGLkJEL0FIMUNIMENJM0JKNUpELUGQZM91AAAADnRSTlMAX/Lsoyzhu5pSOTUjGLZB5dEAAAAhSURBVAjXY5jKwHiBIWmBnwDDZvUnDAysdg0MDAwHGRgAVkAGCYErQi0AAAAASUVORK5CYII=') no-repeat;
  52.       content: '';
  53.       display: inline-block;
  54.       height: 5px;
  55.       margin-left: 4px;
  56.       vertical-align: middle;
  57.       width: 7px;
  58.     }
  59.   }
  60. }
  61.  
  62. .level-two {
  63.   display: block;
  64.   padding: 0;
  65.  
  66.   @media(min-width: 1200px) {
  67.     align-content: space-between;
  68.     display: flex;
  69.     flex-flow: column wrap;
  70.     justify-content: flex-start;
  71.  
  72.     > li {
  73.       padding: 0 10px;
  74.     }
  75.   }
  76. }
  77.  
  78. .level-two__item {
  79.   display: block;
  80.   margin: 5px 0;
  81.  
  82.   &:hover {
  83.     > a {
  84.       color: $cor01;
  85.     }
  86.   }
  87. }
  88.  
  89. .level-two__category {
  90.   color: $dark-gray;
  91.   display: block;
  92.   font-size: 13px;
  93.   font-weight: 600;
  94.   line-height: 15px;
  95.   text-align: left;
  96.   text-transform: none;
  97.   white-space: nowrap;
  98. }
  99.  
  100. .level-two__img {
  101.   display: block;
  102.   width: 310px;
  103.  
  104.   @media(max-width: 1199px) {
  105.     display: none;
  106.   }
  107. }
  108.  
  109. .level-three__item {
  110.   &:hover {
  111.     > a {
  112.       color: $cor01;
  113.     }
  114.   }
  115. }
  116.  
  117. .level-three__category {
  118.   color: $dark-gray;
  119.   display: block;
  120.   font-size: 13px;
  121.   font-weight: 400;
  122.   line-height: 14px;
  123.   text-align: left;
  124.   text-transform: none;
  125.   white-space: nowrap;
  126. }
  127.  
  128. @media(min-width: 1200px) {
  129.   .level-one {
  130.     align-items: center;
  131.     background: none;
  132.     border: none;
  133.     display: flex;
  134.     height: 100%;
  135.     justify-content: space-between;
  136.   }
  137.  
  138.   .menu__box {
  139.     .menu__dropdown {
  140.       border: $border;
  141.       display: block;
  142.       height: 0;
  143.       left: 0;
  144.       min-width: auto;
  145.       opacity: 0;
  146.       filter: alpha(opacify=0);
  147.       overflow: hidden;
  148.       padding: 0;
  149.       position: absolute;
  150.       top: calc(100% + 2px);
  151.       width: auto;
  152.     }
  153.  
  154.     &:hover {
  155.       > .menu__dropdown {
  156.         background: white;
  157.         box-shadow: none;
  158.         display: flex;
  159.         flex-flow: row nowrap;
  160.         height: 340px;
  161.         justify-content: space-between;
  162.         min-width: 650px;
  163.         opacity: 1;
  164.         overflow: visible;
  165.         padding: 15px 30px;
  166.         right: auto;
  167.         z-index: 99;
  168.       }
  169.     }
  170.   }
  171. }
  172.  
  173. .category__image {
  174.   align-items: center;
  175.   display: flex;
  176. }
  177.  
  178. @media(max-width: 1199px) {
  179.   .button__close {
  180.     align-items: center;
  181.     display: flex;
  182.     height: 40px;
  183.     justify-content: center;
  184.     padding: 0;
  185.     position: absolute;
  186.     right: 5px;
  187.     top: 5px;
  188.     width: 40px;
  189.   }
  190.  
  191.   .close__icon {
  192.     fill: $dark-gray;
  193.     height: 25px;
  194.     width: 25px;
  195.   }
  196.  
  197.   .mobile-account-wrapper,
  198.   .mobile-contact-wrapper {
  199.     padding: 0;
  200.   }
  201.  
  202.   .mobile-contact-wrapper {
  203.     border: solid $dark-gray;
  204.     border-width: 2px 0;
  205.  
  206.     .contact__item {
  207.       &:not(:last-child) {
  208.         margin: 0 0 10px;
  209.       }
  210.     }
  211.  
  212.     .contact__icon {
  213.       fill: $dark-gray;
  214.       height: 20px;
  215.       width: 20px;
  216.     }
  217.    
  218.     .social__icon {
  219.       height: 25px;
  220.       width: 25px;
  221.     }
  222.  
  223.     .contact__link,
  224.     .contact__text {
  225.       color: $dark-gray;
  226.       font-size: 13px;
  227.     }
  228.   }
  229.  
  230.   .user__welcome {
  231.     color: $dark-gray;
  232.     display: block;
  233.     font-size: 14px;
  234.     font-weight: 400;
  235.     margin-bottom: 10px;
  236.     text-transform: none;
  237.   }
  238.  
  239.   .account__item {
  240.     height: auto;
  241.  
  242.     > a {
  243.       color: $dark-gray;
  244.       font-size: 13px;
  245.       font-weight: 500;
  246.       line-height: 20px;
  247.     }
  248.   }
  249.  
  250.   .level-one {
  251.     display: flex;
  252.     padding: 20px;
  253.     justify-content: space-between;
  254.     width: 100%;
  255.  
  256.     @media(max-width: 992px) {
  257.       padding: 0;
  258.     }
  259.   }
  260.  
  261.  
  262.  
  263.   .level-one__item {
  264.     flex-wrap: wrap;
  265.     height: 40px;
  266.     justify-content: space-between;
  267.     padding: 0;
  268.     transition: $transition;
  269.  
  270.     &.show-subs {
  271.       height: auto;
  272.      
  273.       .menu__dropdown {
  274.         display: block;
  275.         height: auto;
  276.         opacity: 1;
  277.         visibility: visible;
  278.       }
  279.  
  280.       .nav__icon {
  281.         fill: $cor01;
  282.         transform: rotate(270deg);
  283.       }
  284.     }
  285.   }
  286.  
  287.   .level-one__category {
  288.     display: block;
  289.     font-size: 13px;
  290.     line-height: 40px;
  291.     padding: 0;
  292.     text-align: left;
  293.   }
  294.  
  295.   .button__subcategories {
  296.     align-items: center;
  297.     display: flex;
  298.     flex: 0 0 40px;
  299.     height: 100%;
  300.     height: 40px;
  301.     justify-content: center;
  302.  
  303.     svg {
  304.       height: 12px;
  305.       transform: rotate(90deg);
  306.       width: 10px;
  307.     }
  308.  
  309.     @media(max-width: 1199px) {
  310.       display: none;
  311.     }
  312.   }
  313.  
  314.   .level-two {
  315.     padding: 0 10px;
  316.   }
  317.  
  318.   .level-two__category {
  319.     color: $dark-gray;
  320.     font-size: 14px;
  321.     line-height: 25px;
  322.   }
  323.  
  324.   .level-three__category {
  325.     line-height: 25px;
  326.   }
  327.  
  328.   .category__image {
  329.     display: none;
  330.   }
  331. }
  332. .account__list {
  333.   @media(max-width: 768px) {
  334.     margin-top: 10px;
  335.     border-top: 1px solid #47c4c0;
  336.     padding-top: 10px;
  337.   }
  338. }
  339. .contact__list {
  340.   @media(max-width: 768px) {
  341.     margin-top: 10px;
  342.     border-top: 1px solid #47c4c0;
  343.     padding-top: 10px;
  344.  
  345.     li  {
  346.       display: flex;
  347.       align-items: center;
  348.  
  349.       svg {
  350.         margin-right: 5px;
  351.       }
  352.     }
  353.   }
  354. }
  355.  
  356. .categories__list {
  357.   @media(max-width: 768px) {
  358.     ul {
  359.       display: flex;
  360.       flex-wrap: wrap;
  361.       margin-top: 10px;
  362.  
  363.       li {
  364.         flex: 0 0 100%;
  365.         height: auto;
  366.  
  367.         .button__subcategories {
  368.           display: block!important;
  369.           flex: 0 0 20px;
  370.           height: 10px;
  371.           transform: rotate(-90deg);
  372.           transition: all 150ms ease-in-out;
  373.         }
  374.  
  375.         .menu__dropdown {
  376.           background: none;
  377.           border: none;
  378.           flex: 0 0 100%;
  379.           max-height: 0;
  380.           opacity: 0;
  381.           padding: 0;
  382.           visibility: hidden;
  383.           z-index: 100;
  384.           transition: all 150ms ease-in-out;
  385.  
  386.           li {
  387.             height: 20px;
  388.             line-height: 20px;
  389.             a {
  390.               height: 20px;
  391.               line-height: 20px;
  392.               font-weight: 500;
  393.             }
  394.           }
  395.         }
  396.  
  397.         a {
  398.           line-height: 30px;
  399.           width: 80%;
  400.         }
  401.       }
  402.  
  403.       .on__submenu {
  404.         .button__subcategories {
  405.           transform: rotate(0);
  406.         }
  407.         .menu__dropdown {
  408.           max-height: 300px;
  409.           opacity: 1;
  410.           visibility: visible;
  411.           background: #fff;
  412.           transition: all 150ms ease-in-out;
  413.  
  414.           ul {
  415.             margin: 0;
  416.             padding: 0;
  417.             background: #fff;
  418.             max-height: 230px;
  419.             overflow-y: auto;
  420.  
  421.             li {
  422.               margin: 0;
  423.             }
  424.           }
  425.         }
  426.       }
  427.     }
  428.  
  429.    
  430.   }
  431. }
Add Comment
Please, Sign In to add comment