summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/vendor/survival-kit/_forms.scss
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/vendor/survival-kit/_forms.scss')
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_forms.scss313
1 files changed, 0 insertions, 313 deletions
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.
-//
-// <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
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-15 14:53:00 +0000