alireza_hassani
/
willaengine
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rate & icon

Browse Source
pull/1/head
Alireza Hassani 4 years ago
parent eefc30314f
commit d335314561
11 changed files with 210 additions and 31 deletions
Show Stats Download Patch File Download Diff File

7
resources/js/Global/components/Blocks/Info.vue
Unescape View File

@ -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;

14
resources/js/Global/components/Blocks/Name.vue
Unescape View File

@ -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;

7
resources/js/Global/components/Blocks/Number.vue
Unescape View File

@ -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 */

6
resources/js/Global/components/Blocks/Price.vue
Unescape View File

@ -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;
}
}

59
resources/js/Global/components/Blocks/Rate.vue
Unescape View File

@ -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>

22
resources/js/Global/components/Dividers/Section-Title.vue
Unescape View File

@ -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>

46
resources/js/Global/components/Inputs/Quantity-Select.vue
Unescape View File

@ -1,9 +1,18 @@
<template>
<div :class="`quantity-select ${theme}`">
<div class="controls">
<div class="add">
<v-icon color="cyan">WMi-plus</v-icon>
<div class="value En Bold"> {{ quantity }} <div class="unit Fa Thin"> {{ label }} </div> </div>
</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;
margin-top: 5px;
font-size: 40px;
padding: 0px 0px 0px 0px;
margin-top: 0px;
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;
}

BIN
resources/js/Global/scss/Icons/Icons.zip
View File

Binary file not shown.

68
resources/js/Global/scss/Misc.scss vendored
Unescape View File

@ -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;
}
.WM-Border-2x {
border: 2px solid;
.border-bottom {
border-bottom: 1px solid;
}
.WM-Border-R {
.border-top {
border-top: 1px solid;
}
.border-right {
border-right: 1px solid;
}
.WM-Border-L {
.border-left {
border-left: 1px solid;
}
.WM-Border-T {
border-top: 1px solid;
[class^="border-"] {
transition: 0.2s;
}
.WM-Border-B {
border-bottom: 1px solid;
[class^="border-"].x2 {
border-width: 2px;
}
@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;
}

6
resources/js/Global/scss/_vars.scss vendored
Unescape View File

@ -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;

2
resources/js/Global/utils/module-color/moduleColor.js vendored
Unescape View File

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

Write Preview
Loading…
Cancel
Save