| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221 |
- /* The color-scheme CSS property https://web.dev/color-scheme/ */
-
- :root,
- [data-bs-theme="light"] {
- @if ($bordered-style == true){
- // Bordered Skin Variables
- &[data-skin="bordered"]{
- --#{$prefix}body-bg: var(--#{$prefix}paper-bg);
- --#{$prefix}navbar-bg: var(--#{$prefix}paper-bg);
- --#{$prefix}navbar-box-shadow: none;
- --#{$prefix}navbar-border-color: #{$border-color};
- --#{$prefix}menu-box-shadow: 0 0 0 1px #{$border-color};
- --#{$prefix}menu-horizontal-menu-box-shadow: var(--#{$prefix}menu-box-shadow);
-
- --tagify-dropdown-box-shadow: none;
- --tagify-dropdown-border-width: #{$border-width};
-
- .layout-navbar.navbar-detached {
- box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
- }
-
- .footer{
- --#{$prefix}footer-border-width: 1px;
- --#{$prefix}footer-box-shadow: none;
- }
-
- // Accordion
- .accordion {
- --#{$prefix}accordion-box-shadow: none;
- --#{$prefix}accordion-active-box-shadow: none;
- &:not([class*="accordion-border-background-"], [class*="accordion-border-solid-"], [class*="accordion-solid-"], [class*="accordion-outline-"]) {
- --#{$prefix}accordion-border-color: #{$border-color};
- }
- }
-
- // Button
- .btn {
- --#{$prefix}btn-box-shadow: none;
- --#{$prefix}btn-focus-box-shadow: none;
- --#{$prefix}btn-active-shadow: none;
- }
-
- // Dropdown
- .dropdown-menu {
- --#{$prefix}dropdown-box-shadow: none;
- --#{$prefix}dropdown-border-width: #{$border-width};
- }
-
- // modal
- .modal .modal-content{
- --#{$prefix}modal-box-shadow: none;
- --#{$prefix}modal-border-width: #{$border-width};
- }
-
- // offcanvas
- .offcanvas {
- --#{$prefix}offcanvas-box-shadow: none;
- --#{$prefix}offcanvas-border-width: #{$border-width};
- }
- :dir(rtl) {
- .offcanvas-start {
- border-inline-end: #{$border-width} #{$border-style} var(--#{$prefix}offcanvas-border-color);
- border-inline-start: 0;
- }
- .offcanvas-end {
- border-inline-end: 0;
- border-inline-start: #{$border-width} #{$border-style} var(--#{$prefix}offcanvas-border-color);
- }
- }
- .toast,
- .bs-toast.toast {
- --#{$prefix}toast-box-shadow: none;
- }
- .notyf__toast {
- &.notyf__success,
- &.notyf__error,
- &.notyf__info,
- &.notyf__warning {
- box-shadow: none;
- }
- }
-
- // Tabs & Pills
- .nav,
- .nav-tabs-shadow {
- --#{$prefix}nav-box-shadow: none;
- --#{$prefix}nav-pills-box-shadow: none;
- --#{$prefix}nav-border-color: #{$border-color};
- ~ .tab-content {
- --#{$prefix}nav-box-shadow: 0 0 0 1px #{$border-color};
- }
- }
-
- // Pagination
- .pagination {
- --#{$prefix}pagination-box-shadow-color: transparent;
- }
-
- // Card
- .card {
- --#{$prefix}card-box-shadow: 0px 0px 0px var(--#{$prefix}border-width) var(--#{$prefix}card-border-color);
- --#{$prefix}card-hover-box-shadow: 0px 0px 0px var(--#{$prefix}border-width) var(--#{$prefix}card-border-color);
- }
- .card-group {
- --#{$prefix}card-box-shadow: none;
- .card {
- --#{$prefix}card-border-width: #{$border-width};
- }
- }
-
- // popover
- .popover:not(.custom-popover) {
- --#{$prefix}popover-box-shadow: none;
- --#{$prefix}popover-border-color: var(--#{$prefix}border-color);
- --#{$prefix}popover-arrow-border: var(--#{$prefix}border-color);
- }
-
- // avatar
- .avatar {
- --#{$prefix}box-shadow: none;
- }
-
- // shepherd
- .shepherd-element {
- box-shadow: none;
- }
-
- // sweetalert2
- .swal2-container .swal2-popup {
- box-shadow: none;
- }
-
- // apexcharts
- .apexcharts-canvas .apexcharts-tooltip {
- box-shadow: none;
- }
-
- // sliders
- .noUi-target .noUi-tooltip {
- box-shadow: none;
- }
-
- // third-party libraries
- .ql-toolbar .ql-picker-options,
- .ql-snow .ql-tooltip,
- .flatpickr-calendar,
- .daterangepicker,
- .ui-timepicker-wrapper,
- .pcr-app,
- .bs-stepper:not(.wizard-modern),
- .bs-stepper.wizard-modern .bs-stepper-content {
- border-width: var(--#{$prefix}border-width);
- border-style: var(--#{$prefix}border-style);
- border-color: var(--#{$prefix}border-color);
- box-shadow: none;
- }
-
- // dropzone
- .dz-preview {
- border-width: var(--#{$prefix}border-width);
- box-shadow: none;
- }
-
- // Kanban
- .app-kanban .kanban-wrapper .kanban-board .kanban-item {
- border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
- box-shadow: none;
- &:hover {
- border-color: var(--#{$prefix}paper-bg);
- }
- }
-
- // select & tags
- .select2-container {
- --#{$prefix}select-dropdown-border-width: #{$border-width};
- --#{$prefix}select-dropdown-box-shadow: none;
- }
-
- // authentication
- .authentication-wrapper .authentication-bg {
- border-inline-start: 1px solid var(--#{$prefix}border-color);
- }
-
- .twitter-typeahead .tt-menu {
- border-width: #{$border-width};
- box-shadow: none;
- }
- }
- }
- }
-
- @if $enable-dark-mode {
- @include color-mode(dark, true) {
- color-scheme: dark;
-
- @if ($bordered-style == true){
- // Bordered Skin Variables
- &[data-skin="bordered"]{
- --#{$prefix}navbar-border-color: #{$border-color-dark};
- --#{$prefix}menu-box-shadow: 0 0 0 1px #{$border-color-dark};
-
- // Accordion
- .accordion {
- &:not([class*="accordion-border-background-"], [class*="accordion-border-solid-"], [class*="accordion-solid-"], [class*="accordion-outline-"]){
- --#{$prefix}accordion-border-color: #{$border-color-dark};
- }
- }
-
- // Tabs & Pills
- --#{$prefix}nav-border-color: #{$border-color-dark};
- .nav,
- .nav-tabs-shadow {
- --#{$prefix}nav-border-color: #{$border-color-dark};
- ~ .tab-content {
- --#{$prefix}nav-box-shadow: 0 0 0 1px #{$border-color-dark};
- }
- }
- }
- }
- }
- }
|