rate & icon

resources/js/Global/components/Blocks/Info.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="info-block" :class='direction'>
-        <div class="Label"><v-icon>WMi-{{icon}}</v-icon> {{ label }}  </div>
+        <div class="Label"><v-icon v-if="icon">WMi-{{icon}}</v-icon> {{ label }}  </div>
         <div class="Value" :class='valueClass' v-html="value"></div>
     </div>
 </template>
@@ -8,7 +8,7 @@
 <script>
 export default {
     props: {
-        icon:           { default: 'check' },
+        icon:           String,
         label:          { default: " عنوان " },
         value:          { default: "" },
         direction:      { default: '' },
@@ -26,7 +26,7 @@ export default {
     .info-block.LTR {
         text-align: left;
         direction: ltr;
-        font-family: "BYekan-Edited",'Montserrat-Regular' !important;
+        font-family: 'Montserrat-Regular' !important;
         border-right: 0px;
         border-left: 1px solid #dcdcdc;
     }
@@ -37,6 +37,7 @@ export default {
     .info-block .Value {
         color: #000;
         font-size: 16px;
+        font-family: 'iranyekan-regular-en-num';
     }
     .info-block .v-icon {
         margin-top: -5px;

resources/js/Global/components/Blocks/Name.vue

@@ -7,6 +7,7 @@
             <!------------------------Conditional::Begin----------------------->
             <div v-if="name_en" class="En"> {{ name_en }}  </div>
             <div v-if="date" class="Fa Thin date"> {{ date }}  </div>
+            <div v-if="label" class="Fa Thin label"><v-icon v-if="labelIcon">WMi-{{ labelIcon }}</v-icon> {{ label }}  </div>
             <div v-if="$slots.customText">
                 <slot name="customText"></slot>
             </div>
@@ -23,6 +24,8 @@
             name_fa:        { default: 'نام فارسی' },
             name_en:        String,
             date:           String,
+            label:          String,
+            labelIcon:      String,
             colorBox:       String,
         },
     };
@@ -58,6 +61,9 @@
     .name-block .text .date {
         font-size: 12px;
     }
+    .name-block .text .label {
+        font-size: 14px;
+    }
 
     .name-block.en-origin .text .En {
         font-size: 13px;
@@ -75,9 +81,11 @@
     }
     .name-block.md .Fa {
         font-size: 18px;
+        line-height: 28px;
     }
     .name-block.md .En {
         font-size: 10px;
+        line-height: 18px;
         letter-spacing: 3px;
         text-transform: uppercase;
         margin-right: -3px;
@@ -94,9 +102,11 @@
     }
     .name-block.sm .Fa {
         font-size: 16px;
+        line-height: 26px;
     }
     .name-block.sm .En {
         font-size: 10px;
+        line-height: 18px;
         letter-spacing: 3px;
         text-transform: uppercase;
         margin-right: -3px;
@@ -106,7 +116,7 @@
     }
 
     /*----------------------------------------------------*/
-    /*                      Size MD                       */
+    /*                      Size xl                       */
     /*----------------------------------------------------*/
     .name-block.xl {
         text-align:right;
@@ -114,9 +124,11 @@
     }
     .name-block.xl .Fa {
         font-size: 28px;
+        line-height: 38px;
     }
     .name-block.xl .En {
         font-size: 16px;
+        line-height: 24px;
         letter-spacing: 5px;
         text-transform: uppercase;
         color: #9a9a9a;

resources/js/Global/components/Blocks/Number.vue

@@ -60,11 +60,16 @@
         font-size: 50px;
         line-height: 35px;
     }
-    /*--------------md------------------------------------*/
+    /*--------------sm------------------------------------*/
     .we-number.sm .number {
         font-size: 35px;
         line-height: 30px;
     }
+    /*--------------xl------------------------------------*/
+    .we-number.xxl .number {
+        font-size: 80px;
+        line-height: 65px;
+    }
 
     /*----------------------------------------------------*/
     /*                Colors                              */

resources/js/Global/components/Blocks/Price.vue

@@ -118,6 +118,12 @@
         .we-price.bg-#{$color} {
             background-color: $value;
         }
+        .we-price.theme-#{$color} .discount .percent {
+            background-color: $value;
+        }
+        .we-price.theme-#{$color} .number-original {
+            color: $value;
+        }
     }
 
 

