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

refactor(button): changed button attributes to classes

Browse Source 
references #689
This commit is contained in:
Brandy Carney
2015-12-04 15:44:37 -05:00
parent 8148927c88
commit 90ad475836
11 changed files with 195 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/button/button-clear.scss
View File

@ -3,8 +3,7 @@
// Clear Button // Clear Button
// -------------------------------------------------- // --------------------------------------------------
button[clear], .button-clear {
[button][clear] {
border-color: transparent; border-color: transparent;
background: transparent; background: transparent;
color: color-shade($button-color); color: color-shade($button-color);
@ -29,8 +28,7 @@ button[clear],
$fg-color: color-shade($color-value); $fg-color: color-shade($color-value);
button[clear][#{$color-name}], .button-clear-#{$color-name} {
[button][clear][#{$color-name}] {
border-color: transparent; border-color: transparent;
background: transparent; background: transparent;
color: $fg-color; color: $fg-color;

12
ionic/components/button/button-outline.scss
View File

@ -3,10 +3,7 @@
// Outline Button // Outline Button
// -------------------------------------------------- // --------------------------------------------------
button, .button-outline {
[button] {
&[outline] {
border: 1px solid $button-color; border: 1px solid $button-color;
background: transparent; background: transparent;
color: $button-color; color: $button-color;
@ -18,15 +15,12 @@ button,
} }
} }
}
// Outline Button Color Mixin // Outline Button Color Mixin
// -------------------------------------------------- // --------------------------------------------------
@mixin button-outline($fg-color) { @mixin button-outline($fg-color) {
&[outline] {
border-color: $fg-color; border-color: $fg-color;
background: transparent; background: transparent;
color: $fg-color; color: $fg-color;
@ -35,7 +29,6 @@ button,
color: $background-color; color: $background-color;
background-color: $fg-color; background-color: $fg-color;
} }
}
} }
@ -45,8 +38,7 @@ button,
@each $color-name, $color-value in auxiliary-colors() { @each $color-name, $color-value in auxiliary-colors() {
button[#{$color-name}], .button-outline-#{$color-name} {
[button][#{$color-name}] {
$fg-color: color-shade($color-value, 5%); $fg-color: color-shade($color-value, 5%);
@include button-outline($fg-color); @include button-outline($fg-color);

9
ionic/components/button/button-size.scss
View File

@ -12,19 +12,14 @@ $button-small-height: 2.1em !default;
$button-small-padding: 0.9em !default; $button-small-padding: 0.9em !default;
button, .button-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;
} }
}

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

@ -14,9 +14,7 @@ $button-color-activated: color-shade($button-color) !default;
$button-text-color: inverse($button-color) !default; $button-text-color: inverse($button-color) !default;
$button-hover-opacity: 0.8 !default; $button-hover-opacity: 0.8 !default;
.button {
button,
[button] {
position: relative; position: relative;
display: inline-flex; display: inline-flex;
flex-shrink: 0; flex-shrink: 0;
@ -44,8 +42,95 @@ button,
cursor: pointer; cursor: pointer;
@include user-select-none(); @include user-select-none();
@include appearance(none); @include appearance(none);
// Button Types
// --------------------------------------------------
.button-block {
display: flex;
clear: both;
margin-right: 0;
margin-left: 0;
width: 100%;
&:after {
clear: both;
}
}
.button-full {
width: 100%;
margin-right: 0;
margin-left: 0;
border-radius: 0;
border-right-width: 0;
border-left-width: 0;
}
.button-round {
border-radius: $button-round-border-radius;
padding: $button-round-padding;
}
.button-disabled {
opacity: 0.4;
cursor: default !important;
pointer-events: none;
}
} }
a[button] { a[button] {
text-decoration: none; text-decoration: none;
} }
// TODO
// button should have classes:
// button, button-primary, button-secondary, etc.
// button holds all styling with default primary color(will this affect outline/clear?) and
// the other classes change the color
//
// button-clear should have classes:
// button-clear, button-clear-primary, button-clear-secondary, etc.
// button-clear holds all clear styling with default primary color and
// the other classes change the color
//
// button-outline should have classes:
// button-outline, button-outline-primary, button-outline-secondary, etc.
// button-outline holds all outline styling with default primary color and
// the other classes change the color
//
// button-block should stand alone
// button-full should stand alone
// button-round should stand alone
// button-disabled should stand alone(?)
// button-sizes should stand alone (button-small, button-large, etc)
// button-fab errrrr
// Default Button Color Mixin
// --------------------------------------------------
@mixin button-default($bg-color, $bg-color-activated, $text-color) {
background-color: $bg-color;
color: $text-color;
&.activated {
background-color: $bg-color-activated;
}
}
// Generate Default Button Colors
// --------------------------------------------------
@each $color-name, $color-value in $colors {
.button-#{$color-name} {
$bg-color: $color-value;
$bg-color-activated: color-shade($bg-color);
$text-color: inverse($bg-color);
@include button-default($bg-color, $bg-color-activated, $text-color);
}
}

