better ui design

mahdi-kheibari · Sep 9, 2021 · dd6b6b4 · dd6b6b4
1 parent dd19aff
commit dd6b6b4
Show file tree

Hide file tree

Showing 46 changed files with 1,258 additions and 856 deletions.
diff --git a/assets/css/aside.css b/assets/css/aside.css
@@ -6,23 +6,15 @@
     border-radius: 8px;
   }
   .active-category {
-      color: rgba(0, 0, 0, .85) !important;
-      background-color: #00dc82 !important;
+      background-color: rgb(240, 255, 244) !important;
   }
   .btn-toggle {
     display: inline-flex;
     align-items: center;
     padding: .25rem .5rem;
-    font-weight: 600;
-    color: rgba(0, 0, 0, .65);
     background-color: transparent;
     border: 0;
   }
-  .btn-toggle:hover,
-  .btn-toggle:focus {
-    color: rgba(0, 0, 0, .85);
-    background-color: #d2f4ea;
-  }
 
   .btn-toggle[aria-expanded="true"] {
     color: rgba(0, 0, 0, .85);
@@ -33,13 +25,9 @@
     padding: .1875rem .5rem;
     margin-top: .125rem;
     margin-left: 1.25rem;
-    text-decoration: none;
   }
   .sub-category{
       margin-left: 1.75rem !important;
   }
-  .btn-toggle-nav a:hover{
-    background-color: #d2f4ea;
-  }
 
-  .fw-semibold { font-weight: 600; }
+.fw-semibold { font-weight: 600; }
diff --git a/assets/css/swiper.css b/assets/css/swiper.css
@@ -1,8 +1,10 @@
 /* for swiper */
 
 .swiper-container-2 {
+    padding: 6px 4px;
     overflow: hidden;
     position: absolute;
+    margin-bottom: 11px;
 }
 
 .swiper-slide {
@@ -23,16 +25,18 @@
     -webkit-align-items: center;
     align-items: center;
 }
-.swiper-slide a{
-    text-decoration: none !important;
-}
 .swiper-slide img {
     display: block;
     width: 100%;
     height: 100%;
-    object-fit: contain;
+    object-fit: cover;
 }
 .swiper-container-2 .swiper-slide img{
     object-fit: contain;
-    height: 65%;
+}
+.swiper-button-next,swiper-button-prev{
+    font-size: 14px !important;
+}
+.swiper-button-prev.swiper-button-disabled, .swiper-button-next.swiper-button-disabled{
+    pointer-events: auto !important;
 }
