From e3efcf03712f07cf7ed6e35d835e4cea8547ca62 Mon Sep 17 00:00:00 2001
From: Trezy <tre@trezy.com>
Date: Mon, 18 Sep 2017 15:25:07 -0500
Subject: [PATCH] Update gradient syntax

---
 assets/css/kbdfun.css   |  18 ++--
 assets/less/kbdfun.less | 200 ++++++++++++++++++++--------------------
 2 files changed, 109 insertions(+), 109 deletions(-)

diff --git a/assets/css/kbdfun.css b/assets/css/kbdfun.css
index 9c6a37b..a3fbf0f 100644
--- a/assets/css/kbdfun.css
+++ b/assets/css/kbdfun.css
@@ -36,11 +36,11 @@ kbd {
   background-clip: padding-box;
   border: 1px solid #bbb;
   background-color: #f7f7f7;
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.1)), to(rgba(0, 0, 0, 0)));
-  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
-  background-image: linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  background-image: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  background-image: -o-linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
+  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1a000000', endColorstr='#00000000', GradientType=0);
   box-shadow: 0px 2px 0 #bbbbbb, 0 3px 1px #999999, 0 3px 0 #bbbbbb, inset 0 1px 1px #ffffff, inset 0 -1px 3px #cccccc;
@@ -52,7 +52,7 @@ kbd.dark {
   background-color: #4d4c4c;
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0.5)), color-stop(80%, rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0)));
   background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
-  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
+  background-image: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
   background-image: -o-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
   background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0));
   background-repeat: no-repeat;
