IntenseWebs/opentofu
3
0
Fork 0
mirror of https://github.com/opentofu/opentofu.git synced 2025-02-25 18:45:20 -06:00
Code Issues Packages Projects Releases Wiki Activity

whitespace

Browse Source
This commit is contained in:
captainill 2015-11-06 21:01:14 -08:00
parent 7f53f82f0d
commit b33c3fcd0d
7 changed files with 509 additions and 509 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
website/source/assets/javascripts/app/Sidebar.js
View File

@ -1,50 +1,50 @@
(function(){ (function(){
Sidebar = Base.extend({ Sidebar = Base.extend({
$body: null, $body: null,
$overlay: null, $overlay: null,
$sidebar: null, $sidebar: null,
$sidebarHeader: null, $sidebarHeader: null,
$sidebarImg: null, $sidebarImg: null,
$toggleButton: null, $toggleButton: null,
constructor: function(){ constructor: function(){
this.$body = $('body'); this.$body = $('body');
this.$overlay = $('.sidebar-overlay'); this.$overlay = $('.sidebar-overlay');
this.$sidebar = $('#sidebar'); this.$sidebar = $('#sidebar');
this.$sidebarHeader = $('#sidebar .sidebar-header'); this.$sidebarHeader = $('#sidebar .sidebar-header');
this.$toggleButton = $('.navbar-toggle'); this.$toggleButton = $('.navbar-toggle');
this.sidebarImg = this.$sidebarHeader.css('background-image'); this.sidebarImg = this.$sidebarHeader.css('background-image');
this.addEventListeners(); this.addEventListeners();
}, },
addEventListeners: function(){ addEventListeners: function(){
var _this = this; var _this = this;
_this.$toggleButton.on('click', function() { _this.$toggleButton.on('click', function() {
_this.$sidebar.toggleClass('open'); _this.$sidebar.toggleClass('open');
if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) { if ((_this.$sidebar.hasClass('sidebar-fixed-left') || _this.$sidebar.hasClass('sidebar-fixed-right')) && _this.$sidebar.hasClass('open')) {
_this.$overlay.addClass('active'); _this.$overlay.addClass('active');
_this.$body.css('overflow', 'hidden'); _this.$body.css('overflow', 'hidden');
} else { } else {
_this.$overlay.removeClass('active'); _this.$overlay.removeClass('active');
_this.$body.css('overflow', 'auto'); _this.$body.css('overflow', 'auto');
} }
return false; return false;
}); });
_this.$overlay.on('click', function() { _this.$overlay.on('click', function() {
$(this).removeClass('active'); $(this).removeClass('active');
_this.$body.css('overflow', 'auto'); _this.$body.css('overflow', 'auto');
_this.$sidebar.removeClass('open'); _this.$sidebar.removeClass('open');
}); });
} }
}); });
window.Sidebar = Sidebar; window.Sidebar = Sidebar;
})(); })();

118
website/source/assets/stylesheets/_header.scss
View File

