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

Android active state hack

Browse Source
This commit is contained in:
Max Lynch
2013-08-23 18:31:41 -05:00
parent 289d7afdec
commit a1b2269e6d
5 changed files with 30 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
dist/framework-with-theme.css vendored
View File

@ -248,7 +248,7 @@ a.list-item:hover, a.list-item:focus {
.button-default:hover {
color: #333333;
text-decoration: none; }
.button-default:active {
.button-default.active, .button-default:active {
background-color: #e6e6e6;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -259,7 +259,7 @@ a.list-item:hover, a.list-item:focus {
.button-secondary:hover {
color: #333333;
text-decoration: none; }
.button-secondary:active {
.button-secondary.active, .button-secondary:active {
background-color: gainsboro;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -270,7 +270,7 @@ a.list-item:hover, a.list-item:focus {
.button-primary:hover {
color: white;
text-decoration: none; }
.button-primary:active {
.button-primary.active, .button-primary:active {
background-color: #3d7be2;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -281,7 +281,7 @@ a.list-item:hover, a.list-item:focus {
.button-info:hover {
color: white;
text-decoration: none; }
.button-info:active {
.button-info.active, .button-info:active {
background-color: #34c6df;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -292,7 +292,7 @@ a.list-item:hover, a.list-item:focus {
.button-success:hover {
color: white;
text-decoration: none; }
.button-success:active {
.button-success.active, .button-success:active {
background-color: #6fac45;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -303,7 +303,7 @@ a.list-item:hover, a.list-item:focus {
.button-warning:hover {
color: white;
text-decoration: none; }
.button-warning:active {
.button-warning.active, .button-warning:active {
background-color: #eba612;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -314,7 +314,7 @@ a.list-item:hover, a.list-item:focus {
.button-danger:hover {
color: white;
text-decoration: none; }
.button-danger:active {
.button-danger.active, .button-danger:active {
background-color: #cc3724;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }
@ -325,7 +325,7 @@ a.list-item:hover, a.list-item:focus {
.button-dark:hover {
color: white;
text-decoration: none; }
.button-dark:active {
.button-dark.active, .button-dark:active {
background-color: #2b2b2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15); }

1
example/buttons.html
View File

@ -66,6 +66,7 @@
<script src="../js/jquery/jquery-1.10.2.js"></script>
<script src="../js/framework/framework-utilities.js"></script>
<script src="../js/framework/framework-navigation.js"></script>
<script src="../js/framework/framework-buttons.js"></script>
<script src="../js/framework/test/event-listeners.js"></script>
<script src="../js/framework/framework-init.js"></script>
</body>

20
js/framework/framework-buttons.js Normal file
View File

@ -0,0 +1,20 @@
(function(window, document, framework) {
framework.Button = function() {}
framework.Button.prototype._onTouchStart = function(event) {
console.log('Touch start!', event);
if(event.target && event.target.classList.contains('button')) {
event.target.classList.add('active');
}
};
framework.Button.prototype._onTouchEnd = function(event) {
console.log('Touch end!', event);
if(event.target && event.target.classList.contains('button')) {
event.target.classList.remove('active');
}
};
document.addEventListener('touchstart', framework.Button.prototype._onTouchStart);
document.addEventListener('touchend', framework.Button.prototype._onTouchEnd);
})(this, document, this.FM = this.FM || {});

2
scss/framework/structure/_mixins.scss
View File

@ -13,7 +13,7 @@
// want it on desktop
//background-color: lighten($bgColor, 10%);
}
&:active {
&.active, &:active {
background-color: darken($bgColor, 10%);
box-shadow: inset 0px 1px 3px rgba(0,0,0,0.15);
}

1
scss/framework/theme/default/_button.scss
View File

@ -4,7 +4,6 @@
border-width: $buttonBorderWidth;
border-style: solid;
padding: $buttonPadding;
}
.button-default {