github.com/huiliang/nomad@v0.2.1-0.20151124023127-7a8b664699ff/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss (about)

     1  //
     2  // Hashicorp header
     3  // - Shared throughout projects
     4  // - Edits should not be made here
     5  // --------------------------------------------------
     6  
     7  #header {
     8    position: relative;
     9    color: black;
    10    text-rendering: optimizeLegibility;
    11    margin-bottom: 0;
    12    transition: all 1s ease;
    13  
    14    &.white{
    15      color: white;
    16      .navbar-brand {
    17        .logo {
    18          color: white;
    19        }
    20  
    21        .by{
    22          color: white;
    23          font-weight: 300;
    24          svg{
    25            path,
    26            polygon{
    27              fill: white;
    28            }
    29            line{
    30              stroke: white;
    31            }
    32          }
    33        }
    34      }
    35  
    36      .main-links,
    37      .external-links {
    38        li > a {
    39          &:hover{
    40            opacity: 1;
    41          }
    42        }
    43      }
    44  
    45      .nav > li > a:hover, .nav > li > a:focus {
    46        color: white;
    47      }
    48  
    49      .navbar-header{
    50        .navbar-toggle{
    51          .icon-bar{
    52            border: 1px solid white;
    53          }
    54        }
    55      }
    56    }
    57  
    58    .navbar-header{
    59      .navbar-toggle{
    60        height: $header-height;
    61        margin: 0;
    62        padding-right: 15px;
    63        border-radius: 0;
    64        .icon-bar{
    65          border: 1px solid $black;
    66          border-radius: 0;
    67        }
    68      }
    69    }
    70  
    71    .navbar-brand {
    72      display: block;
    73      height: $header-height;
    74      padding: 0;
    75      margin: 0 10px 0 0 ;
    76  
    77      .logo{
    78        display: inline-block;
    79        height: $header-height;
    80        vertical-align:top;
    81        padding: 0;
    82        line-height: $header-height;
    83        padding-left: $project-logo-width + $project-logo-pad-left;
    84        background-position: 0 center;
    85        @include transition(all 300ms ease-in);
    86  
    87        &:hover{
    88          @include transition(all 300ms ease-in);
    89          text-decoration: none;
    90        }
    91      }
    92  
    93      .by{
    94        display: inline-block;
    95        vertical-align:top;
    96        height: $header-height;
    97        margin-left: 3px;
    98        padding-top: 2px;
    99        color: black;
   100        line-height: $header-height;
   101        font-family: $header-font-family;
   102        font-weight: 600;
   103        font-size: 0;
   104        text-decoration: none;
   105  
   106        .svg-wrap{
   107          font-size: 13px;
   108        }
   109  
   110        svg{
   111          &.svg-by{
   112            width: $by-hashicorp-width;
   113            height: $by-hashicorp-height;
   114            margin-bottom: -4px;
   115            margin-left: 4px;
   116          }
   117  
   118          &.svg-logo{
   119            width: 16px;
   120            height: 16px;
   121            margin-bottom: -3px;
   122            margin-left: 4px;
   123          }
   124  
   125          path,
   126          polygon{
   127            fill: black;
   128            @include transition(all 300ms ease-in);
   129  
   130            &:hover{
   131              @include transition(all 300ms ease-in);
   132            }
   133          }
   134          line{
   135            stroke: black;
   136            @include transition(all 300ms ease-in);
   137  
   138            &:hover{
   139              @include transition(all 300ms ease-in);
   140            }
   141          }
   142        }
   143      }
   144    }
   145  
   146    .external-links {
   147      li {
   148        position: relative;
   149  
   150        svg path{
   151          @include transition( all 300ms ease-in );
   152        }
   153  
   154        &:hover{
   155          svg path{
   156            @include transition( all 300ms ease-in );
   157          }
   158        }
   159  
   160        &.download{
   161          margin-right: 10px;
   162        }
   163  
   164        > a {
   165          padding-left: 12px !important;
   166          svg{
   167            position: absolute;
   168            left: -12px;
   169            top: 50%;
   170            margin-top: -7px;
   171            width: 14px;
   172            height: 14px;
   173          }
   174        }
   175      }
   176    }
   177  
   178    .main-links{
   179      margin-right: $nav-margin-right * 2;
   180    }
   181  
   182    .main-links,
   183    .external-links {
   184      li > a {
   185        @include hashi-a-style();
   186        margin: 0 10px;
   187        padding-top: 1px;
   188        line-height: $header-height;
   189      }
   190    }
   191  
   192    .nav > li > a:hover, .nav > li > a:focus {
   193      background-color: transparent;
   194      color: $black;
   195      @include transition( all 300ms ease-in );
   196    }
   197  }
   198  
   199  @media (max-width: 414px) {
   200    #header {
   201      .navbar-header{
   202        .navbar-toggle{
   203          padding-top: 10px;
   204          height: $header-mobile-height;
   205        }
   206      }
   207  
   208      .navbar-brand {
   209        height: $header-mobile-height;
   210  
   211        .logo{
   212          height: $header-mobile-height;
   213          line-height: $header-mobile-height;
   214        }
   215        .by{
   216          height: $header-mobile-height;
   217          line-height: $header-mobile-height;
   218          padding-top: 0;
   219        }
   220      }
   221      .main-links,
   222      .external-links {
   223        li > a {
   224          line-height: $header-mobile-height;
   225        }
   226      }
   227    }
   228  }