@ -5,79 +5,79 @@
// -------------------------------------------------- // --------------------------------------------------
body.page-sub{ body.page-sub{
#header{ #header{
background-color: $purple; background-color: $purple;
.navbar-brand { .navbar-brand {
.logo{ .logo{
&:hover{ &:hover{
color: $black; color: $black;
}
}
.by{
&:hover{
svg{
line{
stroke: $black;
}
}
}
}
} }
} }
.by{
&:hover{
svg{
line{
stroke: $black;
}
}
}
}
}
}
} }
#header { #header {
.navbar-brand { .navbar-brand {
.logo{ .logo{
font-size: 20px; font-size: 20px;
text-transform: uppercase; text-transform: uppercase;
@include lato-light(); @include lato-light();
background: image-url('../images/logo-header.png') 0 0 no-repeat; background: image-url('../images/logo-header.png') 0 0 no-repeat;
@include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height); @include img-retina("../images/logo-header.png", "../images/logo-header@2x.png", $project-logo-width, $project-logo-height);
background-position: 0 45%; background-position: 0 45%;
&:hover{ &:hover{
color: $purple; color: $purple;
} }
}
.by{
color: $black;
&:hover{
svg{
line{
stroke: $purple;
}
}
}
}
} }
.buttons{ .by{
margin-top: 2px; //baseline everything color: $black;
&:hover{
ul.navbar-nav{ svg{
li { line{
// &:hover{ stroke: $purple;
// svg path{ }
// fill: $purple;
// }
// }
svg path{
fill: $white;
}
}
} }
}
} }
}
.main-links, .buttons{
.external-links { margin-top: 2px; //baseline everything
li > a {
@include project-a-style(); ul.navbar-nav{
li {
// &:hover{
// svg path{
// fill: $purple;
// }
// }
svg path{
fill: $white;
} }
}
} }
}
.main-links,
.external-links {
li > a {
@include project-a-style();
}
}
} }
@media (max-width: 414px) { @media (max-width: 414px) {

24
website/source/assets/stylesheets/_sidebar.scss
View File

@ -5,19 +5,19 @@
// -------------------------------------------------- // --------------------------------------------------
.sidebar { .sidebar {
.sidebar-nav { .sidebar-nav {
// Links // Links
//---------------- //----------------
li { li {
a { a {
color: $black; color: $black;
svg{ svg{
path{ path{
fill: $black; fill: $black;
} }
}
}
} }
}
} }
}
} }

358
website/source/assets/stylesheets/hashicorp-shared/_hashicorp-header.scss
View File

@ -5,195 +5,195 @@
// -------------------------------------------------- // --------------------------------------------------
#header { #header {
position: relative; position: relative;
color: black; color: black;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
margin-bottom: 0; margin-bottom: 0;
transition: all 1s ease; transition: all 1s ease;
&.white{
color: white;
.navbar-brand {
.logo {
color: white;
}
.by{
color: white;
font-weight: 300;
svg{
path,
polygon{
fill: white;
}
line{
stroke: white;
}
}
}
}
.main-links,
.external-links {
li > a {
&:hover{
opacity: 1;
}
}
}
.nav > li > a:hover, .nav > li > a:focus {
color: white;
}
.navbar-header{
.navbar-toggle{
.icon-bar{
border: 1px solid white;
}
}
}
}
.navbar-header{
.navbar-toggle{
height: $header-height;
margin: 0;
padding-right: 15px;
border-radius: 0;
.icon-bar{
border: 1px solid $black;
border-radius: 0;
}
}
}
&.white{
color: white;
.navbar-brand { .navbar-brand {
display: block; .logo {
height: $header-height; color: white;
padding: 0; }
margin: 0 10px 0 0 ;
.logo{ .by{
display: inline-block; color: white;
height: $header-height; font-weight: 300;
vertical-align:top; svg{
padding: 0; path,
line-height: $header-height; polygon{
padding-left: $project-logo-width + $project-logo-pad-left; fill: white;
background-position: 0 center; }
@include transition(all 300ms ease-in); line{
stroke: white;
&:hover{ }
@include transition(all 300ms ease-in);
text-decoration: none;
}
} }
}
.by{
display: inline-block;
vertical-align:top;
height: $header-height;
margin-left: 3px;
padding-top: 2px;
color: black;
line-height: $header-height;
font-family: $header-font-family;
font-weight: 600;
font-size: 0;
text-decoration: none;
.svg-wrap{
font-size: 13px;
}
svg{
&.svg-by{
width: $by-hashicorp-width;
height: $by-hashicorp-height;
margin-bottom: -4px;
margin-left: 4px;
}
&.svg-logo{
width: 16px;
height: 16px;
margin-bottom: -3px;
margin-left: 4px;
}
path,
polygon{
fill: black;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
}
}
line{
stroke: black;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
}
}
}
}
}
.external-links {
li {
position: relative;
svg path{
@include transition( all 300ms ease-in );
}
&:hover{
svg path{
@include transition( all 300ms ease-in );
}
}
&.download{
margin-right: 10px;
}
>a {
padding-left: 12px !important;
svg{
position: absolute;
left: -12px;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
}
}
}
}
.main-links{
margin-right: $nav-margin-right * 2;
} }
.main-links, .main-links,
.external-links { .external-links {
li > a { li > a {
@include hashi-a-style(); &:hover{
margin: 0 10px; opacity: 1;
padding-top: 1px;
line-height: $header-height;
} }
}
} }
.nav > li > a:hover, .nav > li > a:focus { .nav > li > a:hover, .nav > li > a:focus {
background-color: transparent; color: white;
color: $black;
@include transition( all 300ms ease-in );
} }
.navbar-header{
.navbar-toggle{
.icon-bar{
border: 1px solid white;
}
}
}
}
.navbar-header{
.navbar-toggle{
height: $header-height;
margin: 0;
padding-right: 15px;
border-radius: 0;
.icon-bar{
border: 1px solid $black;
border-radius: 0;
}
}
}
.navbar-brand {
display: block;
height: $header-height;
padding: 0;
margin: 0 10px 0 0 ;
.logo{
display: inline-block;
height: $header-height;
vertical-align:top;
padding: 0;
line-height: $header-height;
padding-left: $project-logo-width + $project-logo-pad-left;
background-position: 0 center;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
text-decoration: none;
}
}
.by{
display: inline-block;
vertical-align:top;
height: $header-height;
margin-left: 3px;
padding-top: 2px;
color: black;
line-height: $header-height;
font-family: $header-font-family;
font-weight: 600;
font-size: 0;
text-decoration: none;
.svg-wrap{
font-size: 13px;
}
svg{
&.svg-by{
width: $by-hashicorp-width;
height: $by-hashicorp-height;
margin-bottom: -4px;
margin-left: 4px;
}
&.svg-logo{
width: 16px;
height: 16px;
margin-bottom: -3px;
margin-left: 4px;
}
path,
polygon{
fill: black;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
}
}
line{
stroke: black;
@include transition(all 300ms ease-in);
&:hover{
@include transition(all 300ms ease-in);
}
}
}
}
}
.external-links {
li {
position: relative;
svg path{
@include transition( all 300ms ease-in );
}
&:hover{
svg path{
@include transition( all 300ms ease-in );
}
}
&.download{
margin-right: 10px;
}
> a {
padding-left: 12px !important;
svg{
position: absolute;
left: -12px;
top: 50%;
margin-top: -7px;
width: 14px;
height: 14px;
}
}
}
}
.main-links{
margin-right: $nav-margin-right * 2;
}
.main-links,
.external-links {
li > a {
@include hashi-a-style();
margin: 0 10px;
padding-top: 1px;
line-height: $header-height;
}
}
.nav > li > a:hover, .nav > li > a:focus {
background-color: transparent;
color: $black;
@include transition( all 300ms ease-in );
}
} }
@media (max-width: 414px) { @media (max-width: 414px) {
@ -220,9 +220,9 @@
} }
.main-links, .main-links,
.external-links { .external-links {
li > a { li > a {
line-height: $header-mobile-height; line-height: $header-mobile-height;
} }
} }
} }
} }