resources/js/Global/components/Blocks/Rate.vue

@@ -0,0 +1,59 @@
+<template>
+    <div :class="`rates ${theme} LTR`">
+        <v-icon color="yellow"> WMi-star</v-icon>
+        <v-icon color="yellow"> WMi-star</v-icon>
+        <v-icon color="yellow"> WMi-star</v-icon>
+        <v-icon color="yellow"> WMi-star</v-icon>
+        <v-icon color="yellow"> WMi-star-half-alt</v-icon>
+        <div class="number En Bold yellow--text"> {{ rate }}% </div>
+        <div class="total Fa Thin"> بر اساس <span class="En Bold"> {{ total_rates }} </span> بررسی </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        props: {
+            theme:              { default: '' },
+            rate:               { default: '' },
+            total_rates:        { default: 'آیتم' },
+        },
+    };
+</script>
+<style lang="scss" scoped>
+    .rates {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 3px;
+    }
+    .rates .number {
+        margin-left: 5px;
+        margin-top: 3px;
+        font-size: 18px;
+        line-height: 26px;
+    }
+    .rates .total {
+        color: #777;
+        font-size: 14px;
+        margin-left: 15px;
+        border-left: 1px solid #000;
+        padding-left: 15px;
+    }
+
+    /*----------------------------------------------------*/
+    /*                Colors                              */
+    /*----------------------------------------------------*/
+    @import "resources/js/Global/scss/_vars.scss";
+    @each $color,
+    $value in $colors {
+        .we-number.bg-#{$color} {
+            background-color: $value;
+        }
+    }
+    @each $color,
+    $value in $colors {
+        .we-number.theme-#{$color} {
+            color: $value;
+        }
+    }
+</style>

resources/js/Global/components/Dividers/Section-Title.vue

@@ -63,6 +63,7 @@ export default {
     letter-spacing: 5px;
     text-transform: uppercase;
     margin-right: -5px;
+    color: #afafaf;
 }
 
 
@@ -91,5 +92,26 @@ export default {
     font-size: 40px;
 }
 
+/* --------------------------------------------------------
+                XS Size :: Begin
+-------------------------------------------------------- */
+.section-title.xs .step {
+    font-size: 35px;
+    line-height: 45px;
+}
+.section-title.xs .Title .Fa {
+    font-size: 17px;
+    line-height: 23px;
+}
+.section-title.xs .Title .En {
+    font-size: 9px;
+    line-height: 12px;
+}
+.section-title.xs .v-icon {
+    font-size: 32px;
+    margin-left: 5px;
+}
+
+
 </style>
 

resources/js/Global/components/Inputs/Quantity-Select.vue

@@ -1,8 +1,17 @@
 <template>
     <div :class="`quantity-select ${theme}`">
-        <v-icon color="cyan"> WMi-plus </v-icon>
+        <div class="controls">
-        <div class="value En Bold"> {{ quantity }} <div class="unit Fa Thin"> {{ label }}  </div> </div>
+            <div class="add">
-        <v-icon color="red"> WMi-minus </v-icon>
+                <v-icon color="cyan">WMi-plus</v-icon>
+            </div>
+            <div class="reduce">
+                <v-icon color="red">WMi-minus</v-icon>
+            </div>
+        </div>
+        <div class="value En Bold">
+            <div class="number"> {{ quantity }} </div>
+            <div class="unit Fa Thin"> {{ label }} </div>
+        </div>
     </div>
 
 </template>
@@ -31,25 +40,40 @@
         cursor: pointer;
     }
     .quantity-select .value {
-        padding: 15px 0px 0px 0px;
+        padding: 0px 0px 0px 0px;
-        margin-top: 5px;
+        margin-top: 0px;
-        font-size: 40px;
+        font-size: 35px;
+        line-height: 30px;
         color: var(--color-black);
+        margin-top: -2px;
     }
     .quantity-select .value .unit {
         font-size: 12px;
-        margin-top: 8px;
+        line-height: 16px;
+        /*margin-top: 8px;*/
     }
     .quantity-select .v-icon:hover {
         opacity: 1;
     }
 
+    .quantity-select .controls .add {
+        display: block;
+    }
+    .quantity-select .controls .reduce {
+        display: block;
+        margin-top: -10px;
+        margin-right: 1px;
+    }
+
 
     /*----------------------------------------------------*/
     /*                SM Size                             */
     /*----------------------------------------------------*/
