stylesheets/foundation/forms.scss in zurb-foundation-3.0.3 vs stylesheets/foundation/forms.scss in zurb-foundation-3.0.4
- old
+ new
@@ -16,11 +16,12 @@
}
}
label { font-size: ms(0); color: lighten($black, 30%); cursor: pointer; display: block; font-weight: 500; margin-bottom: 3px;
- &.right { float: none; text-align: right; padding-top: ($formSpacing / 2); }
+ &.right { float: none; text-align: right; }
+ &.inline { line-height: (ms(0) + ($formSpacing * 1.5)); margin: 0 0 $formSpacing 0; }
}
@media only screen and (max-width: $screenSmall - 1) {
label.right { text-align: left; }
}
@@ -48,16 +49,13 @@
fieldset { border: solid 1px #ddd; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; padding: 12px 12px 0; margin: 18px 0;
legend { font-weight: bold; background: $white; padding: 0 3px; margin: 0 0 0 -3px; }
}
- /* Inlined Radio & Checkbox */
- .form-field input[type=radio], div.form-field input[type=checkbox] { display: inline; width: auto; margin-bottom: 0; }
-
/* Errors */
- .form-field.error input, input.input-text.alert { border-color: $alertColor; background-color: rgba(255,0,0,0.15); }
- .form-field.error label, label.alert { color: $alertColor; }
- .form-field.error small, small.error { padding: 6px 4px; border: solid 0 #C00000; border-width: 0 1px 1px 1px; margin-top: -10px; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-top-left-radius(2px); @include box-sizing(border-box); }
+ .error input, input.error { border-color: $alertColor; background-color: rgba($alertColor, 0.1); }
+ .error label, label.error { color: $alertColor; }
+ .error small, small.error { display: block; padding: 6px 4px; margin-top: -($formSpacing) - 1; margin-bottom: $formSpacing; background: $alertColor; color: #fff; @include font-size(12); font-weight: bold; @include border-bottom-left-radius(2px); @include border-bottom-right-radius(2px); }
@media only screen and (max-width: $screenSmall - 1) {
@for $i from 1 through $totalColumns {
input[type="text"].#{convert-number-to-word($i)}, textarea.#{convert-number-to-word($i)} { width: 100% !important; }
}