376
website/source/assets/stylesheets/hashicorp-shared/_hashicorp-sidebar.scss
View File

@ -38,70 +38,70 @@ $sidebar-icon-width: 40px;
$sidebar-icon-height: 20px; $sidebar-icon-height: 20px;
@mixin sidebar-nav-base { @mixin sidebar-nav-base {
text-align: center; text-align: center;
&:last-child{ &:last-child{
border-bottom: none; border-bottom: none;
} }
li > a { li > a {
background-color: $link-bg; background-color: $link-bg;
} }
li:hover > a { li:hover > a {
background-color: $link-hover-bg; background-color: $link-hover-bg;
} }
li:focus > a, li > a:focus { li:focus > a, li > a:focus {
background-color: $link-bg; background-color: $link-bg;
} }
> .open > a { > .open > a {
&,
&:hover,
&:focus {
background-color: $link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
background-color: $link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
background-color: $link-disabled-bg;
}
}
// Dropdown menu items
> .dropdown {
// Remove background color from open dropdown
> .dropdown-menu {
background-color: $link-hover-bg;
> li > a {
&:focus {
background-color: $link-hover-bg;
}
&:hover {
background-color: $link-hover-bg;
}
}
> .active > a {
&, &,
&:hover, &:hover,
&:focus { &:focus {
background-color: $link-hover-bg; color: $link-active-color;
} background-color: $link-active-bg;
}
> .active > a {
&,
&:hover,
&:focus {
background-color: $link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
background-color: $link-disabled-bg;
}
}
// Dropdown menu items
> .dropdown {
// Remove background color from open dropdown
> .dropdown-menu {
background-color: $link-hover-bg;
> li > a {
&:focus {
background-color: $link-hover-bg;
}
&:hover {
background-color: $link-hover-bg;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: $link-active-color;
background-color: $link-active-bg;
}
}
} }
}
} }
}
} }
// //
@ -112,182 +112,182 @@ $sidebar-icon-height: 20px;
// //
// Basic style of sidebar elements // Basic style of sidebar elements
.sidebar { .sidebar {
position: relative;
display: block;
min-height: 100%;
overflow-y: auto;
overflow-x: hidden;
border: none;
@include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
@include clearfix();
background-color: $white;
ul{
padding-left: 0;
list-style-type: none;
}
.sidebar-divider, .divider {
width: 80%;
height: 1px;
margin: 8px auto;
background-color: lighten($gray, 20%);
}
// Sidebar heading
//----------------
.sidebar-header {
position: relative; position: relative;
display: block; margin-bottom: $sidebar-padding;
min-height: 100%; @include transition(all .2s ease-in-out);
overflow-y: auto; }
overflow-x: hidden;
border: none;
@include transition(all 0.5s cubic-bezier(0.55, 0, 0.1, 1));
@include clearfix();
background-color: $white;
ul{ .sidebar-image {
padding-left: 0; padding-top: 24px;
list-style-type: none; img {
display: block;
margin: 0 auto;
} }
}
.sidebar-divider, .divider {
width: 80%; // Sidebar icons
height: 1px; //----------------
margin: 8px auto; .sidebar-icon {
background-color: lighten($gray, 20%); display: inline-block;
height: $sidebar-icon-height;
margin-right: $sidebar-divider;
text-align: left;
font-size: $sidebar-icon-height;
vertical-align: middle;
&:before, &:after {
vertical-align: middle;
} }
}
// Sidebar heading .sidebar-nav {
margin: 0;
padding: 0;
@include sidebar-nav-base();
// Links
//---------------- //----------------
.sidebar-header { li {
position: relative;
list-style-type: none;
text-align: center;
a {
position: relative; position: relative;
margin-bottom: $sidebar-padding; cursor: pointer;
@include transition(all .2s ease-in-out); user-select: none;
} @include hashi-a-style-core();
.sidebar-image { svg{
padding-top: 24px; top: 2px;
img { width: 14px;
display: block; height: 14px;
margin: 0 auto; margin-bottom: -2px;
} margin-right: 4px;
}
// Sidebar icons
//----------------
.sidebar-icon {
display: inline-block;
height: $sidebar-icon-height;
margin-right: $sidebar-divider;
text-align: left;
font-size: $sidebar-icon-height;
vertical-align: middle;
&:before, &:after {
vertical-align: middle;
}
}
.sidebar-nav {
margin: 0;
padding: 0;
@include sidebar-nav-base();
// Links
//----------------
li {
position: relative;
list-style-type: none;
text-align: center;
a {
position: relative;
cursor: pointer;
user-select: none;
@include hashi-a-style-core();
svg{
top: 2px;
width: 14px;
height: 14px;
margin-bottom: -2px;
margin-right: 4px;
}
}
} }
}
} }
}
} }
// Sidebar toggling // Sidebar toggling
// //
// Hide sidebar // Hide sidebar
.sidebar { .sidebar {
width: 0; width: 0;
@include translate3d(-$sidebar-desktop-width, 0, 0); @include translate3d(-$sidebar-desktop-width, 0, 0);
&.open { &.open {
min-width: $sidebar-desktop-width; min-width: $sidebar-desktop-width;
width: $sidebar-desktop-width; width: $sidebar-desktop-width;
@include translate3d(0, 0, 0); @include translate3d(0, 0, 0);
} }
} }
// Sidebar positions: fix the left/right sidebars // Sidebar positions: fix the left/right sidebars
.sidebar-fixed-left, .sidebar-fixed-left,
.sidebar-fixed-right, .sidebar-fixed-right,
.sidebar-stacked { .sidebar-stacked {
position: fixed; position: fixed;
top: 0; top: 0;
bottom: 0; bottom: 0;
z-index: $zindex-sidebar-fixed; z-index: $zindex-sidebar-fixed;
} }
.sidebar-stacked { .sidebar-stacked {
left: 0; left: 0;
} }
.sidebar-fixed-left { .sidebar-fixed-left {
left: 0; left: 0;
box-shadow: 2px 0px 25px rgba(0,0,0,0.15); box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
-webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15); -webkit-box-shadow: 2px 0px 25px rgba(0,0,0,0.15);
} }
.sidebar-fixed-right { .sidebar-fixed-right {
right: 0; right: 0;
box-shadow: 0px 2px 25px rgba(0,0,0,0.15); box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
-webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15); -webkit-box-shadow: 0px 2px 25px rgba(0,0,0,0.15);
@include translate3d($sidebar-desktop-width, 0, 0); @include translate3d($sidebar-desktop-width, 0, 0);
&.open { &.open {
@include translate3d(0, 0, 0); @include translate3d(0, 0, 0);
} }
.icon-material-sidebar-arrow:before { .icon-material-sidebar-arrow:before {
content: "\e614"; // icon-material-arrow-forward content: "\e614"; // icon-material-arrow-forward
} }
} }
// Sidebar size // Sidebar size
// //
// Change size of sidebar and sidebar elements on small screens // Change size of sidebar and sidebar elements on small screens
@media (max-width: $screen-tablet) { @media (max-width: $screen-tablet) {
.sidebar.open { .sidebar.open {
min-width: $sidebar-width; min-width: $sidebar-width;
width: $sidebar-width; width: $sidebar-width;
} }
.sidebar .sidebar-header { .sidebar .sidebar-header {
//height: $sidebar-width * 9/16; // 16:9 header dimension //height: $sidebar-width * 9/16; // 16:9 header dimension
} }
.sidebar .sidebar-image { .sidebar .sidebar-image {
/* img { /* img {
width: $sidebar-width/4 - $sidebar-padding; width: $sidebar-width/4 - $sidebar-padding;
height: $sidebar-width/4 - $sidebar-padding; height: $sidebar-width/4 - $sidebar-padding;
} */ } */
} }
} }
.sidebar-overlay { .sidebar-overlay {
visibility: hidden; visibility: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
opacity: 0; opacity: 0;
background: $white; background: $white;
z-index: $zindex-sidebar-fixed - 1; z-index: $zindex-sidebar-fixed - 1;
-webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); -webkit-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); -moz-transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1); transition: visibility 0 linear .4s,opacity .4s cubic-bezier(.4,0,.2,1);
-webkit-transform: translateZ(0); -webkit-transform: translateZ(0);
-moz-transform: translateZ(0); -moz-transform: translateZ(0);
-ms-transform: translateZ(0); -ms-transform: translateZ(0);
-o-transform: translateZ(0); -o-transform: translateZ(0);
transform: translateZ(0); transform: translateZ(0);
} }
.sidebar-overlay.active { .sidebar-overlay.active {
opacity: 0.3; opacity: 0.3;
visibility: visible; visibility: visible;
-webkit-transition-delay: 0; -webkit-transition-delay: 0;
-moz-transition-delay: 0; -moz-transition-delay: 0;
transition-delay: 0; transition-delay: 0;
} }