diff --git a/assets/scss/_variable.scss b/assets/scss/_variable.scss
@@ -0,0 +1,66 @@
+$primary:#00C58E;
+$primary-light:#00e0a1;
+$secondary:#2f495e;
+$success:#22C157;
+$info:#176AEF;
+$warning:#E8D912;
+$danger:#f0403a;
+$light:#edf2f7;
+$dark:#2c3e50;
+$black:#000;
+$white:#fff;
+$gray:#a1a3a8;
+$body-color:$secondary;
+
+$theme-colors: (
+    "primary": $primary,
+    "primary-light":$primary-light,
+    "secondary": $secondary,
+    "success": $success,
+    "info": $info,
+    "warning": $warning,
+    "danger": $danger,
+    "light": $light,
+    "dark": $dark,
+    "black":$black,
+    "white":$white,
+    "gray":$gray
+);
+
+$font-weight-lighter:         lighter;
+$font-weight-light:           300;
+$font-weight-normal:          400;
+$font-weight-bold:            500;
+$font-weight-bolder:          700;
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl:1400px
+);
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl:1320px
+);
+$spacer: 1rem;
+$spacers: ();
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),//4px
+    2: ($spacer * .5),//8px
+    3: $spacer,//16px
+    4: ($spacer * 1.5),//24px
+    5: ($spacer * 3),//48px
+    "section": ($spacer * 2.3125),//37px between section
+    "related": $spacer //16px between related sections
+  ),
+  $spacers
+);
+$grid-gutter-width: $spacer;
diff --git a/assets/scss/custom.scss b/assets/scss/custom.scss
@@ -0,0 +1,127 @@
+@import './variable';
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
+body{
+    overflow-x: hidden !important;
+    font-family: 'Roboto', sans-serif;
+    background-color: $light;
+}
+// .font-12{
+//     font-size: .75rem;//for 
+// }
+.font-14{
+    font-size: .875rem !important;//for sub paragraph
+}
+.font-16{
+    font-size: 1rem !important;//like h4, for paragraph
+}
+.font-18{
+    font-size: 1.125rem !important;//like h3&for bold text on p,btn,sub title
+}
+.font-20{
+    font-size: 1.25rem !important;//primary btn,title
+}
+.font-24{
+    font-size: 1.5rem !important;//like h2
+}
+.font-32{
+    font-size: 32rem !important;//like h1
+}
+a{
+    color: $secondary !important;
+    text-decoration: none;
+    &:hover{
+        text-decoration: none;
+    }
+}
+.text-decoration-line-through{
+    text-decoration: line-through;
+}
+.btn-primary{
+    font-size: 16px !important;
+    &:hover{
+        background-color: $primary-light !important;
+        color:$white !important;
+        border-color: $primary !important;
+    }
+}
+// for appHeader
+@mixin hoverCart {
+    color:$primary !important;
+    border:1px solid $primary !important;
+    border-radius: 4px !important;
+}
+@mixin activeNavItem {
+    color:$primary !important;
+        svg{
+            color:$primary !important;
+        }
+    border-bottom: 1px solid $primary;
+}
+.form-control:focus{
+    box-shadow: none;
+}
+.cart-icon,.auth-icon,.discount-btn{
+    border:1px solid $white !important;
+    padding: 0 8px !important;
+    transition: all 0.5s linear;
+    &:hover{
+        @include hoverCart;
+    }
+}
+.shop-cart:hover{
+    .cart-icon{
+        @include hoverCart;
+    }
+}
+
+a.bg-white:hover, a.bg-white:focus, button.bg-white:hover, button.bg-white:focus{
+    background-color: $white !important;
+}
+.second-navbar{
+    .btn{
+        border: none;
+        border-radius: 0 !important;
+        border-bottom: 1px solid $white;
+        &:hover,&:active,&:focus{
+            background-color: $white !important;
+            box-shadow: none;
+        }
+        &:hover{
+            @include activeNavItem;
+        }
+    }
+}
+.active-navbar-item{
+    .btn{
+        @include activeNavItem;
+    }
+}
+.btn-toggle:hover,
+.btn-toggle:focus {
+    color: $primary !important;
+}
+.btn-toggle-nav a:hover{
+    color: $primary !important;
+}
+
+// for index page
+.swiper-pagination-bullet-active {
+    background: $primary !important;
+}
+//for category component
+.category{
+    a{
+        &:hover{
+            background-color: $light !important;
+            color: $primary !important;
+        }
+    }
+}
+//for breadcrumb
+.breadcrumb{
+    a{
+        &:hover{
+            color: $primary !important;
+        }
+    }
+}
diff --git a/assets/scss/theme.scss b/assets/scss/theme.scss
@@ -0,0 +1,7 @@
+// variables
+@import './variable';
+// import bootstrap scss 
+@import '~bootstrap/scss/bootstrap.scss';
+@import '~bootstrap-vue/src/index.scss';
+// custom scss
+//@import './custom.scss';
diff --git a/components/NuxtLogo.vue b/components/NuxtLogo.vue
@@ -1,11 +1,11 @@
 <template>
-  <svg class="nuxt-logo" viewBox="0 0 45 30" fill="none" xmlns="https://www.w3.org/2000/svg">
-    <path d="M24.7203 29.704H41.1008C41.6211 29.7041 42.1322 29.5669 42.5828 29.3061C43.0334 29.0454 43.4075 28.6704 43.6675 28.2188C43.9275 27.7672 44.0643 27.2549 44.0641 26.7335C44.0639 26.2121 43.9266 25.6999 43.6662 25.2485L32.6655 6.15312C32.4055 5.70162 32.0315 5.32667 31.581 5.06598C31.1305 4.8053 30.6195 4.66805 30.0994 4.66805C29.5792 4.66805 29.0682 4.8053 28.6177 5.06598C28.1672 5.32667 27.7932 5.70162 27.5332 6.15312L24.7203 11.039L19.2208 1.48485C18.9606 1.03338 18.5864 0.658493 18.1358 0.397853C17.6852 0.137213 17.1741 0 16.6538 0C16.1336 0 15.6225 0.137213 15.1719 0.397853C14.7213 0.658493 14.3471 1.03338 14.0868 1.48485L0.397874 25.2485C0.137452 25.6999 0.000226653 26.2121 2.8053e-07 26.7335C-0.000226092 27.2549 0.136554 27.7672 0.396584 28.2188C0.656614 28.6704 1.03072 29.0454 1.48129 29.3061C1.93185 29.5669 2.44298 29.7041 2.96326 29.704H13.2456C17.3195 29.704 20.3239 27.9106 22.3912 24.4118L27.4102 15.7008L30.0986 11.039L38.1667 25.0422H27.4102L24.7203 29.704ZM13.0779 25.0374L5.9022 25.0358L16.6586 6.36589L22.0257 15.7008L18.4322 21.9401C17.0593 24.2103 15.4996 25.0374 13.0779 25.0374Z" fill="#00DC82" />
+  <svg class="nuxt-logo" fill="none" viewBox="0 0 400 298" xmlns="https://www.w3.org/2000/svg">
+    <g fill="none" fill-rule="nonzero"><path fill="#00C58E" d="M227.92099 82.07407l-13.6889 23.7037-46.8148-81.08641L23.7037 273.58025h97.3037c0 13.0912 10.61252 23.7037 23.70371 23.7037H23.70371c-8.46771 0-16.29145-4.52017-20.5246-11.85382-4.23315-7.33366-4.23272-16.36849.00114-23.70174L146.89383 12.83951c4.23415-7.33433 12.0596-11.85252 20.5284-11.85252 8.46878 0 16.29423 4.51819 20.52839 11.85252l39.97037 69.23456z"/><path fill="#2F495E" d="M331.6642 261.7284l-90.05432-155.95062-13.6889-23.7037-13.68888 23.7037-90.04445 155.95061c-4.23385 7.33325-4.23428 16.36808-.00113 23.70174 4.23314 7.33365 12.05689 11.85382 20.5246 11.85382h166.4c8.46946 0 16.29644-4.51525 20.532-11.84955 4.23555-7.3343 4.23606-16.37123.00132-23.706h.01976zM144.7111 273.58024L227.921 129.48148l83.19012 144.09877h-166.4z"/><path fill="#108775" d="M396.04938 285.4321c-4.23344 7.33254-12.05656 11.85185-20.52345 11.85185H311.1111c13.0912 0 23.7037-10.6125 23.7037-23.7037h40.66173L260.09877 73.74815l-18.4889 32.02963-13.68888-23.7037L239.5753 61.8963c4.23416-7.33433 12.0596-11.85252 20.5284-11.85252 8.46879 0 16.29423 4.51819 20.52839 11.85252l115.41728 199.8321c4.23426 7.33395 4.23426 16.36975 0 23.7037z"/></g>
   </svg>
 </template>
 
 <style>
-.nuxt-logo {
+/* .nuxt-logo {
   height: 180px;
-}
+} */
 </style>
diff --git a/components/aside/asideLayout.vue b/components/aside/asideLayout.vue
@@ -1,10 +1,15 @@
 <template>
-    <aside class="category-aside flex-shrink-0 p-3 bg-white">
+    <aside class="category-aside position-sticky flex-shrink-0 p-3 bg-white">
           <div class="fs-5 fw-semibold pb-3 mb-3 border-bottom">Result Categories</div>
           <ul class="list-unstyled ps-0">
             <slot name="beforeDivider"></slot>
             <li class="border-top my-3"></li>
             <slot name="afterDivider"></slot>
           </ul>
-        </aside>
-</template>
+    </aside>
+</template>
+<style lang="scss" scoped>
+.category-aside{
+    top:120px ;
+}
+</style>
diff --git a/components/aside/collapseItem.vue b/components/aside/collapseItem.vue
@@ -1,8 +1,8 @@
 <template>
   <li class="mb-1">
     <b-button
-      variant="light"
-      class="btn-toggle"
+      variant="white"
+      class="btn-toggle text-secondary"
       :v-b-toggle="id"
       @click="collapse = !collapse"
     >
@@ -15,7 +15,7 @@
           <nuxt-link
             :to="i.route"
             exact
-            exact-active-class="active-category"
+            exact-active-class="active-category text-primary"
             class="link-dark rounded"
           >
             {{ key }}

diff --git a/components/aside/item.vue b/components/aside/item.vue
@@ -4,7 +4,7 @@
       :to="route"
       class="btn btn-toggle align-items-center rounded"
       exact
-      exact-active-class="active-category"
+      exact-active-class="active-category text-primary"
     >
       {{ name }}
     </nuxt-link>

diff --git a/components/breadcrumb.vue b/components/breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="d-flex mb-1">
+  <div class="d-flex mb-1 breadcrumb bg-light">
     <nuxt-link to="/" exact>
         Home
     </nuxt-link>
@@ -15,7 +15,7 @@
         {{subCrumbName}}
     </nuxt-link>
     <span v-if="subCrumb || subCrumbSingle" class="breadcrumb-divider">/</span>
-    <span class="text-secondary">
+    <span class="text-muted">
       {{ activeText }}
     </span>
   </div>