mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-08-13 10:53:18 +00:00
MODULE-TYPO
- Sass set-up - md-list - md-theming (install)
This commit is contained in:
iRouge
@@ -0,0 +1,122 @@
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for animation.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$animation-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Name of any animation as a string.
|
||||
$default-animation-name : null !default;
|
||||
|
||||
// Duration of the entire animation in seconds.
|
||||
$default-animation-duration : null !default;
|
||||
|
||||
// Delay for start of animation in seconds.
|
||||
$default-animation-delay : null !default;
|
||||
|
||||
// The timing function(s) to be used between keyframes. [ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier($number, $number, $number, $number)]
|
||||
$default-animation-timing-function : null !default;
|
||||
|
||||
// The number of times an animation cycle is played. [infinite | $number]
|
||||
$default-animation-iteration-count : null !default;
|
||||
|
||||
// Whether or not the animation should play in reverse on alternate cycles. [normal | alternate]
|
||||
$default-animation-direction : null !default;
|
||||
|
||||
// What values are applied by the animation outside the time it is executing. [none | forwards | backwards | both]
|
||||
$default-animation-fill-mode : null !default;
|
||||
|
||||
// Whether the animation is running or paused. [running | paused]
|
||||
$default-animation-play-state : null !default;
|
||||
|
||||
|
||||
// Create a named animation sequence that can be applied to elements later.
|
||||
//
|
||||
// $name - The name of your animation.
|
||||
// @content - The keyframes of the animation.
|
||||
@mixin keyframes($name, $deprecated-prefixes...) {
|
||||
$warned: warn-about-useless-prefix-arguments($deprecated-prefixes...);
|
||||
|
||||
@include with-each-prefix(css-animation, $animation-support-threshold) {
|
||||
// It would be nice if we could dynamically construct directive names.
|
||||
@if $current-prefix == -moz { @-moz-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -webkit { @-webkit-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -o { @-o-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == -ms { @-ms-keyframes #{$name} { @content; } }
|
||||
@if $current-prefix == null { @keyframes #{$name} { @content; } }
|
||||
}
|
||||
}
|
||||
|
||||
// @private
|
||||
@mixin animation-properties($properties) {
|
||||
@include prefixed-properties(css-animation, $animation-support-threshold, $properties);
|
||||
}
|
||||
|
||||
|
||||
// Apply any number of animation names.
|
||||
@mixin animation-name($name...) {
|
||||
$name: set-arglist-default($name, $default-animation-name);
|
||||
@include animation-properties((animation-name: $name));
|
||||
}
|
||||
|
||||
// Apply any number of animation durations.
|
||||
@mixin animation-duration($duration...) {
|
||||
$duration: set-arglist-default($duration, $default-animation-duration);
|
||||
@include animation-properties((animation-duration: $duration));
|
||||
}
|
||||
|
||||
// Apply any number of animation delays.
|
||||
@mixin animation-delay($delay...) {
|
||||
$delay: set-arglist-default($delay, $default-animation-delay);
|
||||
@include animation-properties((animation-delay: $delay));
|
||||
}
|
||||
|
||||
// Apply any number of animation timing functions.
|
||||
@mixin animation-timing-function($function...) {
|
||||
$function: set-arglist-default($function, $default-animation-timing-function);
|
||||
@include animation-properties((animation-timing-function: $function));
|
||||
}
|
||||
|
||||
// Apply any number of animation iteration counts.
|
||||
@mixin animation-iteration-count($count...) {
|
||||
$count: set-arglist-default($count, $default-animation-iteration-count);
|
||||
@include animation-properties((animation-iteration-count: $count));
|
||||
}
|
||||
|
||||
// Apply any number of animation directions.
|
||||
@mixin animation-direction($direction...) {
|
||||
$direction: set-arglist-default($direction, $default-animation-direction);
|
||||
@include animation-properties((animation-direction: $direction));
|
||||
}
|
||||
|
||||
// Apply any number of animation fill modes.
|
||||
@mixin animation-fill-mode($mode...) {
|
||||
$mode: set-arglist-default($mode, $default-animation-fill-mode);
|
||||
@include animation-properties((animation-fill-mode: $mode));
|
||||
}
|
||||
|
||||
// Apply any number of animation play states.
|
||||
@mixin animation-play-state($state...) {
|
||||
$state: set-arglist-default($state, $default-animation-play-state);
|
||||
@include animation-properties((animation-play-state: $state));
|
||||
}
|
||||
|
||||
// @private
|
||||
@function default-animation() {
|
||||
@return compact($default-animation-name
|
||||
$default-animation-duration
|
||||
$default-animation-timing-function
|
||||
$default-animation-delay
|
||||
$default-animation-iteration-count
|
||||
$default-animation-direction
|
||||
$default-animation-fill-mode
|
||||
$default-animation-play-state);
|
||||
}
|
||||
|
||||
// Shortcut to apply any number of animations to an element, with all the settings.
|
||||
//
|
||||
// $animation... : Name and settings. [<values> | default]
|
||||
@mixin animation($animation...) {
|
||||
$animation: if(length($animation) > 0, $animation, default-animation());
|
||||
@include animation-properties((animation: $animation));
|
||||
}
|
||||
@@ -0,0 +1,17 @@
|
||||
// Appearance
|
||||
@import "compass/support";
|
||||
|
||||
// Change the appearance for Mozilla, Webkit and possibly the future.
|
||||
// The appearance property is currently not present in any newer CSS specification.
|
||||
//
|
||||
// There is no official list of accepted values, but you might check these source:
|
||||
//
|
||||
// * [Mozilla](https://developer.mozilla.org/en/CSS/-moz-appearance)
|
||||
// * [Webkit](http://code.google.com/p/webkit-mirror/source/browse/Source/WebCore/css/CSSValueKeywords.in?spec=svnf1aea559dcd025a8946aa7da6e4e8306f5c1b604&r=63c7d1af44430b314233fea342c3ddb2a052e365)
|
||||
// (search for 'appearance' within the page)
|
||||
@mixin appearance($appearance) {
|
||||
// There is no caniuse tracking for appearance.
|
||||
$appearance: unquote($appearance);
|
||||
@include with-prefix(-moz) { -moz-appearance: $appearance; }
|
||||
@include with-prefix(-webkit) { -webkit-appearance: $appearance; }
|
||||
}
|
||||
@@ -0,0 +1,35 @@
|
||||
// Background Clip
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
|
||||
$background-clip-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// The default border-box model: [border-box | padding-box | content-box]
|
||||
$default-background-clip: padding-box !default;
|
||||
|
||||
|
||||
// Clip the background (image and color) at the edge of the padding, border, or content.
|
||||
// $clip... : [padding-box | border-box | content-box]
|
||||
@mixin background-clip($clip...) {
|
||||
$output: ();
|
||||
$deprecated: ();
|
||||
|
||||
@if (length($clip) > 0) {
|
||||
@each $layer in $clip {
|
||||
$output: append($output, unquote($layer), comma);
|
||||
$deprecated: append($deprecated, legacy-box($layer), comma);
|
||||
}
|
||||
} @else {
|
||||
$output: $default-background-clip;
|
||||
$deprecated: legacy-box($default-background-clip);
|
||||
}
|
||||
|
||||
@include with-each-prefix(background-img-opts, $background-clip-support-threshold) {
|
||||
@if $current-prefix == -moz or $current-prefix == -webkit {
|
||||
// Legacy versions of Mozilla support a different syntax, prefixed.
|
||||
@include prefix-prop(background-clip, $deprecated);
|
||||
} @else {
|
||||
@include prefix-prop(background-clip, $output);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
// Background Origin
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-origin support. Defaults to `$critical-usage-threshold`
|
||||
$background-origin-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// The default background-origin: [border-box | padding-box | content-box]
|
||||
$default-background-origin: content-box !default;
|
||||
|
||||
|
||||
// Set the origin of the background (image and color) at the edge of the padding, border, or content.
|
||||
//
|
||||
// $origin... : [padding-box | border-box | content-box]
|
||||
@mixin background-origin($origin...) {
|
||||
$output: ();
|
||||
$deprecated: ();
|
||||
|
||||
@if (length($origin) > 0) {
|
||||
@each $layer in $origin {
|
||||
$output: append($output, unquote($layer), comma);
|
||||
$deprecated: append($deprecated, legacy-box($layer), comma);
|
||||
}
|
||||
} @else {
|
||||
$output: $default-background-origin;
|
||||
$deprecated: legacy-box($default-background-origin);
|
||||
}
|
||||
|
||||
@include with-each-prefix(background-img-opts, $background-origin-threshold) {
|
||||
@if $current-prefix == -moz or $current-prefix == -webkit {
|
||||
// Legacy versions of Mozilla support a different syntax, prefixed.
|
||||
@include prefix-prop(background-origin, $deprecated)
|
||||
} @else {
|
||||
@include prefix-prop(background-origin, $output)
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
// Background Size
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for background-clip support. Defaults to `$critical-usage-threshold`
|
||||
$background-size-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// override to change the default
|
||||
$default-background-size: 100% auto !default;
|
||||
|
||||
|
||||
// Set the size of background images using px, width and height, or percentages.
|
||||
// Currently supported in: Opera, Gecko, Webkit.
|
||||
//
|
||||
// * percentages are relative to the background-origin (default = padding-box)
|
||||
// * mixin defaults to: `$default-background-size`
|
||||
@mixin background-size($size...) {
|
||||
$size: set-arglist-default($size, $default-background-size);
|
||||
@include prefixed-properties(background-img-opts, $background-size-threshold, (background-size: $size));
|
||||
}
|
||||
@@ -0,0 +1,107 @@
|
||||
// Border Radius
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
|
||||
// The the user threshold for border-radius support. Defaults to `$graceful-usage-threshold`
|
||||
$border-radius-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// The length of a border-radius to be used by default.
|
||||
$default-border-radius: 5px !default;
|
||||
|
||||
|
||||
// Round all corners by a specific amount, defaults to value of `$default-border-radius`.
|
||||
//
|
||||
// When two values are passed, the first is the horizontal radius
|
||||
// and the second is the vertical radius.
|
||||
//
|
||||
// Note: webkit does not support shorthand syntax for several corners at once.
|
||||
// So in the case where you pass several values only the first will be passed to webkit.
|
||||
//
|
||||
// Examples:
|
||||
//
|
||||
// .simple { @include border-radius(4px, 4px); }
|
||||
// .compound { @include border-radius(2px 5px, 3px 6px); }
|
||||
// .crazy { @include border-radius(1px 3px 5px 7px, 2px 4px 6px 8px)}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// .simple {
|
||||
// -moz-border-radius: 4px / 4px;
|
||||
// -webkit-border-radius: 4px 4px;
|
||||
// border-radius: 4px / 4px; }
|
||||
//
|
||||
// .compound {
|
||||
// -moz-border-radius: 2px 5px / 3px 6px;
|
||||
// -webkit-border-radius: 2px 3px;
|
||||
// border-radius: 2px 5px / 3px 6px; }
|
||||
//
|
||||
// .crazy {
|
||||
// -moz-border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px;
|
||||
// -webkit-border-radius: 1px 2px;
|
||||
// border-radius: 1px 3px 5px 7px / 2px 4px 6px 8px; }
|
||||
@mixin border-radius($radius: $default-border-radius, $vertical-radius: false) {
|
||||
@include with-each-prefix(border-radius, $border-radius-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
// Legacy Webkit didn't understand the official shorthand syntax for specifying a vertical radius.
|
||||
$legacy-webkit-radius: first-value-of($radius);
|
||||
@if $vertical-radius { $legacy-webkit-radius: append($legacy-webkit-radius, first-value-of($vertical-radius)); }
|
||||
@include prefix-prop(border-radius, $legacy-webkit-radius);
|
||||
} @else {
|
||||
// Official syntax for everyone else
|
||||
@include prefix-prop(border-radius, if($vertical-radius, #{$radius} / #{$vertical-radius}, $radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Round radius at position by amount.
|
||||
//
|
||||
// * legal values for `$vert`: `top`, `bottom`
|
||||
// * legal values for `$horz`: `left`, `right`
|
||||
@mixin border-corner-radius($vert, $horz, $radius: $default-border-radius) {
|
||||
@include with-each-prefix(border-radius, $border-radius-threshold) {
|
||||
@if $current-prefix == -moz {
|
||||
// Support for mozilla's syntax for specifying a corner
|
||||
@include prefix-prop("border-radius-#{$vert}#{$horz}", $radius);
|
||||
} @else {
|
||||
// Official syntax for everyone else
|
||||
@include prefix-prop("border-#{$vert}-#{$horz}-radius", $radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Round top-left corner only
|
||||
@mixin border-top-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, left, $radius); }
|
||||
|
||||
// Round top-right corner only
|
||||
@mixin border-top-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(top, right, $radius); }
|
||||
|
||||
// Round bottom-left corner only
|
||||
@mixin border-bottom-left-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, left, $radius); }
|
||||
|
||||
// Round bottom-right corner only
|
||||
@mixin border-bottom-right-radius($radius: $default-border-radius) {
|
||||
@include border-corner-radius(bottom, right, $radius); }
|
||||
|
||||
// Round both top corners by amount
|
||||
@mixin border-top-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-top-right-radius($radius); }
|
||||
|
||||
// Round both right corners by amount
|
||||
@mixin border-right-radius($radius: $default-border-radius) {
|
||||
@include border-top-right-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round both bottom corners by amount
|
||||
@mixin border-bottom-radius($radius: $default-border-radius) {
|
||||
@include border-bottom-left-radius($radius);
|
||||
@include border-bottom-right-radius($radius); }
|
||||
|
||||
// Round both left corners by amount
|
||||
@mixin border-left-radius($radius: $default-border-radius) {
|
||||
@include border-top-left-radius($radius);
|
||||
@include border-bottom-left-radius($radius); }
|
||||
@@ -0,0 +1,88 @@
|
||||
// Box Shadow
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for box-shadow.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$box-shadow-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// The default color for box shadows
|
||||
$default-box-shadow-color: #333333 !default;
|
||||
|
||||
// The default horizontal offset. Positive is to the right.
|
||||
$default-box-shadow-h-offset: 0px !default;
|
||||
|
||||
// The default vertical offset. Positive is down.
|
||||
$default-box-shadow-v-offset: 0px !default;
|
||||
|
||||
// The default blur length.
|
||||
$default-box-shadow-blur: 5px !default;
|
||||
|
||||
// The default spread length.
|
||||
$default-box-shadow-spread: null !default;
|
||||
|
||||
// The default shadow inset: inset or null (for standard shadow).
|
||||
$default-box-shadow-inset: null !default;
|
||||
|
||||
@function default-box-shadow() {
|
||||
@return compact(if($default-box-shadow-inset, inset, null)
|
||||
$default-box-shadow-h-offset
|
||||
$default-box-shadow-v-offset
|
||||
$default-box-shadow-blur
|
||||
$default-box-shadow-spread
|
||||
$default-box-shadow-color);
|
||||
}
|
||||
|
||||
// Provides cross-browser for Webkit, Gecko, and CSS3 box shadows
|
||||
// when one or more box shadows are needed.
|
||||
// Each shadow argument should adhere to the standard css3 syntax
|
||||
// for the box-shadow property.
|
||||
@mixin box-shadow($shadow...) {
|
||||
$shadow: set-arglist-default($shadow, default-box-shadow());
|
||||
@include prefixed-properties(css-boxshadow, $box-shadow-support-threshold, (box-shadow: $shadow));
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS box shadow for Webkit, Gecko, and CSS3.
|
||||
// Includes default arguments for color, horizontal offset, vertical offset, blur length, spread length, and inset.
|
||||
@mixin single-box-shadow(
|
||||
$hoff : null,
|
||||
$voff : null,
|
||||
$blur : null,
|
||||
$spread : null,
|
||||
$color : null,
|
||||
$inset : $default-box-shadow-inset
|
||||
) {
|
||||
// Handle legacy argument order
|
||||
@if not ($hoff == none or $hoff == null) and type-of($hoff) != number {
|
||||
@warn "The $color argument for single-box-shadow is now the 5th argument instead of the 1st.";
|
||||
$tmp-color: $color;
|
||||
$color: $hoff;
|
||||
$hoff: $voff;
|
||||
$voff: $blur;
|
||||
$blur: $spread;
|
||||
$spread: $tmp-color
|
||||
}
|
||||
|
||||
// Need to set these defaults here instead of the arglist to support the above backwards compat handling
|
||||
@if $hoff == null { $hoff: $default-box-shadow-h-offset; }
|
||||
@if $voff == null { $hoff: $default-box-shadow-v-offset; }
|
||||
@if $blur == null { $blur: $default-box-shadow-blur; }
|
||||
@if $spread == null { $spread: $default-box-shadow-spread; }
|
||||
@if $color == null { $color: $default-box-shadow-color; }
|
||||
|
||||
@if not ($inset == true or $inset == false or $inset == null or $inset == inset) {
|
||||
@warn "$inset expected to be true or the inset keyword. Got #{$inset} instead. Using: inset";
|
||||
}
|
||||
|
||||
@if $hoff == none {
|
||||
@include box-shadow(none);
|
||||
} @else {
|
||||
$full : $hoff $voff;
|
||||
@if $blur { $full: $full $blur; }
|
||||
@if $spread { $full: $full $spread; }
|
||||
@if $color { $full: $full $color; }
|
||||
@if $inset { $full: inset $full; }
|
||||
@include box-shadow($full);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
// Box Sizing
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for box-sizing.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$box-sizing-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
// The default box-sizing model when no argument is provided to the box-sizing mixin: [ content-box | border-box | padding-box ]
|
||||
//
|
||||
// The browser default is content-box, compass defaults to border-box.
|
||||
$default-box-sizing: border-box !default;
|
||||
|
||||
|
||||
// Change the box model for Mozilla, Webkit, IE8 and the future
|
||||
//
|
||||
// $box-model: [ content-box | border-box | padding-box ]
|
||||
@mixin box-sizing($box-model: $default-box-sizing) {
|
||||
$box-model: unquote($box-model);
|
||||
@include prefixed-properties(css3-boxsizing, $box-sizing-support-threshold, (box-sizing: $box-model));
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
// Flexible Box
|
||||
@import "deprecated-support";
|
||||
|
||||
@warn "The compass/css3/box module is DEPRECATED and will be removed in the next release. Please use compass/css3/flexbox instead.";
|
||||
|
||||
// @private css3-feature-support variables must always include a list of five boolean values
|
||||
$legacy-box-support: -moz, -webkit, not -o, -ms, not -khtml;
|
||||
|
||||
// Default box orientation, assuming that the user wants something less block-like
|
||||
$default-box-orient : horizontal !default;
|
||||
|
||||
// Default box-align
|
||||
$default-box-align : stretch !default;
|
||||
|
||||
// Default box flex
|
||||
$default-box-flex : 0 !default;
|
||||
|
||||
// Default flex group
|
||||
$default-box-flex-group : 1 !default;
|
||||
|
||||
// Box direction default value
|
||||
$default-box-direction : normal !default;
|
||||
|
||||
// Default ordinal group
|
||||
$default-box-ordinal-group : 1 !default;
|
||||
|
||||
// Default box lines
|
||||
$default-box-lines : single !default;
|
||||
|
||||
// Default box pack
|
||||
$default-box-pack : start !default;
|
||||
|
||||
|
||||
// Apply 'display:box;' to an element.
|
||||
// - must be used for any of the other flexbox mixins to work properly
|
||||
@mixin display-box {
|
||||
@include experimental-value(display, box, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box orientation [ horizontal | vertical | inline-axis | block-axis | inherit ]
|
||||
@mixin box-orient($orientation: $default-box-orient) {
|
||||
$orientation : unquote($orientation);
|
||||
@include experimental(box-orient, $orientation, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box align [ start | end | center | baseline | stretch ]
|
||||
@mixin box-align($alignment: $default-box-align) {
|
||||
$alignment : unquote($alignment);
|
||||
@include experimental(box-align, $alignment, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for box flex. Apply this to the children inside the box.
|
||||
//
|
||||
// For example: "div.display-box > div.child-box" would get the box flex mixin.
|
||||
@mixin box-flex($flex: $default-box-flex) {
|
||||
@include experimental(box-flex, $flex, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for flexible grouping
|
||||
@mixin box-flex-group($group: $default-box-flex-group) {
|
||||
@include experimental(box-flex-group, $group, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Takes an int argument for ordinal grouping and rearranging the order
|
||||
@mixin box-ordinal-group($group: $default-box-ordinal-group) {
|
||||
@include experimental(box-ordinal-group, $group, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box direction [ normal | reverse | inherit ]
|
||||
@mixin box-direction($direction: $default-box-direction) {
|
||||
$direction: unquote($direction);
|
||||
@include experimental(box-direction, $direction, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box lines [ single | multiple ]
|
||||
@mixin box-lines($lines: $default-box-lines) {
|
||||
$lines: unquote($lines);
|
||||
@include experimental(box-lines, $lines, $legacy-box-support...);
|
||||
}
|
||||
|
||||
// Box pack [ start | end | center | justify ]
|
||||
@mixin box-pack($pack: $default-box-pack) {
|
||||
$pack: unquote($pack);
|
||||
@include experimental(box-pack, $pack, $legacy-box-support...);
|
||||
}
|
||||
@@ -0,0 +1,212 @@
|
||||
// Columns
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for columns.
|
||||
// Defaults to the $critical-usage-threshold.
|
||||
$multicolumn-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// Specify the shorthand `columns` property.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// @include columns(20em 2);
|
||||
@mixin columns($width-and-count) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
columns: $width-and-count
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the number of columns
|
||||
@mixin column-count($count) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-count: $count
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the gap between columns e.g. `20px`
|
||||
@mixin column-gap($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-gap: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the width of columns e.g. `100px`
|
||||
@mixin column-width($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-width: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify how many columns an element should span across.
|
||||
//
|
||||
// * legal values are 1, all
|
||||
@mixin column-span($columns) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-span: $columns
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the width of the rule between columns e.g. `1px`
|
||||
@mixin column-rule-width($width) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-width: $width
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the style of the rule between columns e.g. `dotted`.
|
||||
// This works like border-style.
|
||||
@mixin column-rule-style($style) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-style: $style
|
||||
));
|
||||
}
|
||||
|
||||
// Specify the color of the rule between columns e.g. `blue`.
|
||||
// This works like border-color.
|
||||
@mixin column-rule-color($color) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
rule-color: $color
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin encompassing all column rule properties
|
||||
// For example:
|
||||
//
|
||||
// @include column-rule(1px, solid, #c00)
|
||||
//
|
||||
// Or the values can be space separated:
|
||||
//
|
||||
// @include column-rule(1px solid #c00)
|
||||
@mixin column-rule($width, $style: null, $color: null) {
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-rule: $width $style $color
|
||||
));
|
||||
}
|
||||
|
||||
// All-purpose mixin for setting column breaks.
|
||||
//
|
||||
// * legal values for $type : before, after, inside
|
||||
// * legal values for '$value' are dependent on $type
|
||||
// * when $type = before, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
// * when $type = after, legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
// * when $type = inside, legal values are auto, avoid, avoid-page, avoid-column
|
||||
//
|
||||
// Examples:
|
||||
// h2.before {@include column-break(before, always);}
|
||||
// h2.after {@include column-break(after, always); }
|
||||
// h2.inside {@include column-break(inside); }
|
||||
//
|
||||
// Which generates:
|
||||
// h2.before {
|
||||
// -webkit-column-break-before: always;
|
||||
// break-before: always;}
|
||||
//
|
||||
// h2.after {
|
||||
// -webkit-column-break-after: always;
|
||||
// break-after: always; }
|
||||
//
|
||||
// h2.inside {
|
||||
// -webkit-column-break-inside: auto;
|
||||
// break-inside: auto;}
|
||||
|
||||
@mixin column-break($type: before, $value: auto){
|
||||
@include with-each-prefix(multicolumn, $multicolumn-support-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
// Webkit uses non-standard syntax
|
||||
-webkit-column-break-#{$type}: $value;
|
||||
} @else if $current-prefix == -moz {
|
||||
// Moz uses a different non-standard syntax
|
||||
-moz-page-break-#{$type}: $value;
|
||||
} @else {
|
||||
@include prefix-prop(break-#{$type}, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for setting break-before
|
||||
//
|
||||
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.before {@include break-before(always);}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.before {
|
||||
// -webkit-column-break-before: always;
|
||||
// break-before: always;}
|
||||
@mixin break-before($value: auto){
|
||||
@include column-break(before, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-before($value: auto){
|
||||
@include column-break(before, $value);
|
||||
@warn '"column-break-before" has been deprecated in favor of the official syntax: "break-before".';
|
||||
}
|
||||
|
||||
// Mixin for setting break-after
|
||||
//
|
||||
// * legal values are auto, always, avoid, left, right, page, column, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.after {@include break-after(always); }
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.after {
|
||||
// -webkit-column-break-after: always;
|
||||
// break-after: always; }
|
||||
@mixin break-after($value: auto){
|
||||
@include column-break(after, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-after($value: auto){
|
||||
@include column-break(after, $value);
|
||||
@warn '"column-break-after" has been deprecated in favor of the official syntax: "break-after".';
|
||||
}
|
||||
|
||||
// Mixin for setting break-inside
|
||||
//
|
||||
// * legal values are auto, avoid, avoid-page, avoid-column
|
||||
//
|
||||
// Example:
|
||||
// h2.inside {@include break-inside();}
|
||||
//
|
||||
// Which generates:
|
||||
//
|
||||
// h2.inside {
|
||||
// -webkit-column-break-inside: auto;
|
||||
// break-inside: auto;}
|
||||
@mixin break-inside($value: auto){
|
||||
@include column-break(inside, $value);
|
||||
}
|
||||
|
||||
@mixin column-break-inside($value: auto){
|
||||
@include column-break(inside, $value);
|
||||
@warn '"column-break-inside" has been deprecated in favor of the official syntax: "break-inside".';
|
||||
}
|
||||
|
||||
// Mixin for setting column-span
|
||||
//
|
||||
// * legal values: none, all
|
||||
//
|
||||
// Example:
|
||||
// h2.span {@include column-span();}
|
||||
@mixin column-span($span: all){
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-span: $span
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin for setting column-fill
|
||||
//
|
||||
// * legal values: auto, balance
|
||||
//
|
||||
// Example:
|
||||
// h2.fill {@include column-fill();}
|
||||
@mixin column-fill($fill: balance){
|
||||
@include prefixed-properties(multicolumn, $multicolumn-support-threshold,(
|
||||
column-fill: $fill
|
||||
));
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
@import "compass/support";
|
||||
|
||||
// XXX Remove these
|
||||
$experimental-support-for-mozilla: true !default;
|
||||
$experimental-support-for-webkit: true !default;
|
||||
$experimental-support-for-opera: true !default;
|
||||
$experimental-support-for-microsoft: true !default;
|
||||
$experimental-support-for-khtml: false !default;
|
||||
$experimental-support-for-svg: false !default;
|
||||
$legacy-support-for-ie6: true !default;
|
||||
$legacy-support-for-ie7: true !default;
|
||||
$legacy-support-for-ie8: true !default;
|
||||
$legacy-support-for-mozilla: true !default;
|
||||
$legacy-support-for-webkit: true !default;
|
||||
|
||||
// This mixin provides basic support for CSS3 properties and
|
||||
// their corresponding experimental CSS2 properties when
|
||||
// the implementations are identical except for the property
|
||||
// prefix.
|
||||
@mixin experimental($property, $value,
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $webkit and $experimental-support-for-webkit { -webkit-#{$property} : $value; }
|
||||
@if $khtml and $experimental-support-for-khtml { -khtml-#{$property} : $value; }
|
||||
@if $moz and $experimental-support-for-mozilla { -moz-#{$property} : $value; }
|
||||
@if $ms and $experimental-support-for-microsoft { -ms-#{$property} : $value; }
|
||||
@if $o and $experimental-support-for-opera { -o-#{$property} : $value; }
|
||||
@if $official { #{$property} : $value; }
|
||||
}
|
||||
|
||||
// This mixin is a shortcut for applying only a single experimental value
|
||||
@mixin experimental-only-for($property, $value,
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$official : false
|
||||
) {
|
||||
@include experimental($property, $value, $moz, $webkit, $o, $ms, $khtml, $official);
|
||||
}
|
||||
|
||||
// Same as experimental(), but for cases when the property is the same and the value is vendorized
|
||||
@mixin experimental-value($property, $value,
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$official : true
|
||||
) {
|
||||
@if $webkit and $experimental-support-for-webkit { #{$property} : -webkit-#{$value}; }
|
||||
@if $khtml and $experimental-support-for-khtml { #{$property} : -khtml-#{$value}; }
|
||||
@if $moz and $experimental-support-for-mozilla { #{$property} : -moz-#{$value}; }
|
||||
@if $ms and $experimental-support-for-microsoft { #{$property} : -ms-#{$value}; }
|
||||
@if $o and $experimental-support-for-opera { #{$property} : -o-#{$value}; }
|
||||
@if $official { #{$property} : #{$value}; }
|
||||
}
|
||||
|
||||
// @private
|
||||
// Check a given support list for support of a particular browser
|
||||
@function supported(
|
||||
$prefix,
|
||||
$support-list
|
||||
) {
|
||||
$keys: moz, webkit, o, ms, khtml, official;
|
||||
$index: index($keys, $prefix);
|
||||
|
||||
@if $index {
|
||||
@if $index == 6 and length($support-list) == 5 {
|
||||
@return official;
|
||||
} @else {
|
||||
@return nth($support-list, $index);
|
||||
}
|
||||
} @else {
|
||||
@warn 'Please pass a valid browser for $prefix: moz, webkit, o, ms, khtml, or official.';
|
||||
}
|
||||
}
|
||||
|
||||
// A debug tool for checking browser support
|
||||
@mixin debug-support-matrix($experimental: true, $ie: true) {
|
||||
@debug #{'$moz-'}$experimental-support-for-mozilla
|
||||
#{'$webkit-'}$experimental-support-for-webkit
|
||||
#{'$opera-'}$experimental-support-for-opera
|
||||
#{'$microsoft-'}$experimental-support-for-microsoft
|
||||
#{'$khtml-'}$experimental-support-for-khtml;
|
||||
@debug #{'$ie6-'}$legacy-support-for-ie6
|
||||
#{'$ie7-'}$legacy-support-for-ie7
|
||||
#{'$ie8-'}$legacy-support-for-ie8;
|
||||
}
|
||||
|
||||
// Capture the current exerimental support settings
|
||||
@function capture-experimental-matrix() {
|
||||
@return $experimental-support-for-mozilla
|
||||
$experimental-support-for-webkit
|
||||
$experimental-support-for-opera
|
||||
$experimental-support-for-microsoft
|
||||
$experimental-support-for-khtml;
|
||||
}
|
||||
|
||||
// Capture the current legacy-ie support settings
|
||||
@function capture-legacy-ie-matrix() {
|
||||
@return $legacy-support-for-ie6
|
||||
$legacy-support-for-ie7
|
||||
$legacy-support-for-ie8;
|
||||
}
|
||||
|
||||
// Capture and store support
|
||||
$experimental-matrix: capture-experimental-matrix();
|
||||
$legacy-ie-matrix: capture-legacy-ie-matrix();
|
||||
|
||||
@mixin capture-experimental-matrix {
|
||||
$experimental-matrix: capture-experimental-matrix();
|
||||
}
|
||||
|
||||
@mixin capture-legacy-ie-matrix {
|
||||
$legacy-ie-matrix: capture-legacy-ie-matrix();
|
||||
}
|
||||
|
||||
@mixin capture-support-matrix {
|
||||
@include capture-experimental-matrix;
|
||||
@include capture-legacy-ie-matrix;
|
||||
}
|
||||
|
||||
// Change the experimental-support settings in specific contexts.
|
||||
@mixin set-experimental-support(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false
|
||||
) {
|
||||
$experimental-support-for-mozilla : $moz;
|
||||
$experimental-support-for-webkit : $webkit;
|
||||
$experimental-support-for-opera : $o;
|
||||
$experimental-support-for-microsoft : $ms;
|
||||
$experimental-support-for-khtml : $khtml;
|
||||
}
|
||||
|
||||
@mixin capture-and-set-experimental(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false
|
||||
) {
|
||||
@include capture-experimental-matrix;
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
}
|
||||
|
||||
@mixin capture-and-adjust-experimental(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml
|
||||
) {
|
||||
@include capture-experimental-matrix;
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
}
|
||||
|
||||
// Change the legacy-support-for-ie* settings in specific contexts.
|
||||
@mixin set-legacy-ie-support(
|
||||
$ie6: false,
|
||||
$ie7: false,
|
||||
$ie8: false
|
||||
) {
|
||||
$legacy-support-for-ie6: $ie6;
|
||||
$legacy-support-for-ie7: $ie7;
|
||||
$legacy-support-for-ie8: $ie8;
|
||||
}
|
||||
|
||||
@mixin capture-and-set-legacy-ie(
|
||||
$ie6: false,
|
||||
$ie7: false,
|
||||
$ie8: false
|
||||
) {
|
||||
@include capture-legacy-ie-matrix;
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
@mixin capture-and-adjust-legacy-ie(
|
||||
$ie6: $legacy-support-for-ie6,
|
||||
$ie7: $legacy-support-for-ie7,
|
||||
$ie8: $legacy-support-for-ie8
|
||||
) {
|
||||
@include capture-and-set-legacy-ie($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
// Capture current browser support matrix, and set a new matrix of support.
|
||||
@mixin capture-and-set-support(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$ie6 : false,
|
||||
$ie7 : false,
|
||||
$ie8 : false
|
||||
) {
|
||||
// Capture the current state
|
||||
@include capture-support-matrix;
|
||||
|
||||
// Change support settings
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
// Capture current browser support matrix, and set a new matrix of support.
|
||||
@mixin capture-and-adjust-support(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$ie6 : $legacy-support-for-ie6,
|
||||
$ie7 : $legacy-support-for-ie7,
|
||||
$ie8 : $legacy-support-for-ie8
|
||||
) {
|
||||
@include capture-and-set-support($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8);
|
||||
}
|
||||
|
||||
|
||||
// This mixin allows you to change the experimental support settings for
|
||||
// child (@content) styles.
|
||||
@mixin with-only-support-for(
|
||||
$moz : false,
|
||||
$webkit : false,
|
||||
$o : false,
|
||||
$ms : false,
|
||||
$khtml : false,
|
||||
$ie6 : false,
|
||||
$ie7 : false,
|
||||
$ie8 : false
|
||||
) {
|
||||
// Capture current state
|
||||
$wo-experimental-matrix : capture-experimental-matrix();
|
||||
$wo-legacy-ie-matrix : capture-legacy-ie-matrix();
|
||||
|
||||
// Set new states
|
||||
@include set-experimental-support($moz, $webkit, $o, $ms, $khtml);
|
||||
@include set-legacy-ie-support($ie6, $ie7, $ie8);
|
||||
|
||||
// Apply styles
|
||||
@content;
|
||||
|
||||
// Return to original support settings
|
||||
@include set-experimental-support($wo-experimental-matrix...);
|
||||
@include set-legacy-ie-support($wo-legacy-ie-matrix...);
|
||||
}
|
||||
|
||||
// This mixin is a shortcut for making slight adjustments to browser support
|
||||
// for child (@content) styles
|
||||
@mixin adjust-support-for(
|
||||
$moz : $experimental-support-for-mozilla,
|
||||
$webkit : $experimental-support-for-webkit,
|
||||
$o : $experimental-support-for-opera,
|
||||
$ms : $experimental-support-for-microsoft,
|
||||
$khtml : $experimental-support-for-khtml,
|
||||
$ie6 : $legacy-support-for-ie6,
|
||||
$ie7 : $legacy-support-for-ie7,
|
||||
$ie8 : $legacy-support-for-ie8
|
||||
) {
|
||||
@include with-only-support-for($moz, $webkit, $o, $ms, $khtml, $ie6, $ie7, $ie8) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
// Filter
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for css filter effects.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$filter-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Provides cross-browser support for the upcoming (?) css3 filter property.
|
||||
//
|
||||
// The filter argument should adhere to the standard css3 syntax
|
||||
// for the filter property.
|
||||
@mixin filter($filters) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter: $filters
|
||||
));
|
||||
}
|
||||
|
||||
// @private Apply filter-margins
|
||||
@mixin apply-filter-margin($position, $width) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter-margin-#{$position}: $width
|
||||
));
|
||||
}
|
||||
|
||||
// filter-margin-top
|
||||
@mixin filter-margin-top($width) { @include apply-filter-margin(top, $width); }
|
||||
|
||||
// filter-margin-right
|
||||
@mixin filter-margin-right($width) { @include apply-filter-margin(right, $width); }
|
||||
|
||||
// filter-margin-bottom
|
||||
@mixin filter-margin-bottom($width) { @include apply-filter-margin(bottom, $width); }
|
||||
|
||||
// filter-margin-left
|
||||
@mixin filter-margin-left($width) { @include apply-filter-margin(left, $width); }
|
||||
|
||||
// filter-margin
|
||||
@mixin filter-margin($widths) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
filter-margin: $widths
|
||||
));
|
||||
}
|
||||
|
||||
// color-interpolation-filters (auto | sRGB | linearRGB )
|
||||
@mixin color-interpolation-filters($value) {
|
||||
@include prefixed-properties(css-filters, $filter-support-threshold,(
|
||||
color-interpolation-filters: $value
|
||||
));
|
||||
}
|
||||
@@ -0,0 +1,156 @@
|
||||
// There are two ways to use the flexbox module.
|
||||
// If you're using the final version of the spec,
|
||||
// you can use the property mixins as elsewhere in
|
||||
// the css3 module.
|
||||
//
|
||||
// You can also use the flexbox prefixing mixin `flexbox`.
|
||||
// This mixin takes an optional `$version` argument which
|
||||
// allows you to specify which spec version the properties
|
||||
// are using so that they will be prefixed correctly.
|
||||
//
|
||||
// Example:
|
||||
//
|
||||
// .flex-column {
|
||||
// /* For flexbox spec v1 */
|
||||
// @include flexbox((
|
||||
// display: box,
|
||||
// box-orient: vertical,
|
||||
// ), $version: 1);
|
||||
//
|
||||
// /* For flexbox spec v2 */
|
||||
// @include flexbox((
|
||||
// display: flexbox,
|
||||
// flex-direction: column,
|
||||
// ), $version: 2);
|
||||
//
|
||||
// /* Latest Spec */
|
||||
// @include flexbox((
|
||||
// display: flex,
|
||||
// flex-direction: column,
|
||||
// ));
|
||||
// }
|
||||
//
|
||||
// Which compiles to:
|
||||
//
|
||||
// .flex-row {
|
||||
// /* For flexbox spec v1 */
|
||||
// display: -moz-box;
|
||||
// -moz-box-orient: vertical;
|
||||
// display: -webkit-box;
|
||||
// -webkit-box-orient: vertical;
|
||||
//
|
||||
// /* For flexbox spec v2 */
|
||||
// display: -ms-flexbox;
|
||||
// -ms-flex-direction: column;
|
||||
//
|
||||
// /* Latest Spec */
|
||||
// display: -webkit-flex;
|
||||
// -webkit-flex-direction: column;
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// }
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
$flexbox-support-threshold: $critical-usage-threshold !default;
|
||||
|
||||
|
||||
// @private
|
||||
$flexbox-capability-options: (
|
||||
(full-support: true),
|
||||
(partial-support: true, spec-versions: 3)
|
||||
);
|
||||
|
||||
// This is the underlying implementation for all the other mixins in this module.
|
||||
// It is the only way to access prefix support for older versions of the spec.
|
||||
//
|
||||
// `$properties`: map of property-value pairs that should be prefixed
|
||||
|
||||
// `$version1: the version of the spec to use when considering what prefix
|
||||
// to appply. Defaults to the most recent (spec version 3). Only the most
|
||||
// recent version of the spec outputs an unprefixed version.
|
||||
@mixin flexbox($properties, $version: null) {
|
||||
$capability-options: $flexbox-capability-options;
|
||||
@if $version {
|
||||
$capability-options: (partial-support: true, spec-versions: $version);
|
||||
}
|
||||
|
||||
@include with-each-prefix(flexbox, $flexbox-support-threshold, $capability-options) {
|
||||
// Don't output unprefixed versions when the spec version is not the final version
|
||||
@if $version and $current-prefix or not $version or $version == 3 {
|
||||
@each $prop, $value in $properties {
|
||||
@if $prop == display {
|
||||
display: prefix-identifier($value);
|
||||
} @else {
|
||||
@include prefix-prop($prop, $value);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Values for $display are: flex (default), inline-flex
|
||||
@mixin display-flex($display: flex) {
|
||||
@include flexbox((display: $display));
|
||||
}
|
||||
|
||||
// Values: row | row-reverse | column | column-reverse
|
||||
@mixin flex-direction($direction) {
|
||||
@include flexbox((flex-direction: $direction));
|
||||
}
|
||||
|
||||
// Values: nowrap | wrap | wrap-reverse
|
||||
@mixin flex-wrap($wrap) {
|
||||
@include flexbox((flex-wrap: $wrap));
|
||||
}
|
||||
|
||||
// Shorthand for flex-direction and flex-wrap.
|
||||
@mixin flex-flow($flow) {
|
||||
@include flexbox((flex-flow: $flow));
|
||||
}
|
||||
|
||||
// Accepts an integer
|
||||
@mixin order($order) {
|
||||
@include flexbox((order: $order));
|
||||
}
|
||||
|
||||
// Shorthand for flex-grow, flex-shrink and optionally flex-basis.
|
||||
// Space separated, in that order.
|
||||
@mixin flex($flex) {
|
||||
@include flexbox((flex: $flex));
|
||||
}
|
||||
|
||||
// Accepts a number.
|
||||
@mixin flex-grow($flex-grow) {
|
||||
@include flexbox((flex-grow: $flex-grow));
|
||||
}
|
||||
|
||||
// Accepts a number.
|
||||
@mixin flex-shrink($flex-shrink) {
|
||||
@include flexbox((flex-shrink: $flex-shrink));
|
||||
}
|
||||
|
||||
// Accepts any legal value for the width property.
|
||||
@mixin flex-basis($flex-basis) {
|
||||
@include flexbox((flex-basis: $flex-basis));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | space-between | space-around
|
||||
@mixin justify-content($justify-content) {
|
||||
@include flexbox((justify-content: $justify-content));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | baseline | stretch
|
||||
@mixin align-items($align-items) {
|
||||
@include flexbox((align-items: $align-items));
|
||||
}
|
||||
|
||||
// Legal values: auto | flex-start | flex-end | center | baseline | stretch
|
||||
@mixin align-self($align-self) {
|
||||
@include flexbox((align-self: $align-self));
|
||||
}
|
||||
|
||||
// Legal values: flex-start | flex-end | center | space-between | space-around | stretch
|
||||
@mixin align-content($align-content) {
|
||||
@include flexbox((align-content: $align-content));
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
@import "compass/support";
|
||||
|
||||
// Cross-browser support for @font-face. Supports IE, Gecko, Webkit, Opera.
|
||||
//
|
||||
// * $name is required, arbitrary, and what you will use in font stacks.
|
||||
// * $font-files is required using font-files('relative/location', 'format').
|
||||
// for best results use this order: woff, opentype/truetype, svg
|
||||
// * $eot is required by IE, and is a relative location of the eot file.
|
||||
// * $weight shows if the font is bold, defaults to normal
|
||||
// * $style defaults to normal, might be also italic
|
||||
// * For android 2.2 Compatiblity, please ensure that your web page has
|
||||
// a meta viewport tag.
|
||||
// * To support iOS < 4.2, an SVG file must be provided
|
||||
//
|
||||
// If you need to generate other formats check out the Font Squirrel
|
||||
// [font generator](http://www.fontsquirrel.com/fontface/generator)
|
||||
//
|
||||
|
||||
// In order to refer to a specific style of the font in your stylesheets as
|
||||
// e.g. "font-style: italic;", you may add a couple of @font-face includes
|
||||
// containing the respective font files for each style and specying
|
||||
// respective the $style parameter.
|
||||
|
||||
// Order of the includes matters, and it is: normal, bold, italic, bold+italic.
|
||||
|
||||
@mixin font-face(
|
||||
$name,
|
||||
$font-files,
|
||||
$eot: false,
|
||||
$weight: false,
|
||||
$style: false
|
||||
) {
|
||||
$iefont: unquote("#{$eot}?#iefix");
|
||||
@font-face {
|
||||
font-family: quote($name);
|
||||
@if $eot {
|
||||
src: font-url($eot);
|
||||
$font-files: font-url($iefont) unquote("format('embedded-opentype')"), $font-files;
|
||||
}
|
||||
src: $font-files;
|
||||
@if $weight {
|
||||
font-weight: $weight;
|
||||
}
|
||||
@if $style {
|
||||
font-style: $style;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// Mixins to support specific CSS Text Level 3 elements
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for hyphens support.
|
||||
// Defaults to `$graceful-usage-threshold`.
|
||||
$hyphens-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Mixin for word-break properties
|
||||
// http://www.w3.org/css3-text/#word-break
|
||||
// * legal values for $type : normal, keep-all, break-all
|
||||
//
|
||||
// Example:
|
||||
// p.wordBreak {@include word-break(break-all);}
|
||||
//
|
||||
// Which generates:
|
||||
// p.wordBreak {
|
||||
// word-break: break-all;
|
||||
// word-break: break-word;}
|
||||
//
|
||||
@mixin word-break($value: normal){
|
||||
word-break: $value;
|
||||
@if $value == break-all {
|
||||
//Webkit handles break-all differently... as break-word
|
||||
@include with-prefix(-webkit) {
|
||||
word-break: break-word;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Mixin for the hyphens property
|
||||
//
|
||||
// W3C specification: http://www.w3.org/TR/css3-text/#hyphens
|
||||
// * legal values for $type : auto, manual, none
|
||||
//
|
||||
// Example:
|
||||
// p {
|
||||
// @include hyphens(auto);}
|
||||
// Which generates:
|
||||
// p {
|
||||
// -moz-hyphens: auto;
|
||||
// -webkit-hyphens: auto;
|
||||
// hyphens: auto;}
|
||||
//
|
||||
@mixin hyphens($value: auto){
|
||||
@include prefixed-properties(css-hyphens, $hyphens-support-threshold, (
|
||||
hyphens: $value
|
||||
));
|
||||
}
|
||||
|
||||
// Mixin for x-browser hyphenation based on @auchenberg's post:
|
||||
// Removes the need for the <wbr/> HTML tag
|
||||
// http://blog.kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
|
||||
//
|
||||
// Example:
|
||||
// div {@include hyphenation;}
|
||||
//
|
||||
// Which generates:
|
||||
// div {
|
||||
// -ms-word-break: break-all;
|
||||
// word-break: break-all;
|
||||
// word-break: break-word;
|
||||
// -moz-hyphens: auto;
|
||||
// -webkit-hyphens: auto;
|
||||
// hyphens: auto;}
|
||||
//
|
||||
@mixin hyphenation {
|
||||
@include word-break(break-all);
|
||||
@include hyphens;
|
||||
}
|
||||
@@ -0,0 +1,152 @@
|
||||
@import "compass/support";
|
||||
@import "compass/utilities/general/hacks";
|
||||
|
||||
$gradient-support-threshold: $graceful-usage-threshold !default;
|
||||
$svg-gradient-shim-threshold: $graceful-usage-threshold !default;
|
||||
$border-image-support-threshold: $graceful-usage-threshold !default;
|
||||
$owg-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Compass assumes you will use the official gradient syntax,
|
||||
// unless otherwise instructed.
|
||||
$use-legacy-gradient-syntax: false !default;
|
||||
|
||||
// Create a linear gradient using standard official or legacy syntax.
|
||||
// This function must be included in one of the following
|
||||
// image module mixins to work properly.
|
||||
@function linear-gradient($angle, $details...) {
|
||||
$legacy-syntax: $use-legacy-gradient-syntax;
|
||||
|
||||
@if type-of($angle) != 'number' {
|
||||
$angle: compact($angle);
|
||||
$legacy-syntax: if(index($angle, 'to'), false, true);
|
||||
}
|
||||
|
||||
@if $legacy-syntax {
|
||||
@return _linear-gradient_legacy($angle, $details...);
|
||||
} @else {
|
||||
@return _linear-gradient($angle, $details...);
|
||||
}
|
||||
}
|
||||
|
||||
// These browsers support svg but not gradients
|
||||
// so we can shim the gradient with an inline svg file.
|
||||
$browsers-supporting-svg-but-not-gradients: (ie: "9", opera: "9.5-9.6");
|
||||
|
||||
// These browsers require the old webkit gradient syntax
|
||||
$browsers-supporting-old-webkit-gradients: (android: ("2.1", "3"));
|
||||
|
||||
@mixin each-gradient-prefix($values) {
|
||||
@if prefixed(-svg, $values) {
|
||||
@include for-legacy-browsers($browsers-supporting-svg-but-not-gradients,
|
||||
$svg-gradient-shim-threshold)
|
||||
{
|
||||
@include with-prefix(-svg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@if prefixed(-owg, $values) {
|
||||
@include for-legacy-browsers($browsers-supporting-old-webkit-gradients,
|
||||
$owg-threshold)
|
||||
{
|
||||
@include with-prefix(-owg) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include with-each-prefix(css-gradients, $gradient-support-threshold) {
|
||||
@if $current-prefix {
|
||||
@if prefixed($current-prefix, $values) {
|
||||
@content;
|
||||
} @else if $debug-browser-support {
|
||||
/* There is not a value that needs to be prefixed with #{$current-prefix} in: #{$values} */
|
||||
}
|
||||
} @else {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin image-property($property, $values...) {
|
||||
@include each-gradient-prefix($values) {
|
||||
@if $current-prefix {
|
||||
#{$property}: prefix($current-prefix, $values);
|
||||
} @else {
|
||||
#{$property}: $values;
|
||||
}
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
// Background property support for vendor prefixing within values.
|
||||
@mixin background($backgrounds...) {
|
||||
@include image-property(background, $backgrounds...);
|
||||
}
|
||||
|
||||
// Set any number of background layers, along with a fallback.
|
||||
// The final argument will be output separately, first, as a css2 fallback.
|
||||
@mixin background-with-css2-fallback($backgrounds...) {
|
||||
@if length($backgrounds) > 1 or prefixed(-css2, $backgrounds) {
|
||||
background: -css2(nth($backgrounds, -1));
|
||||
}
|
||||
@include background($backgrounds...);
|
||||
}
|
||||
|
||||
|
||||
// Background image property support for vendor prefixing within values.
|
||||
@mixin background-image($images...) {
|
||||
@include image-property(background-image, $images...) {
|
||||
@if $current-prefix == -svg {
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Emit a IE-Specific filters that renders a simple linear gradient.
|
||||
// For use in IE 6 - 8. Best practice would have you apply this via a
|
||||
// conditional IE stylesheet, but if you must, you should place this before
|
||||
// any background-image properties that you have specified.
|
||||
//
|
||||
// For the `$orientation` parameter, you can pass `vertical` or `horizontal`.
|
||||
@mixin filter-gradient(
|
||||
$start-color,
|
||||
$end-color,
|
||||
$orientation: vertical
|
||||
) {
|
||||
@include for-legacy-browsers((ie: "8"), $gradient-support-threshold) {
|
||||
@include has-layout;
|
||||
$gradient-type: if($orientation == vertical, 0, 1);
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=#{$gradient-type}, startColorstr='#{ie-hex-str($start-color)}', endColorstr='#{ie-hex-str($end-color)}');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Border image property support for vendor prefixing properties and values.
|
||||
@mixin border-image($value) {
|
||||
@include with-each-prefix(border-image, $border-image-support-threshold) {
|
||||
$border-prefix: $current-prefix;
|
||||
@include each-gradient-prefix($value) {
|
||||
@if $current-prefix and prefixed($current-prefix, $value) {
|
||||
$legacy-value: reject($value, fill);
|
||||
@include prefix-prop(border-image, prefix($current-prefix, $legacy-value), $prefix: $border-prefix);
|
||||
} @else {
|
||||
@include prefix-prop(border-image, $value, $prefix: $border-prefix);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// List style image property support for vendor prefixing within values.
|
||||
@mixin list-style-image($image) {
|
||||
@include image-property(list-style-image, $image);
|
||||
}
|
||||
|
||||
// List style property support for vendor prefixing within values.
|
||||
@mixin list-style($value) {
|
||||
@include image-property(list-style, $value);
|
||||
}
|
||||
|
||||
// content property support for vendor prefixing within values.
|
||||
@mixin content($value) {
|
||||
@include image-property(content, $value);
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
@import "compass/support";
|
||||
|
||||
// The legacy support for inline-block.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$inline-block-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Set `$inline-block-alignment` to `none` or `false` to disable the output
|
||||
// of a vertical-align property in the inline-block mixin.
|
||||
// Or set it to a legal value for `vertical-align` to change the default.
|
||||
$inline-block-alignment: middle !default;
|
||||
|
||||
// Provides a cross-browser method to implement `display: inline-block;`
|
||||
@mixin inline-block($alignment: $inline-block-alignment, $ie-alignment: auto) {
|
||||
// legacy support for VERY old firefox
|
||||
@if support-legacy-browser("firefox", "2", $threshold: $inline-block-support-threshold) {
|
||||
display: -moz-inline-stack;
|
||||
}
|
||||
// standard
|
||||
display: inline-block;
|
||||
@if $alignment and $alignment != none {
|
||||
vertical-align: $alignment;
|
||||
}
|
||||
// legacy IE support
|
||||
@if support-legacy-browser("ie", "7", $threshold: $inline-block-support-threshold) {
|
||||
@if $ie-alignment and $ie-alignment != none {
|
||||
*vertical-align: $ie-alignment;
|
||||
}
|
||||
*zoom: 1;
|
||||
*display: inline;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
@import "compass/support";
|
||||
|
||||
// The support usage threshold for opacity. Defaults to the global
|
||||
// threshold for graceful degradation.
|
||||
$opacity-usage-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Provides cross-browser CSS opacity. Takes a number between 0 and 1 as the argument, e.g. 0.5 for 50% opacity.
|
||||
//
|
||||
// @param $opacity
|
||||
// A number between 0 and 1, where 0 is transparent and 1 is opaque.
|
||||
|
||||
@mixin opacity($opacity) {
|
||||
@include for-legacy-browser("ie", "8", $threshold: $opacity-usage-threshold) {
|
||||
@if $opacity == 1 {
|
||||
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(enabled=false)");
|
||||
} @else {
|
||||
filter: unquote("progid:DXImageTransform.Microsoft.Alpha(Opacity=#{round($opacity * 100)})");
|
||||
}
|
||||
}
|
||||
opacity: $opacity;
|
||||
}
|
||||
|
||||
// Make an element completely transparent.
|
||||
@mixin transparent { @include opacity(0); }
|
||||
|
||||
// Make an element completely opaque.
|
||||
@mixin opaque { @include opacity(1); }
|
||||
@@ -0,0 +1 @@
|
||||
@warn "Support for CSS3Pie has been removed.";
|
||||
@@ -0,0 +1,27 @@
|
||||
// Regions
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for css regions.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$regions-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// Webkit, IE10 and future support for [CSS Regions](http://dev.w3.org/csswg/css3-regions/)
|
||||
//
|
||||
// $target is a value you use to link two regions of your css.
|
||||
// Give the source of your content the flow-into property,
|
||||
// and give your target container the flow-from property.
|
||||
//
|
||||
// For a visual explanation, see the diagrams at Chris Coyier's
|
||||
// [CSS-Tricks](http://css-tricks.com/content-folding/)
|
||||
|
||||
@mixin flow-into($target) {
|
||||
$target: unquote($target);
|
||||
@include prefixed-properties(css-regions, $regions-support-threshold, (flow-into: $target));
|
||||
}
|
||||
|
||||
@mixin flow-from($target) {
|
||||
$target: unquote($target);
|
||||
@include prefixed-properties(css-regions, $regions-support-threshold, (flow-from: $target));
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
@import "compass/support";
|
||||
@import "compass/utilities/color";
|
||||
|
||||
// The prefixed support threshold for ::selection.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$selection-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Style selected text.
|
||||
//
|
||||
// At this time, only two CSS properties are supported in most browsers
|
||||
// during selection: color and background-color. Firefox supports the
|
||||
// text-shadow property.
|
||||
//
|
||||
// At the stylesheet root, include the mixin within the * selector.
|
||||
//
|
||||
// * {
|
||||
// @include selection(#fe57a1, #fff)
|
||||
// }
|
||||
//
|
||||
// If a specific element or selector's selection is being styled
|
||||
// you can use that selector instead. For example:
|
||||
//
|
||||
// .hot-pink {
|
||||
// @include selection(#fe57a1, #fff)
|
||||
// }
|
||||
//
|
||||
// These properties can be passed as arguments or you can set them via mixin
|
||||
// content.
|
||||
//
|
||||
// For future-forward compatibility with other properties and aesthetic freedom,
|
||||
// a mixin content block can be passed to this mixin in addition to or in place of
|
||||
// passing arguments.
|
||||
//
|
||||
// .hot-pink {
|
||||
// @include selection {
|
||||
// background: #fe57a1;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// When `$background-color` is specified, but `$color` is not, this mixin
|
||||
// styles the foreground color like the [contrasted
|
||||
// mixin](/reference/compass/utilities/color/contrast/#mixin-contrasted). To
|
||||
// specify only the background-color, you should pass an explicit `null` value
|
||||
// for `$color` or use mixin content.
|
||||
@mixin selection($background-color: null, $color: contrast-color($background-color)) {
|
||||
@include with-each-prefix(css-selection, $selection-support-threshold) {
|
||||
$selector: '';
|
||||
@if $current-prefix != null {
|
||||
$selector: $current-prefix + '-';
|
||||
}
|
||||
$selector: "&::#{$selector}selection";
|
||||
#{$selector} {
|
||||
color: $color;
|
||||
background-color: $background-color;
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
@warn "The compass/css3/shared module has been deprecated.
|
||||
You can silence this warning by importing compass/css3/deprecated-support instead.
|
||||
Please be aware that module will be removed in the next release.";
|
||||
|
||||
@import "deprecated-support";
|
||||
@@ -0,0 +1,82 @@
|
||||
// Text Shadow
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
|
||||
// These defaults make the arguments optional for this mixin
|
||||
// If you like, set different defaults in your project
|
||||
|
||||
$default-text-shadow-color : #aaaaaa !default;
|
||||
$default-text-shadow-h-offset : 0px !default;
|
||||
$default-text-shadow-v-offset : 0px !default;
|
||||
$default-text-shadow-blur : 1px !default;
|
||||
$default-text-shadow-spread : false !default;
|
||||
|
||||
|
||||
// Provides cross-browser text shadows when one or more shadows are needed.
|
||||
// Each shadow argument should adhere to the standard css3 syntax for the
|
||||
// text-shadow property.
|
||||
//
|
||||
// Note: if any shadow has a spread parameter, this will cause the mixin
|
||||
// to emit the shadow declaration twice, first without the spread,
|
||||
// then with the spread included. This allows you to progressively
|
||||
// enhance the browsers that do support the spread parameter.
|
||||
@mixin text-shadow(
|
||||
$shadow...
|
||||
) {
|
||||
$shadow: if(length($shadow) > 0, $shadow, default);
|
||||
$default: -compass-space-list(compact($default-text-shadow-h-offset $default-text-shadow-v-offset $default-text-shadow-blur $default-text-shadow-spread $default-text-shadow-color));
|
||||
$shadows-without-spread: join((),(),comma);
|
||||
$shadows: join((),(),comma);
|
||||
$has-spread: false;
|
||||
|
||||
@each $layer in $shadow {
|
||||
$layer: if($layer == 'default', $default, $layer);
|
||||
@if length($layer) > 4 {
|
||||
$has-spread: true;
|
||||
$shadows-without-spread: append($shadows-without-spread, nth($layer,1) nth($layer,2) nth($layer,3) nth($layer,5));
|
||||
$shadows: append($shadows, $layer);
|
||||
} @else {
|
||||
$shadows-without-spread: append($shadows-without-spread, $layer);
|
||||
$shadows: append($shadows, $layer);
|
||||
}
|
||||
}
|
||||
@if $has-spread {
|
||||
text-shadow: $shadows-without-spread;
|
||||
}
|
||||
text-shadow: $shadows;
|
||||
}
|
||||
|
||||
// Provides a single cross-browser CSS text shadow.
|
||||
//
|
||||
// Provides sensible defaults for the color, horizontal offset, vertical offset, blur, and spread
|
||||
// according to the configuration defaults above.
|
||||
@mixin single-text-shadow(
|
||||
$hoff: false,
|
||||
$voff: false,
|
||||
$blur: false,
|
||||
$spread: false,
|
||||
$color: false
|
||||
) {
|
||||
// A lot of people think the color comes first. It doesn't.
|
||||
@if type-of($hoff) == color {
|
||||
$temp-color: $hoff;
|
||||
$hoff: $voff;
|
||||
$voff: $blur;
|
||||
$blur: $spread;
|
||||
$spread: $color;
|
||||
$color: $temp-color;
|
||||
}
|
||||
// Can't rely on default assignment with multiple supported argument orders.
|
||||
$hoff: if($hoff, $hoff, $default-text-shadow-h-offset);
|
||||
$voff: if($voff, $voff, $default-text-shadow-v-offset);
|
||||
$blur: if($blur, $blur, $default-text-shadow-blur );
|
||||
$spread: if($spread, $spread, $default-text-shadow-spread );
|
||||
$color: if($color, $color, $default-text-shadow-color );
|
||||
// We don't need experimental support for this property.
|
||||
@if $color == none or $hoff == none {
|
||||
@include text-shadow(none);
|
||||
} @else {
|
||||
@include text-shadow(compact($hoff $voff $blur $spread $color));
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,590 @@
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for transform support. Defaults to `$graceful-usage-threshold`
|
||||
$transform-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// @doc off
|
||||
// Note ----------------------------------------------------------------------
|
||||
// Safari, Chrome, and Firefox all support 3D transforms. However,
|
||||
// only in the most recent builds. You should also provide fallback 2d support for
|
||||
// Opera and IE. IE10 is slated to have 3d enabled, but is currently unreleased.
|
||||
// To make that easy, all 2D transforms include an browser-targeting toggle ($only3d)
|
||||
// to switch between the two support lists. The toggle defaults to 'false' (2D),
|
||||
// and also accepts 'true' (3D). Currently the lists are as follows:
|
||||
// 2D: Mozilla, Webkit, Opera, Official
|
||||
// 3D: Webkit, Firefox.
|
||||
|
||||
// Available Transforms ------------------------------------------------------
|
||||
// - Scale (2d and 3d)
|
||||
// - Rotate (2d and 3d)
|
||||
// - Translate (2d and 3d)
|
||||
// - Skew (2d only)
|
||||
|
||||
// Transform Parameters ------------------------------------------------------
|
||||
// - Transform Origin (2d and 3d)
|
||||
// - Perspective (3d)
|
||||
// - Perspective Origin (3d)
|
||||
// - Transform Style (3d)
|
||||
// - Backface Visibility (3d)
|
||||
|
||||
// Mixins --------------------------------------------------------------------
|
||||
// transform-origin
|
||||
// - shortcuts: transform-origin2d, transform-origin3d
|
||||
// - helpers: apply-origin
|
||||
// transform
|
||||
// - shortcuts: transform2d, transform3d
|
||||
// - helpers: simple-transform, create-transform
|
||||
// perspective
|
||||
// - helpers: perspective-origin
|
||||
// transform-style
|
||||
// backface-visibility
|
||||
// scale
|
||||
// - shortcuts: scaleX, scaleY, scaleZ, scale3d
|
||||
// rotate
|
||||
// - shortcuts: rotateX, rotateY, rotate3d
|
||||
// translate
|
||||
// - shortcuts: translateX, translateY, translateZ, translate3d
|
||||
// skew
|
||||
// - shortcuts: skewX, skewY
|
||||
|
||||
// Defaults ------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// The default x-origin for transforms
|
||||
$default-origin-x : 50% !default;
|
||||
// The default y-origin for transforms
|
||||
$default-origin-y : 50% !default;
|
||||
// The default z-origin for transforms
|
||||
$default-origin-z : 50% !default;
|
||||
|
||||
|
||||
// The default x-multiplier for scaling
|
||||
$default-scale-x : 1.25 !default;
|
||||
// The default y-multiplier for scaling
|
||||
$default-scale-y : $default-scale-x !default;
|
||||
// The default z-multiplier for scaling
|
||||
$default-scale-z : $default-scale-x !default;
|
||||
|
||||
|
||||
// The default angle for rotations
|
||||
$default-rotate : 45deg !default;
|
||||
|
||||
|
||||
// The default x-vector for the axis of 3d rotations
|
||||
$default-vector-x : 1 !default;
|
||||
// The default y-vector for the axis of 3d rotations
|
||||
$default-vector-y : 1 !default;
|
||||
// The default z-vector for the axis of 3d rotations
|
||||
$default-vector-z : 1 !default;
|
||||
|
||||
|
||||
// The default x-length for translations
|
||||
$default-translate-x : 1em !default;
|
||||
// The default y-length for translations
|
||||
$default-translate-y : $default-translate-x !default;
|
||||
// The default z-length for translations
|
||||
$default-translate-z : $default-translate-x !default;
|
||||
|
||||
|
||||
// The default x-angle for skewing
|
||||
$default-skew-x : 5deg !default;
|
||||
// The default y-angle for skewing
|
||||
$default-skew-y : 5deg !default;
|
||||
|
||||
|
||||
// **Transform-origin**
|
||||
// Transform-origin sent as a complete string
|
||||
//
|
||||
// @include apply-origin( origin [, 3D-only ] )
|
||||
//
|
||||
// where 'origin' is a space separated list containing 1-3 (x/y/z) coordinates
|
||||
// in percentages, absolute (px, cm, in, em etc..) or relative
|
||||
// (left, top, right, bottom, center) units
|
||||
//
|
||||
// @param only3d Set this to true to only apply this
|
||||
// mixin where browsers have 3D support.
|
||||
@mixin apply-origin($origin, $only3d) {
|
||||
$capability: if($only3d or length($origin) > 2, transforms3d, transforms2d);
|
||||
@include prefixed-properties($capability, $transform-support-threshold, (
|
||||
transform-origin: $origin
|
||||
));
|
||||
}
|
||||
|
||||
// Transform-origin sent as individual arguments:
|
||||
//
|
||||
// @include transform-origin( [ origin-x, origin-y, origin-z, 3D-only ] )
|
||||
//
|
||||
// where the 3 'origin-' arguments represent x/y/z coordinates.
|
||||
//
|
||||
// **NOTE:** setting z coordinates triggers 3D support list, leave false for 2D support
|
||||
@mixin transform-origin(
|
||||
$origin-x: $default-origin-x,
|
||||
$origin-y: $default-origin-y,
|
||||
$origin-z: false,
|
||||
$only3d: if($origin-z, true, false)
|
||||
) {
|
||||
$origin: unquote('');
|
||||
@if $origin-x or $origin-y or $origin-z {
|
||||
@if $origin-x { $origin: $origin-x; } @else { $origin: 50%; }
|
||||
@if $origin-y { $origin: $origin $origin-y; } @else { @if $origin-z { $origin: $origin 50%; }}
|
||||
@if $origin-z { $origin: $origin $origin-z; }
|
||||
@include apply-origin($origin, $only3d);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Transform sent as a complete string:
|
||||
//
|
||||
// @include transform( transforms [, 3D-only ] )
|
||||
//
|
||||
// where 'transforms' is a space separated list of all the transforms to be applied.
|
||||
@mixin transform(
|
||||
$transform,
|
||||
$only3d: false
|
||||
) {
|
||||
$capability: if($only3d, transforms3d, transforms2d);
|
||||
@include prefixed-properties($capability, $transform-support-threshold, (
|
||||
transform: $transform
|
||||
));
|
||||
}
|
||||
|
||||
// Shortcut to target all browsers with 2D transform support
|
||||
@mixin transform2d($trans) {
|
||||
@include transform($trans, false);
|
||||
}
|
||||
|
||||
// Shortcut to target only browsers with 3D transform support
|
||||
@mixin transform3d($trans) {
|
||||
@include transform($trans, true);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// 3D Parameters -------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Set the perspective of 3D transforms on the children of an element:
|
||||
//
|
||||
// @include perspective( perspective )
|
||||
//
|
||||
// where 'perspective' is a unitless number representing the depth of the
|
||||
// z-axis. The higher the perspective, the more exaggerated the foreshortening.
|
||||
// values from 500 to 1000 are more-or-less "normal" - a good starting-point.
|
||||
@mixin perspective($p) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
perspective: $p
|
||||
));
|
||||
}
|
||||
|
||||
// Set the origin position for the perspective
|
||||
//
|
||||
// @include perspective-origin(origin-x [origin-y])
|
||||
//
|
||||
// where the two arguments represent x/y coordinates
|
||||
@mixin perspective-origin($origin: 50%) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
perspective-origin: $origin
|
||||
));
|
||||
}
|
||||
|
||||
// Determine whether a 3D objects children also live in the given 3D space
|
||||
//
|
||||
// @include transform-style( [ style ] )
|
||||
//
|
||||
// where `style` can be either `flat` or `preserve-3d`.
|
||||
// Browsers default to `flat`, mixin defaults to `preserve-3d`.
|
||||
@mixin transform-style($style: preserve-3d) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
transform-style: $style
|
||||
));
|
||||
}
|
||||
|
||||
// Determine the visibility of an element when it's back is turned
|
||||
//
|
||||
// @include backface-visibility( [ visibility ] )
|
||||
//
|
||||
// where `visibility` can be either `visible` or `hidden`.
|
||||
// Browsers default to visible, mixin defaults to hidden
|
||||
@mixin backface-visibility($visibility: hidden) {
|
||||
@include prefixed-properties(transforms3d, $transform-support-threshold, (
|
||||
backface-visibility: $visibility
|
||||
));
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Transform Partials --------------------------------------------------------
|
||||
// These work well on their own, but they don't add to each other, they override.
|
||||
// Use along with transform parameter mixins to adjust origin, perspective and style
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
|
||||
// Scale ---------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Scale an object along the x and y axis:
|
||||
//
|
||||
// @include scale( [ scale-x, scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// where the 'scale-' arguments are unitless multipliers of the x and y dimensions
|
||||
// and perspective, which works the same as the stand-alone perspective property/mixin
|
||||
// but applies to the individual element (multiplied with any parent perspective)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scale($scale-x, $scale-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the x axis
|
||||
// @include scaleX( [ scale-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleX(
|
||||
$scale: $default-scale-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleX($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the y axis
|
||||
// @include scaleY( [ scale-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleY(
|
||||
$scale: $default-scale-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: scaleY($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Scale an object along the z axis
|
||||
// @include scaleZ( [ scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scaleZ(
|
||||
$scale: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scaleZ($scale);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Scale and object along all three axis
|
||||
// @include scale3d( [ scale-x, scale-y, scale-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin scale3d(
|
||||
$scale-x: $default-scale-x,
|
||||
$scale-y: $default-scale-y,
|
||||
$scale-z: $default-scale-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: scale3d($scale-x, $scale-y, $scale-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Rotate --------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Rotate an object around the z axis (2D)
|
||||
// @include rotate( [ rotation, perspective, 3D-only ] )
|
||||
// where 'rotation' is an angle set in degrees (deg) or radian (rad) units
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: rotate($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// A longcut for 'rotate' in case you forget that 'z' is implied
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateZ(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
@include rotate($rotate, $perspective, $only3d);
|
||||
}
|
||||
|
||||
// Rotate an object around the x axis (3D)
|
||||
// @include rotateX( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateX(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateX($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around the y axis (3D)
|
||||
// @include rotate( [ rotation, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotateY(
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotateY($rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Rotate an object around an arbitrary axis (3D)
|
||||
// @include rotate( [ vector-x, vector-y, vector-z, rotation, perspective ] )
|
||||
// where the 'vector-' arguments accept unitless numbers.
|
||||
// These numbers are not important on their own, but in relation to one another
|
||||
// creating an axis from your transform-origin, along the axis of Xx = Yy = Zz.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin rotate3d(
|
||||
$vector-x: $default-vector-x,
|
||||
$vector-y: $default-vector-y,
|
||||
$vector-z: $default-vector-z,
|
||||
$rotate: $default-rotate,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: rotate3d($vector-x, $vector-y, $vector-z, $rotate);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Translate -----------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Move an object along the x or y axis (2D)
|
||||
// @include translate( [ translate-x, translate-y, perspective, 3D-only ] )
|
||||
// where the 'translate-' arguments accept any distance in percentages or absolute (px, cm, in, em etc..) units.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translate($translate-x, $translate-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the x axis (2D)
|
||||
// @include translate( [ translate-x, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateX(
|
||||
$trans-x: $default-translate-x,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateX($trans-x);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the y axis (2D)
|
||||
// @include translate( [ translate-y, perspective, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateY(
|
||||
$trans-y: $default-translate-y,
|
||||
$perspective: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: translateY($trans-y);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Move an object along the z axis (3D)
|
||||
// @include translate( [ translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translateZ(
|
||||
$trans-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translateZ($trans-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// Move an object along the x, y and z axis (3D)
|
||||
// @include translate( [ translate-x, translate-y, translate-z, perspective ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin translate3d(
|
||||
$translate-x: $default-translate-x,
|
||||
$translate-y: $default-translate-y,
|
||||
$translate-z: $default-translate-z,
|
||||
$perspective: false
|
||||
) {
|
||||
$trans: translate3d($translate-x, $translate-y, $translate-z);
|
||||
@if $perspective { $trans: perspective($perspective) $trans; }
|
||||
@include transform3d($trans);
|
||||
}
|
||||
|
||||
// @doc off
|
||||
// Skew ----------------------------------------------------------------------
|
||||
// @doc on
|
||||
|
||||
// Skew an element:
|
||||
//
|
||||
// @include skew( [ skew-x, skew-y, 3D-only ] )
|
||||
//
|
||||
// where the 'skew-' arguments accept css angles in degrees (deg) or radian (rad) units.
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skew(
|
||||
$skew-x: $default-skew-x,
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skew($skew-x, $skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the x axiz
|
||||
//
|
||||
// @include skew( [ skew-x, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewX(
|
||||
$skew-x: $default-skew-x,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewX($skew-x);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
// Skew an element along the y axis
|
||||
//
|
||||
// @include skew( [ skew-y, 3D-only ] )
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin skewY(
|
||||
$skew-y: $default-skew-y,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: skewY($skew-y);
|
||||
@include transform($trans, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// Full transform mixins
|
||||
// For settings any combination of transforms as arguments
|
||||
// These are complex and not highly recommended for daily use. They are mainly
|
||||
// here for backward-compatibility purposes.
|
||||
//
|
||||
// * they include origin adjustments
|
||||
// * scale takes a multiplier (unitless), rotate and skew take degrees (deg)
|
||||
//
|
||||
// **Note** This mixin cannot be combined with other transform mixins.
|
||||
@mixin create-transform(
|
||||
$perspective: false,
|
||||
$scale-x: false,
|
||||
$scale-y: false,
|
||||
$scale-z: false,
|
||||
$rotate-x: false,
|
||||
$rotate-y: false,
|
||||
$rotate-z: false,
|
||||
$rotate3d: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$trans-z: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false,
|
||||
$origin-z: false,
|
||||
$only3d: false
|
||||
) {
|
||||
$trans: unquote("");
|
||||
|
||||
// perspective
|
||||
@if $perspective { $trans: perspective($perspective) ; }
|
||||
|
||||
// scale
|
||||
@if $scale-x and $scale-y {
|
||||
@if $scale-z { $trans: $trans scale3d($scale-x, $scale-y, $scale-z); }
|
||||
@else { $trans: $trans scale($scale-x, $scale-y); }
|
||||
} @else {
|
||||
@if $scale-x { $trans: $trans scaleX($scale-x); }
|
||||
@if $scale-y { $trans: $trans scaleY($scale-y); }
|
||||
@if $scale-z { $trans: $trans scaleZ($scale-z); }
|
||||
}
|
||||
|
||||
// rotate
|
||||
@if $rotate-x { $trans: $trans rotateX($rotate-x); }
|
||||
@if $rotate-y { $trans: $trans rotateY($rotate-y); }
|
||||
@if $rotate-z { $trans: $trans rotateZ($rotate-z); }
|
||||
@if $rotate3d { $trans: $trans rotate3d($rotate3d); }
|
||||
|
||||
// translate
|
||||
@if $trans-x and $trans-y {
|
||||
@if $trans-z { $trans: $trans translate3d($trans-x, $trans-y, $trans-z); }
|
||||
@else { $trans: $trans translate($trans-x, $trans-y); }
|
||||
} @else {
|
||||
@if $trans-x { $trans: $trans translateX($trans-x); }
|
||||
@if $trans-y { $trans: $trans translateY($trans-y); }
|
||||
@if $trans-z { $trans: $trans translateZ($trans-z); }
|
||||
}
|
||||
|
||||
// skew
|
||||
@if $skew-x and $skew-y { $trans: $trans skew($skew-x, $skew-y); }
|
||||
@else {
|
||||
@if $skew-x { $trans: $trans skewX($skew-x); }
|
||||
@if $skew-y { $trans: $trans skewY($skew-y); }
|
||||
}
|
||||
|
||||
// apply it!
|
||||
@include transform($trans, $only3d);
|
||||
@include transform-origin($origin-x, $origin-y, $origin-z, $only3d);
|
||||
}
|
||||
|
||||
|
||||
// A simplified set of options
|
||||
// backwards-compatible with the previous version of the 'transform' mixin
|
||||
@mixin simple-transform(
|
||||
$scale: false,
|
||||
$rotate: false,
|
||||
$trans-x: false,
|
||||
$trans-y: false,
|
||||
$skew-x: false,
|
||||
$skew-y: false,
|
||||
$origin-x: false,
|
||||
$origin-y: false
|
||||
) {
|
||||
@include create-transform(
|
||||
false,
|
||||
$scale, $scale, false,
|
||||
false, false, $rotate, false,
|
||||
$trans-x, $trans-y, false,
|
||||
$skew-x, $skew-y,
|
||||
$origin-x, $origin-y, false,
|
||||
false
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,190 @@
|
||||
@import "compass/support";
|
||||
|
||||
// The the user threshold for transition support. Defaults to `$graceful-usage-threshold`
|
||||
$transition-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
|
||||
// CSS Transitions
|
||||
// Currently only works in Webkit.
|
||||
//
|
||||
// * expected in CSS3, FireFox 3.6/7 and Opera Presto 2.3
|
||||
// * We'll be prepared.
|
||||
//
|
||||
// Including this submodule sets following defaults for the mixins:
|
||||
//
|
||||
// $default-transition-property : all
|
||||
// $default-transition-duration : 1s
|
||||
// $default-transition-function : false
|
||||
// $default-transition-delay : false
|
||||
//
|
||||
// Override them if you like. Timing-function and delay are set to false for browser defaults (ease, 0s).
|
||||
|
||||
$default-transition-property: all !default;
|
||||
|
||||
$default-transition-duration: 1s !default;
|
||||
|
||||
$default-transition-function: null !default;
|
||||
|
||||
$default-transition-delay: null !default;
|
||||
|
||||
$transitionable-prefixed-values: transform, transform-origin !default;
|
||||
|
||||
|
||||
|
||||
// Checks if the value given is a unit of time.
|
||||
@function is-time($value) {
|
||||
@return if(type-of($value) == number, not not index(s ms, unit($value)), false);
|
||||
}
|
||||
|
||||
// Returns `$property` with the given prefix if it is found in `$transitionable-prefixed-values`.
|
||||
@function prefixed-for-transition($prefix, $property) {
|
||||
@if not $prefix {
|
||||
@return $property;
|
||||
}
|
||||
@if type-of($property) == list or type-of($property) == arglist {
|
||||
$new-list: comma-list();
|
||||
@each $v in $property {
|
||||
$new-list: append($new-list, prefixed-for-transition($prefix, $v));
|
||||
}
|
||||
@return $new-list;
|
||||
} @else {
|
||||
@if index($transitionable-prefixed-values, $property) {
|
||||
@return #{$prefix}-#{$property};
|
||||
} @else {
|
||||
@return $property;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Returns $transition-map which includes key and values that map to a transition declaration
|
||||
@function transition-map($transition) {
|
||||
$transition-map: ();
|
||||
|
||||
@each $item in $transition {
|
||||
@if is-time($item) {
|
||||
@if map-has-key($transition-map, duration) {
|
||||
$transition-map: map-merge($transition-map, (delay: $item));
|
||||
} @else {
|
||||
$transition-map: map-merge($transition-map, (duration: $item));
|
||||
}
|
||||
} @else if map-has-key($transition-map, property) {
|
||||
$transition-map: map-merge($transition-map, (timing-function: $item));
|
||||
} @else {
|
||||
$transition-map: map-merge($transition-map, (property: $item));
|
||||
}
|
||||
}
|
||||
|
||||
@return $transition-map;
|
||||
}
|
||||
|
||||
// One or more properties to transition
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * also accepts "all" or "none"
|
||||
|
||||
@mixin transition-property($properties...) {
|
||||
$properties: set-arglist-default($properties, $default-transition-property);
|
||||
@include with-each-prefix(css-transitions, $transition-support-threshold) {
|
||||
$props: if($current-prefix, prefixed-for-transition($current-prefix, $properties), $properties);
|
||||
@include prefix-prop(transition-property, $props);
|
||||
}
|
||||
}
|
||||
|
||||
// One or more durations in seconds
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * these durations will affect the properties in the same list position
|
||||
|
||||
@mixin transition-duration($durations...) {
|
||||
$durations: set-arglist-default($durations, $default-transition-duration);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-duration: $durations
|
||||
));
|
||||
}
|
||||
|
||||
// One or more timing functions
|
||||
//
|
||||
// * [ ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(x1, y1, x2, y2)]
|
||||
// * For multiple, use a comma-delimited list
|
||||
// * These functions will effect the properties in the same list position
|
||||
|
||||
@mixin transition-timing-function($functions...) {
|
||||
$functions: set-arglist-default($functions, $default-transition-function);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-timing-function: $functions
|
||||
));
|
||||
}
|
||||
|
||||
// One or more transition-delays in seconds
|
||||
//
|
||||
// * for multiple, use a comma-delimited list
|
||||
// * these delays will effect the properties in the same list position
|
||||
|
||||
@mixin transition-delay($delays...) {
|
||||
$delays: set-arglist-default($delays, $default-transition-delay);
|
||||
@include prefixed-properties(css-transitions, $transition-support-threshold, (
|
||||
transition-delay: $delays
|
||||
));
|
||||
}
|
||||
|
||||
// Transition all-in-one shorthand
|
||||
|
||||
@mixin single-transition(
|
||||
$property: $default-transition-property,
|
||||
$duration: $default-transition-duration,
|
||||
$function: $default-transition-function,
|
||||
$delay: $default-transition-delay
|
||||
) {
|
||||
@include transition(compact($property $duration $function $delay));
|
||||
}
|
||||
|
||||
@mixin transition($transitions...) {
|
||||
$default: (compact($default-transition-property $default-transition-duration $default-transition-function $default-transition-delay),);
|
||||
$transitions: if(length($transitions) == 1 and type-of(nth($transitions, 1)) == list and list-separator(nth($transitions, 1)) == comma, nth($transitions, 1), $transitions);
|
||||
$transitions: set-arglist-default($transitions, $default);
|
||||
|
||||
|
||||
@include with-each-prefix(css-transitions, $transition-support-threshold) {
|
||||
$delays: comma-list();
|
||||
$transitions-without-delays: comma-list();
|
||||
$transitions-with-delays: comma-list();
|
||||
$has-delays: false;
|
||||
|
||||
|
||||
// This block can be made considerably simpler at the point in time that
|
||||
// we no longer need to deal with the differences in how delays are treated.
|
||||
@each $transition in $transitions {
|
||||
// Declare initial values for transition
|
||||
$transition: transition-map($transition);
|
||||
|
||||
$property: map-get($transition, property);
|
||||
$duration: map-get($transition, duration);
|
||||
$timing-function: map-get($transition, timing-function);
|
||||
$delay: map-get($transition, delay);
|
||||
|
||||
// Parse transition string to assign values into correct variables
|
||||
$has-delays: $has-delays or $delay;
|
||||
|
||||
@if $current-prefix == -webkit {
|
||||
// Keep a list of delays in case one is specified
|
||||
$delays: append($delays, if($delay, $delay, 0s));
|
||||
$transitions-without-delays: append($transitions-without-delays,
|
||||
prefixed-for-transition($current-prefix, $property) $duration $timing-function);
|
||||
} @else {
|
||||
$transitions-with-delays: append($transitions-with-delays,
|
||||
prefixed-for-transition($current-prefix, $property) $duration $timing-function $delay);
|
||||
}
|
||||
}
|
||||
|
||||
@if $current-prefix == -webkit {
|
||||
@include prefix-prop(transition, $transitions-without-delays);
|
||||
@if $has-delays {
|
||||
@include prefix-prop(transition-delay, $delays);
|
||||
}
|
||||
} @else if $current-prefix {
|
||||
@include prefix-prop(transition, $transitions-with-delays);
|
||||
} @else {
|
||||
transition: $transitions-with-delays;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
// User Interface
|
||||
// This file can be expanded to handle all the user interface properties as
|
||||
// they become available in browsers:
|
||||
// http://www.w3.org/TR/2000/WD-css3-userint-20000216
|
||||
|
||||
@import "compass/support";
|
||||
|
||||
// The prefixed support threshold for user-select.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$userselect-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// This property controls the selection model and granularity of an element.
|
||||
//
|
||||
// @param $select
|
||||
// [ none | text | toggle | element | elements | all | inherit ]
|
||||
@mixin user-select($select) {
|
||||
$select: unquote($select);
|
||||
|
||||
@include with-each-prefix(user-select-none, $userselect-support-threshold) {
|
||||
// old Firefox used a proprietary `-moz-none` value, starting with Firefox 21 `none` behaves like `-moz-none`
|
||||
// @link https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
|
||||
@include prefix-prop(user-select, if($current-prefix == -moz and $select == 'none', -moz-none, $select));
|
||||
}
|
||||
}
|
||||
|
||||
// The prefixed support threshold for input-placeholder.
|
||||
// Defaults to the $graceful-usage-threshold.
|
||||
$input-placeholder-support-threshold: $graceful-usage-threshold !default;
|
||||
|
||||
// Style the html5 input placeholder in browsers that support it.
|
||||
//
|
||||
// The styles for the input placeholder are passed as mixin content
|
||||
// and the selector comes from the mixin's context.
|
||||
//
|
||||
// For example:
|
||||
//
|
||||
// #{elements-of-type(text-input)} {
|
||||
// @include input-placeholder {
|
||||
// color: #bfbfbf;
|
||||
// font-style: italic;
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// if you want to apply the placeholder styles to all elements supporting
|
||||
// the `input-placeholder` pseudo class (beware of performance impacts):
|
||||
//
|
||||
// * {
|
||||
// @include input-placeholder {
|
||||
// color: #bfbfbf;
|
||||
// font-style: italic;
|
||||
// }
|
||||
// }
|
||||
@mixin input-placeholder {
|
||||
@include with-each-prefix(css-placeholder, $input-placeholder-support-threshold) {
|
||||
@if $current-prefix == -webkit {
|
||||
&::-webkit-input-placeholder { @content; }
|
||||
}
|
||||
@elseif $current-prefix == -moz {
|
||||
// for Firefox 19 and below
|
||||
@if support-legacy-browser("firefox", "4", "19", $threshold: $input-placeholder-support-threshold) {
|
||||
&:-moz-placeholder { @content; }
|
||||
}
|
||||
// for Firefox 20 and above
|
||||
&::-moz-placeholder { @content; }
|
||||
}
|
||||
@elseif $current-prefix == -ms {
|
||||
&:-ms-input-placeholder { @content; }
|
||||
}
|
||||
}
|
||||
// This is not standardized yet so no official selector is generated.
|
||||
}
|
||||
Reference in New Issue
Block a user