Skip to content

Instantly share code, notes, and snippets.

@bangpound

bangpound/-

Created November 11, 2016 21:04
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bangpound/a7bfe23f72e1ac6d0827bc5cd726a2c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bangpound/a7bfe23f72e1ac6d0827bc5cd726a2c4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
-
diff --git a/patternlab/source/sass/01-extends/animations.scss b/patternlab/source/sass/01-extends/animations.scss
index 73db82f..3827fac 100644
--- a/patternlab/source/sass/01-extends/animations.scss
+++ b/patternlab/source/sass/01-extends/animations.scss
@@ -31,7 +31,8 @@
$banner,
animationDuration);
perspective: 1200px;
- a:hover & {
+ a:hover &,
+ a:focus & {
visibility: visible;
opacity: 1;
transition: opacity map-get(
@@ -48,7 +49,8 @@
$banner,
animationDuration);
transform: translateY(-25%) rotateX(35deg);
- a:hover & {
+ a:hover &,
+ a:focus & {
opacity: 1;
transform: rotateX(0deg);
}
diff --git a/patternlab/source/sass/03-atoms/buttons.scss b/patternlab/source/sass/03-atoms/buttons.scss
index 39c609a..d872295 100644
--- a/patternlab/source/sass/03-atoms/buttons.scss
+++ b/patternlab/source/sass/03-atoms/buttons.scss
@@ -100,7 +100,8 @@ button {
@extend %button--special;
border: 0 !important;
background: map-get($button--special, bg--buy); /* Override inherited borders */
- &:hover {
+ &:hover,
+ &:focus {
background: shade(map-get($button--special, bg--buy), map-get($button--special, shade));
}
}
diff --git a/patternlab/source/sass/03-atoms/links.scss b/patternlab/source/sass/03-atoms/links.scss
index d1be48f..323b0aa 100644
--- a/patternlab/source/sass/03-atoms/links.scss
+++ b/patternlab/source/sass/03-atoms/links.scss
@@ -50,7 +50,8 @@ a {
margin-left: 0.5em;
content: '';
}
- &:hover:after {
+ &:hover:after,
+ &:focus:after {
@include sprite($rightArrow, blue);
}
.navFilters & {
@@ -75,7 +76,8 @@ a {
margin-left: 0.5em;
content: '';
}
- &:hover:after {
+ &:hover:after,
+ &:focus:after {
@include sprite($upArrow, blue);
}
}
diff --git a/patternlab/source/sass/03-atoms/toggles.scss b/patternlab/source/sass/03-atoms/toggles.scss
index 5d8874d..d7eea36 100644
--- a/patternlab/source/sass/03-atoms/toggles.scss
+++ b/patternlab/source/sass/03-atoms/toggles.scss
@@ -10,7 +10,8 @@
color: map-get($toggle, color) !important;
padding: map-get($toggle, padding);
display: inline-block;
- &:hover {
+ &:hover,
+ &:focus {
background: shade(map-get($toggle, bg), map-get($toggle, shade));
}
}
@@ -21,7 +22,8 @@
border-radius: 0 $radius $radius 0;
}
.toggle__option--selected,
-.toggle__option--selected:hover, {
+.toggle__option--selected:hover,
+.toggle__option--selected:focus {
background: shade(map-get($toggle, bg), map-get($toggle, shadier));
cursor: pointer;
}
diff --git a/patternlab/source/sass/04-molecules/blocks/person-summary.scss b/patternlab/source/sass/04-molecules/blocks/person-summary.scss
index 02aa85a..132e1a1 100644
--- a/patternlab/source/sass/04-molecules/blocks/person-summary.scss
+++ b/patternlab/source/sass/04-molecules/blocks/person-summary.scss
@@ -52,7 +52,8 @@
font-size: map-get($person__department, fontSize);
a {
color: map-get($person__department, color);
- &:hover {
+ &:hover,
+ &:focus {
color: map-get($links, hover);
}
}
diff --git a/patternlab/source/sass/04-molecules/blocks/promos.scss b/patternlab/source/sass/04-molecules/blocks/promos.scss
index 3832bff..98d5872 100644
--- a/patternlab/source/sass/04-molecules/blocks/promos.scss
+++ b/patternlab/source/sass/04-molecules/blocks/promos.scss
@@ -19,7 +19,8 @@
[data-useragent*="Trident"] & {
display: block;
}
- &:hover {
+ &:hover,
+ &:focus {
background: map-get($promo, bg--hover);
}
figure {
@@ -90,7 +91,8 @@
font-size: map-get($promo__title, fontSize);
line-height: map-get($promo__title, lineHeight);
transition: map-get($transition, standard);
- .promo:hover & {
+ .promo:hover &,
+ .promo:focus & {
background: map-get($promo__title, bg--hover);
}
}
@@ -113,7 +115,8 @@
white-space: nowrap;
font-weight: 700;
font-size: map-get($promo__category, fontSize);
- &:hover {
+ &:hover,
+ &:focus {
color: map-get($promo__category, hover);
}
&:after {
diff --git a/patternlab/source/sass/04-molecules/components.scss b/patternlab/source/sass/04-molecules/components.scss
index fd1fb29..75bacd3 100644
--- a/patternlab/source/sass/04-molecules/components.scss
+++ b/patternlab/source/sass/04-molecules/components.scss
@@ -174,7 +174,8 @@
transition: 0;
.ltie9 & {
text-decoration: none;
- &:hover {
+ &:hover,
+ &:focus {
&:before {
color: $white !important;
}
diff --git a/patternlab/source/sass/04-molecules/lists.scss b/patternlab/source/sass/04-molecules/lists.scss
index 2af9b66..affc454 100644
--- a/patternlab/source/sass/04-molecules/lists.scss
+++ b/patternlab/source/sass/04-molecules/lists.scss
@@ -273,7 +273,8 @@
transition: map-get($transition, standard);
fill: map-get($eventsList__icon, fill);
}
- &:hover {
+ &:hover,
+ &:focus {
.icon {
transition: none;
fill: map-get($links, hover);
diff --git a/patternlab/source/sass/04-molecules/media/gallery.scss b/patternlab/source/sass/04-molecules/media/gallery.scss
index 9b31b23..786459e 100644
--- a/patternlab/source/sass/04-molecules/media/gallery.scss
+++ b/patternlab/source/sass/04-molecules/media/gallery.scss
@@ -30,7 +30,8 @@
font-size: map-get($gallery__button, width);
opacity: .7;
cursor: pointer;
- &:hover {
+ &:hover,
+ &:focus {
opacity: 1;
}
}
@@ -38,7 +39,8 @@
%gallery__button--left {
left: .25em;
border-right: .5em solid $green;
- &:hover {
+ &:hover,
+ &:focus {
border-right-color: $green--tint;
}
}
@@ -46,7 +48,8 @@
%gallery__button--right {
right: .25em;
border-left: .5em solid $green;
- &:hover {
+ &:hover,
+ &:focus {
border-left-color: $green--tint;
}
}
@@ -125,7 +128,8 @@
font-size: .825em;
font-family: map-get($viewer__caption, fontFamily);
transition: map-get($transition, standard);
- .viewer__item:hover & {
+ .viewer__item:hover &,
+ .viewer__item:focus & {
bottom: 0;
transition: none;
}
diff --git a/patternlab/source/sass/04-molecules/navigation/areas.scss b/patternlab/source/sass/04-molecules/navigation/areas.scss
index 7a73777..a2af7f3 100644
--- a/patternlab/source/sass/04-molecules/navigation/areas.scss
+++ b/patternlab/source/sass/04-molecules/navigation/areas.scss
@@ -54,7 +54,8 @@
font-size: map-get($navAreas, fontSize);
font-family: map-get($navList, fontFamily);
color: map-get($navList, color);
- &:hover {
+ &:hover,
+ &:focus {
background: map-get($navList, bg--hover);
color: map-get($navList, hover);
}
diff --git a/patternlab/source/sass/04-molecules/navigation/breadcrumbs.scss b/patternlab/source/sass/04-molecules/navigation/breadcrumbs.scss
index 9c0c264..db1e7a7 100644
--- a/patternlab/source/sass/04-molecules/navigation/breadcrumbs.scss
+++ b/patternlab/source/sass/04-molecules/navigation/breadcrumbs.scss
@@ -76,7 +76,8 @@
display: inline-block;
color: map-get($breadcrumb__link, color);
text-decoration: none;
- &:hover {
+ &:hover,
+ &:focus {
color: map-get($breadcrumb__link, hover);
}
}
diff --git a/patternlab/source/sass/04-molecules/navigation/main.scss b/patternlab/source/sass/04-molecules/navigation/main.scss
index cde47cd..4dc6078 100644
--- a/patternlab/source/sass/04-molecules/navigation/main.scss
+++ b/patternlab/source/sass/04-molecules/navigation/main.scss
@@ -259,7 +259,8 @@
@media #{map-get($bp--down, 2)} and #{$bp--landscape} {
flex-basis: 50%;
}
- a:hover {
+ a:hover,
+ a:focus {
background: map-get($navMain__primary, bg--hover);
@media #{map-get($bp--down, 2)} {
background: transparent;
diff --git a/patternlab/source/sass/04-molecules/navigation/target.scss b/patternlab/source/sass/04-molecules/navigation/target.scss
index 51eab52..533372e 100644
--- a/patternlab/source/sass/04-molecules/navigation/target.scss
+++ b/patternlab/source/sass/04-molecules/navigation/target.scss
@@ -60,7 +60,8 @@
visibility: hidden;
}
}
- &:hover {
+ &:hover,
+ &:focus {
background: map-get($navTarget__link, bg__hover);
color: map-get($navTarget__link, hover);
&:after {
diff --git a/patternlab/source/sass/05-organisms/global.scss b/patternlab/source/sass/05-organisms/global.scss
index 16a4576..8f61de4 100644
--- a/patternlab/source/sass/05-organisms/global.scss
+++ b/patternlab/source/sass/05-organisms/global.scss
@@ -292,7 +292,8 @@
@media #{map-get($bp--down, 2)} {
left: -(map-get($newsletter__icon, padding)*3);
}
- .newsletter:hover & {
+ .newsletter:hover &,
+ .newsletter:focus & {
transform: translate(0, #{map-get($newsletter__icon, padding)/2});
}
.icon {
diff --git a/patternlab/source/sass/style.scss b/patternlab/source/sass/style.scss
index 25115fc..d94af3d 100644
--- a/patternlab/source/sass/style.scss
+++ b/patternlab/source/sass/style.scss
@@ -53,7 +53,7 @@
// !-- Load vendor libraries
// ----------------------------------------------------------------------------
-@import "susy/sass/susy";
+@import "susy";
@import "../bower_components/scut/dist/_scut.scss";
@import "../bower_components/select2/select2";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment