Addes different sizes (sm, md, lg)

rudolphmax · Dec 25, 2020 · 8d46826 · 8d46826
1 parent 650faf4
commit 8d46826
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git 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%; }*/
+.btn-goto:active .btn-goto-arm:last-child { transform: translate(0%, 0px) rotate(0deg); }
diff --git 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>