github.com/kardianos/nomad@v0.1.3-0.20151022182107-b13df73ee850/website/source/assets/stylesheets/_header.scss (about)

     1  //
     2  // Header
     3  // --------------------------------------------------
     4  
     5  #header {
     6      position: relative;
     7      height: 92px;
     8      color: $white;
     9      text-rendering: optimizeLegibility;
    10      margin-bottom: 0;
    11      /* opacity: 0;
    12      @include translate3d(0, -10px, 0); */
    13      transition: all 1s ease;
    14      background-color: $white;
    15  
    16      /* &.showit{
    17          opacity: 1;
    18          @include translate3d(0, 0px, 0);
    19          transition: all 1s ease;
    20      } */
    21  
    22      // &.navbar-static-top{
    23      //     height:70px;
    24      //     z-index: 1000;
    25      // }
    26  
    27      .navbar-header{
    28  
    29          .navbar-toggle{
    30              padding-right: 15px;
    31              margin-top: 26px;
    32              margin-bottom: 14px;
    33              margin-right: 0;
    34              //border: 2px solid $white;
    35              border-radius: 0;
    36              .icon-bar{
    37                  border: 1px solid $black;
    38                  border-radius: 0;
    39              }
    40          }
    41      }
    42  
    43  
    44      .navbar-brand {
    45          display: inline-block;
    46          padding: 0;
    47          margin: 16px 10px 0 0 ;
    48  
    49          .logo{
    50              display: inline-block;
    51              height: 56px;
    52              padding: 0;
    53              color: $gray-darker;
    54              font-family: $font-family-blanc;
    55              font-size: 28px;
    56              line-height: 56px;
    57              padding-left: 60px;
    58              background: image-url('../images/logo-header.png') 0 0 no-repeat;
    59              @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", 49px, 56px);
    60  
    61              &:hover{
    62                  @include transition(all 300ms ease-in);
    63                  color: $green-dark;
    64                  text-decoration: none;
    65              }
    66          }
    67      }
    68  
    69      .main-links.navbar-nav{
    70          margin-top: 36px;
    71          margin-left: 120px;
    72  
    73          li > a {
    74              @include v-nav-style();
    75          }
    76      }
    77  
    78      .buttons{
    79          ul.navbar-nav{
    80              margin-top: 36px;
    81              li {
    82                padding-left: 12px;
    83  
    84                &.download{
    85                  background: image-url('../images/icon-download.png') 0 0 no-repeat;
    86                  @include img-retina("../images/icon-download.png", "../images/icon-download@2x.png", 18px, 18px);
    87                  margin-right: 22px;
    88                  background-position: 0 1px;
    89                }
    90  
    91                &.github{
    92                  background: image-url('../images/icon-github.png') 0 0 no-repeat;
    93                  @include img-retina("../images/icon-github.png", "../images/icon-github@2x.png", 19px, 18px);
    94                  background-position: 0 1px;
    95                }
    96  
    97                >a {
    98                      @include v-nav-style();
    99                  }
   100              }
   101          }
   102      }
   103  
   104      .nav > li > a:hover, .nav > li > a:focus {
   105          background-color: transparent;
   106          color: $black;
   107          @include transition( color 0.3s ease );
   108      }
   109  }
   110  
   111  @media (min-width: 992px) {
   112  
   113  }
   114  
   115  @media (max-width: 992px) {
   116  
   117  }
   118  
   119  @media (max-width: 992px) {
   120      #header{
   121          .main-links.navbar-nav{
   122              margin-left: 20px;
   123          }
   124  
   125          .buttons{
   126              ul.navbar-nav{
   127                  li {
   128                        &.download{
   129                          margin-right: 8px;
   130                      }
   131                  }
   132              }
   133          }
   134      }
   135  
   136  }
   137  
   138  @media (max-width: 763px) {
   139      .navbar-static-top {
   140          .nav-white {
   141              background-color:rgba(0,0,0,0.5);
   142          }
   143      }
   144  }
   145  
   146  @media (max-width: 320px) {
   147  
   148  }