From 1388684194fdadc72973af7eb417e9fb70ff7676 Mon Sep 17 00:00:00 2001 From: David Baumgold <david@davidbaumgold.com> Date: Mon, 8 Jul 2013 11:00:30 -0400 Subject: [PATCH] Sass 3.2.9, Bourbon 3.1.8 --- Gemfile | 4 ++-- common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss | 13 +++++++++++++ common/static/sass/bourbon/_bourbon.scss | 32 ++++++++++++++++++++++++++++---- common/static/sass/bourbon/addons/_button.scss | 60 +++++++++++++++++++++++++++++++++--------------------------- common/static/sass/bourbon/addons/_clearfix.scss | 4 ++-- common/static/sass/bourbon/addons/_hide-text.scss | 5 +++++ common/static/sass/bourbon/addons/_html5-input-types.scss | 22 +++++++++++++++++++++- common/static/sass/bourbon/addons/_position.scss | 20 ++++++++++++++++---- common/static/sass/bourbon/addons/_prefixer.scss | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/addons/_retina-image.scss | 32 ++++++++++++++++++++++++++++++++ common/static/sass/bourbon/addons/_size.scss | 44 ++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/addons/_triangle.scss | 45 +++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/css3/_animation.scss | 165 +++++++++++++++++++++++---------------------------------------------------------------------------------------------------------------------------------------------- common/static/sass/bourbon/css3/_appearance.scss | 6 +----- common/static/sass/bourbon/css3/_backface-visibility.scss | 6 ++++++ common/static/sass/bourbon/css3/_background-image.scss | 49 ++++++++++++++++++++----------------------------- common/static/sass/bourbon/css3/_background-size.scss | 15 --------------- common/static/sass/bourbon/css3/_background.scss | 103 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/css3/_border-image.scss | 45 ++++++++++++++++++++++----------------------- common/static/sass/bourbon/css3/_border-radius.scss | 69 ++++++++++++++------------------------------------------------------- common/static/sass/bourbon/css3/_box-shadow.scss | 14 -------------- common/static/sass/bourbon/css3/_box-sizing.scss | 4 +--- common/static/sass/bourbon/css3/_columns.scss | 40 ++++++++++------------------------------ common/static/sass/bourbon/css3/_flex-box.scss | 37 +++++++++++-------------------------- common/static/sass/bourbon/css3/_font-face.scss | 23 +++++++++++++++++++++++ common/static/sass/bourbon/css3/_hidpi-media-query.scss | 10 ++++++++++ common/static/sass/bourbon/css3/_image-rendering.scss | 13 +++++++++++++ common/static/sass/bourbon/css3/_inline-block.scss | 2 -- common/static/sass/bourbon/css3/_keyframes.scss | 43 +++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/css3/_linear-gradient.scss | 28 ++++++++++++++-------------- common/static/sass/bourbon/css3/_perspective.scss | 8 ++++++++ common/static/sass/bourbon/css3/_placeholder.scss | 29 +++++++++++++++++++++++++++++ common/static/sass/bourbon/css3/_radial-gradient.scss | 41 +++++++++++++++++++++++++++-------------- common/static/sass/bourbon/css3/_transform.scss | 16 ++++++---------- common/static/sass/bourbon/css3/_transition.scss | 100 +++++++++++++++------------------------------------------------------------------------------------- common/static/sass/bourbon/css3/_user-select.scss | 5 +---- common/static/sass/bourbon/functions/_compact.scss | 11 +++++++++++ common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss | 36 ------------------------------------ common/static/sass/bourbon/functions/_flex-grid.scss | 10 +++++++--- common/static/sass/bourbon/functions/_linear-gradient.scss | 22 ++++++---------------- common/static/sass/bourbon/functions/_px-to-em.scss | 8 ++++++++ common/static/sass/bourbon/functions/_radial-gradient.scss | 18 +++++++++++++----- common/static/sass/bourbon/functions/_render-gradients.scss | 14 -------------- common/static/sass/bourbon/functions/_transition-property-name.scss | 22 ++++++++++++++++++++++ common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss | 39 +++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/helpers/_gradient-positions-parser.scss | 13 +++++++++++++ common/static/sass/bourbon/helpers/_linear-positions-parser.scss | 61 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/helpers/_radial-arg-parser.scss | 69 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ common/static/sass/bourbon/helpers/_radial-positions-parser.scss | 18 ++++++++++++++++++ common/static/sass/bourbon/helpers/_render-gradients.scss | 26 ++++++++++++++++++++++++++ common/static/sass/bourbon/helpers/_shape-size-stripper.scss | 10 ++++++++++ common/static/sass/bourbon/lib/bourbon.rb | 19 ------------------- common/static/sass/bourbon/lib/bourbon/sass_extensions.rb | 6 ------ common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb | 13 ------------- common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb | 13 ------------- rakelib/assets.rake | 1 - 56 files changed, 993 insertions(+), 637 deletions(-) create mode 100644 common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss create mode 100644 common/static/sass/bourbon/addons/_hide-text.scss create mode 100644 common/static/sass/bourbon/addons/_prefixer.scss create mode 100644 common/static/sass/bourbon/addons/_retina-image.scss create mode 100644 common/static/sass/bourbon/addons/_size.scss create mode 100644 common/static/sass/bourbon/addons/_triangle.scss create mode 100644 common/static/sass/bourbon/css3/_backface-visibility.scss delete mode 100644 common/static/sass/bourbon/css3/_background-size.scss create mode 100644 common/static/sass/bourbon/css3/_background.scss delete mode 100644 common/static/sass/bourbon/css3/_box-shadow.scss create mode 100644 common/static/sass/bourbon/css3/_font-face.scss create mode 100644 common/static/sass/bourbon/css3/_hidpi-media-query.scss create mode 100644 common/static/sass/bourbon/css3/_image-rendering.scss create mode 100644 common/static/sass/bourbon/css3/_keyframes.scss create mode 100644 common/static/sass/bourbon/css3/_perspective.scss create mode 100644 common/static/sass/bourbon/css3/_placeholder.scss create mode 100644 common/static/sass/bourbon/functions/_compact.scss delete mode 100644 common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss create mode 100644 common/static/sass/bourbon/functions/_px-to-em.scss delete mode 100644 common/static/sass/bourbon/functions/_render-gradients.scss create mode 100644 common/static/sass/bourbon/functions/_transition-property-name.scss create mode 100644 common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss create mode 100644 common/static/sass/bourbon/helpers/_gradient-positions-parser.scss create mode 100644 common/static/sass/bourbon/helpers/_linear-positions-parser.scss create mode 100644 common/static/sass/bourbon/helpers/_radial-arg-parser.scss create mode 100644 common/static/sass/bourbon/helpers/_radial-positions-parser.scss create mode 100644 common/static/sass/bourbon/helpers/_render-gradients.scss create mode 100644 common/static/sass/bourbon/helpers/_shape-size-stripper.scss delete mode 100644 common/static/sass/bourbon/lib/bourbon.rb delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions.rb delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb delete mode 100644 common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb diff --git a/Gemfile b/Gemfile index 1ad685c..fcbe491 100644 --- a/Gemfile +++ b/Gemfile @@ -1,7 +1,7 @@ source 'https://rubygems.org' gem 'rake', '~> 10.0.3' -gem 'sass', '3.1.15' -gem 'bourbon', '~> 1.3.6' +gem 'sass', '3.2.9' +gem 'bourbon', '~> 3.1.8' gem 'colorize', '~> 0.5.8' gem 'launchy', '~> 2.1.2' gem 'sys-proctable', '~> 0.9.3' diff --git a/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss b/common/static/sass/bourbon/_bourbon-deprecated-upcoming.scss new file mode 100644 index 0000000..5332496 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/_bourbon.scss b/common/static/sass/bourbon/_bourbon.scss index 27b056e..53fbca8 100644 --- a/common/static/sass/bourbon/_bourbon.scss +++ b/common/static/sass/bourbon/_bourbon.scss @@ -1,35 +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/deprecated-webkit-gradient"; +@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/render-gradients"; @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/background-size"; @import "css3/border-image"; @import "css3/border-radius"; -@import "css3/box-shadow"; @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/common/static/sass/bourbon/addons/_button.scss b/common/static/sass/bourbon/addons/_button.scss index 1d32125..3ae393c 100644 --- a/common/static/sass/bourbon/addons/_button.scss +++ b/common/static/sass/bourbon/addons/_button.scss @@ -34,6 +34,11 @@ @include pill($base-color); } } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } } @@ -59,18 +64,19 @@ } border: 1px solid $border; - @include border-radius (3px); - @include box-shadow (inset 0 1px 0 0 $inset-shadow); + border-radius: 3px; + box-shadow: inset 0 1px 0 0 $inset-shadow; color: $color; - display: inline; + display: inline-block; font-size: 11px; font-weight: bold; @include linear-gradient ($base-color, $stop-gradient); - padding: 6px 18px 7px; + padding: 7px 18px; + text-decoration: none; text-shadow: 0 1px 0 $text-shadow; - -webkit-background-clip: padding-box; + background-clip: padding-box; - &:hover { + &: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%); @@ -81,12 +87,12 @@ $stop-gradient-hover: grayscale($stop-gradient-hover); } - @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover); + box-shadow: inset 0 1px 0 0 $inset-shadow-hover; cursor: pointer; @include linear-gradient ($base-color-hover, $stop-gradient-hover); } - &:active { + &:active:not(:disabled) { $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%); $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%); @@ -96,7 +102,7 @@ } border: 1px solid $border-active; - @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee); + box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee; } } @@ -130,19 +136,19 @@ border: 1px solid $border; border-bottom: 1px solid $border-bottom; - @include border-radius(5px); - @include box-shadow(inset 0 1px 0 0 $inset-shadow); + border-radius: 5px; + box-shadow: inset 0 1px 0 0 $inset-shadow; color: $color; - display: inline; + 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: 7px 20px 8px; + padding: 8px 20px; text-align: center; text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; - &:hover { + &: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); @@ -162,14 +168,14 @@ $fourth-stop-hover 100%); } - &:active { + &: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); } - @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff); + box-shadow: inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff; } } @@ -201,20 +207,21 @@ border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; - @include border-radius(16px); - @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3); + border-radius: 16px; + box-shadow: inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3; color: $color; - display: inline; + display: inline-block; font-size: 11px; font-weight: normal; line-height: 1; @include linear-gradient ($base-color, $stop-gradient); - padding: 3px 16px 5px; + padding: 5px 16px; text-align: center; + text-decoration: none; text-shadow: 0 -1px 1px $text-shadow; - -webkit-background-clip: padding-box; + background-clip: padding-box; - &:hover { + &: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%); @@ -235,14 +242,14 @@ border: 1px solid $border-top; border-color: $border-top $border-sides $border-bottom; - @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover); + 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; - -webkit-background-clip: padding-box; + background-clip: padding-box; } - &:active { + &: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%); @@ -260,8 +267,7 @@ background: $active-color; border: 1px solid $border-active; border-bottom: 1px solid $border-bottom-active; - @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff); + 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/common/static/sass/bourbon/addons/_clearfix.scss b/common/static/sass/bourbon/addons/_clearfix.scss index a9f6a79..ca9903c 100644 --- a/common/static/sass/bourbon/addons/_clearfix.scss +++ b/common/static/sass/bourbon/addons/_clearfix.scss @@ -12,11 +12,11 @@ // } @mixin clearfix { - zoom: 1; + *zoom: 1; &:before, &:after { - content: ""; + content: " "; display: table; } diff --git a/common/static/sass/bourbon/addons/_hide-text.scss b/common/static/sass/bourbon/addons/_hide-text.scss new file mode 100644 index 0000000..68d4bf8 --- /dev/null +++ b/common/static/sass/bourbon/addons/_hide-text.scss @@ -0,0 +1,5 @@ +@mixin hide-text { + color: transparent; + font: 0/0 a; + text-shadow: none; +} diff --git a/common/static/sass/bourbon/addons/_html5-input-types.scss b/common/static/sass/bourbon/addons/_html5-input-types.scss index 9d86fbb..b184382 100644 --- a/common/static/sass/bourbon/addons/_html5-input-types.scss +++ b/common/static/sass/bourbon/addons/_html5-input-types.scss @@ -21,15 +21,35 @@ $inputs-list: 'input[type="email"]', '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/common/static/sass/bourbon/addons/_position.scss b/common/static/sass/bourbon/addons/_position.scss index 6ad330f..faad1ca 100644 --- a/common/static/sass/bourbon/addons/_position.scss +++ b/common/static/sass/bourbon/addons/_position.scss @@ -12,19 +12,31 @@ position: $position; - @if not(unitless($top)) { + @if $top == auto { + top: $top; + } + @else if not(unitless($top)) { top: $top; } - @if not(unitless($right)) { + @if $right == auto { + right: $right; + } + @else if not(unitless($right)) { right: $right; } - @if not(unitless($bottom)) { + @if $bottom == auto { + bottom: $bottom; + } + @else if not(unitless($bottom)) { bottom: $bottom; } - @if not(unitless($left)) { + @if $left == auto { + left: $left; + } + @else if not(unitless($left)) { left: $left; } } diff --git a/common/static/sass/bourbon/addons/_prefixer.scss b/common/static/sass/bourbon/addons/_prefixer.scss new file mode 100644 index 0000000..6bfd23a --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/addons/_retina-image.scss b/common/static/sass/bourbon/addons/_retina-image.scss new file mode 100644 index 0000000..a84b6fa --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/addons/_size.scss b/common/static/sass/bourbon/addons/_size.scss new file mode 100644 index 0000000..342e41b --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/addons/_triangle.scss b/common/static/sass/bourbon/addons/_triangle.scss new file mode 100644 index 0000000..0e02aca --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_animation.scss b/common/static/sass/bourbon/css3/_animation.scss index f99e06e..08c3dbf 100644 --- a/common/static/sass/bourbon/css3/_animation.scss +++ b/common/static/sass/bourbon/css3/_animation.scss @@ -2,170 +2,51 @@ // 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 ($animation-1, - $animation-2: false, $animation-3: false, - $animation-4: false, $animation-5: false, - $animation-6: false, $animation-7: false, - $animation-8: false, $animation-9: false) - { - $full: compact($animation-1, $animation-2, $animation-3, $animation-4, - $animation-5, $animation-6, $animation-7, $animation-8, $animation-9); - - -webkit-animation: $full; - -moz-animation: $full; - animation: $full; +@mixin animation ($animations...) { + @include prefixer(animation, $animations, webkit moz spec); } // Individual Animation Properties -@mixin animation-name ($name-1, - $name-2: false, $name-3: false, - $name-4: false, $name-5: false, - $name-6: false, $name-7: false, - $name-8: false, $name-9: false) - { - $full: compact($name-1, $name-2, $name-3, $name-4, - $name-5, $name-6, $name-7, $name-8, $name-9); - - -webkit-animation-name: $full; - -moz-animation-name: $full; - animation-name: $full; +@mixin animation-name ($names...) { + @include prefixer(animation-name, $names, webkit moz spec); } -@mixin animation-duration ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, - $time-5, $time-6, $time-7, $time-8, $time-9); - - -webkit-animation-duration: $full; - -moz-animation-duration: $full; - animation-duration: $full; -} - - -@mixin animation-timing-function ($motion-1: ease, -// ease | linear | ease-in | ease-out | ease-in-out - $motion-2: false, $motion-3: false, - $motion-4: false, $motion-5: false, - $motion-6: false, $motion-7: false, - $motion-8: false, $motion-9: false) - { - $full: compact($motion-1, $motion-2, $motion-3, $motion-4, - $motion-5, $motion-6, $motion-7, $motion-8, $motion-9); - - -webkit-animation-timing-function: $full; - -moz-animation-timing-function: $full; - animation-timing-function: $full; +@mixin animation-duration ($times...) { + @include prefixer(animation-duration, $times, webkit moz spec); } -@mixin animation-iteration-count ($value-1: 1, -// infinite | <number> - $value-2: false, $value-3: false, - $value-4: false, $value-5: false, - $value-6: false, $value-7: false, - $value-8: false, $value-9: false) - { - $full: compact($value-1, $value-2, $value-3, $value-4, - $value-5, $value-6, $value-7, $value-8, $value-9); - - -webkit-animation-iteration-count: $full; - -moz-animation-iteration-count: $full; - animation-iteration-count: $full; +@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-direction ($direction-1: normal, -// normal | alternate - $direction-2: false, $direction-3: false, - $direction-4: false, $direction-5: false, - $direction-6: false, $direction-7: false, - $direction-8: false, $direction-9: false) - { - $full: compact($direction-1, $direction-2, $direction-3, $direction-4, - $direction-5, $direction-6, $direction-7, $direction-8, $direction-9); - - -webkit-animation-direction: $full; - -moz-animation-direction: $full; - animation-direction: $full; +@mixin animation-iteration-count ($values...) { +// infinite | <number> + @include prefixer(animation-iteration-count, $values, webkit moz spec); } -@mixin animation-play-state ($state-1: running, -// running | paused - $state-2: false, $state-3: false, - $state-4: false, $state-5: false, - $state-6: false, $state-7: false, - $state-8: false, $state-9: false) - { - $full: compact($state-1, $state-2, $state-3, $state-4, - $state-5, $state-6, $state-7, $state-8, $state-9); - - -webkit-animation-play-state: $full; - -moz-animation-play-state: $full; - animation-play-state: $full; +@mixin animation-direction ($directions...) { +// normal | alternate + @include prefixer(animation-direction, $directions, webkit moz spec); } -@mixin animation-delay ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, - $time-5, $time-6, $time-7, $time-8, $time-9); - - -webkit-animation-delay: $full; - -moz-animation-delay: $full; - animation-delay: $full; +@mixin animation-play-state ($states...) { +// running | paused + @include prefixer(animation-play-state, $states, webkit moz spec); } -@mixin animation-fill-mode ($mode-1: none, -// http://goo.gl/l6ckm -// none | forwards | backwards | both - $mode-2: false, $mode-3: false, - $mode-4: false, $mode-5: false, - $mode-6: false, $mode-7: false, - $mode-8: false, $mode-9: false) - { - $full: compact($mode-1, $mode-2, $mode-3, $mode-4, - $mode-5, $mode-6, $mode-7, $mode-8, $mode-9); - - -webkit-animation-fill-mode: $full; - -moz-animation-fill-mode: $full; - animation-fill-mode: $full; +@mixin animation-delay ($times...) { + @include prefixer(animation-delay, $times, webkit moz spec); } -// Deprecated -@mixin animation-basic ($name, $time: 0, $motion: ease) { - $length-of-name: length($name); - $length-of-time: length($time); - $length-of-motion: length($motion); - - @if $length-of-name > 1 { - @include animation-name(zip($name)); - } @else { - @include animation-name( $name); - } - - @if $length-of-time > 1 { - @include animation-duration(zip($time)); - } @else { - @include animation-duration( $time); - } - - @if $length-of-motion > 1 { - @include animation-timing-function(zip($motion)); - } @else { - @include animation-timing-function( $motion); - } - @warn "The animation-basic mixin is deprecated. Use the animation mixin instead."; +@mixin animation-fill-mode ($modes...) { +// none | forwards | backwards | both + @include prefixer(animation-fill-mode, $modes, webkit moz spec); } - diff --git a/common/static/sass/bourbon/css3/_appearance.scss b/common/static/sass/bourbon/css3/_appearance.scss index 548767e..3eb16e4 100644 --- a/common/static/sass/bourbon/css3/_appearance.scss +++ b/common/static/sass/bourbon/css3/_appearance.scss @@ -1,7 +1,3 @@ @mixin appearance ($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - -ms-appearance: $value; - -o-appearance: $value; - appearance: $value; + @include prefixer(appearance, $value, webkit moz ms o spec); } diff --git a/common/static/sass/bourbon/css3/_backface-visibility.scss b/common/static/sass/bourbon/css3/_backface-visibility.scss new file mode 100644 index 0000000..1161fe6 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_background-image.scss b/common/static/sass/bourbon/css3/_background-image.scss index c23cef7..17016b9 100644 --- a/common/static/sass/bourbon/css3/_background-image.scss +++ b/common/static/sass/bourbon/css3/_background-image.scss @@ -3,42 +3,35 @@ // gradients, or for stringing multiple gradients together. //************************************************************************// -@mixin background-image( - $image-1 , $image-2: false, - $image-3: false, $image-4: false, - $image-5: false, $image-6: false, - $image-7: false, $image-8: false, - $image-9: false, $image-10: false -) { - $images: compact($image-1, $image-2, - $image-3, $image-4, - $image-5, $image-6, - $image-7, $image-8, - $image-9, $image-10); - - background-image: add-prefix($images, webkit); - background-image: add-prefix($images, moz); - background-image: add-prefix($images, ms); - background-image: add-prefix($images, o); - background-image: add-prefix($images); +@mixin background-image($images...) { + background-image: _add-prefix($images, webkit); + background-image: _add-prefix($images); } - -@function add-prefix($images, $vendor: false) { +@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); // Get type of gradient (linear || radial) - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) - - $gradient: render-gradients($gradient-args, $gradient-type, $vendor); + $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); @@ -47,11 +40,9 @@ @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); + //@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/common/static/sass/bourbon/css3/_background-size.scss b/common/static/sass/bourbon/css3/_background-size.scss deleted file mode 100644 index 4bba110..0000000 --- a/common/static/sass/bourbon/css3/_background-size.scss +++ /dev/null @@ -1,15 +0,0 @@ -@mixin background-size ($length-1, - $length-2: false, $length-3: false, - $length-4: false, $length-5: false, - $length-6: false, $length-7: false, - $length-8: false, $length-9: false) - { - $full: compact($length-1, $length-2, $length-3, $length-4, - $length-5, $length-6, $length-7, $length-8, $length-9); - - -webkit-background-size: $full; - -moz-background-size: $full; - -ms-background-size: $full; - -o-background-size: $full; - background-size: $full; -} diff --git a/common/static/sass/bourbon/css3/_background.scss b/common/static/sass/bourbon/css3/_background.scss new file mode 100644 index 0000000..766d5d3 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_border-image.scss b/common/static/sass/bourbon/css3/_border-image.scss index da4f20b..1fff212 100644 --- a/common/static/sass/bourbon/css3/_border-image.scss +++ b/common/static/sass/bourbon/css3/_border-image.scss @@ -1,45 +1,43 @@ @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); + -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: (); +@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") { - @for $i from 2 through length($images) { - $gradient-type: nth($images, 1); // Get type of gradient (linear || radial) - $gradient-args: nth($images, $i); // Get actual gradient (red, blue) - $border-image: render-gradients($gradient-args, $gradient-type, $vendor); - } + $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 { - @for $i from 1 through length($images) { - $type: type-of(nth($images, $i)); // Get type of variable - List or String + $type: type-of(nth($images, 1)); // Get type of variable - List or String - // If variable is a list - Gradient - @if $type == list { - $gradient-type: nth(nth($images, $i), 1); // Get type of gradient (linear || radial) - $gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue) - $border-image: render-gradients($gradient-args, $gradient-type, $vendor); - } + // 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); - // If variable is a string - Image or number - @else if ($type == string) or ($type == number) { + @for $i from 2 through length($images) { $border-image: append($border-image, nth($images, $i)); } } @@ -54,3 +52,4 @@ // @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/common/static/sass/bourbon/css3/_border-radius.scss b/common/static/sass/bourbon/css3/_border-radius.scss index f24389e..7c17190 100644 --- a/common/static/sass/bourbon/css3/_border-radius.scss +++ b/common/static/sass/bourbon/css3/_border-radius.scss @@ -1,63 +1,22 @@ -@mixin border-radius ($radii) { - -webkit-border-radius: $radii; - -moz-border-radius: $radii; - -ms-border-radius: $radii; - -o-border-radius: $radii; - border-radius: $radii; -} - -@mixin border-top-left-radius($radii) { - -webkit-border-top-left-radius: $radii; - -moz-border-top-left-radius: $radii; - -moz-border-radius-topleft: $radii; - -ms-border-top-left-radius: $radii; - -o-border-top-left-radius: $radii; - border-top-left-radius: $radii; -} - -@mixin border-top-right-radius($radii) { - -webkit-border-top-right-radius: $radii; - -moz-border-top-right-radius: $radii; - -moz-border-radius-topright: $radii; - -ms-border-top-right-radius: $radii; - -o-border-top-right-radius: $radii; - border-top-right-radius: $radii; -} - -@mixin border-bottom-left-radius($radii) { - -webkit-border-bottom-left-radius: $radii; - -moz-border-bottom-left-radius: $radii; - -moz-border-radius-bottomleft: $radii; - -ms-border-bottom-left-radius: $radii; - -o-border-bottom-left-radius: $radii; - border-bottom-left-radius: $radii; -} - -@mixin border-bottom-right-radius($radii) { - -webkit-border-bottom-right-radius: $radii; - -moz-border-bottom-right-radius: $radii; - -moz-border-radius-bottomright: $radii; - -ms-border-bottom-right-radius: $radii; - -o-border-bottom-right-radius: $radii; - border-bottom-right-radius: $radii; -} - +//************************************************************************// +// Shorthand Border-radius mixins +//************************************************************************// @mixin border-top-radius($radii) { - @include border-top-left-radius($radii); - @include border-top-right-radius($radii); -} - -@mixin border-right-radius($radii) { - @include border-top-right-radius($radii); - @include border-bottom-right-radius($radii); + @include prefixer(border-top-left-radius, $radii, spec); + @include prefixer(border-top-right-radius, $radii, spec); } @mixin border-bottom-radius($radii) { - @include border-bottom-left-radius($radii); - @include border-bottom-right-radius($radii); + @include prefixer(border-bottom-left-radius, $radii, spec); + @include prefixer(border-bottom-right-radius, $radii, spec); } @mixin border-left-radius($radii) { - @include border-top-left-radius($radii); - @include border-bottom-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/common/static/sass/bourbon/css3/_box-shadow.scss b/common/static/sass/bourbon/css3/_box-shadow.scss deleted file mode 100644 index 327b66d..0000000 --- a/common/static/sass/bourbon/css3/_box-shadow.scss +++ /dev/null @@ -1,14 +0,0 @@ -// Box-Shadow Mixin Requires Sass v3.1.1+ -@mixin box-shadow ($shadow-1, - $shadow-2: false, $shadow-3: false, - $shadow-4: false, $shadow-5: false, - $shadow-6: false, $shadow-7: false, - $shadow-8: false, $shadow-9: false) - { - $full: compact($shadow-1, $shadow-2, $shadow-3, $shadow-4, - $shadow-5, $shadow-6, $shadow-7, $shadow-8, $shadow-9); - - -webkit-box-shadow: $full; - -moz-box-shadow: $full; - box-shadow: $full; -} diff --git a/common/static/sass/bourbon/css3/_box-sizing.scss b/common/static/sass/bourbon/css3/_box-sizing.scss index d61523b..f07e1d4 100644 --- a/common/static/sass/bourbon/css3/_box-sizing.scss +++ b/common/static/sass/bourbon/css3/_box-sizing.scss @@ -1,6 +1,4 @@ @mixin box-sizing ($box) { // content-box | border-box | inherit - -webkit-box-sizing: $box; - -moz-box-sizing: $box; - box-sizing: $box; *behavior: url(/static/scripts/boxsizing.htc); + @include prefixer(box-sizing, $box, webkit moz spec); } diff --git a/common/static/sass/bourbon/css3/_columns.scss b/common/static/sass/bourbon/css3/_columns.scss index 2896c91..42274a4 100644 --- a/common/static/sass/bourbon/css3/_columns.scss +++ b/common/static/sass/bourbon/css3/_columns.scss @@ -1,67 +1,47 @@ @mixin columns($arg: auto) { // <column-count> || <column-width> - -webkit-columns: $arg; - -moz-columns: $arg; - columns: $arg; + @include prefixer(columns, $arg, webkit moz spec); } @mixin column-count($int: auto) { // auto || integer - -webkit-column-count: $int; - -moz-column-count: $int; - column-count: $int; + @include prefixer(column-count, $int, webkit moz spec); } @mixin column-gap($length: normal) { // normal || length - -webkit-column-gap: $length; - -moz-column-gap: $length; - column-gap: $length; + @include prefixer(column-gap, $length, webkit moz spec); } @mixin column-fill($arg: auto) { // auto || length - -webkit-columns-fill: $arg; - -moz-columns-fill: $arg; - columns-fill: $arg; + @include prefixer(columns-fill, $arg, webkit moz spec); } @mixin column-rule($arg) { // <border-width> || <border-style> || <color> - -webkit-column-rule: $arg; - -moz-column-rule: $arg; - column-rule: $arg; + @include prefixer(column-rule, $arg, webkit moz spec); } @mixin column-rule-color($color) { - -webkit-column-rule-color: $color; - -moz-column-rule-color: $color; - 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 - -webkit-column-rule-style: $style; - -moz-column-rule-style: $style; - column-rule-style: $style; + @include prefixer(column-rule-style, $style, webkit moz spec); } @mixin column-rule-width ($width: none) { - -webkit-column-rule-width: $width; - -moz-column-rule-width: $width; - column-rule-width: $width; + @include prefixer(column-rule-width, $width, webkit moz spec); } @mixin column-span($arg: none) { // none || all - -webkit-column-span: $arg; - -moz-column-span: $arg; - column-span: $arg; + @include prefixer(column-span, $arg, webkit moz spec); } @mixin column-width($length: auto) { // auto || length - -webkit-column-width: $length; - -moz-column-width: $length; - column-width: $length; + @include prefixer(column-width, $length, webkit moz spec); } diff --git a/common/static/sass/bourbon/css3/_flex-box.scss b/common/static/sass/bourbon/css3/_flex-box.scss index 44c1dfd..3e741e6 100644 --- a/common/static/sass/bourbon/css3/_flex-box.scss +++ b/common/static/sass/bourbon/css3/_flex-box.scss @@ -16,52 +16,37 @@ @mixin box-orient($orient: inline-axis) { // horizontal|vertical|inline-axis|block-axis|inherit - -webkit-box-orient: $orient; - -moz-box-orient: $orient; - box-orient: $orient; + @include prefixer(box-orient, $orient, webkit moz spec); } @mixin box-pack($pack: start) { // start|end|center|justify - -webkit-box-pack: $pack; - -moz-box-pack: $pack; - box-pack: $pack; + @include prefixer(box-pack, $pack, webkit moz spec); } @mixin box-align($align: stretch) { // start|end|center|baseline|stretch - -webkit-box-align: $align; - -moz-box-align: $align; - box-align: $align; + @include prefixer(box-align, $align, webkit moz spec); } @mixin box-direction($direction: normal) { // normal|reverse|inherit - -webkit-box-direction: $direction; - -moz-box-direction: $direction; - box-direction: $direction; + @include prefixer(box-direction, $direction, webkit moz spec); } + @mixin box-lines($lines: single) { // single|multiple - -webkit-box-lines: $lines; - -moz-box-lines: $lines; - box-lines: $lines; + @include prefixer(box-lines, $lines, webkit moz spec); } -@mixin box-ordinal-group($integer: 1) { - -webkit-box-ordinal-group: $integer; - -moz-box-ordinal-group: $integer; - box-ordinal-group: $integer; +@mixin box-ordinal-group($int: 1) { + @include prefixer(box-ordinal-group, $int, webkit moz spec); } @mixin box-flex($value: 0.0) { - -webkit-box-flex: $value; - -moz-box-flex: $value; - box-flex: $value; + @include prefixer(box-flex, $value, webkit moz spec); } -@mixin box-flex-group($integer: 1) { - -webkit-box-flex-group: $integer; - -moz-box-flex-group: $integer; - box-flex-group: $integer; +@mixin box-flex-group($int: 1) { + @include prefixer(box-flex-group, $int, webkit moz spec); } diff --git a/common/static/sass/bourbon/css3/_font-face.scss b/common/static/sass/bourbon/css3/_font-face.scss new file mode 100644 index 0000000..029ee8f --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_hidpi-media-query.scss b/common/static/sass/bourbon/css3/_hidpi-media-query.scss new file mode 100644 index 0000000..111e400 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_image-rendering.scss b/common/static/sass/bourbon/css3/_image-rendering.scss new file mode 100644 index 0000000..abc7ee1 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_inline-block.scss b/common/static/sass/bourbon/css3/_inline-block.scss index d79a13c..3272a00 100644 --- a/common/static/sass/bourbon/css3/_inline-block.scss +++ b/common/static/sass/bourbon/css3/_inline-block.scss @@ -1,7 +1,5 @@ // Legacy support for inline-block in IE7 (maybe IE6) @mixin inline-block { - display: -moz-inline-box; - -moz-box-orient: vertical; display: inline-block; vertical-align: baseline; zoom: 1; diff --git a/common/static/sass/bourbon/css3/_keyframes.scss b/common/static/sass/bourbon/css3/_keyframes.scss new file mode 100644 index 0000000..dca61f2 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_linear-gradient.scss b/common/static/sass/bourbon/css3/_linear-gradient.scss index e366a29..d5b687b 100644 --- a/common/static/sass/bourbon/css3/_linear-gradient.scss +++ b/common/static/sass/bourbon/css3/_linear-gradient.scss @@ -3,15 +3,25 @@ $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: top; // Default position + $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); @@ -25,17 +35,7 @@ } background-color: $fallback-color; - background-image: deprecated-webkit-gradient(linear, $full); // Safari <= 5.0 - background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome - background-image: -moz-linear-gradient($pos, $full); - background-image: -ms-linear-gradient($pos, $full); - background-image: -o-linear-gradient($pos, $full); - background-image: unquote("linear-gradient(#{$pos}, #{$full})"); + 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})"); } - - -// Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well. -// @include linear-gradient(#1e5799, #2989d8); -// @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8); -// @include linear-gradient(top, #1e5799 0%, #2989d8 50%); -// @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); diff --git a/common/static/sass/bourbon/css3/_perspective.scss b/common/static/sass/bourbon/css3/_perspective.scss new file mode 100644 index 0000000..0e4deb8 --- /dev/null +++ b/common/static/sass/bourbon/css3/_perspective.scss @@ -0,0 +1,8 @@ +@mixin perspective($depth: none) { + // none | <length> + @include prefixer(perspective, $depth, webkit moz spec); +} + +@mixin perspective-origin($value: 50% 50%) { + @include prefixer(perspective-origin, $value, webkit moz spec); +} diff --git a/common/static/sass/bourbon/css3/_placeholder.scss b/common/static/sass/bourbon/css3/_placeholder.scss new file mode 100644 index 0000000..22fd92b --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/css3/_radial-gradient.scss b/common/static/sass/bourbon/css3/_radial-gradient.scss index e83cab5..e87b45a 100644 --- a/common/static/sass/bourbon/css3/_radial-gradient.scss +++ b/common/static/sass/bourbon/css3/_radial-gradient.scss @@ -1,31 +1,44 @@ // Requires Sass 3.1+ -@mixin radial-gradient($pos, $shape-size, - $G1, $G2, +@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 - $fallback-color: nth($G1, 1); + $first-color: nth($full, 1); + $fallback-color: nth($first-color, 1); - // If $fallback is a color use that color as the fallback color @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, $full); // Safari <= 5.0 - background-image: -webkit-radial-gradient($pos, $shape-size, $full); - background-image: -moz-radial-gradient($pos, $shape-size, $full); - background-image: -ms-radial-gradient($pos, $shape-size, $full); - background-image: -o-radial-gradient($pos, $shape-size, $full); - background-image: unquote("radial-gradient(#{$pos}, #{$shape-size}, #{$full})"); + 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})"); } - -// Usage: Gradient position and shape-size are required. Color stops are optional. -// @include radial-gradient(50% 50%, circle cover, #1e5799, #efefef); -// @include radial-gradient(50% 50%, circle cover, #eee 10%, #1e5799 30%, #efefef); diff --git a/common/static/sass/bourbon/css3/_transform.scss b/common/static/sass/bourbon/css3/_transform.scss index 8d19e8b..8cc3596 100644 --- a/common/static/sass/bourbon/css3/_transform.scss +++ b/common/static/sass/bourbon/css3/_transform.scss @@ -1,19 +1,15 @@ @mixin transform($property: none) { // none | <transform-function> - -webkit-transform: $property; - -moz-transform: $property; - -ms-transform: $property; - -o-transform: $property; - transform: $property; + @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 - -webkit-transform-origin: $axes; - -moz-transform-origin: $axes; - -ms-transform-origin: $axes; - -o-transform-origin: $axes; - transform-origin: $axes; + @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/common/static/sass/bourbon/css3/_transition.scss b/common/static/sass/bourbon/css3/_transition.scss index 058dbe0..180cde6 100644 --- a/common/static/sass/bourbon/css3/_transition.scss +++ b/common/static/sass/bourbon/css3/_transition.scss @@ -3,102 +3,32 @@ // @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s)); // @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s)); -@mixin transition ($property: all, $duration: 0.15s, $timing-function: ease-out, $delay: 0) { - - // Detect # of args passed into each variable - $length-of-property: length($property); - $length-of-duration: length($duration); - $length-of-timing-function: length($timing-function); - $length-of-delay: length($delay); - - @if $length-of-property > 1 { - @include transition-property(zip($property)); } - @else { - @include transition-property( $property); - } - - @if $length-of-duration > 1 { - @include transition-duration(zip($duration)); } - @else { - @include transition-duration( $duration); +@mixin transition ($properties...) { + @if length($properties) >= 1 { + @include prefixer(transition, $properties, webkit moz spec); } - @if $length-of-timing-function > 1 { - @include transition-timing-function(zip($timing-function)); } @else { - @include transition-timing-function( $timing-function); - } - - @if $length-of-delay > 1 { - @include transition-delay(zip($delay)); } - @else { - @include transition-delay( $delay); + $properties: all 0.15s ease-out 0; + @include prefixer(transition, $properties, webkit moz spec); } } - -@mixin transition-property ($prop-1: all, - $prop-2: false, $prop-3: false, - $prop-4: false, $prop-5: false, - $prop-6: false, $prop-7: false, - $prop-8: false, $prop-9: false) - { - $full: compact($prop-1, $prop-2, $prop-3, $prop-4, $prop-5, - $prop-6, $prop-7, $prop-8, $prop-9); - - -webkit-transition-property: $full; - -moz-transition-property: $full; - -ms-transition-property: $full; - -o-transition-property: $full; - transition-property: $full; +@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 ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, - $time-6, $time-7, $time-8, $time-9); - - -webkit-transition-duration: $full; - -moz-transition-duration: $full; - -ms-transition-duration: $full; - -o-transition-duration: $full; - transition-duration: $full; +@mixin transition-duration ($times...) { + @include prefixer(transition-duration, $times, webkit moz spec); } -@mixin transition-timing-function ($motion-1: ease, - $motion-2: false, $motion-3: false, - $motion-4: false, $motion-5: false, - $motion-6: false, $motion-7: false, - $motion-8: false, $motion-9: false) - { - $full: compact($motion-1, $motion-2, $motion-3, $motion-4, $motion-5, - $motion-6, $motion-7, $motion-8, $motion-9); - +@mixin transition-timing-function ($motions...) { // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() - -webkit-transition-timing-function: $full; - -moz-transition-timing-function: $full; - -ms-transition-timing-function: $full; - -o-transition-timing-function: $full; - transition-timing-function: $full; + @include prefixer(transition-timing-function, $motions, webkit moz spec); } -@mixin transition-delay ($time-1: 0, - $time-2: false, $time-3: false, - $time-4: false, $time-5: false, - $time-6: false, $time-7: false, - $time-8: false, $time-9: false) - { - $full: compact($time-1, $time-2, $time-3, $time-4, $time-5, - $time-6, $time-7, $time-8, $time-9); - - -webkit-transition-delay: $full; - -moz-transition-delay: $full; - -ms-transition-delay: $full; - -o-transition-delay: $full; - transition-delay: $full; +@mixin transition-delay ($times...) { + @include prefixer(transition-delay, $times, webkit moz spec); } - diff --git a/common/static/sass/bourbon/css3/_user-select.scss b/common/static/sass/bourbon/css3/_user-select.scss index d5f5749..1380aa8 100644 --- a/common/static/sass/bourbon/css3/_user-select.scss +++ b/common/static/sass/bourbon/css3/_user-select.scss @@ -1,6 +1,3 @@ @mixin user-select($arg: none) { - -webkit-user-select: $arg; - -moz-user-select: $arg; - -ms-user-select: $arg; - user-select: $arg; + @include prefixer(user-select, $arg, webkit moz ms spec); } diff --git a/common/static/sass/bourbon/functions/_compact.scss b/common/static/sass/bourbon/functions/_compact.scss new file mode 100644 index 0000000..871500e --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss b/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss deleted file mode 100644 index 1322f6f..0000000 --- a/common/static/sass/bourbon/functions/_deprecated-webkit-gradient.scss +++ /dev/null @@ -1,36 +0,0 @@ -// Render Deprecated Webkit Gradient - Linear || Radial -//************************************************************************// -@function deprecated-webkit-gradient($type, $full) { - $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 $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, center center, 0, center center, 460, $gradient-list); - } - @else if $type == linear { - $gradient: -webkit-gradient(linear, left top, left bottom, $gradient-list); - } - @return $gradient; -} diff --git a/common/static/sass/bourbon/functions/_flex-grid.scss b/common/static/sass/bourbon/functions/_flex-grid.scss index 707f994..3bbd866 100644 --- a/common/static/sass/bourbon/functions/_flex-grid.scss +++ b/common/static/sass/bourbon/functions/_flex-grid.scss @@ -14,13 +14,17 @@ // 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 / 1020px) = 30.882353%; -// margin-left: flex-gutter(); // returns (25px / 1020px) = 2.45098%; +// 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%; @@ -32,4 +36,4 @@ // float: left; // width: flex-grid(2, 4); // returns (145px / 315px) = 46.031746%; // } -// } +// } \ No newline at end of file diff --git a/common/static/sass/bourbon/functions/_linear-gradient.scss b/common/static/sass/bourbon/functions/_linear-gradient.scss index 3b10ca8..c8454d8 100644 --- a/common/static/sass/bourbon/functions/_linear-gradient.scss +++ b/common/static/sass/bourbon/functions/_linear-gradient.scss @@ -1,23 +1,13 @@ -@function linear-gradient($pos: top, $G1: false, $G2: false, - $G3: false, $G4: false, - $G5: false, $G6: false, - $G7: false, $G8: false, - $G9: false, $G10: false) { - - // Detect what type of value exists in $pos +@function linear-gradient($pos, $gradients...) { + $type: linear; $pos-type: type-of(nth($pos, 1)); - // If $pos is missing from mixin, reassign vars and add default position + // if $pos doesn't exist, fix $gradient @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: top; // Default position + $gradients: zip($pos $gradients); + $pos: false; } - $type: linear; - $gradient: compact($pos, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - $type-gradient: append($type, $gradient, comma); - + $type-gradient: $type, $pos, $gradients; @return $type-gradient; } - diff --git a/common/static/sass/bourbon/functions/_px-to-em.scss b/common/static/sass/bourbon/functions/_px-to-em.scss new file mode 100644 index 0000000..2eb1031 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/functions/_radial-gradient.scss b/common/static/sass/bourbon/functions/_radial-gradient.scss index 3d5461a..7558406 100644 --- a/common/static/sass/bourbon/functions/_radial-gradient.scss +++ b/common/static/sass/bourbon/functions/_radial-gradient.scss @@ -1,15 +1,23 @@ // This function is required and used by the background-image mixin. -@function radial-gradient($pos, $shape-size, - $G1, $G2, +@function radial-gradient($G1, $G2, $G3: false, $G4: false, $G5: false, $G6: false, $G7: false, $G8: false, - $G9: false, $G10: 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($pos, $shape-size, $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10); - $type-gradient: append($type, $gradient, comma); + $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/common/static/sass/bourbon/functions/_render-gradients.scss b/common/static/sass/bourbon/functions/_render-gradients.scss deleted file mode 100644 index fe7c799..0000000 --- a/common/static/sass/bourbon/functions/_render-gradients.scss +++ /dev/null @@ -1,14 +0,0 @@ -// User for linear and radial gradients within background-image or border-image properties - -@function render-gradients($gradients, $gradient-type, $vendor: false) { - $vendor-gradients: false; - @if $vendor { - $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient($gradients); - } - - @else if $vendor == false { - $vendor-gradients: "#{$gradient-type}-gradient(#{$gradients})"; - $vendor-gradients: unquote($vendor-gradients); - } - @return $vendor-gradients; -} diff --git a/common/static/sass/bourbon/functions/_transition-property-name.scss b/common/static/sass/bourbon/functions/_transition-property-name.scss new file mode 100644 index 0000000..54cd422 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss b/common/static/sass/bourbon/helpers/_deprecated-webkit-gradient.scss new file mode 100644 index 0000000..cd17e28 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss b/common/static/sass/bourbon/helpers/_gradient-positions-parser.scss new file mode 100644 index 0000000..07d30b6 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_linear-positions-parser.scss b/common/static/sass/bourbon/helpers/_linear-positions-parser.scss new file mode 100644 index 0000000..d26383e --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_radial-arg-parser.scss b/common/static/sass/bourbon/helpers/_radial-arg-parser.scss new file mode 100644 index 0000000..3466695 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_radial-positions-parser.scss b/common/static/sass/bourbon/helpers/_radial-positions-parser.scss new file mode 100644 index 0000000..6a5b477 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_render-gradients.scss b/common/static/sass/bourbon/helpers/_render-gradients.scss new file mode 100644 index 0000000..5765676 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/helpers/_shape-size-stripper.scss b/common/static/sass/bourbon/helpers/_shape-size-stripper.scss new file mode 100644 index 0000000..ee5eda4 --- /dev/null +++ b/common/static/sass/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/common/static/sass/bourbon/lib/bourbon.rb b/common/static/sass/bourbon/lib/bourbon.rb deleted file mode 100644 index 1635be8..0000000 --- a/common/static/sass/bourbon/lib/bourbon.rb +++ /dev/null @@ -1,19 +0,0 @@ -require "bourbon/generator" - -module Bourbon - if defined?(Rails) - class Engine < ::Rails::Engine - require 'bourbon/engine' - end - - module Rails - class Railtie < ::Rails::Railtie - rake_tasks do - load "tasks/install.rake" - end - end - end - end -end - -require File.join(File.dirname(__FILE__), "/bourbon/sass_extensions") diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb deleted file mode 100644 index ad56720..0000000 --- a/common/static/sass/bourbon/lib/bourbon/sass_extensions.rb +++ /dev/null @@ -1,6 +0,0 @@ -module Bourbon::SassExtensions -end - -require "sass" - -require File.join(File.dirname(__FILE__), "/sass_extensions/functions") diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb deleted file mode 100644 index daa8776..0000000 --- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions.rb +++ /dev/null @@ -1,13 +0,0 @@ -module Bourbon::SassExtensions::Functions -end - -require File.join(File.dirname(__FILE__), "/functions/compact") - -module Sass::Script::Functions - include Bourbon::SassExtensions::Functions::Compact -end - -# Wierd that this has to be re-included to pick up sub-modules. Ruby bug? -class Sass::Script::Functions::EvaluationContext - include Sass::Script::Functions -end diff --git a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb b/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb deleted file mode 100644 index 5192e92..0000000 --- a/common/static/sass/bourbon/lib/bourbon/sass_extensions/functions/compact.rb +++ /dev/null @@ -1,13 +0,0 @@ -# Compact function pulled from compass -module Bourbon::SassExtensions::Functions::Compact - - def compact(*args) - sep = :comma - if args.size == 1 && args.first.is_a?(Sass::Script::List) - args = args.first.value - sep = args.first.separator - end - Sass::Script::List.new(args.reject{|a| !a.to_bool}, sep) - end - -end diff --git a/rakelib/assets.rake b/rakelib/assets.rake index 5c8abc1..ccf9121 100644 --- a/rakelib/assets.rake +++ b/rakelib/assets.rake @@ -43,7 +43,6 @@ def sass_cmd(watch=false, debug=false) "sass #{debug ? '--debug-info' : '--style compressed'} " + "--load-path #{sass_load_paths.join(' ')} " + - "--require ./common/static/sass/bourbon/lib/bourbon.rb " + "#{watch ? '--watch' : '--update'} -E utf-8 #{sass_watch_paths.join(' ')}" end -- libgit2 0.26.0