Made some changes to CSS for the orderform and how <div> where implem…

…ented
CDIO-gr-17 · Apr 16, 2024 · 72cc51d · 72cc51d
1 parent 540129a
commit 72cc51d
Show file tree

Hide file tree

Showing 3 changed files with 213 additions and 219 deletions.
diff --git a/src/components/checkout/orderform.css b/src/components/checkout/orderform.css
@@ -1,8 +1,7 @@
 form {
-  /* Center the form on the page */
   margin: 0 auto;
   width: 400px;
-  /* Form outline */
+
   padding: 1em;
   border: 1px solid #ccc;
   border-radius: 1em;
@@ -14,30 +13,24 @@ ul {
   margin: 0;
 }
 
-.input-group {
+input {
+  font-size: 1em sans-serif;
+  height: 25px;
   margin: 1em;
   position: relative;
-  height: 50px;
-}
-.input-group label {
-  margin-top: -30px;
-  position: absolute;
-  cursor: text;
-}
-.input-group input {
   width: 100%;
   border: 0;
   border-bottom: 2px solid #dfdfdf;
   outline: none;
 }
 
-.input-group input:focus {
+input:focus {
   border-bottom: 2px solid #413f3f;
 }
 
-.input-group input,
-.input-group label {
-  font-size: 1em sans-serif;
+input::placeholder {
+  font-size: medium;
+  color: #575757;
 }
 
 .address-checkbox {
@@ -47,30 +40,34 @@ ul {
   height: 50px;
 }
 
-.submit-button {
-  margin: 1em;
-  padding: 0;
-  background-color: #4b9105;
-  color: #fff;
+.acceptButton {
+  background: linear-gradient(to bottom right, #256818, #839e0a);
   border: 0;
-  border-radius: 1em;
+  border-radius: 12px;
+  color: #FFFFFF;
   cursor: pointer;
-  font-size: 1em;
-  position: relative;
+  display: inline-block;
+  font-family: -apple-system,system-ui,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 2.5;
+  outline: transparent;
+  padding: 0 1rem;
+  text-align: center;
+  text-decoration: none;
+  transition: box-shadow .2s ease-in-out;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
 }
 
-.submit-button input {
-  position: inherit;
-  width: 100%;
-  height: 100%;
-  padding: 1em;
-  background-color: inherit;
-  color: inherit;
-  color: #fff;
-  border: inherit;
-  border-radius: inherit;
-  cursor: pointer;
-  font-size: inherit;
+.acceptButton:not([disabled]):focus {
+  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(37, 223, 53, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
+}
+
+.acceptButton:not([disabled]):hover {
+  box-shadow: 0 0 .25rem rgba(0, 0, 0, 0.5), -.125rem -.125rem 1rem rgba(37, 223, 53, 0.5), .125rem .125rem 1rem rgba(255, 154, 90, 0.5);
 }
 
 .business-checkbox {
@@ -85,19 +82,4 @@ ul {
   font-size: 0.8em;
   margin: 0;
   padding: 0;
-}
-
-/* * {
-  outline: 1px solid red;
-} */
-
-.required {
-  color: red;
-  margin-left: 0.1em;
-}
-
-.required-note {
-  font-size: 0.8em;
-  margin-left: 5px;
-  font-style: italic;
-}
+}