Permalink
Browse files

Adding an SCSS version, per this request… #58

  • Loading branch information...
nathansmith committed Dec 10, 2012
1 parent e47596b commit e33fb647d7d9365d5f7ec88e800aca7b35ae5c89
Showing with 363 additions and 0 deletions.
  1. +363 −0 assets/css/_formalize.scss
View
@@ -0,0 +1,363 @@
+// Note: This file is dependent on Sass and Compass.
+// Sass = http://sass-lang.com
+// Compass = http://compass-style.org
+
+@import "compass/css3";
+
+// `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
+//----------------------------------------------------------------------------------------------------
+
+input[type="search"]::-webkit-search-decoration {
+ display: none;
+}
+
+input,
+button,
+a.button,
+select,
+textarea {
+ // Suppress red glow that Firefox
+ // adds to form fields by default.
+ &:invalid {
+ @include box-shadow(none);
+ }
+ // Add blue glow.
+ &:focus {
+ @include box-shadow(#0066ff 0 0 5px 0);
+ // for Opera
+ z-index: 1;
+ }
+}
+
+input[type="file"],
+input[type="radio"],
+input[type="checkbox"] {
+ &:focus,
+ &:active {
+ @include box-shadow(none);
+ }
+}
+
+button,
+a.button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+ -webkit-appearance: none;
+ @include border-radius(4px);
+ @include background-clip(padding-box);
+ background: #dddddd image-url("button.png") repeat-x;
+ @include background-image(linear-gradient(white, #dddddd));
+ border: 1px solid;
+ border-color: #dddddd #bbbbbb #999999;
+ cursor: pointer;
+ color: #333333;
+ display: inline-block;
+ // Helvetica Neue present, because it works better
+ // for line-height on buttons than Arial, on OS X.
+ font: bold 12px / 1.3 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif;
+ outline: 0;
+ overflow: visible;
+ margin: 0;
+ padding: 3px 10px;
+ text-shadow: white 0 1px 1px;
+ text-decoration: none;
+ vertical-align: top;
+ width: auto;
+ &:hover {
+ @include background-image(linear-gradient(white, #eeeeee 1px, #cccccc));
+ text-decoration: none;
+ }
+ &:active {
+ @include background-image(linear-gradient(#dddddd, #eeeeee));
+ @include box-shadow(inset rgba(black, 0.25) 0 1px 2px 0);
+ border-color: #999999 #bbbbbb #dddddd;
+ }
+ // IE7
+ *padding-top: 2px;
+ *padding-bottom: 0;
+ // Kill phantom spacing and dotted
+ // border that appears in Firefox.
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+}
+
+a.button {
+ // IE7
+ *padding-bottom: 3px;
+}
+
+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"] {
+ @include box-sizing(border-box);
+ @include background-clip(padding-box);
+ @include border-radius(0);
+ -webkit-appearance: none;
+ background-color: white;
+ border: 1px solid;
+ border-color: #848484 #c1c1c1 #e1e1e1;
+ color: black;
+ outline: 0;
+ margin: 0;
+ padding: 2px 3px;
+ text-align: left;
+ font-size: 13px;
+ // Leaving out Helvetica Neue, to not throw off size="..."
+ // on inputs. Arial is more reliable, on Windows and OS X.
+ font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+ height: 1.8em;
+ vertical-align: top;
+ // IE7
+ *padding-top: 2px;
+ *padding-bottom: 1px;
+ *height: auto;
+ &[disabled] {
+ background-color: #eeeeee;
+ }
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled],
+a.button_disabled {
+ @include box-shadow(none);
+ -moz-user-select: -moz-none;
+ -webkit-user-select: none;
+ -khtml-user-select: none;
+ user-select: none;
+ color: #888888;
+ cursor: default;
+}
+
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+input::-webkit-input-placeholder,
+textarea::-webkit-input-placeholder {
+ color: #888888;
+}
+
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+ color: #888888;
+}
+
+input.placeholder_text,
+textarea.placeholder_text {
+ color: #888888;
+}
+
+textarea,
+select[size],
+select[multiple] {
+ height: auto;
+}
+
+// Set height back to normal,
+// for Opera, WebKit, and IE.
+select[size="0"],
+select[size="1"] {
+ height: 1.8em;
+ // IE7
+ *height: auto;
+}
+
+// Tweaks for Safari + Chrome.
+@media (-webkit-min-device-pixel-ratio: 0) {
+ select[size],
+ select[multiple],
+ select[multiple][size] {
+ background-image: none;
+ padding-right: 3px;
+ }
+ select,
+ select[size="0"],
+ select[size="1"] {
+ // Base64 encoded "../images/select_arrow.gif"
+ background-image: url(data:image/png;base64,R0lGODlhDQAEAIAAAAAAAP8A/yH5BAEHAAEALAAAAAANAAQAAAILhA+hG5jMDpxvhgIAOw==);
+ background-repeat: no-repeat;
+ background-position: right center;
+ padding-right: 20px;
+ }
+ ::-webkit-validation-bubble-message {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #666666), color-stop(1, black));
+ border: 0;
+ color: white;
+ font: 13px / 17px "Lucida Grande", Arial, "Liberation Sans", FreeSans, sans-serif;
+ overflow: hidden;
+ padding: 15px 15px 17px;
+ text-shadow: black 0 0 1px;
+ min-height: 16px;
+ }
+ ::-webkit-validation-bubble-arrow,
+ ::-webkit-validation-bubble-top-outer-arrow,
+ ::-webkit-validation-bubble-top-inner-arrow {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ background: #666666;
+ border-color: #666666;
+ }
+}
+
+textarea {
+ min-height: 40px;
+ overflow: auto;
+ resize: vertical;
+ width: 100%;
+}
+
+optgroup {
+ color: black;
+ font-style: normal;
+ font-weight: normal;
+ // Font family repeated, for Firefox.
+ font-family: Arial, "Liberation Sans", FreeSans, sans-serif;
+ // Kill phantom spacing and dotted
+ // border that appears in Firefox.
+ &::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+ }
+}
+
+// `IE6
+//----------------------------------------------------------------------------------------------------
+
+// Everything below this line is for IE6.
+// Delete it if you don't support it! :)
+
+// Classes are added dynamically via JS,
+// because IE6 doesn't support attribute
+// selectors: .ie6_button, .ie6_input, etc.
+
+// Note: These style rules are somewhat
+// duplicated because IE6 bombs out when
+// it sees attribute selectors. Example:
+
+// .ie6_button {
+// This works in IE6.
+// }
+
+// .ie6_button,
+// input[type=submit] {
+// This doesn't work.
+// }
+
+.ie6_button,
+* html button,
+* html a.button {
+ background: #dddddd image-url("button.png") repeat-x;
+ border: 1px solid;
+ border-color: #dddddd #bbbbbb #999999;
+ cursor: pointer;
+ color: #333333;
+ font: bold 12px / 1.2 Arial, sans-serif;
+ padding: 2px 10px 0px;
+ text-decoration: none;
+ overflow: visible;
+ vertical-align: top;
+ width: auto;
+}
+
+* html a.button {
+ position: relative;
+ top: 3px;
+ padding-bottom: 2px;
+}
+
+* html button {
+ padding-top: 1px;
+ padding-bottom: 1px;
+}
+
+.ie6_input,
+* html textarea,
+* html select {
+ background: white;
+ border: 1px solid;
+ border-color: #848484 #c1c1c1 #e1e1e1;
+ color: black;
+ padding: 2px 3px 1px;
+ font-size: 13px;
+ font-family: Arial, sans-serif;
+ vertical-align: top;
+}
+
+* html select {
+ margin-top: 1px;
+}
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled {
+ color: #888888;
+}
+
+.ie6_input_disabled {
+ background: #eeeeee;
+}

0 comments on commit e33fb64

Please sign in to comment.