diff options
Diffstat (limited to 'www/lib/ionic/scss/_button.scss')
| -rw-r--r-- | www/lib/ionic/scss/_button.scss | 252 |
1 files changed, 252 insertions, 0 deletions
diff --git a/www/lib/ionic/scss/_button.scss b/www/lib/ionic/scss/_button.scss new file mode 100644 index 00000000..93a47c6a --- /dev/null +++ b/www/lib/ionic/scss/_button.scss @@ -0,0 +1,252 @@ + +/** + * Buttons + * -------------------------------------------------- + */ + +.button { + // set the color defaults + @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text); + + position: relative; + display: inline-block; + margin: 0; + padding: 0 $button-padding; + + min-width: ($button-padding * 3) + $button-font-size; + min-height: $button-height + 5px; + + border-width: $button-border-width; + border-style: solid; + border-radius: $button-border-radius; + + vertical-align: top; + text-align: center; + + text-overflow: ellipsis; + font-size: $button-font-size; + line-height: $button-height - $button-border-width + 1px; + + cursor: pointer; + + &:after { + // used to create a larger button "hit" area + position: absolute; + top: -6px; + right: -6px; + bottom: -6px; + left: -6px; + content: ' '; + } + + .icon { + vertical-align: top; + pointer-events: none; + } + + .icon:before, + &.icon:before, + &.icon-left:before, + &.icon-right:before { + display: inline-block; + padding: 0 0 $button-border-width 0; + vertical-align: inherit; + font-size: $button-icon-size; + line-height: $button-height - $button-border-width; + pointer-events: none; + } + &.icon-left:before { + float: left; + padding-right: .2em; + padding-left: 0; + } + &.icon-right:before { + float: right; + padding-right: 0; + padding-left: .2em; + } + + &.button-block, &.button-full { + margin-top: $button-block-margin; + margin-bottom: $button-block-margin; + } + + &.button-light { + @include button-style($button-light-bg, $button-default-border, $button-light-active-bg, $button-default-active-border, $button-light-text); + @include button-clear($button-light-border); + @include button-outline($button-light-border); + } + + &.button-stable { + @include button-style($button-stable-bg, $button-default-border, $button-stable-active-bg, $button-default-active-border, $button-stable-text); + @include button-clear($button-stable-border); + @include button-outline($button-stable-border); + } + + &.button-positive { + @include button-style($button-positive-bg, $button-default-border, $button-positive-active-bg, $button-default-active-border, $button-positive-text); + @include button-clear($button-positive-bg); + @include button-outline($button-positive-bg); + } + + &.button-calm { + @include button-style($button-calm-bg, $button-default-border, $button-calm-active-bg, $button-default-active-border, $button-calm-text); + @include button-clear($button-calm-bg); + @include button-outline($button-calm-bg); + } + + &.button-assertive { + @include button-style($button-assertive-bg, $button-default-border, $button-assertive-active-bg, $button-default-active-border, $button-assertive-text); + @include button-clear($button-assertive-bg); + @include button-outline($button-assertive-bg); + } + + &.button-balanced { + @include button-style($button-balanced-bg, $button-default-border, $button-balanced-active-bg, $button-default-active-border, $button-balanced-text); + @include button-clear($button-balanced-bg); + @include button-outline($button-balanced-bg); + } + + &.button-energized { + @include button-style($button-energized-bg, $button-default-border, $button-energized-active-bg, $button-default-active-border, $button-energized-text); + @include button-clear($button-energized-bg); + @include button-outline($button-energized-bg); + } + + &.button-royal { + @include button-style($button-royal-bg, $button-default-border, $button-royal-active-bg, $button-default-active-border, $button-royal-text); + @include button-clear($button-royal-bg); + @include button-outline($button-royal-bg); + } + + &.button-dark { + @include button-style($button-dark-bg, $button-default-border, $button-dark-active-bg, $button-default-active-border, $button-dark-text); + @include button-clear($button-dark-bg); + @include button-outline($button-dark-bg); + } +} + +.button-small { + padding: 2px $button-small-padding 1px; + min-width: $button-small-height; + min-height: $button-small-height + 2; + font-size: $button-small-font-size; + line-height: $button-small-height - $button-border-width - 1; + + .icon:before, + &.icon:before, + &.icon-left:before, + &.icon-right:before { + font-size: $button-small-icon-size; + line-height: $button-small-icon-size + 3; + margin-top: 3px; + } +} + +.button-large { + padding: 0 $button-large-padding; + min-width: ($button-large-padding * 3) + $button-large-font-size; + min-height: $button-large-height + 5; + font-size: $button-large-font-size; + line-height: $button-large-height - $button-border-width; + + .icon:before, + &.icon:before, + &.icon-left:before, + &.icon-right:before { + padding-bottom: ($button-border-width * 2); + font-size: $button-large-icon-size; + line-height: $button-large-height - ($button-border-width * 2) - 1; + } +} + +.button-icon { + @include transition(opacity .1s); + padding: 0 6px; + min-width: initial; + border-color: transparent; + background: none; + + &.button.active, + &.button.activated { + border-color: transparent; + background: none; + box-shadow: none; + opacity: 0.3; + } + + .icon:before, + &.icon:before { + font-size: $button-large-icon-size; + } +} + +.button-clear { + @include button-clear($button-default-border); + @include transition(opacity .1s); + padding: 0 $button-clear-padding; + max-height: $button-height; + border-color: transparent; + background: none; + box-shadow: none; + + &.active, + &.activated { + opacity: 0.3; + } +} + +.button-outline { + @include button-outline($button-default-border); + @include transition(opacity .1s); + background: none; + box-shadow: none; +} + +.padding > .button.button-block:first-child { + margin-top: 0; +} + +.button-block { + display: block; + clear: both; + + &:after { + clear: both; + } +} + +.button-full, +.button-full > .button { + display: block; + margin-right: 0; + margin-left: 0; + border-right-width: 0; + border-left-width: 0; + border-radius: 0; +} + +button.button-block, +button.button-full, +.button-full > button.button, +input.button.button-block { + width: 100%; +} + +a.button { + text-decoration: none; + + .icon:before, + &.icon:before, + &.icon-left:before, + &.icon-right:before { + margin-top: 2px; + } +} + +.button.disabled, +.button[disabled] { + opacity: .4; + cursor: default !important; + pointer-events: none; +} |