Skip to content

Instantly share code, notes, and snippets.

@bangpound

bangpound/-

Created November 11, 2016 21:04
Show Gist options
  • Save bangpound/38af1f9b26bbe152565a5655586030d3 to your computer and use it in GitHub Desktop.
Save bangpound/38af1f9b26bbe152565a5655586030d3 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
-
diff --git a/patternlab/config.codekit b/patternlab/config.codekit
index 792f85d..062b4a3 100644
--- a/patternlab/config.codekit
+++ b/patternlab/config.codekit
@@ -1,16 +1,7 @@
{
"CodeKitInfo": "This is a CodeKit 2.x project configuration file. It is designed to sync project settings across multiple machines. MODIFYING THE CONTENTS OF THIS FILE IS A POOR LIFE DECISION. If you do so, you will likely cause CodeKit to crash. This file is not useful unless accompanied by the project that created it in CodeKit 2. This file is not backwards-compatible with CodeKit 1.x. For more information, see: http:\/\/incident57.com\/codekit",
-"creatorBuild": "19127",
+"creatorBuild": "19137",
"files": {
- "\/config.rb": {
- "fileType": 131072,
- "ignore": 0,
- "ignoreWasSetByUser": 0,
- "inputAbbreviatedPath": "\/config.rb",
- "outputAbbreviatedPath": "\/config.rb",
- "outputPathIsOutsideProject": 0,
- "outputPathIsSetByUser": 0
- },
"\/README.md": {
"criticStyle": 0,
"enableFootnotes": 0,
@@ -6808,7 +6799,7 @@
},
"hooks": [
],
-"lastSavedByUser": "Graham Troyer-Joy",
+"lastSavedByUser": "Benjamin Doherty",
"manualImportLinks": {
},
"projectAttributes": {
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