Без опису
Ви не можете вибрати більше 25 тем Теми мають розпочинатися з літери або цифри, можуть містити дефіси (-) і не повинні перевищувати 35 символів.

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. /* The color-scheme CSS property https://web.dev/color-scheme/ */
  2. :root,
  3. [data-bs-theme="light"] {
  4. @if ($bordered-style == true){
  5. // Bordered Skin Variables
  6. &[data-skin="bordered"]{
  7. --#{$prefix}body-bg: var(--#{$prefix}paper-bg);
  8. --#{$prefix}navbar-bg: var(--#{$prefix}paper-bg);
  9. --#{$prefix}navbar-box-shadow: none;
  10. --#{$prefix}navbar-border-color: #{$border-color};
  11. --#{$prefix}menu-box-shadow: 0 0 0 1px #{$border-color};
  12. --#{$prefix}menu-horizontal-menu-box-shadow: var(--#{$prefix}menu-box-shadow);
  13. --tagify-dropdown-box-shadow: none;
  14. --tagify-dropdown-border-width: #{$border-width};
  15. .layout-navbar.navbar-detached {
  16. box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
  17. }
  18. .footer{
  19. --#{$prefix}footer-border-width: 1px;
  20. --#{$prefix}footer-box-shadow: none;
  21. }
  22. // Accordion
  23. .accordion {
  24. --#{$prefix}accordion-box-shadow: none;
  25. --#{$prefix}accordion-active-box-shadow: none;
  26. &:not([class*="accordion-border-background-"], [class*="accordion-border-solid-"], [class*="accordion-solid-"], [class*="accordion-outline-"]) {
  27. --#{$prefix}accordion-border-color: #{$border-color};
  28. }
  29. }
  30. // Button
  31. .btn {
  32. --#{$prefix}btn-box-shadow: none;
  33. --#{$prefix}btn-focus-box-shadow: none;
  34. --#{$prefix}btn-active-shadow: none;
  35. }
  36. // Dropdown
  37. .dropdown-menu {
  38. --#{$prefix}dropdown-box-shadow: none;
  39. --#{$prefix}dropdown-border-width: #{$border-width};
  40. }
  41. // modal
  42. .modal .modal-content{
  43. --#{$prefix}modal-box-shadow: none;
  44. --#{$prefix}modal-border-width: #{$border-width};
  45. }
  46. // offcanvas
  47. .offcanvas {
  48. --#{$prefix}offcanvas-box-shadow: none;
  49. --#{$prefix}offcanvas-border-width: #{$border-width};
  50. }
  51. :dir(rtl) {
  52. .offcanvas-start {
  53. border-inline-end: #{$border-width} #{$border-style} var(--#{$prefix}offcanvas-border-color);
  54. border-inline-start: 0;
  55. }
  56. .offcanvas-end {
  57. border-inline-end: 0;
  58. border-inline-start: #{$border-width} #{$border-style} var(--#{$prefix}offcanvas-border-color);
  59. }
  60. }
  61. .toast,
  62. .bs-toast.toast {
  63. --#{$prefix}toast-box-shadow: none;
  64. }
  65. .notyf__toast {
  66. &.notyf__success,
  67. &.notyf__error,
  68. &.notyf__info,
  69. &.notyf__warning {
  70. box-shadow: none;
  71. }
  72. }
  73. // Tabs & Pills
  74. .nav,
  75. .nav-tabs-shadow {
  76. --#{$prefix}nav-box-shadow: none;
  77. --#{$prefix}nav-pills-box-shadow: none;
  78. --#{$prefix}nav-border-color: #{$border-color};
  79. ~ .tab-content {
  80. --#{$prefix}nav-box-shadow: 0 0 0 1px #{$border-color};
  81. }
  82. }
  83. // Pagination
  84. .pagination {
  85. --#{$prefix}pagination-box-shadow-color: transparent;
  86. }
  87. // Card
  88. .card {
  89. --#{$prefix}card-box-shadow: 0px 0px 0px var(--#{$prefix}border-width) var(--#{$prefix}card-border-color);
  90. --#{$prefix}card-hover-box-shadow: 0px 0px 0px var(--#{$prefix}border-width) var(--#{$prefix}card-border-color);
  91. }
  92. .card-group {
  93. --#{$prefix}card-box-shadow: none;
  94. .card {
  95. --#{$prefix}card-border-width: #{$border-width};
  96. }
  97. }
  98. // popover
  99. .popover:not(.custom-popover) {
  100. --#{$prefix}popover-box-shadow: none;
  101. --#{$prefix}popover-border-color: var(--#{$prefix}border-color);
  102. --#{$prefix}popover-arrow-border: var(--#{$prefix}border-color);
  103. }
  104. // avatar
  105. .avatar {
  106. --#{$prefix}box-shadow: none;
  107. }
  108. // shepherd
  109. .shepherd-element {
  110. box-shadow: none;
  111. }
  112. // sweetalert2
  113. .swal2-container .swal2-popup {
  114. box-shadow: none;
  115. }
  116. // apexcharts
  117. .apexcharts-canvas .apexcharts-tooltip {
  118. box-shadow: none;
  119. }
  120. // sliders
  121. .noUi-target .noUi-tooltip {
  122. box-shadow: none;
  123. }
  124. // third-party libraries
  125. .ql-toolbar .ql-picker-options,
  126. .ql-snow .ql-tooltip,
  127. .flatpickr-calendar,
  128. .daterangepicker,
  129. .ui-timepicker-wrapper,
  130. .pcr-app,
  131. .bs-stepper:not(.wizard-modern),
  132. .bs-stepper.wizard-modern .bs-stepper-content {
  133. border-width: var(--#{$prefix}border-width);
  134. border-style: var(--#{$prefix}border-style);
  135. border-color: var(--#{$prefix}border-color);
  136. box-shadow: none;
  137. }
  138. // dropzone
  139. .dz-preview {
  140. border-width: var(--#{$prefix}border-width);
  141. box-shadow: none;
  142. }
  143. // Kanban
  144. .app-kanban .kanban-wrapper .kanban-board .kanban-item {
  145. border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
  146. box-shadow: none;
  147. &:hover {
  148. border-color: var(--#{$prefix}paper-bg);
  149. }
  150. }
  151. // select & tags
  152. .select2-container {
  153. --#{$prefix}select-dropdown-border-width: #{$border-width};
  154. --#{$prefix}select-dropdown-box-shadow: none;
  155. }
  156. // authentication
  157. .authentication-wrapper .authentication-bg {
  158. border-inline-start: 1px solid var(--#{$prefix}border-color);
  159. }
  160. .twitter-typeahead .tt-menu {
  161. border-width: #{$border-width};
  162. box-shadow: none;
  163. }
  164. }
  165. }
  166. }
  167. @if $enable-dark-mode {
  168. @include color-mode(dark, true) {
  169. color-scheme: dark;
  170. @if ($bordered-style == true){
  171. // Bordered Skin Variables
  172. &[data-skin="bordered"]{
  173. --#{$prefix}navbar-border-color: #{$border-color-dark};
  174. --#{$prefix}menu-box-shadow: 0 0 0 1px #{$border-color-dark};
  175. // Accordion
  176. .accordion {
  177. &:not([class*="accordion-border-background-"], [class*="accordion-border-solid-"], [class*="accordion-solid-"], [class*="accordion-outline-"]){
  178. --#{$prefix}accordion-border-color: #{$border-color-dark};
  179. }
  180. }
  181. // Tabs & Pills
  182. --#{$prefix}nav-border-color: #{$border-color-dark};
  183. .nav,
  184. .nav-tabs-shadow {
  185. --#{$prefix}nav-border-color: #{$border-color-dark};
  186. ~ .tab-content {
  187. --#{$prefix}nav-box-shadow: 0 0 0 1px #{$border-color-dark};
  188. }
  189. }
  190. }
  191. }
  192. }
  193. }