lib/facades/stylesheets/facades/setup/_forms.scss in facades-0.0.4 vs lib/facades/stylesheets/facades/setup/_forms.scss in facades-0.0.5
- old
+ new
@@ -1,18 +1,5 @@
-.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%; }
-
-.input_full_wrap, .input-full-wrap {
- display: block;
- padding-right: 8px;
-}
-
form{
margin-bottom:1em;
}
fieldset{
@@ -37,46 +24,58 @@
// Make UI consistant across all browsers.
//----------------------------------------------------------------------------------------------------
-::-moz-focus-inner{ border: 0; padding: 0; }
-input[type="search"]::-webkit-search-decoration { display: none; }
+::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
-input,button,select,textarea {
- margin: 0;
- vertical-align: middle;
+input[type="search"]::-webkit-search-decoration {
+ display: none;
}
-input[type="radio"], input[type="checkbox"] {
- position: relative;
- vertical-align: top;
- top: 3px;
- top: 0 \0; // IE8, IE9, IE10
- *top: -3px; // IE7
+input, button, select, textarea {
+ margin: 0;
+ vertical-align: middle;
}
+input[type="radio"],
+input[type="checkbox"] {
+ position: relative;
+ vertical-align: top;
+ top: 0.5em;
+ // 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"] {
+ 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"]{
+ 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;
+ input[type="radio"],
+ input[type="checkbox"] {
+ vertical-align: baseline;
top: 0;
}
}
button, input[type="reset"], input[type="submit"], input[type="button"] {
@@ -101,46 +100,46 @@
// IE7
*padding-top: 2px;
*padding-bottom: 0px;
}
-button{ // IE7
+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"] {
+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;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+ -ms-box-sizing:content-box;
-moz-background-clip: padding;
-webkit-background-clip: padding;
background-clip: padding-box;
- background-color: $input-background-color;
+ background-color: white;
border: 1px solid;
-webkit-border-radius: $input-border-radius;
-moz-border-radius: $input-border-radius;
border-radius: $input-border-radius;
border-color: $input-border-color;
color: $input-color;
outline: 0;
- padding: 2px 3px;
- font-size: $font-size;
+ height:auto;
+ padding: $input-padding;
+ font-size: $input-font-size;
+ // 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: 2em;
-
// IE7
*padding-top: 2px;
*padding-bottom: 1px;
*height: auto;
+ min-width:100px;
&[disabled]{
color: $disabled-input-color;
border-color: $disabled-input-border-color;
background-color: $disabled-input-background-color;
@@ -151,62 +150,117 @@
border-color:$focus-input-border-color;
background-color:$focus-input-background-color;
}
}
+// Separate rule for Firefox.
+// Separate rule for IE, too.
+// Cannot stack with WebKit's.
+::-webkit-input-placeholder {
+ color: #888888;
+}
-\:invalid {
- // Suppress red glow that Firefox
- // adds to form fields by default,
- // even when user is still typing.
+input:-moz-placeholder, textarea:-moz-placeholder{
+ color: #888888;
+}
+
+input.placeholder-text, textarea.placeholder-text{
+ color: #888888;
+}
+
+: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, input, select, textarea{
- &:focus, &:active{
- outline:none;
- z-index:1;
- }
+button:focus, button:active, input:focus, input:active,
+select:focus, select:active, textarea:focus, textarea:active {
+ z-index: 1;
+ outline: none;
}
-input[type="file"], input[type="file"], input[type="radio"],
-input[type="radio"], input[type="checkbox"], input[type="checkbox"]{
- outline:none;
-}
-button, input, select, select option, select optgroup, textarea{
- user-select:none;
- color: $input-color;
- cursor:default;
+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: $font-color;
+ cursor: default;
}
-textarea, select[size], select[multiple]{
- height: auto;
+textarea, select[size], select[multiple] {
+ height: auto;
}
+select[size]{ padding:0.35em; }
+
// Tweaks for Safari + Chrome.
@media (-webkit-min-device-pixel-ratio: 0) {
select {
+ background-image:url($select-arrow-image);
background-repeat: no-repeat;
background-position: right center;
padding-right: 20px;
}
- select[size], select[multiple]{
+
+ select[size], select[multiple] {
background-image: none;
padding: 0;
}
+ ::-webkit-validation-bubble-message {
+ border: 1px solid;
+ border-color: $input-border-color;
+ 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;
+ 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: 0;
+ }
}
textarea {
min-height: 40px;
overflow: auto;
resize: vertical;
- width: 100%;
+ width: 100%;
}
optgroup {
color: black;
font-style: normal;
font-weight: normal;
+}
+
+span.field-with-error, span.field-with-errors{ position:relative; @include inline-block; padding-bottom:10px;
+ 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"]{
+ border-color:$invalid-input-border-color;
+ color:$invalid-input-color;
+ background-color:$invalid-input-background-color;
+ }
+
+ span.errors-for-field, span.error-for-field{
+ font-size:11px;
+ position:absolute;
+ bottom:-5px;
+ left:0px;
+ display:block;
+ color:$error-color;
+ }
}
\ No newline at end of file