| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113 |
- @import "../../themes/ionic.globals";
-
- // Buttons
- // --------------------------------------------------
-
- // deprecated
- $button-round-padding: null !default;
-
- /// @prop - Padding top of the round button
- $button-round-padding-top: 0 !default;
-
- /// @prop - Padding end of the round button
- $button-round-padding-end: 2.6rem !default;
-
- /// @prop - Padding bottom of the round button
- $button-round-padding-bottom: $button-round-padding-top !default;
-
- /// @prop - Padding start of the round button
- $button-round-padding-start: $button-round-padding-end !default;
-
- /// @prop - Border radius of the round button
- $button-round-border-radius: 64px !default;
-
-
- .button {
- @include text-align(center);
- @include appearance(none);
-
- position: relative;
- z-index: 0;
- display: inline-block;
-
- text-overflow: ellipsis;
- text-transform: none;
-
- white-space: nowrap;
- cursor: pointer;
- vertical-align: top; // the better option for most scenarios
- vertical-align: -webkit-baseline-middle; // the best for those that support it
-
- transition: background-color, opacity 100ms linear;
-
- font-kerning: none;
- user-select: none;
-
- contain: content;
- }
-
- .button-inner {
- display: flex;
-
- flex-flow: row nowrap;
- flex-shrink: 0;
- align-items: center;
- justify-content: center;
-
- width: 100%;
- height: 100%;
- }
-
-
- [ion-button] {
- text-decoration: none;
- }
-
- a[disabled],
- button[disabled],
- [ion-button][disabled] {
- cursor: default;
- opacity: .4;
-
- pointer-events: none;
- }
-
-
- // Block Button
- // --------------------------------------------------
-
- .button-block {
- display: block;
- clear: both;
-
- width: 100%;
-
- contain: strict;
- }
-
- .button-block::after {
- clear: both;
- }
-
-
- // Full Button
- // --------------------------------------------------
-
- .button-full {
- display: block;
-
- width: 100%;
-
- contain: strict;
- }
-
- // Full Outline Button
- // --------------------------------------------------
-
- .button-full.button-outline {
- @include border-radius(0);
-
- border-right-width: 0;
- border-left-width: 0;
- }
|