mirror of https://github.com/ColorlibHQ/AdminLTE
125 lines
6.0 KiB
SCSS
125 lines
6.0 KiB
SCSS
// Variables for AdminLTE
|
|
|
|
// LAYOUT
|
|
// --------------------------------------------------------
|
|
|
|
$font-size-root: 1rem !default;
|
|
|
|
// TRANSITIONS SETTINGS
|
|
// --------------------------------------------------------
|
|
|
|
// Transition global options
|
|
$transition-speed: .3s !default;
|
|
$transition-fn: ease-in-out !default;
|
|
|
|
// Sidebar
|
|
// --------------------------------------------------------
|
|
$sidebar-width: 250px !default;
|
|
$sidebar-padding-x: .5rem !default;
|
|
$sidebar-padding-y: .5rem !default;
|
|
$sidebar-custom-height: 4rem !default;
|
|
$sidebar-custom-height-lg: 6rem !default;
|
|
$sidebar-custom-height-xl: 8rem !default;
|
|
$sidebar-custom-padding-x: .85rem !default;
|
|
$sidebar-custom-padding-y: .5rem !default;
|
|
$sidebar-transition: min-width $transition-speed $transition-fn,
|
|
max-width $transition-speed $transition-fn,
|
|
margin-top $transition-speed $transition-fn,
|
|
margin-left $transition-speed $transition-fn,
|
|
margin-right $transition-speed $transition-fn,
|
|
transform $transition-speed $transition-fn;
|
|
|
|
// SIDEBAR SKINS
|
|
// --------------------------------------------------------
|
|
|
|
// Dark sidebar
|
|
$sidebar-dark-bg: $dark !default;
|
|
$sidebar-dark-hover-bg: rgba(255, 255, 255, .1) !default;
|
|
$sidebar-dark-color: #c2c7d0 !default;
|
|
$sidebar-dark-hover-color: $white !default;
|
|
$sidebar-dark-active-color: $white !default;
|
|
$sidebar-dark-submenu-bg: transparent !default;
|
|
$sidebar-dark-submenu-color: #c2c7d0 !default;
|
|
$sidebar-dark-submenu-hover-color: $white !default;
|
|
$sidebar-dark-submenu-hover-bg: $sidebar-dark-hover-bg !default;
|
|
$sidebar-dark-submenu-active-color: $sidebar-dark-bg !default;
|
|
$sidebar-dark-submenu-active-bg: rgba(255, 255, 255, .9) !default;
|
|
|
|
// Light sidebar
|
|
$sidebar-light-bg: $white !default;
|
|
$sidebar-light-hover-bg: rgba($black, .1) !default;
|
|
$sidebar-light-color: $gray-800 !default;
|
|
$sidebar-light-hover-color: $gray-900 !default;
|
|
$sidebar-light-active-color: $black !default;
|
|
$sidebar-light-submenu-bg: transparent !default;
|
|
$sidebar-light-submenu-color: #777 !default;
|
|
$sidebar-light-submenu-hover-color: $black !default;
|
|
$sidebar-light-submenu-hover-bg: $sidebar-light-hover-bg !default;
|
|
$sidebar-light-submenu-active-color: $sidebar-light-hover-color !default;
|
|
$sidebar-light-submenu-active-bg: $sidebar-light-submenu-hover-bg !default;
|
|
|
|
// SIDEBAR MINI
|
|
// --------------------------------------------------------
|
|
$sidebar-mini-width: ($nav-link-padding-x + $sidebar-padding-x + .8rem) * 2 !default;
|
|
$sidebar-nav-icon-width: $sidebar-mini-width - (($sidebar-padding-x + $nav-link-padding-x) * 2) !default;
|
|
$sidebar-user-image-width: $sidebar-nav-icon-width + ($nav-link-padding-x / 2) !default;
|
|
|
|
// SIDEBAR HORIZONTAL
|
|
// --------------------------------------------------------
|
|
$sidebar-horizontal-width: 100%;
|
|
$sidebar-horizontal-height: 80px !default;
|
|
|
|
// CONTROL SIDEBAR
|
|
// --------------------------------------------------------
|
|
$control-sidebar-width: $sidebar-width !default;
|
|
|
|
// MAIN HEADER
|
|
// --------------------------------------------------------
|
|
$main-header-bottom-border-width: $border-width !default;
|
|
$main-header-bottom-border-color: $gray-300 !default;
|
|
$main-header-bottom-border: $main-header-bottom-border-width solid $main-header-bottom-border-color !default;
|
|
$main-header-link-padding-y: $navbar-padding-y !default;
|
|
$main-header-height-inner: ($nav-link-height + ($main-header-link-padding-y * 2)) !default;
|
|
$main-header-height: add($main-header-height-inner, $main-header-bottom-border-width) !default;
|
|
$nav-link-sm-padding-y: .35rem !default;
|
|
$nav-link-sm-height: ($font-size-sm * $line-height-sm + $nav-link-sm-padding-y * 1.785) !default;
|
|
$main-header-height-sm-inner: ($nav-link-sm-height + ($main-header-link-padding-y * 2)) !default;
|
|
$main-header-height-sm: add($main-header-height-sm-inner, $main-header-bottom-border-width) !default;
|
|
|
|
// MAIN FOOTER
|
|
// --------------------------------------------------------
|
|
$main-footer-padding: 1rem !default;
|
|
$main-footer-padding-sm: $main-footer-padding * .812 !default;
|
|
$main-footer-border-top-width: 1px !default;
|
|
$main-footer-border-top-color: $gray-300 !default;
|
|
$main-footer-border-top: $main-footer-border-top-width solid $main-footer-border-top-color !default;
|
|
$main-footer-height-inner: (($font-size-root * $line-height-base) + ($main-footer-padding * 2)) !default;
|
|
$main-footer-height: add($main-footer-height-inner, $main-footer-border-top-width) !default;
|
|
$main-footer-height-sm-inner: (($font-size-sm * $line-height-base) + ($main-footer-padding-sm * 2)) !default;
|
|
$main-footer-height-sm: add($main-footer-height-sm-inner, $main-footer-border-top-width) !default;
|
|
$main-footer-bg: $white !default;
|
|
$main-footer-color: tint-color($gray-700, 25%) !default;
|
|
|
|
// BRAND LINK
|
|
// --------------------------------------------------------
|
|
$brand-link-padding-y: $navbar-brand-padding-y + $navbar-padding-y;
|
|
$brand-link-border-buttom: 1px;
|
|
|
|
// Z-INDEX
|
|
// --------------------------------------------------------
|
|
$zindex-main-header: $zindex-fixed + 4 !default;
|
|
$zindex-sidebar: $zindex-fixed + 8 !default;
|
|
$zindex-main-footer: $zindex-fixed + 2 !default;
|
|
$zindex-sidebar-horizontal: $zindex-main-header - 2 !default;
|
|
$zindex-control-sidebar: $zindex-fixed + 1 !default;
|
|
$zindex-toasts: $zindex-sidebar + 2 !default;
|
|
$zindex-content-wrapper: $zindex-sidebar - 2 !default;
|
|
$zindex-preloader: $zindex-toasts + 2 !default;
|
|
|
|
// Body background (Affects main content background only)
|
|
$main-bg: #f4f6f9 !default;
|
|
$main-color: $black !default;
|
|
|
|
// Dark mode
|
|
$enable-dark-mode: false !default;
|