style: add new theme styles

alirezapiran7 · Oct 3, 2020 · 066fdd7 · 066fdd7
1 parent 0b820f3
commit 066fdd7
Show file tree

Hide file tree

Showing 20 changed files with 88 additions and 119 deletions.
diff --git a/client/app/styles/core/_account.scss b/client/app/styles/core/_account.scss
@@ -22,7 +22,7 @@
       .admin {
         padding: 5px;
         border-radius: $border-radius-default;
-        background-color: $theme-light-blue;
+        background-color: $primary-color;
         color: $white;
         font-weight: $font-weight-bold-one;
         margin-left: 10px;

diff --git a/client/app/styles/core/_brand.scss b/client/app/styles/core/_brand.scss
@@ -20,7 +20,7 @@
     }
 
     &:hover {
-      border-color: $theme-black;
+      border-color: $border-hover-color;
       -moz-transition: border-color $layout-transition-speed ease-in-out;
       -webkit-transition: border-color $layout-transition-speed ease-in-out;
       -ms-transition: border-color $layout-transition-speed ease-in-out;
@@ -30,12 +30,5 @@
     .brand-desc {
       @include text-ellipsis(2);
     }
-
-    h1 {
-      a {
-        font-size: $font-size-heading-small !important;
-        color: $red !important;
-      }
-    }
   }
 }
diff --git a/client/app/styles/core/_button.scss b/client/app/styles/core/_button.scss
@@ -78,7 +78,7 @@ button[type='reset'] {
 }
 
 .redirect-link {
-  color: $red !important;
+  color: $primary-color !important;
   font-weight: $font-weight-bold-one;
   text-transform: capitalize;
 }
@@ -128,10 +128,20 @@ button[type='reset'] {
       width: 100% !important;
     }
 
