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