src/scss/toolkit/layout/form.scss in titon-toolkit-0.9.4 vs src/scss/toolkit/layout/form.scss in titon-toolkit-0.10.0
- old
+ new
@@ -1,158 +1,158 @@
/**
- * @copyright Copyright 2010-2013, The Titon Project
- * @license http://opensource.org/licenses/bsd-license.php
- * @link http://titon.io
+ * @copyright 2010-2013, The Titon Project
+ * @license http://opensource.org/licenses/bsd-license.php
+ * @link http://titon.io
*/
@import "../common";
form { text-align: left; }
fieldset {
- padding: $padding 0;
- margin: 0;
- border: 0;
- border-top: 1px solid $gray-dark;
+ padding: $padding 0;
+ margin: 0;
+ border: 0;
+ border-top: 1px solid $gray-dark;
- &.legendless {
- border: 0;
- padding: 0;
- }
+ &.legendless {
+ border: 0;
+ padding: 0;
+ }
}
legend {
- font-size: 1.3rem;
- padding-right: $padding;
+ font-size: 1.3rem;
+ padding-right: $padding;
}
select[multiple],
select[size] { height: auto; }
// Reset browser styles
input::-moz-focus-inner {
- padding: 0;
- border: 0;
+ padding: 0;
+ border: 0;
}
// Required values to match browser restrictions
label,
.input-static {
- font-size: inherit;
- line-height: normal;
+ font-size: inherit;
+ line-height: normal;
}
//-------------------- Inputs --------------------//
.input,
.input-static {
- @include reset-inline-block;
- border: 1px solid $gray-dark;
- font-size: $medium-size;
- padding: $medium-padding;
+ @include reset-inline-block;
+ border: 1px solid $gray-dark;
+ font-size: $medium-size;
+ padding: $medium-padding;
}
.input {
- background: $gray-lightest;
- border-radius: $round;
- @include transition(all .3s);
+ background: $gray-lightest;
+ border-radius: $round;
+ @include transition(all .3s);
- &:hover { border-color: $gray-darkest; }
- &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
+ &:hover { border-color: $gray-darkest; }
+ &:focus { border-color: $info; box-shadow: 0 0 5px $info-light; outline: 0; }
- @include disabled-state {
- cursor: not-allowed;
- color: $gray-darkest;
- border-color: $gray;
- }
+ @include disabled-state {
+ cursor: not-allowed;
+ color: $gray-darkest;
+ border-color: $gray;
+ }
- &[readonly] {
- color: $gray-darkest;
- border: 1px solid $gray-dark;
- box-shadow: none;
- }
+ &[readonly] {
+ color: $gray-darkest;
+ border: 1px solid $gray-dark;
+ box-shadow: none;
+ }
}
.input-static {
- background: transparent;
- border-color: transparent;
- padding-left: 0;
- padding-right: 0;
+ background: transparent;
+ border-color: transparent;
+ padding-left: 0;
+ padding-right: 0;
}
select.input { padding: $medium-padding - .05; } // fixes vertical alignment
select.input[multiple] { min-height: 150px; max-height: 500px; }
textarea.input {
- line-height: 135%;
- min-height: 150px;
+ line-height: 135%;
+ min-height: 150px;
}
.radio,
.checkbox {
- display: inline-block;
- vertical-align: middle;
- cursor: pointer;
+ display: inline-block;
+ vertical-align: middle;
+ cursor: pointer;
- input[type="checkbox"],
- input[type="radio"] {
- vertical-align: middle;
- position: relative;
- top: -1px;
- margin-right: 3px;
- }
+ input[type="checkbox"],
+ input[type="radio"] {
+ vertical-align: middle;
+ position: relative;
+ top: -1px;
+ margin-right: 3px;
+ }
}
//-------------------- Fields, Labels --------------------//
.field {
- margin-bottom: $margin;
+ margin-bottom: $margin;
- &.is-required {
- .field-label { font-weight: bold; }
- }
+ &.is-required {
+ .field-label { font-weight: bold; }
+ }
- @include field-style;
+ @include field-style;
}
.field-label {
- display: block;
- vertical-align: middle;
- margin-bottom: 7px;
+ display: block;
+ vertical-align: middle;
+ margin-bottom: 7px;
}
.field-help {
- margin-top: 7px;
- font-size: $small-size;
+ margin-top: 7px;
+ font-size: $small-size;
}
.form-actions {
- text-align: center;
+ text-align: center;
}
//-------------------- Modifiers --------------------//
.form--horizontal {
- .field { @include grid-row; }
+ .field { @include grid-row; }
- .field-label {
- text-align: right;
- border: 1px solid transparent; // matches input sizes
- padding-top: $medium-padding;
- }
+ .field-label {
+ text-align: right;
+ border: 1px solid transparent; // matches input sizes
+ padding-top: $medium-padding;
+ }
- .field-col { padding-left: $margin; }
+ .field-col { padding-left: $margin; }
}
.form--inline {
- .field,
- .field-label,
- .form-actions {
- display: inline-block;
- vertical-align: middle;
- margin-right: $margin;
- margin-bottom: $margin / 2;
- }
+ .field,
+ .field-label,
+ .form-actions {
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: $margin;
+ margin-bottom: $margin / 2;
+ }
- .field-label { margin: 0 ($margin / 2) 0 0; }
- .field-help { display: none; }
+ .field-label { margin: 0 ($margin / 2) 0 0; }
+ .field-help { display: none; }
}
\ No newline at end of file