+    .quantity-select.sm .v-icon {
+        font-size: 25px;
+    }
     .quantity-select.sm .value {
-        font-size: 30px;
+        font-size: 40px;
     }
     .quantity-select.sm .value .unit {
         display: none;
@@ -58,6 +82,16 @@
         padding-top: 0px;
         margin-top: 0px;
     }
+    .quantity-select.sm .controls .add {
+        display: block;
+        margin-bottom: -10px;
+        margin-top: 5px;
+    }
+    .quantity-select.sm .controls .reduce {
+        display: block;
+        margin-top: 3px;
+        margin-right: 1px;
+    }
 
 
 

resources/js/Global/scss/Misc.scss

@@ -8,35 +8,49 @@
     margin-bottom: 10px;
     position: relative;
 }
+.opacity-03 {
+    opacity: 0.3;
+}
+.opacity-05 {
+    opacity: 0.5;
+}
+.opacity-07 {
+    opacity: 0.7;
+}
 
 /* --------------------------------------------------------
                         Borders :: Begin
 -------------------------------------------------------- */
 
-.WM-Border, .border-1x {
+
+.border {
     border: 1px solid;
 }
-
+.border-bottom {
-.WM-Border-2x {
+    border-bottom: 1px solid;
-    border: 2px solid;
 }
-
+.border-top {
-.WM-Border-R {
+    border-top: 1px solid;
+}
+.border-right {
     border-right: 1px solid;
 }
-
+.border-left {
-.WM-Border-L {
     border-left: 1px solid;
 }
-
+[class^="border-"] {
-.WM-Border-T {
+    transition: 0.2s;
-    border-top: 1px solid;
 }
-
+[class^="border-"].x2 {
-.WM-Border-B {
+     border-width: 2px;
-    border-bottom: 1px solid;
 }
 
+@each $Color,
+$Value in $colors {
+    .border-#{$Color} {
+        border-color: $Value;
+    }
+}
 
 /* --------------------------------------------------------
                         Labels :: Begin
@@ -649,3 +663,29 @@ $value in $colors {
 .v-btn--fab.v-size--x-small .v-icon, .v-btn--icon.v-size--x-small .v-icon {
     font-size: 16px;
 }
+
+
+/*---------------------------------------------------------------*/
+/*                   active states :: Begin
+/*---------------------------------------------------------------*/
+@each $background,
+$value in $backgrounds {
+    .theme-#{$background}.active-bg {
+        background-color: $value;
+    }
+}
+
+
+/*---------------------------------------------------------------*/
+/*                   hidden states :: Begin
+/*---------------------------------------------------------------*/
+.hidden-by-height {
+    max-height: 0px;
+    opacity: 0;
+    overflow: hidden;
+    transition: opacity 0.3s,  max-height 0.3s cubic-bezier(1,0,.2,1);
+}
+.hidden-by-height.active {
+    max-height: 1000px;
+    opacity: 1;
+}

resources/js/Global/scss/_vars.scss

@@ -1,12 +1,12 @@
 //--------------------------------------------Red
 $Red: #ee3552;
 $RedShadow: rgba(255, 75, 90, 0.5);
-$RedBackground: #fff6f7;
+$RedBackground: #fff8f9;
 
 //--------------------------------------------Orange
 $Orange: #FF6B57;
 $OrangeShadow:rgba(255, 130, 46, 0.5);
-$OrangeBackground: #fff6f5;
+$OrangeBackground: #fff9f8;
 
 //--------------------------------------------Yellow
 $Yellow: #ffc107;
@@ -21,7 +21,7 @@ $GoldBackground: #ffe5e9;
 //--------------------------------------------Purple
 $Purple:#ac3773;
 $PurpleShadow:rgba(172, 55, 115, 0.5);
-$PurpleBackground: #fff4f6;
+$PurpleBackground: #fff5fa;
 
 //--------------------------------------------Blue
 $Blue: #3498DB;

resources/js/Global/utils/module-color/moduleColor.js

@@ -17,7 +17,7 @@ export default {
     // Basic Service
     // --------------------------
     sms:"orange",
-    authorize:"green",
+    authorize:"blue",
 
     // --------------------------
     // CRM