Robot
/
Hover
mirror of https://github.com/IanLunn/Hover.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Removed tap-highlight-color hack

This commit is contained in:
Ian Lunn 2014-01-15 16:07:59 +00:00
parent caf3f83308
commit b8cafcb373
8 changed files with 8 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
css/hover-min.css vendored
View File

File diff suppressed because one or more lines are too long

51
css/hover.css
View File

@ -1,6 +1,6 @@
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.4
* Version: 1.0.5
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
@ -20,6 +20,8 @@
background: #e1e1e1;
text-decoration: none;
color: #666666;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* 2D TRANSITIONS */
@ -32,7 +34,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -53,7 +54,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -96,7 +96,6 @@
.pulse {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -133,7 +132,6 @@
.pulse-grow {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -172,7 +170,6 @@
.pulse-shrink {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -222,7 +219,6 @@
.push {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -270,7 +266,6 @@
.pop {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -296,7 +291,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -317,7 +311,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -338,7 +331,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -359,7 +351,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -406,7 +397,6 @@
transition-duration: .5s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -465,7 +455,6 @@
transition-duration: .5s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -498,7 +487,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -522,7 +510,6 @@
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -546,7 +533,6 @@
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -633,7 +619,6 @@
.wobble-vertical {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -725,7 +710,6 @@
.wobble-horizontal {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -820,7 +804,6 @@
-webkit-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
transform-origin: 0 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -915,7 +898,6 @@
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1007,7 +989,6 @@
.wobble-skew {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1055,7 +1036,6 @@
.buzz {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1191,7 +1171,6 @@
.buzz-out {
display: inline-block;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1219,7 +1198,6 @@
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1240,7 +1218,6 @@
transition-duration: 0.3s;
-webkit-transition-property: background;
transition-property: background;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1257,7 +1234,6 @@
.trim {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1288,7 +1264,6 @@
.outline-outward {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1321,7 +1296,6 @@
.outline-inward {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1359,7 +1333,6 @@
transition-duration: 0.3s;
-webkit-transition-property: border-radius;
transition-property: border-radius;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1380,7 +1353,6 @@
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1399,7 +1371,6 @@
transition-duration: 0.3s;
-webkit-transition-property: box-shadow;
transition-property: box-shadow;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1420,7 +1391,6 @@
transition-property: box-shadow;
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0.6), 0 0 1px rgba(0, 0, 0, 0);
/* Hack to improve aliasing on mobile/tablet devices */
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1440,7 +1410,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1547,7 +1516,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1615,7 +1583,6 @@
.shadow-radial {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1664,7 +1631,6 @@
.bubble-top {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1696,7 +1662,6 @@
.bubble-right {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1729,7 +1694,6 @@
.bubble-bottom {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1762,7 +1726,6 @@
.bubble-left {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1799,7 +1762,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1842,7 +1804,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1885,7 +1846,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1928,7 +1888,6 @@
transition-duration: 0.3s;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -1969,7 +1928,6 @@
.curl-top-left {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -2008,7 +1966,6 @@
.curl-top-right {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -2044,7 +2001,6 @@
.curl-bottom-right {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
@ -2080,7 +2036,6 @@
.curl-bottom-left {
display: inline-block;
position: relative;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);

2
scss/_defaults.scss
View File

@ -6,4 +6,6 @@
background: $primaryColour;
text-decoration: none;
color: $secondaryColour;
/* Prevent highlight colour when element is tapped */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

6
scss/_hacks.scss
View File

@ -2,11 +2,6 @@
// in the most desired way. These mixins are used to quickly drop in hacks for each element
// Find out more here: https://github.com/IanLunn/Hover/wiki/Hacks-Explained
@mixin hideTapHighlightColor() {
//Prevent highlight colour when element is tapped
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
@mixin hardwareAccel() {
//Improve performance on mobile/tablet devices
transform: translateZ(0);
@ -18,7 +13,6 @@
}
@mixin hacks() {
@include hideTapHighlightColor();
@include hardwareAccel();
@include improveAntiAlias();
}

1
scss/effects/_border-fade.scss
View File

@ -6,7 +6,6 @@
transition-duration: $defaultDuration;
transition-property: box-shadow;
@include hideTapHighlightColor();
@include hardwareAccel();
box-shadow:
inset 0 0 0 $borderWidth $primaryColour,

1
scss/effects/_box-shadow-inset.scss
View File

@ -7,7 +7,6 @@
box-shadow: inset 0 0 0 $shadowColour,
0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
@include hideTapHighlightColor();
@include hardwareAccel();
&:hover {

1
scss/effects/_hollow.scss
View File

@ -6,7 +6,6 @@
transition-duration: $defaultDuration;
transition-property: background;
@include hideTapHighlightColor();
@include hardwareAccel();
box-shadow:
inset 0 0 0 $borderWidth $primaryColour,

2
scss/hover.scss
View File

@ -1,6 +1,6 @@
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.4
* Version: 1.0.5
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover