You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

91 lines
2.8 KiB

3 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
  1. //
  2. // Buttons
  3. // --------------------------------------------------
  4. // Fix simple icon position
  5. .btn .si {
  6. position: relative;
  7. top: 1px;
  8. }
  9. // Variant buttons
  10. .btn-secondary {
  11. @include button-variant($gray-700, $gray-700);
  12. }
  13. // Alternate variant buttons
  14. .btn-alt-primary {
  15. @include button-variant(tint-color($primary, 75%), tint-color($primary, 75%), shade-color($primary, 40%), tint-color($primary, 50%), tint-color($primary, 50%), shade-color($primary, 60%));
  16. }
  17. .btn-alt-secondary {
  18. @include button-variant($body-bg, $body-bg, $body-color-dark, shade-color($body-bg, 10%), shade-color($body-bg, 10%), shade-color($body-color-dark, 15%));
  19. }
  20. .btn-alt-success {
  21. @include button-variant(tint-color($success, 75%), tint-color($success, 75%), shade-color($success, 40%), tint-color($success, 50%), tint-color($success, 50%), shade-color($success, 60%));
  22. }
  23. .btn-alt-info {
  24. @include button-variant(tint-color($info, 75%), tint-color($info, 75%), shade-color($info, 40%), tint-color($info, 50%), tint-color($info, 50%), shade-color($info, 60%));
  25. }
  26. .btn-alt-warning {
  27. @include button-variant(tint-color($warning, 75%), tint-color($warning, 75%), shade-color($warning, 40%), tint-color($warning, 50%), tint-color($warning, 50%), shade-color($warning, 60%));
  28. }
  29. .btn-alt-danger {
  30. @include button-variant(tint-color($danger, 75%), tint-color($danger, 75%), shade-color($danger, 40%), tint-color($danger, 50%), tint-color($danger, 50%), shade-color($danger, 60%));
  31. }
  32. // Hero variant buttons
  33. .btn-hero {
  34. &.btn-primary {
  35. @include button-hero-variant($primary);
  36. }
  37. &.btn-secondary {
  38. @include button-hero-variant($secondary);
  39. }
  40. &.btn-success {
  41. @include button-hero-variant($success);
  42. }
  43. &.btn-info {
  44. @include button-hero-variant($info);
  45. }
  46. &.btn-warning {
  47. @include button-hero-variant($warning);
  48. }
  49. &.btn-danger {
  50. @include button-hero-variant($danger);
  51. }
  52. &.btn-dark {
  53. @include button-hero-variant($dark);
  54. }
  55. &.btn-light {
  56. @include button-hero-variant($light);
  57. }
  58. // Hero size variant buttons
  59. &.btn-lg {
  60. @include button-size($btn-hero-padding-y-lg, $btn-hero-padding-x-lg, $font-size-sm, $btn-hero-border-radius);
  61. }
  62. &.btn-sm {
  63. @include button-size($btn-hero-padding-y-sm, $btn-hero-padding-x-sm, $font-size-sm, $btn-hero-border-radius);
  64. }
  65. }
  66. // Alternate secondary adapts on dark header/sidebar
  67. .page-header-dark #page-header .btn-alt-secondary,
  68. .sidebar-dark #sidebar .btn-alt-secondary,
  69. #sidebar .bg-header-dark .content-header .btn-alt-secondary,
  70. .page-header-dark.page-header-glass:not(.page-header-scroll) #page-header .btn-alt-secondary {
  71. @include button-variant(tint-color($header-dark-bg, 15%), tint-color($header-dark-bg, 15%), $white, tint-color($header-dark-bg, 25%), tint-color($header-dark-bg, 25%), $white);
  72. }