diff --git a/src/styles/_custom.scss b/src/styles/_custom.scss index 4301405f..15d367af 100644 --- a/src/styles/_custom.scss +++ b/src/styles/_custom.scss @@ -1,29 +1 @@ -// Custom styles for this theme - -.header > .container-fluid, -.sidebar-header { - min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list -} - -.header > .container-fluid + .container-fluid { - min-height: 3rem; -} - -.sidebar-brand-full { - margin-left: 3px; -} - -.sidebar-toggler { - @include ltr-rtl("margin-left", auto); -} - -.sidebar-narrow, -.sidebar-narrow-unfoldable:not(:hover) { - .sidebar-toggler { - @include ltr-rtl("margin-right", auto); - } -} - -.footer { - min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list -} +// Here you can add other styles diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss deleted file mode 100644 index 7e2ee4f8..00000000 --- a/src/styles/_layout.scss +++ /dev/null @@ -1,22 +0,0 @@ -body { - background-color: var(--cui-tertiary-bg); -} - -.wrapper { - width: 100%; - @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); - will-change: auto; - @include transition(padding .15s); -} - -@if $enable-dark-mode { - @include color-mode(dark) { - body { - background-color: var(--cui-dark-bg-subtle); - } - - .footer { - --cui-footer-bg: var(--cui-body-bg); - } - } -} diff --git a/src/styles/_theme.scss b/src/styles/_theme.scss new file mode 100644 index 00000000..49e1c79e --- /dev/null +++ b/src/styles/_theme.scss @@ -0,0 +1,64 @@ +body { + background-color: var(--cui-tertiary-bg); +} + +.wrapper { + width: 100%; + @include ltr-rtl("padding-left", var(--cui-sidebar-occupy-start, 0)); + @include ltr-rtl("padding-right", var(--cui-sidebar-occupy-end, 0)); + will-change: auto; + @include transition(padding .15s); +} + +.header > .container-fluid, +.sidebar-header { + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list +} + +.sidebar-brand-full { + margin-left: 3px; +} + +.sidebar-header { + .nav-underline-border { + --cui-nav-underline-border-link-padding-x: 1rem; + --cui-nav-underline-border-gap: 0; + } + + .nav-link { + display: flex; + align-items: center; + min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list + } +} + +.sidebar-toggler { + @include ltr-rtl("margin-left", auto); +} + +.sidebar-narrow, +.sidebar-narrow-unfoldable:not(:hover) { + .sidebar-toggler { + @include ltr-rtl("margin-right", auto); + } +} + +.header > .container-fluid + .container-fluid { + min-height: 3rem; +} + +.footer { + min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list +} + +@if $enable-dark-mode { + @include color-mode(dark) { + body { + background-color: var(--cui-dark-bg-subtle); + } + + .footer { + --cui-footer-bg: var(--cui-body-bg); + } + } +} diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 5ac5b726..b0f8a52a 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -2,5 +2,4 @@ // // If you want to customize your project please add your variables below. -$enable-rtl: true; /* stylelint-disable-line scss/dollar-variable-default */ -$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */ +$enable-deprecation-messages: false !default; diff --git a/src/styles/_examples.scss b/src/styles/examples.scss similarity index 95% rename from src/styles/_examples.scss rename to src/styles/examples.scss index df228af2..2390ba19 100644 --- a/src/styles/_examples.scss +++ b/src/styles/examples.scss @@ -1,4 +1,6 @@ /* stylelint-disable declaration-no-important, scss/selector-no-redundant-nesting-selector */ +$enable-deprecation-messages: false; /* stylelint-disable-line scss/dollar-variable-default */ + @import "@coreui/coreui/scss/functions"; @import "@coreui/coreui/scss/variables"; @import "@coreui/coreui/scss/mixins"; @@ -51,9 +53,6 @@ } // Buttons - .col > .btn, - .col-auto > .btn, - .d-md-block > .btn, > .btn, > .btn-group { margin: .25rem .125rem; @@ -114,4 +113,4 @@ background-color: var(--#{$prefix}secondary-bg) !important; } } -} \ No newline at end of file +} diff --git a/src/styles/style.scss b/src/styles/style.scss index de0c64a0..6fbabff0 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,16 +1,14 @@ // If you want to override variables do it here @import "variables"; -// Import CoreUI for React components library +// Import styles @import "@coreui/coreui/scss/coreui"; -// Import Chart.js custom tooltips styles -@import "@coreui/chartjs/scss/coreui-chartjs"; +// Vendors +@import "vendors/simplebar"; -@import "layout"; +// Custom styles for this theme +@import "theme"; -// Preview -@import "examples"; - -// If you want to add custom CSS you can put it here. +// If you want to add custom CSS you can put it here @import "custom"; diff --git a/src/styles/vendors/simplebar.scss b/src/styles/vendors/simplebar.scss new file mode 100644 index 00000000..59c81b8a --- /dev/null +++ b/src/styles/vendors/simplebar.scss @@ -0,0 +1,5 @@ +.simplebar-content { + display: flex; + flex-direction: column; + min-height: 100%; +}