_accent.scss 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  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:not(.dropdown-item ) {
  13. color: $link-color;
  14. @include hover {
  15. color: $link-hover-color;
  16. }
  17. }
  18. .dropdown-item.active {
  19. background: $color;
  20. color: color-yiq($color);
  21. }
  22. .custom-control-input:checked ~ .custom-control-label {
  23. &::before {
  24. background: $color;
  25. border-color: darken($color, 20%);
  26. }
  27. &::after {
  28. $newColor: color-yiq($color);
  29. background-image: str-replace($custom-checkbox-indicator-icon-checked, str-replace(#{$custom-control-indicator-checked-color}, '#', '%23'), str-replace(#{$newColor}, '#', '%23'));
  30. }
  31. }
  32. .form-control:focus:not(.is-invalid):not(.is-warning):not(.is-valid),
  33. .custom-select:focus,
  34. .custom-control-input:focus:not(:checked) ~ .custom-control-label::before,
  35. .custom-file-input:focus ~ .custom-file-label {
  36. border-color: lighten($color, 25%);
  37. }
  38. [class*="sidebar-light-"],
  39. &[class*="sidebar-dark-"] {
  40. .nav-sidebar .nav-treeview > .nav-item > {
  41. .nav-link:not(.active):hover {
  42. color: $color;
  43. }
  44. }
  45. }
  46. .page-item {
  47. &.active .page-link {
  48. background-color: $pagination-active-bg;
  49. border-color: $pagination-active-border-color;
  50. }
  51. &.disabled .page-link {
  52. background-color: $pagination-disabled-bg;
  53. border-color: $pagination-disabled-border-color;
  54. }
  55. }
  56. }
  57. }