Current Path :
/
home
/
develito
/
public_html
/
bin
/
assets
/
css
/
Or
Select Your Path :
Upload File :
New :
File
Dir
/home/develito/public_html/bin/assets/css/_formalize.scss
// 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; } @if $legacy-support-for-ie7 { .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(#06f 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); @include background-image(linear-gradient(white, #ddd)); border: 1px solid; border-color: #ddd #bbb #999; cursor: pointer; color: #333; display: inline-block; outline: 0; overflow: visible; margin: 0; padding: 3px 10px; text-shadow: white 0 1px 1px; text-decoration: none; vertical-align: top; width: auto; // 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; // Base64 encoded "../images/button.png' with IE7 fallback background: #ddd url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAAAAADhgtq/AAAAHElEQVQoz2P8z4ADsOCW+UeGnsFs2nDzz5AMHQA+JRlAyyOraAAAAABJRU5ErkJggg==) repeat-x; @if $legacy-support-for-ie7 { background: #ddd image-url("button.png") repeat-x; } &:hover { @include background-image(linear-gradient(white, #eee 1px, #ccc)); text-decoration: none; } &:active { @include background-image(linear-gradient(#ddd, #eee)); @include box-shadow(inset rgba(black, 0.25) 0 1px 2px 0); border-color: #999 #bbb #ddd; } @if $legacy-support-for-ie7 { // IE7 *padding-top: 2px; *padding-bottom: 0; } // Kill phantom spacing and dotted // border that appears in Firefox. &::-moz-focus-inner { border: 0; padding: 0; } } @if $legacy-support-for-ie7 { 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; height: 1.8em; vertical-align: top; // 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; @if $legacy-support-for-ie7 { // IE7 *padding-top: 2px; *padding-bottom: 1px; *height: auto; } &[disabled] { background-color: #eee; } } 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: #888; 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: #888; } input:-moz-placeholder, textarea:-moz-placeholder { color: #888; } input.placeholder_text, textarea.placeholder_text { color: #888; } 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; @if $legacy-support-for-ie7 { // 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, #666), 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: #666; border-color: #666; } } 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; } } @if $legacy-support-for-ie6 { // `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: #ddd image-url("button.png") repeat-x; border: 1px solid; border-color: #ddd #bbb #999; cursor: pointer; color: #333; font: bold 12px/1.2 Arial, sans-serif; padding: 2px 10px 0; 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: #888; } .ie6_input_disabled { background: #eee; } }