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

button clear and outline

Browse Source
This commit is contained in:
Adam Bradley
2015-03-22 22:30:38 -05:00
parent 1ce39f6e88
commit 2ddf3a1ed1
3 changed files with 99 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/button/button.scss
View File

@ -50,27 +50,20 @@ $button-bar-button-icon-size: 20px !default;
} }
} }
@mixin button-clear($color, $font-size:"") { @mixin button-clear($color) {
&.button-clear { &.button-clear {
border-color: transparent; border-color: transparent;
background: none; background: none;
box-shadow: none; box-shadow: none;
color: $color; color: $color;
@if $font-size != "" {
font-size: $font-size;
}
} }
} }
@mixin button-outline($color, $text-color:"") { @mixin button-outline($color) {
&.button-outline { &.button-outline {
border-color: $color; border-color: $color;
background: transparent; background: transparent;
@if $text-color == "" { color: $color;
$text-color: $color;
}
color: $text-color;
&.activated { &.activated {
background-color: $color; background-color: $color;
@ -91,6 +84,10 @@ $button-bar-button-icon-size: 20px !default;
inverse-tone($color), inverse-tone($color),
get-color($color, dark), get-color($color, dark),
get-color($color, inverse)); get-color($color, inverse));
@include button-clear(get-color($color, dark));
@include button-outline(get-color($color, dark));
} }
} }

46
src/components/button/examples/button-clear/index.html Normal file
View File

@ -0,0 +1,46 @@
<link rel="stylesheet" href="../../../../../dist/css/ionic.css">
<style>
[ion-app] {
display: block;
}
</style>
<div ion-app>
<p>
<a class="button button-clear button-light" href="#">a.light</a>
<button class="button button-clear button-light">button.light</button>
<button class="button button-clear button-light hover">hover</button>
<button class="button button-clear button-light activated">activated</button>
</p>
<p>
<a class="button button-clear button-stable" href="#">a.stable</a>
<button class="button button-clear button-stable">button.stable</button>
<button class="button button-clear button-stable hover">hover</button>
<button class="button button-clear button-stable activated">activated</button>
</p>
<p>
<a class="button button-clear button-positive" href="#">a.positive</a>
<button class="button button-clear button-positive">button.positive</button>
<button class="button button-clear button-positive hover">hover</button>
<button class="button button-clear button-positive activated">activated</button>
</p>
<p>
<a class="button button-clear button-assertive" href="#">a.assertive</a>
<button class="button button-clear button-assertive">button.assertive</button>
<button class="button button-clear button-assertive hover">hover</button>
<button class="button button-clear button-assertive activated">activated</button>
</p>
<p>
<a class="button button-clear button-dark" href="#">a.dark</a>
<button class="button button-clear button-dark">button.dark</button>
<button class="button button-clear button-dark hover">hover</button>
<button class="button button-clear button-dark activated">activated</button>
</p>
</div>

46
src/components/button/examples/button-outline/index.html Normal file
View File

@ -0,0 +1,46 @@
<link rel="stylesheet" href="../../../../../dist/css/ionic.css">
<style>
[ion-app] {
display: block;
}
</style>
<div ion-app>
<p>
<a class="button button-outline button-light" href="#">a.light</a>
<button class="button button-outline button-light">button.light</button>
<button class="button button-outline button-light hover">hover</button>
<button class="button button-outline button-light activated">activated</button>
</p>
<p>
<a class="button button-outline button-stable" href="#">a.stable</a>
<button class="button button-outline button-stable">button.stable</button>
<button class="button button-outline button-stable hover">hover</button>
<button class="button button-outline button-stable activated">activated</button>
</p>
<p>
<a class="button button-outline button-positive" href="#">a.positive</a>
<button class="button button-outline button-positive">button.positive</button>
<button class="button button-outline button-positive hover">hover</button>
<button class="button button-outline button-positive activated">activated</button>
</p>
<p>
<a class="button button-outline button-assertive" href="#">a.assertive</a>
<button class="button button-outline button-assertive">button.assertive</button>
<button class="button button-outline button-assertive hover">hover</button>
<button class="button button-outline button-assertive activated">activated</button>
</p>
<p>
<a class="button button-outline button-dark" href="#">a.dark</a>
<button class="button button-outline button-dark">button.dark</button>
<button class="button button-outline button-dark hover">hover</button>
<button class="button button-outline button-dark activated">activated</button>
</p>
</div>