replaced grid system for bourbon/neat
This commit is contained in:
parent
781483f657
commit
d5f9b310f6
78 changed files with 2357 additions and 56 deletions
52
css/bourbon/css3/_animation.scss
vendored
Executable file
52
css/bourbon/css3/_animation.scss
vendored
Executable file
|
@ -0,0 +1,52 @@
|
|||
// http://www.w3.org/TR/css3-animations/#the-animation-name-property-
|
||||
// Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
|
||||
|
||||
// Official animation shorthand property.
|
||||
@mixin animation ($animations...) {
|
||||
@include prefixer(animation, $animations, webkit moz spec);
|
||||
}
|
||||
|
||||
// Individual Animation Properties
|
||||
@mixin animation-name ($names...) {
|
||||
@include prefixer(animation-name, $names, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-duration ($times...) {
|
||||
@include prefixer(animation-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-timing-function ($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out
|
||||
@include prefixer(animation-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-iteration-count ($values...) {
|
||||
// infinite | <number>
|
||||
@include prefixer(animation-iteration-count, $values, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-direction ($directions...) {
|
||||
// normal | alternate
|
||||
@include prefixer(animation-direction, $directions, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-play-state ($states...) {
|
||||
// running | paused
|
||||
@include prefixer(animation-play-state, $states, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-delay ($times...) {
|
||||
@include prefixer(animation-delay, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
|
||||
@mixin animation-fill-mode ($modes...) {
|
||||
// none | forwards | backwards | both
|
||||
@include prefixer(animation-fill-mode, $modes, webkit moz spec);
|
||||
}
|
3
css/bourbon/css3/_appearance.scss
vendored
Executable file
3
css/bourbon/css3/_appearance.scss
vendored
Executable file
|
@ -0,0 +1,3 @@
|
|||
@mixin appearance ($value) {
|
||||
@include prefixer(appearance, $value, webkit moz ms o spec);
|
||||
}
|
6
css/bourbon/css3/_backface-visibility.scss
vendored
Executable file
6
css/bourbon/css3/_backface-visibility.scss
vendored
Executable file
|
@ -0,0 +1,6 @@
|
|||
//************************************************************************//
|
||||
// Backface-visibility mixin
|
||||
//************************************************************************//
|
||||
@mixin backface-visibility($visibility) {
|
||||
@include prefixer(backface-visibility, $visibility, webkit spec);
|
||||
}
|
48
css/bourbon/css3/_background-image.scss
vendored
Executable file
48
css/bourbon/css3/_background-image.scss
vendored
Executable file
|
@ -0,0 +1,48 @@
|
|||
//************************************************************************//
|
||||
// Background-image property for adding multiple background images with
|
||||
// gradients, or for stringing multiple gradients together.
|
||||
//************************************************************************//
|
||||
|
||||
@mixin background-image($images...) {
|
||||
background-image: _add-prefix($images, webkit);
|
||||
background-image: _add-prefix($images);
|
||||
}
|
||||
|
||||
@function _add-prefix($images, $vendor: false) {
|
||||
$images-prefixed: ();
|
||||
$gradient-positions: false;
|
||||
@for $i from 1 through length($images) {
|
||||
$type: type-of(nth($images, $i)); // Get type of variable - List or String
|
||||
|
||||
// If variable is a list - Gradient
|
||||
@if $type == list {
|
||||
$gradient-type: nth(nth($images, $i), 1); // linear or radial
|
||||
$gradient-pos: null;
|
||||
$gradient-args: null;
|
||||
|
||||
@if ($gradient-type == linear) or ($gradient-type == radial) {
|
||||
$gradient-pos: nth(nth($images, $i), 2); // Get gradient position
|
||||
$gradient-args: nth(nth($images, $i), 3); // Get actual gradient (red, blue)
|
||||
}
|
||||
@else {
|
||||
$gradient-args: nth(nth($images, $i), 2); // Get actual gradient (red, blue)
|
||||
}
|
||||
|
||||
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
|
||||
$gradient: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
|
||||
$images-prefixed: append($images-prefixed, $gradient, comma);
|
||||
}
|
||||
// If variable is a string - Image
|
||||
@else if $type == string {
|
||||
$images-prefixed: join($images-prefixed, nth($images, $i), comma);
|
||||
}
|
||||
}
|
||||
@return $images-prefixed;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
//@include background-image(linear-gradient(top, orange, red));
|
||||
//@include background-image(radial-gradient(50% 50%, cover circle, orange, red));
|
||||
//@include background-image(url("/images/a.png"), linear-gradient(orange, red));
|
||||
//@include background-image(url("image.png"), linear-gradient(orange, red), url("image.png"));
|
||||
//@include background-image(linear-gradient(hsla(0, 100%, 100%, 0.25) 0%, hsla(0, 100%, 100%, 0.08) 50%, transparent 50%), linear-gradient(orange, red));
|
103
css/bourbon/css3/_background.scss
vendored
Executable file
103
css/bourbon/css3/_background.scss
vendored
Executable file
|
@ -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"));
|
55
css/bourbon/css3/_border-image.scss
vendored
Executable file
55
css/bourbon/css3/_border-image.scss
vendored
Executable file
|
@ -0,0 +1,55 @@
|
|||
@mixin border-image($images) {
|
||||
-webkit-border-image: _border-add-prefix($images, webkit);
|
||||
-moz-border-image: _border-add-prefix($images, moz);
|
||||
-o-border-image: _border-add-prefix($images, o);
|
||||
border-image: _border-add-prefix($images);
|
||||
}
|
||||
|
||||
@function _border-add-prefix($images, $vendor: false) {
|
||||
$border-image: null;
|
||||
$images-type: type-of(nth($images, 1));
|
||||
$first-var: nth(nth($images, 1), 1); // Get type of Gradient (Linear || radial)
|
||||
|
||||
// If input is a gradient
|
||||
@if $images-type == string {
|
||||
@if ($first-var == "linear") or ($first-var == "radial") {
|
||||
$gradient-type: nth($images, 1); // Get type of gradient (linear || radial)
|
||||
$gradient-pos: nth($images, 2); // Get gradient position
|
||||
$gradient-args: nth($images, 3); // Get actual gradient (red, blue)
|
||||
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
|
||||
$border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
|
||||
}
|
||||
// If input is a URL
|
||||
@else {
|
||||
$border-image: $images;
|
||||
}
|
||||
}
|
||||
// If input is gradient or url + additional args
|
||||
@else if $images-type == list {
|
||||
$type: type-of(nth($images, 1)); // Get type of variable - List or String
|
||||
|
||||
// If variable is a list - Gradient
|
||||
@if $type == list {
|
||||
$gradient: nth($images, 1);
|
||||
$gradient-type: nth($gradient, 1); // Get type of gradient (linear || radial)
|
||||
$gradient-pos: nth($gradient, 2); // Get gradient position
|
||||
$gradient-args: nth($gradient, 3); // Get actual gradient (red, blue)
|
||||
$gradient-positions: _gradient-positions-parser($gradient-type, $gradient-pos);
|
||||
$border-image: _render-gradients($gradient-positions, $gradient-args, $gradient-type, $vendor);
|
||||
|
||||
@for $i from 2 through length($images) {
|
||||
$border-image: append($border-image, nth($images, $i));
|
||||
}
|
||||
}
|
||||
}
|
||||
@return $border-image;
|
||||
}
|
||||
|
||||
//Examples:
|
||||
// @include border-image(url("image.png"));
|
||||
// @include border-image(url("image.png") 20 stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow));
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) stretch);
|
||||
// @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
|
||||
// @include border-image(radial-gradient(top, cover, orange, yellow, orange));
|
||||
|
22
css/bourbon/css3/_border-radius.scss
vendored
Executable file
22
css/bourbon/css3/_border-radius.scss
vendored
Executable file
|
@ -0,0 +1,22 @@
|
|||
//************************************************************************//
|
||||
// Shorthand Border-radius mixins
|
||||
//************************************************************************//
|
||||
@mixin border-top-radius($radii) {
|
||||
@include prefixer(border-top-left-radius, $radii, spec);
|
||||
@include prefixer(border-top-right-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-bottom-radius($radii) {
|
||||
@include prefixer(border-bottom-left-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-right-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-left-radius($radii) {
|
||||
@include prefixer(border-top-left-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-left-radius, $radii, spec);
|
||||
}
|
||||
|
||||
@mixin border-right-radius($radii) {
|
||||
@include prefixer(border-top-right-radius, $radii, spec);
|
||||
@include prefixer(border-bottom-right-radius, $radii, spec);
|
||||
}
|
4
css/bourbon/css3/_box-sizing.scss
vendored
Executable file
4
css/bourbon/css3/_box-sizing.scss
vendored
Executable file
|
@ -0,0 +1,4 @@
|
|||
@mixin box-sizing ($box) {
|
||||
// content-box | border-box | inherit
|
||||
@include prefixer(box-sizing, $box, webkit moz spec);
|
||||
}
|
47
css/bourbon/css3/_columns.scss
vendored
Executable file
47
css/bourbon/css3/_columns.scss
vendored
Executable file
|
@ -0,0 +1,47 @@
|
|||
@mixin columns($arg: auto) {
|
||||
// <column-count> || <column-width>
|
||||
@include prefixer(columns, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-count($int: auto) {
|
||||
// auto || integer
|
||||
@include prefixer(column-count, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-gap($length: normal) {
|
||||
// normal || length
|
||||
@include prefixer(column-gap, $length, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-fill($arg: auto) {
|
||||
// auto || length
|
||||
@include prefixer(columns-fill, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule($arg) {
|
||||
// <border-width> || <border-style> || <color>
|
||||
@include prefixer(column-rule, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixer(column-rule-color, $color, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-style($style: none) {
|
||||
// none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
|
||||
@include prefixer(column-rule-style, $style, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-rule-width ($width: none) {
|
||||
@include prefixer(column-rule-width, $width, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-span($arg: none) {
|
||||
// none || all
|
||||
@include prefixer(column-span, $arg, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin column-width($length: auto) {
|
||||
// auto || length
|
||||
@include prefixer(column-width, $length, webkit moz spec);
|
||||
}
|
52
css/bourbon/css3/_flex-box.scss
vendored
Executable file
52
css/bourbon/css3/_flex-box.scss
vendored
Executable file
|
@ -0,0 +1,52 @@
|
|||
// CSS3 Flexible Box Model and property defaults
|
||||
|
||||
// Custom shorthand notation for flexbox
|
||||
@mixin box($orient: inline-axis, $pack: start, $align: stretch) {
|
||||
@include display-box;
|
||||
@include box-orient($orient);
|
||||
@include box-pack($pack);
|
||||
@include box-align($align);
|
||||
}
|
||||
|
||||
@mixin display-box {
|
||||
display: -webkit-box;
|
||||
display: -moz-box;
|
||||
display: box;
|
||||
}
|
||||
|
||||
@mixin box-orient($orient: inline-axis) {
|
||||
// horizontal|vertical|inline-axis|block-axis|inherit
|
||||
@include prefixer(box-orient, $orient, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-pack($pack: start) {
|
||||
// start|end|center|justify
|
||||
@include prefixer(box-pack, $pack, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-align($align: stretch) {
|
||||
// start|end|center|baseline|stretch
|
||||
@include prefixer(box-align, $align, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-direction($direction: normal) {
|
||||
// normal|reverse|inherit
|
||||
@include prefixer(box-direction, $direction, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-lines($lines: single) {
|
||||
// single|multiple
|
||||
@include prefixer(box-lines, $lines, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-ordinal-group($int: 1) {
|
||||
@include prefixer(box-ordinal-group, $int, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-flex($value: 0.0) {
|
||||
@include prefixer(box-flex, $value, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin box-flex-group($int: 1) {
|
||||
@include prefixer(box-flex-group, $int, webkit moz spec);
|
||||
}
|
23
css/bourbon/css3/_font-face.scss
vendored
Executable file
23
css/bourbon/css3/_font-face.scss
vendored
Executable file
|
@ -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');
|
||||
}
|
||||
}
|
||||
}
|
10
css/bourbon/css3/_hidpi-media-query.scss
vendored
Executable file
10
css/bourbon/css3/_hidpi-media-query.scss
vendored
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
13
css/bourbon/css3/_image-rendering.scss
vendored
Executable file
13
css/bourbon/css3/_image-rendering.scss
vendored
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
8
css/bourbon/css3/_inline-block.scss
vendored
Executable file
8
css/bourbon/css3/_inline-block.scss
vendored
Executable file
|
@ -0,0 +1,8 @@
|
|||
// Legacy support for inline-block in IE7 (maybe IE6)
|
||||
@mixin inline-block {
|
||||
display: inline-block;
|
||||
vertical-align: baseline;
|
||||
zoom: 1;
|
||||
*display: inline;
|
||||
*vertical-align: auto;
|
||||
}
|
43
css/bourbon/css3/_keyframes.scss
vendored
Executable file
43
css/bourbon/css3/_keyframes.scss
vendored
Executable file
|
@ -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;
|
||||
}
|
41
css/bourbon/css3/_linear-gradient.scss
vendored
Executable file
41
css/bourbon/css3/_linear-gradient.scss
vendored
Executable file
|
@ -0,0 +1,41 @@
|
|||
@mixin linear-gradient($pos, $G1, $G2: false,
|
||||
$G3: false, $G4: false,
|
||||
$G5: false, $G6: false,
|
||||
$G7: false, $G8: false,
|
||||
$G9: false, $G10: false,
|
||||
$deprecated-pos1: left top,
|
||||
$deprecated-pos2: left bottom,
|
||||
$fallback: false) {
|
||||
// Detect what type of value exists in $pos
|
||||
$pos-type: type-of(nth($pos, 1));
|
||||
$pos-spec: null;
|
||||
$pos-degree: null;
|
||||
|
||||
// If $pos is missing from mixin, reassign vars and add default position
|
||||
@if ($pos-type == color) or (nth($pos, 1) == "transparent") {
|
||||
$G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
|
||||
$G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
|
||||
$pos: null;
|
||||
}
|
||||
|
||||
@if $pos {
|
||||
$positions: _linear-positions-parser($pos);
|
||||
$pos-degree: nth($positions, 1);
|
||||
$pos-spec: nth($positions, 2);
|
||||
}
|
||||
|
||||
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
||||
|
||||
// Set $G1 as the default fallback color
|
||||
$fallback-color: nth($G1, 1);
|
||||
|
||||
// If $fallback is a color use that color as the fallback color
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: _deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
|
||||
background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
|
||||
background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
|
||||
}
|
8
css/bourbon/css3/_perspective.scss
vendored
Executable file
8
css/bourbon/css3/_perspective.scss
vendored
Executable file
|
@ -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);
|
||||
}
|
29
css/bourbon/css3/_placeholder.scss
vendored
Executable file
29
css/bourbon/css3/_placeholder.scss
vendored
Executable file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
44
css/bourbon/css3/_radial-gradient.scss
vendored
Executable file
44
css/bourbon/css3/_radial-gradient.scss
vendored
Executable file
|
@ -0,0 +1,44 @@
|
|||
// Requires Sass 3.1+
|
||||
@mixin radial-gradient($G1, $G2,
|
||||
$G3: false, $G4: false,
|
||||
$G5: false, $G6: false,
|
||||
$G7: false, $G8: false,
|
||||
$G9: false, $G10: false,
|
||||
$pos: null,
|
||||
$shape-size: null,
|
||||
$deprecated-pos1: center center,
|
||||
$deprecated-pos2: center center,
|
||||
$deprecated-radius1: 0,
|
||||
$deprecated-radius2: 460,
|
||||
$fallback: false) {
|
||||
|
||||
$data: _radial-arg-parser($G1, $G2, $pos, $shape-size);
|
||||
$G1: nth($data, 1);
|
||||
$G2: nth($data, 2);
|
||||
$pos: nth($data, 3);
|
||||
$shape-size: nth($data, 4);
|
||||
|
||||
$full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
|
||||
|
||||
// Strip deprecated cover/contain for spec
|
||||
$shape-size-spec: _shape-size-stripper($shape-size);
|
||||
|
||||
// Set $G1 as the default fallback color
|
||||
$first-color: nth($full, 1);
|
||||
$fallback-color: nth($first-color, 1);
|
||||
|
||||
@if (type-of($fallback) == color) or ($fallback == "transparent") {
|
||||
$fallback-color: $fallback;
|
||||
}
|
||||
|
||||
// Add Commas and spaces
|
||||
$shape-size: if($shape-size, '#{$shape-size}, ', null);
|
||||
$pos: if($pos, '#{$pos}, ', null);
|
||||
$pos-spec: if($pos, 'at #{$pos}', null);
|
||||
$shape-size-spec: if(($shape-size-spec != ' ') and ($pos == null), '#{$shape-size-spec}, ', '#{$shape-size-spec} ');
|
||||
|
||||
background-color: $fallback-color;
|
||||
background-image: _deprecated-webkit-gradient(radial, $deprecated-pos1, $deprecated-pos2, $full, $deprecated-radius1, $deprecated-radius2); // Safari <= 5.0 && IOS 4
|
||||
background-image: -webkit-radial-gradient(unquote(#{$pos}#{$shape-size}#{$full}));
|
||||
background-image: unquote("radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full})");
|
||||
}
|
15
css/bourbon/css3/_transform.scss
vendored
Executable file
15
css/bourbon/css3/_transform.scss
vendored
Executable file
|
@ -0,0 +1,15 @@
|
|||
@mixin transform($property: none) {
|
||||
// none | <transform-function>
|
||||
@include prefixer(transform, $property, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-origin($axes: 50%) {
|
||||
// x-axis - left | center | right | length | %
|
||||
// y-axis - top | center | bottom | length | %
|
||||
// z-axis - length
|
||||
@include prefixer(transform-origin, $axes, webkit moz ms o spec);
|
||||
}
|
||||
|
||||
@mixin transform-style ($style: flat) {
|
||||
@include prefixer(transform-style, $style, webkit moz ms o spec);
|
||||
}
|
34
css/bourbon/css3/_transition.scss
vendored
Executable file
34
css/bourbon/css3/_transition.scss
vendored
Executable file
|
@ -0,0 +1,34 @@
|
|||
// Shorthand mixin. Supports multiple parentheses-deliminated values for each variable.
|
||||
// Example: @include transition (all, 2.0s, ease-in-out);
|
||||
// @include transition ((opacity, width), (1.0s, 2.0s), ease-in, (0, 2s));
|
||||
// @include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));
|
||||
|
||||
@mixin transition ($properties...) {
|
||||
@if length($properties) >= 1 {
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
|
||||
@else {
|
||||
$properties: all 0.15s ease-out 0;
|
||||
@include prefixer(transition, $properties, webkit moz spec);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin transition-property ($properties...) {
|
||||
-webkit-transition-property: transition-property-names($properties, 'webkit');
|
||||
-moz-transition-property: transition-property-names($properties, 'moz');
|
||||
transition-property: transition-property-names($properties, false);
|
||||
}
|
||||
|
||||
@mixin transition-duration ($times...) {
|
||||
@include prefixer(transition-duration, $times, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-timing-function ($motions...) {
|
||||
// ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
|
||||
@include prefixer(transition-timing-function, $motions, webkit moz spec);
|
||||
}
|
||||
|
||||
@mixin transition-delay ($times...) {
|
||||
@include prefixer(transition-delay, $times, webkit moz spec);
|
||||
}
|
3
css/bourbon/css3/_user-select.scss
vendored
Executable file
3
css/bourbon/css3/_user-select.scss
vendored
Executable file
|
@ -0,0 +1,3 @@
|
|||
@mixin user-select($arg: none) {
|
||||
@include prefixer(user-select, $arg, webkit moz ms spec);
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue