Permalink
Browse files

Remove skeleton framework (overkill for this app), add reset, mixins,…

… form and base style partials. Simplify markup t:40m
  • Loading branch information...
Will McNeilly
Will McNeilly committed Sep 13, 2011
1 parent 9597290 commit 3836149914168b404463ac4ff24108e4c936aebb
View
@@ -3,3 +3,5 @@ db/*.sqlite3
log/*.log
tmp/
.sass-cache/
+
+/app/models/couch.rb
@@ -3,31 +3,8 @@
* and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
* the top of the compiled file, but it's generally better to create a new file per style scope.
*= require_self
- *= require base
- *= require skeleton
- *= require layout
-*/
-
-body{
- font-family: "ff-meta-serif-web-pro-1","ff-meta-serif-web-pro-2",Georgia,"Times New Roman",Times,serif;
-}
-.header{
- margin:1em 0;
- text-align:center;
-}
-.header h1{
-}
-
-#new_link input[type=text]{
- width:75%;
- height:30px;
- float:left;
-}
-
-#new_link input[type=submit]{
- width:20%;
- height:43px;
- margin-left:4%;
- font-size:20px;
- float:left;
-}
+ *= require partials/_reset
+ *= require partials/_forms
+ *= require partials/_layout
+ *= require partials/_application
+*/
@@ -0,0 +1,2 @@
+@import "partials/_base";
+@import "partials/_mixins";
@@ -0,0 +1,19 @@
+@charset "UTF-8";
+
+// Colors --------------------------------------------------------------
+
+$sqsh-blue: #0E72A4;
+$sqsh-dark-blue: #11588A;
+$sqsh-red: #921814;
+
+$sqsh-white: #fff;
+$sqsh-black: #000;
+
+$sqsh-light-grey: #F4F5F4;
+
+$sqsh-light-copy: #999999;
+$sqsh-mid-copy: #666666;
+$sqsh-dark-copy: #333333;
+
+
+
@@ -0,0 +1,281 @@
+@charset "UTF-8";
+@import "partials/_base";
+
+// Note: This file is dependent on Sass and Compass.
+// Sass = http://sass-lang.com
+// Compass = http://compass-style.org
+
+// `Widths
+//----------------------------------------------------------------------------------------------------
+.input_tiny {
+ width: 50px; }
+
+.input_small {
+ width: 100px; }
+
+.input_medium {
+ width: 150px; }
+
+.input_large {
+ width: 200px; }
+
+.input_xlarge {
+ width: 250px; }
+
+.input_xxlarge {
+ width: 300px; }
+
+.input_full {
+ width: 100%; }
+
+// Added via JS to <textarea> and class="input-full".
+// Applies only to IE7. Other browsers don't need it.
+.input_full_wrap {
+ display: block;
+ padding-right: 8px; }
+
+// `UI Consistency
+//----------------------------------------------------------------------------------------------------
+
+::-moz-focus-inner {
+ border: 0;
+ padding: 0; }
+
+input[type="search"]::-webkit-search-decoration {
+ display: none; }
+
+input,
+button,
+select,
+textarea {
+ margin: 0;
+ vertical-align: middle; }
+
+input[type="radio"],
+input[type="checkbox"] {
+ position: relative;
+ vertical-align: top;
+ top: 3px;
+ // IE8, IE9, IE10
+ top: 0 \0;
+ // IE7
+ *top: -3px; }
+
+// iPad
+@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 1024px) {
+ input[type="radio"],
+ input[type="checkbox"] {
+ vertical-align: baseline;
+ top: 2px; } }
+
+// iPhone 3
+@media (-webkit-min-device-pixel-ratio: 1) and (max-device-width: 480px) {
+ input[type="radio"],
+ input[type="checkbox"] {
+ vertical-align: baseline;
+ top: 0; } }
+
+// iPhone 4
+@media (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {
+ input[type="radio"],
+ input[type="checkbox"] {
+ vertical-align: baseline;
+ top: 0; } }
+
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"],
+form a.button {
+ -webkit-appearance: none;
+ display: inline-block;
+ background: $sqsh-red;
+ border: 0;
+ cursor: pointer;
+ color: $sqsh-white;
+ font: bold 1em Arial, sans-serif;
+ outline: 0;
+ overflow: visible;
+ padding: 7px 10px;
+ width: auto;
+ text-align: left;
+ a:hover, a.hover {
+ background:$sqsh-black;
+ }
+ a:active {
+ background:$selected-background-color;
+ }
+ // IE7
+ *padding-top: 2px;
+ *padding-bottom: 0px; }
+
+button {
+ // IE7
+ *padding-top: 1px;
+ *padding-bottom: 1px; }
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+ -webkit-appearance: none;
+ -moz-border-radius: 0;
+ -webkit-border-radius: 0;
+ border-radius: 0;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding;
+ background-clip: padding-box;
+ background-color: #FAFAFA;
+ border: 1px solid;
+ border-color: #848484 #c1c1c1 #e1e1e1;
+ color: black;
+ &.placeholder {
+ color: $sqsh-light-grey;
+ font-weight: bold;
+ }
+ outline: 0;
+ padding: 2px 8px;
+ font-size: 0.8125em;
+ font-weight: bold;
+ font-family: Arial, sans-serif;
+ height: 2em;
+ // IE7
+ *padding-top: 2px;
+ *padding-bottom: 1px;
+ *height: auto; }
+
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+::-webkit-input-placeholder {
+ color: $sqsh-light-grey;
+ font-weight: bold; }
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+ color: $sqsh-light-grey;
+ font-weight: bold; }
+
+input.placeholder-text,
+textarea.placeholder-text {
+ color: $sqsh-light-grey;
+ font-weight: bold; }
+
+:invalid {
+ // Suppress red glow that Firefox
+ // adds to form fields by default,
+ // even when user is still typing.
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none; }
+
+button:focus,
+button:active,
+input:focus,
+input:active,
+select:focus,
+select:active,
+textarea:focus,
+textarea:active {
+ -moz-box-shadow: #0066ff 0 0 7px;
+ -webkit-box-shadow: #0066ff 0 0 7px;
+ box-shadow: #0066ff 0 0 7px;
+ // for Opera
+ z-index: 1; }
+
+input[type="file"]:focus,
+input[type="file"]:active,
+input[type="radio"]:focus,
+input[type="radio"]:active,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:active {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none; }
+
+select[disabled],
+textarea[disabled],
+input[type="date"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled],
+input[type="email"][disabled],
+input[type="month"][disabled],
+input[type="number"][disabled],
+input[type="password"][disabled],
+input[type="search"][disabled],
+input[type="tel"][disabled],
+input[type="text"][disabled],
+input[type="time"][disabled],
+input[type="url"][disabled],
+input[type="week"][disabled] {
+ background-color: #eeeeee; }
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled] {
+ -moz-box-shadow: none;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ color: #888888;
+ cursor: default; }
+
+textarea,
+select[size],
+select[multiple] {
+ height: auto; }
+
+// Tweaks for Safari + Chrome.
+@media (-webkit-min-device-pixel-ratio: 0) {
+ select {
+ background-image: inlineimage("select_arrow.png");
+ background-repeat: no-repeat;
+ background-position: right center;
+ padding-right: 20px; }
+ select[size],
+ select[multiple] {
+ background-image: none;
+ padding: 0; }
+ ::-webkit-validation-bubble-message {
+ box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
+ border: 1px solid;
+ border-color: #747474 #5e5e5e #4f4f4f;
+ color: white;
+ font: 0.8125em / 1 Arial, sans-serif;
+ padding: 15px 15px 17px;
+ text-shadow: black 0 0 1px; }
+ ::-webkit-validation-bubble-arrow,
+ ::-webkit-validation-bubble-top-outer-arrow,
+ ::-webkit-validation-bubble-top-inner-arrow {
+ display: none; } }
+
+textarea {
+ min-height: 40px;
+ overflow: auto;
+ resize: vertical;
+ width: 100%; }
+
+optgroup {
+ color: black;
+ font-style: normal;
+ font-weight: normal; }
Oops, something went wrong.

0 comments on commit 3836149

Please sign in to comment.