From 18ed88c7e3c789366f6e5443dc4ee0bc981a4b88 Mon Sep 17 00:00:00 2001 From: Stefan Wintermeyer Date: Mon, 21 Jan 2013 20:18:16 +0100 Subject: Started the migration to Twitter Bootstrap. --- .../stylesheets/vendor/survival-kit/_forms.scss | 313 --------------------- 1 file changed, 313 deletions(-) delete mode 100644 app/assets/stylesheets/vendor/survival-kit/_forms.scss (limited to 'app/assets/stylesheets/vendor/survival-kit/_forms.scss') diff --git a/app/assets/stylesheets/vendor/survival-kit/_forms.scss b/app/assets/stylesheets/vendor/survival-kit/_forms.scss deleted file mode 100644 index 7e82b87..0000000 --- a/app/assets/stylesheets/vendor/survival-kit/_forms.scss +++ /dev/null @@ -1,313 +0,0 @@ -// 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. -// -//
-// -// -//
-@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 -- cgit v1.2.3