+    .btn-text {
+      margin-left: 5px;
+    }
+
     &:hover {
+      color: $white !important;
+      background-color: $btn-bg-hover !important;
+      border-color: transparent;
+      -webkit-transition: $layout-transition-speed;
+      transition: $layout-transition-speed;
+
       .bag-icon {
-        // fill: $red;
-        stroke: $red !important;
+        fill: $white;
+        stroke: $white !important;
         -webkit-transition: $layout-transition-speed;
         transition: $layout-transition-speed;
       }

diff --git a/client/app/styles/core/_cart.scss b/client/app/styles/core/_cart.scss
@@ -45,7 +45,7 @@
     overflow-y: auto;
     overflow-x: hidden;
     max-height: 100%;
-    background-color: $theme-white;
+    background-color: $white;
   }
 
   .item-box {
@@ -63,7 +63,7 @@
 
     .item-details {
       .icon-trash {
-        color: $theme-bright-red;
+        color: $font-custom-color;
         font-size: $font-size-xx-large;
         cursor: pointer;
       }
@@ -97,7 +97,6 @@
     }
 
     p {
-      // color: $red;
       font-weight: $font-weight-bold-one;
       margin-top: 12px;
     }
@@ -109,7 +108,7 @@
 
     .cart-summary {
       padding: 10px;
-      background-color: $theme-light-blue-white;
+      background-color: $theme-white;
 
       p {
         margin-bottom: 0;

diff --git a/client/app/styles/core/_checkbox.scss b/client/app/styles/core/_checkbox.scss
@@ -23,6 +23,7 @@ input[type='checkbox'] + label {
   display: block;
   position: relative;
   padding: 5px 5px 5px 30px;
+  color: $font-custom-color;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -39,7 +40,7 @@ input[type='checkbox'] + label:before {
   width: 18px;
   height: 16px;
   border: $border-default;
-  border-color: $theme-blue;
+  border-color: $primary-color;
   position: absolute;
   left: 4px;
   top: 7px;
@@ -59,7 +60,3 @@ input[type='checkbox']:checked + label:before {
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
 }
-
-// input[type='checkbox']:checked + label {
-//   color: $red;
-// }
diff --git a/client/app/styles/core/_contact.scss b/client/app/styles/core/_contact.scss
@@ -1,6 +1,5 @@
 .contact {
   h1 {
-    color: $red !important;
     text-transform: uppercase;
   }
 }
diff --git a/client/app/styles/core/_dashboard.scss b/client/app/styles/core/_dashboard.scss
@@ -11,17 +11,13 @@
     margin: 0;
     padding: 10px 0px;
     text-align: center;
-    color: $red !important;
-    border-top: $border-default;
-    border-right: $border-default;
-    border-left: $border-default;
-    border-color: $dark-border-color;
+    border: $border-primary;
+    border-bottom: none;
   }
 
   .menu-panel {
     &.collapse {
-      border-bottom: $border-default;
-      border-color: $dark-border-color;
+      border-bottom: $border-primary;
 
       &:hover {
         background-color: $theme-gray;
@@ -37,7 +33,6 @@
 
   .navbar {
     padding: 0px;
-    background-color: $white;
   }
 
   .menu-panel {
@@ -53,7 +48,7 @@
     }
 
     .btn-text {
-      font-size: $font-size-heading-medium !important;
+      font-size: $font-size-heading-xsmall !important;
       font-weight: $font-weight-bold-one;
     }
   }
@@ -64,23 +59,18 @@
     margin-bottom: 0;
 
     li {
-      border-top: $border-default;
-      border-right: $border-default;
-      border-left: $border-default;
-      border-color: $light-border-color;
-      // border-color: $dark-border-color;
+      border-top: $border-primary;
+      border-right: $border-primary;
+      border-left: $border-primary;
 
       &:hover {
-        background-color: $white;
-
         a {
           color: $font-custom-color !important;
         }
       }
 
       &:last-child {
-        border-bottom: $border-default;
-        border-color: $dark-border-color;
+        border-bottom: $border-primary;
       }
 
       a {
@@ -92,8 +82,8 @@
       }
 
       a.active-link {
-        color: $red !important;
         font-weight: $font-weight-bold-two;
+        background-color: $white;
 
         // &:hover {
         //   color: $font-hover-color !important;

diff --git a/client/app/styles/core/_footer.scss b/client/app/styles/core/_footer.scss
@@ -1,9 +1,7 @@
 // footer styles
-
 .footer {
   flex-shrink: 0;
   border-top: $border-default;
-  border-color: $light-border-color;
 }
 
 .footer-content {
@@ -18,16 +16,14 @@
 .footer-block {
   width: 100%;
   margin: 0px 15px;
-  border-right: $border-default;
-  border-color: $light-border-color;
+  border-right: $border-primary;
   padding: 20px 0px 40px;
 
   @include media-breakpoint-down(sm) {
     text-align: center;
     margin: 10px 0px;
     border-right: none;
-    border-bottom: $border-default;
-    border-color: $light-border-color;
+    border-bottom: $border-primary;
     padding: 20px 0px;
   }
 
@@ -39,20 +35,19 @@
   .block-title {
     padding-bottom: 10px;
 
-    h2 {
-      color: $red !important;
-    }
+    // h2 {
+    //   color: $secondary-color !important;
+    // }
   }
 
   .footer-link {
     padding-bottom: 4px;
 
-    // a {
-    //   &:hover {
-    //     color: $red !important;
-    //     color: $font-hover-color !important;
-    //   }
-    // }
+    a {
+      &:hover {
+        text-decoration: underline !important;
+      }
+    }
   }
 }
 

diff --git a/client/app/styles/core/_header.scss b/client/app/styles/core/_header.scss
@@ -15,8 +15,7 @@
 
 .header {
   background-color: $white;
-  border-bottom: $border-default;
-  border-color: $light-border-color;
+  border-bottom: $border-primary;
 }
 
 .fixed-mobile-header {
@@ -50,7 +49,7 @@
 
   .fa {
     cursor: pointer;
-    color: $red;
+    color: $theme-dark-gray;
     font-size: $font-size-x-huge !important;
   }
 
@@ -112,13 +111,6 @@
       }
     }
 
-    // a,
-    // span {
-    //   &:hover {
-    //     color: $red !important;
-    //   }
-    // }
-
     a,
     span {
       &:hover {
@@ -138,7 +130,7 @@
       .nav-link {
         .dropdown-caret {
           font-size: $font-size-x-small !important;
-          color: $font-light-color;
+          color: $theme-dark-gray;
           margin-left: 5px;
           -webkit-transition: $layout-transition-speed;
           transition: $layout-transition-speed;
@@ -200,17 +192,13 @@
     }
 
     .bars-icon {
-      // display: block;
-      // height: 100%;
-
       @include media-breakpoint-down(sm) {
         display: none;
       }
     }
 
     h1 {
       margin: 0px;
-      // color: $red !important;
       color: $font-custom-color !important;
       @include media-breakpoint-up(md) {
         margin-left: 15px;

diff --git a/client/app/styles/core/_input.scss b/client/app/styles/core/_input.scss
@@ -12,8 +12,8 @@ input[type='password'] {
   &:focus {
     outline: none;
     color: $font-focus-color;
-    border-color: $theme-light-blue !important;
-    // box-shadow: $box-shadow;
+    border-color: $border-focus-color !important;
+    box-shadow: none;
   }
 
   &:disabled {
@@ -70,7 +70,7 @@ input[type='password'] {
 
   label {
     margin-bottom: 5px;
-    color: $theme-blue;
+    color: $font-custom-color;
     font-size: $font-size-large;
   }
 }
@@ -99,7 +99,7 @@ textarea {
   &:focus {
     outline: none;
     color: $font-focus-color;
-    border-color: $theme-light-blue !important;
+    border-color: $border-focus-color !important;
     // box-shadow: $box-shadow;
   }
 }

diff --git a/client/app/styles/core/_login.scss b/client/app/styles/core/_login.scss
@@ -62,8 +62,7 @@
   margin-top: 15px;
   width: 300px;
   max-width: 350px;
-  border: $border-default;
-  border-color: $light-border-color;
+  border: $border-primary;
   border-radius: $border-radius-default;
   @include media-breakpoint-down(sm) {
     width: 100%;

diff --git a/client/app/styles/core/_menu.scss b/client/app/styles/core/_menu.scss
@@ -67,7 +67,7 @@
           transition: $layout-transition-speed;
 
           a {
-            color: $red !important;
+            color: $primary-color !important;
           }
         }
 
@@ -82,8 +82,8 @@
 
         a.active-link {
           font-weight: $font-weight-bold-two;
-          color: $red !important;
-          border-color: $red;
+          color: $primary-color !important;
+          border-color: $primary-color;
           -webkit-transition: border-color ease-in $layout-transition-speed;
           transition: border-color ease-in $layout-transition-speed;
           background-color: $white;

diff --git a/client/app/styles/core/_merchant.scss b/client/app/styles/core/_merchant.scss
@@ -1,12 +1,5 @@
 .sell {
   h1 {
-    color: $red !important;
     text-transform: uppercase;
   }
 }
-
-// .merchant-dashboard {
-//   .table-section {
-//     margin: 20px 0px;
-//   }
-// }