lugarcia94

_header_bar_default.scss

Sep 10th, 2018
291
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. .headerFull {
  2.     position: fixed;
  3.     top: 0;
  4.     width: 100%;
  5.     background: #fff;
  6.     z-index: 99;
  7. }
  8. .header {
  9.     transition: all 150ms ease-in-out;
  10.     transform: translateY(0);
  11.  
  12.     @media(max-width: 992px)  {
  13.         min-height: 135px;
  14.         transition: all 150ms ease-in-out;
  15.     }
  16.  
  17.     &__container {
  18.         width: calc(100% - 30px);
  19.         max-width: 1200px;
  20.         margin: 0 auto;
  21.         display: flex;
  22.         align-items: center;
  23.         justify-content: space-between;
  24.         position: relative;
  25.     }
  26.  
  27.     &__brand {
  28.         max-width: 115px;
  29.  
  30.         @media(max-width:992px) {
  31.             max-width: 130px;
  32.             width: 100%;
  33.         }
  34.     }
  35.  
  36.     &__nav {
  37.         max-width: 350px;
  38.         width: 100%;
  39.  
  40.         @media(max-width:1199px) {
  41.             max-width: 320px;
  42.         }
  43.     }
  44.  
  45.     &__search {
  46.         max-width: 270px;
  47.         width: 100%;
  48.  
  49.         @media(max-width:1199px) {
  50.             max-width: 200px;
  51.         }
  52.  
  53.         @media(max-width: 992px) {
  54.             max-width: 100%;
  55.             width: 100%;
  56.             position: absolute;
  57.             top: 100%;
  58.         }
  59.  
  60.         form {
  61.             display: flex;
  62.  
  63.             .search__input {
  64.                 &::placeholder {
  65.                     font-style: italic;
  66.                 }
  67.             }
  68.            
  69.             .btn-search {
  70.                 svg {
  71.                     fill: #47c4c0;
  72.                     position: absolute;
  73.                     right: 10px;
  74.                     top: 12px;
  75.                 }
  76.             }
  77.         }
  78.     }
  79.  
  80.     &__list {
  81.         display: flex;
  82.         justify-content: space-between;
  83.         max-width: 300px;
  84.         width: 100%;
  85.  
  86.         @media(max-width:1199px) {
  87.             padding: 10px;
  88.         }
  89.  
  90.         @media(max-width:992px) {
  91.             max-width: 140px;
  92.         }
  93.  
  94.         &--item {
  95.             display: flex;
  96.             align-items: center;
  97.  
  98.             svg {
  99.                 margin-right: 5px;
  100.                 fill: $cor01;
  101.                 height: 18px;
  102.                 width: 18px;
  103.             }
  104.  
  105.             a {
  106.                 font-weight: 600;
  107.                 color: $dark-gray;
  108.                 display: flex;
  109.                 align-items: center;
  110.  
  111.                 &:hover {
  112.                     color: $cor01;
  113.                 }
  114.  
  115.                 @media(max-width:992px) {
  116.                     font-size: 0;
  117.                 }
  118.                
  119.             }
  120.         }
  121.     }
  122.  
  123.     &__cart {
  124.         position: relative;
  125.         width: 50px;
  126.  
  127.         @media(max-width:1199px) {
  128.             padding: 10px;
  129.         }
  130.  
  131.         svg {
  132.             fill: $cor01;
  133.             width: 30px;
  134.             height: 30px;
  135.         }
  136.  
  137.         span {
  138.             font-weight: 700;
  139.             background: #ececec;
  140.             position: absolute;
  141.             top: 0;
  142.             width: 25px;
  143.             height: 25px;
  144.             border-radius: 50%;
  145.             display: flex;
  146.             align-items: center;
  147.             justify-content: center;
  148.             z-index: 01;
  149.             right: 0;
  150.             opacity: 0.7;
  151.  
  152.             @media(max-width: 768px) {
  153.                 background: #191818;
  154.             }
  155.         }
  156.     }
  157. }
  158.  
  159. .moving--down{
  160.     .header {
  161.         @media(max-width: 992px)  {
  162.             min-height: 80px;
  163.             overflow: hidden;
  164.             transition: all 150ms ease-in-out;
  165.         }
  166.         transition: all 150ms ease-in-out;
  167.     }
  168.  
  169.     .topbar {
  170.         transform: translateY(-100%);
  171.         visibility: hidden;
  172.         opacity: 0;
  173.         max-height: 0;
  174.     }
  175. }
  176.  
  177. .moving {
  178.     .header {
  179.         box-shadow: 1px 1px #dfdfdf70;
  180.     }
  181. }
  182.  
  183. /* mobile */
  184. .side-menu-wrapper {
  185.     overflow: hidden;
  186.     background: #fff;
  187.     padding: 10px;
  188.     position: fixed;
  189.     top: 0;
  190.     left: -100%;
  191.     height: 100vh;
  192.     z-index: 2;
  193.     transition: 0.5s;
  194.     width: 90%;
  195.     z-index: 999;
  196.  
  197.     @media(max-width: 768px) and (min-width: 426px) {
  198.         width: 50%;
  199.     }
  200. }
  201.  
  202. .slide-menu-open {
  203.     svg {
  204.         width: 20px;
  205.         height: 20px;
  206.         fill: $cor01;
  207.     }
  208. }
  209.  
  210. .side-menu-wrapper > a.menu-close  {
  211.     font-size: 2.1875rem;
  212.     text-decoration: none;
  213.     text-align: right;
  214.     color: $cor01!important;
  215.     width: 100%;
  216.     display: block;
  217. }
  218.  
  219. .side-menu-overlay  {
  220.     height: 100vh;
  221.     width: 0;
  222.     position: fixed;
  223.     z-index: 1;
  224.     top: 0;
  225.     left: 0;
  226.     background-color: rgba(0,0,0,.7);
  227.     overflow-y: auto;
  228.     overflow-x: hidden;
  229.     text-align: center;
  230.     opacity: 0;
  231.     transition: opacity 1s;
  232.     z-index: 999;
  233. }
  234.  
  235. header {
  236.     @media(max-width: 768px){
  237.         padding: 0!important;
  238.         height: auto!important;
  239.     }
  240. }
  241.  
  242. .mobile__nav {
  243.     min-width: 50px;
  244. }
RAW Paste Data