Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

GH-2105: Sync button hover states in the hub #607

Merged
merged 4 commits into from Sep 25, 2020
Merged
Changes from 1 commit
Commits
File filter
Filter file types
Jump to
Jump to file
Failed to load files.

Always

Just for now

Remove mixin...Use sass

  • Loading branch information
benstrumeyer committed Sep 22, 2020
commit 9f294a38a9638d9c922097dd687c3bf0900db14f
@@ -16,10 +16,6 @@
padding-top: 45px;
padding-bottom: 25px;
color: $tundora;
// Foundation Overrides
.button {
@include button-hover-color-for($ghosty-blue-alt);
}
}
.HomeView--bolded {
font-weight: 700;
@@ -67,10 +67,6 @@
}
.SetupDone__featureButton {
margin: 20px 10px 10px;
// Foundation Overrides
&.button {
@include button-hover-color-for($ghosty-blue);
}
}
@media only screen and (max-width: 840px) {
.SetupDone__featureList {
@@ -381,10 +381,6 @@ section.home-template .section.section-pricing {
text-transform: none;
height: 38px;
line-height: 22px;
// Foundation Overrides
&.primary {
@include button-hover-color-for($price-blue);
}
&.already-protected {
@include breakpoint($medium-large-breakpoint down) {
margin-top: 45px;
@@ -556,10 +552,6 @@ section.home-template .section.section-pricing {
font-family: 'Open Sans';
font-weight: 600;
background-color: $price-blue;
// Foundation Overrides
&.primary {
@include button-hover-color-for($price-blue);
}
}

.button-gold {
@@ -41,6 +41,15 @@ html, body, #root {
line-height: 1.3;
text-transform: uppercase;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.12);
&.primary {
&:not(.hollow):hover {
background-color: #0078CA;
}
&.hollow:hover, &.hollow:focus {
border-color: #0078CA;
color: #0078CA;
}
}
}

// Helper Classes
@@ -17,25 +17,3 @@
-o-transition: $transitions;
transition: $transitions;
}

// Takes in the original button color ($ghosty-blue, $ghosty-blue-alt, $secondary, etc...) and sets a button hover color
@mixin button-hover-color-for($button-color) {
@if $button-color == #1dafed or $button-color == #00AEF0 {
&:not(.hollow):hover {
background-color: #0078CA;
}
&.hollow:hover, &.hollow:focus {
border-color: #0078CA;
color: #0078CA;
}
} @else {
&:not(.hollow):hover, &:not(.hollow):focus {
background-color: scale-color($button-color, $lightness: -15%);
color: scale-color($button-color, $lightness: -15%);
}
&:hover, &:focus {
border-color: scale-color($button-color, $lightness: -15%);
color: scale-color($button-color, $lightness: -15%);
}
}
}
ProTip! Use n and p to navigate between commits in a pull request.