From 261424a17311403a63bfa82ba125e038924a05d1 Mon Sep 17 00:00:00 2001
From: Prospect <prospect@harplabs.com>
Date: Wed, 20 Mar 2024 21:39:51 -0400
Subject: [PATCH] theme updates

---
 assets/css/styles.css                        | 212 +++++++++++++++----
 src/scss/components/_index.scss              |   4 +-
 src/scss/components/_project-calculator.scss |  56 -----
 src/scss/styles.scss                         |   2 +-
 src/scss/vendors/_wordpress.scss             |   4 +-
 5 files changed, 180 insertions(+), 98 deletions(-)
 delete mode 100644 src/scss/components/_project-calculator.scss

diff --git a/assets/css/styles.css b/assets/css/styles.css
index 764e1c6..4117f53 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -391,54 +391,188 @@ textarea {
   background-blend-mode: multiply;
 }
 
-.project-calculator {
-  padding: 20px;
-  border: 1px solid #ced4da;
-  border-radius: 5px;
-  background-color: #f8f9fa;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+.accordion {
+  position: relative;
+  overflow: hidden;
+  transition: 0.6s ease-in-out;
+  padding: 0 0.5rem;
 }
-.project-calculator h2 {
-  font-size: 2.5rem;
-  font-weight: bold;
-  margin-top: 0;
-  margin-bottom: 20px;
-  color: #343a40;
-  text-align: center;
+
+.accordion-title {
+  margin: 0 35px 0 0;
+  font-weight: medium;
 }
-.project-calculator div {
-  margin-bottom: 15px;
+
+.accordion-content {
+  position: absolute;
+  opacity: 0;
+  transition: all 600ms ease-in-out;
+  padding: 1rem;
 }
-.project-calculator label {
-  margin-bottom: 5px;
-  color: #495057;
+
+@media (min-width: 1024px) {
+  .accordion-content {
+    padding: 1rem 1rem 1rem 2.5rem;
+  }
+  .accordion.active .accordion-content > li:hover {
+    background-color: var(--primary-500);
+    color: white;
+  }
 }
-.project-calculator select,
-.project-calculator input[type=number] {
-  box-sizing: border-box; /* Include padding and border in element's total width */
-  width: 100%;
-  padding: 10px;
-  border: 1px solid #ced4da;
-  border-radius: 4px;
+.accordion.active .accordion-content {
+  position: static;
+  opacity: 1;
+  border-radius: 0.5rem;
 }
-.project-calculator button {
-  padding: 10px 20px;
-  margin-bottom: 10px;
-  background-color: #007bff;
-  color: #fff;
-  border: none;
-  border-radius: 4px;
+
+.accordion-toggle {
+  border: 0;
+  border-radius: 50%;
   cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 16px;
+  padding: 0;
+}
+
+.accordion-toggle:focus {
+  outline: 0;
+}
+
+.accordion-toggle .fa-times {
+  display: none;
+}
+
+.accordion.active .accordion-toggle .fa-times {
+  display: block;
+}
+
+.accordion.active .accordion-toggle .fa-chevron-down {
+  display: none;
+}
+
+.range-container {
+  position: relative;
+  /* Chrome & Safari */
+  /* Firefox */
+  /* IE */
+}
+
+.range-container input[type=range] {
   width: 100%;
+  margin: 18px 0;
 }
-.project-calculator button:hover {
-  background-color: #0056b3;
+
+.range-container input[type=range]:focus {
+  outline: none;
 }
-.project-calculator .total-price {
-  font-size: 1.2rem;
-  font-weight: bold;
-  color: #007bff;
+
+.range-container input[type=range] + label {
+  background-color: var(--gray-800);
+  padding: 0.5rem 2rem !important;
+  color: white;
+  position: absolute;
+  top: -32px;
+  left: 110px;
   text-align: center;
+  border-radius: 4px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+}
+
+.range-container input[type=range]::-webkit-slider-runnable-track {
+  background: var(--primary-500);
+  border-radius: 4px;
+  width: 100%;
+  height: 10px;
+  cursor: pointer;
+}
+
+.range-container input[type=range]::-webkit-slider-thumb {
+  height: 24px;
+  width: 24px;
+  background: #fff;
+  border-radius: 50%;
+  border: 1px solid purple;
+  margin-top: -7px;
+  cursor: pointer;
+}
+
+.range-container input[type=range]::-moz-range-track {
+  background: purple;
+  border-radius: 4px;
+  width: 100%;
+  height: 13px;
+  cursor: pointer;
+}
+
+.range-container input[type=range]::-moz-range-thumb {
+  height: 24px;
+  width: 24px;
+  background: #fff;
+  border-radius: 50%;
+  border: 1px solid purple;
+  margin-top: -7px;
+  cursor: pointer;
+}
+
+.range-container input[type=range]::-ms-track {
+  background: purple;
+  border-radius: 4px;
+  width: 100%;
+  height: 13px;
+  cursor: pointer;
+}
+
+.range-container input[type=range]::-ms-thumb {
+  height: 24px;
+  width: 24px;
+  background: #fff;
+  border-radius: 50%;
+  border: 1px solid purple;
+  margin-top: -7px;
+  cursor: pointer;
+}
+
+.search {
+  position: relative;
+  height: 50px;
+}
+
+.search .input {
+  background-color: #fff;
+  border: 0;
+  font-size: 18px;
+  padding: 15px;
+  height: 50px;
+  width: 50px;
+  transition: width 0.3s ease;
+}
+
+.search .btn {
+  background-color: #fff;
+  border: 0;
+  cursor: pointer;
+  font-size: 24px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 50px;
+  width: 50px;
+  transition: transform 0.3s ease;
+}
+
+.search .btn:focus,
+.search .input:focus {
+  outline: none;
+}
+
+.search.active .input {
+  width: 200px;
+}
+
+.search.active .btn {
+  transform: translateX(198px);
 }
 
 /* Login Page */
@@ -482,6 +616,7 @@ textarea {
 
 #login h1 a,
 .login h1 a {
+  background-image: url("../images/logos/rogers-motors-login-logo.png");
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 300px;
@@ -535,6 +670,7 @@ body.login {
   justify-content: center;
   background-size: cover;
   background-position: center center;
+  background-image: url("../images/bgs/rm-dealership-exterior.jpg");
   background-color: var(--gray-500);
   background-blend-mode: multiply;
 }
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
index 2ec1d8d..9488d5e 100644
--- a/src/scss/components/_index.scss
+++ b/src/scss/components/_index.scss
@@ -1 +1,3 @@
-@forward '../components/project-calculator';
+@forward '../components/accordion_collapse';
+@forward '../components/range_slider';
+@forward '../components/floating_search';
diff --git a/src/scss/components/_project-calculator.scss b/src/scss/components/_project-calculator.scss
deleted file mode 100644
index 4b3aee2..0000000
--- a/src/scss/components/_project-calculator.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-.project-calculator {
-  padding: 20px;
-  border: 1px solid #ced4da;
-  border-radius: 5px;
-  background-color: #f8f9fa;
-  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-
-  h2 {
-    font-size: 2.5rem;
-    font-weight: bold;
-    margin-top: 0;
-    margin-bottom: 20px;
-    color: #343a40;
-    text-align: center;
-  }
-
-  div {
-    margin-bottom: 15px;
-  }
-
-  label {
-    margin-bottom: 5px;
-    color: #495057;
-  }
-
-  select,
-  input[type='number'] {
-    box-sizing: border-box; /* Include padding and border in element's total width */
-    width: 100%;
-    padding: 10px;
-    border: 1px solid #ced4da;
-    border-radius: 4px;
-  }
-
-  button {
-    padding: 10px 20px;
-    margin-bottom: 10px;
-    background-color: #007bff;
-    color: #fff;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    width: 100%;
-  }
-
-  button:hover {
-    background-color: #0056b3;
-  }
-
-  .total-price {
-    font-size: 1.2rem;
-    font-weight: bold;
-    color: #007bff;
-    text-align: center;
-  }
-}
diff --git a/src/scss/styles.scss b/src/scss/styles.scss
index a15661e..c1592cc 100644
--- a/src/scss/styles.scss
+++ b/src/scss/styles.scss
@@ -3,4 +3,4 @@
 @use 'layout';
 @use 'pages';
 @use 'components';
-@use 'vendors';
\ No newline at end of file
+@use 'vendors';
diff --git a/src/scss/vendors/_wordpress.scss b/src/scss/vendors/_wordpress.scss
index ac51424..68e6b63 100644
--- a/src/scss/vendors/_wordpress.scss
+++ b/src/scss/vendors/_wordpress.scss
@@ -41,7 +41,7 @@
 
 #login h1 a,
 .login h1 a {
-  // background-image: url('');
+  background-image: url('../images/logos/rogers-motors-login-logo.png');
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 300px;
@@ -95,7 +95,7 @@ body.login {
   justify-content: center;
   background-size: cover;
   background-position: center center;
-  // background-image: url('');
+  background-image: url('../images/bgs/rm-dealership-exterior.jpg');
   background-color: var(--gray-500);
   background-blend-mode: multiply;
 }