javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(button): added button class to the button directive and got them working more

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-04 16:12:45 -05:00
parent 5b0c174939
commit 5f221e273b
5 changed files with 106 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ionic/components/button/button.scss
View File

@ -21,8 +21,15 @@ $button-hover-opacity: 0.8 !default;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
transition: background-color, opacity 100ms linear;
margin: $button-margin;
padding: $button-padding;
min-height: $button-height;
line-height: 1; line-height: 1;
border: 1px solid #ccc;
border: transparent;
border-radius: $button-border-radius;
font-size: $button-font-size; font-size: $button-font-size;
font-family: inherit; font-family: inherit;
@ -43,6 +50,17 @@ $button-hover-opacity: 0.8 !default;
@include user-select-none(); @include user-select-none();
@include appearance(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 // Button Types
// -------------------------------------------------- // --------------------------------------------------

5
ionic/components/button/button.ts
View File

@ -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. * 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({ @Directive({
selector: 'button,[button]' selector: 'button,[button]',
host: {
'class': 'button'
}
}) })
export class Button { export class Button {

4
ionic/components/button/modes/ios.scss
View File

@ -9,9 +9,7 @@
// iOS Button (largely the core button styles) // iOS Button (largely the core button styles)
// -------------------------------------------------- // --------------------------------------------------
button { .button-block {
&[block] {
// This fixes an issue with flexbox and button on iOS Safari. See #225 // This fixes an issue with flexbox and button on iOS Safari. See #225
display: block; display: block;
}
} }

50
ionic/components/button/modes/md.scss
View File

@ -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-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; border-radius: $button-md-border-radius;
min-height: $button-md-min-height; min-height: $button-md-min-height;
@ -46,46 +45,47 @@ button,
&:hover:not(.disable-hover) { &:hover:not(.disable-hover) {
background-color: $button-md-clear-hover-background-color; background-color: $button-md-clear-hover-background-color;
} }
}
&[full] { .button-full {
border-radius: 0; border-radius: 0;
} }
&[round] { .button-round {
border-radius: $button-round-border-radius; border-radius: $button-round-border-radius;
padding: $button-round-padding; padding: $button-round-padding;
} }
&[large] { .button-large {
padding: 0 $button-large-padding; padding: 0 $button-large-padding;
min-height: $button-large-height; min-height: $button-large-height;
font-size: $button-large-font-size; font-size: $button-large-font-size;
} }
&[small] { .button-small {
padding: 0 $button-small-padding; padding: 0 $button-small-padding;
min-height: $button-small-height; min-height: $button-small-height;
font-size: $button-small-font-size; font-size: $button-small-font-size;
} }
&.activated { &.activated {
box-shadow: $button-md-box-shadow-active; box-shadow: $button-md-box-shadow-active;
} }
&[fab] { .button-fab {
border-radius: 50%; border-radius: 50%;
box-shadow: $button-md-fab-box-shadow; box-shadow: $button-md-fab-box-shadow;
&.activated { &.activated {
box-shadow: $button-md-fab-box-shadow-active; box-shadow: $button-md-fab-box-shadow-active;
} }
} }
&.icon-only { .button-icon-only {
padding: 0; padding: 0;
} }
&[outline] { .button-outline {
box-shadow: none; box-shadow: none;
&.activated { &.activated {
@ -95,33 +95,27 @@ button,
md-ripple { md-ripple {
background: rgba( red($button-color), green($button-color), blue($button-color), 0.1); background: rgba( red($button-color), green($button-color), blue($button-color), 0.1);
} }
} }
&[clear] { .button-clear {
opacity: 1; opacity: 1;
box-shadow: none; box-shadow: none;
&.activated { &.activated {
background-color: $button-md-clear-active-background-color; background-color: $button-md-clear-active-background-color;
} }
}
} }
// Material Design Button Color Mixin // Material Design Button Color Mixin
// -------------------------------------------------- // --------------------------------------------------
@mixin button-theme-md($color-name, $color-value) { @mixin button-theme-md($color-name, $color-value) {
button[#{$color-name}], .button-#{$color-name}.activated {
[button][#{$color-name}] {
&.activated {
opacity: 1; opacity: 1;
} }
&[outline] { .button-outline {
md-ripple { md-ripple {
background: rgba( red($color-value), green($color-value), blue($color-value), 0.2); background: rgba( red($color-value), green($color-value), blue($color-value), 0.2);
@ -136,8 +130,6 @@ button,
} }
} }
}
} }

24
ionic/components/button/test/block/main.html
View File

@ -6,33 +6,33 @@
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<a button class="button-block" href="#">a[button].button-block</a> <a button class="button-block" href="#">a block</a>
<button block>button.button-block</button> <button class="button-block">block</button>
</p> </p>
<p> <p>
<a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a> <a button class="button-block" href="#"><icon help-circle></icon> a block icon</a>
<button block><icon help-circle></icon> button.button-block icon</button> <button class="button-block"><icon help-circle></icon> block icon</button>
</p> </p>
<p> <p>
<a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a> <a button class="button-block button-outline-secondary" href="#">a block outline secondary</a>
<button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button> <button class="button-block button-outline-secondary">button block outline secondary</button>
</p> </p>
<p> <p>
<a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a> <a button class="button-block button-clear-dark" href="#">a block clear dark</a>
<button class="button-block button-clear-dark">button.button-block.button-clear-dark</button> <button class="button-block button-clear-dark">button block clear dark</button>
</p> </p>
<p> <p>
<a button class="button-block button-round" href="#">a[button].button-block.button-round</a> <a button class="button-block button-round" href="#">a block round</a>
<button class="button-block button-round">button.button-block.button-round</button> <button class="button-block button-round">button block ound</button>
</p> </p>
<p> <p>
<a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a> <a button class="button-block button-round button-outline" href="#">a block round outline</a>
<button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button> <button class="button-block button-round button-outline">button block round outline</button>
</p> </p>
</ion-content> </ion-content>