ethics

src/app/ethics/ethics.component.html

@@ -2,7 +2,7 @@
     <div class="header_section">
         <img class="logo" src="assets/images/bajaj_header.png"/>
     </div>
-    <div class="align-middle">
+    <div class="align-middle title">
         <p class="txt-content font-body-xsmall-bold">{{languageConstants.codeOfConduct}}</p>
     </div>
     <div class="flex-row align-middle seperator">

src/app/ethics/ethics.component.scss

@@ -1,77 +1,136 @@
-@import '../../styles.scss';
-#notices{
-    .header_section{
-        margin: 0 auto;
-        padding: 10%;
-        .logo{
-            width: 80%;
-            height: 80%;
-        }
-    }
-    .align-middle{
-        width: 85%;
-        margin: 0% auto;
-        text-align: center;
-        color: $clr-sappire;
-        .font-body-xsmall-bold{
-            text-transform: none;
-        }
-        // input[type=text]{
-        //     background-color: #FFFFFFA6;
-        // }
-        .customDropDown{
-            background-color: #FFFFFFA6;
-            width: 100%;
-            height: 4rem;
-            // border-top-right-radius: 1.3rem;
-            // border-bottom-right-radius: 1.3rem;
-            border-radius: 0px 1.2rem 1.2rem 0px;
-            font-size: 1.2rem;
-            margin: 0;
-            text-align: left;
-            padding: 5% 2%;
-            word-wrap: break-word;
-            word-break: keep-all;
-            color: #0B5FA4;
-            font-weight: bold;
-        }
-        .medium-font{
-            font-size: 1rem !important;
-        }
-        .down-arrow{
-            padding: 5% 0%;
-            left: -8%;
-            position: relative;
-        }
-    }
-    .dropDownClass{
-        background-color: #FFFFFFA6;
-        color: #0B5FA4;
-        padding: 5%;
-        li{
-            padding-bottom: 2%;
-            list-style-type:disc;
-            padding-left: 3%;
-        }
-        .font-body-xsmall{
-            text-transform:none;
-        }
-    }
-    .seperator{
-        margin-top: 2%;
-    }
-    .imageDropDown{
-        width: 80%;
-        margin:0% 7%;
-        .transition-image{
-            width: 100%;
-            height: 100%;
-            background: red;
-            transition: height 2s;
-            -webkit-transition: opacity 1s ease-in-out;
-            -moz-transition: opacity 1s ease-in-out;
-            -o-transition: opacity 1s ease-in-out;
-            transition: opacity 1s ease-in-out;
-        }
-    }
+.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;
+}
+.flex-row {
+    flex-direction: row;
+    display: flex;
+    width: 100%;
+}
+button {
+    border-radius: 10px;
+    font-size: 0.938rem;
+    width: 98%;
+    background: #0b5fa4 0 0 no-repeat padding-box !important;
+    margin: 2%;
+}
+.header_section {
+    margin: 0 auto;
+    padding: 10%;
+}
+.header_section .logo {
+    width: 80%;
+    height: 80%;
+}
+.align-middle {
+    width: 85%;
+    margin: 0% auto;
+    text-align: center;
+    color: #0b5fa4;
+}
+.align-middle .font-body-xsmall-bold {
+    text-transform: none;
+}
+.align-middle .customDropDown {
+    background-color: #fff;
+    width: 100%;
+    height: 4rem;
+    border-radius: 0px 1.2rem 1.2rem 0px;
+    font-size: 1.2rem;
+    margin: 0;
+    text-align: left;
+    padding: 5% 2%;
+    word-wrap: break-word;
+    word-break: keep-all;
+    color: #0b5fa4;
+    font-weight: bold;
+}
+.align-middle .medium-font {
+    font-size: 1rem !important;
+}
+.align-middle .down-arrow {
+    padding: 5% 0%;
+    left: -8%;
+    position: relative;
+}
+.dropDownClass {
+    background-color: #fff;
+    color: #0b5fa4;
+    padding: 5%;
+}
+.dropDownClass li {
+    padding-bottom: 2%;
+    list-style-type: disc;
+    padding-left: 3%;
+}
+.dropDownClass .font-body-xsmall {
+    text-transform: none;
+}
+.seperator {
+    margin-top: 2%;
+}
+.imageDropDown {
+    width: 80%;
+    margin: 0% 7%;
+}
+.imageDropDown .transition-image {
+    width: 100%;
+    height: 100%;
+    background: red;
+    transition: height 2s;
+    -webkit-transition: opacity 1s ease-in-out;
+    -moz-transition: opacity 1s ease-in-out;
+    -o-transition: opacity 1s ease-in-out;
+    transition: opacity 1s ease-in-out;
+}
+.title {
+    text-align: center;
+    margin:2%;
+    font-size: 1rem;
+}
+.dropdown {
+    width: 94%;
+    position: absolute;
+    z-index: 200;
+    background-color: #fff;
+    align-items: flex-start;
+    justify-content: flex-start;
+    margin-left: 2%;
+    border: 1px solid;
+}
+.dropdownParent {
+    position: absolute;
+    width: 60%;
+}
+.dropdown ul {
+    border: 1px solid #d7d7d7;
+}
+.dropdown li {
+    padding: 2% 2% 2% 3%;
+}
+.dropdown li a {
+    width: 100%;
+    display: block;
+    padding: 2% 2% 2% 3%;
+    height: 40px;
+    color: #000;
+}
+.dropdown ul > li a:hover, .dropdown ul > li a:active, .dropdown ul > li a:visited {
+    background-color: #e0e0e0;
+    color: #444;
+}
+.dropdown ul > li:last-child {
+    padding-bottom: 2%;
+}
+.dropdown .dropdownItem {
+    width: 100%;
 }

