88 lines
2.0 KiB
SCSS
Executable File
88 lines
2.0 KiB
SCSS
Executable File
//
|
|
// Hashicorp Nav (header/footer) Utiliy Vars and Mixins
|
|
//
|
|
// Notes:
|
|
// - Include this in Application.scss before header and feature-footer
|
|
// - Open Sans Google (Semibold - 600) font needs to be included if not already
|
|
// --------------------------------------------------
|
|
|
|
// Variables
|
|
$font-family-open-sans: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
|
$header-font-family: $font-family-open-sans;
|
|
$header-font-weight: 600; // semi-bold
|
|
|
|
$header-height: 74px;
|
|
$header-mobile-height: 60px;
|
|
$by-hashicorp-width: 74px;
|
|
$by-hashicorp-height: 16px;
|
|
$nav-margin-right: 12px;
|
|
|
|
// Mixins
|
|
@mixin hashi-a-style-core{
|
|
font-family: $header-font-family;
|
|
font-weight: $header-font-weight;
|
|
font-size: 14px;
|
|
//letter-spacing: 0.0625em;
|
|
}
|
|
|
|
@mixin hashi-a-style{
|
|
margin: 0 15px;
|
|
padding: 0;
|
|
line-height: 22px;
|
|
@include hashi-a-style-core();
|
|
@include transition( all 300ms ease-in );
|
|
|
|
&:hover{
|
|
@include transition( all 300ms ease-in );
|
|
background-color: transparent;
|
|
}
|
|
}
|
|
|
|
//general shared project mixins
|
|
@mixin img-retina($image1x, $image, $width, $height) {
|
|
background-image: url($image1x);
|
|
background-size: $width $height;
|
|
background-repeat: no-repeat;
|
|
|
|
@media (min--moz-device-pixel-ratio: 1.3),
|
|
(-o-min-device-pixel-ratio: 2.6/2),
|
|
(-webkit-min-device-pixel-ratio: 1.3),
|
|
(min-device-pixel-ratio: 1.3),
|
|
(min-resolution: 1.3dppx) {
|
|
/* on retina, use image that's scaled by 2 */
|
|
background-image: url($image);
|
|
background-size: $width $height;
|
|
}
|
|
}
|
|
|
|
//
|
|
// -------------------------
|
|
@mixin anti-alias() {
|
|
text-rendering: optimizeLegibility;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
@mixin open-light() {
|
|
font-family: $font-family-open-sans;
|
|
font-weight: 300;
|
|
}
|
|
|
|
@mixin open() {
|
|
font-family: $font-family-open-sans;
|
|
font-weight: 400;
|
|
}
|
|
|
|
@mixin open-sb() {
|
|
font-family: $font-family-open-sans;
|
|
font-weight: 600;
|
|
}
|
|
|
|
@mixin open-bold() {
|
|
font-family: $font-family-open-sans;
|
|
font-weight: 700;
|
|
}
|
|
|
|
@mixin bez-1-transition{
|
|
@include transition( all 300ms ease-in-out );
|
|
}
|