/** * @class Global_CSS */ @import 'mixins/border';@import 'mixins/font';@import 'mixins/font-icon';@import 'mixins/icon';@import 'mixins/transform';@import 'mixins/animation'; // Background property support for vendor prefixing within values. @mixin background($background-1,$background-2: false,$background-3: false,$background-4: false,$background-5: false,$background-6: false,$background-7: false,$background-8: false,$background-9: false,$background-10: false) { $backgrounds: compact($background-1, $background-2, $background-3, $background-4, $background-5, $background-6, $background-7, $background-8, $background-9, $background-10); $mult-bgs: -compass-list-size($backgrounds) > 1; $add-pie-bg: prefixed(-pie, $backgrounds) or $mult-bgs; @if $experimental-support-for-svg and prefixed(-svg, $backgrounds) { background: -svg($backgrounds); } @if $support-for-original-webkit-gradients and prefixed(-owg, $backgrounds) { background: -owg($backgrounds); } @if $experimental-support-for-webkit and prefixed(-webkit, $backgrounds) { background: -webkit($backgrounds); } @if $experimental-support-for-mozilla and prefixed(-moz, $backgrounds) { background: -moz($backgrounds); } @if $experimental-support-for-opera and prefixed(-o, $backgrounds) { background: -o($backgrounds); } // BEGIN PATCH // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with // proper support background: -ms-#{$backgrounds}; // END PATCH @if $experimental-support-for-pie and $add-pie-bg { -pie-background: -pie($backgrounds); } background: $backgrounds;} @mixin background-image($image-1,$image-2: false,$image-3: false,$image-4: false,$image-5: false,$image-6: false,$image-7: false,$image-8: false,$image-9: false,$image-10: false) { $images: compact($image-1, $image-2, $image-3, $image-4, $image-5, $image-6, $image-7, $image-8, $image-9, $image-10); $add-pie-bg: prefixed(-pie, $images) or -compass-list-size($images) > 1; @if $experimental-support-for-svg and prefixed(-svg, $images) { background-image: -svg($images); background-size: 100%; } @if $support-for-original-webkit-gradients and prefixed(-owg, $images) { background-image: -owg($images); } @if $experimental-support-for-webkit and prefixed(-webkit, $images) { background-image: -webkit($images); } @if $experimental-support-for-mozilla and prefixed(-moz, $images) { background-image: -moz($images); } @if $experimental-support-for-opera and prefixed(-o, $images) { background-image: -o($images); } // BEGIN PATCH // IE10 Supports linear-gradient but with a new syntax, Compass has deprecated -ms prefix support too soon // this patch brings -ms prefix support back to gradients. This should be removed when compass is updated with // proper support background-image: -ms-#{$images}; // END PATCH @if $experimental-support-for-pie and $add-pie-bg { @warn "PIE does not support background-image. Use @include background(#{$images}) instead." }} /** * Adds basic styles to :before or :after pseudo-elements. * * .my-element:after { * @include insertion(50px, 50px); * } * * @param {measurement} $width Height of pseudo-element. * @param {measurement} $height Height of pseudo-element. * @param {measurement} $top Top positioning of pseudo-element. * @param {measurement} $left Left positioning of pseudo-element. * */@mixin insertion($width: 30px, $height: 30px, $top: 0, $left: 0) { content: ''; position: absolute; width: $width; height: $height; top: $top; left: $left;} @mixin absolute-position($top: 0, $right: 0, $bottom: 0, $left: 0) { position: absolute; top: $top; right: $right; bottom: $bottom; left: $left;} @mixin absolute-fit { width: auto; height: auto; @include absolute-position;} @mixin st-box() { display: -webkit-box; display: -ms-flexbox; display: flex;} @mixin st-inline-box() { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex;} @mixin st-box-align($align: stretch) { -webkit-box-align: $align; -ms-flex-align: $align; @if $align == start { align-items: flex-start; } @else if $align == end { align-items: flex-end; } @else { align-items: $align; }} @mixin st-box-orient($orient: horizontal, $important: no) { @if $important == important { -webkit-box-orient: $orient !important; @if $orient == horizontal { -ms-flex-direction: row !important; flex-direction: row !important; } @else { -ms-flex-direction: column !important; flex-direction: column !important; } } @else { -webkit-box-orient: $orient; @if $orient == horizontal { -ms-flex-direction: row; flex-direction: row; } @else { -ms-flex-direction: column; flex-direction: column; } }} @mixin st-box-pack($pack: start, $important: no) { @if $important == important { -webkit-box-pack: $pack !important; -ms-flex-pack: $pack !important; @if $pack == start { justify-content: flex-start !important; } @else if $pack == end { justify-content: flex-end !important; } @else if $pack == justify { justify-content: space-between !important; } @else { justify-content: $pack !important; } } @else { -webkit-box-pack: $pack; -ms-flex-pack: $pack; @if $pack == start { justify-content: flex-start; } @else if $pack == end { justify-content: flex-end; } @else if $pack == justify { justify-content: space-between; } @else if $pack == center { justify-content: center; } @else { justify-content: $pack; } }} @mixin st-box-flex($flex: 1, $preferredSize: auto, $important: no) { @if $important == important { -webkit-box-flex: $flex !important; flex: $flex $flex $preferredSize !important; } @else { -webkit-box-flex: $flex; flex: $flex $flex $preferredSize; }} @mixin st-box-shadow($shadow: none) { -webkit-box-shadow: $shadow; box-shadow: $shadow;} @mixin st-box-direction($direction: normal, $orientation: row) { -webkit-box-direction: $direction; @if $direction == reverse { @if $orientation == row { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } @else { -ms-flex-direction: column-reverse; flex-direction: column-reverse; } } @else { @if $orientation == row { -ms-flex-direction: row; flex-direction: row; } @else { -ms-flex-direction: column; flex-direction: column; } }} @mixin st-loading-spinner($spinner-size: 50px, $color: #ccc, $bar-width: 5px, $bar-height: 15px) { .x-loading-spinner { font-size: 250%; height: $spinner-size; width: $spinner-size; position: relative; -webkit-transform-origin: $spinner-size/2 $spinner-size/2; transform-origin: $spinner-size/2 $spinner-size/2; /* Shared Properties for all the bars */ & > span, & > span:before, & > span:after { display: block; position: absolute; width: $bar-width; height: $bar-height; top: 0; -webkit-transform-origin: $bar-width/2 $spinner-size/2; transform-origin: $bar-width/2 $spinner-size/2; content: " "; } & > span { left: 50%; margin-left: -0.05em; &.x-loading-top { background-color: rgba($color, 0.99); } &.x-loading-top::after { background-color: rgba($color, 0.90); } &.x-loading-left::before { background-color: rgba($color, 0.80); } &.x-loading-left { background-color: rgba($color, 0.70); } &.x-loading-left::after { background-color: rgba($color, 0.60); } &.x-loading-bottom::before{ background-color: rgba($color, 0.50); } &.x-loading-bottom { background-color: rgba($color, 0.40); } &.x-loading-bottom::after { background-color: rgba($color, 0.35); } &.x-loading-right::before { background-color: rgba($color, 0.30); } &.x-loading-right { background-color: rgba($color, 0.25); } &.x-loading-right::after { background-color: rgba($color, 0.20); } &.x-loading-top::before { background-color: rgba($color, 0.15); } } } /* Rotate each of the 4 Spans */ .x-loading-spinner > span.x-loading-top { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .x-loading-spinner > span.x-loading-right { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .x-loading-spinner > span.x-loading-bottom { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .x-loading-spinner > span.x-loading-left { -webkit-transform: rotate(270deg); transform: rotate(270deg); } /* These are the two lines that surround each of the 4 Span lines */ .x-loading-spinner > span::before { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .x-loading-spinner > span::after { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } /* Set Animation */ .x-loading-spinner { -webkit-animation-name: x-loading-spinner-rotate; -webkit-animation-duration: .5s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-name: x-loading-spinner-rotate; animation-duration: .5s; animation-timing-function: linear; animation-iteration-count: infinite; }} @mixin font-family($name, $path, $font) { $path: $path + '/' + $font; @font-face { font-family: $name; src: url($path + '.eot'); src: url($path + '.eot?#iefix') format('embedded-opentype'), url($path + '.woff') format('woff'), url($path + '.ttf') format('truetype'); font-weight: normal; font-style: normal; }} @mixin icon-font($name, $font) { @include font-family($name, 'fonts', $font);}