Style Customization

Vuely is developed with Scss. So its easy to change the styling for your app. It uses some custom variables which provides you the more flexibility and control over design.

Theme Style

Go to sass>materizlize>components> and open variables.scss file. Edit your variables with your requirement.

Custom Variables

In app.variables you will find the following variables. By using these variables you can customize the style of the theme.

app.variables.scss

//Main
$main-container-bg:#f4f7fa;
$main-container-gap:1.5rem;
$transition-time:0.2s;

//sidebar
$sidebar-width:250px;
$sidebar-bg-color: #2e3344;
$sidbar-menu-color: #fff;
$sidebar-menu-active-hover-box-shadow:0 4px 15px 0 rgba(0, 0, 0, 0.09);
$sidebar-menu-active-hover-bg: rgba(0, 0, 0, 0.2);
$sidebar-user-dropdown-color:#000;

$compact-sidebar-width:65px;


//app-card
$card-title-color:#464d69;
$card-title-font-size:1rem;
$card-title-font-weight:700;

$card-preloader-bg-color: #ffffff;

$card-dropdown-bg:#ffffff;
$card-dropdown-box-shadow:0 5px 5px -3px rgba(0, 0, 0, .2),
0 8px 10px 1px rgba(0, 0, 0, .14),
0 3px 14px 2px rgba(0, 0, 0, .12);


//Header
$app-toolbar-bg-color:#fff;
$app-toolbar-left-right-gap:$main-container-gap;
$app-toolbar-nav-color:#727891;
$app-toolbar-dropdown-shadow:0 3px 2px 0 rgba(0, 0, 0, .02);
$app-toolbar-dropdown-width:320px;
$app-toolbar-dropdown-color:#727891;
$app-toolbar-serach-active-bg:#f2f2f2;
$site-logo-border:rgba(255, 255, 2555, 0.3);


//Box Shadow
$mat-box-shadow:0 1px 15px 1px rgba(69, 65, 78, .08);

//BreadCrumb
$breadcrumb-bg-color:#fff;
$breadcrumb-font-size:1.4rem;
$breadcrumb-font-weight:600;
$breadcrumb-font-color:#464d69;