javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

Outline ripppppppple

Browse Source
This commit is contained in:
Max Lynch
2015-07-20 17:27:08 -05:00
parent 38588947d0
commit 1f0015ce12
2 changed files with 39 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
ionic/components/button/extensions/material.scss
View File

@@ -43,6 +43,16 @@ $button-material-border-radius: 3px !default;
font-size: $button-small-icon-size;
}
&[outline] {
box-shadow: none;
.md-ripple {
&.is-visible {
opacity: 0.2;
}
}
}
@each $color, $value in $colors {
&[#{$color}] {
@@ -58,6 +68,23 @@ $button-material-border-radius: 3px !default;
opacity: 1;
background-color: get-color($color, base);
}
&[outline] {
@if lightness(get-color($color, base)) >= 80 {
.md-ripple {
background-color: black;
}
} @else {
.md-ripple {
background-color: get-color($color, base);
}
}
&:active,
&.activated {
opacity: 1;
background: transparent;
}
}
}
}
}

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

@@ -1,42 +1,16 @@
<div>
<a button outline primary href="#">a.primary</a>
<button outline primary>button.primary</button>
<button outline primary class="hover">hover</button>
<button outline primary class="activated">activated</button>
<button outline primary>Primary</button>
<button outline secondary>Secondary</button>
<button outline danger>Danger</button>
<button outline light>Light</button>
<button outline stable>Stable</button>
<button outline dark>Dark</button>
</div>
<div>
<a button outline secondary href="#">a.secondary</a>
<button outline secondary>button.secondary</button>
<button outline secondary class="hover">hover</button>
<button outline secondary class="activated">activated</button>
</div>
<div>
<a button outline danger href="#">a.danger</a>
<button outline danger>button.danger</button>
<button outline danger class="hover">hover</button>
<button outline danger class="activated">activated</button>
</div>
<div>
<a button outline light href="#">a.light</a>
<button outline light>button.light</button>
<button outline light class="hover">hover</button>
<button outline light class="activated">activated</button>
</div>
<div>
<a button outline stable href="#">a.stable</a>
<button outline stable>button.stable</button>
<button outline stable class="hover">hover</button>
<button outline stable class="activated">activated</button>
</div>
<div>
<a button outline dark href="#">a.dark</a>
<button outline dark>button.dark</button>
<button outline dark class="hover">hover</button>
<button outline dark class="activated">activated</button>
</div>
<style>
button, [button] {
display: block !important;
margin: 10px auto 10px auto !important;
}
</style>