20
ionic/components/button/test/basic/main.html
View File

@ -11,28 +11,28 @@
</p> </p>
<p> <p>
<button primary>Primary</button> <button class="button-primary">Primary</button>
<button primary class="activated">Primary.activated</button> <button class="button-primary activated">Primary.activated</button>
</p> </p>
<p> <p>
<button secondary>Secondary</button> <button class="button-secondary">Secondary</button>
<button secondary class="activated">Secondary.activated</button> <button class="button-secondary activated">Secondary.activated</button>
</p> </p>
<p> <p>
<button danger>Danger</button> <button class="button-danger">Danger</button>
<button danger class="activated">Danger.activated</button> <button class="button-danger activated">Danger.activated</button>
</p> </p>
<p> <p>
<button light>Light</button> <button class="button-light">Light</button>
<button light class="activated">Light.activated</button> <button class="button-light activated">Light.activated</button>
</p> </p>
<p> <p>
<button dark>Dark</button> <button class="button-dark">Dark</button>
<button dark class="activated">Dark.activated</button> <button class="button-dark activated">Dark.activated</button>
</p> </p>
</ion-content> </ion-content>

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 block href="#">a[button][block]</a> <a button class="button-block" href="#">a[button].button-block</a>
<button block>button[block]</button> <button block>button.button-block</button>
</p> </p>
<p> <p>
<a button block href="#"><icon help-circle></icon> a[button][block] icon</a> <a button class="button-block" href="#"><icon help-circle></icon> a[button].button-block icon</a>
<button block><icon help-circle></icon> button[block] icon</button> <button block><icon help-circle></icon> button.button-block icon</button>
</p> </p>
<p> <p>
<a button block outline secondary href="#">a[button][block][outline][secondary]</a> <a button class="button-block button-outline-secondary" href="#">a[button].button-block.button-outline-secondary</a>
<button block outline secondary>button[block][outline][secondary]</button> <button class="button-block button-outline-secondary">button.button-block.button-outline-secondary</button>
</p> </p>
<p> <p>
<a button block clear dark href="#">a[button][block][clear][dark]</a> <a button class="button-block button-clear-dark" href="#">a[button].button-block.button-clear-dark</a>
<button block clear dark>button[clear][block][dark]</button> <button class="button-block button-clear-dark">button.button-block.button-clear-dark</button>
</p> </p>
<p> <p>
<a button block round href="#">a[button][block][round]</a> <a button class="button-block button-round" href="#">a[button].button-block.button-round</a>
<button block round>button[block][round]</button> <button class="button-block button-round">button.button-block.button-round</button>
</p> </p>
<p> <p>
<a button block round outline href="#">a[button][block][round][outline]</a> <a button class="button-block button-round button-outline" href="#">a[button].button-block.button-round.button-outline</a>
<button block round outline>button[block][round][outline]</button> <button class="button-block button-round button-outline">button.button-block.button-round.button-outline</button>
</p> </p>
</ion-content> </ion-content>

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

