_buttons.scss 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109
  1. //@mixin button-variant(
  2. // $background,
  3. // $border,
  4. // $color: color-contrast($background),
  5. // $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  6. // $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  7. // $hover-color: color-contrast($hover-background),
  8. // $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  9. // $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  10. // $active-color: color-contrast($active-background),
  11. // $disabled-background: $background,
  12. // $disabled-border: $border,
  13. // $disabled-color: color-contrast($disabled-background)
  14. //) {
  15. // --#{$prefix}btn-color: #{$color};
  16. // --#{$prefix}btn-bg: #{$background};
  17. // --#{$prefix}btn-border-color: #{$border};
  18. // --#{$prefix}btn-hover-color: #{$hover-color};
  19. // --#{$prefix}btn-hover-bg: #{$hover-background};
  20. // --#{$prefix}btn-hover-border-color: #{$hover-border};
  21. // --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  22. // --#{$prefix}btn-active-color: #{$active-color};
  23. // --#{$prefix}btn-active-bg: #{$active-background};
  24. // --#{$prefix}btn-active-border-color: #{$active-border};
  25. // --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  26. // --#{$prefix}btn-disabled-color: #{$disabled-color};
  27. // --#{$prefix}btn-disabled-bg: #{$disabled-background};
  28. // --#{$prefix}btn-disabled-border-color: #{$disabled-border};
  29. //}
  30. @mixin iconed-button-variant(
  31. $simple: false,
  32. $background,
  33. $border,
  34. $color: color-contrast($background),
  35. $icon-color: $color,
  36. $icon-bg: shade-color($background, $btn-hover-bg-shade-amount),
  37. $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  38. $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  39. $hover-color: color-contrast($hover-background),
  40. $icon-hover-bg: $hover-background,
  41. $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  42. $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  43. $active-color: color-contrast($active-background),
  44. $disabled-background: $background,
  45. $disabled-border: $border,
  46. $disabled-color: color-contrast($disabled-background),
  47. ) {
  48. --#{$prefix}btn-color: #{$color};
  49. --#{$prefix}btn-bg: #{$background};
  50. --#{$prefix}btn-border-color: #{$border};
  51. --#{$prefix}btn-hover-color: #{$hover-color};
  52. --#{$prefix}btn-hover-bg: #{$hover-background};
  53. --#{$prefix}btn-hover-border-color: #{$hover-border};
  54. --#{$prefix}btn-focus-shadow-rgb: #{to-rgb(mix($color, $border, 15%))};
  55. --#{$prefix}btn-active-color: #{$active-color};
  56. --#{$prefix}btn-active-bg: #{$active-background};
  57. --#{$prefix}btn-active-border-color: #{$active-border};
  58. --#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
  59. --#{$prefix}btn-disabled-color: #{$disabled-color};
  60. --#{$prefix}btn-disabled-bg: #{$disabled-background};
  61. --#{$prefix}btn-disabled-border-color: #{$disabled-border};
  62. --#{$prefix}btn-icon-color: #{$icon-color};
  63. --#{$prefix}btn-icon-hover-color: #{$hover-color};
  64. @if ($simple == false) {
  65. --#{$prefix}btn-icon-bg: #{$icon-bg};
  66. --#{$prefix}btn-icon-hover-bg: #{$icon-hover-bg};
  67. }
  68. --activetes: #{$active-background};
  69. }
  70. //@mixin iconed-button-variant($color, $background, $border, $hoverColor: null, $simple: false, $iconColor: null, $active-background: null) {
  71. //
  72. // //border raus
  73. // $active-background: if($active-background, $active-background, darken($background, 9%));
  74. // $active-border: darken($border, 12%);
  75. // $hoverColor: if($hoverColor, $hoverColor, $color);
  76. //
  77. // color: $color;
  78. // background-color: $background;
  79. //
  80. // //@include box-shadow($btn-box-shadow);
  81. //
  82. // //@include hover-focus {
  83. // // color: $hoverColor;
  84. // // background-color: $active-background;
  85. // // border-color: $active-border;
  86. // //}
  87. //
  88. // //&.active {
  89. // // color: $hoverColor;
  90. // // background-color: $active-background;
  91. // // border-color: $active-border;
  92. // //}
  93. //
  94. // & > .btn-icon {
  95. // @include transition($btn-transition);
  96. // @if ($iconColor) {
  97. // color: $iconColor;
  98. // }
  99. // @if ($simple == false) {
  100. // background: $active-background;
  101. // }
  102. // }
  103. //}