summaryrefslogtreecommitdiff
path: root/app/assets/stylesheets/vendor/survival-kit
diff options
context:
space:
mode:
Diffstat (limited to 'app/assets/stylesheets/vendor/survival-kit')
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_blog.scss99
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_effects.scss97
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_forms.scss313
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_headers.scss36
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_images.scss121
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_lists.scss37
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_loader.scss11
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_navigation.scss230
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_secure.scss3
-rw-r--r--app/assets/stylesheets/vendor/survival-kit/_tools.scss267
10 files changed, 1214 insertions, 0 deletions
diff --git a/app/assets/stylesheets/vendor/survival-kit/_blog.scss b/app/assets/stylesheets/vendor/survival-kit/_blog.scss
new file mode 100644
index 0000000..5bec255
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_blog.scss
@@ -0,0 +1,99 @@
+// Survival ✚ Kit
+
+// News Item
+// ----------------------------------------
+// <div class="blog-item">
+// <h6 class="date">14 de Julio 2010</h6>
+// <h3><a href="#">Lorem My Ipsum</a></h3>
+// <img src="image.jpg" width="194" height="146" alt="Blog Thumb"/>
+// <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras nec ipsum magna. Duis porttitor, felis quis eleifend vehicula, mauris mi varius nibh, sit amet iaculis magna magna vitae justo...</p>
+// <p class="read-more"><a href="#">Nota Completa</a></p>
+// </div>
+@mixin news-item($date:#383838, $header:#1491EE) {
+ @include clearfix;
+ .date {
+ color:$date;
+ font:{
+ size:11px;
+ weight:normal;
+ };
+ }
+ img {
+ float:left;
+ padding: 4px 14px 50px 0;
+ }
+ p {
+ color:$link-color;
+ }
+ h3 {
+ margin-bottom:8px;
+ a{
+ color:$header;
+ font-size:15px;
+ font-weight:bold;
+ text-decoration:none;
+ }
+ }
+}
+
+
+// Pagination Styling
+// ----------------------------------------
+// <div class="pagination">
+// <span class="previous_page disabled">← Previous</span>
+// <em>1</em>
+// <a rel="next" href="/?page=2">2</a>
+// <a href="/?page=3">3</a>
+// <a href="/?page=4">4</a>
+// <a class="next_page" rel="next" href="/?page=2">Next →</a>
+// </div>
+
+// Notes for Later
+//$active-state: (border (1px solid red), height 300px, ..[infinite]);
+// Would Output:
+// border: 1px solid red; heigh: 300px;
+
+// Normal, hover, active, disabled
+//$pagination-font-weights: normal bold normal;
+//$pagination-font-colors: #7F7F7F yellow #FFFFFF #4C7DB5;
+//$pagination-borders:none (1px solid #4C7DB5) (none) (1px solid #D0D0D0);
+//$pagination-backgrounds: #F5F5F5 #FFFFFF none none;
+// color, background, border, weight
+//@include pagination(#7F7F7F yellow #FFFFFF #4C7DB5, #F5F5F5 #FFFFFF none none, none (1px solid #4C7DB5) (none) (1px solid #D0D0D0), );
+
+@mixin pagination() {
+ text-align:center;
+ * {
+ @include border-radius(4px);
+ }
+ .current {
+ font-weight:bold;
+ color:#0090BC;
+ font-size:14px;
+ padding: 3px 8px;
+ margin-right:2px;
+ }
+ .disabled {
+ color:#518CBC;
+ border:1px solid #518CBC;
+ }
+ a {
+ padding: 3px 8px;
+ @include gradient(#80DFFF, #3BBBE7);
+ @include box-shadow(0 2px 0px #EBEBEB);
+ text-decoration:none;
+ color: #FFF;
+ font-weight: bold;
+ border:1px solid #4DC6EF;
+ &:active {
+ @include box-shadow(0px 1px #96C5FA, inset 0px 1px #5D96CC);
+ background:#F6FAFC !important;
+ }
+ &:hover {
+ background:#D0F0FC;
+ border:1px solid #4DC6EF;
+ color:$link-hover-color;
+ @include box-shadow(none);
+ }
+ }
+} \ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_effects.scss b/app/assets/stylesheets/vendor/survival-kit/_effects.scss
new file mode 100644
index 0000000..488a83a
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_effects.scss
@@ -0,0 +1,97 @@
+// Survival ✚ Kit
+
+// Add a Bendy shadow to a squar element.
+// @author Chris Eppstein
+@mixin bendy-shadow($width, $angle: 5deg, $color: rgba(#333, 0.5)) {
+ @include box-shadow(0 10px 5px -5px $color);
+ position: relative;
+ z-index: 1;
+ &:before, &:after {
+ @include box-shadow(0 10px 10px 1px $color);
+ bottom: 2px;
+ content: "";
+ height: 10px;
+ position: absolute;
+ width: $width / 2;
+ z-index: -1;
+ }
+ &:before {
+ @include rotate(-$angle);
+ left: 10px;
+ }
+ &:after {
+ @include rotate($angle);
+ right: 10px;
+ }
+}
+
+// Sexy button !
+@mixin shiny-button($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
+ // Params
+ $bg-light: $light-color;
+ $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
+
+ $border-inset-color: $bg-light;
+ $border-inside-light: lighten($border-inset-color, 13%);
+ $border-inside-dark: $border-inset-color;
+
+ $border-outside: darken($bg-dark, 9%);
+ $box-shadow: rgba(35, 35, 35, 0.2);
+ $text-shadow: darken($bg-dark, 7%);
+
+ @extend .bradius-inner;
+ @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
+ @include gradient($bg-light, $bg-dark);
+ @include text-shadow(2px 2px 1px $text-shadow);
+ border:1px solid $border-outside;
+ color:#FFF !important;
+
+ font-size:size(13px);
+ font-weight: bold;
+ padding: 9px 60px;
+ text-decoration: none;
+ text-decoration: none !important;
+ &:hover {
+ @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
+ @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
+ }
+ &:active {
+ @include box-shadow(inset 0px 2px 3px $bg-dark);
+ background: mix($bg-light, $bg-dark, 50%);
+ }
+ &.small {
+ font-size: 12px;
+ padding: 7px 22px;
+ }
+}
+
+//
+// @TODO: Add docs to shiny-button-colors!
+//
+@mixin shiny-button-colors($light-color: #92CE2F, $dark-mix-color: #32D17C, $mix-percent: 40%) {
+ // Params
+ $bg-light: $light-color;
+ $bg-dark: darken(mix($dark-mix-color, $bg-light, $mix-percent), 13%);
+
+ $border-inset-color: $bg-light;
+ $border-inside-light: lighten($border-inset-color, 13%);
+ $border-inside-dark: $border-inset-color;
+
+ $border-outside: darken($bg-dark, 9%);
+ $box-shadow: rgba(35, 35, 35, 0.2);
+ $text-shadow: darken($bg-dark, 7%);
+
+
+ @include box-shadow(inset 1px 1px 0px $border-inside-light, inset -1px -1px 0px $border-inside-dark);
+ @include gradient($bg-light, $bg-dark);
+ @include text-shadow(2px 2px 1px $text-shadow);
+ border:1px solid $border-outside;
+ &:hover {
+ @include box-shadow(inset 0px 0px 1px $border-inside-light, 0px 2px 1px $box-shadow);
+ @include gradient(lighten($bg-light, 6%), lighten($bg-dark, 6%));
+ }
+ &:active {
+ @include box-shadow(inset 0px 2px 3px $bg-dark);
+ background: mix($bg-light, $bg-dark, 50%);
+ }
+} \ No newline at end of file
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
diff --git a/app/assets/stylesheets/vendor/survival-kit/_headers.scss b/app/assets/stylesheets/vendor/survival-kit/_headers.scss
new file mode 100644
index 0000000..8b99808
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_headers.scss
@@ -0,0 +1,36 @@
+// Survival ✚ Kit
+
+// Sets the font size specified in pixels using percents so that the base
+// font size changes and 1em has the correct value. When nesting font size
+// declarations, within the DOM tree, the base_font_size must be the parent's
+// effective font-size in pixels.
+// Usage Examples:
+// .big
+// +font-size(16px)
+// .bigger
+// +font-size(18px)
+// .big .bigger
+// +font-size(18px, 16px)
+//
+// For more information see the table found at http://developer.yahoo.com/yui/3/cssfonts/#fontsize
+// From: compass-html5-boilerplate gem.
+
+@function size($size, $base-font-size: $base-font-size) {
+ @return ceil(percentage($size / $base-font-size));
+}
+
+
+// Calculate margin and line height according to the given size.
+@mixin header-size($size) {
+ font-size: size($size);
+}
+
+// Calculate the Header based on the H1 Max size.
+@mixin htags-sizes($max) {
+ $per: $max * 0.10;
+ @for $i from 1 through 6 {
+ h#{$i} {
+ @include header-size($max - ($per * $i) );
+ }
+ }
+} \ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_images.scss b/app/assets/stylesheets/vendor/survival-kit/_images.scss
new file mode 100644
index 0000000..36e67cd
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_images.scss
@@ -0,0 +1,121 @@
+// Survival ✚ Kit
+
+@import "compass/typography/text/replacement";
+
+// Replace an A tag with an a background-image.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-link($image, $inline:false) {
+ @include image-background($image, $inline);
+ cursor:pointer;
+ @extend .ext-hide-text;
+}
+
+// Replace an A tag with an a background-image sprite. You need to provide it with
+// the dimentions of the image and the x-pos/y-pos
+//
+// @var $image string path to the image, inherit is useful.
+// @var $height width
+// @var $height pixels
+// @var $x-pos pixels
+// @var $y-pos pixels
+// @var $inline boolean embed via data.
+@mixin image-sprite-link($image, $width, $height, $x-pos, $y-pos, $inline: false) {
+ @include sk-background(transparent, $image, $x-pos, $y-pos, no-repeat, $inline);
+ width:$width;
+ height:$height;
+ @extend .ext-hide-text;
+}
+
+// Replace a Header>a tag with a background image. Made specifically for logos.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin logo($image, $inline:false) {
+ @include no-mp;
+ width: image-width($image);
+ height: image-height($image);
+ a {
+ @include image-link($image, $inline);
+ &:hover { opacity: 0.7;}
+ }
+}
+
+// Area for a header link, meant to be used when it inherits a background image.
+// This should be invoked on the H1-6 Tag and not in the link, the needed structure is:2
+// <h1><a href=""></a></h1>
+@mixin logo-area($width, $height, $debugging: false) {
+ @include no-mp;
+ width:$width;
+ height:$height;
+ a {
+ @include link-area($width, $height, $debugging);
+ }
+}
+
+// An area which should be clickable. It's meant to be a low level mixin, you should
+// use the alternatuves.
+// - debugging enables a background color to know the position.
+@mixin link-area($width, $height, $debugging: false) {
+ width:$width;
+ height:$height;
+ @if $debugging {
+ @include debug($debugging);
+ }
+ @extend .ext-hide-text;
+}
+
+// Mixin for quickly replacing images for any given element.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-replace($image, $inline:false) {
+ @include image-background($image, $inline);
+ @extend .ext-hide-text;
+}
+@mixin image-replace-url($image, $width, $height) {
+ background:transparent url($image) left top no-repeat;
+ @include link-area($width, $height);
+}
+
+// Just adds the image as a background and sets the width/height accordingly.
+// @var $image string path to the image
+// @var $inline boolean embed via data.
+@mixin image-background($image, $inline:false) {
+ @include sk-background(transparent, $image, no-repeat, top, left, $inline);
+ width: image-width($image);
+ height: image-height($image);
+}
+
+// Add a background by passing the exact same parameters as a normal one. With
+// one more parameter $inline. Which will use inline-image and add backward
+// compatibility to IE7 via *background.
+//
+// @var $color
+// @var $image string can be a path to an image or inherit (will insert tags separately)
+// @var $horizontal
+// @var $vertical
+// @var $repeat
+// @var $inline
+@mixin sk-background($color, $image, $horizontal, $vertical, $repeat, $inline: false) {
+ @if $image == inherit {
+ background-color: $color;
+ background-repeat: $repeat;
+ background-position: $horizontal $vertical;
+ } @else {
+ @if $inline == true {
+ background : $color inline-image($image) $horizontal $vertical $repeat;
+ *background : $color image-url($image) $horizontal $vertical $repeat;
+ } @else {
+ background: $color image-url($image) $horizontal $vertical $repeat;
+ }
+ }
+}
+
+
+// Common styles needed by our Image Mixins.
+// Depends on Compass.
+.ext-hide-text {
+ @include hide-text;
+ display:block;
+ direction: ltr;
+ outline:none;
+}
diff --git a/app/assets/stylesheets/vendor/survival-kit/_lists.scss b/app/assets/stylesheets/vendor/survival-kit/_lists.scss
new file mode 100644
index 0000000..ea9670e
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_lists.scss
@@ -0,0 +1,37 @@
+// Survival ✚ Kit
+
+// Add docs to float-list!
+@mixin float-list($side:left) {
+ @include no-mp;
+ list-style-type: none;
+ li { float:$side; }
+}
+
+$tc-begin-color : #000 !default;
+$tc-end-color : lighten(#646464, 30) !default;
+$tc-base-font-size : 11px !default;
+$tc-max-font-size : 20px !default;
+$tc-how-many : 10 !default;
+@mixin tag-cloud($tc-begin-color, $tc-end-color, $tc-base-font-size, $tc-max-font-size, $tc-how-many) {
+ $font-calculations : $tc-base-font-size;
+
+ li {
+ display:inline;
+ background:none;
+ padding:0 2px;
+ }
+
+ a {
+ // Stops words from breaking.
+ display:inline-block;
+ }
+
+ @for $i from 1 through $tc-how-many {
+ // The last item gets the max-font size.
+ $font-calculations: round($font-calculations + (($tc-max-font-size - $tc-base-font-size) / $tc-how-many));
+ a.tag-#{$i} {
+ font-size:$font-calculations;
+ color: mix($tc-end-color, $tc-begin-color, ( $i * (100 / $tc-how-many) ));
+ }
+ }
+}
diff --git a/app/assets/stylesheets/vendor/survival-kit/_loader.scss b/app/assets/stylesheets/vendor/survival-kit/_loader.scss
new file mode 100644
index 0000000..c09a018
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_loader.scss
@@ -0,0 +1,11 @@
+// Survival ✚ Kit
+
+// Load all the Libraries.
+@import "blog";
+@import "forms";
+@import "images";
+@import "lists";
+@import "navigation";
+@import "tools";
+@import "headers";
+@import "effects";
diff --git a/app/assets/stylesheets/vendor/survival-kit/_navigation.scss b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss
new file mode 100644
index 0000000..5e6f13d
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_navigation.scss
@@ -0,0 +1,230 @@
+// Survival ✚ Kit
+
+// Horizontal Navigation Low-level Method.
+//
+// It's meant to be called from other predifined mixins to avoid calling so many variables per call.
+// Used from ul/ol
+@mixin horizontal-navigation(
+ $height,
+ $color,
+ $hover-color,
+ $active-color,
+ $text-shadow,
+ $bg,
+ $bg-hover,
+ $bg-active,
+ $box-shadow,
+ $box-shadow-hover,
+ $box-shadow-active,
+ $border-left,
+ $border-right,
+ $padding,
+ $margin,
+ $border-radius,
+ $font-weight,
+ $font-size,
+ $tab-space // Sets a tabbing space.
+ ) {
+ // $bg none or transparent will remove the background.
+ @if $tab-space == none { $tab-space:0;}
+ @if $bg == none { $bg:transparent;}
+ @if $bg-active == auto { $bg-active:$bg-hover; }
+ @if $active-color == auto { $active-color:$hover-color; }
+
+ // Border Calculation
+ // ----------------------------------------
+ // Check if borders are set to anything but none / auto.
+ @if $border-left != none and $border-right != none and $border-left != auto and $border-right != auto {
+ // Borders where explicitly set.
+ @include _sk-nav-borders($border-left, $border-right);
+ } @else if $border-left == auto and $border-right == auto and $bg != transparent{
+ // Borders calculated magically.
+ @include _sk-nav-borders(lighten($bg, 10%), darken($bg, 10%));
+ }
+
+ height:$height; // instead of clearfix, to keep shadows alive.
+ margin: 0;
+ list-style:none;
+
+ // Links and input
+ li, a {
+ display:block;
+ float:left; // this can make it inline or block level.
+ line-height:$height;
+ }
+
+
+ a {
+ @if $font-weight != none {
+ font-weight: $font-weight;
+ }
+ @if $padding != none {
+ padding:$padding;
+ }
+ @if $margin != none {
+ margin:$margin;
+ }
+ @if $font-size != none {
+ font-size:$font-size;
+ }
+
+ text-decoration:none;
+ color:$color;
+
+ @if $bg != transparent {
+ background:$bg;
+ }
+
+ @if $box-shadow != none {
+ @include box-shadow($box-shadow);
+ }
+
+ @if $text-shadow != none {
+ @include text-shadow($text-shadow, 1px, 1px, 1px);
+ }
+
+ @if $border-radius != none {
+ @include border-radius($border-radius);
+ }
+
+ // Feature for tabs.
+ @if $tab-space != 0 {
+ margin-top: -($tab-space);
+ }
+
+ // States
+ // ----------------------------------------
+
+ &:hover{
+ @include _sk-nav-effects($hover-color, $bg-hover, $text-shadow, $box-shadow-hover, $bg-hover);
+ text-decoration:none;
+ }
+
+ &:visited {
+ color:$active-color;
+ }
+ &.active {
+ @include _sk-nav-effects($active-color, $bg-active, $text-shadow, $box-shadow-active, $bg-hover);
+ // Add tab space.
+ @if $tab-space != 0 {
+ height:$height + $tab-space;
+ }
+ }
+ }
+}
+
+// Mixin used to generate Background effects by the horizontal-navigation mixin.
+@mixin _sk-nav-effects($color, $bg, $text-shadow, $box-shadow, $bg-hover) {
+ @if $color != auto {
+ color:$color;
+ }
+ @if $bg != transparent {
+ @if $bg-hover == auto {
+ background:darken($bg,3%);
+ } @else {
+ background:$bg;
+ }
+ @if $box-shadow != none{
+ @include box-shadow($box-shadow);
+ }
+ }
+ // Remove the text shadow of hover.
+ @if $text-shadow != none {
+ @include text-shadow(none);
+ }
+}
+
+// Low level mixin.
+// Invoked by other mixins.
+//
+// @var $left the left border.
+// @var $right the right border
+@mixin _sk-nav-borders($left, $right) {
+ li:first-child, li.first {
+ border-left:1px solid $right;
+ }// li:first-child
+ li:last-child, li.last {
+ border-right:1px solid $left;
+ }
+ a {
+ border:{
+ left: 1px solid $left;
+ right: 1px solid $right;
+ };
+ &.active, &.active:hover {
+ border:{
+ left:1px solid transparent;
+ right:1px solid transparent;
+ };
+ }
+ &:hover {
+ border:{
+ left:1px solid transparent;
+ right:1px solid transparent;
+ };
+ }
+ }
+}
+
+//
+// @TODO: Add docs to tabs!
+//
+@mixin navigation-classes($opts: tabs) {
+ $opts: join($opts, force list);
+ .nav {
+ list-style: none;
+ margin-bottom: $base-line-height;
+ margin-left: 0;
+ }
+
+ // Make links block level
+ .nav > li > a {
+ display: block;
+ }
+ .nav > li > a:hover {
+ background-color: #EEEEEE;
+ text-decoration: none;
+ }
+
+ // Common styles
+ .nav-tabs {
+ @extend .nav;
+ @include pie-clearfix();
+ }
+ .nav-tabs > li, .nav-pills > li {
+ float: left;
+ }
+ .nav-tabs > li > a {
+ line-height: 14px;
+ margin-right: 2px;
+ padding-left: 12px;
+ padding-right: 12px; // keeps the overall height an even number
+ }
+
+ .nav-tabs {
+ border-bottom: 1px solid #ddd;
+ }
+
+ .nav-tabs > li {
+ margin-bottom: -1px;
+ }
+
+ .nav-tabs > li > a {
+ @include border-radius(4px 4px 0 0);
+ border: 1px solid transparent;
+ padding-bottom: 9px;
+ padding-top: 9px;
+ &:hover {
+ border-color: #EEEEEE #EEEEEE #ddd;
+ }
+ }
+ .nav-tabs > .active {
+ a, a:hover {
+ background-color: #FFF;
+ border: 1px solid #ddd;
+ border-bottom-color: transparent;
+ color: gray;
+ cursor: default;
+ }
+ }
+} \ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_secure.scss b/app/assets/stylesheets/vendor/survival-kit/_secure.scss
new file mode 100644
index 0000000..f08dd11
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_secure.scss
@@ -0,0 +1,3 @@
+/*!
+ This is a compiled file.
+*/ \ No newline at end of file
diff --git a/app/assets/stylesheets/vendor/survival-kit/_tools.scss b/app/assets/stylesheets/vendor/survival-kit/_tools.scss
new file mode 100644
index 0000000..e753dfe
--- /dev/null
+++ b/app/assets/stylesheets/vendor/survival-kit/_tools.scss
@@ -0,0 +1,267 @@
+// Survival ✚ Kit
+$container-width : 1000px !default;
+$compatibility-mode : true, ie ie7 ie8 ie9 ff2 chrome9 !default;
+
+// Function to know if we're in compatibility mode, if $version is set it'll return if there's a match for that browser.
+@function in-compatibility-mode($version: false) {
+ @if $compatibility-mode {
+ @if $version {
+ @return index(nth($compatibility-mode, 2), $version);
+ } @else {
+ @return nth($compatibility-mode, 1);
+ }
+ } @else {
+ @return false;
+ }
+}
+
+// Shortcut to remove margin an padding.
+// Used on several @mixins.
+@mixin no-mp($extend:false) {
+ @if $extend {
+ @extend .no-mp;
+ } @else {
+ margin:0;
+ padding:0;
+ }
+}
+// Sometimes it's better to extend a class.
+.no-mp {
+ margin:0;
+ padding:0;
+}
+
+// Center an element.
+@mixin center-container($container-width, $vertical-margin:0, $padding:0) {
+ margin:$vertical-margin auto;
+ @if $padding == 0 {
+ width:$container-width;
+ } @else {
+ @include size($container-width, auto, $padding);
+ }
+}
+
+// Inline Block CrossBrowser.
+// Disregards FF2 and IE6
+@mixin inline-block {
+ display: inline-block;
+ @if in-compatibility-mode(ie7) {
+ zoom: 1;
+ *display:inline;
+ }
+}
+
+// Shortcut to set absolute positioning.
+@mixin pos($pos, $debug: false) {
+ @if length($pos) == 1 {
+ $pos: $pos 0 0 0;
+ }
+ @if length($pos) == 2 {
+ $pos: nth($pos,1) nth($pos,2) 0 0;
+ }
+ @if length($pos) == 3 {
+ $pos: nth($pos,1) nth($pos,2) nth($pos, 3) 0;
+ }
+ position:absolute;
+ @if "#{nth($pos, 1)}" != "0" { top: nth($pos, 1); }
+ @if "#{nth($pos, 2)}" != "0" { right: nth($pos, 2); }
+ @if "#{nth($pos, 3)}" != "0" { bottom: nth($pos, 3); }
+ @if "#{nth($pos, 4)}" != "0" { left: nth($pos, 4); }
+ @if $debug { @include debug($debug); }
+}
+
+// Center a absolute element horizontally; optional offset.
+@mixin pos-x-center($width, $offset:0) {
+ @include pos(0 50% 0 50%);
+ margin-left:$offset - ( $width / 2 );
+ width:$width;
+}
+
+// Center a absolute element vertically; optional offset.
+@mixin pos-y-center($height, $offset:0) {
+ @include pos(50% 0 50% 0);
+ height:$height;
+ margin-top:$offset - ( $height / 2 );
+}
+
+// Set a debug variable.
+@mixin debug($color:red) {
+ @if $debug != false {
+ @if $color == true { $color:red; }
+ background: rgba($color, 0.2); // incompatible with IE.
+ }
+}
+
+// Class available to center container to 1000px
+.w, .pagewidth {
+ @include center-container($container-width);
+}
+
+// Crossbrowser linear gradient.
+// Compatible Browsers: FF3.6+ Saf4+ Chrome IE6-IE9
+// @author SitePoint
+@mixin background-gradient($from, $to, $start: top, $end: bottom, $fallback:$from, $ie:false) {
+ @include gradient($from, $to, $start, $end, $fallback);
+}
+@mixin gradient($from, $to, $start: top, $end: bottom, $fallback:$from){
+ background-color: $fallback;
+
+ @if $end == bottom and $start == top {
+ @if $start == 0 {
+ background-image: -webkit-gradient(linear, left $start, left bottom, from($from), to($to));
+ } @else {
+ background-image: -webkit-gradient(linear, $start, left bottom, from($from), to($to));
+ }
+ background-image: -webkit-linear-gradient($start, $from, $to);
+ background-image: -moz-linear-gradient($start, $from, $to);
+ background-image: -ms-linear-gradient($start, $from, $to);
+ background-image: -o-linear-gradient($start, $from, $to);
+ @if in-compatibility-mode() {
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{ie-hex-str($from)}', EndColorStr='#{ie-hex-str($to)}');
+ }
+ } @else if $end == bottom {
+ background-image: -webkit-gradient(linear, left $start, 0 $end, from($from), to($to));
+ background-image: -webkit-linear-gradient(top, $from $start+px, $to);
+ background-image: -moz-linear-gradient(top, $from $start+px, $to);
+ background-image: -ms-linear-gradient(top, $from $start+px, $to);
+ background-image: -o-linear-gradient(top, $from $start+px, $to);
+
+ } @else {
+ background-image: -webkit-gradient(linear, left $start, 0 $end, from($from), to($to));
+ background-image: -webkit-linear-gradient(top, $from $start+px, $to $end+px);
+ background-image: -moz-linear-gradient(top, $from $start+px, $to $end+px);
+ background-image: -ms-linear-gradient(top, $from $start+px, $to $end+px);
+ background-image: -o-linear-gradient(top, $from $start+px, $to $end+px);
+ // No IE support for positioned gradients
+ }
+}
+
+// Mixin that allows you to set the size of the box to a fixed width/height
+// taking into consideration the padding and borders for you.
+//
+// Examples:
+// @include size(100px, 100px, 10px, 5px solid red);
+// Will render a 100x100.
+//
+// $width: Pixel value for width
+// $height: Pixel value for height
+// $padding: Padding accepts: 1px or 1px 2px or 1px 2px 3px 4px
+// $border: Border, accepts 1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px
+// When passing a border declaration (1px solid #000) it'll add the CSS for you.
+@mixin size($width, $height:auto, $padding: none, $border:none) {
+ // Prepare the borders, accept the following:
+ // 1px solid #000 or 1px or 1px 2px or 1px 2px 3px 4px
+ @if true {
+ @if $border == none {
+ $border:0;
+ }
+
+ $border-len: length($border);
+ // Standardize padding to a list with 4 items.
+ @if $border-len == 3 {
+ border:$border;
+ $bw: nth($border, 1);
+ $border: $bw $bw $bw $bw;
+ } @else if $border-len == 1 {
+ $border: $border $border $border $border;
+ } @else if $border-len == 2 {
+ $border: join($border, $border);
+ }
+ }
+
+ // Prepare padding, accept the following:
+ // 1px or 1px 2px or 1px 2px 3px 4px
+ @if true {
+ @if $padding == none {
+ $padding:0;
+ } @else {
+ padding:$padding;
+ }
+
+ // Standardize padding to a list with 4 items.
+ $padding-len: length($padding);
+ @if $padding-len == 1 {
+ $padding: $padding $padding $padding $padding;
+ } @else if $padding-len == 2 {
+ $padding: join($padding, $padding);
+ }
+ }
+
+ @if $width != auto {
+ width: $width - (nth($padding, 2) + nth($padding, 4)) - (nth($border, 2) + nth($border, 4));
+ }
+ @if $height != auto {
+ height: $height - (nth($padding, 1) + nth($padding, 3)) - (nth($border, 1) + nth($border, 3));
+ }
+}
+
+// Float an element with a given width and a direction. Third parameter allows easy debugging.
+// Yes, we override Compass :(
+// @TODO: Make it use box-size and allow padding.
+@mixin float($side, $size:auto, $debug-color:false) {
+ @if $size != auto {
+ @if length($size) == 1 {
+ width:$size;
+ } @else {
+ height:nth($size, 2);
+ width:nth($size, 1);
+ }
+
+ }
+ @if in-compatibility-mode(ie6) {
+ display:inline;
+ }
+ float: $side;
+ @if $debug-color and $debug {
+ @include debug($debug-color);
+ }
+}
+
+@mixin transition($property: all, $time: 400ms, $easing: ease-out){
+ transition: $property $time $easing;
+ -moz-transition: $property $time $easing;
+ -ms-transition: $property $time $easing;
+ -o-transition: $property $time $easing;
+ -webkit-transition: $property $time $easing;
+}
+
+// Calculate the Golden Ratio of a given value.
+// ----------------------------------------
+@function golden-ratio($size, $type) {
+ $big : round($size / 1.61803);
+ $small : $size - $big;
+ @return if($type == large, $big, $small);
+}
+
+
+//
+// @TODO: Add docs to link-colors!
+//
+@mixin link-colors($normal, $hover: false, $active: false, $visited: false, $focus: false) {
+ @if $normal == default {
+ $hover: $link-hover-color;
+ $normal: $link-color;
+ $visited: $link-visited-color;
+ }
+ color: $normal;
+ @if $visited {
+ &:visited {
+ color: $visited; } }
+ @if $focus {
+ &:focus {
+ color: $focus; } }
+ @if $hover {
+ &:hover {
+ color: $hover; } }
+ @if $active {
+ &:active {
+ color: $active; } }
+}
+
+// Substract the Body to the Container width to get the sidebar.
+@function sidebar($body-width, $container-width-over: false) {
+ @if $container-width-over == false {
+ $container-width-over : $container-width;
+ }
+ @return $container-width - $body-width;
+} \ No newline at end of file