399 lines
9.7 KiB
SCSS
399 lines
9.7 KiB
SCSS
@import './_components/include-dark';
|
|
@import './_theme/common';
|
|
@import './_theme/libs';
|
|
@import './_theme/pages';
|
|
@import './_theme/_theme';
|
|
|
|
$primary-color: #696cff;
|
|
$body-bg: $card-bg;
|
|
|
|
body {
|
|
background: $body-bg;
|
|
}
|
|
|
|
.bg-body {
|
|
background: $body-bg !important;
|
|
}
|
|
|
|
.dropdown-menu,
|
|
.popover,
|
|
.toast,
|
|
.flatpickr-calendar,
|
|
.datepicker.datepicker-inline,
|
|
.datepicker.datepicker-inline table,
|
|
.daterangepicker,
|
|
.pcr-app,
|
|
.ui-timepicker-wrapper,
|
|
.twitter-typeahead .tt-menu,
|
|
.tagify__dropdown,
|
|
.swal2-popup,
|
|
.select2-dropdown,
|
|
.menu-horizontal .menu-inner > .menu-item.open .menu-sub,
|
|
div.dataTables_wrapper .dt-button-collection {
|
|
outline: none;
|
|
box-shadow: none !important;
|
|
border: 1px solid $border-color !important;
|
|
}
|
|
|
|
.flatpickr-days,
|
|
.flatpickr-time {
|
|
border-width: 0 !important;
|
|
}
|
|
|
|
// Bootstrap select > double border fix
|
|
.dropdown-menu .dropdown-menu {
|
|
border: none !important;
|
|
}
|
|
.datepicker.datepicker-inline {
|
|
width: fit-content;
|
|
border-radius: $border-radius;
|
|
}
|
|
.apexcharts-canvas .apexcharts-tooltip,
|
|
.modal-content,
|
|
.offcanvas,
|
|
.shepherd-element,
|
|
div.dataTables_wrapper .dt-button-collection > div[role='menu'] {
|
|
box-shadow: none !important;
|
|
}
|
|
.offcanvas.offcanvas-start,
|
|
.offcanvas.offcanvas-end,
|
|
.offcanvas.offcanvas-top,
|
|
.offcanvas.offcanvas-bottom {
|
|
border-width: $border-width;
|
|
}
|
|
.offcanvas.offcanvas-start {
|
|
@include rtl-style {
|
|
border-left: 1px solid $border-color;
|
|
}
|
|
}
|
|
.offcanvas.offcanvas-end {
|
|
@include rtl-style {
|
|
border-right: 1px solid $border-color;
|
|
}
|
|
}
|
|
.modal-content {
|
|
border: $border-width solid $border-color !important;
|
|
}
|
|
.select2-dropdown {
|
|
border-color: $border-color !important;
|
|
}
|
|
.bs-popover-start > .popover-arrow::before,
|
|
.bs-popover-auto[data-popper-placement^='left'] > .popover-arrow::before {
|
|
border-left-color: $border-color !important;
|
|
right: -1px;
|
|
}
|
|
.bs-popover-end > .popover-arrow::before,
|
|
.bs-popover-auto[data-popper-placement^='right'] > .popover-arrow::before {
|
|
border-right-color: $border-color !important;
|
|
left: -1px;
|
|
}
|
|
.bs-popover-top > .popover-arrow::before,
|
|
.bs-popover-auto[data-popper-placement^='top'] > .popover-arrow::before {
|
|
border-top-color: $border-color !important;
|
|
bottom: -1px;
|
|
}
|
|
.bs-popover-bottom > .popover-arrow::before,
|
|
.bs-popover-auto[data-popper-placement^='bottom'] > .popover-arrow::before {
|
|
border-bottom-color: $border-color !important;
|
|
top: -1px;
|
|
}
|
|
|
|
@include template-common-theme($primary-color);
|
|
@include template-libs-dark-theme($primary-color);
|
|
@include template-pages-theme($primary-color);
|
|
|
|
// Navbar
|
|
// ---------------------------------------------------------------------------
|
|
@include template-navbar-style('.bg-navbar-theme', $card-bg, $color: $headings-color, $active-color: $headings-color);
|
|
.layout-navbar {
|
|
background-color: rgba($card-bg, 0.88) !important;
|
|
backdrop-filter: saturate(200%) blur(6px);
|
|
}
|
|
.layout-horizontal .layout-navbar {
|
|
box-shadow: 0 1px 0 $border-color;
|
|
}
|
|
.layout-navbar.navbar-detached {
|
|
border: 1px solid $border-color;
|
|
box-shadow: none;
|
|
}
|
|
.layout-navbar-fixed .layout-page:before {
|
|
backdrop-filter: saturate(200%) blur(10px);
|
|
background: linear-gradient(180deg, rgba($body-bg, 70%) 44%, rgba($body-bg, 43%) 73%, rgba($body-bg, 0%));
|
|
-webkit-mask: linear-gradient($body-bg, $body-bg 18%, transparent 100%);
|
|
mask: linear-gradient($body-bg, $body-bg 18%, transparent 100%);
|
|
}
|
|
// Menu
|
|
// ---------------------------------------------------------------------------
|
|
@include template-menu-style(
|
|
'.bg-menu-theme',
|
|
$card-bg,
|
|
$color: $headings-color,
|
|
$active-color: $headings-color,
|
|
$border: transparent,
|
|
$active-bg: $card-bg
|
|
);
|
|
|
|
.bg-menu-theme.menu-vertical {
|
|
box-shadow: 0 0 0 1px $border-color;
|
|
}
|
|
|
|
.layout-horizontal .layout-page .menu-horizontal {
|
|
box-shadow: 0 -1px 0 $border-color inset;
|
|
}
|
|
|
|
.bg-menu-theme {
|
|
// menu item open(vertical) & hover (vertical & horizontal)
|
|
.menu-inner .menu-item.open > .menu-link,
|
|
.menu-inner .menu-item .menu-link:not(.active):hover {
|
|
html:not(.layout-menu-collapsed) &,
|
|
.layout-menu-hover.layout-menu-collapsed & {
|
|
background-color: $gray-60;
|
|
}
|
|
}
|
|
// menu item open(horizontal)
|
|
.menu-inner .menu-sub > .menu-item.active {
|
|
> .menu-link.menu-toggle {
|
|
background-color: $gray-80 !important;
|
|
}
|
|
&:not(:has(.menu-sub)) {
|
|
.menu-icon {
|
|
color: $primary-color;
|
|
}
|
|
}
|
|
}
|
|
// menu item active
|
|
.menu-inner > .menu-item.active > .menu-link,
|
|
&.menu-horizontal .menu-inner > .menu-item.active > .menu-sub > .menu-item.active:not(:has(.menu-sub)) > .menu-link {
|
|
color: color-contrast($primary-color);
|
|
background-color: $primary-color !important;
|
|
.menu-icon {
|
|
color: color-contrast($primary-color);
|
|
}
|
|
}
|
|
.menu-inner > .menu-item.active:before {
|
|
background: $primary-color;
|
|
}
|
|
|
|
// Sub menu box-shadow & border (horizontal)
|
|
&.menu-horizontal {
|
|
.menu-inner > .menu-item .menu-sub {
|
|
box-shadow: none;
|
|
border: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
// Sub menu item link bullet
|
|
.menu-sub > .menu-item > .menu-link:before {
|
|
background-color: rgba-to-hex($gray-400, $rgba-to-hex-bg) !important;
|
|
}
|
|
// Sub menu item link active bullet
|
|
.menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
|
|
background-color: $primary-color !important;
|
|
border: 3px solid rgba-to-hex(rgba($primary-color, 0.16), $card-bg) !important;
|
|
}
|
|
}
|
|
|
|
.app-brand .layout-menu-toggle {
|
|
background-color: $primary-color;
|
|
border: 7px solid $body-bg;
|
|
|
|
@include media-breakpoint-up($menu-collapsed-layout-breakpoint) {
|
|
&::before {
|
|
z-index: -1;
|
|
content: '';
|
|
width: 2.25rem;
|
|
height: 2.25rem;
|
|
border-radius: 50%;
|
|
top: -0.46rem;
|
|
inset-inline-start: -0.5rem;
|
|
position: absolute;
|
|
border: 1px solid $border-color;
|
|
@include ltr-style {
|
|
clip-path: circle(71% at 0% 50%);
|
|
}
|
|
@include rtl-style {
|
|
clip-path: circle(71% at 100% 50%);
|
|
}
|
|
}
|
|
}
|
|
i {
|
|
color: color-contrast($primary-color);
|
|
}
|
|
}
|
|
|
|
// Footer
|
|
// ---------------------------------------------------------------------------
|
|
@include template-footer-style('.bg-footer-theme', $card-bg, $color: $body-color, $active-color: $primary-color);
|
|
|
|
.layout-footer-fixed .layout-wrapper:not(.layout-horizontal) .content-footer .footer-container,
|
|
.layout-footer-fixed .layout-wrapper.layout-horizontal .content-footer {
|
|
box-shadow: none;
|
|
border: 1px solid $border-color;
|
|
border-bottom: 0;
|
|
}
|
|
.content-footer {
|
|
.layout-horizontal & {
|
|
border-top: 1px solid $border-color;
|
|
}
|
|
}
|
|
|
|
// Component styles
|
|
// ---------------------------------------------------------------------------
|
|
|
|
// card
|
|
.card {
|
|
box-shadow: none;
|
|
border: $border-width solid $card-border-color;
|
|
}
|
|
|
|
// card border-shadow variant
|
|
.card {
|
|
&[class*='card-border-shadow-'] {
|
|
&:hover {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Accordion
|
|
.accordion {
|
|
&:not(.accordion-custom-button):not(.accordion-arrow-left) {
|
|
.accordion-item {
|
|
border: $accordion-border-width solid $accordion-border-color;
|
|
}
|
|
}
|
|
.accordion-item {
|
|
box-shadow: none !important;
|
|
}
|
|
}
|
|
|
|
// Tabs
|
|
.nav-tabs-shadow {
|
|
box-shadow: none !important;
|
|
border: 1px solid $border-color !important;
|
|
border-radius: $border-radius;
|
|
}
|
|
.nav-pills:not(.card-header-pills) {
|
|
~ .tab-content {
|
|
border: 1px solid $border-color !important;
|
|
@include border-radius($border-radius);
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
.nav-align-top .nav-tabs {
|
|
@include border-top-radius($border-radius);
|
|
~ .tab-content {
|
|
box-shadow: none;
|
|
border-top-width: 0 !important;
|
|
@include border-bottom-radius($border-radius);
|
|
}
|
|
}
|
|
.nav-align-bottom .nav-tabs {
|
|
@include border-bottom-radius($border-radius);
|
|
~ .tab-content {
|
|
box-shadow: none;
|
|
border-bottom-width: 0 !important;
|
|
@include border-top-radius($border-radius);
|
|
}
|
|
}
|
|
.nav-align-left .nav-tabs {
|
|
@include ltr-style {
|
|
@include border-start-radius($border-radius);
|
|
}
|
|
@include rtl-style {
|
|
@include border-end-radius($border-radius);
|
|
}
|
|
~ .tab-content {
|
|
box-shadow: none;
|
|
@include ltr-style {
|
|
border-left-width: 0 !important;
|
|
@include border-end-radius($border-radius);
|
|
}
|
|
@include rtl-style {
|
|
border-right-width: 0 !important;
|
|
@include border-start-radius($border-radius);
|
|
}
|
|
}
|
|
}
|
|
.nav-align-right .nav-tabs {
|
|
@include ltr-style {
|
|
@include border-end-radius($border-radius);
|
|
}
|
|
@include rtl-style {
|
|
@include border-start-radius($border-radius);
|
|
}
|
|
~ .tab-content {
|
|
box-shadow: none;
|
|
@include ltr-style {
|
|
border-right-width: 0 !important;
|
|
@include border-start-radius($border-radius);
|
|
}
|
|
@include rtl-style {
|
|
border-left-width: 0 !important;
|
|
@include border-end-radius($border-radius);
|
|
}
|
|
}
|
|
}
|
|
|
|
//Kanban-item
|
|
.kanban-item {
|
|
box-shadow: none !important;
|
|
border: $border-width solid $card-border-color;
|
|
}
|
|
|
|
// default form wizard style
|
|
.bs-stepper:not(.wizard-modern) {
|
|
box-shadow: none !important;
|
|
border: 1px solid $border-color;
|
|
border-radius: $card-border-radius;
|
|
.modal .modal-body & {
|
|
border-width: 0;
|
|
}
|
|
}
|
|
|
|
// modern form wizard style
|
|
.bs-stepper.wizard-modern {
|
|
.bs-stepper-content {
|
|
box-shadow: none !important;
|
|
border: 1px solid $border-color;
|
|
border-radius: $card-border-radius;
|
|
}
|
|
}
|
|
|
|
// file upload (dropzone)
|
|
.dark-style .dz-preview {
|
|
box-shadow: none;
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
//timeline
|
|
.timeline {
|
|
.timeline-item {
|
|
.timeline-indicator,
|
|
.timeline-indicator-advanced {
|
|
box-shadow: 0 0 0 10px $card-bg;
|
|
}
|
|
}
|
|
}
|
|
|
|
// App email rear card border effect
|
|
|
|
.app-email {
|
|
.app-email-view {
|
|
.email-card-last {
|
|
&:before {
|
|
border: 1px solid $border-color;
|
|
}
|
|
|
|
&:after {
|
|
border: 1px solid $border-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// authentication
|
|
.authentication-wrapper .authentication-bg {
|
|
border-inline-start: 1px solid $border-color;
|
|
}
|