From 8d46826b00e8268879c4550e772b18ea2c145fff Mon Sep 17 00:00:00 2001
From: Maximilian Rudolph <rudolph-max@gmx.net>
Date: Fri, 25 Dec 2020 11:49:10 +0000
Subject: [PATCH] Addes different sizes (sm, md, lg)

---
 goto/goto-btn-default.css | 15 ++++++++++-----
 index.html                | 25 +++++++++++++++++++++----
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/goto/goto-btn-default.css b/goto/goto-btn-default.css
index 704e02e..b17b3bb 100644
--- a/goto/goto-btn-default.css
+++ b/goto/goto-btn-default.css
@@ -1,11 +1,15 @@
 .btn-goto {
-	width: 50px; height: 50px;
+	width: 100%; height: 100%;
 	box-shadow: inset 0px 0px 0px 0px white;
 
 	text-decoration: none;
 	background-color: #f8f9fa;
 	border: 0;
 }
+.btn-goto.btn-goto-sm { width: 30px; height: 30px; }
+.btn-goto.btn-goto-md { width: 40px; height: 40px; }
+.btn-goto.btn-goto-lg { width: 50px; height: 50px; }
+
 .btn-goto:focus { outline: 0 !important; }
 
 .btn-goto-up { transform: rotate(90deg); }
@@ -20,6 +24,10 @@
 	background-color: #343a40;
 }
 
+.btn-goto.btn-goto-sm .btn-goto-arm { width: 200%; }
+.btn-goto.btn-goto-md .btn-goto-arm { width: 160%; }
+.btn-goto.btn-goto-lg .btn-goto-arm { width: 140%; }
+
 .btn-goto, .btn-goto-arm { transition: 0.3s cubic-bezier(0.075, 0.82, 0.165, 1); }
 
 .btn-goto:hover { box-shadow: inset 0px 0px 0px 3px white; }
@@ -31,7 +39,4 @@
 .btn-goto:hover .btn-goto-arm:last-child { transform: translate(0%, 0px) rotate(25deg); }
 
 .btn-goto:active .btn-goto-arm:first-child { transform: translate(0%, 1px) rotate(0deg); }
-.btn-goto:active .btn-goto-arm:last-child { transform: translate(0%, 0px) rotate(0deg); }
-
-/*.btn-goto.max-width { width: 100%; }
-.btn-goto.max-height { height: 100%; }*/
\ No newline at end of file
+.btn-goto:active .btn-goto-arm:last-child { transform: translate(0%, 0px) rotate(0deg); }
\ No newline at end of file
diff --git a/index.html b/index.html
index 61b1c0b..530d27a 100644
--- a/index.html
+++ b/index.html
@@ -97,11 +97,28 @@ <h3>goto</h3>
 					
 					<div class="row"><div class="col">
 						
+						<div class="row mb-3"><div class="col-1">Large</div></div>
 						<div class="row">
-							<div class="col"><button class="btn-goto max-width"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
-							<div class="col"><button class="btn-goto btn-goto-up max-width"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
-							<div class="col"><button class="btn-goto btn-goto-down max-width"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
-							<div class="col"><button class="btn-goto btn-goto-right max-width"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-lg"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-up btn-goto-lg"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-down btn-goto-lg"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-right btn-goto-lg"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+						</div>
+
+						<div class="row mt-4 mb-3"><div class="col-1">Medium</div></div>
+						<div class="row">
+							<div class="col"><button class="btn-goto btn-goto-md"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-up btn-goto-md"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-down btn-goto-md"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-right btn-goto-md"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+						</div>
+
+						<div class="row mt-4 mb-3"><div class="col-1">Small</div></div>
+						<div class="row">
+							<div class="col"><button class="btn-goto btn-goto-sm"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-up btn-goto-sm"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-down btn-goto-sm"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
+							<div class="col"><button class="btn-goto btn-goto-right btn-goto-sm"> <span class="btn-goto-arm"></span> <span class="btn-goto-arm"></span></button></div>
 						</div>
 
 					</div></div>