minor update

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

@@ -44,11 +44,14 @@ export default {
         line-height: 45px;
     }
     .we-icon .label {
-        font-size: 14px;
+        font-size: 13px;
         text-align: right;
         line-height: 16px;
         margin-right: 3px;
     }
+    .we-icon .value {
+        font-size: 15px;
+    }
 
     .we-icon.sm .number {
         font-size: 50px;

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

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

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

@@ -4,7 +4,8 @@
             <div class="number-original En Bold" > {{ Intl.NumberFormat().format(original_price)  }} </div>
             <div class="percent En Bold"> 12 <v-icon color="white"> WMi-percentage</v-icon> </div>
         </div>
-        <div class="number En Bold"> {{ Intl.NumberFormat().format(price)  }} </div>
+        <div v-if="price != 0" class="number En Bold"> {{ Intl.NumberFormat().format(price)  }} </div>
+        <div v-else class="number Fa Bold"> رایگان </div>
         <div class="label Fa" v-html="label"></div>
     </div>
 </template>
@@ -28,6 +29,9 @@
         text-align: center;
         padding: 5px 15px;
     }
+    .we-price.left-align {
+        text-align: left;
+    }
     .we-price .number {
         font-size: 25px;
         line-height: 20px;

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

@@ -0,0 +1,92 @@
+<template>
+    <div :class="`RTL text-lg-right section-title ${theme} ${(icon) ? 'icon-visible' : ''}`">
+        <v-icon v-if="icon" :color="color">WMi-{{icon}}</v-icon>
+        <div v-if="number" :class='"step En color-"+color+""' v-text="number"></div>
+        <div class="Title">
+            <div class="Fa" v-text="titleFa"></div>
+            <div class="En" v-text="titleEn"></div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "wm-section-title",
+    props: {
+        titleFa: { default: "عنوان بخش" },
+        titleEn: { default: "Part Title" },
+        color: { default: "cyan" },
+        number: String,
+        theme: String,
+        icon: String,
+    },
+    data: function ()  {
+        return {}
+    },
+};
+</script>
+<style lang="scss" scoped>
+/* --------------------------------------------------------
+                        SectionTitle :: Begin
+-------------------------------------------------------- */
+.section-title {
+    display: flex;
+    justify-content: right;
+    align-items: center;
+}
+
+.section-title .step {
+    font-size: 50px;
+    opacity: 0.2;
+    line-height: 60px;
+}
+
+.section-title .v-icon {
+    font-size: 50px;
+    opacity: 0.2;
+}
+
+
+.section-title .Title {
+    float: right;
+    margin-right: -30px;
+    margin-top: 8px;
+}
+
+.section-title .Title .Fa {
+    font-size: 20px;
+    line-height: 1.2;
+}
+
+.section-title .Title .En {
+    font-size: 12px;
+    letter-spacing: 5px;
+    text-transform: uppercase;
+    margin-right: -5px;
+}
+
+
+.section-title.icon-visible .v-icon {
+    opacity: 1;
+}
+.section-title.icon-visible .Title {
+    margin-right: 0px;
+    margin-top: 0px;
+}
+/* --------------------------------------------------------
+                    SM Size :: Begin
+-------------------------------------------------------- */
+.section-title.sm .step {
+    font-size: 45px;
+    line-height: 55px;
+}
+.section-title.sm .Title .Fa {
+    font-size: 18px;
+    line-height: 20px;
+}
+.section-title.sm .Title .En {
+    font-size: 10px;
+ }
+
+</style>
+

resources/js/Global/plugins/globalComponent.js

@@ -13,12 +13,15 @@ import PageTitle from "@Global/components/Dividers/PageTitle.vue";
 
 Vue.component("WM-PageTitle", PageTitle);
 
-import SectionTitle from "@Global/components/Dividers/SectionTitle.vue";
+import SectionTitleFlex from "@Global/components/Dividers/SectionTitle.vue";
-Vue.component("wm-section-title", SectionTitle);
+Vue.component("wm-section-title", SectionTitleFlex);
 
 import SectionTitleCol from "@Global/components/Dividers/SectionTitle-Col.vue";
 Vue.component("section-title-col", SectionTitleCol);
 
+import SectionTitle from "@Global/components/Dividers/Section-Title.vue";
+Vue.component("section-title", SectionTitle);
+
 import SectionTitleVertical from "@Global/components/Dividers/SectionTitle-Vertical.vue";
 Vue.component("section-title-vertical", SectionTitleVertical);
 

resources/js/Global/scss/Misc.scss

@@ -318,6 +318,14 @@
     margin-left: 8px;
 }
 
+.image-square {
+    width: 32px;
+    margin-left: 5px;
+}
+.image-square.height-24 {
+    width: 24px;
+}
+
 
 /* --------------------------------------------------------
                         Cropper :: Begin
@@ -586,7 +594,7 @@ $value in $colors {
 .end-row {
     margin-left: -18px;
     margin-right: -18px;
-    padding: 5px 10px;
+    padding: 2px 10px;
 }
 @each $color,
 $value in $colors {

resources/js/Global/scss/Modify.scss

@@ -607,3 +607,17 @@ $Value in $Shadows {
 .v-stepper.we-stepper .v-stepper__step.v-stepper__step--inactive .v-stepper__step__step {
     color: #00000061;
 }
+
+
+//------------------------------------------------------
+//                    Small v-switch
+//------------------------------------------------------
+.v-input--switch.small {
+    margin-top: 0px;
+}
+.v-input--switch.small .v-input__slot {
+    margin-bottom: 0px;
+}
+.v-input--switch.small .v-messages {
+    min-height: 0px;
+}