iconButton.scss 2.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. @import "./variables.scss";
  2. @import "../keyframes/rotate.scss";
  3. $module: #{$prefix}-button;
  4. .#{$module} {
  5. &.#{$module}-with-icon {
  6. display: inline-flex;
  7. align-items: center;
  8. .#{$module}-content {
  9. display: flex;
  10. align-items: center;
  11. justify-content: center;
  12. }
  13. }
  14. &.#{$module}-loading {
  15. pointer-events: none;
  16. cursor: not-allowed;
  17. .#{$module}-content {
  18. &>svg {
  19. width: 16px;
  20. height: 16px;
  21. animation: .6s linear infinite #{$prefix}-animation-rotate;
  22. animation-fill-mode: forwards;
  23. }
  24. }
  25. }
  26. &.#{$module}-with-icon-only {
  27. padding-left: $spacing-button_iconOnly_default-paddingLeft;
  28. padding-right: $spacing-button_iconOnly_default-paddingRight;
  29. padding-top: $spacing-button_iconOnly_default-paddingTop;
  30. padding-bottom: $spacing-button_iconOnly_default-paddingRight;
  31. justify-content: center;
  32. align-items: center;
  33. &.#{$module}-size {
  34. &-small {
  35. padding-left: $spacing-button_iconOnly_small-paddingLeft;
  36. padding-right: $spacing-button_iconOnly_small-paddingRight;
  37. padding-top: $spacing-button_iconOnly_small-paddingTop;
  38. padding-bottom: $spacing-button_iconOnly_small-paddingBottom;
  39. }
  40. &-large {
  41. padding-left: $spacing-button_iconOnly_large-paddingLeft;
  42. padding-right: $spacing-button_iconOnly_large-paddingRight;
  43. padding-top: $spacing-button_iconOnly_large-paddingTop;
  44. padding-bottom: $spacing-button_iconOnly_large-paddingBottom;
  45. }
  46. }
  47. }
  48. &-content {
  49. &-left {
  50. margin-right: $spacing-button_iconOnly_content-marginRight;
  51. }
  52. &-right {
  53. margin-left: $spacing-button_iconOnly_content-marginLeft;
  54. }
  55. }
  56. }
  57. @import "./rtl.scss";