diff --git a/styles/app/index.styl b/styles/app/index.styl index ef126c07c5..5a97eefb98 100644 --- a/styles/app/index.styl +++ b/styles/app/index.styl @@ -146,215 +146,3 @@ h1 > span { display: block; position: absolute; } - - -/* Form CSS from Impress: http://nateps.github.com/impress/ */ - -::-moz-focus-inner { - border: 0; -} -input, -button, -select { - -webkit-appearance: none; - background: transparent; - color: #000; - font: 13px/normal "Lucida Grande", Tahoma, sans-serif; - margin: 0; - outline: 0; -} -input, -button, -[type="checkbox"]+i, -[type="radio"]+i, -select+i, -[contenteditable]:before { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; - padding: 1px 4px 2px; -} -input, -[contenteditable]:before { - border: 1px solid; - border-color: rgba(0,0,0,0.35) rgba(0,0,0,0.25) rgba(0,0,0,0.25); - -webkit-box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff; - -moz-box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff; - box-shadow: inset 0 1px #f2f2f2, 0 1px rgba(255,255,255,0.3), inset 0 800px 1px -400px #fff; -} -button, -[type="submit"], -[type="checkbox"]+i, -[type="radio"]+i, -select+i { - background: rgba(0,0,0,0.35); - background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0,0.25)), to(rgba(0,0,0,0.45))); - background: -moz-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)); - background: -ms-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)); - background: -o-linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)); - background: linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.45)); - -moz-background-origin: border; - background-origin: border-box; - border: 1px solid transparent; - -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff; - -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #fff; - padding: 1px 12px 2px; -} -button:active, -[type="submit"]:active, -[type="checkbox"]:active+i, -[type="radio"]:active+i, -select:active+i { - -webkit-box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0; - -moz-box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0; - box-shadow: inset 0 1px #d6d6d6, inset 0 -1px #f2f2f2, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #e6e6e6, inset 0 200px 1px -100px #e0e0e0; -} -input:focus, -[contenteditable]:focus:before { - border-color: #2976d7 #5492de #5492de; -} -button:focus, -[type="submit"]:focus, -[type="checkbox"]:focus+i, -[type="radio"]:focus+i, -select:focus+i { - border-color: #5492de #2976d7 #215eac; - -webkit-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb; - -moz-box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb; - box-shadow: inset 0 0 0 1px rgba(255,255,255,0.6), 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #e5f4fb; -} -button:focus:active, -[type="submit"]:focus:active, -[type="checkbox"]:focus:active+i, -[type="radio"]:focus:active+i, -select:focus:active+i { - -webkit-box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced; - -moz-box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced; - box-shadow: inset 0 1px #8abfe9, inset 0 -1px #c9e1fe, 0 1px rgba(0,0,0,0.1), inset 0 -1.7em 1em -1em #b4d5fe, inset 0 200px 1px -100px #a1cced; -} -[type="checkbox"], -[type="radio"] { - opacity: 0; - position: absolute; -} -[type="checkbox"]+i, -[type="radio"]+i { - display: inline-block; - font-size: 7px; - margin-right: 2px; - padding: 0; - position: relative; - vertical-align: -1px; - left: 1px; - height: 12px; - width: 12px; -} -[type="radio"]+i { - -moz-border-radius: 12px; - -webkit-border-radius: 12px; - -moz-border-radius: 12px; - border-radius: 12px; - font-size: 8px; - margin: 0; - vertical-align: -2px; - left: 0; - height: 14px; - width: 14px; -} -[type="checkbox"]+i:after, -[type="radio"]+i:after { - background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAQAAAADpb+tAAAAcklEQVQIHWXBIQoCQQAAwAkWDR74D4PNqOAbBLkP+AD7VTFabYLFL2i6J1y2mAzbFmSrIHKw6wylytnJn0bSKswkyVxmqJUcFHaSzlhmKkoWvjaeagzcvO39rEXR0lbUqfQawcNLsJK5CIKjwsjV3UTvA0hhHjtECitsAAAAAElFTkSuQmCC") no-repeat; - display: block; - position: absolute; - top: -3px; - left: 1px; - height: 11px; - width: 11px; -} -@media (-webkit-min-device-pixel-ratio: 2) { - [type="checkbox"]+i:after { - background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjExcHgiIGhlaWdodD0iMTJweCI+PHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTksMS40MWMtMC4wMywwLjA0LTAuMDgsMC4wNi0wLjEsMC4xTDMuOTcsOUwxLjk4LDYuODZDMS41NSw2LjQsMC44Myw2LjM3LDAuMzcsNi44Qy0wLjEsNy4yMy0wLjEyLDcuOTYsMC4zMSw4LjQybDIuOTgsMy4yMUMzLjUsMTEuODcsMy44MSwxMiw0LjEyLDEyYzAuMDMsMCwwLjA2LDAsMC4xLDBjMC4zNS0wLjAzLDAuNjctMC4yMiwwLjg2LTAuNTFMOSw1LjUzVjEuNDF6Ii8+PHBhdGggZD0iTTQuMTIsMTFjLTAuMzIsMC0wLjYyLTAuMTMtMC44NC0wLjM3TDAuMzEsNy40MkMtMC4xMiw2Ljk2LTAuMSw2LjI0LDAuMzcsNS44YzAuNDYtMC40MywxLjE5LTAuNCwxLjYyLDAuMDZMMy45Nyw4TDguOSwwLjUyYzAuMzUtMC41MywxLjA2LTAuNjgsMS41OS0wLjMzYzAuNTMsMC4zNSwwLjY3LDEuMDYsMC4zMywxLjU5bC01LjczLDguNzFjLTAuMTksMC4yOS0wLjUxLDAuNDgtMC44NiwwLjUxQzQuMTksMTEsNC4xNiwxMSw0LjEyLDExeiIvPjwvc3ZnPg==") no-repeat; - height: 12px; - } -} -[type="radio"]+i:after { - background: #000; - -moz-border-radius: 4px; - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px rgba(255,255,255,0.6); - -moz-box-shadow: 0 1px rgba(255,255,255,0.6); - box-shadow: 0 1px rgba(255,255,255,0.6); - top: 4px; - left: 4px; - height: 4px; - width: 4px; -} -:checked+i:after { - content: ""; -} -.select { - display: inline-block; - line-height: 21px; - position: relative; - height: 21px; - min-width: 100px; -} -.select>i { - display: inline-block; - overflow: hidden; - vertical-align: top; - width: 100%; -} -select { - border: 0; - padding: 0 2px; - position: relative; - z-index: 1; - width: 120%; -} -@media (-webkit-min-device-pixel-ratio: 0) { - select { - padding: 0 21px 0 6px; - width: auto; - } -} -:-o-prefocus, -.select>i { - float: left; -} -:-o-prefocus, -select { - background: rgba(0,0,0,0); - top: 1px; - left: 3px; -} -:-o-prefocus, -select:focus { - background: transparent; -} -select+i { - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; -} -select+i:after { - border: solid; - border-color: #666 transparent; - border-width: 4px 4px 0; - content: ""; - display: block; - position: absolute; - bottom: 7px; - right: 5px; -} -select:focus+i:after { - border-top-color: #000; -}