You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
352 lines
8.7 KiB
352 lines
8.7 KiB
// --------------------------------------------------
|
|
// reflex mixins
|
|
// --------------------------------------------------
|
|
//
|
|
// --------------------------------------------------
|
|
// reflex grid generation mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin make-reflex-grid($class) {
|
|
@include loop-reflex-columns($reflex-columns, $class, width);
|
|
}
|
|
|
|
@mixin calc-reflex-columns($index, $class, $type) {
|
|
@if $type == width and $index > 0 {
|
|
.#{$reflex-prefix}#{$class}#{$index} {
|
|
width: percentage(($index / $reflex-columns));
|
|
@if $legacy-support == true {
|
|
*width: percentage(($index / $reflex-columns)) - .1; // ie7 css hack
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin loop-reflex-columns($index, $class, $type) {
|
|
@if $index >= 0 {
|
|
@include calc-reflex-columns($index, $class, $type);
|
|
// next iteration
|
|
@include loop-reflex-columns(($index - 1), $class, $type);
|
|
}
|
|
}
|
|
|
|
// defaults for auto cols
|
|
@mixin setup-auto-cols() {
|
|
@include flex(1, 0, 0px); // a unit on last value is required by IE10-11
|
|
|
|
@if $legacy-support == true {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// inline-block specific mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin setup-whitespace() {
|
|
@if $legacy-support == true {
|
|
letter-spacing: -.31em;
|
|
*letter-spacing: normal;
|
|
word-spacing: -.43em;
|
|
}
|
|
}
|
|
|
|
@mixin reset-whitespace() {
|
|
@if $legacy-support == true {
|
|
letter-spacing: normal;
|
|
word-spacing: normal;
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@mixin reset-text-align() {
|
|
//
|
|
// We want to reset any text-align properties set by the grid
|
|
// (required for the inline-block fallback)
|
|
// but we don't want to override any text-align properties
|
|
// set on the individual col-x element
|
|
// or on any of it's child elements
|
|
//
|
|
// 1) set to left by default (works everywhere)
|
|
// 2) set to start (respects right to left text)
|
|
//
|
|
text-align: left;
|
|
text-align: start;
|
|
-moz-text-align-last: left;
|
|
-moz-text-align-last: start;
|
|
text-align-last: left;
|
|
text-align-last: start;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// order class generation mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin order($order: 0) {
|
|
-ms-flex-order: $order;
|
|
-webkit-order: $order;
|
|
order: $order;
|
|
}
|
|
|
|
@mixin make-order-helpers() {
|
|
@include loop-order-helpers($reflex-columns);
|
|
}
|
|
|
|
@mixin loop-order-helpers($index, $breakpoint: null) {
|
|
@if $index >= 0 {
|
|
.#{$reflex-prefix}order#{$breakpoint}-#{$index} {
|
|
@include order($index);
|
|
}
|
|
// next iteration
|
|
@include loop-order-helpers(($index - 1), $breakpoint);
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// offset class generation mixins
|
|
// --------------------------------------------------
|
|
@mixin offset($index: 0) {
|
|
$offset: ($index / $reflex-columns);
|
|
// convert to percentage only if not zero
|
|
@if $offset != 0 {
|
|
$offset: percentage($offset);
|
|
}
|
|
margin-left: $offset;
|
|
@if $legacy-support == true {
|
|
*margin-left: percentage(($index / $reflex-columns)) - .1; // ie7 css hack
|
|
}
|
|
}
|
|
|
|
@mixin make-offset-helpers() {
|
|
@include loop-offset-helpers($reflex-columns - 1);
|
|
}
|
|
|
|
@mixin loop-offset-helpers($index, $breakpoint: null) {
|
|
@if $index > 0 and $breakpoint == null {
|
|
.#{$reflex-prefix}offset#{$breakpoint}-#{$index} {
|
|
@include offset($index);
|
|
}
|
|
// next iteration
|
|
@include loop-offset-helpers(($index - 1), $breakpoint);
|
|
} @else if $index >= 0 and $breakpoint != null {
|
|
.#{$reflex-prefix}offset#{$breakpoint}-#{$index} {
|
|
@include offset($index);
|
|
}
|
|
// next iteration
|
|
@include loop-offset-helpers(($index - 1), $breakpoint);
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// reflex modifier mixins
|
|
// --------------------------------------------------
|
|
|
|
//
|
|
// display
|
|
// ---
|
|
|
|
@mixin display-flex() {
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
//
|
|
// flex
|
|
// ---
|
|
|
|
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
|
|
@if $basis == 0 {
|
|
-ms-flex: $grow $shrink auto; //ie10 needs auto
|
|
} @else {
|
|
-ms-flex: $grow $shrink $basis;
|
|
}
|
|
|
|
-webkit-flex: $grow $shrink $basis;
|
|
flex: $grow $shrink $basis;
|
|
}
|
|
|
|
@mixin flex-grow($grow:1) {
|
|
-ms-flex-positive: $grow;
|
|
-webkit-flex-grow: $grow;
|
|
flex-grow: $grow;
|
|
}
|
|
|
|
@mixin flex-shrink($shrink:1) {
|
|
-ms-flex-negative: $shrink;
|
|
-webkit-flex-shrink: $shrink;
|
|
flex-shrink: $shrink;
|
|
}
|
|
|
|
@mixin flex-basis($basis:auto) {
|
|
-ms-flex-preferred-size: $basis;
|
|
-webkit-flex-basis: $basis;
|
|
flex-basis: $basis;
|
|
}
|
|
|
|
@mixin flex-flow($direction: row, $wrap: nowrap) {
|
|
-ms-flex-wrap: $wrap;
|
|
-ms-flex-direction: $direction;
|
|
-webkit-flex-flow: $direction $wrap;
|
|
flex-flow: $direction $wrap;
|
|
}
|
|
|
|
@mixin flex-wrap($wrap: wrap) {
|
|
-ms-flex-wrap: $wrap;
|
|
-webkit-flex-wrap: $wrap;
|
|
flex-wrap: $wrap;
|
|
}
|
|
|
|
@mixin flex-direction($direction: row) {
|
|
-ms-flex-direction: $direction;
|
|
-webkit-flex-direction: $direction;
|
|
flex-direction: $direction;
|
|
}
|
|
|
|
//
|
|
// align
|
|
// ---
|
|
|
|
@mixin align-items($align: stretch) {
|
|
@include ms-align-items($align);
|
|
-webkit-align-items: $align;
|
|
align-items: $align;
|
|
}
|
|
|
|
@mixin align-self($align: stretch) {
|
|
@include ms-align-self($align);
|
|
-webkit-align-self: $align;
|
|
align-self: $align;
|
|
}
|
|
|
|
@mixin align-content($align: stretch) {
|
|
@include ms-align-content($align);
|
|
-webkit-align-content: $align;
|
|
align-content: $align;
|
|
}
|
|
|
|
//
|
|
// ie10 syntax for align
|
|
// ---
|
|
|
|
@mixin ms-align-items($align) {
|
|
@if $align == 'flex-start' {
|
|
-ms-flex-align: start;
|
|
} @else if $align == 'flex-end' {
|
|
-ms-flex-align: end;
|
|
} @else {
|
|
-ms-flex-align: $align;
|
|
}
|
|
}
|
|
|
|
@mixin ms-align-self($align) {
|
|
@if $align == 'flex-start' {
|
|
-ms-flex-item-align: start;
|
|
} @else if $align == 'flex-end' {
|
|
-ms-flex-item-align: end;
|
|
} @else {
|
|
-ms-flex-item-align: $align;
|
|
}
|
|
}
|
|
|
|
@mixin ms-align-content($align) {
|
|
@if $align == 'flex-start' {
|
|
-ms-flex-line-pack: start;
|
|
} @else if $align == 'flex-end' {
|
|
-ms-flex-line-pack: end;
|
|
} @else if $align == 'space-between' {
|
|
-ms-flex-line-pack: justify;
|
|
} @else if $align == 'space-around' {
|
|
-ms-flex-line-pack: distribute;
|
|
} @else {
|
|
-ms-flex-line-pack: $align;
|
|
}
|
|
}
|
|
|
|
//
|
|
// justify-content
|
|
//
|
|
// Uses "text-align" for the fallback inline-block grid
|
|
// "text-align" is globally supported and works on all rows except the last
|
|
// "text-align-last", where supported, handles the last line (and, happily, grids with only one row)
|
|
// ---
|
|
|
|
@mixin justify-content-start() {
|
|
-ms-flex-pack: start;
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@mixin justify-content-end() {
|
|
-ms-flex-pack: end;
|
|
-webkit-justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@mixin justify-content-center() {
|
|
-ms-flex-pack: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin justify-content-space-between() {
|
|
-ms-flex-pack: justify;
|
|
-webkit-justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin justify-content-space-around() {
|
|
-ms-flex-pack: distribute;
|
|
-webkit-justify-content: space-around;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// other mixins
|
|
// --------------------------------------------------
|
|
|
|
@mixin box-sizing($boxmodel) {
|
|
-webkit-box-sizing: $boxmodel;
|
|
-moz-box-sizing: $boxmodel;
|
|
box-sizing: $boxmodel;
|
|
}
|
|
|
|
@mixin responsive-visibility-helpers() {
|
|
@if $visibility-helpers == true {
|
|
.#{$reflex-prefix}hidden-xxs {
|
|
@media (max-width: $reflex-xxs-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$reflex-prefix}hidden-xs {
|
|
@media (min-width: $reflex-xs) and (max-width: $reflex-xs-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$reflex-prefix}hidden-sm {
|
|
@media (min-width: $reflex-sm) and (max-width: $reflex-sm-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$reflex-prefix}hidden-md {
|
|
@media (min-width: $reflex-md) and (max-width: $reflex-md-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$reflex-prefix}hidden-lg {
|
|
@media (min-width: $reflex-lg) and (max-width: $reflex-lg-max) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.#{$reflex-prefix}hidden-xlg {
|
|
@media (min-width: $reflex-xlg) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|