+// Bourbon 3.2.4
+// http://bourbon.io
+// Copyright 2011-2015 thoughtbot, inc.
+// MIT License
+
// Settings
@import "settings/prefixer";
@import "settings/px-to-em";
+@import "settings/asset-pipeline";
// Custom Helpers
@import "helpers/gradient-positions-parser";
@import "helpers/shape-size-stripper";
// Custom Functions
+@import "functions/color-lightness";
@import "functions/flex-grid";
-@import "functions/grid-width";
@import "functions/golden-ratio";
+@import "functions/grid-width";
@import "functions/linear-gradient";
@import "functions/modular-scale";
@import "functions/px-to-em";
+@import "functions/px-to-rem";
@import "functions/radial-gradient";
@import "functions/strip-units";
@import "functions/tint-shade";
@import "css3/box-sizing";
@import "css3/calc";
@import "css3/columns";
+@import "css3/filter";
@import "css3/flex-box";
@import "css3/font-face";
+@import "css3/font-feature-settings";
@import "css3/hyphens";
@import "css3/hidpi-media-query";
@import "css3/image-rendering";
@import "addons/ellipsis";
@import "addons/font-family";
@import "addons/hide-text";
-//@import "addons/html5-input-types";
+@import "addons/html5-input-types";
@import "addons/position";
@import "addons/prefixer";
-@import "addons/rem";
@import "addons/retina-image";
@import "addons/size";
@import "addons/timing-functions";
@import "addons/triangle";
+@import "addons/word-wrap";
// Soon to be deprecated Mixins
@import "bourbon-deprecated-upcoming";
-@mixin button ($style: simple, $base-color: #4294f0) {
+@mixin button ($style: simple, $base-color: #4294f0, $text-size: inherit, $padding: 7px 18px) {
- @if type-of($style) == color {
+ @if type-of($style) == string and type-of($base-color) == color {
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == string and type-of($base-color) == number {
+ $padding: $text-size;
+ $text-size: $base-color;
+ $base-color: #4294f0;
+
+ @if $padding == inherit {
+ $padding: 7px 18px;
+ }
+
+ @include buttonstyle($style, $base-color, $text-size, $padding);
+ }
+
+ @if type-of($style) == color and type-of($base-color) == color {
$base-color: $style;
$style: simple;
+ @include buttonstyle($style, $base-color, $text-size, $padding);
}
- // Grayscale button
- @if $base-color == grayscale($base-color) {
- @if $style == simple {
- @include simple($base-color, $grayscale: true);
- }
+ @if type-of($style) == color and type-of($base-color) == number {
+ $padding: $text-size;
+ $text-size: $base-color;
+ $base-color: $style;
+ $style: simple;
- @else if $style == shiny {
- @include shiny($base-color, $grayscale: true);
+ @if $padding == inherit {
+ $padding: 7px 18px;
}
- @else if $style == pill {
- @include pill($base-color, $grayscale: true);
- }
+ @include buttonstyle($style, $base-color, $text-size, $padding);
}
- // Colored button
- @else {
- @if $style == simple {
- @include simple($base-color);
- }
+ @if type-of($style) == number {
+ $padding: $base-color;
+ $text-size: $style;
+ $base-color: #4294f0;
+ $style: simple;
- @else if $style == shiny {
- @include shiny($base-color);
+ @if $padding == #4294f0 {
+ $padding: 7px 18px;
}
- @else if $style == pill {
- @include pill($base-color);
- }
+ @include buttonstyle($style, $base-color, $text-size, $padding);
}
&:disabled {
}
+// Selector Style Button
+//************************************************************************//
+@mixin buttonstyle($type, $b-color, $t-size, $pad) {
+ // Grayscale button
+ @if $type == simple and $b-color == grayscale($b-color) {
+ @include simple($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == shiny and $b-color == grayscale($b-color) {
+ @include shiny($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == pill and $b-color == grayscale($b-color) {
+ @include pill($b-color, true, $t-size, $pad);
+ }
+
+ @if $type == flat and $b-color == grayscale($b-color) {
+ @include flat($b-color, true, $t-size, $pad);
+ }
+
+ // Colored button
+ @if $type == simple {
+ @include simple($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == shiny {
+ @include shiny($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == pill {
+ @include pill($b-color, false, $t-size, $pad);
+ }
+
+ @else if $type == flat {
+ @include flat($b-color, false, $t-size, $pad);
+ }
+}
+
+
// Simple Button
//************************************************************************//
-@mixin simple($base-color, $grayscale: false) {
+@mixin simple($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$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% {
+ @if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
- font-size: inherit;
+ font-size: $textsize;
font-weight: bold;
@include linear-gradient ($base-color, $stop-gradient);
- padding: 7px 18px;
+ padding: $padding;
text-decoration: none;
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
@include linear-gradient ($base-color-hover, $stop-gradient-hover);
}
- &:active:not(:disabled) {
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
$border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
$inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
}
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;
+ box-shadow: inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active;
}
}
// Shiny Button
//************************************************************************//
-@mixin shiny($base-color, $grayscale: false) {
+@mixin shiny($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$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);
$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% {
+ @if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
- font-size: inherit;
+ font-size: $textsize;
font-weight: bold;
@include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
- padding: 8px 20px;
+ padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
$fourth-stop-hover 100%);
}
- &:active:not(:disabled) {
+ &:active:not(:disabled),
+ &:focus: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;
+ box-shadow: inset 0 0 20px 0 $inset-shadow-active;
}
}
// Pill Button
//************************************************************************//
-@mixin pill($base-color, $grayscale: false) {
+@mixin pill($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
$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%);
$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% {
+ @if is-light($base-color) {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
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;
+ box-shadow: inset 0 1px 0 0 $inset-shadow;
color: $color;
display: inline-block;
- font-size: inherit;
+ font-size: $textsize;
font-weight: normal;
line-height: 1;
@include linear-gradient ($base-color, $stop-gradient);
- padding: 5px 16px;
+ padding: $padding;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 1px $text-shadow;
background-clip: padding-box;
}
- &:active:not(:disabled) {
+ &:active:not(:disabled),
+ &:focus: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%);
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;
+ box-shadow: inset 0 0 6px 3px $inset-shadow-active;
text-shadow: 0 -1px 1px $text-shadow-active;
}
}
+
+
+
+// Flat Button
+//************************************************************************//
+@mixin flat($base-color, $grayscale: false, $textsize: inherit, $padding: 7px 18px) {
+ $color: hsl(0, 0, 100%);
+
+ @if is-light($base-color) {
+ $color: hsl(0, 0, 20%);
+ }
+
+ background-color: $base-color;
+ border-radius: 3px;
+ border: none;
+ color: $color;
+ display: inline-block;
+ font-size: inherit;
+ font-weight: bold;
+ padding: 7px 18px;
+ text-decoration: none;
+ background-clip: padding-box;
+
+ &:hover:not(:disabled){
+ $base-color-hover: adjust-color($base-color, $saturation: 4%, $lightness: 5%);
+
+ @if $grayscale == true {
+ $base-color-hover: grayscale($base-color-hover);
+ }
+
+ background-color: $base-color-hover;
+ cursor: pointer;
+ }
+
+ &:active:not(:disabled),
+ &:focus:not(:disabled) {
+ $base-color-active: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+
+ @if $grayscale == true {
+ $base-color-active: grayscale($base-color-active);
+ }
+
+ background-color: $base-color-active;
+ cursor: pointer;
+ }
+}
$right: $pre + "-right" + if($suf, "-#{$suf}", "");
$all: $pre + if($suf, "-#{$suf}", "");
- // Get list inside $vals (is there a better way?)
- @each $val in $vals { $vals: $val; }
-
$vals: collapse-directionals($vals);
@if contains-falsy($vals) {
}
@mixin margin($vals...) {
- @include directional-property(margin, false, $vals);
+ @include directional-property(margin, false, $vals...);
}
@mixin padding($vals...) {
- @include directional-property(padding, false, $vals);
+ @include directional-property(padding, false, $vals...);
}
@mixin border-style($vals...) {
- @include directional-property(border, style, $vals);
+ @include directional-property(border, style, $vals...);
}
@mixin border-color($vals...) {
- @include directional-property(border, color, $vals);
+ @include directional-property(border, color, $vals...);
}
@mixin border-width($vals...) {
- @include directional-property(border, width, $vals);
+ @include directional-property(border, width, $vals...);
}
$unquoted-inputs-list: ();
@each $input-type in $inputs-list {
- $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma) !global;
+ $unquoted-inputs-list: append($unquoted-inputs-list, unquote($input-type), comma);
}
$all-text-inputs: $unquoted-inputs-list;
$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) !global;
+ $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) !global;
+ $all-text-inputs-focus: append($all-text-inputs-focus, $input-type-focus, comma);
}
// You must use interpolation on the variable:
position: $position;
- @if ($top and $top == auto) or (type-of($top) == number and not unitless($top)) {
+ @if ($top and $top == auto) or (type-of($top) == number and not(unitless($top))) {
top: $top;
}
- @if ($right and $right == auto) or (type-of($right) == number and not unitless($right)) {
+ @if ($right and $right == auto) or (type-of($right) == number and not(unitless($right))) {
right: $right;
}
- @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not unitless($bottom)) {
+ @if ($bottom and $bottom == auto) or (type-of($bottom) == number and not(unitless($bottom))) {
bottom: $bottom;
}
- @if ($left and $left == auto) or (type-of($left) == number and not unitless($left)) {
+ @if ($left and $left == auto) or (type-of($left) == number and not(unitless($left))) {
left: $left;
}
}
+++ /dev/null
-@mixin rem($property, $size, $base: $em-base) {
- @if not unitless($base) {
- $base: strip-units($base);
- }
-
- $unitless_values: ();
- @each $num in $size {
- @if not unitless($num) {
- @if unit($num) == "em" {
- $num: $num * $base;
- }
-
- $num: strip-units($num);
- }
-
- $unitless_values: append($unitless_values, $num);
- }
- $size: $unitless_values;
-
- $pixel_values: ();
- $rem_values: ();
- @each $value in $pxval {
- $pixel_value: $value * 1px;
- $pixel_values: append($pixel_values, $pixel_value);
-
- $rem_value: ($value / $base) * 1rem;
- $rem_values: append($rem_values, $rem_value);
- }
-
- #{$property}: $pixel_values;
- #{$property}: $rem_values;
-}
-
-@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
+@mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
@if $asset-pipeline {
background-image: image-url("#{$filename}.#{$extension}");
}
// 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
+// Timing functions are the same as demo'ed here: http://jqueryui.com/resources/demos/effect/easing.html
// EASE IN
$ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
height: 0;
width: 0;
+ $width: nth($size, 1);
+ $height: nth($size, length($size));
+
+ $foreground-color: nth($color, 1);
+ $background-color: transparent !default;
+ @if (length($color) == 2) {
+ $background-color: nth($color, 2);
+ }
+
@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
- border-color: transparent;
- border-style: solid;
- border-width: $size / 2;
+
+ $width: $width / 2;
+ $height: if(length($size) > 1, $height, $height/2);
@if $direction == up {
- border-bottom-color: $color;
+ border-left: $width solid $background-color;
+ border-right: $width solid $background-color;
+ border-bottom: $height solid $foreground-color;
} @else if $direction == right {
- border-left-color: $color;
+ border-top: $width solid $background-color;
+ border-bottom: $width solid $background-color;
+ border-left: $height solid $foreground-color;
} @else if $direction == down {
- border-top-color: $color;
+ border-left: $width solid $background-color;
+ border-right: $width solid $background-color;
+ border-top: $height solid $foreground-color;
} @else if $direction == left {
- border-right-color: $color;
+ border-top: $width solid $background-color;
+ border-bottom: $width solid $background-color;
+ border-right: $height solid $foreground-color;
}
}
@else if ($direction == up-right) or ($direction == up-left) {
- border-top: $size solid $color;
+ border-top: $height solid $foreground-color;
@if $direction == up-right {
- border-left: $size solid transparent;
+ border-left: $width solid $background-color;
} @else if $direction == up-left {
- border-right: $size solid transparent;
+ border-right: $width solid $background-color;
}
}
@else if ($direction == down-right) or ($direction == down-left) {
- border-bottom: $size solid $color;
+ border-bottom: $height solid $foreground-color;
@if $direction == down-right {
- border-left: $size solid transparent;
+ border-left: $width solid $background-color;
} @else if $direction == down-left {
- border-right: $size solid transparent;
+ border-right: $width solid $background-color;
}
}
+
+ @else if ($direction == inset-up) {
+ border-width: $height $width;
+ border-style: solid;
+ border-color: $background-color $background-color $foreground-color;
+ }
+
+ @else if ($direction == inset-down) {
+ border-width: $height $width;
+ border-style: solid;
+ border-color: $foreground-color $background-color $background-color;
+ }
+
+ @else if ($direction == inset-right) {
+ border-width: $width $height;
+ border-style: solid;
+ border-color: $background-color $background-color $background-color $foreground-color;
+ }
+
+ @else if ($direction == inset-left) {
+ border-width: $width $height;
+ border-style: solid;
+ border-color: $background-color $foreground-color $background-color $background-color;
+ }
}
--- /dev/null
+@mixin word-wrap($wrap: break-word) {
+ word-wrap: $wrap;
+
+ @if $wrap == break-word {
+ overflow-wrap: break-word;
+ word-break: break-all;
+ }
+}
@mixin column-fill($arg: auto) {
// auto || length
- @include prefixer(columns-fill, $arg, webkit moz spec);
+ @include prefixer(column-fill, $arg, webkit moz spec);
}
@mixin column-rule($arg) {
--- /dev/null
+@mixin filter($function: none) {
+ // <filter-function> [<filter-function]* | none
+ @include prefixer(filter, $function, webkit spec);
+}
+
display: flex;
}
- @elseif $value == "inline-flex" {
+ @else if $value == "inline-flex" {
display: -webkit-inline-box;
display: -moz-inline-box;
display: inline-box;
$value-2009: horizontal;
}
- @elseif $value == "row-reverse" {
+ @else if $value == "row-reverse" {
$value-2009: horizontal;
$direction: reverse;
}
- @elseif $value == column {
+ @else if $value == column {
$value-2009: vertical;
}
- @elseif $value == "column-reverse" {
+ @else if $value == "column-reverse" {
$value-2009: vertical;
$direction: reverse;
}
$alt-value: single;
}
- @elseif $value == wrap {
+ @else if $value == wrap {
$alt-value: multiple;
}
- @elseif $value == "wrap-reverse" {
+ @else if $value == "wrap-reverse" {
$alt-value: multiple;
}
$alt-value: start;
}
- @elseif $value == "flex-end" {
+ @else if $value == "flex-end" {
$alt-value: end;
}
- @elseif $value == "space-between" {
+ @else if $value == "space-between" {
$alt-value: justify;
}
- @elseif $value == "space-around" {
+ @else if $value == "space-around" {
$alt-value: center;
}
$alt-value: start;
}
- @elseif $value == "flex-end" {
+ @else if $value == "flex-end" {
$alt-value: end;
}
$value-2011: start;
}
- @elseif $value == "flex-end" {
+ @else if $value == "flex-end" {
$value-2011: end;
}
$value-2011: start;
}
- @elseif $value == "flex-end" {
+ @else if $value == "flex-end" {
$value-2011: end;
}
- @elseif $value == "space-between" {
+ @else if $value == "space-between" {
$value-2011: justify;
}
- @elseif $value == "space-around" {
+ @else if $value == "space-around" {
$value-2011: distribute;
}
// 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 ) {
+@mixin font-face($font-family, $file-path, $weight: normal, $style: normal, $asset-pipeline: $asset-pipeline) {
@font-face {
font-family: $font-family;
font-weight: $weight;
--- /dev/null
+// Font feature settings mixin and property default.
+// Examples: @include font-feature-settings("liga");
+// @include font-feature-settings("lnum" false);
+// @include font-feature-settings("pnum" 1, "kern" 0);
+// @include font-feature-settings("ss01", "ss02");
+
+@mixin font-feature-settings($settings...) {
+ @if length($settings) == 0 { $settings: none; }
+ @include prefixer(font-feature-settings, $settings, webkit moz ms spec);
+}
\ No newline at end of file
@mixin image-rendering ($mode:auto) {
@if ($mode == crisp-edges) {
+ -ms-interpolation-mode: nearest-neighbor; // IE8+
image-rendering: -moz-crisp-edges;
image-rendering: -o-crisp-edges;
image-rendering: -webkit-optimize-contrast;
@content;
}
}
- @if $original-prefix-for-spec {
- @include disable-prefix-for-all();
- $prefix-for-spec: true;
- // Chrome supports the standard keyframes syntax, but not the standard transform syntax
- $prefix-for-webkit: 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;
+
+ @if $original-prefix-for-spec {
+ @keyframes #{$name} {
+ @content;
+ }
+ }
}
-$placeholders: '-webkit-input-placeholder',
- '-moz-placeholder',
- '-ms-input-placeholder';
-
@mixin placeholder {
+ $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input";
@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;
- }
+ &:#{$placeholder}-placeholder {
+ @content;
}
}
}
// @include transition-property (transform, opacity);
@mixin transition ($properties...) {
- @if length($properties) >= 1 {
- @include prefixer(transition, $properties, webkit moz spec);
+ // Fix for vendor-prefix transform property
+ $needs-prefixes: false;
+ $webkit: ();
+ $moz: ();
+ $spec: ();
+
+ // Create lists for vendor-prefixed transform
+ @each $list in $properties {
+ @if nth($list, 1) == "transform" {
+ $needs-prefixes: true;
+ $list1: -webkit-transform;
+ $list2: -moz-transform;
+ $list3: ();
+
+ @each $var in $list {
+ $list3: join($list3, $var);
+
+ @if $var != "transform" {
+ $list1: join($list1, $var);
+ $list2: join($list2, $var);
+ }
+ }
+
+ $webkit: append($webkit, $list1);
+ $moz: append($moz, $list2);
+ $spec: append($spec, $list3);
+ }
+
+ // Create lists for non-prefixed transition properties
+ @else {
+ $webkit: append($webkit, $list, comma);
+ $moz: append($moz, $list, comma);
+ $spec: append($spec, $list, comma);
+ }
}
+ @if $needs-prefixes {
+ -webkit-transition: $webkit;
+ -moz-transition: $moz;
+ transition: $spec;
+ }
@else {
- $properties: all 0.15s ease-out 0s;
- @include prefixer(transition, $properties, webkit moz spec);
+ @if length($properties) >= 1 {
+ @include prefixer(transition, $properties, webkit moz spec);
+ }
+
+ @else {
+ $properties: all 0.15s ease-out 0s;
+ @include prefixer(transition, $properties, webkit moz spec);
+ }
}
}
--- /dev/null
+// Programatically determines whether a color is light or dark
+// Returns a boolean
+// More details here http://robots.thoughtbot.com/closer-look-color-lightness
+
+@function is-light($hex-color) {
+ $-local-red: red(rgba($hex-color, 1.0));
+ $-local-green: green(rgba($hex-color, 1.0));
+ $-local-blue: blue(rgba($hex-color, 1.0));
+
+ $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255;
+
+ @return $-local-lightness > .6;
+}
-// Scaling Varaibles
+// Scaling Variables
$golden: 1.618;
$minor-second: 1.067;
$major-second: 1.125;
--- /dev/null
+// Convert pixels to rems
+// eg. for a relational value of 12px write rem(12)
+// Assumes $em-base is the font-size of <html>
+
+@function rem($pxval) {
+ @if not unitless($pxval) {
+ $pxval: strip-units($pxval);
+ }
+
+ $base: $em-base;
+ @if not unitless($base) {
+ $base: strip-units($base);
+ }
+ @return ($pxval / $base) * 1rem;
+}
// 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);
- }
+ $new-props: ();
+
+ @each $prop in $props {
+ $new-props: append($new-props, transition-property-name($prop, $vendor), comma);
+ }
- @return $new-props;
+ @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;
- }
+ // 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
--- /dev/null
+// 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
}
@if $vendor {
- $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients);
+ $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);
}
+ $vendor-gradients: unquote($vendor-gradients);
@return $vendor-gradients;
}
--- /dev/null
+$asset-pipeline: false !default;
// Variable settings for /addons/prefixer.scss
-$prefix-for-webkit: true;
-$prefix-for-mozilla: true;
-$prefix-for-microsoft: true;
-$prefix-for-opera: true;
-$prefix-for-spec: true; // required for keyframe mixin
+$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
projects / vaadin-framework.git / commitdiff