javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 23:16:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

added new "outline" button class

Browse Source
This commit is contained in:
Ben Sperry
2013-10-06 17:20:50 -05:00
parent 1679adab36
commit bbae4bb1cc
6 changed files with 4816 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2340
dist/ionic-ios7.css vendored
View File

File diff suppressed because it is too large Load Diff

2429
dist/ionic.css vendored
View File

File diff suppressed because it is too large Load Diff

35
scss/ionic/_button.scss
View File

@ -35,19 +35,7 @@
@include transition(opacity .1s); @include transition(opacity .1s);
&:active, &.active { &:active, &.active {
opacity: 0.4; opacity: 0.3;
}
&.button-outline {
background: none;
box-shadow: none;
padding: $button-clear-padding;
// A nice iOS 7 style fade click
@include transition(opacity .1s);
&:active, &.active {
opacity: 0.4;
} }
} }
@ -59,7 +47,6 @@
&.button-default { &.button-default {
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark); @include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $gray-dark);
@include button-clear($gray-dark); @include button-clear($gray-dark);
} }
&.button-secondary { &.button-secondary {
@ -69,28 +56,48 @@
&.button-primary { &.button-primary {
@include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white); @include button-style($button-primary-bg, $button-primary-border, $button-primary-active-bg, $button-primary-active-border, $white);
@include button-clear($button-primary-bg); @include button-clear($button-primary-bg);
@include button-outline($button-primary-bg);
} }
&.button-info { &.button-info {
@include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white); @include button-style($button-info-bg, $button-info-border, $button-info-active-bg, $button-info-active-border, $white);
@include button-clear($button-info-bg); @include button-clear($button-info-bg);
@include button-outline($button-info-bg);
} }
&.button-success { &.button-success {
@include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white); @include button-style($button-success-bg, $button-success-border, $button-success-active-bg, $button-success-active-border, $white);
@include button-clear($button-success-bg); @include button-clear($button-success-bg);
@include button-outline($button-success-bg);
} }
&.button-warning { &.button-warning {
@include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white); @include button-style($button-warning-bg, $button-warning-border, $button-warning-active-bg, $button-warning-active-border, $white);
@include button-clear($button-warning-bg); @include button-clear($button-warning-bg);
@include button-outline($button-warning-bg);
} }
&.button-danger { &.button-danger {
@include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white); @include button-style($button-danger-bg, $button-danger-border, $button-danger-active-bg, $button-danger-active-border, $white);
@include button-clear($button-danger-bg); @include button-clear($button-danger-bg);
@include button-outline($button-danger-bg);
} }
&.button-dark { &.button-dark {
@include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white); @include button-style($button-dark-bg, $button-dark-border, $button-dark-active-bg, $button-dark-active-border, $white);
@include button-clear($button-dark-bg); @include button-clear($button-dark-bg);
@include button-outline($button-dark-bg);
} }
&.button-outline {
background: none;
box-shadow: none;
/* padding: $button-clear-padding; */
// A nice iOS 7 style fade click
@include transition(opacity .1s);
&:active, &.active {
}
}
&.button-icon { &.button-icon {
border: none; border: none;
background: none; background: none;

12
scss/ionic/_mixins.scss
View File

@ -36,6 +36,18 @@
} }
} }
@mixin button-outline($color) {
&.button-outline {
border-color: $color;
color: $color;
&.active, &:active {
background-color: $color;
color: #fff;
box-shadow: none;
}
}
}
@mixin list-style($bgColor, $borderColor, $color) { @mixin list-style($bgColor, $borderColor, $color) {
color: $color; color: $color;
background-color: $bgColor; background-color: $bgColor;

2
scss/ionic/_variables.scss
View File

@ -197,7 +197,7 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
$button-bar-button-line-height: 15px !default; $button-bar-button-line-height: 15px !default;
$button-color: #222; $button-color: #222;
$button-padding: 12px 12px; $button-padding: 8px 12px;
$button-clear-padding: 4px 5px; $button-clear-padding: 4px 5px;
$button-border-radius: 2px; $button-border-radius: 2px;
$button-border-width: 1px; $button-border-width: 1px;

26
test/buttons.html
View File

@ -30,19 +30,6 @@
<p> <p>
<a class="button button-icon"><i class="icon-home"></i></a> <a class="button button-icon"><i class="icon-home"></i></a>
</p> </p>
<p>
<a class="button button-default button-clear">Default</a>
<a class="button button-secondary button-clear">Secondary</a>
<a class="button button-primary button-clear">Primary</a>
<a class="button button-info button-clear">Info</a>
<a class="button button-success button-clear">Success</a>
<a class="button button-warning button-clear">Warning</a>
<a class="button button-danger button-clear">Danger</a>
<a class="button button-dark button-clear">Dark</a>
</p>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<p> <p>
<a class="button button-default button-outline">Default</a> <a class="button button-default button-outline">Default</a>
<a class="button button-secondary button-outline">Secondary</a> <a class="button button-secondary button-outline">Secondary</a>
@ -53,6 +40,19 @@
<a class="button button-danger button-outline">Danger</a> <a class="button button-danger button-outline">Danger</a>
<a class="button button-dark button-outline">Dark</a> <a class="button button-dark button-outline">Dark</a>
</p> </p>
<p>
<a class="button button-icon"><i class="icon-home"></i></a>
</p>
<p>
<a class="button button-default button-clear">Default</a>
<a class="button button-secondary button-clear">Secondary</a>
<a class="button button-primary button-clear">Primary</a>
<a class="button button-info button-clear">Info</a>
<a class="button button-success button-clear">Success</a>
<a class="button button-warning button-clear">Warning</a>
<a class="button button-danger button-clear">Danger</a>
<a class="button button-dark button-clear">Dark</a>
</p>
<p><a class="button button-secondary" href="index.html">Homepage</a></p> <p><a class="button button-secondary" href="index.html">Homepage</a></p>
</main> </main>