@@ -65,11 +65,11 @@ kbd.ios {
   border-color: rgba(0, 0, 0, 0.6);
   border-top-color: rgba(0, 0, 0, 0.4);
   background-color: #b7b7bc;
-  background-image: -moz-linear-gradient(top, #efeff0, #b7b7bc);
+  background-image: -moz-linear-gradient(to bottom, #efeff0, #b7b7bc);
   background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#efeff0), to(#b7b7bc));
-  background-image: -webkit-linear-gradient(top, #efeff0, #b7b7bc);
-  background-image: -o-linear-gradient(top, #efeff0, #b7b7bc);
-  background-image: linear-gradient(top, #efeff0, #b7b7bc);
+  background-image: -webkit-linear-gradient(to bottom, #efeff0, #b7b7bc);
+  background-image: -o-linear-gradient(to bottom, #efeff0, #b7b7bc);
+  background-image: linear-gradient(to bottom, #efeff0, #b7b7bc);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffefeff0', endColorstr='#ffb7b7bc', GradientType=0);
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 3px rgba(0, 0, 0, 0.1), inset 0 1px 0 #ffffff;
diff --git a/assets/less/kbdfun.less b/assets/less/kbdfun.less
index b4de6e1..130e9df 100644
--- a/assets/less/kbdfun.less
+++ b/assets/less/kbdfun.less
@@ -20,95 +20,95 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 // Le variables
 // ----------------------
 
-@textColor: 		#444;
-@textColorDark: 	#eee;
-@fontFamily: 		"Lucida Grande", Lucida, Verdana, sans-serif;
+@textColor:     #444;
+@textColorDark:   #eee;
+@fontFamily:     "Lucida Grande", Lucida, Verdana, sans-serif;
 
 
 /*  Le kbd
 ---------------------- */
 
 kbd {
-	color: @textColor;
-	font-family: @fontFamily;
-	font-weight: normal;
-	font-style: normal;
-	text-align: center;
-	line-height: 1em;
-	text-shadow: 0 1px 0 #fff;
-	
-	display: inline;
-	padding: .3em .55em;
-	
-	.border-radius(6px);
-	border: 1px solid #bbb;
-	
-	background-color: #f7f7f7;
-	#gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));
-	
-	box-shadow: 0px 2px 0 #bbb,
-				0 3px 1px #999,
-				0 3px 0 #bbb,
-				inset 0 1px 1px #fff,
-				inset 0 -1px 3px #ccc;
-	
-	&.dark {
-		color: @textColorDark;
-		text-shadow: 0 -1px 0 #000;
-		
-		border-color: #000;
-		
-		background-color: #4d4c4c;
-		#gradient > .vertical-three-colors(rgba(0,0,0,0.5), rgba(0,0,0,0), 80%, rgba(0,0,0,0));
-		
-		box-shadow: 0px 2px 0 #000,
-					0 3px 1px #999,
-					inset 0 1px 1px #aaa,
-					inset 0 -1px 3px #272727;
-	}
+  color: @textColor;
+  font-family: @fontFamily;
+  font-weight: normal;
+  font-style: normal;
+  text-align: center;
+  line-height: 1em;
+  text-shadow: 0 1px 0 #fff;
 
-	&.ios {
-		font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
-		color: #000;
-		border-color: rgba(0,0,0,.6);
-		border-top-color: rgba(0,0,0,.4);			
-		
-		background-color: #b7b7bc;
-		#gradient > .vertical(#efeff0, #b7b7bc);
-		
-		box-shadow: 0 1px 2px rgba(0,0,0,.6),
-					0 2px 3px rgba(0,0,0,.1),
-					inset 0 1px 0 #fff;
-	}
+  display: inline;
+  padding: .3em .55em;
 
-	&.android {
-		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-	// Uncomment the following line to load Roboto.
-	// Make sure to include the font files
-	// somewhere in your project structure.
-		//.font-roboto;
-		color: #ffffff;
-		text-shadow: none;
-		padding: .3em;
-		border: 1px solid rgba(0,0,0,.05);
-		.border-radius(3px);
-		background: #5e5e5e;
-		box-shadow: 0 2px 2px rgba(0,0,0,.3),
-					0 1px 0 #444,
-					inset 0 1px 0 #868686;
-		&.dark 	  { 
-			background: #222222;
-			box-shadow: 0 2px 2px rgba(0,0,0,.7),
-						0 1px 0 #444,
-						inset 0 1px 0 #505050;
-		}
-		&.color { 
-			background: #083c5b;
-			box-shadow: 0 2px 2px rgba(0,0,0,.7),
-						0 1px 0 #444,
-						inset 0 1px 0 #36647b;
-		}
-	}
+  .border-radius(6px);
+  border: 1px solid #bbb;
+
+  background-color: #f7f7f7;
+  #gradient > .vertical(rgba(0,0,0,0.1), rgba(0,0,0,0));
+
+  box-shadow: 0px 2px 0 #bbb,
+        0 3px 1px #999,
+        0 3px 0 #bbb,
+        inset 0 1px 1px #fff,
+        inset 0 -1px 3px #ccc;
+
+  &.dark {
+    color: @textColorDark;
+    text-shadow: 0 -1px 0 #000;
+
+    border-color: #000;
+
+    background-color: #4d4c4c;
+    #gradient > .vertical-three-colors(rgba(0,0,0,0.5), rgba(0,0,0,0), 80%, rgba(0,0,0,0));
+
+    box-shadow: 0px 2px 0 #000,
+          0 3px 1px #999,
+          inset 0 1px 1px #aaa,
+          inset 0 -1px 3px #272727;
+  }
+
+  &.ios {
+    font-family: Helvetica, "Helvetica Neue", Arial, sans-serif;
+    color: #000;
+    border-color: rgba(0,0,0,.6);
+    border-top-color: rgba(0,0,0,.4);
+
+    background-color: #b7b7bc;
+    #gradient > .vertical(#efeff0, #b7b7bc);
+
+    box-shadow: 0 1px 2px rgba(0,0,0,.6),
+          0 2px 3px rgba(0,0,0,.1),
+          inset 0 1px 0 #fff;
+  }
+
+  &.android {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  // Uncomment the following line to load Roboto.
+  // Make sure to include the font files
+  // somewhere in your project structure.
+    //.font-roboto;
+    color: #ffffff;
+    text-shadow: none;
+    padding: .3em;
+    border: 1px solid rgba(0,0,0,.05);
+    .border-radius(3px);
+    background: #5e5e5e;
+    box-shadow: 0 2px 2px rgba(0,0,0,.3),
+          0 1px 0 #444,
+          inset 0 1px 0 #868686;
+    &.dark     {
+      background: #222222;
+      box-shadow: 0 2px 2px rgba(0,0,0,.7),
+            0 1px 0 #444,
+            inset 0 1px 0 #505050;
+    }
+    &.color {
+      background: #083c5b;
+      box-shadow: 0 2px 2px rgba(0,0,0,.7),
+            0 1px 0 #444,
+            inset 0 1px 0 #36647b;
+    }
+  }
 }
 
 
@@ -134,24 +134,24 @@ kbd {
 
 // Gradient
 #gradient {
-	.vertical(@startColor, @endColor) {
-		background-image: -moz-linear-gradient(top, @startColor, @endColor);
-		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
-		background-image: -webkit-linear-gradient(top, @startColor, @endColor);
-		background-image: -o-linear-gradient(top, @startColor, @endColor);
-		background-image: linear-gradient(top, @startColor, @endColor);
-		background-repeat: repeat-x;
-		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
-	}
-	.vertical-three-colors(@startColor, @midColor, @colorStop, @endColor) {
-		background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-		background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-		background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor);
-		background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
-		background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
-		background-repeat: no-repeat;
-		filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
-	}
+  .vertical(@startColor, @endColor) {
+    background-image: -moz-linear-gradient(to bottom, @startColor, @endColor);
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
+    background-image: -webkit-linear-gradient(to bottom, @startColor, @endColor);
+    background-image: -o-linear-gradient(to bottom, @startColor, @endColor);
+    background-image: linear-gradient(to bottom, @startColor, @endColor);
+    background-repeat: repeat-x;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
+  }
+  .vertical-three-colors(@startColor, @midColor, @colorStop, @endColor) {
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+    background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-image: -moz-linear-gradient(to bottom, @startColor, @midColor @colorStop, @endColor);
+    background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor);
+    background-repeat: no-repeat;
+    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",argb(@startColor),argb(@endColor)));
+  }
 }
 // import roboto styles
-@import 'roboto.less';
\ No newline at end of file
+@import 'roboto.less';