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: 8px; 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( all 0.3s ease ); 34 35 &:hover{ 36 @include transition( all 0.3s ease ); 37 background-color: transparent; 38 } 39} 40 41@mixin v-nav-style{ 42 margin: 0 15px; 43 padding: 0; 44 line-height: 26px; 45 color: #2E2E2E; 46 font-size: 14px; 47 font-weight: 400; 48 @include transition( color 0.3s ease ); 49 50 &:hover{ 51 color: $blue; 52 @include transition( color 0.3s ease ); 53 background-color: transparent; 54 } 55} 56 57//general shared project mixins 58@mixin img-retina($image1x, $image, $width, $height) { 59 background-image: image-url($image1x); 60 background-size: $width $height; 61 background-repeat: no-repeat; 62 63 @media (min--moz-device-pixel-ratio: 1.3), 64 (-o-min-device-pixel-ratio: 2.6/2), 65 (-webkit-min-device-pixel-ratio: 1.3), 66 (min-device-pixel-ratio: 1.3), 67 (min-resolution: 1.3dppx) { 68 /* on retina, use image that's scaled by 2 */ 69 background-image: image-url($image); 70 background-size: $width $height; 71 } 72} 73 74//wrapper for img-retina when using pngs 75@mixin img-ret-rails-jpg($img-name, $width, $height){ 76 @include img-retina( asset_path('#{$imagePath}#{$img-name}.jpg'), asset_path('#{$imagePath}#{$img-name}@2x.jpg'), $width, $height); 77} 78 79@mixin img-ret-rails-png($img-name, $width, $height){ 80 @include img-retina( asset_path('#{$imagePath}#{$img-name}.png'), asset_path('#{$imagePath}#{$img-name}@2x.png'), $width, $height); 81} 82 83 84@mixin skewY($skew) { 85 -webkit-transform: skewY($skew); 86 -moz-transform: skewY($skew); 87 -ms-transform: skewY($skew); 88 -o-transform: skewY($skew); 89 transform: skewY($skew); 90} 91 92// 93// ------------------------- 94@mixin anti-alias() { 95 text-rendering: optimizeLegibility; 96 -webkit-font-smoothing: antialiased; 97} 98 99@mixin open-light() { 100 font-family: $font-family-open-sans; 101 font-weight: 300; 102} 103 104@mixin open() { 105 font-family: $font-family-open-sans; 106 font-weight: 400; 107} 108 109@mixin open-sb() { 110 font-family: $font-family-open-sans; 111 font-weight: 600; 112} 113 114@mixin open-bold() { 115 font-family: $font-family-open-sans; 116 font-weight: 700; 117} 118 119@mixin bez-1-transition{ 120 @include transition( all 300ms ease-in-out ); 121} 122 123@mixin btn-shadow{ 124 box-shadow: 2px 3px 2px rgba(0,0,0,0.08); 125} 126