@ -6,33 +6,33 @@
<ion-content padding style="text-align:center"> <ion-content padding style="text-align:center">
<p> <p>
<button clear>Default</button> <button class="button-clear">Default</button>
<button clear class="activated">Default.activated</button> <button class="button-clear activated">Default.activated</button>
</p> </p>
<p> <p>
<button clear primary>Primary</button> <button class="button-clear-primary">Primary</button>
<button clear primary class="activated">Primary.activated</button> <button class="button-clear-primary activated">Primary.activated</button>
</p> </p>
<p> <p>
<button clear secondary>Secondary</button> <button class="button-clear-secondary">Secondary</button>
<button clear secondary class="activated">Secondary.activated</button> <button class="button-clear-secondary activated">Secondary.activated</button>
</p> </p>
<p> <p>
<button clear danger>Danger</button> <button class="button-clear-danger">Danger</button>
<button clear danger class="activated">Danger.activated</button> <button class="button-clear-danger activated">Danger.activated</button>
</p> </p>
<p> <p>
<button clear light>Light</button> <button class="button-clear-light">Light</button>
<button clear light class="activated">Light.activated</button> <button class="button-clear-light activated">Light.activated</button>
</p> </p>
<p> <p>
<button clear dark>Dark</button> <button class="button-clear-dark">Dark</button>
<button clear dark class="activated">Dark.activated</button> <button class="button-clear-dark activated">Dark.activated</button>
</p> </p>
</ion-content> </ion-content>

16
ionic/components/button/test/full/main.html
View File

@ -6,23 +6,23 @@
<ion-content> <ion-content>
<div> <div>
<a button full href="#">a[button][full]</a> <a button class="button-full" href="#">a[button].button-full</a>
<button full>button[full]</button> <button class="button-full">button.button-full</button>
</div> </div>
<div> <div>
<a button full outline secondary href="#">a[button][full][outline][secondary]</a> <a button class="button-full button-outline-secondary" href="#">a[button].button-full.button-outline-secondary</a>
<button full outline secondary>button[full][outline][secondary]</button> <button class="button-full button-outline-secondary">button.button-full.button-outline-secondary</button>
</div> </div>
<div> <div>
<a button full clear light href="#">a[button][full][clear][light]</a> <a button class="button-full button-clear-light" href="#">a[button].button-full.button-clear-light</a>
<button full clear light>button[full][clear][light]</button> <button class="button-full button-clear-light">button.button-full.button-clear-light</button>
</div> </div>
<div> <div>
<a button full clear dark href="#">a[button][full][clear][dark]</a> <a button class="button-full button-clear-dark" href="#">a[button].button-full.button-clear-dark</a>
<button full clear dark>button[full][clear][dark]</button> <button class="button-full button-clear-dark">button.button-full.button-clear-dark</button>
</div> </div>
</ion-content> </ion-content>

32
ionic/components/button/test/outline/main.html
View File

