You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
121 lines
2.5 KiB
121 lines
2.5 KiB
<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: "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.icon-ml-15 .v-icon {
|
|
margin-left: 15px;
|
|
}
|
|
|
|
|
|
.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;
|
|
color: #afafaf;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
.section-title.sm .v-icon {
|
|
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>
|
|
|