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.

• leading-normal:The leading-normal class applies line-height: normal style to the element.

You can refer to src/@core/scss/base/_utilities.scss for more such utility classes.

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 🥳