IMPROVEMENT: animate button icons

dist/css/app.css

@@ -14684,7 +14684,9 @@ img {
 a:hover,
 a:focus,
 [data-toggle]:hover,
-[data-toggle]:focus {
+[data-toggle]:focus,
+button:hover,
+button:focus {
   opacity: .8;
 }
 
@@ -14711,7 +14713,15 @@ a:focus.fab,
 [data-toggle]:focus > .fas,
 [data-toggle]:focus > .fab,
 [data-toggle]:focus.fas,
-[data-toggle]:focus.fab {
+[data-toggle]:focus.fab,
+button:hover > .fas,
+button:hover > .fab,
+button:hover.fas,
+button:hover.fab,
+button:focus > .fas,
+button:focus > .fab,
+button:focus.fas,
+button:focus.fab {
   -webkit-transform: rotate(-180deg);
           transform: rotate(-180deg);
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a2nt/ss-bootstrap-ui-webpack-boilerplate",
-  "version": "1.3.3",
+  "version": "1.3.4",
   "author": "Tony Air <tony@twma.pro>",
   "license": "MIT",
   "description": "This UI Kit allows you to build Bootstrap 4 webapp with some extra UI features. It's easy to extend and easy to convert HTML templates to CMS templates.",

src/scss/_components/_ui.main.scss

@@ -17,19 +17,20 @@ img {
     cursor: pointer;
 }
 
-.a:hover,
+.a,
-.a:focus,
+a,
-a:hover,
+[data-toggle],
-a:focus,
+button {
-[data-toggle]:hover,
+    &:hover,
-[data-toggle]:focus {
+    &:focus {
-    opacity: .8;
+        opacity: .8;
 
-    > .fas,
+        > .fas,
-    > .fab,
+        > .fab,
-    &.fas,
+        &.fas,
-    &.fab {
+        &.fab {
-        transform: rotate(-180deg);
+            transform: rotate(-180deg);
+        }
     }
 }