mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(button): added button class to the button directive and got them working more
references #689
This commit is contained in:
Brandy Carney
@ -21,8 +21,15 @@ $button-hover-opacity: 0.8 !default;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color, opacity 100ms linear;
|
||||
margin: $button-margin;
|
||||
padding: $button-padding;
|
||||
min-height: $button-height;
|
||||
line-height: 1;
|
||||
|
||||
border: 1px solid #ccc;
|
||||
border: transparent;
|
||||
border-radius: $button-border-radius;
|
||||
|
||||
font-size: $button-font-size;
|
||||
font-family: inherit;
|
||||
@ -43,6 +50,17 @@ $button-hover-opacity: 0.8 !default;
|
||||
@include user-select-none();
|
||||
@include appearance(none);
|
||||
|
||||
background: $button-color;
|
||||
color: $button-text-color;
|
||||
&:hover:not(.disable-hover) {
|
||||
opacity: $button-hover-opacity;
|
||||
text-decoration: none;
|
||||
}
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
background-color: $button-color-activated;
|
||||
}
|
||||
|
||||
// Button Types
|
||||
// --------------------------------------------------
|
||||
|
||||
|
||||
@ -28,7 +28,10 @@ import {Config} from '../../config/config';
|
||||
* Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
|
||||
*/
|
||||
@Directive({
|
||||
selector: 'button,[button]'
|
||||
selector: 'button,[button]',
|
||||
host: {
|
||||
'class': 'button'
|
||||
}
|
||||
})
|
||||
export class Button {
|
||||
|
||||
|
||||
@ -9,9 +9,7 @@
|
||||
// iOS Button (largely the core button styles)
|
||||
// --------------------------------------------------
|
||||
|
||||
button {
|
||||
&[block] {
|
||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||
display: block;
|
||||
}
|
||||
.button-block {
|
||||
// This fixes an issue with flexbox and button on iOS Safari. See #225
|
||||
display: block;
|
||||
}
|
||||
|
||||
@ -26,8 +26,7 @@ $button-md-fab-box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14), 0 4p
|
||||
$button-md-fab-box-shadow-active: 0 5px 15px 0 rgba(0, 0, 0, 0.4), 0 4px 7px 0 rgba(0, 0, 0, 0.1) !default;
|
||||
|
||||
|
||||
button,
|
||||
[button] {
|
||||
.button {
|
||||
border-radius: $button-md-border-radius;
|
||||
|
||||
min-height: $button-md-min-height;
|
||||
@ -46,96 +45,89 @@ button,
|
||||
&:hover:not(.disable-hover) {
|
||||
background-color: $button-md-clear-hover-background-color;
|
||||
}
|
||||
|
||||
&[full] {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
&[round] {
|
||||
border-radius: $button-round-border-radius;
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
&[large] {
|
||||
padding: 0 $button-large-padding;
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
&[small] {
|
||||
padding: 0 $button-small-padding;
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-box-shadow-active;
|
||||
}
|
||||
|
||||
&[fab] {
|
||||
border-radius: 50%;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
&.icon-only {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&[outline] {
|
||||
box-shadow: none;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&[clear] {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-active-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.button-full {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.button-round {
|
||||
border-radius: $button-round-border-radius;
|
||||
padding: $button-round-padding;
|
||||
}
|
||||
|
||||
.button-large {
|
||||
padding: 0 $button-large-padding;
|
||||
min-height: $button-large-height;
|
||||
font-size: $button-large-font-size;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
padding: 0 $button-small-padding;
|
||||
min-height: $button-small-height;
|
||||
font-size: $button-small-font-size;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-box-shadow-active;
|
||||
}
|
||||
|
||||
.button-fab {
|
||||
border-radius: 50%;
|
||||
box-shadow: $button-md-fab-box-shadow;
|
||||
|
||||
&.activated {
|
||||
box-shadow: $button-md-fab-box-shadow-active;
|
||||
}
|
||||
}
|
||||
|
||||
.button-icon-only {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
box-shadow: none;
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.button-clear {
|
||||
opacity: 1;
|
||||
box-shadow: none;
|
||||
|
||||
&.activated {
|
||||
background-color: $button-md-clear-active-background-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Material Design Button Color Mixin
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin button-theme-md($color-name, $color-value) {
|
||||
|
||||
button[#{$color-name}],
|
||||
[button][#{$color-name}] {
|
||||
.button-#{$color-name}.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.button-outline {
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&[outline] {
|
||||
|
||||
md-ripple {
|
||||
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
|
||||
}
|
||||
|
||||
&.activated {
|
||||
opacity: 1;
|
||||
|
||||
md-ripple {
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
background: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -6,33 +6,33 @@
|
||||
<ion-content padding style="text-align:center">
|
||||
|
||||
<p>
|
||||
<a button class="button-block" href="#">a[button].button-block</a>
|
||||
<button block>button.button-block</button>
|
||||
<a button class="button-block" href="#">a block</a>
|
||||
<button class="button-block">block</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
|
||||
<button block><icon help-circle></icon> button.button-block icon</button>
|
||||
<a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
|
||||
<button class="button-block"><icon help-circle></icon> block icon</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
|
||||
<button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
|
||||
<a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
|
||||
<button class="button-block button-outline-secondary">button block outline secondary</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
|
||||
<button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
|
||||
<a button class="button-block button-clear-dark" href="#">a block clear dark</a>
|
||||
<button class="button-block button-clear-dark">button block clear dark</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
|
||||
<button class="button-block button-round">button.button-block.button-round</button>
|
||||
<a button class="button-block button-round" href="#">a block round</a>
|
||||
<button class="button-block button-round">button block ound</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
|
||||
<button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
|
||||
<a button class="button-block button-round button-outline" href="#">a block round outline</a>
|
||||
<button class="button-block button-round button-outline">button block round outline</button>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
|
||||
Reference in New Issue
Block a user