diff options
Diffstat (limited to 'app/assets/stylesheets/vendor/survival-kit/_forms.scss')
| -rw-r--r-- | app/assets/stylesheets/vendor/survival-kit/_forms.scss | 313 |
1 files changed, 313 insertions, 0 deletions
diff --git a/app/assets/stylesheets/vendor/survival-kit/_forms.scss b/app/assets/stylesheets/vendor/survival-kit/_forms.scss new file mode 100644 index 0000000..7e82b87 --- /dev/null +++ b/app/assets/stylesheets/vendor/survival-kit/_forms.scss @@ -0,0 +1,313 @@ +// Survival ✚ Kit + +// A simple search box, generic. +// If $width contains a second argument, it won't output the width to the parent element, allowing you to use box-size. +// +// <form action="#" accept-charset="utf-8" class="search-box"> +// <input type="text" class="text" value="Search..." name="q" /> +// <input type="submit" class="button" value="" /> +// </form> +@mixin search-box-simple { + // Preferences + $width: 210px; + $height: 27px; + $font-size: 12px; + + background: #FFF; + overflow: hidden; + height: $height; + width: $width; + + // Style + border:1px solid #4BC5ED; + margin-top: -3px; + @extend .bradius-inner; + @include gradient(#FFF, #F5F5F5); + + &.active { + @include box-shadow(0px 1px 2px transparentize(#000, 0.8)); + background:#FFF; + } + + // Calculations + $button-width: 27px; + $input-width: $width - $button-width - 2px; + + input, button { + background:transparent; + border: 0; + font-size: $font-size; + outline: none; + } + .text { + @include size($input-width, $height, 7px 10px); + color: #777; + float: left; + line-height: $height - (7px * 2); + } + button, .search { + cursor: pointer; + display: block; + float:right; + height: $height; + padding:0; + width: $button-width; + } + .search { + background:transparent image-url('redesign/vendor/survival-kit/search-13x16.png') center center no-repeat; + } +} + +// Search Box Simple dimention override +@mixin search-box-simple-size($width, $height, $button-width: 27px) { + $input-width: $width - $button-width - 2px; + height: $height; + width: $width; + .text { + @include size($input-width, $height, 7px 10px); + line-height: $height - (7px * 2); + } + button, .search { + height: $height; + width: $button-width; + } +} + + +// Inputs. +$input-shadow : inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0 rgba(255, 255, 255, 0.2) !default; +$input-hover-color : #7DBEF1 !default; +$input-hover-shadow : 0 0 6px #7DBEF1 !default; + +// +// Adds the Input state effects +// +@mixin input-effects() { + @if $input-shadow { @include box-shadow($input-shadow); } + border:1px solid #CCCCCC; + outline: 0; + &:focus { + @if $input-hover-shadow { + @include box-shadow($input-hover-shadow); + } + border:1px solid $input-hover-color; + } +} + +// +// Forms Styles (Survival Kit) +// This styles are meant to be used with Simple_Forms (Rails) +// Usage: +// simple-forms(default, option-1 option2) +// Options: +// block-hints : display the hints right after the inut field. +@mixin simple-forms($selector : "simple_form", $opts:false) { + // Setup + $size-modifier : 0px; + $input-width : 300px; + $input-font-size : $base-font-size + $size-modifier; + $vertical-spacing : 7px; + $horizontal-spacing : 10px; + $label-width :148px; + + // 7px = base padding at 0 size modifier. + $vertical-field-padding : floor((7px + $size-modifier) + ($size-modifier / 4.4) * 2); + $horizontal-field-padding: 6px; + + // Colors. + $hint-color : #6E6E6E; + + @if $selector == auto or $selector == default { + $selector: 'simple_form'; + } + + .hidden { display: none; } + // Force $opts into a list goddamnit. + $opts: join($opts, herp derp); + + .#{$selector} { + @include debug; + .hint { + @include debug(green); + display:inline-block; + padding:$vertical-field-padding 0 $vertical-field-padding ($label-width + $horizontal-spacing); + } + + // Fix a issue with the spacing. + input.date { + label { + width: 145px !important; + } + } + + + label { + @include debug(green); + vertical-align:middle; + width:$label-width; // double line labels. + display:inline-block; // works with already inline displayed items. + margin:0 $horizontal-spacing 0 0; + padding: $vertical-field-padding 0; + line-height:$input-font-size + ($input-font-size * 0.26); + text-align: right; + abbr { + @include debug(yellow); + @if index($opts, no-stars) { + display:none; + } @else { + color:#E62500; + float: right; + margin-left: $horizontal-spacing; + } + } + &.boolean, &.collection_radio_buttons { padding:$horizontal-spacing/2; width: auto;} + } + + .ext-sfr { + @include debug(yellow); + display: inline-block; + vertical-align: middle; + width: $label-width; + } + + .input { + @include debug(blue); + padding:$vertical-spacing 0; + .hint { + @extend .ext-sfr; + color: #8A8A8A; + display: block; + font-size: size(11px); + padding: 2px 0 0 ($label-width + $horizontal-spacing); + width: $input-width + ($horizontal-field-padding * 2) + $horizontal-spacing; + } + &.boolean { + padding: 2px 0 0 ($label-width + $horizontal-spacing); + } + } + + select { + border:1px solid #CCCCCC; + outline:none; + // floor(Font Size * Line Height) + (Vertical Input Padding * 2) + 1px) + $calc: floor(($input-font-size * $base-line-height ) + ($vertical-field-padding * 2)) + (1px); + height: $calc + 1px; + padding:(6px + $size-modifier) * $base-line-height ; + &:focus { + border:1px solid $input-hover-color; + } + } + + // Needs to be nested so it doesn't collide with date selects. + .select select, .country select { + width:$input-width + ($horizontal-field-padding * 2); + } + textarea, input[type=text], input[type=password], input[type=email] { + font-size:$input-font-size; + padding: $vertical-field-padding $horizontal-field-padding; + vertical-align:top; + width:$input-width; + // Input Effects + @include input-effects; + } + + textarea { + height:80px; + max-width:$input-width; + } + + input { + &.check_boxes, &.radio, &.boolean { + vertical-align:middle; + } + } + + .submit, .padded { + padding-left: $label-width + $horizontal-spacing; + } + + .form-actions { + background: #F7F7F7; + border-top: 1px solid #DDD; + padding: 17px 0px 18px $label-width + $horizontal-spacing; + } + + // Simple Form Button for the forms. + .button { + @extend .sk-button; + } + + + // Errors @todo: this should be in its own section. + span.error, .error { + @extend .ext-sfr; + color: #D65C5C; + font-size: 12px; + margin-left: 10px; + } + + #error_explanation { + @include box-shadow(#D4D4D4 0 0 10px); + background: #FFEBD6; + border: 1px solid #FFB36C; + color:#895334; + margin:$vertical-spacing * 4 0; + padding: 10px 14px; + h2 { + @include header-size(18px); + color:#AE4910; + margin-top:0; + } + } + + + // Colors for form validity + input:valid, textarea:valid {} + + input:invalid, textarea:invalid { + $error-color: #FF6161; + box-shadow:$input-shadow, inset -7px 0px 0px lighten($error-color, 15%) !important; + &:focus { + @if $input-hover-shadow { + @include box-shadow($input-hover-shadow, inset -7px 0px 0px $error-color !important ); + } + } + } + } + + // Rails 3 wraps errors in Divs + .field_with_errors { + display:inline; + } + + // Make this compatible when you have no javascript loaded! + @if not index($opts, no-browser-support) { + .ie7 { + select { margin-top:15px;} + } + } +} + +// Allows you to have different widths for different layouts. +@mixin simple-form-width($width:false, $label-width:false) { + $horizontal-field-padding : 6px; + $horizontal-spacing : 3px; + $input-width : $width; + + @if $width { + textarea, input[type=text], input[type=password] { + max-width: $width; + width:$width; + } + + .select select, .country select { + width:$input-width + ($horizontal-field-padding * 2); + } + } + + @if $label-width { + .input .hint { + width:$label-width; + } + } +}
\ No newline at end of file |