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