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;
+}
+.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 {
+}
+.main-container {
   background: #b4e8fd;
   padding: 0%;
   margin-bottom: 20%;
   overflow-x: clip;
-    .content {
-      background: $clr-grey;
+}
+.main-container .content {
+  background: #707070;
   width: 100%;
-      @include flex-box(column, center, center);
-      .clear-content{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.main-container .content .clear-content {
   width: 90%;
   align-items: left;
-  
-        &.margin-top5{
+}
+.main-container .content .clear-content.margin-top5 {
   margin-top: 5%;
-         }
-      }
-      .card {
+}
+.main-container .content .card {
   width: 100%;
   background: #b4e8fd;
   float: left;
-  
-        ul{
+}
+.main-container .content .card ul {
   display: flex;
   height: auto;
   flex-wrap: wrap;
   padding-top: 10%;
-  
-          li {
-               @include flex-box(row, center, right);
-              margin-bottom: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%;
-              .icon{
+}
+.main-container .content .card ul li .icon {
   width: 150px;
   height: 150px;
-              }
-          }
-        }
-        
-        .input-left-align {
+}
+.main-container .content .card .input-left-align {
   padding: 1%;
   margin-bottom: 1%;
-          .input-wrapper {
+}
+.main-container .content .card .input-left-align .input-wrapper {
   margin: 2% 3%;
   width: 94%;
-            .clickIcon {
+}
+.main-container .content .card .input-left-align .input-wrapper .clickIcon {
   position: absolute;
   right: 2%;
-            }
-          }
-        }
-        &.card-noborder {
+}
+.main-container .content .card.card-noborder {
   border-radius: 0px;
   box-shadow: 0px 2px 8px rgba(96, 97, 112, 0.16);
-        }
-      }
-  
-      .onRoadPriceContainer{
+}
+.main-container .content .onRoadPriceContainer {
   width: 98%;
-      }
-  
-      .card-accordion {
-        @include flex-box(row, left, center);
+}
+.main-container .content .card-accordion {
+  display: flex;
+  flex-direction: row;
+  justify-content: left;
+  align-items: center;
   font-size: 1rem;
   margin: 3%;
-        .icon-align {
+}
+.main-container .content .card-accordion .icon-align {
   flex: 1;
   justify-content: flex-end;
   font-size: 1.875em;
-        }
-      }
-      .card > div {
+}
+.main-container .content .card > div {
   padding: 5%;
   flex: 9;
-      }
-    }
-    button {
+}
+.main-container button {
   margin: 5% 0%;
   width: 90%;
   box-sizing: border-box;
-    }
-    .bottom-section {
-      @include flex-box(column, center, center);
+}
+.main-container .bottom-section {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
   padding: 5% 5% 7% 5%;
-      .details {
-        color: $clr-grey-noresults;
-        .contact {
-          color: $clr-blue;
-        }
-      }
-      .disclaimer {
-        color: $clr-grey-light;
+}
+.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;
-      }
-      p {
+}
+.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;
 }