Expanding on the work of Bennet Feeley http://codepen.io/bennettfeely/details/twbyA
Forked from Hugo Darby-Brown's Pen Animated Navicons .
A Pen by Secret Sam on CodePen.
/** | |
* VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units | |
* | |
* To overcome this, create media queries that target the width, height, and orientation of iOS devices. | |
* It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing | |
* the height of element `.foo` —which is a full width and height cover image. | |
* | |
* iOS Resolution Quick Reference: http://www.iosres.com/ | |
*/ | |
require 'susy' | |
class CssSplitter | |
def self.split(infile, outdir = File.dirname(infile), max_selectors = 4095) | |
raise "infile could not be found" unless File.exists? infile | |
rules = IO.readlines(infile, "}") | |
return if rules.first.nil? |
@import "compass/css3"; | |
@function relativeLuminance($color) { | |
@return 0.2126 * red($color)/255.0 + | |
0.7152 * green($color)/255.0 + | |
0.0722 * blue($color)/255.0; | |
} | |
@function contrast($color1,$color2) { | |
$luminance1: relativeLuminance($color1); | |
$luminance2: relativeLuminance($color2); |
// Add percentage of white to a color | |
@function tint($color, $percent){ | |
@return mix(white, $color, $percent); | |
} | |
// Add percentage of black to a color | |
@function shade($color, $percent){ | |
@return mix(black, $color, $percent); | |
} |
// Brightness math based on: | |
// http://www.nbdtech.com/Blog/archive/2008/04/27/Calculating-the-Perceived-Brightness-of-a-Color.aspx | |
$red-magic-number: 241; | |
$green-magic-number: 691; | |
$blue-magic-number: 68; | |
$brightness-divisor: $red-magic-number + $green-magic-number + $blue-magic-number; | |
@function brightness($color) { | |
// Extract color components |
$base-font-size: 16px; | |
$base-line-height: 1.5; | |
// this value may vary for each font | |
// unitless value relative to 1em | |
$cap-height: 0.68; | |
@mixin baseline($font-size, $scale: 2) { |
Click the field and the label will scale down and move up. Looks fancy and more importantly the fields expected value is still crystal clear to the user.
Resources:
A Pen by Rik Schennink on CodePen.
img.grayscale.disabled { | |
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); | |
-webkit-filter: grayscale(0%); | |
} |
#!/usr/bin/sh | |
rm -rf $HOME/Library/Preferences/WebIde* | |
rm -rf $HOME/Library/Caches/WebIde* | |
rm -rf $HOME/Library/Application Support/WebIde* | |
rm -rf $HOME/Library/Logs/WebIde* |