Skip to content

Commit

Permalink
Merge pull request #152 from DeviaVir/fix/ripple-effect
Browse files Browse the repository at this point in the history 
Ripple effect in Firefox
  • Loading branch information
Hai Nguyen committed Dec 20, 2014
2 parents 3eb741f + e8e0ab7 commit 7202a2c
Show file tree
Hide file tree
Showing 6 changed files with 282 additions and 282 deletions.
6 changes: 3 additions & 3 deletions src/less/components/flat-button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
.mui-flat-button-ripple {
&.mui-is-visible {
.ripple-click-alt(
@animation-name: 'flat-button-ripple-click';
@animation-name: flat-button-ripple-click;
@color: @flat-button-ripple-color;
)
}
Expand Down Expand Up @@ -58,7 +58,7 @@
.mui-flat-button-ripple {
&.mui-is-visible {
.ripple-click-alt(
@animation-name: 'flat-primary-button-ripple-click';
@animation-name: flat-primary-button-ripple-click;
@color: @flat-button-primary-ripple-color;
)
}
Expand All @@ -70,4 +70,4 @@
}
}
}
}
}
198 changes: 99 additions & 99 deletions src/less/components/floating-action-button.less
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,101 @@
.mui-floating-action-button {

* { .ease-out(); }

display: inline-block;
position: relative;

.mui-floating-action-button-container {
height: @floating-action-button-size;
width: @floating-action-button-size;
padding: 0;
position: relative;
background-color: @floating-action-button-color;
.lh-border-radius(50%);

&.mui-is-keyboard-focused {
background-color: @floating-action-button-hover-color;
.mui-floating-action-button-focus-ripple {
.pulsate('floating-action-button-focus-ripple');
.lh-opacity(1);
}
}

&.mui-is-disabled {
background-color: @floating-action-button-disabled-color;

.mui-floating-action-button-icon {
color: @floating-action-button-disabled-text-color;
}

&:hover {
background-color: @floating-action-button-disabled-color;
}
}

&:hover {
background-color: @floating-action-button-hover-color;
}
}

.mui-floating-action-button-icon {
position: relative;
z-index: 3;
line-height: @floating-action-button-size;
color: @floating-action-button-icon-color;
}

.mui-floating-action-button-ripple {
z-index: 2;
&.mui-is-visible {
.ripple-click(
@animation-name: 'floating-action-button-ripple-click';
@color: @floating-action-button-ripple-color;
@size: @floating-action-button-size;
@duration: 0.5s;
)
}
}

.mui-floating-action-button-focus-ripple {
top: 1px;
left: 0;
.lh-translate(0, 0);

width: @floating-action-button-size;
height: @floating-action-button-size;
border: solid 6px @transparent;
background-color: @floating-action-button-focus-ripple-color;

.lh-opacity(0);
}

&.mui-is-mini {

.mui-floating-action-button-container {
height: @floating-action-button-mini-size;
width: @floating-action-button-mini-size;
}

.mui-floating-action-button-icon {
line-height: @floating-action-button-mini-size;
}

.mui-floating-action-button-ripple {
&.mui-is-visible {
.ripple-click(
@animation-name: 'floating-action-button-mini-ripple-click';
@color: @floating-action-button-ripple-color;
@size: @floating-action-button-mini-size;
@duration: 0.5s;
)
}
}

.mui-floating-action-button-focus-ripple {
width: @floating-action-button-mini-size;
height: @floating-action-button-mini-size;
}
}
}
* { .ease-out(); }

display: inline-block;
position: relative;

.mui-floating-action-button-container {
height: @floating-action-button-size;
width: @floating-action-button-size;
padding: 0;
position: relative;
background-color: @floating-action-button-color;
.lh-border-radius(50%);

&.mui-is-keyboard-focused {
background-color: @floating-action-button-hover-color;
.mui-floating-action-button-focus-ripple {
.pulsate(floating-action-button-focus-ripple);
.lh-opacity(1);
}
}

&.mui-is-disabled {
background-color: @floating-action-button-disabled-color;

.mui-floating-action-button-icon {
color: @floating-action-button-disabled-text-color;
}

&:hover {
background-color: @floating-action-button-disabled-color;
}
}

&:hover {
background-color: @floating-action-button-hover-color;
}
}

.mui-floating-action-button-icon {
position: relative;
z-index: 3;
line-height: @floating-action-button-size;
color: @floating-action-button-icon-color;
}

