diff --git a/Gemfile b/Gemfile index 82ebbe0..0a90f65 100644 --- a/Gemfile +++ b/Gemfile @@ -26,9 +26,13 @@ gem 'rmagick', '~> 2.13.2', require: false gem 'sprockets', '~> 2.2.1' gem 'tinymce-rails', '~> 3.5.9' gem 'jquery-rails', '~> 2.0.2' -gem 'sass-rails', '~> 3.2.5' +gem 'sass-rails', '~> 3.2.6' gem 'coffee-rails', '~> 3.2.2' +gem 'bourbon', '~> 3.1.8' +gem 'neat', '~> 1.6.0' +gem 'bitters', '~> 0.9.3' + group :assets do gem 'uglifier', '~> 2.5.0' end diff --git a/Gemfile.lock b/Gemfile.lock index 9314278..71a2fe8 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -33,7 +33,14 @@ GEM rake (>= 0.8.7) arel (3.0.3) bbcoder (1.0.1) + bitters (0.9.3) + bourbon (>= 3.1) + sass (>= 3.2) + thor bluecloth (2.2.0) + bourbon (3.1.8) + sass (>= 3.2.0) + thor builder (3.0.4) capistrano (3.1.0) i18n @@ -123,6 +130,9 @@ GEM multi_json (1.8.4) multipart-post (2.0.0) mysql2 (0.3.15) + neat (1.6.0) + bourbon (>= 3.1) + sass (>= 3.3) net-scp (1.1.2) net-ssh (>= 2.6.5) net-ssh (2.8.0) @@ -195,8 +205,8 @@ GEM rubyzip (1.1.2) sanitize (2.1.0) nokogiri (>= 1.4.4) - sass (3.1.20) - sass-rails (3.2.5) + sass (3.3.4) + sass-rails (3.2.6) railties (~> 3.2.0) sass (>= 3.1.10) tilt (~> 1.3) @@ -255,7 +265,9 @@ PLATFORMS DEPENDENCIES annotate (~> 2.6.2) bbcoder (~> 1.0.1) + bitters (~> 0.9.3) bluecloth (~> 2.2.0) + bourbon (~> 3.1.8) capistrano (~> 3.1.0) capistrano-bundler (~> 1.1.2) capistrano-rails (~> 1.1) @@ -277,6 +289,7 @@ DEPENDENCIES jquery-rails (~> 2.0.2) kgio (~> 2.9.2) mysql2 (~> 0.3.15) + neat (~> 1.6.0) newrelic_rpm (~> 3.7.2.195) nokogiri (~> 1.6.1) oj (~> 2.5.5) @@ -287,7 +300,7 @@ DEPENDENCIES rmagick (~> 2.13.2) rspec-rails (~> 2.14.1) sanitize (~> 2.1.0) - sass-rails (~> 3.2.5) + sass-rails (~> 3.2.6) selenium-webdriver (~> 2.41.0) simplecov (~> 0.7.1) sprockets (~> 2.2.1) diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js index 4919a9c..c6a52f9 100644 --- a/app/assets/javascripts/application.js +++ b/app/assets/javascripts/application.js @@ -12,4 +12,4 @@ //= require tinymce-jquery //= require yetii //= require local - +//= require redesign diff --git a/app/assets/javascripts/local.js b/app/assets/javascripts/local.js index a0c08bc..2631fab 100644 --- a/app/assets/javascripts/local.js +++ b/app/assets/javascripts/local.js @@ -121,85 +121,6 @@ $( function() { $(this).scrollTop(scrollTop-Math.round(delta)); }); - // Contests - $("div#indexMenu div.contests").mouseenter(function(){ - $("div#indexItems div.contests").fadeIn(100); - }); - - $("div#indexMenu div.contests").mouseout(function(){ - menuContests = setTimeout(function(){ - $("div#indexItems div.contests").fadeOut(100); - }, 100); - }); - - $("div#indexItems div.contests").mouseenter(function(){ - clearTimeout(menuContests); - }); - - $("div#indexItems div.contests").mouseleave(function(){ - $("div#indexItems div.contests").fadeOut(100); - }); - - // Gather - - $("div#indexMenu div.gather").mouseenter(function(){ - $("div#indexItems div.gather").fadeIn(100); - }); - - $("div#indexMenu div.gather").mouseout(function(){ - menuGather = setTimeout(function(){ - $("div#indexItems div.gather").fadeOut(100); - }, 100); - }); - - $("div#indexItems div.gather").mouseenter(function(){ - clearTimeout(menuGather); - }); - - $("div#indexItems div.gather").mouseleave(function(){ - $("div#indexItems div.gather").fadeOut(100); - }); - - // Forums - - $("div#indexMenu div.material").mouseenter(function(){ - $("div#indexItems div.material").fadeIn(100); - }); - - $("div#indexMenu div.material").mouseout(function(){ - menuMaterial = setTimeout(function(){ - $("div#indexItems div.material").fadeOut(100); - }, 100); - }); - - $("div#indexItems div.material").mouseenter(function(){ - clearTimeout(menuMaterial); - }); - - $("div#indexItems div.material").mouseleave(function(){ - $("div#indexItems div.material").fadeOut(100); - }); - - // Forums - - $("div#indexMenu div.forums").mouseenter(function(){ - $("div#indexItems div.forums").fadeIn(100); - }); - - $("div#indexMenu div.forums").mouseout(function(){ - menuForums = setTimeout(function(){ - $("div#indexItems div.forums").fadeOut(100); - }, 100); - }); - - $("div#indexItems div.forums").mouseenter(function(){ - clearTimeout(menuForums); - }); - - $("div#indexItems div.forums").mouseleave(function(){ - $("div#indexItems div.forums").fadeOut(100); - }); - // Gather stuff $("a#gatherInfoHide").live('click', function() { @@ -289,4 +210,4 @@ function add_fields(link, association, content) { var new_id = new Date().getTime(); var regexp = new RegExp("new_" + association, "g") $(link).parent().before(content.replace(regexp, new_id)); -} \ No newline at end of file +} diff --git a/app/assets/javascripts/redesign.js b/app/assets/javascripts/redesign.js new file mode 100644 index 0000000..a7b0673 --- /dev/null +++ b/app/assets/javascripts/redesign.js @@ -0,0 +1,13 @@ +$(function() { + var menu = $('#navigation-menu'); + var menuToggle = $('#js-mobile-menu'); + + $(menuToggle).on('click', function(e) { + e.preventDefault(); + menu.slideToggle(function(){ + if(menu.is(':hidden')) { + menu.removeAttr('style'); + } + }); + }); +}); diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css deleted file mode 100644 index 60db6ad..0000000 --- a/app/assets/stylesheets/application.css +++ /dev/null @@ -1,7 +0,0 @@ -/* - * This is a manifest file that'll automatically include all the stylesheets available in this directory - * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at - * the top of the compiled file, but it's generally better to create a new file per style scope. - *= require_self - *= require_tree . -*/ \ No newline at end of file diff --git a/app/assets/stylesheets/application.css.scss b/app/assets/stylesheets/application.css.scss new file mode 100644 index 0000000..ff5426f --- /dev/null +++ b/app/assets/stylesheets/application.css.scss @@ -0,0 +1 @@ +@import "scss/all"; \ No newline at end of file diff --git a/app/assets/stylesheets/scss/all.scss b/app/assets/stylesheets/scss/all.scss new file mode 100644 index 0000000..a584134 --- /dev/null +++ b/app/assets/stylesheets/scss/all.scss @@ -0,0 +1,4 @@ +@import "bourbon/bourbon"; +@import "bitters/bitters"; +@import "neat/neat"; +@import "layout/all"; \ No newline at end of file diff --git a/app/assets/stylesheets/scss/bitters/_bitters.scss b/app/assets/stylesheets/scss/bitters/_bitters.scss new file mode 100644 index 0000000..5daef1a --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_bitters.scss @@ -0,0 +1,16 @@ +// Neat Settings -- uncomment if using Neat +/////////////////////////////////////////////////////////////////////////////// +@import "neat-helpers"; // or "neat/neat-helpers" when not in Rails +@import "grid-settings"; + + +// Bitters +/////////////////////////////////////////////////////////////////////////////// +@import "variables"; +@import "extends/base"; +@import "mixins/base"; +@import "typography"; +@import "forms"; +@import "tables"; +@import "lists"; +@import "flashes"; diff --git a/app/assets/stylesheets/scss/bitters/_flashes.scss b/app/assets/stylesheets/scss/bitters/_flashes.scss new file mode 100644 index 0000000..8714ae8 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_flashes.scss @@ -0,0 +1,11 @@ +%flash-error { + @include flash($error-color); +} + +%flash-notice { + @include flash($notice-color); +} + +%flash-success { + @include flash($success-color); +} diff --git a/app/assets/stylesheets/scss/bitters/_forms.scss b/app/assets/stylesheets/scss/bitters/_forms.scss new file mode 100644 index 0000000..585dee6 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_forms.scss @@ -0,0 +1,95 @@ +$form-border-color: $base-border-color; +$form-border-color-hover: darken($base-border-color, 10); +$form-border-color-focus: $base-accent-color; +$form-border-radius: $base-border-radius; +$form-box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.06); +$form-box-shadow-focus: $form-box-shadow, 0 0 5px rgba(darken($form-border-color-focus, 5), 0.7); +$form-font-size: $base-font-size; +$form-font-family: $base-font-family; + +fieldset { + background: lighten($base-border-color, 10); + border: 1px solid $base-border-color; + margin: 0 0 ($base-line-height / 2) 0; + padding: $base-line-height; +} + +input, +label, +select { + display: block; + font-family: $form-font-family; + font-size: $form-font-size; +} + +label { + font-weight: bold; + margin-bottom: $base-line-height / 4; + + &.required:after { + content: "*"; + } + + abbr { + display: none; + } +} + +textarea, +#{$all-text-inputs}, +select[multiple=multiple] { + @include box-sizing(border-box); + @include transition(border-color); + background-color: white; + border-radius: $form-border-radius; + border: 1px solid $form-border-color; + box-shadow: $form-box-shadow; + font-family: $form-font-family; + font-size: $form-font-size; + margin-bottom: $base-line-height / 2; + padding: ($base-line-height / 3) ($base-line-height / 3); + width: 100%; + + &:hover { + border-color: $form-border-color-hover; + } + + &:focus { + border-color: $form-border-color-focus; + box-shadow: $form-box-shadow-focus; + outline: none; + } +} + +textarea { + resize: vertical; +} + +input[type="search"] { + @include appearance(none); +} + +input[type="checkbox"], input[type="radio"] { + display: inline; + margin-right: $base-line-height / 4; +} + +input[type="file"] { + width: 100%; +} + +select { + width: auto; + max-width: 100%; + margin-bottom: $base-line-height; +} + +button, +input[type="submit"] { + @extend %button; + @include appearance(none); + cursor: pointer; + user-select: none; + vertical-align: middle; + white-space: nowrap; +} diff --git a/app/assets/stylesheets/scss/bitters/_grid-settings.scss b/app/assets/stylesheets/scss/bitters/_grid-settings.scss new file mode 100644 index 0000000..7f9652c --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_grid-settings.scss @@ -0,0 +1,14 @@ +// Neat Overrides +/////////////////////////////////////////////////////////////////////////////// +// $column: 90px; +// $gutter: 30px; +// $grid-columns: 12; +// $max-width: em(1088); + +// Neat Breakpoints +/////////////////////////////////////////////////////////////////////////////// +$medium-screen: em(640); +$large-screen: em(860); + +$medium-screen-up: new-breakpoint(min-width $medium-screen 4); +$large-screen-up: new-breakpoint(min-width $large-screen 8); diff --git a/app/assets/stylesheets/scss/bitters/_lists.scss b/app/assets/stylesheets/scss/bitters/_lists.scss new file mode 100644 index 0000000..370267a --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_lists.scss @@ -0,0 +1,31 @@ +ul, ol { + margin: 0; + padding: 0; + list-style-type: none; + + &%default-ul { + list-style-type: disc; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } + + &%default-ol { + list-style-type: decimal; + margin-bottom: $base-line-height / 2; + padding-left: $base-line-height; + } +} + +dl { + line-height: $base-line-height; + margin-bottom: $base-line-height / 2; + + dt { + font-weight: bold; + margin-top: $base-line-height / 2; + } + + dd { + margin: 0; + } +} diff --git a/app/assets/stylesheets/scss/bitters/_tables.scss b/app/assets/stylesheets/scss/bitters/_tables.scss new file mode 100644 index 0000000..31e78f4 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_tables.scss @@ -0,0 +1,22 @@ +table { + border-collapse: collapse; + margin: ($base-line-height / 2) 0; + table-layout: fixed; + width: 100%; +} + +th { + border-bottom: 1px solid darken($base-border-color, 15%); + font-weight: bold; + padding: ($base-line-height / 2) 0; + text-align: left; +} + +td { + border-bottom: 1px solid $base-border-color; + padding: ($base-line-height / 2) 0; +} + +tr, td, th { + vertical-align: middle; +} diff --git a/app/assets/stylesheets/scss/bitters/_typography.scss b/app/assets/stylesheets/scss/bitters/_typography.scss new file mode 100644 index 0000000..1707650 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_typography.scss @@ -0,0 +1,104 @@ +body { + color: $base-font-color; + font-family: $base-font-family; + font-size: $base-font-size; + -webkit-font-smoothing: antialiased; + line-height: $base-line-height; +} + +h1, h2, h3, h4, h5, h6 { + font-family: $header-font-family; + line-height: 1.25em; + margin: 0; + text-rendering: optimizeLegibility; // Fix the character spacing for headings +} + +h1 { + font-size: $base-font-size * 2.25; // 16 * 2.25 = 36px +} + +h2 { + font-size: $base-font-size * 2; // 16 * 2 = 32px +} + +h3 { + font-size: $base-font-size * 1.75; // 16 * 1.75 = 28px +} + +h4 { + font-size: $base-font-size * 1.5; // 16 * 1.5 = 24px +} + +h5 { + font-size: $base-font-size * 1.25; // 16 * 1.25 = 20px +} + +h6 { + font-size: $base-font-size; +} + +p { + margin: 0 0 ($base-line-height * .5); +} + +a { + color: $base-link-color; + text-decoration: none; + @include transition(color 0.1s linear); + + &:hover { + color: $hover-link-color; + } + + &:active, &:focus { + color: $hover-link-color; + outline: none; + } +} + +hr { + border-bottom: 1px solid $base-border-color; + border-left: none; + border-right: none; + border-top: none; + margin: $base-line-height 0; +} + +img { + margin: 0; + max-width: 100%; +} + +abbr, acronym { + border-bottom: 1px dotted $base-border-color; + cursor: help; +} + +address { + display: block; + margin: 0 0 ($base-line-height / 2); +} + +hgroup { + margin-bottom: $base-line-height / 2; +} + +del { + color: lighten($base-font-color, 15); +} + +blockquote { + border-left: 2px solid $base-border-color; + color: lighten($base-font-color, 15); + margin: $base-line-height 0; + padding-left: $base-line-height / 2; +} + +cite { + color: lighten($base-font-color, 25); + font-style: italic; + + &:before { + content: '\2014 \00A0'; + } +} diff --git a/app/assets/stylesheets/scss/bitters/_variables.scss b/app/assets/stylesheets/scss/bitters/_variables.scss new file mode 100644 index 0000000..517d6f7 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/_variables.scss @@ -0,0 +1,43 @@ +// Typography +/////////////////////////////////////////////////////////////////////////////// +$sans-serif: $helvetica; +$serif: $georgia; + +$base-font-family: $sans-serif; +$header-font-family: $base-font-family; + +// Sizes +/////////////////////////////////////////////////////////////////////////////// +$base-font-size: 1em; +$base-line-height: $base-font-size * 1.5; +$base-border-radius: em(3); + +// Colors +/////////////////////////////////////////////////////////////////////////////// + +$blue: #477DCA; +$dark-gray: #333; +$medium-gray: #999; +$light-gray: #DDD; +$light-red: #FBE3E4; +$light-yellow: #FFF6BF; +$light-green: #E6EFC2; + +// Body Color +$base-body-color: white; + +// Font Colors +$base-font-color: $dark-gray; +$base-accent-color: $blue; + +// Text Link Colors +$base-link-color: $base-accent-color; +$hover-link-color: darken($base-accent-color, 15); + +// Border color +$base-border-color: $light-gray; + +// Flash Colors +$error-color: $light-red; +$notice-color: $light-yellow; +$success-color: $light-green; diff --git a/app/assets/stylesheets/scss/bitters/extends/_base.scss b/app/assets/stylesheets/scss/bitters/extends/_base.scss new file mode 100644 index 0000000..ac3b5de --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/extends/_base.scss @@ -0,0 +1 @@ +@import "button"; diff --git a/app/assets/stylesheets/scss/bitters/extends/_button.scss b/app/assets/stylesheets/scss/bitters/extends/_button.scss new file mode 100644 index 0000000..4feb4f3 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/extends/_button.scss @@ -0,0 +1,7 @@ +%button { + @include button(simple, $base-accent-color); + -webkit-font-smoothing: antialiased; + font-size: $base-font-size; + font-weight: bold; + line-height: 1em; +} diff --git a/app/assets/stylesheets/scss/bitters/mixins/_base.scss b/app/assets/stylesheets/scss/bitters/mixins/_base.scss new file mode 100644 index 0000000..b134fef --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/mixins/_base.scss @@ -0,0 +1 @@ +@import "flash"; diff --git a/app/assets/stylesheets/scss/bitters/mixins/_flash.scss b/app/assets/stylesheets/scss/bitters/mixins/_flash.scss new file mode 100644 index 0000000..55afd61 --- /dev/null +++ b/app/assets/stylesheets/scss/bitters/mixins/_flash.scss @@ -0,0 +1,15 @@ +@mixin flash($color) { + background: $color; + color: darken($color, 60); + font-weight: bold; + margin-bottom: $base-line-height / 2; + padding: $base-line-height / 2; + + a { + color: darken($color, 70); + + &:hover { + color: darken($color, 90); + } + } +} diff --git a/app/assets/stylesheets/scss/bourbon/_bourbon-deprecated-upcoming.scss b/app/assets/stylesheets/scss/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..5332496 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/_bourbon-deprecated-upcoming.scss @@ -0,0 +1,13 @@ +//************************************************************************// +// These mixins/functions are deprecated +// They will be removed in the next MAJOR version release +//************************************************************************// +@mixin box-shadow ($shadows...) { + @include prefixer(box-shadow, $shadows, spec); + @warn "box-shadow is deprecated and will be removed in the next major version release"; +} + +@mixin background-size ($lengths...) { + @include prefixer(background-size, $lengths, spec); + @warn "background-size is deprecated and will be removed in the next major version release"; +} diff --git a/app/assets/stylesheets/scss/bourbon/_bourbon.scss b/app/assets/stylesheets/scss/bourbon/_bourbon.scss new file mode 100644 index 0000000..53fbca8 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/_bourbon.scss @@ -0,0 +1,59 @@ +// Custom Helpers +@import "helpers/deprecated-webkit-gradient"; +@import "helpers/gradient-positions-parser"; +@import "helpers/linear-positions-parser"; +@import "helpers/radial-arg-parser"; +@import "helpers/radial-positions-parser"; +@import "helpers/render-gradients"; +@import "helpers/shape-size-stripper"; + +// Custom Functions +@import "functions/compact"; +@import "functions/flex-grid"; +@import "functions/grid-width"; +@import "functions/linear-gradient"; +@import "functions/modular-scale"; +@import "functions/px-to-em"; +@import "functions/radial-gradient"; +@import "functions/tint-shade"; +@import "functions/transition-property-name"; + +// CSS3 Mixins +@import "css3/animation"; +@import "css3/appearance"; +@import "css3/backface-visibility"; +@import "css3/background"; +@import "css3/background-image"; +@import "css3/border-image"; +@import "css3/border-radius"; +@import "css3/box-sizing"; +@import "css3/columns"; +@import "css3/flex-box"; +@import "css3/font-face"; +@import "css3/hidpi-media-query"; +@import "css3/image-rendering"; +@import "css3/inline-block"; +@import "css3/keyframes"; +@import "css3/linear-gradient"; +@import "css3/perspective"; +@import "css3/radial-gradient"; +@import "css3/transform"; +@import "css3/transition"; +@import "css3/user-select"; +@import "css3/placeholder"; + +// Addons & other mixins +@import "addons/button"; +@import "addons/clearfix"; +@import "addons/font-family"; +@import "addons/hide-text"; +@import "addons/html5-input-types"; +@import "addons/position"; +@import "addons/prefixer"; +@import "addons/retina-image"; +@import "addons/size"; +@import "addons/timing-functions"; +@import "addons/triangle"; + +// Soon to be deprecated Mixins +@import "bourbon-deprecated-upcoming"; diff --git a/app/assets/stylesheets/scss/bourbon/addons/_button.scss b/app/assets/stylesheets/scss/bourbon/addons/_button.scss new file mode 100644 index 0000000..3ae393c --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_button.scss @@ -0,0 +1,273 @@ +@mixin button ($style: simple, $base-color: #4294f0) { + + @if type-of($style) == color { + $base-color: $style; + $style: simple; + } + + // Grayscale button + @if $base-color == grayscale($base-color) { + @if $style == simple { + @include simple($base-color, $grayscale: true); + } + + @else if $style == shiny { + @include shiny($base-color, $grayscale: true); + } + + @else if $style == pill { + @include pill($base-color, $grayscale: true); + } + } + + // Colored button + @else { + @if $style == simple { + @include simple($base-color); + } + + @else if $style == shiny { + @include shiny($base-color); + } + + @else if $style == pill { + @include pill($base-color); + } + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } +} + + +// Simple Button +//************************************************************************// +@mixin simple($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%); + $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%); + $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border; + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: 11px; + font-weight: bold; + @include linear-gradient ($base-color, $stop-gradient); + padding: 7px 18px; + text-decoration: none; + text-shadow: 0 1px 0 $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%); + $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + } + + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + } + + &:active:not(:disabled) { + $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); + $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); + + @if $grayscale == true { + $border-active: grayscale($border-active); + $inset-shadow-active: grayscale($inset-shadow-active); + } + + border: 1px solid $border-active; + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; + } +} + + +// Shiny Button +//************************************************************************// +@mixin shiny($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81); + $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122); + $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46); + $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12); + $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33); + $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114); + $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border: grayscale($border); + $border-bottom: grayscale($border-bottom); + $fourth-stop: grayscale($fourth-stop); + $inset-shadow: grayscale($inset-shadow); + $second-stop: grayscale($second-stop); + $text-shadow: grayscale($text-shadow); + $third-stop: grayscale($third-stop); + } + + border: 1px solid $border; + border-bottom: 1px solid $border-bottom; + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; + color: $color; + display: inline-block; + font-size: 14px; + font-weight: bold; + @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%); + padding: 8px 20px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + + &:hover:not(:disabled) { + $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18); + $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51); + $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66); + $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63); + + @if $grayscale == true { + $first-stop-hover: grayscale($first-stop-hover); + $second-stop-hover: grayscale($second-stop-hover); + $third-stop-hover: grayscale($third-stop-hover); + $fourth-stop-hover: grayscale($fourth-stop-hover); + } + + cursor: pointer; + @include linear-gradient(top, $first-stop-hover 0%, + $second-stop-hover 50%, + $third-stop-hover 50%, + $fourth-stop-hover 100%); + } + + &:active:not(:disabled) { + $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122); + + @if $grayscale == true { + $inset-shadow-active: grayscale($inset-shadow-active); + } + + box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; + } +} + + +// Pill Button +//************************************************************************// +@mixin pill($base-color, $grayscale: false) { + $color: hsl(0, 0, 100%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%); + $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%); + $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%); + $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%); + + @if lightness($base-color) > 70% { + $color: hsl(0, 0, 20%); + $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%); + } + + @if $grayscale == true { + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow: grayscale($inset-shadow); + $stop-gradient: grayscale($stop-gradient); + $text-shadow: grayscale($text-shadow); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; + color: $color; + display: inline-block; + font-size: 11px; + font-weight: normal; + line-height: 1; + @include linear-gradient ($base-color, $stop-gradient); + padding: 5px 16px; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 1px $text-shadow; + background-clip: padding-box; + + &:hover:not(:disabled) { + $base-color-hover: adjust-color($base-color, $lightness: -4.5%); + $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%); + $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%); + $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%); + $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%); + $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%); + $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%); + + @if $grayscale == true { + $base-color-hover: grayscale($base-color-hover); + $border-bottom: grayscale($border-bottom); + $border-sides: grayscale($border-sides); + $border-top: grayscale($border-top); + $inset-shadow-hover: grayscale($inset-shadow-hover); + $stop-gradient-hover: grayscale($stop-gradient-hover); + $text-shadow-hover: grayscale($text-shadow-hover); + } + + border: 1px solid $border-top; + border-color: $border-top $border-sides $border-bottom; + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; + cursor: pointer; + @include linear-gradient ($base-color-hover, $stop-gradient-hover); + text-shadow: 0 -1px 1px $text-shadow-hover; + background-clip: padding-box; + } + + &:active:not(:disabled) { + $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%); + $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%); + $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%); + $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%); + $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%); + + @if $grayscale == true { + $active-color: grayscale($active-color); + $border-active: grayscale($border-active); + $border-bottom-active: grayscale($border-bottom-active); + $inset-shadow-active: grayscale($inset-shadow-active); + $text-shadow-active: grayscale($text-shadow-active); + } + + background: $active-color; + border: 1px solid $border-active; + border-bottom: 1px solid $border-bottom-active; + box-shadow: inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff; + text-shadow: 0 -1px 1px $text-shadow-active; + } +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_clearfix.scss b/app/assets/stylesheets/scss/bourbon/addons/_clearfix.scss new file mode 100644 index 0000000..ca9903c --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_clearfix.scss @@ -0,0 +1,29 @@ +// Micro clearfix provides an easy way to contain floats without adding additional markup +// +// Example usage: +// +// // Contain all floats within .wrapper +// .wrapper { +// @include clearfix; +// .content, +// .sidebar { +// float : left; +// } +// } + +@mixin clearfix { + *zoom: 1; + + &:before, + &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + +// Acknowledgements +// Micro clearfix: [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/) diff --git a/app/assets/stylesheets/scss/bourbon/addons/_font-family.scss b/app/assets/stylesheets/scss/bourbon/addons/_font-family.scss new file mode 100644 index 0000000..df8a80d --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_font-family.scss @@ -0,0 +1,5 @@ +$georgia: Georgia, Cambria, "Times New Roman", Times, serif; +$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif; +$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif; +$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace; +$verdana: Verdana, Geneva, sans-serif; diff --git a/app/assets/stylesheets/scss/bourbon/addons/_hide-text.scss b/app/assets/stylesheets/scss/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..68d4bf8 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_hide-text.scss @@ -0,0 +1,5 @@ +@mixin hide-text { + color: transparent; + font: 0/0 a; + text-shadow: none; +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_html5-input-types.scss b/app/assets/stylesheets/scss/bourbon/addons/_html5-input-types.scss new file mode 100644 index 0000000..b184382 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_html5-input-types.scss @@ -0,0 +1,56 @@ +//************************************************************************// +// Generate a variable ($all-text-inputs) with a list of all html5 +// input types that have a text-based input, excluding textarea. +// http://diveintohtml5.org/forms.html +//************************************************************************// +$inputs-list: 'input[type="email"]', + 'input[type="number"]', + 'input[type="password"]', + 'input[type="search"]', + 'input[type="tel"]', + 'input[type="text"]', + 'input[type="url"]', + + // Webkit & Gecko may change the display of these in the future + 'input[type="color"]', + 'input[type="date"]', + 'input[type="datetime"]', + 'input[type="datetime-local"]', + 'input[type="month"]', + 'input[type="time"]', + 'input[type="week"]'; + +$unquoted-inputs-list: (); +@each $input-type in $inputs-list { + $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma); +} + +$all-text-inputs: $unquoted-inputs-list; + + +// Hover Pseudo-class +//************************************************************************// +$all-text-inputs-hover: (); +@each $input-type in $unquoted-inputs-list { + $input-type-hover: $input-type + ":hover"; + $all-text-inputs-hover: append($all-text-inputs-hover, $input-type-hover, comma); +} + +// Focus Pseudo-class +//************************************************************************// +$all-text-inputs-focus: (); +@each $input-type in $unquoted-inputs-list { + $input-type-focus: $input-type + ":focus"; + $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma); +} + +// You must use interpolation on the variable: +// #{$all-text-inputs} +// #{$all-text-inputs-hover} +// #{$all-text-inputs-focus} + +// Example +//************************************************************************// +// #{$all-text-inputs}, textarea { +// border: 1px solid red; +// } diff --git a/app/assets/stylesheets/scss/bourbon/addons/_position.scss b/app/assets/stylesheets/scss/bourbon/addons/_position.scss new file mode 100644 index 0000000..faad1ca --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_position.scss @@ -0,0 +1,42 @@ +@mixin position ($position: relative, $coordinates: 0 0 0 0) { + + @if type-of($position) == list { + $coordinates: $position; + $position: relative; + } + + $top: nth($coordinates, 1); + $right: nth($coordinates, 2); + $bottom: nth($coordinates, 3); + $left: nth($coordinates, 4); + + position: $position; + + @if $top == auto { + top: $top; + } + @else if not(unitless($top)) { + top: $top; + } + + @if $right == auto { + right: $right; + } + @else if not(unitless($right)) { + right: $right; + } + + @if $bottom == auto { + bottom: $bottom; + } + @else if not(unitless($bottom)) { + bottom: $bottom; + } + + @if $left == auto { + left: $left; + } + @else if not(unitless($left)) { + left: $left; + } +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_prefixer.scss b/app/assets/stylesheets/scss/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..6bfd23a --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_prefixer.scss @@ -0,0 +1,49 @@ +//************************************************************************// +// Example: @include prefixer(border-radius, $radii, webkit ms spec); +//************************************************************************// +$prefix-for-webkit: true !default; +$prefix-for-mozilla: true !default; +$prefix-for-microsoft: true !default; +$prefix-for-opera: true !default; +$prefix-for-spec: true !default; // required for keyframe mixin + +@mixin prefixer ($property, $value, $prefixes) { + @each $prefix in $prefixes { + @if $prefix == webkit { + @if $prefix-for-webkit { + -webkit-#{$property}: $value; + } + } + @else if $prefix == moz { + @if $prefix-for-mozilla { + -moz-#{$property}: $value; + } + } + @else if $prefix == ms { + @if $prefix-for-microsoft { + -ms-#{$property}: $value; + } + } + @else if $prefix == o { + @if $prefix-for-opera { + -o-#{$property}: $value; + } + } + @else if $prefix == spec { + @if $prefix-for-spec { + #{$property}: $value; + } + } + @else { + @warn "Unrecognized prefix: #{$prefix}"; + } + } +} + +@mixin disable-prefix-for-all() { + $prefix-for-webkit: false; + $prefix-for-mozilla: false; + $prefix-for-microsoft: false; + $prefix-for-opera: false; + $prefix-for-spec: false; +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_retina-image.scss b/app/assets/stylesheets/scss/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..a84b6fa --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_retina-image.scss @@ -0,0 +1,32 @@ +@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $asset-pipeline: false) { + @if $asset-pipeline { + background-image: image-url("#{$filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}.#{$extension}"); + } + + @include hidpi { + + @if $asset-pipeline { + @if $retina-filename { + background-image: image-url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: image-url("#{$filename}@2x.#{$extension}"); + } + } + + @else { + @if $retina-filename { + background-image: url("#{$retina-filename}.#{$extension}"); + } + @else { + background-image: url("#{$filename}@2x.#{$extension}"); + } + } + + background-size: $background-size; + + } +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_size.scss b/app/assets/stylesheets/scss/bourbon/addons/_size.scss new file mode 100644 index 0000000..342e41b --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_size.scss @@ -0,0 +1,44 @@ +@mixin size($size) { + @if length($size) == 1 { + @if $size == auto { + width: $size; + height: $size; + } + + @else if unitless($size) { + width: $size + px; + height: $size + px; + } + + @else if not(unitless($size)) { + width: $size; + height: $size; + } + } + + // Width x Height + @if length($size) == 2 { + $width: nth($size, 1); + $height: nth($size, 2); + + @if $width == auto { + width: $width; + } + @else if not(unitless($width)) { + width: $width; + } + @else if unitless($width) { + width: $width + px; + } + + @if $height == auto { + height: $height; + } + @else if not(unitless($height)) { + height: $height; + } + @else if unitless($height) { + height: $height + px; + } + } +} diff --git a/app/assets/stylesheets/scss/bourbon/addons/_timing-functions.scss b/app/assets/stylesheets/scss/bourbon/addons/_timing-functions.scss new file mode 100644 index 0000000..51b2410 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_timing-functions.scss @@ -0,0 +1,32 @@ +// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) +// Timing functions are the same as demo'ed here: http://jqueryui.com/demos/effect/easing.html + +// EASE IN +$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); +$ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); +$ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); +$ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); +$ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); +$ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); +$ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); +$ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); + +// EASE OUT +$ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); +$ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); +$ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); +$ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); +$ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); +$ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); +$ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); +$ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); + +// EASE IN OUT +$ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); +$ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); +$ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); +$ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); +$ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); +$ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); +$ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); +$ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); diff --git a/app/assets/stylesheets/scss/bourbon/addons/_triangle.scss b/app/assets/stylesheets/scss/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..0e02aca --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/addons/_triangle.scss @@ -0,0 +1,45 @@ +@mixin triangle ($size, $color, $direction) { + height: 0; + width: 0; + + @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { + border-color: transparent; + border-style: solid; + border-width: $size / 2; + + @if $direction == up { + border-bottom-color: $color; + + } @else if $direction == right { + border-left-color: $color; + + } @else if $direction == down { + border-top-color: $color; + + } @else if $direction == left { + border-right-color: $color; + } + } + + @else if ($direction == up-right) or ($direction == up-left) { + border-top: $size solid $color; + + @if $direction == up-right { + border-left: $size solid transparent; + + } @else if $direction == up-left { + border-right: $size solid transparent; + } + } + + @else if ($direction == down-right) or ($direction == down-left) { + border-bottom: $size solid $color; + + @if $direction == down-right { + border-left: $size solid transparent; + + } @else if $direction == down-left { + border-right: $size solid transparent; + } + } +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_animation.scss b/app/assets/stylesheets/scss/bourbon/css3/_animation.scss new file mode 100644 index 0000000..08c3dbf --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_animation.scss @@ -0,0 +1,52 @@ +// http://www.w3.org/TR/css3-animations/#the-animation-name-property- +// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. + +// Official animation shorthand property. +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); +} + +// Individual Animation Properties +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); +} + + +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); +} + + +@mixin animation-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out + @include prefixer(animation-timing-function, $motions, webkit moz spec); +} + + +@mixin animation-iteration-count ($values...) { +// infinite | + @include prefixer(animation-iteration-count, $values, webkit moz spec); +} + + +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); +} + + +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); +} + + +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); +} + + +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_appearance.scss b/app/assets/stylesheets/scss/bourbon/css3/_appearance.scss new file mode 100644 index 0000000..3eb16e4 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_appearance.scss @@ -0,0 +1,3 @@ +@mixin appearance ($value) { + @include prefixer(appearance, $value, webkit moz ms o spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_backface-visibility.scss b/app/assets/stylesheets/scss/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000..1161fe6 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_backface-visibility.scss @@ -0,0 +1,6 @@ +//************************************************************************// +// Backface-visibility mixin +//************************************************************************// +@mixin backface-visibility($visibility) { + @include prefixer(backface-visibility, $visibility, webkit spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_background-image.scss b/app/assets/stylesheets/scss/bourbon/css3/_background-image.scss new file mode 100644 index 0000000..17016b9 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_background-image.scss @@ -0,0 +1,48 @@ +//************************************************************************// +// Background-image property for adding multiple background images with +// gradients, or for stringing multiple gradients together. +//************************************************************************// + +@mixin background-image($images...) { + background-image: _add-prefix($images, webkit); + background-image: _add-prefix($images); +} + +@function _add-prefix($images, $vendor: false) { + $images-prefixed: (); + $gradient-positions: false; + @for $i from 1 through length($images) { + $type: type-of(nth($images, $i)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient-type: nth(nth($images, $i), 1); // linear or radial + $gradient-pos: null; + $gradient-args: null; + + @if ($gradient-type == linear) or ($gradient-type == radial) { + $gradient-pos: nth(nth($images, $i), 2); // Get gradient position + $gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue) + } + @else { + $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) + } + + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + $images-prefixed: append($images-prefixed, $gradient, comma); + } + // If variable is a string - Image + @else if $type == string { + $images-prefixed: join($images-prefixed, nth($images, $i), comma); + } + } + @return $images-prefixed; +} + +//Examples: + //@include background-image(linear-gradient(top, orange, red)); + //@include background-image(radial-gradient(50% 50%, cover circle, orange, red)); + //@include background-image(url("/images/a.png"), linear-gradient(orange, red)); + //@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png")); + //@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red)); diff --git a/app/assets/stylesheets/scss/bourbon/css3/_background.scss b/app/assets/stylesheets/scss/bourbon/css3/_background.scss new file mode 100644 index 0000000..766d5d3 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_background.scss @@ -0,0 +1,103 @@ +//************************************************************************// +// Background property for adding multiple backgrounds using shorthand +// notation. +//************************************************************************// + +@mixin background( + $background-1 , $background-2: false, + $background-3: false, $background-4: false, + $background-5: false, $background-6: false, + $background-7: false, $background-8: false, + $background-9: false, $background-10: false, + $fallback: false +) { + $backgrounds: compact($background-1, $background-2, + $background-3, $background-4, + $background-5, $background-6, + $background-7, $background-8, + $background-9, $background-10); + + $fallback-color: false; + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + @else { + $fallback-color: _extract-background-color($backgrounds); + } + + @if $fallback-color { + background-color: $fallback-color; + } + background: _background-add-prefix($backgrounds, webkit); + background: _background-add-prefix($backgrounds); +} + +@function _extract-background-color($backgrounds) { + $final-bg-layer: nth($backgrounds, length($backgrounds)); + @if type-of($final-bg-layer) == list { + @for $i from 1 through length($final-bg-layer) { + $value: nth($final-bg-layer, $i); + @if type-of($value) == color { + @return $value; + } + } + } + @return false; +} + +@function _background-add-prefix($backgrounds, $vendor: false) { + $backgrounds-prefixed: (); + + @for $i from 1 through length($backgrounds) { + $shorthand: nth($backgrounds, $i); // Get member for current index + $type: type-of($shorthand); // Get type of variable - List (gradient) or String (image) + + // If shorthand is a list (gradient) + @if $type == list { + $first-member: nth($shorthand, 1); // Get first member of shorthand + + // Linear Gradient + @if index(linear radial, nth($first-member, 1)) { + $gradient-type: nth($first-member, 1); // linear || radial + $gradient-args: false; + $gradient-positions: false; + $shorthand-start: false; + @if type-of($first-member) == list { // Linear gradient plus additional shorthand values - lg(red,orange)repeat,... + $gradient-positions: nth($first-member, 2); + $gradient-args: nth($first-member, 3); + $shorthand-start: 2; + } + @else { // Linear gradient only - lg(red,orange),... + $gradient-positions: nth($shorthand, 2); + $gradient-args: nth($shorthand, 3); // Get gradient (red, blue) + } + + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-positions); + $gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + + // Append any additional shorthand args to gradient + @if $shorthand-start { + @for $j from $shorthand-start through length($shorthand) { + $gradient: join($gradient, nth($shorthand, $j), space); + } + } + $backgrounds-prefixed: append($backgrounds-prefixed, $gradient, comma); + } + // Image with additional properties + @else { + $backgrounds-prefixed: append($backgrounds-prefixed, $shorthand, comma); + } + } + // If shorthand is a simple string (color or image) + @else if $type == string { + $backgrounds-prefixed: join($backgrounds-prefixed, $shorthand, comma); + } + } + @return $backgrounds-prefixed; +} + +//Examples: + //@include background(linear-gradient(top, orange, red)); + //@include background(radial-gradient(circle at 40% 40%, orange, red)); + //@include background(url("/images/a.png") no-repeat, linear-gradient(orange, red)); + //@include background(url("image.png") center center, linear-gradient(orange, red), url("image.png")); diff --git a/app/assets/stylesheets/scss/bourbon/css3/_border-image.scss b/app/assets/stylesheets/scss/bourbon/css3/_border-image.scss new file mode 100644 index 0000000..1fff212 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_border-image.scss @@ -0,0 +1,55 @@ +@mixin border-image($images) { + -webkit-border-image: _border-add-prefix($images, webkit); + -moz-border-image: _border-add-prefix($images, moz); + -o-border-image: _border-add-prefix($images, o); + border-image: _border-add-prefix($images); +} + +@function _border-add-prefix($images, $vendor: false) { + $border-image: null; + $images-type: type-of(nth($images, 1)); + $first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial) + + // If input is a gradient + @if $images-type == string { + @if ($first-var == "linear") or ($first-var == "radial") { + $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($images, 2); // Get gradient position + $gradient-args: nth($images, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + } + // If input is a URL + @else { + $border-image: $images; + } + } + // If input is gradient or url + additional args + @else if $images-type == list { + $type: type-of(nth($images, 1)); // Get type of variable - List or String + + // If variable is a list - Gradient + @if $type == list { + $gradient: nth($images, 1); + $gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial) + $gradient-pos: nth($gradient, 2); // Get gradient position + $gradient-args: nth($gradient, 3); // Get actual gradient (red, blue) + $gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos); + $border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor); + + @for $i from 2 through length($images) { + $border-image: append($border-image, nth($images, $i)); + } + } + } + @return $border-image; +} + +//Examples: +// @include border-image(url("image.png")); +// @include border-image(url("image.png") 20 stretch); +// @include border-image(linear-gradient(45deg, orange, yellow)); +// @include border-image(linear-gradient(45deg, orange, yellow) stretch); +// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); +// @include border-image(radial-gradient(top, cover, orange, yellow, orange)); + diff --git a/app/assets/stylesheets/scss/bourbon/css3/_border-radius.scss b/app/assets/stylesheets/scss/bourbon/css3/_border-radius.scss new file mode 100644 index 0000000..7c17190 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_border-radius.scss @@ -0,0 +1,22 @@ +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// +@mixin border-top-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); +} + +@mixin border-bottom-radius($radii) { + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} + +@mixin border-left-radius($radii) { + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-bottom-left-radius, $radii, spec); +} + +@mixin border-right-radius($radii) { + @include prefixer(border-top-right-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_box-sizing.scss b/app/assets/stylesheets/scss/bourbon/css3/_box-sizing.scss new file mode 100644 index 0000000..f07e1d4 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_box-sizing.scss @@ -0,0 +1,4 @@ +@mixin box-sizing ($box) { +// content-box | border-box | inherit + @include prefixer(box-sizing, $box, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_columns.scss b/app/assets/stylesheets/scss/bourbon/css3/_columns.scss new file mode 100644 index 0000000..42274a4 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_columns.scss @@ -0,0 +1,47 @@ +@mixin columns($arg: auto) { +// || + @include prefixer(columns, $arg, webkit moz spec); +} + +@mixin column-count($int: auto) { +// auto || integer + @include prefixer(column-count, $int, webkit moz spec); +} + +@mixin column-gap($length: normal) { +// normal || length + @include prefixer(column-gap, $length, webkit moz spec); +} + +@mixin column-fill($arg: auto) { +// auto || length + @include prefixer(columns-fill, $arg, webkit moz spec); +} + +@mixin column-rule($arg) { +// || || + @include prefixer(column-rule, $arg, webkit moz spec); +} + +@mixin column-rule-color($color) { + @include prefixer(column-rule-color, $color, webkit moz spec); +} + +@mixin column-rule-style($style: none) { +// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid + @include prefixer(column-rule-style, $style, webkit moz spec); +} + +@mixin column-rule-width ($width: none) { + @include prefixer(column-rule-width, $width, webkit moz spec); +} + +@mixin column-span($arg: none) { +// none || all + @include prefixer(column-span, $arg, webkit moz spec); +} + +@mixin column-width($length: auto) { +// auto || length + @include prefixer(column-width, $length, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_flex-box.scss b/app/assets/stylesheets/scss/bourbon/css3/_flex-box.scss new file mode 100644 index 0000000..3e741e6 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_flex-box.scss @@ -0,0 +1,52 @@ +// CSS3 Flexible Box Model and property defaults + +// Custom shorthand notation for flexbox +@mixin box($orient: inline-axis, $pack: start, $align: stretch) { + @include display-box; + @include box-orient($orient); + @include box-pack($pack); + @include box-align($align); +} + +@mixin display-box { + display: -webkit-box; + display: -moz-box; + display: box; +} + +@mixin box-orient($orient: inline-axis) { +// horizontal|vertical|inline-axis|block-axis|inherit + @include prefixer(box-orient, $orient, webkit moz spec); +} + +@mixin box-pack($pack: start) { +// start|end|center|justify + @include prefixer(box-pack, $pack, webkit moz spec); +} + +@mixin box-align($align: stretch) { +// start|end|center|baseline|stretch + @include prefixer(box-align, $align, webkit moz spec); +} + +@mixin box-direction($direction: normal) { +// normal|reverse|inherit + @include prefixer(box-direction, $direction, webkit moz spec); +} + +@mixin box-lines($lines: single) { +// single|multiple + @include prefixer(box-lines, $lines, webkit moz spec); +} + +@mixin box-ordinal-group($int: 1) { + @include prefixer(box-ordinal-group, $int, webkit moz spec); +} + +@mixin box-flex($value: 0.0) { + @include prefixer(box-flex, $value, webkit moz spec); +} + +@mixin box-flex-group($int: 1) { + @include prefixer(box-flex-group, $int, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_font-face.scss b/app/assets/stylesheets/scss/bourbon/css3/_font-face.scss new file mode 100644 index 0000000..029ee8f --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_font-face.scss @@ -0,0 +1,23 @@ +// Order of the includes matters, and it is: normal, bold, italic, bold+italic. + +@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: false ) { + @font-face { + font-family: $font-family; + font-weight: $weight; + font-style: $style; + + @if $asset-pipeline == true { + src: font-url('#{$file-path}.eot'); + src: font-url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + font-url('#{$file-path}.woff') format('woff'), + font-url('#{$file-path}.ttf') format('truetype'), + font-url('#{$file-path}.svg##{$font-family}') format('svg'); + } @else { + src: url('#{$file-path}.eot'); + src: url('#{$file-path}.eot?#iefix') format('embedded-opentype'), + url('#{$file-path}.woff') format('woff'), + url('#{$file-path}.ttf') format('truetype'), + url('#{$file-path}.svg##{$font-family}') format('svg'); + } + } +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_hidpi-media-query.scss b/app/assets/stylesheets/scss/bourbon/css3/_hidpi-media-query.scss new file mode 100644 index 0000000..111e400 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_hidpi-media-query.scss @@ -0,0 +1,10 @@ +// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) +@mixin hidpi($ratio: 1.3) { + @media only screen and (-webkit-min-device-pixel-ratio: $ratio), + only screen and (min--moz-device-pixel-ratio: $ratio), + only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), + only screen and (min-resolution: #{round($ratio*96)}dpi), + only screen and (min-resolution: #{$ratio}dppx) { + @content; + } +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_image-rendering.scss b/app/assets/stylesheets/scss/bourbon/css3/_image-rendering.scss new file mode 100644 index 0000000..abc7ee1 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_image-rendering.scss @@ -0,0 +1,13 @@ +@mixin image-rendering ($mode:optimizeQuality) { + + @if ($mode == optimize-contrast) { + image-rendering: -moz-crisp-edges; + image-rendering: -o-crisp-edges; + image-rendering: -webkit-optimize-contrast; + image-rendering: optimize-contrast; + } + + @else { + image-rendering: $mode; + } +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_inline-block.scss b/app/assets/stylesheets/scss/bourbon/css3/_inline-block.scss new file mode 100644 index 0000000..3272a00 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_inline-block.scss @@ -0,0 +1,8 @@ +// Legacy support for inline-block in IE7 (maybe IE6) +@mixin inline-block { + display: inline-block; + vertical-align: baseline; + zoom: 1; + *display: inline; + *vertical-align: auto; +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_keyframes.scss b/app/assets/stylesheets/scss/bourbon/css3/_keyframes.scss new file mode 100644 index 0000000..dca61f2 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_keyframes.scss @@ -0,0 +1,43 @@ +// Adds keyframes blocks for supported prefixes, removing redundant prefixes in the block's content +@mixin keyframes($name) { + $original-prefix-for-webkit: $prefix-for-webkit; + $original-prefix-for-mozilla: $prefix-for-mozilla; + $original-prefix-for-microsoft: $prefix-for-microsoft; + $original-prefix-for-opera: $prefix-for-opera; + $original-prefix-for-spec: $prefix-for-spec; + + @if $original-prefix-for-webkit { + @include disable-prefix-for-all(); + $prefix-for-webkit: true; + @-webkit-keyframes #{$name} { + @content; + } + } + @if $original-prefix-for-mozilla { + @include disable-prefix-for-all(); + $prefix-for-mozilla: true; + @-moz-keyframes #{$name} { + @content; + } + } + @if $original-prefix-for-opera { + @include disable-prefix-for-all(); + $prefix-for-opera: true; + @-o-keyframes #{$name} { + @content; + } + } + @if $original-prefix-for-spec { + @include disable-prefix-for-all(); + $prefix-for-spec: true; + @keyframes #{$name} { + @content; + } + } + + $prefix-for-webkit: $original-prefix-for-webkit; + $prefix-for-mozilla: $original-prefix-for-mozilla; + $prefix-for-microsoft: $original-prefix-for-microsoft; + $prefix-for-opera: $original-prefix-for-opera; + $prefix-for-spec: $original-prefix-for-spec; +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_linear-gradient.scss b/app/assets/stylesheets/scss/bourbon/css3/_linear-gradient.scss new file mode 100644 index 0000000..d5b687b --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_linear-gradient.scss @@ -0,0 +1,41 @@ +@mixin linear-gradient($pos, $G1, $G2: false, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $deprecated-pos1: left top, + $deprecated-pos2: left bottom, + $fallback: false) { + // Detect what type of value exists in $pos + $pos-type: type-of(nth($pos, 1)); + $pos-spec: null; + $pos-degree: null; + + // If $pos is missing from mixin, reassign vars and add default position + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5; + $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos; + $pos: null; + } + + @if $pos { + $positions: _linear-positions-parser($pos); + $pos-degree: nth($positions, 1); + $pos-spec: nth($positions, 2); + } + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Set $G1 as the default fallback color + $fallback-color: nth($G1, 1); + + // If $fallback is a color use that color as the fallback color + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + background-color: $fallback-color; + background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0 + background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome + background-image: unquote("linear-gradient(#{$pos-spec}#{$full})"); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_perspective.scss b/app/assets/stylesheets/scss/bourbon/css3/_perspective.scss new file mode 100644 index 0000000..0e4deb8 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_perspective.scss @@ -0,0 +1,8 @@ +@mixin perspective($depth: none) { + // none | + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_placeholder.scss b/app/assets/stylesheets/scss/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000..22fd92b --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_placeholder.scss @@ -0,0 +1,29 @@ +$placeholders: '-webkit-input-placeholder', + '-moz-placeholder', + '-ms-input-placeholder'; + +@mixin placeholder { + @each $placeholder in $placeholders { + @if $placeholder == "-webkit-input-placeholder" { + &::#{$placeholder} { + @content; + } + } + @else if $placeholder == "-moz-placeholder" { + // FF 18- + &:#{$placeholder} { + @content; + } + + // FF 19+ + &::#{$placeholder} { + @content; + } + } + @else { + &:#{$placeholder} { + @content; + } + } + } +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_radial-gradient.scss b/app/assets/stylesheets/scss/bourbon/css3/_radial-gradient.scss new file mode 100644 index 0000000..e87b45a --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_radial-gradient.scss @@ -0,0 +1,44 @@ +// Requires Sass 3.1+ +@mixin radial-gradient($G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $pos: null, + $shape-size: null, + $deprecated-pos1: center center, + $deprecated-pos2: center center, + $deprecated-radius1: 0, + $deprecated-radius2: 460, + $fallback: false) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + // Strip deprecated cover/contain for spec + $shape-size-spec: _shape-size-stripper($shape-size); + + // Set $G1 as the default fallback color + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); + + @if (type-of($fallback) == color) or ($fallback == "transparent") { + $fallback-color: $fallback; + } + + // Add Commas and spaces + $shape-size: if($shape-size, '#{$shape-size}, ', null); + $pos: if($pos, '#{$pos}, ', null); + $pos-spec: if($pos, 'at #{$pos}', null); + $shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} '); + + background-color: $fallback-color; + background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4 + background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full})); + background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})"); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_transform.scss b/app/assets/stylesheets/scss/bourbon/css3/_transform.scss new file mode 100644 index 0000000..8cc3596 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_transform.scss @@ -0,0 +1,15 @@ +@mixin transform($property: none) { +// none | + @include prefixer(transform, $property, webkit moz ms o spec); +} + +@mixin transform-origin($axes: 50%) { +// x-axis - left | center | right | length | % +// y-axis - top | center | bottom | length | % +// z-axis - length + @include prefixer(transform-origin, $axes, webkit moz ms o spec); +} + +@mixin transform-style ($style: flat) { + @include prefixer(transform-style, $style, webkit moz ms o spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_transition.scss b/app/assets/stylesheets/scss/bourbon/css3/_transition.scss new file mode 100644 index 0000000..180cde6 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_transition.scss @@ -0,0 +1,34 @@ +// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. +// Example: @include transition (all, 2.0s, ease-in-out); +// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); +// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); + +@mixin transition ($properties...) { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); + } + + @else { + $properties: all 0.15s ease-out 0; + @include prefixer(transition, $properties, webkit moz spec); + } +} + +@mixin transition-property ($properties...) { + -webkit-transition-property: transition-property-names($properties, 'webkit'); + -moz-transition-property: transition-property-names($properties, 'moz'); + transition-property: transition-property-names($properties, false); +} + +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); +} + +@mixin transition-timing-function ($motions...) { +// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() + @include prefixer(transition-timing-function, $motions, webkit moz spec); +} + +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/css3/_user-select.scss b/app/assets/stylesheets/scss/bourbon/css3/_user-select.scss new file mode 100644 index 0000000..1380aa8 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/css3/_user-select.scss @@ -0,0 +1,3 @@ +@mixin user-select($arg: none) { + @include prefixer(user-select, $arg, webkit moz ms spec); +} diff --git a/app/assets/stylesheets/scss/bourbon/functions/_compact.scss b/app/assets/stylesheets/scss/bourbon/functions/_compact.scss new file mode 100644 index 0000000..871500e --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_compact.scss @@ -0,0 +1,11 @@ +// Remove `false` values from a list + +@function compact($vars...) { + $list: (); + @each $var in $vars { + @if $var { + $list: append($list, $var, comma); + } + } + @return $list; +} diff --git a/app/assets/stylesheets/scss/bourbon/functions/_flex-grid.scss b/app/assets/stylesheets/scss/bourbon/functions/_flex-grid.scss new file mode 100644 index 0000000..3bbd866 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_flex-grid.scss @@ -0,0 +1,39 @@ +// Flexible grid +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +// Flexible gutter +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +// The $fg-column, $fg-gutter and $fg-max-columns variables must be defined in your base stylesheet to properly use the flex-grid function. +// This function takes the fluid grid equation (target / context = result) and uses columns to help define each. +// +// The calculation presumes that your column structure will be missing the last gutter: +// +// -- column -- gutter -- column -- gutter -- column +// +// $fg-column: 60px; // Column Width +// $fg-gutter: 25px; // Gutter Width +// $fg-max-columns: 12; // Total Columns For Main Container +// +// div { +// width: flex-grid(4); // returns (315px / 995px) = 31.65829%; +// margin-left: flex-gutter(); // returns (25px / 995px) = 2.51256%; +// +// p { +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// float: left; +// margin: flex-gutter(4); // returns (25px / 315px) = 7.936508%; +// } +// +// blockquote { +// float: left; +// width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; +// } +// } \ No newline at end of file diff --git a/app/assets/stylesheets/scss/bourbon/functions/_grid-width.scss b/app/assets/stylesheets/scss/bourbon/functions/_grid-width.scss new file mode 100644 index 0000000..8e63d83 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_grid-width.scss @@ -0,0 +1,13 @@ +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +// The $gw-column and $gw-gutter variables must be defined in your base stylesheet to properly use the grid-width function. +// +// $gw-column: 100px; // Column Width +// $gw-gutter: 40px; // Gutter Width +// +// div { +// width: grid-width(4); // returns 520px; +// margin-left: $gw-gutter; // returns 40px; +// } diff --git a/app/assets/stylesheets/scss/bourbon/functions/_linear-gradient.scss b/app/assets/stylesheets/scss/bourbon/functions/_linear-gradient.scss new file mode 100644 index 0000000..c8454d8 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_linear-gradient.scss @@ -0,0 +1,13 @@ +@function linear-gradient($pos, $gradients...) { + $type: linear; + $pos-type: type-of(nth($pos, 1)); + + // if $pos doesn't exist, fix $gradient + @if ($pos-type == color) or (nth($pos, 1) == "transparent") { + $gradients: zip($pos $gradients); + $pos: false; + } + + $type-gradient: $type, $pos, $gradients; + @return $type-gradient; +} diff --git a/app/assets/stylesheets/scss/bourbon/functions/_modular-scale.scss b/app/assets/stylesheets/scss/bourbon/functions/_modular-scale.scss new file mode 100644 index 0000000..dddccb5 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_modular-scale.scss @@ -0,0 +1,40 @@ +@function modular-scale($value, $increment, $ratio) { + @if $increment > 0 { + @for $i from 1 through $increment { + $value: ($value * $ratio); + } + } + + @if $increment < 0 { + $increment: abs($increment); + @for $i from 1 through $increment { + $value: ($value / $ratio); + } + } + + @return $value; +} + +// div { +// Increment Up GR with positive value +// font-size: modular-scale(14px, 1, 1.618); // returns: 22.652px +// +// Increment Down GR with negative value +// font-size: modular-scale(14px, -1, 1.618); // returns: 8.653px +// +// Can be used with ceil(round up) or floor(round down) +// font-size: floor( modular-scale(14px, 1, 1.618) ); // returns: 22px +// font-size: ceil( modular-scale(14px, 1, 1.618) ); // returns: 23px +// } +// +// modularscale.com + +@function golden-ratio($value, $increment) { + @return modular-scale($value, $increment, 1.618) +} + +// div { +// font-size: golden-ratio(14px, 1); // returns: 22.652px +// } +// +// goldenratiocalculator.com diff --git a/app/assets/stylesheets/scss/bourbon/functions/_px-to-em.scss b/app/assets/stylesheets/scss/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000..2eb1031 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_px-to-em.scss @@ -0,0 +1,8 @@ +// Convert pixels to ems +// eg. for a relational value of 12px write em(12) when the parent is 16px +// if the parent is another value say 24px write em(12, 24) + +@function em($pxval, $base: 16) { + @return ($pxval / $base) * 1em; +} + diff --git a/app/assets/stylesheets/scss/bourbon/functions/_radial-gradient.scss b/app/assets/stylesheets/scss/bourbon/functions/_radial-gradient.scss new file mode 100644 index 0000000..7558406 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_radial-gradient.scss @@ -0,0 +1,23 @@ +// This function is required and used by the background-image mixin. +@function radial-gradient($G1, $G2, + $G3: false, $G4: false, + $G5: false, $G6: false, + $G7: false, $G8: false, + $G9: false, $G10: false, + $pos: null, + $shape-size: null) { + + $data: _radial-arg-parser($G1, $G2, $pos, $shape-size); + $G1: nth($data, 1); + $G2: nth($data, 2); + $pos: nth($data, 3); + $shape-size: nth($data, 4); + + $type: radial; + $gradient: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); + + $type-gradient: $type, $shape-size $pos, $gradient; + @return $type-gradient; +} + + diff --git a/app/assets/stylesheets/scss/bourbon/functions/_tint-shade.scss b/app/assets/stylesheets/scss/bourbon/functions/_tint-shade.scss new file mode 100644 index 0000000..f717200 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_tint-shade.scss @@ -0,0 +1,9 @@ +// Add percentage of white to a color +@function tint($color, $percent){ + @return mix(white, $color, $percent); +} + +// Add percentage of black to a color +@function shade($color, $percent){ + @return mix(black, $color, $percent); +} diff --git a/app/assets/stylesheets/scss/bourbon/functions/_transition-property-name.scss b/app/assets/stylesheets/scss/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..54cd422 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/functions/_transition-property-name.scss @@ -0,0 +1,22 @@ +// Return vendor-prefixed property names if appropriate +// Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background +//************************************************************************// +@function transition-property-names($props, $vendor: false) { + $new-props: (); + + @each $prop in $props { + $new-props: append($new-props, transition-property-name($prop, $vendor), comma); + } + + @return $new-props; +} + +@function transition-property-name($prop, $vendor: false) { + // put other properties that need to be prefixed here aswell + @if $vendor and $prop == transform { + @return unquote('-'+$vendor+'-'+$prop); + } + @else { + @return $prop; + } +} \ No newline at end of file diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_deprecated-webkit-gradient.scss b/app/assets/stylesheets/scss/bourbon/helpers/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000..cd17e28 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_deprecated-webkit-gradient.scss @@ -0,0 +1,39 @@ +// Render Deprecated Webkit Gradient - Linear || Radial +//************************************************************************// +@function _deprecated-webkit-gradient($type, + $deprecated-pos1, $deprecated-pos2, + $full, + $deprecated-radius1: false, $deprecated-radius2: false) { + $gradient-list: (); + $gradient: false; + $full-length: length($full); + $percentage: false; + $gradient-type: $type; + + @for $i from 1 through $full-length { + $gradient: nth($full, $i); + + @if length($gradient) == 2 { + $color-stop: color-stop(nth($gradient, 2), nth($gradient, 1)); + $gradient-list: join($gradient-list, $color-stop, comma); + } + @else if $gradient != null { + @if $i == $full-length { + $percentage: 100%; + } + @else { + $percentage: ($i - 1) * (100 / ($full-length - 1)) + "%"; + } + $color-stop: color-stop(unquote($percentage), $gradient); + $gradient-list: join($gradient-list, $color-stop, comma); + } + } + + @if $type == radial { + $gradient: -webkit-gradient(radial, $deprecated-pos1, $deprecated-radius1, $deprecated-pos2, $deprecated-radius2, $gradient-list); + } + @else if $type == linear { + $gradient: -webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $gradient-list); + } + @return $gradient; +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_gradient-positions-parser.scss b/app/assets/stylesheets/scss/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000..07d30b6 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_gradient-positions-parser.scss @@ -0,0 +1,13 @@ +@function _gradient-positions-parser($gradient-type, $gradient-positions) { + @if $gradient-positions + and ($gradient-type == linear) + and (type-of($gradient-positions) != color) { + $gradient-positions: _linear-positions-parser($gradient-positions); + } + @else if $gradient-positions + and ($gradient-type == radial) + and (type-of($gradient-positions) != color) { + $gradient-positions: _radial-positions-parser($gradient-positions); + } + @return $gradient-positions; +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_linear-positions-parser.scss b/app/assets/stylesheets/scss/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000..d26383e --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_linear-positions-parser.scss @@ -0,0 +1,61 @@ +@function _linear-positions-parser($pos) { + $type: type-of(nth($pos, 1)); + $spec: null; + $degree: null; + $side: null; + $corner: null; + $length: length($pos); + // Parse Side and corner positions + @if ($length > 1) { + @if nth($pos, 1) == "to" { // Newer syntax + $side: nth($pos, 2); + + @if $length == 2 { // eg. to top + // Swap for backwards compatability + $degree: _position-flipper(nth($pos, 2)); + } + @else if $length == 3 { // eg. to top left + $corner: nth($pos, 3); + } + } + @else if $length == 2 { // Older syntax ("top left") + $side: _position-flipper(nth($pos, 1)); + $corner: _position-flipper(nth($pos, 2)); + } + + @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { + $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); + } + $spec: to $side $corner; + } + @else if $length == 1 { + // Swap for backwards compatability + @if $type == string { + $degree: $pos; + $spec: to _position-flipper($pos); + } + @else { + $degree: -270 - $pos; //rotate the gradient opposite from spec + $spec: $pos; + } + } + $degree: unquote($degree + ","); + $spec: unquote($spec + ","); + @return $degree $spec; +} + +@function _position-flipper($pos) { + @return if($pos == left, right, null) + if($pos == right, left, null) + if($pos == top, bottom, null) + if($pos == bottom, top, null); +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_radial-arg-parser.scss b/app/assets/stylesheets/scss/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000..3466695 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_radial-arg-parser.scss @@ -0,0 +1,69 @@ +@function _radial-arg-parser($G1, $G2, $pos, $shape-size) { + @each $value in $G1, $G2 { + $first-val: nth($value, 1); + $pos-type: type-of($first-val); + $spec-at-index: null; + + // Determine if spec was passed to mixin + @if type-of($value) == list { + $spec-at-index: if(index($value, at), index($value, at), false); + } + @if $spec-at-index { + @if $spec-at-index > 1 { + @for $i from 1 through ($spec-at-index - 1) { + $shape-size: $shape-size nth($value, $i); + } + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + @else if $spec-at-index == 1 { + @for $i from ($spec-at-index + 1) through length($value) { + $pos: $pos nth($value, $i); + } + } + $G1: false; + } + + // If not spec calculate correct values + @else { + @if ($pos-type != color) or ($first-val != "transparent") { + @if ($pos-type == number) + or ($first-val == "center") + or ($first-val == "top") + or ($first-val == "right") + or ($first-val == "bottom") + or ($first-val == "left") { + + $pos: $value; + + @if $pos == $G1 { + $G1: false; + } + } + + @else if + ($first-val == "ellipse") + or ($first-val == "circle") + or ($first-val == "closest-side") + or ($first-val == "closest-corner") + or ($first-val == "farthest-side") + or ($first-val == "farthest-corner") + or ($first-val == "contain") + or ($first-val == "cover") { + + $shape-size: $value; + + @if $value == $G1 { + $G1: false; + } + + @else if $value == $G2 { + $G2: false; + } + } + } + } + } + @return $G1, $G2, $pos, $shape-size; +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_radial-positions-parser.scss b/app/assets/stylesheets/scss/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000..6a5b477 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_radial-positions-parser.scss @@ -0,0 +1,18 @@ +@function _radial-positions-parser($gradient-pos) { + $shape-size: nth($gradient-pos, 1); + $pos: nth($gradient-pos, 2); + $shape-size-spec: _shape-size-stripper($shape-size); + + $pre-spec: unquote(if($pos, "#{$pos}, ", null)) + unquote(if($shape-size, "#{$shape-size},", null)); + $pos-spec: if($pos, "at #{$pos}", null); + + $spec: "#{$shape-size-spec} #{$pos-spec}"; + + // Add comma + @if ($spec != ' ') { + $spec: "#{$spec}," + } + + @return $pre-spec $spec; +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_render-gradients.scss b/app/assets/stylesheets/scss/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000..5765676 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_render-gradients.scss @@ -0,0 +1,26 @@ +// User for linear and radial gradients within background-image or border-image properties + +@function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { + $pre-spec: null; + $spec: null; + $vendor-gradients: null; + @if $gradient-type == linear { + @if $gradient-positions { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + } + @else if $gradient-type == radial { + $pre-spec: nth($gradient-positions, 1); + $spec: nth($gradient-positions, 2); + } + + @if $vendor { + $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); + } + @else if $vendor == false { + $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; + $vendor-gradients: unquote($vendor-gradients); + } + @return $vendor-gradients; +} diff --git a/app/assets/stylesheets/scss/bourbon/helpers/_shape-size-stripper.scss b/app/assets/stylesheets/scss/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000..ee5eda4 --- /dev/null +++ b/app/assets/stylesheets/scss/bourbon/helpers/_shape-size-stripper.scss @@ -0,0 +1,10 @@ +@function _shape-size-stripper($shape-size) { + $shape-size-spec: null; + @each $value in $shape-size { + @if ($value == "cover") or ($value == "contain") { + $value: null; + } + $shape-size-spec: "#{$shape-size-spec} #{$value}"; + } + @return $shape-size-spec; +} diff --git a/app/assets/stylesheets/scss/layout/_all.scss b/app/assets/stylesheets/scss/layout/_all.scss new file mode 100644 index 0000000..985d7cd --- /dev/null +++ b/app/assets/stylesheets/scss/layout/_all.scss @@ -0,0 +1,3 @@ +@import "body"; +@import "header"; +@import "footer"; \ No newline at end of file diff --git a/app/assets/stylesheets/scss/layout/_body.scss b/app/assets/stylesheets/scss/layout/_body.scss new file mode 100644 index 0000000..ea1e941 --- /dev/null +++ b/app/assets/stylesheets/scss/layout/_body.scss @@ -0,0 +1,4 @@ +body { + margin: 0; + padding: 0; +} diff --git a/app/assets/stylesheets/scss/layout/_footer.scss b/app/assets/stylesheets/scss/layout/_footer.scss new file mode 100644 index 0000000..448047e --- /dev/null +++ b/app/assets/stylesheets/scss/layout/_footer.scss @@ -0,0 +1,76 @@ +.footer { + $footer-background: desaturate(darken($base-accent-color, 20), 30); + $footer-color: white; + $footer-link-color: transparentize($footer-color, .6); + $footer-disclaimer-color: transparentize($footer-color, .6); + + background: $footer-background; + padding: $base-line-height*2 $gutter; + width: 100%; + + .footer-logo { + text-align: center; + margin-bottom: 2em; + + img { + height: 3em; + } + } + + .footer-links { + @include clearfix; + margin-bottom: $base-line-height; + + @include media($medium-screen) { + @include shift(3); + } + } + + ul { + margin-bottom: $base-line-height*2; + + @include media($medium-screen) { + @include span-columns(3); + @include omega(3n); + @include clearfix; + } + } + + li { + text-align: center; + + @include media($medium-screen) { + text-align: left; + } + } + + li a { + color: $footer-link-color; + + &:hover { + color: transparentize($footer-color, 0); + } + } + + li h3 { + color: $footer-color; + font-size: 1em; + font-weight: 800; + margin-bottom: .4em; + } + + hr { + border: 1px solid transparentize($footer-disclaimer-color, .3); + margin: 0 auto $base-line-height; + width: 12em; + } + + p { + color: $footer-disclaimer-color; + font-size: .9em; + line-height: 1.5em; + margin: auto; + max-width: 35em; + text-align: center; + } +} diff --git a/app/assets/stylesheets/scss/layout/_header.scss b/app/assets/stylesheets/scss/layout/_header.scss new file mode 100644 index 0000000..d5b18fa --- /dev/null +++ b/app/assets/stylesheets/scss/layout/_header.scss @@ -0,0 +1,168 @@ +header.navigation { + $navigation-background: $dark-gray; + $navigation-color: transparentize(white, 0.3); + $navigation-color-hover: white; + $navigation-height: 60px; + $navigation-nav-button-background: $base-accent-color; + $navigation-nav-button-background-hover: lighten($navigation-background, 10); + $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20); + $navigation-search-background: lighten($navigation-background, 5); + $navigation-search-border: 1px solid darken($navigation-background, 5); + + background-color: $navigation-background; + border-bottom: 1px solid darken($navigation-background, 10); + font-family: $sans-serif; + height: $navigation-height; + width: 100%; + z-index: 999; + + .menu-wrapper { + @include outer-container; + position: relative; + z-index: 9999; + } + + .logo { + float: left; + max-height: $navigation-height; + padding-left: 1em; + padding-right: 2em; + + img { + max-height: $navigation-height; + padding: .8em 0; + } + } + + .navigation-menu-button { + color: $navigation-color; + cursor: pointer; + display: block; + float: right; + font-family: $sans-serif; + font-weight: 700; + line-height: $navigation-height; + margin: 0; + padding-right: 1em; + text-transform: uppercase; + + @include media ($large-screen) { + display: none; + } + + &:hover { + color: $navigation-color-hover; + } + } + + .nav { + @include media ($large-screen) { + float: left; + } + } + + ul#navigation-menu { + clear: both; + -webkit-transform-style: preserve-3d; // stop webkit flicker + display: none; + margin: 0 auto; + overflow: hidden; + padding: 0; + width: 100%; + z-index: 9999; + + @include media ($large-screen) { + display: inline; + margin: 0; + padding: 0; + } + } + + ul li { + background: $navigation-background; + display: block; + line-height: $navigation-height; + overflow: hidden; + padding-right: .8em; + text-align: right; + width: 100%; + z-index: 9999; + + @include media ($large-screen) { + background: transparent; + display: inline; + line-height: $navigation-height; + padding-right: 2em; + text-decoration: none; + width: auto; + } + + a { + font-weight: 400; + color: $navigation-color; + + &:hover { + color: $navigation-color-hover; + } + } + } + + .sign-up { + @include media ($large-screen) { + @include position(absolute, 0px 0px 0 0); + padding-right: 1em; + + a { + @include transition (all 0.2s ease-in-out); + background: $navigation-nav-button-background; + border-radius: $base-border-radius; + color: white; + font-size: .8em; + font-weight: 800; + padding: .6em 1em; + text-transform: uppercase; + + &:hover { + background: lighten($navigation-nav-button-background, 10); + } + } + } + } + + li.navigation-search-bar { + display: none; + + @include media($large-screen) { + @include position(absolute, 0px 76px 0 0); + display: inline-block; + line-height: 0 !important; + padding: 13px 30px; // this to get around Firefox/Opera line-height "bug" + } + } + + .search-bar { + $search-bar-border-color: $base-border-color; + $search-bar-border: 1px solid $search-bar-border-color; + $search-bar-background: lighten($search-bar-border-color, 10); + + width: 19em; + position: relative; + display: inline-block; + + input { + @include box-sizing(border-box); + display: block; + } + + input[type=text] { + background: $navigation-search-background; + border: $navigation-search-border; + padding: .6em .8em; + font-size: .9em; + font-style: italic; + color: $navigation-color; + border-radius: $base-border-radius * 2; + margin: 0; + } + } +} diff --git a/app/assets/stylesheets/scss/neat/_neat-helpers.scss b/app/assets/stylesheets/scss/neat/_neat-helpers.scss new file mode 100644 index 0000000..e915c69 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/_neat-helpers.scss @@ -0,0 +1,7 @@ +// Functions +@import "functions/private"; +@import "functions/new-breakpoint"; + +// Settings +@import "settings/grid"; +@import "settings/visual-grid"; diff --git a/app/assets/stylesheets/scss/neat/_neat.scss b/app/assets/stylesheets/scss/neat/_neat.scss new file mode 100644 index 0000000..e93d636 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/_neat.scss @@ -0,0 +1,21 @@ +// Bourbon Neat 1.6.0.pre +// MIT Licensed +// Copyright (c) 2012-2013 thoughtbot, inc. + +// Helpers +@import "neat-helpers"; + +// Grid +@import "grid/private"; +@import "grid/reset"; +@import "grid/grid"; +@import "grid/omega"; +@import "grid/outer-container"; +@import "grid/span-columns"; +@import "grid/row"; +@import "grid/shift"; +@import "grid/pad"; +@import "grid/fill-parent"; +@import "grid/media"; +@import "grid/to-deprecate"; +@import "grid/visual-grid"; diff --git a/app/assets/stylesheets/scss/neat/functions/_new-breakpoint.scss b/app/assets/stylesheets/scss/neat/functions/_new-breakpoint.scss new file mode 100644 index 0000000..a89c9ce --- /dev/null +++ b/app/assets/stylesheets/scss/neat/functions/_new-breakpoint.scss @@ -0,0 +1,16 @@ +@function new-breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { + + @if length($query) == 1 { + $query: $default-feature nth($query, 1) $total-columns; + } + + @else if length($query) % 2 == 0 { + $query: append($query, $total-columns); + } + + @if not belongs-to($query, $visual-grid-breakpoints) { + $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; + } + + @return $query; +} diff --git a/app/assets/stylesheets/scss/neat/functions/_private.scss b/app/assets/stylesheets/scss/neat/functions/_private.scss new file mode 100644 index 0000000..6f03cfc --- /dev/null +++ b/app/assets/stylesheets/scss/neat/functions/_private.scss @@ -0,0 +1,125 @@ +// Checks if a number is even +@function is-even($int) { + @if $int%2 == 0 { + @return true; + } + + @return false; +} + +// Checks if an element belongs to a list +@function belongs-to($tested-item, $list) { + @each $item in $list { + @if $item == $tested-item { + @return true; + } + } + + @return false; +} + +// Contains display value +@function contains-display-value($query) { + @if belongs-to(table, $query) or belongs-to(block, $query) or belongs-to(inline-block, $query) or belongs-to(inline, $query) { + @return true; + } + + @return false; +} + +// Parses the first argument of span-columns() +@function container-span($span: $span) { + @if length($span) == 3 { + $container-columns: nth($span, 3); + @return $container-columns; + } + + @else if length($span) == 2 { + $container-columns: nth($span, 2); + @return $container-columns; + } + + @else { + @return $grid-columns; + } +} + +@function container-shift($shift: $shift) { + $parent-columns: $grid-columns !global !default; + + @if length($shift) == 3 { + $container-columns: nth($shift, 3); + @return $container-columns; + } + + @else if length($shift) == 2 { + $container-columns: nth($shift, 2); + @return $container-columns; + } + + @else { + @return $parent-columns; + } +} + +// Generates a striped background +@function gradient-stops($grid-columns, $color: $visual-grid-color) { + $transparent: rgba(0,0,0,0); + + $column-width: flex-grid(1, $grid-columns); + $gutter-width: flex-gutter($grid-columns); + $column-offset: $column-width; + + $values: ($transparent 0, $color 0); + + @for $i from 1 to $grid-columns*2 { + @if is-even($i) { + $values: append($values, $transparent $column-offset, comma); + $values: append($values, $color $column-offset, comma); + $column-offset: $column-offset + $column-width; + } + + @else { + $values: append($values, $color $column-offset, comma); + $values: append($values, $transparent $column-offset, comma); + $column-offset: $column-offset + $gutter-width; + } + } + + @return $values; +} + +// Layout direction +@function get-direction($layout, $default) { + $direction: nil; + + @if $layout == LTR or $layout == RTL { + $direction: direction-from-layout($layout); + } @else { + $direction: direction-from-layout($default); + } + + @return $direction; +} + +@function direction-from-layout($layout) { + $direction: nil; + + @if $layout == LTR { + $direction: right; + } @else { + $direction: left; + } + + @return $direction; +} + +@function get-opposite-direction($direction) { + $opposite-direction: left; + + @if $direction == left { + $opposite-direction: right; + } + + @return $opposite-direction; +} diff --git a/app/assets/stylesheets/scss/neat/grid/_fill-parent.scss b/app/assets/stylesheets/scss/neat/grid/_fill-parent.scss new file mode 100644 index 0000000..859c977 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_fill-parent.scss @@ -0,0 +1,7 @@ +@mixin fill-parent() { + width: 100%; + + @if $border-box-sizing == false { + @include box-sizing(border-box); + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_grid.scss b/app/assets/stylesheets/scss/neat/grid/_grid.scss new file mode 100644 index 0000000..e074b6c --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_grid.scss @@ -0,0 +1,5 @@ +@if $border-box-sizing == true { + * { + @include box-sizing(border-box); + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_media.scss b/app/assets/stylesheets/scss/neat/grid/_media.scss new file mode 100644 index 0000000..bf27f70 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_media.scss @@ -0,0 +1,38 @@ +@mixin media($query:$feature $value $columns, $total-columns: $grid-columns) { + @if length($query) == 1 { + @media screen and ($default-feature: nth($query, 1)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns !global; + @content; + $grid-columns: $default-grid-columns !global; + } + } + + @else { + $loopTo: length($query); + $mediaQuery: 'screen and '; + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns !global; + + @if length($query) % 2 != 0 { + $grid-columns: nth($query, $loopTo) !global; + $loopTo: $loopTo - 1; + } + + $i: 1; + @while $i <= $loopTo { + $mediaQuery: $mediaQuery + '(' + nth($query, $i) + ': ' + nth($query, $i + 1) + ') '; + + @if ($i + 1) != $loopTo { + $mediaQuery: $mediaQuery + 'and '; + } + + $i: $i + 2; + } + + @media #{$mediaQuery} { + @content; + $grid-columns: $default-grid-columns !global; + } + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_omega.scss b/app/assets/stylesheets/scss/neat/grid/_omega.scss new file mode 100644 index 0000000..c99ed6c --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_omega.scss @@ -0,0 +1,61 @@ +// Remove last element gutter +@mixin omega($query: block, $direction: default) { + $table: if(belongs-to(table, $query), true, false); + $auto: if(belongs-to(auto, $query), true, false); + + @if $direction != default { + @warn "The omega mixin will no longer take a $direction argument. To change the layout direction, use row($direction) or set $default-layout-direction instead." + } @else { + $direction: get-direction($layout-direction, $default-layout-direction); + } + + @if $table { + @warn "The omega mixin no longer removes padding in table layouts." + } + + @if length($query) == 1 { + @if $auto { + &:last-child { + margin-#{$direction}: 0; + } + } + + @else if contains-display-value($query) and $table == false { + margin-#{$direction}: 0; + } + + @else { + @include nth-child($query, $direction); + } + } + + @else if length($query) == 2 { + @if $auto { + &:last-child { + margin-#{$direction}: 0; + } + } + + @else { + @include nth-child(nth($query, 1), $direction); + } + } + + @else { + @warn "Too many arguments passed to the omega() mixin." + } +} + +@mixin nth-child($query, $direction) { + $opposite-direction: get-opposite-direction($direction); + + &:nth-child(#{$query}) { + margin-#{$direction}: 0; + } + + @if type-of($query) == number { + &:nth-child(#{$query}+1) { + clear: $opposite-direction; + } + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_outer-container.scss b/app/assets/stylesheets/scss/neat/grid/_outer-container.scss new file mode 100644 index 0000000..22c541f --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_outer-container.scss @@ -0,0 +1,8 @@ +@mixin outer-container { + @include clearfix; + max-width: $max-width; + margin: { + left: auto; + right: auto; + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_pad.scss b/app/assets/stylesheets/scss/neat/grid/_pad.scss new file mode 100644 index 0000000..3ef5d80 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_pad.scss @@ -0,0 +1,8 @@ +@mixin pad($padding: flex-gutter()) { + $padding-list: null; + @each $value in $padding { + $value: if($value == 'default', flex-gutter(), $value); + $padding-list: join($padding-list, $value); + } + padding: $padding-list; +} diff --git a/app/assets/stylesheets/scss/neat/grid/_private.scss b/app/assets/stylesheets/scss/neat/grid/_private.scss new file mode 100644 index 0000000..b195336 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_private.scss @@ -0,0 +1,43 @@ +$parent-columns: $grid-columns !default; +$fg-column: $column; +$fg-gutter: $gutter; +$fg-max-columns: $grid-columns; +$container-display-table: false !default; +$layout-direction: nil !default; + +@function flex-grid($columns, $container-columns: $fg-max-columns) { + $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($width / $container-width); +} + +@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { + $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; + @return percentage($gutter / $container-width); +} + +@function grid-width($n) { + @return $n * $gw-column + ($n - 1) * $gw-gutter; +} + +@function get-parent-columns($columns) { + @if $columns != $grid-columns { + $parent-columns: $columns !global; + } @else { + $parent-columns: $grid-columns !global; + } + + @return $parent-columns; +} + +@function is-display-table($container-is-display-table, $display) { + $display-table: false; + + @if $container-is-display-table == true { + $display-table: true; + } @else if $display == table { + $display-table: true; + } + + @return $display-table; +} diff --git a/app/assets/stylesheets/scss/neat/grid/_reset.scss b/app/assets/stylesheets/scss/neat/grid/_reset.scss new file mode 100644 index 0000000..496c4a7 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_reset.scss @@ -0,0 +1,12 @@ +@mixin reset-display { + $container-display-table: false !global; +} + +@mixin reset-layout-direction { + $layout-direction: $default-layout-direction !global; +} + +@mixin reset-all { + @include reset-display; + @include reset-layout-direction; +} diff --git a/app/assets/stylesheets/scss/neat/grid/_row.scss b/app/assets/stylesheets/scss/neat/grid/_row.scss new file mode 100644 index 0000000..81da6d3 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_row.scss @@ -0,0 +1,17 @@ +@mixin row($display: block, $direction: $default-layout-direction) { + @include clearfix; + $layout-direction: $direction !global; + + @if $display == table { + display: table; + @include fill-parent; + table-layout: fixed; + $container-display-table: true !global; + } + + @else { + display: block; + $container-display-table: false !global; + } +} + diff --git a/app/assets/stylesheets/scss/neat/grid/_shift.scss b/app/assets/stylesheets/scss/neat/grid/_shift.scss new file mode 100644 index 0000000..1d27b9b --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_shift.scss @@ -0,0 +1,16 @@ +@mixin shift($n-columns: 1) { + @include shift-in-context($n-columns); +} + +@mixin shift-in-context($shift: $columns of $container-columns) { + $n-columns: nth($shift, 1); + $parent-columns: container-shift($shift) !global; + + $direction: get-direction($layout-direction, $default-layout-direction); + $opposite-direction: get-opposite-direction($direction); + + margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); + + // Reset nesting context + $parent-columns: $grid-columns !global; +} diff --git a/app/assets/stylesheets/scss/neat/grid/_span-columns.scss b/app/assets/stylesheets/scss/neat/grid/_span-columns.scss new file mode 100644 index 0000000..c79193d --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_span-columns.scss @@ -0,0 +1,43 @@ +@mixin span-columns($span: $columns of $container-columns, $display: block) { + $columns: nth($span, 1); + $container-columns: container-span($span); + + // Set nesting context (used by shift()) + $parent-columns: get-parent-columns($container-columns) !global; + + $direction: get-direction($layout-direction, $default-layout-direction); + $opposite-direction: get-opposite-direction($direction); + + $display-table: is-display-table($container-display-table, $display); + + @if $display-table { + display: table-cell; + width: percentage($columns / $container-columns); + } @else { + float: #{$opposite-direction}; + + @if $display != no-display { + display: block; + } + + @if $display == collapse { + @warn "The 'collapse' argument will be deprecated. Use 'block-collapse' instead." + } + + @if $display == collapse or $display == block-collapse { + width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); + + &:last-child { + width: flex-grid($columns, $container-columns); + } + + } @else { + margin-#{$direction}: flex-gutter($container-columns); + width: flex-grid($columns, $container-columns); + + &:last-child { + margin-#{$direction}: 0; + } + } + } +} diff --git a/app/assets/stylesheets/scss/neat/grid/_to-deprecate.scss b/app/assets/stylesheets/scss/neat/grid/_to-deprecate.scss new file mode 100644 index 0000000..d0a681f --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_to-deprecate.scss @@ -0,0 +1,57 @@ +@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { + @warn "The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."; + + @if length($query) == 1 { + @media screen and ($default-feature: nth($query, 1)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 2 { + @media screen and (nth($query, 1): nth($query, 2)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 3 { + @media screen and (nth($query, 1): nth($query, 2)) { + $default-grid-columns: $grid-columns; + $grid-columns: nth($query, 3); + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 4 { + @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { + $default-grid-columns: $grid-columns; + $grid-columns: $total-columns; + @content; + $grid-columns: $default-grid-columns; + } + } + + @else if length($query) == 5 { + @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { + $default-grid-columns: $grid-columns; + $grid-columns: nth($query, 5); + @content; + $grid-columns: $default-grid-columns; + } + } + + @else { + @warn "Wrong number of arguments for breakpoint(). Read the documentation for more details."; + } +} + +@mixin nth-omega($nth, $display: block, $direction: default) { + @warn "The nth-omega() mixin is deprecated. Please use omega() instead."; + @include omega($nth $display, $direction); +} diff --git a/app/assets/stylesheets/scss/neat/grid/_visual-grid.scss b/app/assets/stylesheets/scss/neat/grid/_visual-grid.scss new file mode 100644 index 0000000..1c822fd --- /dev/null +++ b/app/assets/stylesheets/scss/neat/grid/_visual-grid.scss @@ -0,0 +1,41 @@ +@mixin grid-column-gradient($values...) { + background-image: deprecated-webkit-gradient(linear, left top, left bottom, $values); + background-image: -webkit-linear-gradient(left, $values); + background-image: -moz-linear-gradient(left, $values); + background-image: -ms-linear-gradient(left, $values); + background-image: -o-linear-gradient(left, $values); + background-image: unquote("linear-gradient(left, #{$values})"); +} + +@if $visual-grid == true or $visual-grid == yes { + body:before { + content: ''; + display: inline-block; + @include grid-column-gradient(gradient-stops($grid-columns)); + height: 100%; + left: 0; + margin: 0 auto; + max-width: $max-width; + opacity: $visual-grid-opacity; + position: fixed; + right: 0; + width: 100%; + pointer-events: none; + + @if $visual-grid-index == back { + z-index: -1; + } + + @else if $visual-grid-index == front { + z-index: 9999; + } + + @each $breakpoint in $visual-grid-breakpoints { + @if $breakpoint != nil { + @include media($breakpoint) { + @include grid-column-gradient(gradient-stops($grid-columns)); + } + } + } + } +} diff --git a/app/assets/stylesheets/scss/neat/settings/_grid.scss b/app/assets/stylesheets/scss/neat/settings/_grid.scss new file mode 100644 index 0000000..f1dcda4 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/settings/_grid.scss @@ -0,0 +1,7 @@ +$column: golden-ratio(1em, 3) !default; // Column width +$gutter: golden-ratio(1em, 1) !default; // Gutter between each two columns +$grid-columns: 12 !default; // Total number of columns in the grid +$max-width: em(1088) !default; // Max-width of the outer container +$border-box-sizing: true !default; // Makes all elements have a border-box layout +$default-feature: min-width; // Default @media feature for the breakpoint() mixin +$default-layout-direction: LTR !default; diff --git a/app/assets/stylesheets/scss/neat/settings/_visual-grid.scss b/app/assets/stylesheets/scss/neat/settings/_visual-grid.scss new file mode 100644 index 0000000..611c2b3 --- /dev/null +++ b/app/assets/stylesheets/scss/neat/settings/_visual-grid.scss @@ -0,0 +1,5 @@ +$visual-grid: false !default; // Display the base grid +$visual-grid-color: #EEE !default; +$visual-grid-index: back !default; // Show grid behind content (back) or overlay it over the content (front) +$visual-grid-opacity: 0.4 !default; +$visual-grid-breakpoints: () !default; diff --git a/app/views/layouts/_footer.html.erb b/app/views/layouts/_footer.html.erb new file mode 100644 index 0000000..41b3b28 --- /dev/null +++ b/app/views/layouts/_footer.html.erb @@ -0,0 +1,38 @@ +
+ <% if cuser && (g = cuser.gathers.active.ordered.first) %> + <%= link_to "You're in THIS gather", g %> + <% elsif Gather.last && (Gather::FULL - Gather.last.gatherers.count) == 12 %> + Be first to join the <%= link_to "Gather", Gather.last %>! + <% elsif Gather.last %> + <%= link_to "Gather", Gather.last %> running, <%= Gather::FULL - Gather.last.gatherers.count %> more needed. + <% end %> +
+ + diff --git a/app/views/layouts/_header.html.erb b/app/views/layouts/_header.html.erb index caa9d2b..9d778b4 100644 --- a/app/views/layouts/_header.html.erb +++ b/app/views/layouts/_header.html.erb @@ -1,3 +1,25 @@ +
+
+ + +
+ +
+
+
+
-
- <% if cuser %> - <%= render :partial => "widgets/logged" %> - <% else %> - <%= render :partial => "widgets/login" %> - <% end %> -
-
<%= link_to contests_url do %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 7f0fb4b..9f9d27c 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -1,18 +1,15 @@ - - - - + + - - - + ENSL + + + <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tag %> - ENSL -
@@ -67,16 +64,7 @@
- -
- <% if cuser && (g = cuser.gathers.active.ordered.first) %> - <%= link_to "You're in THIS gather", g %> - <% elsif Gather.last && (Gather::FULL - Gather.last.gatherers.count) == 12 %> - Be first to join the <%= link_to "Gather", Gather.last %>! - <% elsif Gather.last %> - <%= link_to "Gather", Gather.last %> running, <%= Gather::FULL - Gather.last.gatherers.count %> more needed. - <% end %> -
+ <%= render :partial => "layouts/footer" %>
diff --git a/app/views/widgets/_logged.html.erb b/app/views/widgets/_logged.html.erb index 4211786..70e8e0d 100644 --- a/app/views/widgets/_logged.html.erb +++ b/app/views/widgets/_logged.html.erb @@ -1,19 +1,11 @@ -
- <%= form_tag :controller => "users", :action => "logout" do %> -
- <%= link_to 'Profile', edit_user_path(cuser) %> -
-
- <%= link_to 'Agenda', "/users/agenda/#{cuser.id}" %> -
-
- <%= link_to 'PMs', messages_path() %> - <% if c = cuser.new_messages.count > 0 %> - (<%= cuser.new_messages.count %>) - <% end %> -
-
- <%= link_to_function "Logout", '$(this).closest("form").submit();' %> -
- <% end %> -
+<%= form_tag :controller => "users", :action => "logout" do %> +
  • <%= link_to 'Profile', edit_user_path(cuser) %>
    • +
  • <%= link_to 'Agenda', "/users/agenda/#{cuser.id}" %>
    • +
  • + <%= link_to 'PMs', messages_path() %> + <% if c = cuser.new_messages.count > 0 %> + (<%= cuser.new_messages.count %>) + <% end %> +
    • +
  • <%= link_to_function "Logout", '$(this).closest("form").submit();' %>
    • +<% end %> diff --git a/app/views/widgets/_login.html.erb b/app/views/widgets/_login.html.erb index 871ec04..8a9beef 100644 --- a/app/views/widgets/_login.html.erb +++ b/app/views/widgets/_login.html.erb @@ -1,21 +1,16 @@ -
    - <%= form_tag :controller => "users", :action => "login" do %> - - - - - - - -
    - <%= text_field "login", "username" %> - - <%= password_field "login", "password" %> - - <%= submit_tag I18n.t('helpers.submit.user.login') %> -
    - <% end %> -
    +<%= form_tag :controller => "users", :action => "login" do %> +
  • +
    +
    + <%= text_field "login", "username" %> + <%= password_field "login", "password" %> +
    +
    +
    • + +<% end %> + + \ No newline at end of file