Appearance
Styles
Writing your own SCSS
You can write your own SCSS in /src/styles/styles.scss
file.
Overriding variables
If you want to override any of vuetify or our custom variable then you can override it in /src/styles/variables/{_vuetify|_template}.scss
folder.
In this folder you can find two variable files.
_vuetify.scss
You can override Vuetify variable in this file.
You can override variables like below:
scss
@forward "../../@core/scss/template/libs/vuetify/variables" with (
$color-pack: false
);
You can get list of variables you can override in below locations:
- Check Vuetify SASS variables page
_template.scss
You can override template/custom variable in this file.
You can override variables like below:
scss
@forward "@core/scss/template/variables" with (
$navbar-high-emphasis-text: true
);
You can get list of variables you can override in below locations:
- Check
/src/@core/scss/base/_variables.scss
and/src/@core/scss/template/_variables.scss
files for our custom variables
Mixins
icon-size
We use this mixin to customize the size of icon. Size of icon is determined using height
and width
property. Instead of writing same value for both properties like below:
scss
.some-icon {
height: 1.25rem;
width: 1.25rem;
}
We use this mixin:
scss
// Import mixins
@use '@layouts/styles/mixins';
.some-icon {
@include mixins.icon-size(1.25rem);
}
/* Output
.some-icon {
height: 1.25rem;
width: 1.25rem;
}
*/
rtl
You have to use this mixin if you are writing RTL styles. This will scope the written style to RTL direction only.
scss
// Import mixins
@use '@layouts/styles/mixins';
.selector {
@include mixins.rtl {
margin-left: 1rem;
}
}
/* Output
[dir="rtl"] .selector {
margin-left: 1rem;
}
*/
However, it does more than just generating RTL styles. It will only generate the styles if you have enabled generating RTL styles.
scss
// File: /src/styles/_variables.scss
/*
If you have disable generating RTL styles by setting `$enable-rtl-styles: false`
then style won't be generated by rtl mixin
*/
@forward '@layouts/styles/variables' with (
$enable-rtl-styles: false
);
scss
// File: Your SCSS file
// Import mixins
@use '@layouts/styles/mixins';
.selector {
@include mixins.rtl {
margin-left: 1rem;
}
}
/* No output */
Custom-Classes
We have defined various custom classes in our template which makes development fast,smooth and enjoyable.We recommend you to use this classes whenever required.
flip-in-rtl
flip-in-rtl
is a custom class which rotetes the element 180 degree when direction is rtl.Timeline Classes
We have defined timeline classes for timeline title, timeline text and timeline meta. Below is the list of classes:
- app-timeline-title: sets font-weight, font-size, line-height and color for timeline title.
- app-timeline-meta: sets text disabled and font size smaller for meta data in timeline.
- app-timeline-text: sets text, font-size and line-height for timeline text.
match-height:
match-height
class makes sure that the height of cards in one row should be same.clamp-text:
clamp-text
class trims text to 2 lines.carousel-delimiter-top-end:
carousel-delimiter-top-end
moves carousel-delimiter on top end as shown in dashboard example.
How to override styles using placeholders Contributors
Our template provides SCSS placeholders to modify the sensitive core styles easily. As a contributor you are allowed to write your styles in src/@core/scss/templates
.
Placeholders provided in src/@core/scss/base/placeholders
are available to override.
Assume you want to increase the font-weight
of vertical nav section title. You can find placeholder %vertical-nav-section-title
in src/@core/scss/base/placeholders/_vertical-nav.scss
file.
Now, to override this placeholder, create file in src/@core/scss/template/placeholders/
with the same name as in src/@core/scss/base/placeholders
. Hence, we will create a new file _vertical-nav.scss
in src/@core/scss/template/placeholders/
.
scss
// Section title
%vertical-nav-section-title {
font-weight: 600;
}
Next, import this newly created file in src/@core/scss/template/placeholders/_index.scss
scss
@forward "vertical-nav";
Done 🥳