.mui-floating-action-button-ripple {
z-index: 2;
&.mui-is-visible {
.ripple-click(
@animation-name: floating-action-button-ripple-click;
@color: @floating-action-button-ripple-color;
@size: @floating-action-button-size;
@duration: 0.5s;
)
}
}

.mui-floating-action-button-focus-ripple {
top: 1px;
left: 0;
.lh-translate(0, 0);

width: @floating-action-button-size;
height: @floating-action-button-size;
border: solid 6px @transparent;
background-color: @floating-action-button-focus-ripple-color;

.lh-opacity(0);
}

&.mui-is-mini {

.mui-floating-action-button-container {
height: @floating-action-button-mini-size;
width: @floating-action-button-mini-size;
}

.mui-floating-action-button-icon {
line-height: @floating-action-button-mini-size;
}

.mui-floating-action-button-ripple {
&.mui-is-visible {
.ripple-click(
@animation-name: floating-action-button-mini-ripple-click;
@color: @floating-action-button-ripple-color;
@size: @floating-action-button-mini-size;
@duration: 0.5s;
)
}
}

.mui-floating-action-button-focus-ripple {
width: @floating-action-button-mini-size;
height: @floating-action-button-mini-size;
}
}
}
100 changes: 50 additions & 50 deletions src/less/components/icon-button.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,67 +2,67 @@

.mui-icon-button {

@ripple-color: rgba(0,0,0,0.1);
@ripple-color: rgba(0,0,0,0.1);

* { .ease-out(); }
position: relative;
padding: 0;
* { .ease-out(); }
position: relative;
padding: 0;

.mui-icon-button-target {
padding: (@icon-size / 2);
}
.mui-icon-button-target {
padding: (@icon-size / 2);
}

.mui-icon-button-ripple.mui-is-visible {
.ripple-click(
@animation-name: 'icon-button-ripple-animation';
@color: @ripple-color;
@size: @icon-button-size;
);
}
.mui-icon-button-ripple.mui-is-visible {
.ripple-click(
@animation-name: icon-button-ripple-animation;
@color: @ripple-color;
@size: @icon-button-size;
);
}

.mui-icon-button-focus-ripple {
top: 0;
left: 0;
.lh-translate(0, 0);
.mui-icon-button-focus-ripple {
top: 0;
left: 0;
.lh-translate(0, 0);

width: @icon-button-size;
height: @icon-button-size;
box-shadow: 0px 0px 0px 1px @ripple-color;
border: solid 6px @transparent;
background-color: @ripple-color;
width: @icon-button-size;
height: @icon-button-size;
box-shadow: 0px 0px 0px 1px @ripple-color;
border: solid 6px @transparent;
background-color: @ripple-color;

.lh-opacity(0);
}
.lh-opacity(0);
}

.mui-icon-button-tooltip {
margin-top: (@icon-button-size + 4);
}
.mui-icon-button-tooltip {
margin-top: (@icon-button-size + 4);
}

&.mui-is-disabled {
color: lighten(@body-text-color, 75%);
}
&.mui-is-disabled {
color: lighten(@body-text-color, 75%);
}

&.mui-is-keyboard-focused {
.mui-icon-button-focus-ripple {
.pulsate('ripple-icon-button-focus');
.lh-opacity(1);
}
}
&.mui-is-keyboard-focused {
.mui-icon-button-focus-ripple {
.pulsate(ripple-icon-button-focus);
.lh-opacity(1);
}
}
}

.mui-dark-theme {
@ripple-color: rgba(255,255,255,0.3);
@ripple-color: rgba(255,255,255,0.3);

.mui-icon-button-ripple.mui-is-visible {
.ripple-click(
@animation-name: 'icon-button-ripple-animation-dark';
@color: @ripple-color;
@size: @icon-button-size;
)
}
.mui-icon-button-ripple.mui-is-visible {
.ripple-click(
@animation-name: icon-button-ripple-animation-dark;
@color: @ripple-color;
@size: @icon-button-size;
)
}

.mui-icon-button-focus-ripple {
box-shadow: 0px 0px 0px 1px @ripple-color;
background-color: @ripple-color;
}
}
.mui-icon-button-focus-ripple {
box-shadow: 0px 0px 0px 1px @ripple-color;
background-color: @ripple-color;
}
}
Loading

0 comments on commit 7202a2c

Please sign in to comment.