From b80bd744ad873f6fc43018bc4bfb90677de167bd Mon Sep 17 00:00:00 2001 From: Stefan Wintermeyer Date: Mon, 17 Dec 2012 12:01:45 +0100 Subject: Start of GS5. --- app/assets/stylesheets/vendor/README | 1 + .../stylesheets/vendor/boilerplate-1.0/README | 15 + .../stylesheets/vendor/boilerplate-1.0/_reset.scss | 37 +++ .../vendor/boilerplate-1.0/_styles.scss | 171 +++++++++++ .../stylesheets/vendor/boilerplate-2.0/README | 16 + .../vendor/boilerplate-2.0/_styles.scss | 209 +++++++++++++ .../stylesheets/vendor/easy-slider/_numeric.scss | 44 +++ .../stylesheets/vendor/facebox/_facebox.scss | 85 ++++++ app/assets/stylesheets/vendor/fancy-box/README | 4 + .../stylesheets/vendor/fancy-box/_fancy-box.scss | 336 +++++++++++++++++++++ app/assets/stylesheets/vendor/fancy-buttons/README | 3 + .../vendor/fancy-buttons/_fancy-buttons.scss | 195 ++++++++++++ .../vendor/fancy-buttons/_fancy-gradient.scss | 28 ++ .../stylesheets/vendor/survival-kit/_blog.scss | 99 ++++++ .../stylesheets/vendor/survival-kit/_effects.scss | 97 ++++++ .../stylesheets/vendor/survival-kit/_forms.scss | 313 +++++++++++++++++++ .../stylesheets/vendor/survival-kit/_headers.scss | 36 +++ .../stylesheets/vendor/survival-kit/_images.scss | 121 ++++++++ .../stylesheets/vendor/survival-kit/_lists.scss | 37 +++ .../stylesheets/vendor/survival-kit/_loader.scss | 11 + .../vendor/survival-kit/_navigation.scss | 230 ++++++++++++++ .../stylesheets/vendor/survival-kit/_secure.scss | 3 + .../stylesheets/vendor/survival-kit/_tools.scss | 267 ++++++++++++++++ 23 files changed, 2358 insertions(+) create mode 100644 app/assets/stylesheets/vendor/README create mode 100644 app/assets/stylesheets/vendor/boilerplate-1.0/README create mode 100644 app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss create mode 100644 app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss create mode 100644 app/assets/stylesheets/vendor/boilerplate-2.0/README create mode 100644 app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss create mode 100644 app/assets/stylesheets/vendor/easy-slider/_numeric.scss create mode 100644 app/assets/stylesheets/vendor/facebox/_facebox.scss create mode 100644 app/assets/stylesheets/vendor/fancy-box/README create mode 100755 app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss create mode 100644 app/assets/stylesheets/vendor/fancy-buttons/README create mode 100644 app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss create mode 100644 app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_blog.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_effects.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_forms.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_headers.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_images.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_lists.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_loader.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_navigation.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_secure.scss create mode 100644 app/assets/stylesheets/vendor/survival-kit/_tools.scss (limited to 'app/assets/stylesheets/vendor') diff --git a/app/assets/stylesheets/vendor/README b/app/assets/stylesheets/vendor/README new file mode 100644 index 0000000..016b5fa --- /dev/null +++ b/app/assets/stylesheets/vendor/README @@ -0,0 +1 @@ +Here you should place the files that are not part of your project, but you use them at some point. \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/README b/app/assets/stylesheets/vendor/boilerplate-1.0/README new file mode 100644 index 0000000..a5aa5b1 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/README @@ -0,0 +1,15 @@ +HTML5 ✰ Boilerplate (ac92ae7a) + +style.css contains a reset, font normalization and some base styles. + +Credit is left where credit is due. +Much inspiration was taken from these projects: +- yui.yahooapis.com/2.8.1/build/base/base.css +- camendesign.com/design/ +- praegnanz.de/weblog/htmlcssjs-kickstart + +Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde. + +Notes: + + Not implementing Non-semantic helper classes. Use Compass builts-in. \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss new file mode 100644 index 0000000..efd1ac6 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_reset.scss @@ -0,0 +1,37 @@ +// html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline) +// v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark +// html5doctor.com/html-5-reset-stylesheet/ +html, body, div, span, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, +small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video{ + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} + +blockquote, q { quotes: none; } + +blockquote:before, blockquote:after, +q:before, q:after { content: ""; content: none; } + +del { text-decoration: line-through; } + +abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; } + +table { border-collapse: collapse; border-spacing: 0; } + +input, select { vertical-align: middle; } diff --git a/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss new file mode 100644 index 0000000..3852329 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-1.0/_styles.scss @@ -0,0 +1,171 @@ +// HTML5 ✰ Boilerplate +// +// style.css contains a reset, font normalization and some base styles. +// +// Credit is left where credit is due. +// Much inspiration was taken from these projects: +// - yui.yahooapis.com/2.8.1/build/base/base.css +// - camendesign.com/design/ +// - praegnanz.de/weblog/htmlcssjs-kickstart +// +// Modified to fit Survival ✚ Kit + + html { + @include sk-html; + overflow-y: scroll; + } + + +// Sections (body, section, nav, article, aside, h1..6, header, footer, address) +// ---------------------------------------- + + body, select, input, textarea { color: $font-color; font-family: $base-font-family; } + + body { @include sk-body; font-size: $base-font-size; line-height: $base-line-height; } + + +// Grouping Content (p, hr, pre, blockquote, ol, ul, li, dl, dt, dt, dd, figure, figcaption, div) +// ---------------------------------------- + + p { margin: 0 0 1em 0;} + li { margin-bottom: (1em / 2);} + + hr { border: 0; border-top: 1px solid $hr-color; display: block; height: 1px; margin: 1em 0; padding: 0; } + + blockquote { color: #666; font-style: italic; margin: 1.5em; } + + // normalize monospace sizing + // meyerweb.com/eric/thoughts/2010/02/12/fixed-monospace-sizing/ + // en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome + pre { + // www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ + white-space: pre; white-space: pre-wrap; word-wrap: break-word; + padding: 15px; + } + + pre, code, kbd, samp { font-family: monospace, sans-serif; } + + // Lists + ul, ol { margin:$list-margin; padding:$list-padding;} + + ol { list-style-type: decimal; } + + // Remove margin from navigation lists. + nav ul, + nav li { list-style:none; list-style-image: none; margin: 0; } + + // Lists + dl { margin: 0 0 1.5em 0; } + + dl dt { font-weight: bold; } + + dd { margin-left: 1.5em;} + + +// Text Level Semantics (a, em, strong, small, s, cite, q, dfn, abbr, time, code, var, samp, kbd, sub, i, b, u, mark, ruby, rt, rp, bdi, bdo, span, br, wbr) +// ---------------------------------------- + + // Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test + a {text-decoration:none;} + + a:hover, a:active { outline: none; text-decoration:underline;} + + a, a:active, a:visited { color: $link-color; } + + a:hover { color: $link-hover-color; } + + // Headers (h1, h2, etc) have no default font-size or margin; define those yourself + h1, h2, h3, h4, h5, h6 { @include sk-header-tags; } + + // j.mp/webkit-tap-highlight-color + a:link { -webkit-tap-highlight-color: #FF5E99; } + + small { font-size: 85%; } + + strong, b, th, dfn { font-weight: bold; } + + em, i { font-style:italic; } + + mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; } + + abbr, + acronym { border-bottom: 1px dotted #666; } + + address { font-style: italic; margin: 0 0 1.5em; } + + // Set sub, sup without affecting line-height: gist.github.com/413930 + sub, sup { font-size: 75%; line-height: 0; position: relative; } + + sup { top: -0.5em; } + + sub { bottom: -0.25em; } + + +// Embedded Content (img) +// ---------------------------------------- + + // Bicubic resizing for non-native sized IMG: + // code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ + .ie7 img { -ms-interpolation-mode: bicubic; } + + +// Tabular Data (table, caption, colgroup, col, tbody, thead, tfoot, tr, td, th) +// ---------------------------------------- + + table { margin-bottom: 1.4em; width:100%; } + + th { font-weight: bold; } + + th,td,caption { padding: 4px 10px 4px 5px; text-align: left; } + + +// Edits (ins, del) +// ---------------------------------------- + + ins { background-color: #ff9; color: #000; text-decoration: none; } + + del { color:#666; } + + +// Forms +// ---------------------------------------- + + select, input, textarea, button { font: 99% $base-font-family; outline:none;} + + td { vertical-align: top; } + + textarea { overflow: auto; } + + // Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css + input[type="radio"] { vertical-align: text-bottom; } + + input[type="checkbox"] { vertical-align: bottom; } + + // Hand cursor on clickable input elements + + label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; } + + // Webkit browsers add a 2px margin outside the chrome of form elements + button, input, select, textarea { margin: 0; } + + + // required:valid and required:invalid moved to form.scss + + // Make buttons play nice in IE: + // www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ + button { overflow: visible; width: auto; } + + @if in-compatibility-mode() { + .ie7 input[type="checkbox"] { vertical-align: baseline; } + + .ie6 input { vertical-align: text-bottom; } + + .ie6 legend, .ie7 legend { margin-left: -7px; } + } + + +// Etc. +// ---------------------------------------- + + ::-moz-selection{ background: $selected-background-color; color:$selected-font-color; text-shadow: none; } + ::selection { background:$selected-background-color; color:$selected-font-color; text-shadow: none; } diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/README b/app/assets/stylesheets/vendor/boilerplate-2.0/README new file mode 100644 index 0000000..c9cd066 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-2.0/README @@ -0,0 +1,16 @@ +HTML5 ✰ Boilerplate 2.0 (7467f9c0417a0c1f9863e2d000aad73f34836ef2) + +style.css contains a reset, font normalization and some base styles. + +Credit is left where credit is due. +Much inspiration was taken from these projects: +- yui.yahooapis.com/2.8.1/build/base/base.css +- camendesign.com/design/ +- praegnanz.de/weblog/htmlcssjs-kickstart + +Implementation to Compass as part of Survival Kit by Mario "Kuroir" Ricalde. + +Notes: + + - Not implementing Non-semantic helper classes. Use Compass builts-in. + - 1.0 and 2.0 are very similar. With 2.0 you save a couple of bytes.. maybe not worth the change? \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss new file mode 100644 index 0000000..6268a35 --- /dev/null +++ b/app/assets/stylesheets/vendor/boilerplate-2.0/_styles.scss @@ -0,0 +1,209 @@ +// +// HTML5 ✰ Boilerplate +// +// What follows is the result of much research on cross-browser styling. +// Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, +// Kroc Camen, and the H5BP dev community and team. +// +// Detailed information about this CSS: h5bp.com/css +// +// ==|== normalize ========================================================== +// + + +// ========================================================================== +// HTML5 display definitions +// ========================================================================== + +article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } +audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } +audio:not([controls]) { display: none; } +[hidden] { display: none; } + +// ========================================================================== +// Base +// ========================================================================== + +// +// 1. Correct text resizing oddly in IE6/7 when body font-size is set using em units +// 2. Force vertical scrollbar in non-IE +// 3. Prevent iOS text size adjust on device orientation change, without disabling user zoom: h5bp.com/g +// + +html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } + +body { margin: 0; font-size: $base-font-size; line-height: $base-line-height; } + +body, button, input, select, textarea { font-family: $base-font-family; color: $font-color; } + +// +// Remove text-shadow in selection highlight: h5bp.com/i +// These selection declarations have to be separate +// Also: hot pink! (or customize the background color to match your design) +// + +::-moz-selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; } +::selection { background: $selected-background-color; color: $selected-font-color; text-shadow: none; } + + +// ========================================================================== +// Links +// ========================================================================== + +a { color: $link-color; } +a:visited { color: $link-visited-color; } +a:hover { color: $link-hover-color; } +a:focus { outline: thin dotted; } + +/* Improve readability when focused and hovered in all browsers: h5bp.com/h */ +a:hover, a:active { outline: 0; } + + +// ========================================================================== +// Typography +// ========================================================================== + +abbr[title] { border-bottom: 1px dotted; } + +b, strong { font-weight: bold; } + +i, em { font-style:italic;} + +blockquote { margin: 1em 40px; } + +dfn { font-style: italic; } + +hr { display: block; height: 1px; border: 0; border-top: 1px solid $hr-color; margin: 1em 0; padding: 0; } + +ins { background: #ff9; color: #000; text-decoration: none; } + +mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } + +// Redeclare monospace font family: h5bp.com/j +pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; } + +// Improve readability of pre-formatted text in all browsers +pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } + +q { quotes: none; } +q:before, q:after { content: ""; content: none; } + +small { font-size: 85%; } + +// Position subscript and superscript content without affecting line-height: h5bp.com/k +sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } +sup { top: -0.5em; } +sub { bottom: -0.25em; } + + +// ========================================================================== +// Lists +// ========================================================================== +dl {margin:$list-margin;} +ul, ol { margin: $list-margin; padding: $list-padding; } +dd { margin: 0 0 0 40px; } +nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } + + +// ========================================================================== +// Embedded content +// ========================================================================== + +// +// 1. Improve image quality when scaled in IE7: h5bp.com/d +// 2. Remove the gap between images and borders on image containers: h5bp.com/e +// + +img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } + +// +// Correct overflow not hidden in IE9 +// + +svg:not(:root) { overflow: hidden; } + + +// ========================================================================== +// Figures +// ========================================================================== + +figure { margin: 0; } + + +// ========================================================================== +// Forms +// ========================================================================== + +form { margin: 0; } +fieldset { border: 0; margin: 0; padding: 0; } + +// Indicate that 'label' will shift focus to the associated form element +label { cursor: pointer; } + +// +// 1. Correct color not inheriting in IE6/7/8/9 +// 2. Correct alignment displayed oddly in IE6/7 +// + +legend { border: 0; *margin-left: -7px; padding: 0; } + +// +// 1. Correct font-size not inheriting in all browsers +// 2. Remove margins in FF3/4 S5 Chrome +// 3. Define consistent vertical alignment display in all browsers +// + +button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } + +// +// 1. Define line-height as normal to match FF3/4 (set using !important in the UA stylesheet) +// 2. Correct inner spacing displayed oddly in IE6/7 +// + +button, input { line-height: normal; *overflow: visible; } + +// +// Reintroduce inner spacing in 'table' to avoid overlap and whitespace issues in IE6/7 +// + +table button, table input { *overflow: auto; } + +// +// 1. Display hand cursor for clickable form elements +// 2. Allow styling of clickable form elements in iOS +// + +button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; } + +// +// Consistent box sizing and appearance +// + +input[type="checkbox"], input[type="radio"] { box-sizing: border-box; } +input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } +input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } + +// +// Remove inner padding and border in FF3/4: h5bp.com/l +// + +button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } + +// +// 1. Remove default vertical scrollbar in IE6/7/8/9 +// 2. Allow only vertical resizing +// + +textarea { overflow: auto; vertical-align: top; resize: vertical; } + +// Colors for form validity +input:valid, textarea:valid { } +input:invalid, textarea:invalid { background-color: #f0dddd; } + + +// ========================================================================== +// Tables +// ========================================================================== + +table { border-collapse: collapse; border-spacing: 0; } +td { vertical-align: top; } \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/easy-slider/_numeric.scss b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss new file mode 100644 index 0000000..db61e78 --- /dev/null +++ b/app/assets/stylesheets/vendor/easy-slider/_numeric.scss @@ -0,0 +1,44 @@ +// +// @TODO: Add docs to easy-slider-numeric! +// +@mixin easy-slider-numeric($width, $height, $selector:'#slider') { + #{$selector} { + & ul, & li { + margin:0; + padding:0; + list-style:none; + } + & li { + width:$width; + height:$height; + overflow:hidden; + } + } + @include _numeric-controls(); +} + +// You can override this function to alter the appearance of the numeric controls. +@mixin _numeric-controls() { + #controls{ + margin:10px 0; + line-height:28px; + list-style:none; + text-align:right; + li { + @include inline-block; + margin:0 0 0 10px; + } + .current a { + background:#FFFFFF; + color:#C80111; + @include box-shadow(0px 0px 3px #B2B2B2); + padding:6px 11px; // Simulate "hover" + } + a { + padding:5px 10px; + background:#F5F5F5; + border: 1px solid #AEAEAE; + color: #7F7F7F; + } + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/facebox/_facebox.scss b/app/assets/stylesheets/vendor/facebox/_facebox.scss new file mode 100644 index 0000000..53e612d --- /dev/null +++ b/app/assets/stylesheets/vendor/facebox/_facebox.scss @@ -0,0 +1,85 @@ +$facebox-overlay: #000 !default; +#facebox { + left: 0; + position: fixed; + text-align: left; + top: 0; + z-index: 100; +} + + +#facebox .popup{ + border:9px solid rgba(0, 157, 214, 0.8); + border-radius:5px; + -moz-border-radius:5px; + -webkit-border-radius:5px; + box-shadow:0 0 18px rgba(0,0,0,0.4); + -moz-box-shadow:0 0 18px rgba(0,0,0,0.4); + -webkit-box-shadow:0 0 18px rgba(0,0,0,0.4); + position:relative; +} + +#facebox .content { + background: #fff; + border-radius:4px; + -moz-border-radius:4px; + -webkit-border-radius:4px; + display:table; + min-width: 370px; + padding: 10px; +} + +#facebox .content > p:first-child{ + margin-top:0; +} +#facebox .content > p:last-child{ + margin-bottom:0; +} + +#facebox .close{ + padding:2px; + position:absolute; + right:5px; + top:5px; + z-index:101; +} +#facebox .close img{ + opacity:0.3; +} +#facebox .close:hover img{ + opacity:1.0; +} + +#facebox .loading { + text-align: center; +} + +#facebox .image { + text-align: center; +} + +#facebox img { + border: 0; + margin: 0; +} + +#facebox_overlay { + height:100%; + left: 0px; + position: fixed; + top: 0px; + width:100%; +} + +.facebox_hide { + z-index:-100; +} + +.facebox_overlayBG { + background-color: $facebox-overlay; + z-index: 99; +} + +#facebox h1{ + margin: 0 0 10px 0; +} diff --git a/app/assets/stylesheets/vendor/fancy-box/README b/app/assets/stylesheets/vendor/fancy-box/README new file mode 100644 index 0000000..70212dd --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-box/README @@ -0,0 +1,4 @@ +Fancybox 1.3.4 (2010/11/11) +Licensed under both MIT and GPL licenses + +http://fancybox.net/ \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss new file mode 100755 index 0000000..7ec2644 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-box/_fancy-box.scss @@ -0,0 +1,336 @@ +// +// FancyBox - jQuery Plugin +// Simple and fancy lightbox alternative +// +// Examples and documentation at: http://fancybox.net +// +// Copyright (c) 2008 - 2010 Janis Skarnelis +// That said, it is hardly a one-person project. Many people have submitted bugs, code, and offered their advice freely. Their support is greatly appreciated. +// +// Version: 1.3.4 (11/11/2010) +// Requires: jQuery v1.3+ +// +// Dual licensed under the MIT and GPL licenses: +// http://www.opensource.org/licenses/mit-license.php +// http://www.gnu.org/licenses/gpl.html +// + +#fancybox-loading { + position: fixed; + top: 50%; + left: 50%; + width: 40px; + height: 40px; + margin-top: -20px; + margin-left: -20px; + cursor: pointer; + overflow: hidden; + z-index: 1104; + display: none; +} + +#fancybox-loading div { + position: absolute; + top: 0; + left: 0; + width: 40px; + height: 480px; + background-image: image-url('vendor/fancy-box/fancybox.png'); +} + +#fancybox-overlay { + position: absolute; + top: 0; + left: 0; + width: 100%; + z-index: 1100; + display: none; +} + +#fancybox-tmp { + padding: 0; + margin: 0; + border: 0; + overflow: auto; + display: none; +} + +#fancybox-wrap { + position: absolute; + top: 0; + left: 0; + padding: 20px; + z-index: 1101; + outline: none; + display: none; +} + +#fancybox-outer { + position: relative; + width: 100%; + height: 100%; + background: #fff; +} + +#fancybox-content { + width: 0; + height: 0; + padding: 0; + outline: none; + position: relative; + overflow: hidden; + z-index: 1102; + border: 0px solid #fff; +} + +#fancybox-hide-sel-frame { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: transparent; + z-index: 1101; +} + +#fancybox-close { + position: absolute; + top: -15px; + right: -15px; + width: 30px; + height: 30px; + background: transparent image-url('vendor/fancy-box/fancybox.png') -40px 0px; + cursor: pointer; + z-index: 1103; + display: none; +} + +#fancybox-error { + color: #444; + font: normal 12px/20px Arial; + padding: 14px; + margin: 0; +} + +#fancybox-img { + width: 100%; + height: 100%; + padding: 0; + margin: 0; + border: none; + outline: none; + line-height: 0; + vertical-align: top; +} + +#fancybox-frame { + width: 100%; + height: 100%; + border: none; + display: block; +} + +#fancybox-left, #fancybox-right { + position: absolute; + bottom: 0px; + height: 100%; + width: 35%; + cursor: pointer; + outline: none; + background: transparent image-url('vendor/fancy-box/blank.gif'); + z-index: 1102; + display: none; +} + +#fancybox-left { + left: 0px; +} + +#fancybox-right { + right: 0px; +} + +#fancybox-left-ico, #fancybox-right-ico { + position: absolute; + top: 50%; + left: -9999px; + width: 30px; + height: 30px; + margin-top: -15px; + cursor: pointer; + z-index: 1102; + display: block; +} + +#fancybox-left-ico { + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -30px; +} + +#fancybox-right-ico { + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -60px; +} + +#fancybox-left:hover, #fancybox-right:hover { + visibility: visible; /* IE6 */ +} + +#fancybox-left:hover span { + left: 20px; +} + +#fancybox-right:hover span { + left: auto; + right: 20px; +} + +.fancybox-bg { + position: absolute; + padding: 0; + margin: 0; + border: 0; + width: 20px; + height: 20px; + z-index: 1001; +} + +#fancybox-bg-n { + top: -20px; + left: 0; + width: 100%; + background-image: image-url('vendor/fancy-box/fancybox-x.png'); +} + +#fancybox-bg-ne { + top: -20px; + right: -20px; + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -162px; +} + +#fancybox-bg-e { + top: 0; + right: -20px; + height: 100%; + background-image: image-url('vendor/fancy-box/fancybox-y.png'); + background-position: -20px 0px; +} + +#fancybox-bg-se { + bottom: -20px; + right: -20px; + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -182px; +} + +#fancybox-bg-s { + bottom: -20px; + left: 0; + width: 100%; + background-image: image-url('vendor/fancy-box/fancybox-x.png'); + background-position: 0px -20px; +} + +#fancybox-bg-sw { + bottom: -20px; + left: -20px; + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -142px; +} + +#fancybox-bg-w { + top: 0; + left: -20px; + height: 100%; + background-image: image-url('vendor/fancy-box/fancybox-y.png'); +} + +#fancybox-bg-nw { + top: -20px; + left: -20px; + background-image: image-url('vendor/fancy-box/fancybox.png'); + background-position: -40px -122px; +} + +#fancybox-title { + font-family: Helvetica; + font-size: 12px; + z-index: 1102; +} + +.fancybox-title-inside { + padding-bottom: 10px; + text-align: center; + color: #333; + background: #fff; + position: relative; +} + +.fancybox-title-outside { + padding-top: 10px; + color: #fff; +} + +.fancybox-title-over { + position: absolute; + bottom: 0; + left: 0; + color: #FFF; + text-align: left; +} + +#fancybox-title-over { + padding: 10px; + background-image: image-url('vendor/fancy-box/fancy_title_over.png'); + display: block; +} + +.fancybox-title-float { + position: absolute; + left: 0; + bottom: -20px; + height: 32px; +} + +#fancybox-title-float-wrap { + border: none; + border-collapse: collapse; + width: auto; +} + +#fancybox-title-float-wrap td { + border: none; + white-space: nowrap; +} + +#fancybox-title-float-left { + padding: 0 0 0 15px; + background: image-url('vendor/fancy-box/fancybox.png') -40px -90px no-repeat; +} + +#fancybox-title-float-main { + color: #FFF; + line-height: 29px; + font-weight: bold; + padding: 0 0 3px 0; + background: image-url('vendor/fancy-box/fancybox-x.png') 0px -40px; +} + +#fancybox-title-float-right { + padding: 0 0 0 15px; + background: image-url('vendor/fancy-box/fancybox.png') -55px -90px no-repeat; +} + +/* IE6, IE7, IE8 */ + +.fancybox-ie .fancybox-bg { background: transparent !important; } + +.fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_n.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_ne.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_e.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_se.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_s.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_sw.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_w.png', sizingMethod='scale'); } +.fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='fancybox/fancy_shadow_nw.png', sizingMethod='scale'); } \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-buttons/README b/app/assets/stylesheets/vendor/fancy-buttons/README new file mode 100644 index 0000000..9ee6cc3 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/README @@ -0,0 +1,3 @@ + Fancy Buttons by imathis + https://github.com/imathis/fancy-buttons + License: MIT \ No newline at end of file diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss new file mode 100644 index 0000000..2e85caf --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-buttons.scss @@ -0,0 +1,195 @@ +@import "compass/css3/gradient"; +@import "compass/css3/border-radius"; +@import "compass/css3/opacity"; +@import "compass/css3/text-shadow"; +@import "compass/css3/box-shadow"; +@import "compass/css3/background-clip"; +@import "fancy-gradient"; + +$fb-gradient-style: glossy !default; +$fb-invert-on-click: 1 !default; +$fb-font-size: 18px !default; +$fb-color: #444444 !default; +$fb-font-weight: bold !default; +$fb-border-width: 1px !default; +$fb-radius: 6px !default; +$fb-light-text: white !default; +$fb-dark-text: #222222 !default; +$fb-gradient: 1 !default; +$fb-image-path: image-url("vendor/fancy-buttons/button_bg.png") !default; +$fb-allow-disabled: false !default; +$fb-line-height: 1.2em !default; + +// Make a fancy button. +@mixin fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors($color); +} + +// Style the button's colors, picking the most appropriate color set for the base color. +@mixin fancy-button-colors($color: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled) { + @include fb-color($color, "default"); + &:hover, &:focus { + @if $hover == 0 { + @include fb-color(darken($color, 3), "hover", $color); } + @else { + @include fb-color($hover, "hover"); } } + &:active { + @if $active == 0 { + @include fb-color(darken($color, 6), "active", $color); + @include box-shadow(darken($color, 15) 0 0.08em 0.2em 1px inset); } + @else { + @include fb-color($active, "active"); + @include box-shadow(darken($active, 9) 0 0.08em 0.1em 1px inset); } } + @include box-shadow(rgba(white, lightness($color) / 100) 0 0 0.1em 1px inset); + @include background-clip(padding-box); + @if $fb-allow-disabled { + &.disabled, &[disabled] { + @include disable-fancy-button($color); + } + } +} + +@mixin fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + $fb-disable-allowed: $fb-allow-disabled; + $fb-allow-disabled: true; + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-matte($color); + $fb-allow-disabled: $fb-disable-allowed; +} + +@mixin fancy-button-matte($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-matte($color); +} + +@mixin fancy-button-custom($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width) { + @include fancy-button-structure($font-size, $radius, $border-width); + @include fancy-button-colors-custom($color, $font-size, $radius, $border-width); +} + +@mixin fancy-button-colors-matte($color: $fb-color, $hover: 0, $active: 0) { + $fb-current-style: $fb-gradient-style; + $fb-gradient-style: matte; + @include fancy-button-colors($color, $hover, $active); + $fb-gradient-style: $fb-current-style; +} + +@mixin fancy-button-colors-custom($color: $fb-color, $hover: 0, $active: 0) { + $fb-current-style: $fb-gradient-style; + $fb-gradient-style: custom; + @include fancy-button-colors($color, $hover, $active); + $fb-gradient-style: $fb-current-style; +} + +// Default state color settings +@mixin fb-color($color, $state, $lumins: $color) { + $gradient-top: lighten($color, 15); + $gradient-bottom: darken($color, 6); + $border-color: darken($color, 8); + @if $fb-invert-on-click != 0 { + $border-color: darken($color, 15); } + @if saturation($color) > 0 { + $color: saturate($color, 40); } + @else if lightness($lumins) >= lightness(#aaaaaa) { + $color: lighten($color, 20); } + @include fb-state-colors($color, $gradient-top, $gradient-bottom, $border-color, $state, $lumins); +} + +// Apply the button colors specified for the button state into which it is mixed. +@mixin fb-state-colors($color, $gradient-top, $gradient-bottom, $border, $state, $lumins: $color) { + background-color: $color; + @if $fb-gradient != 0 { + @if $fb-gradient-style == "glossy" { + @if $state == "active" { + @include fancy-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include fancy-gradient($gradient-top, $gradient-bottom); } } + @else if $fb-gradient-style == "matte" { + @if $state == "active" { + @include fancy-matte-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include fancy-matte-gradient($gradient-top, $gradient-bottom); } } + @else if $fb-gradient-style == "custom" { + @if $state == "active" { + @include custom-fancy-gradient-active($gradient-top, $gradient-bottom); } + @else { + @include custom-fancy-gradient($gradient-top, $gradient-bottom); } } } + border: { + color: $border; }; + $text-shadow-settings: unquote("0px 1px 1px"); + @if $fb-invert-on-click != 0 and $state == "active" { + $text-shadow-settings: unquote("0px -1px -1px"); } + @if lightness($lumins) < lightness(#aaaaaa) { + text-shadow: darken($color, 25) $text-shadow-settings; + &, &:visited { + color: $fb-light-text; } } + @else { + text-shadow: lighten($color, 15) $text-shadow-settings; + &, &:visited { + color: $fb-dark-text; } } +} + +@mixin fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled: $fb-allow-disabled) { + &, &:visited { + color: $color; } + &:hover, &:focus { + color: $hover; } + &:active { + color: $active; } + @if $fb-allow-disabled { + &.disabled, &[disabled] { + color: $color; } } +} + +// Layout the button's box +@mixin fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) { + @extend .fancy-button-reset-base-class; + @include fancy-button-size($font-size, $radius, $border-width, $line-height); +} + +@mixin fancy-button-size($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height) { + // better padding for smaller buttons + $v-padding: 0.3em; + $h-padding: 1em; + @if $radius > 0 { + @include border-radius($radius); } + font-size: $font-size; + line-height: $line-height; + @include fancy-button-padding($v-padding, $h-padding, $border-width); +} + +@mixin fancy-button-padding($v-padding, $h-padding, $border-width: $fb-border-width) { + padding: $v-padding $h-padding; + border-width: $border-width; +} + +// Reset the button's important properties to make sure they behave correctly +@mixin fb-reset($font-weight: $fb-font-weight) { + font-family: "Lucida Grande", Lucida, Arial, sans-serif; + background: #{$fb-image-path} repeat-x bottom left; + margin: 0; + width: auto; + overflow: visible; + display: inline-block; + cursor: pointer; + text-decoration: none; + border-style: solid; + font-weight: $font-weight; + &::-moz-focus-inner { + border: none; + padding: 0; } + &:focus { + outline: none; } +} + +@mixin disable-fancy-button($color: $fb-color, $opacity: 0.7) { + @include fb-color($color, "default"); + @include opacity($opacity); + @include box-shadow(none); + cursor: default !important; +} + +.fancy-button-reset-base-class { + @include fb-reset; +} diff --git a/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss new file mode 100644 index 0000000..da0baa9 --- /dev/null +++ b/app/assets/stylesheets/vendor/fancy-buttons/_fancy-gradient.scss @@ -0,0 +1,28 @@ +@mixin fancy-gradient($color1, $color2) { + $top_shine: lighten($color1, 18); + $bottom_glow: lighten($color2, 10); + $top_middle: $color1; + $middle: lighten($color2, 3); + $bottom_middle: $color2; + @include background-image(linear-gradient($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow)); } + +@mixin fancy-gradient-active($color1, $color2) { + $top: lighten($color2, 6); + $bottom: lighten($color2, 14); + $top_middle: lighten($color2, 8); + $middle: lighten($color2, 4); + $bottom_middle: lighten($color2, 1); + @include background-image(linear-gradient($top, $top_middle 30%, $middle 50%, $bottom_middle 50%, $bottom)); } + +@mixin fancy-matte-gradient($color1, $color2) { + @include background-image(linear-gradient($color1, $color2)); } + +@mixin fancy-matte-gradient-active($color1, $color2) { + $top: lighten($color2, 5); + $bottom: lighten($color2, 15); + $middle: lighten($color2, 8); + @include background-image(linear-gradient($top, $middle 40%, $middle 85%, $bottom)); } + +/* incase an inverted custom gradient isn't specified */ +@mixin custom-fancy-gradient-active($color1, $color2) { + @include custom-fancy-gradient($color1, $color2); } 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 +// ---------------------------------------- +//
+//
14 de Julio 2010
+//

Lorem My Ipsum

+// Blog Thumb +//

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...

+//

Nota Completa

+//
+@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 +// ---------------------------------------- +// + +// 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. +// +// +@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 +//

+@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 -- cgit v1.2.3