Advertisement
HungDev

Sass

Jan 2nd, 2018
948
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
SAS 8.48 KB | None | 0 0
  1. .main-header {
  2.     padding-top: 20px;
  3.  
  4.     /*@media only screen and (max-width: 991px) {
  5.       padding-top: 0;
  6.     }*/
  7.     background: #fff;
  8.     .inc-logo {
  9.         img {
  10.             width: 172px;
  11.         }
  12.  
  13.     }
  14.  
  15.     .collapse-menu {
  16.         color: #404040;
  17.         font-size: 30px;
  18.         margin-top: 0;
  19.     }
  20.  
  21.     // Mobile Navigation
  22.     #mobile-nav {
  23.         position: absolute;
  24.         top: 91px;
  25.         left: 0;
  26.         z-index: 9999;
  27.         background: #fff;
  28.         width: 100%;
  29.         display: none;
  30.         ul {
  31.             margin-bottom: 0;
  32.             li {
  33.                 display: inline-block;
  34.                 width: 100%;
  35.                 border-bottom: 1px solid #ebebeb;
  36.                 a {
  37.                     display: block;
  38.                     padding: 10px 12px;
  39.                     color: $black;
  40.                     font-size: 16px;
  41.                 }
  42.                 &:hover {
  43.                     background: #f2f2f2;
  44.                 }
  45.             }
  46.             li.last {
  47.                 border-bottom: none;
  48.                 background: $orange;
  49.                 a {
  50.                     color: #fff;
  51.                     text-transform: uppercase;
  52.                 }
  53.             }
  54.         }
  55.     }
  56.  
  57.     .main-navigation {
  58.         position: relative;
  59.         height: 80px;
  60.         z-index: 999;
  61.         @media only screen and (max-width: 767px) {
  62.             height: 90px;
  63.         }
  64.         .container {
  65.             //padding: 10px 50px 0 50px;
  66.  
  67.             @media only screen and (min-width: 1350px) {
  68.                 width: 100%;
  69.                 padding: 0 30px;
  70.             }
  71.             @media only screen and (min-width: 1441px) {
  72.                 width: 1440px;
  73.                 padding: 0 50px;
  74.             }
  75.         }
  76.     }
  77.     .main-navigation.hasSticky {
  78.         background: #fff;
  79.         z-index: 99999;
  80.         width: 100%;
  81.         //max-width: 1440px;
  82.         margin: 0 auto;
  83.         padding: 15px 0;
  84.         //height: 100px;
  85.         transition: all 0.4s;
  86.         border-bottom: 1px solid #ebebeb;
  87.         //left: auto !important;
  88.  
  89.         @media only screen and (max-width: 767px) {
  90.             height:110px;
  91.         }
  92.     }
  93.  
  94.     .main-nav{
  95.         float:right;
  96.  
  97.         li{
  98.             display: inline-block;
  99.             margin: 0;
  100.             background: transparent;
  101.             position: relative;
  102.             z-index: 99999;
  103.             &:hover{
  104.                 background: transparent;
  105.                 a{
  106.                     color: $blue;
  107.                 }
  108.  
  109.             }
  110.  
  111.             a{
  112.                 font-family: $fontProximaLight;
  113.                 font-size: 15px;
  114.                 color:#2e3336;
  115.                 text-transform: capitalize;
  116.                 &:hover{
  117.                     background: transparent;
  118.                 }
  119.  
  120.                 @media only screen and (max-width: 1280px) {
  121.                     font-size: 13px;
  122.                     padding:10px 10px;
  123.                 }
  124.             }
  125.  
  126.             a.link_home {
  127.                 i{
  128.                     font-size: 20px;
  129.                     vertical-align: bottom;
  130.                     color: #2e3336;
  131.                 }
  132.             }
  133.  
  134.             // Dropdown Menu
  135.             .dropdown-menu{
  136.                 border-radius: 0;
  137.                 box-shadow: none;
  138.                 margin-top: 0;
  139.                 background: transparent;
  140.                 border: none;
  141.                 padding: 0;
  142.                 padding-top: 15px;
  143.                 min-width: 270px;
  144.                 z-index: 99999;
  145.                 left: 50%;
  146.                 transform: translate(-50%, 0);
  147.  
  148.                 .wrap-menu {
  149.                     box-shadow: 0 2px 5px #ccc;
  150.                     overflow: hidden;
  151.                 }
  152.  
  153.                 ul{
  154.                     padding: 0;
  155.                     box-shadow: none !important;
  156.                     background: #fff;
  157.                     li{
  158.                         float: none;
  159.                         line-height: 25px;
  160.                         width: 100%;
  161.                         border-bottom: 1px solid #ebebeb;
  162.                         &:last-of-type{
  163.                             border:none;
  164.                         }
  165.                         a{
  166.                             display: block;
  167.                             padding: 10px 14px;
  168.                             color:$black;
  169.                             transition: all .2s ease-out;
  170.                             &:hover{
  171.                                 background: #f2f2f2 !important;
  172.                                 color: #008EC7;
  173.                                 text-decoration: none;
  174.                             }
  175.                         }
  176.                     }
  177.                 }
  178.  
  179.                 ul:after{
  180.                     top: -13px;
  181.                     left: 55%;
  182.                     transform: translate(-50%, 0);
  183.                     border: solid transparent;
  184.                     content: " ";
  185.                     height: 0;
  186.                     width: 0;
  187.                     position: absolute;
  188.                     pointer-events: none;
  189.                     border-color: rgba(236, 85, 36, 0);
  190.                     border-bottom-color: #fff;
  191.                     border-width: 15px;
  192.                     margin-left: -20px;
  193.                     z-index: 9999;
  194.                 }
  195.             }
  196.  
  197.             .dropdown-menu.review, .dropdown-menu.drop-about{
  198.                 min-width: 220px;
  199.             }
  200.  
  201.             //Manage your company
  202.             .for-manage-your-company {
  203.                 min-width: 460px !important;
  204.                 .col-sm-6{padding:0;}
  205.                 div[class*='col-']{
  206.                     margin-bottom: 0 !important;
  207.                 }
  208.                 ul {
  209.                     box-shadow: none !important;
  210.                 }
  211.                 ul:after{
  212.                     content:"" !important;
  213.                     display: none !important;
  214.                 }
  215.             }
  216.  
  217.             .for-manage-your-company:before{
  218.                 top: -14px;
  219.                 left: 54.3%;
  220.                 -webkit-transform: translate(-50%, 0);
  221.                 -ms-transform: translate(-50%, 0);
  222.                 transform: translate(-50%, 0);
  223.                 border: solid transparent;
  224.                 content: " ";
  225.                 height: 0;
  226.                 width: 0;
  227.                 position: absolute;
  228.                 pointer-events: none;
  229.                 border-color: rgba(236,85,36,0);
  230.                 border-bottom-color: #f2f2f2;
  231.                 border-width: 15px;
  232.                 margin-left: -20px;
  233.                 z-index: 9999;
  234.             }
  235.  
  236.         }
  237.  
  238.         li.dropdown:after{
  239.             position: absolute;
  240.             top: 10px;
  241.             right: 0;
  242.             content: "\f107";
  243.             font-family: 'FontAwesome';
  244.             color: $black;
  245.             font-size: 15px;
  246.  
  247.             @media only screen and (max-width: 1280px) {
  248.                 top:8px;
  249.                 right:-2px;
  250.             }
  251.         }
  252.  
  253.         li#nav-contact-link{
  254.             display: none;
  255.         }
  256.         /*li.incorporate_now{
  257.           @media only screen and (max-width: 1024px) {
  258.             display: none;
  259.           }
  260.         }*/
  261.     }
  262.  
  263.     .active-one-col:after{
  264.         border-bottom-color: #f2f2f2 !important
  265.     }
  266.     .active-one-col:before{
  267.         border-width: 0px !Important;
  268.     }
  269.     .main-nav li .for-manage-your-company #ul-right a{
  270.         margin-left: 13px;
  271.     }
  272.     .main-nav li .for-manage-your-company #ul-left a{
  273.         margin-right: 13px;
  274.     }
  275.     .main-nav li .for-manage-your-company .wrap-menu:before{
  276.         top: -12px;
  277.         left: 54.3%;
  278.         transform: translate(-50%, 0);
  279.         border: solid transparent;
  280.         content: " ";
  281.         height: 0;
  282.         width: 0;
  283.         position: absolute;
  284.         pointer-events: none;
  285.         border-color: rgba(236,85,36,0);
  286.         border-bottom-color: #FFF;
  287.         border-width: 15px;
  288.         margin-left: -20px;
  289.         z-index: 9999;
  290.     }
  291.     .main-nav li.one-col .dropdown-menu ul:before{
  292.         top: -12px;
  293.         left: 55%;
  294.         transform: translate(-50%, 0);
  295.         border: solid transparent;
  296.         content: " ";
  297.         height: 0;
  298.         width: 0;
  299.         position: absolute;
  300.         pointer-events: none;
  301.         border-color: rgba(236,85,36,0);
  302.         border-bottom-color: #f2f2f2;
  303.         border-width: 14px;
  304.         margin-left: -20px;
  305.         z-index: 9999;
  306.     }
  307.  
  308. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement