diff options
| author | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-20 16:15:18 -0400 |
|---|---|---|
| committer | Pliable Pixels <pliablepixels@gmail.com> | 2017-09-20 16:15:18 -0400 |
| commit | 676270d21beed31d767a06c89522198c77d5d865 (patch) | |
| tree | 902772af01bfbcf80955f0351a5aae9eb029b9b0 /www/lib/ionic/scss/_button-bar.scss | |
Initial commit
Diffstat (limited to 'www/lib/ionic/scss/_button-bar.scss')
| -rw-r--r-- | www/lib/ionic/scss/_button-bar.scss | 92 |
1 files changed, 92 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_button-bar.scss b/www/lib/ionic/scss/_button-bar.scss new file mode 100644 index 00000000..da809d15 --- /dev/null +++ b/www/lib/ionic/scss/_button-bar.scss @@ -0,0 +1,92 @@ + +/** + * Button Bar + * -------------------------------------------------- + */ + +.button-bar { + @include display-flex(); + @include flex(1); + width: 100%; + + &.button-bar-inline { + display: block; + width: auto; + + @include clearfix(); + + > .button { + width: auto; + display: inline-block; + float: left; + } + } + + &.bar-light > .button { + border-color: $button-light-border; + } + &.bar-stable > .button { + border-color: $button-stable-border; + } + &.bar-positive > .button { + border-color: $button-positive-border; + } + &.bar-calm > .button { + border-color: $button-calm-border; + } + &.bar-assertive > .button { + border-color: $button-assertive-border; + } + &.bar-balanced > .button { + border-color: $button-balanced-border; + } + &.bar-energized > .button { + border-color: $button-energized-border; + } + &.bar-royal > .button { + border-color: $button-royal-border; + } + &.bar-dark > .button { + border-color: $button-dark-border; + } +} + +.button-bar > .button { + @include flex(1); + display: block; + + overflow: hidden; + + padding: 0 16px; + + width: 0; + + border-width: 1px 0px 1px 1px; + border-radius: 0; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + + &:before, + .icon:before { + line-height: 44px; + } + + &:first-child { + border-radius: $button-border-radius 0px 0px $button-border-radius; + } + &:last-child { + border-right-width: 1px; + border-radius: 0px $button-border-radius $button-border-radius 0px; + } + &:only-child { + border-radius: $button-border-radius; + } +} + +.button-bar > .button-small { + &:before, + .icon:before { + line-height: 28px; + } +} |
