123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
  1. @import "../../themes/ionic.globals";
  2. // Buttons
  3. // --------------------------------------------------
  4. // deprecated
  5. $button-round-padding: null !default;
  6. /// @prop - Padding top of the round button
  7. $button-round-padding-top: 0 !default;
  8. /// @prop - Padding end of the round button
  9. $button-round-padding-end: 2.6rem !default;
  10. /// @prop - Padding bottom of the round button
  11. $button-round-padding-bottom: $button-round-padding-top !default;
  12. /// @prop - Padding start of the round button
  13. $button-round-padding-start: $button-round-padding-end !default;
  14. /// @prop - Border radius of the round button
  15. $button-round-border-radius: 64px !default;
  16. .button {
  17. @include text-align(center);
  18. @include appearance(none);
  19. position: relative;
  20. z-index: 0;
  21. display: inline-block;
  22. text-overflow: ellipsis;
  23. text-transform: none;
  24. white-space: nowrap;
  25. cursor: pointer;
  26. vertical-align: top; // the better option for most scenarios
  27. vertical-align: -webkit-baseline-middle; // the best for those that support it
  28. transition: background-color, opacity 100ms linear;
  29. font-kerning: none;
  30. user-select: none;
  31. contain: content;
  32. }
  33. .button-inner {
  34. display: flex;
  35. flex-flow: row nowrap;
  36. flex-shrink: 0;
  37. align-items: center;
  38. justify-content: center;
  39. width: 100%;
  40. height: 100%;
  41. }
  42. [ion-button] {
  43. text-decoration: none;
  44. }
  45. a[disabled],
  46. button[disabled],
  47. [ion-button][disabled] {
  48. cursor: default;
  49. opacity: .4;
  50. pointer-events: none;
  51. }
  52. // Block Button
  53. // --------------------------------------------------
  54. .button-block {
  55. display: block;
  56. clear: both;
  57. width: 100%;
  58. contain: strict;
  59. }
  60. .button-block::after {
  61. clear: both;
  62. }
  63. // Full Button
  64. // --------------------------------------------------
  65. .button-full {
  66. display: block;
  67. width: 100%;
  68. contain: strict;
  69. }
  70. // Full Outline Button
  71. // --------------------------------------------------
  72. .button-full.button-outline {
  73. @include border-radius(0);
  74. border-right-width: 0;
  75. border-left-width: 0;
  76. }