Skip to content

Commit

Permalink
Using instead of for CSS hacks - means repeated code but each CSS cla…
Browse files Browse the repository at this point in the history 
…ss is now self contained and easier to copy/paste
  • Loading branch information
@IanLunn
IanLunn committed Jan 8, 2014
1 parent 64cd2c7 commit a1971ee
Show file tree
Hide file tree
Showing 45 changed files with 264 additions and 95 deletions.
13 changes: 12 additions & 1 deletion css/hover-min.css
View file

Large diffs are not rendered by default.

253 changes: 203 additions & 50 deletions css/hover.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion scss/_hacks.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

%hacks{
@mixin hacks() {
@include hideTapHighlightColor();
@include hardwareAccel();
@include improveAntiAlias();
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_box-shadow-outset.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: box-shadow;

@extend %hacks;
@include hacks();

&:hover {
box-shadow: 2px 2px 2px $shadowColour;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-bottom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
position: relative;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-float-bottom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-float-left.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-float-right.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-float-top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-left.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
position: relative;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-right.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
position: relative;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_bubble-top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
position: relative;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
3 changes: 2 additions & 1 deletion scss/effects/_curl-bottom-left.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@mixin curl-bottom-left {
display: inline-block;
position: relative;
@extend %hacks;

@include hacks();

&:before {
pointer-events: none;
Expand Down
3 changes: 2 additions & 1 deletion scss/effects/_curl-bottom-right.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@mixin curl-bottom-right {
display: inline-block;
position: relative;
@extend %hacks;

@include hacks();

&:before {
pointer-events: none;
Expand Down
3 changes: 2 additions & 1 deletion scss/effects/_curl-top-left.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@mixin curl-top-left {
display: inline-block;
position: relative;
@extend %hacks;

@include hacks();

&:before {
pointer-events: none;
Expand Down
3 changes: 2 additions & 1 deletion scss/effects/_curl-top-right.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
@mixin curl-top-right {
display: inline-block;
position: relative;
@extend %hacks;

@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_float-shadow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_float.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: translateY(-5px);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_glow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: box-shadow;

@extend %hacks;
@include hacks();

&:hover {
box-shadow: 0 0 8px $shadowColour;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_grow-rotate.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: scale(1.1) rotate(4deg);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_grow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: scale(1.1);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_hang.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
transition-duration: .5s;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: translateY(6px);
Expand Down
3 changes: 2 additions & 1 deletion scss/effects/_hollow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
transition-duration: $defaultDuration;
transition-property: background;

transform: translateZ(0); /* Hack to improve performance on mobile/tablet devices */
@include hideTapHighlightColor();
@include hardwareAccel();
box-shadow:
inset 0 0 0 $borderWidth $primaryColour,
0 0 1px rgba(0, 0, 0, 0); /* Hack to improve aliasing on mobile/tablet devices */
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_hover-shadow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:before {
pointer-events: none;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_hover.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
transition-duration: .5s;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: translateY(-6px);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_outline-inward.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

position: relative;

@extend %hacks;
@include hacks();

&:before {
content: '';
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_outline-outward.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

position: relative;

@extend %hacks;
@include hacks();

&:before {
content: '';
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_pop.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@mixin pop {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: pop;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_pulse-grow.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@mixin pulse-grow {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: pulse-grow;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_pulse-shrink.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
@mixin pulse-shrink {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: pulse-shrink;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_pulse.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@mixin pulse {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: pulse;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_push.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@
@mixin push {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: push;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_rotate.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: rotate(4deg);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_round-corners.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: border-radius;

@extend %hacks;
@include hacks();

&:hover {
border-radius: 1em;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_shadow-radial.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
display: inline-block;
position: relative;

@extend %hacks;
@include hacks();

&:before,
&:after {
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_shrink.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: scale(.9);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_sink.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: translateY(5px);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_skew-forward.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
transition-property: transform;
transform-origin: 0 100%;

@extend %hacks;
@include hacks();

&:hover {
transform: skew(-10deg);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_skew.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
transition-duration: $defaultDuration;
transition-property: transform;

@extend %hacks;
@include hacks();

&:hover {
transform: skew(-10deg);
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_trim.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@

position: relative;

@extend %hacks;
@include hacks();

&:before {
content: '';
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_wobble-bottom.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
display: inline-block;
transform-origin: 100% 0;

@extend %hacks;
@include hacks();

&:hover {
animation-name: wobble-bottom;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_wobble-horizontal.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
@mixin wobble-horizontal {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: wobble-horizontal;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_wobble-top.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
display: inline-block;
transform-origin: 0 100%;

@extend %hacks;
@include hacks();

&:hover {
animation-name: wobble-top;
Expand Down
2 changes: 1 addition & 1 deletion scss/effects/_wobble-vertical.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
@mixin wobble-vertical {
display: inline-block;

@extend %hacks;
@include hacks();

&:hover {
animation-name: wobble-vertical;
Expand Down
4 changes: 2 additions & 2 deletions scss/hover.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*
/*!
* Hover.css (http://ianlunn.co.uk/)
* Version: 1.0.2
* Version: 1.0.3
* Author: Ian Lunn @IanLunn
* Author URL: http://ianlunn.co.uk/
* Github: https://github.com/IanLunn/Hover
Expand Down

0 comments on commit a1971ee

Please sign in to comment.