@ -6,49 +6,49 @@
<ion-content padding style="text-align:center" class="outer-content"> <ion-content padding style="text-align:center" class="outer-content">
<p> <p>
<button outline>Default</button> <button class="button-outline">Default</button>
<button outline class="activated">Default.activated</button> <button class="button-outline activated">Default.activated</button>
</p> </p>
<p> <p>
<button outline primary>Primary</button> <button class="button-outline-primary">Primary</button>
<button outline primary class="activated">Primary.activated</button> <button class="button-outline-primary activated">Primary.activated</button>
</p> </p>
<p> <p>
<button outline secondary>Secondary</button> <button class="button-outline-secondary">Secondary</button>
<button outline secondary class="activated">Secondary.activated</button> <button class="button-outline-secondary activated">Secondary.activated</button>
</p> </p>
<p> <p>
<button outline danger>Danger</button> <button class="button-outline-danger">Danger</button>
<button outline danger class="activated">Danger.activated</button> <button class="button-outline-danger activated">Danger.activated</button>
</p> </p>
<p> <p>
<button outline light>Light</button> <button class="button-outline-light">Light</button>
<button outline light class="activated">Light.activated</button> <button class="button-outline-light activated">Light.activated</button>
</p> </p>
<p> <p>
<button outline dark>Dark</button> <button class="button-outline-dark">Dark</button>
<button outline dark class="activated">Dark.activated</button> <button class="button-outline-dark activated">Dark.activated</button>
</p> </p>
<p> <p>
<button outline block>button[outline][block]</button> <button class="button-outline button-block">.button-outline.button-block</button>
</p> </p>
<p> <p>
<button outline block class="activated">[outline][block].activated</button> <button class="button-outline button-block activated">.button-outline.button-block.activated</button>
</p> </p>
<p> <p>
<button outline block secondary>button[outline][block][secondary]</button> <button class="button-outline-secondary button-block" >.button-outline-secondary.button-block</button>
</p> </p>
<p> <p>
<button outline block secondary class="activated">[outline][block][secondary].activated</button> <button class="button-outline-secondary button-block activated">.button-outline-secondary.button-block.activated</button>
</p> </p>
</ion-content> </ion-content>

20
ionic/components/button/test/round/main.html
View File

@ -4,17 +4,17 @@
</ion-toolbar> </ion-toolbar>
<ion-content padding> <ion-content padding>
<button round>button</button> <button class="button-round">button</button>
<button round light>button light</button> <button class="button-round button-light">button light</button>
<button round secondary>button secondary</button> <button class="button-round button-secondary">button secondary</button>
<button round danger>button danger</button> <button class="button-round button-danger">button danger</button>
<button round dark>button dark</button> <button class="button-round button-dark">button dark</button>
<button round outline>button</button> <button class="button-round button-outline">button</button>
<button round light outline>button light</button> <button class="button-round button-outline-light">button outline light</button>
<button round secondary outline>button secondary</button> <button class="button-round button-outline-secondary">button outline secondary</button>
<button round danger outline>button danger</button> <button class="button-round button-outline-danger">button outline danger</button>
<button round dark outline>button dark</button> <button class="button-round button-outline-dark">button outline dark</button>
</ion-content> </ion-content>

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

@ -11,23 +11,23 @@
</p> </p>
<p> <p>
<a button small href="#">a[button][small]</a> <a button class="button-small" href="#">a[button].button-small</a>
<button small>button[small]</button> <button class="button-small">button.button-small</button>
</p> </p>
<p> <p>
<a button outline small href="#">a[button][outline][small]</a> <a button class="button-outline button-small" href="#">a[button].button-outline.button-small</a>
<button outline small>button[outline][small]</button> <button class="button-outline button-small">button.button-outline.button-small</button>
</p> </p>
<p> <p>
<a button clear small href="#">a[button][clear][small]</a> <a button class="button-clear button-small" href="#">a[button].button-clear.button-small</a>
<button clear small>button[clear][small]</button> <button class="button-clear button-small">button.button-clear.button-small</button>
</p> </p>
<p> <p>
<button large>[large]</button> <button class="button-large">button.button-large</button>
<a button large href="#"> <a button class="button-large" href="#">
<span style="font-size:48px">H</span> <span style="font-size:48px">H</span>
<span style="font-size:38px">E</span> <span style="font-size:38px">E</span>
<span style="font-size:32px">L</span> <span style="font-size:32px">L</span>
@ -36,13 +36,13 @@
</p> </p>
<p> <p>
<a button outline large href="#">a[button][outline][large]</a> <a button class="button-outline button-large" href="#">a[button].button-outline.button-large</a>
<button outline large>button[outline][large]</button> <button class="button-outline button-large">button.button-outline.button-large</button>
</p> </p>
<p> <p>
<a button clear large href="#">a[clear][large]</a> <a button class="button-clear button-large" href="#">a.button-clear.button-large</a>
<button clear large>button[clear][large]</button> <button class="button-clear button-large">button.button-clear.button-large</button>
</p> </p>
</ion-content> </ion-content>