github.com/dahs81/otto@v0.2.1-0.20160126165905-6400716cf085/website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss (about)

     1  //
     2  // Hashicorp Nav (header/footer) Utiliy Vars and Mixins
     3  //
     4  // Notes:
     5  // - Include this in Application.scss before header and feature-footer
     6  // - Open Sans Google (Semibold - 600) font needs to be included if not already
     7  // --------------------------------------------------
     8  
     9  // Variables
    10  $font-family-open-sans:	'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    11  $header-font-family: $font-family-open-sans;
    12  $header-font-weight: 600; // semi-bold
    13  
    14  $header-height: 74px;
    15  $header-mobile-height: 60px;
    16  $by-hashicorp-width: 74px;
    17  $by-hashicorp-height: 16px;
    18  $nav-margin-right: 12px;
    19  
    20  // Mixins
    21  @mixin hashi-a-style-core{
    22    font-family: $header-font-family;
    23    font-weight: $header-font-weight;
    24    font-size: 14px;
    25    //letter-spacing: 0.0625em;
    26  }
    27  
    28  @mixin hashi-a-style{
    29    margin: 0 15px;
    30    padding: 0;
    31    line-height: 22px;
    32    @include hashi-a-style-core();
    33    @include transition( color 0.3s ease );
    34  
    35    &:hover{
    36      @include transition( color 0.3s ease );
    37      background-color: transparent;
    38    }
    39  }
    40  
    41  //general shared project mixins
    42  @mixin img-retina($image1x, $image, $width, $height) {
    43    background-image: url($image1x);
    44    background-size: $width $height;
    45    background-repeat: no-repeat;
    46  
    47    @media (min--moz-device-pixel-ratio: 1.3),
    48    (-o-min-device-pixel-ratio: 2.6/2),
    49    (-webkit-min-device-pixel-ratio: 1.3),
    50    (min-device-pixel-ratio: 1.3),
    51    (min-resolution: 1.3dppx) {
    52      /* on retina, use image that's scaled by 2 */
    53      background-image: url($image);
    54      background-size: $width $height;
    55    }
    56  }
    57  
    58  //
    59  // -------------------------
    60  @mixin anti-alias() {
    61    text-rendering: optimizeLegibility;
    62    -webkit-font-smoothing: antialiased;
    63  }
    64  
    65  @mixin open-light() {
    66    font-family: $font-family-open-sans;
    67    font-weight: 300;
    68  }
    69  
    70  @mixin open() {
    71    font-family: $font-family-open-sans;
    72    font-weight: 400;
    73  }
    74  
    75  @mixin open-sb() {
    76    font-family: $font-family-open-sans;
    77    font-weight: 600;
    78  }
    79  
    80  @mixin open-bold() {
    81    font-family: $font-family-open-sans;
    82    font-weight: 700;
    83  }
    84  
    85  @mixin bez-1-transition{
    86    @include transition( all 300ms ease-in-out );
    87  }