src/app/leave-status/leave-status.component.scss

@@ -20,7 +20,7 @@
         margin: auto;
     }
     .title-txt{
-        color: $clr-sappire;
+        color: #0B5FA4;
         text-align: end;
         margin: auto;
         padding-right: 1%;
@@ -38,7 +38,7 @@
         padding-right: 1%;
     }
     .leave-status{
-        color: $clr-sappire;
+        color: #0B5FA4;
         font-size: 12px;
     }
     .success{
@@ -52,7 +52,7 @@
         padding-right: 1%;
     }
     .active-status{
-        background-color: $clr-sappire;
+        background-color: #0B5FA4;
         text-align: center;
         padding-right: 1%;
     }

src/app/notices/notices.component.scss

@@ -12,7 +12,7 @@
         width: 85%;
         margin: 0% auto;
         text-align: center;
-        color: $clr-sappire;
+        color: #0B5FA4;
         // input[type=text]{
         //     background-color: #FFFFFFA6;
         // }

src/app/policies/policies.component.scss

@@ -12,7 +12,7 @@
         width: 85%;
         margin: 0% auto;
         text-align: center;
-        color: $clr-sappire;
+        color: #0B5FA4;
         .font-body-xsmall-bold{
             text-transform: none;
         }

src/styles/common.scss

@@ -125,7 +125,7 @@ label {
 }
 
 .seperator {
-  border-top: 1px solid $clr-grey-border;
+  border-top: 1px solid #e0e0e0;
   width: 100%;
   margin: 5%;
 }
@@ -170,12 +170,12 @@ label {
 }
 .dashed {
   @include marginTRBL(10%, 0%, 0%, 0%);
-  border: 1px dashed $clr-grey-border;
+  border: 1px dashed #e0e0e0;
   width: 100%;
 }
 .solid {
   @include marginTRBL(10%, 0%, 0%, 0%);
-  border: 1px solid $clr-grey-border;
+  border: 1px solid #e0e0e0;
   width: 100%;
 }
 .mix1 {
@@ -263,8 +263,8 @@ label {
 .dropdown ul > li a:hover,
 .dropdown ul > li a:active,
 .dropdown ul > li a:visited {
-  background-color: $clr-grey-border;
-  color: $clr-grey-medium;
+  background-color: #e0e0e0;
+  color:#444444;
 }
 .dropdown ul > li:last-child {
   padding-bottom: 2%;
@@ -275,7 +275,7 @@ label {
 .dashed-content {
   position: relative;
   .border-bottom-bg {
-    background: $clr-grey-border;
+    background: #e0e0e0;
     width: 100%;
     height: 5px;
     position: absolute;

src/styles/form-inputs.scss

@@ -16,9 +16,9 @@ select {
   font-family: Trade Gothic LT Com Bold;
   height: 50px;
   width: 100%;
-  color: $clr-grey-medium;
+  color:#444444;
   background: $clr-white;
-  border: 1px solid $clr-grey-border;
+  border: 1px solid #e0e0e0;
   border-radius: 5px;
   font-size: 0.87rem;
   line-height: 50px;