Merge branch 'master' into js-to-sass

css/index.css

@@ -1792,11 +1792,15 @@ h6, .h6-primary {
     background-color: #f9514f;
     border: 2px solid rgba(0, 0, 0, 0.25); }
 
-a:active, a:hover, a *:active, a *:hover {
-  color: #4c4c4c; }
-
-a img:active, a img:hover, a video:active, a video:hover, a figure:active, a figure:hover, a picture:active, a picture:hover {
-  opacity: 0.7; }
+a {
+  transition: color 0.3s ease; }
+  a:active, a:hover {
+    color: #7f7f7f; }
+
+a img, a video, a figure, a picture {
+  transition: opacity 0.3s ease; }
+  a img:active, a img:hover, a video:active, a video:hover, a figure:active, a figure:hover, a picture:active, a picture:hover {
+    opacity: 0.7; }
 
 figcaption, figcaption p {
   color: #9A9A9A;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wpmedia/news-theme-css",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "CSS Grid Framework with Bootstrap-like conventions",
   "author": "Brent Miller",
   "license": "ISC",

scss/_links.scss

@@ -1,16 +1,18 @@
 // Links
 //
-// Provides :active and :hover  styling of links and elements inside links
+// Provides :active and :hover  styling of links
 //
 // Styleguide 9.0.0
 
-a, a *{
+a {
+  transition: color 0.3s ease;
   &:active, &:hover{
-    color: lighten($ui-primary-font-color, 20%);
+    color: lighten($ui-primary-font-color, 40%);
   }
 }
 
 a img, a video, a figure, a picture{
+  transition: opacity 0.3s ease;
   &:active, &:hover{
     opacity: 0.7;
   }

scss/_mixins.scss

@@ -23,8 +23,9 @@
 // Styleguide 9.1.0
 
 @mixin link-color-active-hover($color-prop:$ui-primary-font-color) {
+  transition: color 0.3s ease;
   &:active, &:hover{
-    color: lighten($color-prop, 20%);
+    color: lighten($color-prop, 40%);
   }
 }
 
@@ -36,6 +37,7 @@
 // Styleguide 9.1.0
 
 @mixin svg-color-active-hover($color-prop:$ui-primary-font-color) {
+  transition: fill 0.3s ease;
   &:active svg, &:hover svg{
     fill: lighten($color-prop, 20%);
   }

styleguide/item-9-1.html

@@ -109,7 +109,7 @@ <h1 class="kss-navigation__title kss-title">News Theme CSS</h1>
             <header class="kss-section kss-section--depth-2" id="kssref-9-1">
 
             <article class="kss-section__content">
-                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>31</span></p>
+                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>32</span></p>
 
               <a class="kss-section__permalink" href="#kssref-9-1">
                 <h2 class="kss-section__item kss-section__item--depth-2">

styleguide/item-9.html

@@ -132,7 +132,7 @@ <h1 class="kss-section__item kss-section__item--depth-1">
                 </h1>
               </a>
 
-                <div class="kss-section__description"><p>Provides :active and :hover  styling of links and elements inside links</p>
+                <div class="kss-section__description"><p>Provides :active and :hover  styling of links</p>
 </div>
 
             </article>

styleguide/section-9.html

@@ -132,7 +132,7 @@ <h1 class="kss-section__item kss-section__item--depth-1">
                 </h1>
               </a>
 
-                <div class="kss-section__description"><p>Provides :active and :hover  styling of links and elements inside links</p>
+                <div class="kss-section__description"><p>Provides :active and :hover  styling of links</p>
 </div>
 
             </article>
@@ -162,7 +162,7 @@ <h2 class="kss-section__item kss-section__item--depth-2">
             <section class="kss-section kss-section--depth-2" id="kssref-9-1">
 
             <article class="kss-section__content">
-                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>31</span></p>
+                <p class="kss-section__source">Source: <span>_mixins.scss</span>, line <span>32</span></p>
 
               <a class="kss-section__permalink" href="#kssref-9-1">
                 <h2 class="kss-section__item kss-section__item--depth-2">