inputField as mixin

oslabs-beta · May 25, 2023 · 7efe063 · 7efe063
1 parent 62ad271
commit 7efe063
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 42 deletions.
diff --git a/client/scss/_testPage.scss b/client/scss/_testPage.scss
@@ -14,28 +14,12 @@
   }
 
   input {
-    padding: 0.625rem;
-    margin-bottom: 1.25rem;
-    border: 0.1rem solid $color-input-border;
-    border-radius: 0.3rem;
-    font-size: $font-size-base;
-    color: $color-text;
-    background-color: $color-input-background;
-    outline: none;
-
-    &::placeholder {
-      color: $color-input-placeholder;
-    }
-
-    &:focus {
-      border-color: $color-primary;
-    }
+    @include inputField;
   }
 
   button {
     @include standard-button;
     margin-bottom: 2rem;
-    transition: background-color 0.3s ease, transform 0.3s ease; // Add transform transition
   }
 
   details {

diff --git a/client/scss/_welcomePage.scss b/client/scss/_welcomePage.scss
@@ -16,24 +16,9 @@
   }
 
   textarea {
-    padding: 1rem 0.625rem;
-    margin-bottom: 1.25rem;
-    border: 0.1rem solid $color-input-border;
-    border-radius: 0.3rem;
-    font-size: $font-size-base;
-    color: $color-text;
-    background-color: $color-input-background;
-    outline: none;
-
-
-    &::placeholder {
-      color: $color-input-placeholder;
-    }
-
-    &:focus {
-      border-color: $color-primary;
-    }
+    @include inputField;
   }
+
 
   button {
     @include standard-button;
@@ -45,10 +30,7 @@
     border: 1px solid white;
     padding: 1rem;
     border-radius: 4px;
-    background-color: #202020;
-      *{
-      background-color: #202020;
-      }
+
     summary {
       font-weight: $font-weight-semibold;
       margin-bottom: 0.5rem;
@@ -61,9 +43,5 @@
         margin: 0.5rem 0;
       }
     }
-
-    p {
-      margin-bottom: 1rem;
-    }
   }
 }
diff --git a/client/scss/application.scss b/client/scss/application.scss
@@ -1,6 +1,7 @@
 @import "variables";
 @import "styles";
 @import "components/buttons";
+@import "components/input";
 @import "eventLogger";
 @import "topBar";
 @import "welcomePage";

diff --git a/client/scss/components/input.scss b/client/scss/components/input.scss
@@ -0,0 +1,18 @@
+@mixin inputField {
+  padding: 0.625rem;
+  margin-bottom: 1.25rem;
+  border: 0.1rem solid $color-input-border;
+  border-radius: 0.3rem;
+  font-size: $font-size-base;
+  color: $color-text;
+  background-color: $color-input-background;
+  outline: none;
+
+  &::placeholder {
+    color: $color-input-placeholder;
+  }
+
+  &:focus {
+    border-color: $color-primary;
+  }
+}