_accent.scss 2.1 KB

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