56
website/source/assets/stylesheets/hashicorp-shared/_hashicorp-utility.scss
View File

@ -19,23 +19,23 @@ $nav-margin-right: 12px;
// Mixins // Mixins
@mixin hashi-a-style-core{ @mixin hashi-a-style-core{
font-family: $header-font-family; font-family: $header-font-family;
font-weight: $header-font-weight; font-weight: $header-font-weight;
font-size: 14px; font-size: 14px;
//letter-spacing: 0.0625em; //letter-spacing: 0.0625em;
} }
@mixin hashi-a-style{ @mixin hashi-a-style{
margin: 0 15px; margin: 0 15px;
padding: 0; padding: 0;
line-height: 22px; line-height: 22px;
@include hashi-a-style-core(); @include hashi-a-style-core();
@include transition( all 300ms ease-in ); @include transition( all 300ms ease-in );
&:hover{ &:hover{
@include transition( all 300ms ease-in ); @include transition( all 300ms ease-in );
background-color: transparent; background-color: transparent;
} }
} }
//general shared project mixins //general shared project mixins
@ -45,10 +45,10 @@ $nav-margin-right: 12px;
background-repeat: no-repeat; background-repeat: no-repeat;
@media (min--moz-device-pixel-ratio: 1.3), @media (min--moz-device-pixel-ratio: 1.3),
(-o-min-device-pixel-ratio: 2.6/2), (-o-min-device-pixel-ratio: 2.6/2),
(-webkit-min-device-pixel-ratio: 1.3), (-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3), (min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) { (min-resolution: 1.3dppx) {
/* on retina, use image that's scaled by 2 */ /* on retina, use image that's scaled by 2 */
background-image: url($image); background-image: url($image);
background-size: $width $height; background-size: $width $height;
@ -58,30 +58,30 @@ $nav-margin-right: 12px;
// //
// ------------------------- // -------------------------
@mixin anti-alias() { @mixin anti-alias() {
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
} }
@mixin open-light() { @mixin open-light() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 300; font-weight: 300;
} }
@mixin open() { @mixin open() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 400; font-weight: 400;
} }
@mixin open-sb() { @mixin open-sb() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 600; font-weight: 600;
} }
@mixin open-bold() { @mixin open-bold() {
font-family: $font-family-open-sans; font-family: $font-family-open-sans;
font-weight: 700; font-weight: 700;
} }
@mixin bez-1-transition{ @mixin bez-1-transition{
@include transition( all 300ms ease-in-out ); @include transition( all 300ms ease-in-out );
} }

12
website/source/assets/stylesheets/hashicorp-shared/_project-utility.scss
View File

@ -10,11 +10,11 @@ $project-logo-pad-left: 8px;
// Mixins // Mixins
@mixin project-a-style{ @mixin project-a-style{
color: $white; color: $white;
font-weight: 300; font-weight: 300;
opacity: .75; opacity: .75;
&:hover{ &:hover{
color: $white; color: $white;
} }
} }