homes

src/app/home/home.component.scss

@@ -1,104 +1,131 @@
-@import '../../styles.scss';
-#home-screen{
+.flex-row {
+  flex-direction: row;
+  display: flex;
+  width: 100%;
+}
+.page-container {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
   background-color: #b4e8fd;
-  .main-container {
-    background: #b4e8fd;
-    padding: 0%;
-    margin-bottom: 20%;
-    overflow-x: clip;
-    .content {
-      background: $clr-grey;
-      width: 100%;
-      @include flex-box(column, center, center);
-      .clear-content{
-        width: 90%;
-        align-items: left;
-  
-        &.margin-top5{
-          margin-top: 5%;
-         }
-      }
-      .card {
-        width: 100%;
-        background: #b4e8fd;
-        float: left;
-  
-        ul{
-          display: flex;  
-          height: auto;
-          flex-wrap: wrap;
-          padding-top: 10%;
-  
-          li {
-               @include flex-box(row, center, right);
-              margin-bottom:10%;
-              flex: 1 1 50%;
-              .icon{
-                  width: 150px;
-                  height: 150px;
-              }
-          }
-        }
-        
-        .input-left-align {
-          padding: 1%;
-          margin-bottom: 1%;
-          .input-wrapper {
-            margin: 2% 3%;
-            width: 94%;
-            .clickIcon {
-              position: absolute;
-              right: 2%;
-            }
-          }
-        }
-        &.card-noborder {
-          border-radius: 0px;
-          box-shadow: 0px 2px 8px rgba(96, 97, 112, 0.16);
-        }
-      }
-  
-      .onRoadPriceContainer{
-        width: 98%;
-      }
-  
-      .card-accordion {
-        @include flex-box(row, left, center);
-        font-size: 1rem;
-        margin: 3%;
-        .icon-align {
-          flex: 1;
-          justify-content: flex-end;
-          font-size: 1.875em;
-        }
-      }
-      .card > div {
-        padding: 5%;
-        flex: 9;
-      }
-    }
-    button {
-      margin: 5% 0%;
-      width: 90%;
-      box-sizing: border-box;
-    }
-    .bottom-section {
-      @include flex-box(column, center, center);
-      padding: 5% 5% 7% 5%;
-      .details {
-        color: $clr-grey-noresults;
-        .contact {
-          color: $clr-blue;
-        }
-      }
-      .disclaimer {
-        color: $clr-grey-light;
-        text-align: center;
-      }
-      p {
-        padding: 3%;
-      }
-    }
-  }
-}
-
+}
+.font-body-xsmall-bold {
+  font-size: 0.812rem;
+  line-height: 1.125rem;
+  letter-spacing: 1px;
+  font-family: "Raleway VariableFont";
+  text-transform: uppercase;
+}
+.title {
+  text-align: center;
+  margin: 2%;
+  color: #0b5fa4;
+}
+#home-screen {
+  background-color: #b4e8fd;
+}
+.main-container {
+  background: #b4e8fd;
+  padding: 0%;
+  margin-bottom: 20%;
+  overflow-x: clip;
+}
+.main-container .content {
+  background: #707070;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.main-container .content .clear-content {
+  width: 90%;
+  align-items: left;
+}
+.main-container .content .clear-content.margin-top5 {
+  margin-top: 5%;
+}
+.main-container .content .card {
+  width: 100%;
+  background: #b4e8fd;
+  float: left;
+}
+.main-container .content .card ul {
+  display: flex;
+  height: auto;
+  flex-wrap: wrap;
+  padding-top: 10%;
+}
+.main-container .content .card ul li {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: right;
+  margin-bottom: 10%;
+  flex: 1 1 50%;
+}
+.main-container .content .card ul li .icon {
+  width: 150px;
+  height: 150px;
+}
+.main-container .content .card .input-left-align {
+  padding: 1%;
+  margin-bottom: 1%;
+}
+.main-container .content .card .input-left-align .input-wrapper {
+  margin: 2% 3%;
+  width: 94%;
+}
+.main-container .content .card .input-left-align .input-wrapper .clickIcon {
+  position: absolute;
+  right: 2%;
+}
+.main-container .content .card.card-noborder {
+  border-radius: 0px;
+  box-shadow: 0px 2px 8px rgba(96, 97, 112, 0.16);
+}
+.main-container .content .onRoadPriceContainer {
+  width: 98%;
+}
+.main-container .content .card-accordion {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
+  font-size: 1rem;
+  margin: 3%;
+}
+.main-container .content .card-accordion .icon-align {
+  flex: 1;
+  justify-content: flex-end;
+  font-size: 1.875em;
+}
+.main-container .content .card > div {
+  padding: 5%;
+  flex: 9;
+}
+.main-container button {
+  margin: 5% 0%;
+  width: 90%;
+  box-sizing: border-box;
+}
+.main-container .bottom-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 5% 5% 7% 5%;
+}
+.main-container .bottom-section .details {
+  color: #5d5d5d;
+}
+.main-container .bottom-section .details .contact {
+  color: #006ad0;
+}
+.main-container .bottom-section .disclaimer {
+  color: #5d5d5d;
+  text-align: center;
+}
+.main-container .bottom-section p {
+  padding: 3%;
+}

src/app/odpnr/odpnr.component.scss

@@ -23,7 +23,7 @@
       min-height: 250px;
       .user-input{
         border-radius: 10px;
-        border: 2px solid $clr-grey;
+        border: 2px solid #707070;
       }
       
       ul{
@@ -148,13 +148,13 @@
     @include flex-box(column, center, center);
     padding: 5% 5% 7% 5%;
     .details {
-      color: $clr-grey-noresults;
+      color: #5d5d5d;
       .contact {
-        color: $clr-blue;
+        color: #006ad0;
       }
     }
     .disclaimer {
-      color: $clr-grey-light;
+      color: #5d5d5d;
       text-align: center;
     }
     p {

src/styles/fonts.scss

@@ -149,7 +149,7 @@
 }
 
 .text-grey-noresults{
-    color: $clr-grey-noresults;
+    color: #5d5d5d;
     text-align: center;
     @include font-body-common;
 }

src/styles/form-inputs.scss

@@ -27,7 +27,7 @@ select {
   appearance: none;
 
   .search {
-    background: $clr-grey;
+    background: #707070;
     border: none;
     border-radius: 5px;
   }
@@ -41,7 +41,7 @@ select {
 input[type='radio'] {
   height: 20px;
   width: 20px;
-  background: $clr-grey;
+  background: #707070;
   border: 1px solid #e0e0e0;
 }
 
@@ -56,7 +56,7 @@ input[type='checkbox'] {
     width: 18px;
     height: 18px;
     border-radius: 20%;
-    border: 2px solid $clr-blue;
+    border: 2px solid #006ad0;
     flex-shrink: 0;
   }
   &:disabled{
@@ -98,7 +98,7 @@ input[type='checkbox'] {
     max-width: auto;
     position: absolute;
     cursor: pointer;
-    color: $clr-blue;
+    color: #006ad0;
     background-repeat: no-repeat;
   }
 }
@@ -135,8 +135,8 @@ button {
 
   &.modify-state {
     background: $clr-white;
-    border: 1px solid $clr-blue;
-    color: $clr-blue;
+    border: 1px solid #006ad0;
+    color: #006ad0;
   }
 
   &:disabled {
@@ -156,7 +156,7 @@ button {
 
 //radio buttons
 .form-radio {
-  background: $clr-grey;
+  background: #707070;
   justify-content: space-between;
   display: flex;
 }