Retina FF icon improvements

* master:
  Slider: resolve jshint issue
  Simulate larger hitbox on slider element (fixes #281)
  Fix footer in Firefox (fixes #279)
  Make tooltip work in Firefox (fixes #282)
master
Addy Osmani 2015-05-12 20:21:04 +01:00
commit f660f74d80
4 changed files with 41 additions and 22 deletions

View File

@ -24,22 +24,11 @@
}
.mdl-mega-footer--top-section:after, .mdl-mega-footer--middle-section:after {
.mdl-mega-footer--top-section:after,
.mdl-mega-footer--middle-section:after,
.mdl-mega-footer--bottom-section:after {
content: '';
display: block;
// Optional: top and middle borders for the footer
//
// width: 100%;
// height: 1px;
//
// margin-bottom: $padding;
//
// border-color: $footer-underline-color;
// border-bottom-width: 1px;
// border-bottom-style: solid;
clear: both;
}
@ -212,6 +201,11 @@
padding: 0;
margin-bottom: $padding * 2;
&:after {
clear: both;
display: block;
content: '';
}
}
.mdl-mega-footer--link-list li {
@ -222,6 +216,7 @@
.mdl-mega-footer--link-list a {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
@media screen and (min-width: 760px) {
@ -247,13 +242,6 @@
margin-bottom: $padding;
}
.mdl-mega-footer--bottom-section:after {
content: '';
display: block;
clear: both;
}
.mdl-logo {
line-height: 20px;
margin-bottom: $padding;

View File

@ -57,6 +57,7 @@
& a {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
}

View File

@ -89,6 +89,35 @@ MaterialSlider.prototype.onMouseUp_ = function(event) {
event.target.blur();
};
/**
* Handle mousedown on container element.
* This handler is purpose is to not require the use to click
* exactly on the 2px slider element, as FireFox seems to be very
* strict about this.
* @param {Event} event The event that fired.
* @private
*/
MaterialSlider.prototype.onContainerMouseDown_ = function(event) {
'use strict';
// If this click is not on the parent element (but rather some child)
// ignore. It may still bubble up.
if(event.target !== this.element_.parentElement) {
return;
}
// Discard the original event and create a new event that
// is on the slider element.
event.preventDefault();
var newEvent = new MouseEvent('mousedown', {
target: event.target,
buttons: event.buttons,
clientX: event.clientX,
clientY: this.element_.getBoundingClientRect().y
});
this.element_.dispatchEvent(newEvent);
};
/**
* Handle updating of values.
* @param {Event} event The event that fired.
@ -190,6 +219,7 @@ MaterialSlider.prototype.init = function() {
this.element_.addEventListener('input', this.onInput_.bind(this));
this.element_.addEventListener('change', this.onChange_.bind(this));
this.element_.addEventListener('mouseup', this.onMouseUp_.bind(this));
this.element_.parentElement.addEventListener('mousedown', this.onContainerMouseDown_.bind(this));
this.updateValueStyles_();
this.element_.classList.add(this.CssClasses_.IS_UPGRADED);

View File

@ -41,7 +41,7 @@
padding: 15px 16px;
}
@-webkit-keyframes pulse {
@keyframes pulse {
0% {
transform: scale(0);
opacity: 0;