.input-base { background-color: #FFF; border-radius: 3px; border: 1px solid #CCC; display: inline-block; font-size: $fs-s; font-family: $text; padding: $-xs; color: #222; width: 250px; max-width: 100%; //-webkit-appearance:none; &.neg, &.invalid { border: 1px solid $negative; } &.pos, &.valid { border: 1px solid $positive; } &.disabled, &[disabled] { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAMUlEQVQIW2NkwAGuXbv2nxGbHEhCS0uLEUMSJgHShCKJLIEiiS4Bl8QmAZbEJQGSBAC62BuJ+tt7zgAAAABJRU5ErkJggg==); } } label { display: block; line-height: 1.4em; font-size: 0.94em; font-weight: 500; color: #666; padding-bottom: 2px; margin-bottom: 0.2em; } label.radio, label.checkbox { font-weight: 400; input[type="radio"], input[type="checkbox"] { margin-right: $-xs; } } label + p.small { margin-bottom: 0.8em; } input[type="text"], input[type="number"], input[type="email"], input[type="search"], input[type="url"], input[type="password"], select, textarea { @extend .input-base; } .form-group { margin-bottom: $-s; } .form-group { .text-pos, .text-neg { padding: $-xs 0; } } .inline-input-style { border: 2px dotted #BBB; display: block; width: 100%; padding: $-xs $-s; } .title-input .input { width: 100%; } .title-input label, .description-input label{ margin-top: $-m; color: #666; } .title-input input[type="text"] { @extend h1; @extend .inline-input-style; margin-top: 0; padding-right: 0; width: 100%; color: #444; } .title-input.page-title { font-size: 0.8em; .input { border: 0; margin-bottom: -1px; } input[type="text"] { max-width: 840px; margin: 0 auto; border: none; } } .page-title input { display: block; width: 100%; font-size: 1.4em; } .description-input textarea { @extend .inline-input-style; font-size: $fs-m; color: #666; width: 100%; } .search-box { max-width: 100%; position: relative; button { background-color: transparent; border: none; color: $primary; padding: 0; margin: 0; cursor: pointer; margin-left: $-s; } button[type="submit"] { margin-left: -$-l; } input { padding-right: $-l; width: 300px; max-width: 100%; } }