Styles ​

Writing your own SCSS ​

You can write your own SCSS in src/assets/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/assets/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:

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

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

.some-icon {
  height: 1.25rem;
  width: 1.25rem;
}

We use this mixin:

// 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.

// 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.

// File: src/assets/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
);

// 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 rotate 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: The match-height class makes sure that the height of cards in one row should be same.

• clamp-text: The clamp-text class is for truncating or applying ellipsis to text content after only two lines, providing a concise and visually pleasing presentation.

• carousel-delimiter-top-end: The carousel-delimiter-top-end class moves carousel-delimiter on the top end as shown in the dashboard example.

• disable-tab-transition: The disable-tab-transition class eliminates the transition effect on v-window-item components, resulting in a smooth user experience without any visual animations.

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/.

// Section title
%vertical-nav-section-title {
  font-weight: 600;
}

Next, import this newly created file in src/@core/scss/template/placeholders/_index.scss

@forward "vertical-nav";

Done 🥳