_accent.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. //
  2. // Mixins: Accent
  3. //
  4. // Accent Variant
  5. @mixin accent-variant($name, $color) {
  6. .accent-#{$name} {
  7. $link-color: $color;
  8. $link-hover-color: darken($color, 15%);
  9. $pagination-active-bg: $color;
  10. $pagination-active-border-color: $color;
  11. .btn-link,
  12. a {
  13. color: $link-color;
  14. @include hover {
  15. color: $link-hover-color;
  16. }
  17. }
  18. .custom-control-input:checked ~ .custom-control-label {
  19. &::before {
  20. background: $color;
  21. border-color: darken($color, 20%);
  22. }
  23. &::after {
  24. $newColor: color-yiq($color);
  25. background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%23'));
  26. }
  27. }
  28. .form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
  29. .custom-select:focus,
  30. .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
  31. .custom-file-input:focus ~ .custom-file-label {
  32. border-color: lighten($color, 25%);
  33. }
  34. [class*="sidebar-light-"],
  35. &[class*="sidebar-dark-"] {
  36. .nav-sidebar .nav-treeview > .nav-item > {
  37. .nav-link:not(.active):hover {
  38. color: $color;
  39. }
  40. }
  41. }
  42. .page-item {
  43. &.active .page-link {
  44. background-color: $pagination-active-bg;
  45. border-color: $pagination-active-border-color;
  46. }
  47. &.disabled .page-link {
  48. background-color: $pagination-disabled-bg;
  49. border-color: $pagination-disabled-border-color;
  50. }
  51. }
  52. }
  53. }