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.
358 lines
8.3 KiB
358 lines
8.3 KiB
/**
|
|
* mixin
|
|
*
|
|
*
|
|
*
|
|
*/
|
|
|
|
@mixin grid-make($class) {
|
|
@include grid-loop-columns($grid__columns, $class, width);
|
|
}
|
|
|
|
@mixin grid-calc-columns($index, $class, $type) {
|
|
@if $type == width and $index > 0 {
|
|
.#{$class}#{$index} {
|
|
width: percentage(($index / $grid__columns));
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin grid-loop-columns($index, $class, $type) {
|
|
@if $index >= 0 {
|
|
@include grid-calc-columns($index, $class, $type);
|
|
|
|
// next iteration
|
|
@include grid-loop-columns(($index - 1), $class, $type);
|
|
}
|
|
}
|
|
|
|
// defaults for auto cols
|
|
@mixin grid-setup-auto-cols() {
|
|
@include flex(1, 0, 0px); // a unit on last value is required by IE10-11
|
|
}
|
|
|
|
@mixin grid-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) {
|
|
-webkit-order: $order;
|
|
order: $order;
|
|
}
|
|
|
|
@mixin grid-make-order-helpers() {
|
|
@include grid-loop-order-helpers($grid__columns);
|
|
}
|
|
|
|
@mixin grid-loop-order-helpers($index, $breakpoint: null) {
|
|
@if $index >= 0 {
|
|
.order#{$breakpoint}-#{$index} {
|
|
@include order($index);
|
|
}
|
|
|
|
// next iteration
|
|
@include grid-loop-order-helpers(($index - 1), $breakpoint);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* offset class generation mixins
|
|
*
|
|
*/
|
|
|
|
@mixin grid-offset($index: 0) {
|
|
$offset: ($index / $grid__columns);
|
|
|
|
// convert to percentage only if not zero
|
|
@if $offset != 0 {
|
|
$offset: percentage($offset);
|
|
}
|
|
|
|
margin-left: $offset;
|
|
}
|
|
|
|
@mixin grid-make-offset-helpers() {
|
|
@include grid-loop-offset-helpers($grid__columns - 1);
|
|
}
|
|
|
|
@mixin grid-loop-offset-helpers($index, $breakpoint: null) {
|
|
@if $index > 0 and $breakpoint == null {
|
|
.offset#{$breakpoint}-#{$index} {
|
|
@include grid-offset($index);
|
|
}
|
|
|
|
// next iteration
|
|
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
|
|
|
|
} @else if $index >= 0 and $breakpoint != null {
|
|
.offset#{$breakpoint}-#{$index} {
|
|
@include grid-offset($index);
|
|
}
|
|
|
|
// next iteration
|
|
@include grid-loop-offset-helpers(($index - 1), $breakpoint);
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* modifier mixins
|
|
*
|
|
*/
|
|
|
|
@mixin display-flex() {
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
}
|
|
|
|
@mixin flex($grow: 0, $shrink: 1, $basis: auto) {
|
|
-webkit-flex: $grow $shrink $basis;
|
|
flex: $grow $shrink $basis;
|
|
}
|
|
|
|
@mixin flex-grow($grow:1) {
|
|
-webkit-flex-grow: $grow;
|
|
flex-grow: $grow;
|
|
}
|
|
|
|
@mixin flex-shrink($shrink:1) {
|
|
-webkit-flex-shrink: $shrink;
|
|
flex-shrink: $shrink;
|
|
}
|
|
|
|
@mixin flex-basis($basis:auto) {
|
|
-webkit-flex-basis: $basis;
|
|
flex-basis: $basis;
|
|
}
|
|
|
|
@mixin flex-flow($direction: row, $wrap: nowrap) {
|
|
-webkit-flex-flow: $direction $wrap;
|
|
flex-flow: $direction $wrap;
|
|
}
|
|
|
|
@mixin flex-wrap($wrap: wrap) {
|
|
-webkit-flex-wrap: $wrap;
|
|
flex-wrap: $wrap;
|
|
}
|
|
|
|
@mixin flex-direction($direction: row) {
|
|
-webkit-flex-direction: $direction;
|
|
flex-direction: $direction;
|
|
}
|
|
|
|
@mixin align-items($align: stretch) {
|
|
-webkit-align-items: $align;
|
|
align-items: $align;
|
|
}
|
|
|
|
@mixin align-self($align: stretch) {
|
|
-webkit-align-self: $align;
|
|
align-self: $align;
|
|
}
|
|
|
|
@mixin align-content($align: stretch) {
|
|
-webkit-align-content: $align;
|
|
align-content: $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() {
|
|
-webkit-justify-content: flex-start;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
@mixin justify-content-end() {
|
|
-webkit-justify-content: flex-end;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@mixin justify-content-center() {
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
@mixin justify-content-space-between() {
|
|
-webkit-justify-content: space-between;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
@mixin justify-content-space-around() {
|
|
-webkit-justify-content: space-around;
|
|
justify-content: space-around;
|
|
}
|
|
|
|
|
|
/**
|
|
* Responsible Visibility
|
|
*
|
|
*/
|
|
|
|
@mixin grid-responsive-visibility-helpers() {
|
|
|
|
// We need to handle xxs and xlg breakpoints differently
|
|
$grid__map-breakpoints: map-remove($grid__breakpoints, xxs, xlg);
|
|
|
|
.hidden-xxs {
|
|
@include media-breakpoint-only('xxs') {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@each $bp in map-keys($grid__map-breakpoints)
|
|
{
|
|
.hidden-#{$bp}-up {
|
|
@include media-breakpoint-up($bp) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hidden-#{$bp}-down {
|
|
@include media-breakpoint-down($bp) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.hidden-#{$bp} {
|
|
@include media-breakpoint-only($bp) {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hidden-xlg {
|
|
@include media-breakpoint-only('xlg') {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Breakpoint viewport sizes and media queries
|
|
*
|
|
* Breakpoints are defined as a map of (name: minimum width), order from small to large:
|
|
* (xs: 576px, sm: 768px, md: 992px)
|
|
* The map defined in the `$reflex-breakpoints` global variable is used as the `$breakpoints` argument by default.
|
|
* Name of the next breakpoint, or null for the last breakpoint.
|
|
* >> breakpoint-next(sm) -> md
|
|
* >> breakpoint-next(sm, $breakpoints: (xs: 576px, sm: 768px, md: 992px)) -> md
|
|
* >> breakpoint-next(sm, $breakpoint-names: (xs sm md)) -> md
|
|
*
|
|
*/
|
|
|
|
@function breakpoint-next($name, $breakpoints: $grid__breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
|
$n: index($breakpoint-names, $name);
|
|
@return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
|
|
}
|
|
|
|
|
|
/**
|
|
* Minimum breakpoint width. Null for the smallest (first) breakpoint.
|
|
* breakpoint-min(sm, (xs: 576px, sm: 768px, md: 992px)) -> 768px
|
|
*
|
|
*/
|
|
|
|
@function breakpoint-min($name, $breakpoints: $grid__breakpoints) {
|
|
$min: map-get($breakpoints, $name);
|
|
@return if($min !=0, $min, null);
|
|
}
|
|
|
|
// Maximum breakpoint width. Null for the largest (last) breakpoint.
|
|
// The maximum value is calculated as the minimum of the next one less 0.1.
|
|
// >> breakpoint-max(sm, (xs: 576px, sm: 768px, md: 992px)) -> 991px
|
|
@function breakpoint-max($name, $breakpoints: $grid__breakpoints) {
|
|
$next: breakpoint-next($name, $breakpoints);
|
|
@return if($next, breakpoint-min($next, $breakpoints) - 1, null);
|
|
}
|
|
|
|
// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
|
|
// Makes the @content apply to the given breakpoint and wider.
|
|
@mixin media-breakpoint-up($name, $breakpoints: $grid__breakpoints) {
|
|
$min: breakpoint-min($name, $breakpoints);
|
|
|
|
@if $min {
|
|
@media (min-width: $min) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Media of at most the maximum breakpoint width. No query for the largest breakpoint.
|
|
* Makes the @content apply to the given breakpoint and narrower.
|
|
*
|
|
*/
|
|
|
|
@mixin media-breakpoint-down($name, $breakpoints: $grid__breakpoints) {
|
|
$max: breakpoint-max($name, $breakpoints);
|
|
|
|
@if $max {
|
|
@media (max-width: $max) {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
@else {
|
|
@content;
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Media between the breakpoint's minimum and maximum widths.
|
|
* No minimum for the smallest breakpoint, and no maximum for the largest one.
|
|
* Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
|
|
*
|
|
*/
|
|
|
|
@mixin media-breakpoint-only($name, $breakpoints: $grid__breakpoints) {
|
|
@include media-breakpoint-up($name, $breakpoints) {
|
|
@include media-breakpoint-down($name, $breakpoints) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin box-sizing($boxmodel) {
|
|
-webkit-box-sizing: $boxmodel;
|
|
-moz-box-sizing: $boxmodel;
|
|
box-sizing: $boxmodel;
|
|
}
|