Adds more transitions to links

tachyons-css · Jul 12, 2023 · c7bbfc6 · c7bbfc6
1 parent cb4aecd
commit c7bbfc6
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 219 deletions.
diff --git a/css/tachyons.css b/css/tachyons.css
@@ -770,11 +770,20 @@ img { display: block; max-width: 100%; }
     - Grayscale
 
 */
+.filter-none { -webkit-filter: none; filter: none; }
 .filter-blur-none { -webkit-filter: blur( 0 ); filter: blur( 0 ); }
 .filter-blur { -webkit-filter: blur( 96px ); filter: blur( 96px ); }
 .grayscale-0 { -webkit-filter: grayscale( 0 ); filter: grayscale( 0 ); }
 .grayscale-50 { -webkit-filter: grayscale( 50% ); filter: grayscale( 50% ); }
 .grayscale-100 { -webkit-filter: grayscale( 100% ); filter: grayscale( 100% ); }
+.hue-rotate0 { -webkit-filter: hue-rotate( 0deg ); filter: hue-rotate( 0deg ); }
+.hue-rotate1 { -webkit-filter: hue-rotate( 45deg ); filter: hue-rotate( 45deg ); }
+.hue-rotate2 { -webkit-filter: hue-rotate( 90deg ); filter: hue-rotate( 90deg ); }
+.hue-rotate3 { -webkit-filter: hue-rotate( 135deg ); filter: hue-rotate( 135deg ); }
+.hue-rotate4 { -webkit-filter: hue-rotate( 180deg ); filter: hue-rotate( 180deg ); }
+.hue-rotate5 { -webkit-filter: hue-rotate( 225deg ); filter: hue-rotate( 225deg ); }
+.hue-rotate6 { -webkit-filter: hue-rotate( 270deg ); filter: hue-rotate( 270deg ); }
+.hue-rotate7 { -webkit-filter: hue-rotate( 315deg ); filter: hue-rotate( 315deg ); }
 /*
 
   FLEXBOX

diff --git a/css/tachyons.min.css b/css/tachyons.min.css
diff --git a/src/_colors.css b/src/_colors.css
diff --git a/src/_filters.css b/src/_filters.css
@@ -5,12 +5,24 @@
 
     - Blur
     - Grayscale
+    - Hue Rotate
 
 */
 
+.filter-none { filter: none; }
+
 .filter-blur-none { filter: blur(0); }
 .filter-blur { filter: blur(96px); }
 
 .grayscale-0 { filter: grayscale(0); }
 .grayscale-50 { filter: grayscale(50%); }
 .grayscale-100 { filter: grayscale(100%); }
+
+.hue-rotate0 { filter: hue-rotate(0deg);}
+.hue-rotate1 { filter: hue-rotate(45deg);}
+.hue-rotate2 { filter: hue-rotate(90deg);}
+.hue-rotate3 { filter: hue-rotate(135deg);}
+.hue-rotate4 { filter: hue-rotate(180deg);}
+.hue-rotate5 { filter: hue-rotate(225deg);}
+.hue-rotate6 { filter: hue-rotate(270deg);}
+.hue-rotate7 { filter: hue-rotate(315deg);}
diff --git a/src/_flexbox.css b/src/_flexbox.css
@@ -19,7 +19,6 @@
 
 .flex-none { flex: none; }
 
-
 .flex-grow-0 { flex-grow: 0; }
 .flex-grow-1 { flex-grow: 1; }
 
@@ -36,9 +35,6 @@
   }
   .flex-none-s { flex: none; }
 
-
-
-
   .flex-grow-0-s { flex-grow: 0; }
   .flex-grow-1-s { flex-grow: 1; }
 
@@ -55,7 +51,6 @@
   }
   .flex-none-m { flex: none; }
 
-
   .flex-grow-0-m { flex-grow: 0; }
   .flex-grow-1-m { flex-grow: 1; }
 

diff --git a/src/_links.css b/src/_links.css
@@ -7,21 +7,21 @@
 
 .link {
   text-decoration: none;
-  transition: color .15s ease-in;
+  transition: all .15s ease-in;
 }
 
 .link:link,
 .link:visited {
-  transition: color .15s ease-in;
+  transition: all .15s ease-in;
 }
 .link:hover   {
-  transition: color .15s ease-in;
+  transition: all .15s ease-in;
 }
 .link:active  {
-  transition: color .15s ease-in;
+  transition: all .15s ease-in;
 }
 .link:focus   {
-  transition: color .15s ease-in;
+  transition: all .15s ease-in;
   outline: 1px dotted currentColor;
 }