Permalink
Switch branches/tags
Find file Copy path
437 lines (362 sloc) 11 KB
/*
* Responsive attributes
*
* References:
* 1) https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties#flex
* 2) https://css-tricks.com/almanac/properties/f/flex/
* 3) https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* 4) https://github.com/philipwalton/flexbugs#3-min-height-on-a-flex-container-wont-apply-to-its-flex-items
* 5) http://godban.com.ua/projects/flexgrid
*/
@mixin flex-order-for-name($sizes:null) {
@if $sizes == null {
$sizes : '';
.flex-order {
order : 0;
}
}
@for $i from -20 through 20 {
$order : '';
$suffix : '';
@each $s in $sizes {
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
@else { $suffix : '#{$i}'; }
$order : '.flex-order-#{$suffix}';
}
#{$order} {
order: #{$i};
}
}
}
@mixin offset-for-name($sizes:null) {
@if $sizes == null { $sizes : ''; }
@for $i from 0 through 19 {
$offsets : '';
$suffix : '';
@each $s in $sizes {
@if $s != '' { $suffix : '#{$s}-#{$i * 5}'; }
@else { $suffix : '#{$i * 5}'; }
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
}
#{$offsets} {
@if $i != 0 { @include rtl-prop(margin-left, margin-right, #{$i * 5 + '%'}, auto); }
@else { @include rtl-prop(margin-left, margin-right, 0, auto); }
}
}
@each $i in 33 {
$offsets : '';
$suffix : '';
@each $s in $sizes {
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
@else { $suffix : '#{$i}'; }
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
}
#{$offsets} {
margin-left: calc(100% / 3);
}
}
@each $i in 66 {
$offsets : '';
$suffix : '';
@each $s in $sizes {
@if $s != '' { $suffix : '#{$s}-#{$i}'; }
@else { $suffix : '#{$i}'; }
$offsets : '.offset-#{$suffix}, .flex-offset-#{$suffix}, .layout-margin .flex-offset-#{$suffix}, .layout-margin .offset-#{$suffix}';
}
#{$offsets} {
@include rtl-prop(margin-left, margin-right, calc(200% / 3), auto);
}
}
}
@mixin layout-for-name($name: null) {
@if $name == null { $name : ''; }
@if $name != '' { $name : '-#{$name}'; }
.layout#{$name}, .layout#{$name}-column, .layout#{$name}-row {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
}
.layout#{$name}-column { flex-direction: column; }
.layout#{$name}-row { flex-direction: row; }
}
@mixin flex-properties-for-name($name: null) {
$flexName: 'flex';
@if $name != null {
$flexName: 'flex-#{$name}';
$name : '-#{$name}';
} @else {
$name : '';
}
.#{$flexName} { flex: 1; box-sizing: border-box; } // === flex: 1 1 0%;
.#{$flexName}-grow { flex: 1 1 100%; box-sizing: border-box; }
.#{$flexName}-initial { flex: 0 1 auto; box-sizing: border-box; }
.#{$flexName}-auto { flex: 1 1 auto; box-sizing: border-box; }
.#{$flexName}-none { flex: 0 0 auto; box-sizing: border-box; }
.#{$flexName}-noshrink { flex: 1 0 auto; box-sizing: border-box; }
.#{$flexName}-nogrow { flex: 0 1 auto; box-sizing: border-box; }
// (1-20) * 5 = 0-100%
@for $i from 0 through 20 {
$value : #{$i * 5 + '%'};
.#{$flexName}-#{$i * 5} {
flex: 1 1 100%;
max-width: #{$value};
max-height: 100%;
box-sizing: border-box;
}
.layout-row > .#{$flexName}-#{$i * 5} {
flex: 1 1 100%;
max-width: #{$value};
max-height: 100%;
box-sizing: border-box;
// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-width: 0; }
}
.layout-column > .#{$flexName}-#{$i * 5} {
flex: 1 1 100%;
max-width: 100%;
max-height: #{$value};
box-sizing: border-box;
}
.layout#{$name}-row > .#{$flexName}-#{$i * 5} {
flex: 1 1 100%;
max-width: #{$value};
max-height: 100%;
box-sizing: border-box;
// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-width: 0; }
}
.layout#{$name}-column > .#{$flexName}-#{$i * 5} {
flex: 1 1 100%;
max-width: 100%;
max-height: #{$value};
box-sizing: border-box;
// Required by Chrome M48+ due to http://crbug.com/546034
@if $i == 0 { min-height: 0; }
}
}
@if ($name == '') {
.flex-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
.flex-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
}
.layout-row {
> .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
}
.layout-column {
> .#{$flexName}-33 { flex: 1 1 33.33%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 66.66%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
}
.layout#{$name}-row {
> .#{$flexName}-33 { flex: 1 1 100%; max-width: 33.33%; max-height: 100%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 100%; max-width: 66.66%; max-height: 100%; box-sizing: border-box; }
// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-width: 0; }
}
.layout#{$name}-column {
> .#{$flexName}-33 { flex: 1 1 100%; max-width: 100%; max-height: 33.33%; box-sizing: border-box; }
> .#{$flexName}-66 { flex: 1 1 100%; max-width: 100%; max-height: 66.66%; box-sizing: border-box; }
// Required by Chrome M48+ due to http://crbug.com/546034
> .flex { min-height: 0; }
}
}
@mixin layout-align-for-name($suffix: null) {
// Alignment attributes for layout containers' children
// Arrange on the Main Axis
// center, start, end, space-between, space-around
// flex-start is the default for justify-content
// ------------------------------
$name: 'layout-align';
@if $suffix != null {
$name: 'layout-align-#{$suffix}';
}
.#{$name},
.#{$name}-start-stretch // defaults
{
justify-content : flex-start;
align-content : stretch;
align-items: stretch;
}
// Main Axis Center
.#{$name}-start,
.#{$name}-start-start,
.#{$name}-start-center,
.#{$name}-start-end,
.#{$name}-start-stretch
{
justify-content: flex-start;
}
// Main Axis Center
.#{$name}-center, //stretch
.#{$name}-center-start,
.#{$name}-center-center,
.#{$name}-center-end,
.#{$name}-center-stretch
{
justify-content: center;
}
// Main Axis End
.#{$name}-end, //stretch
.#{$name}-end-start,
.#{$name}-end-center,
.#{$name}-end-end,
.#{$name}-end-stretch
{
justify-content: flex-end;
}
// Main Axis Space Around
.#{$name}-space-around, //stretch
.#{$name}-space-around-center,
.#{$name}-space-around-start,
.#{$name}-space-around-end,
.#{$name}-space-around-stretch
{
justify-content: space-around;
}
// Main Axis Space Between
.#{$name}-space-between, //stretch
.#{$name}-space-between-center,
.#{$name}-space-between-start,
.#{$name}-space-between-end,
.#{$name}-space-between-stretch
{
justify-content: space-between;
}
// Arrange on the Cross Axis
// center, start, end
// stretch is the default for align-items
// ------------------------------
// Cross Axis Start
.#{$name}-start-start,
.#{$name}-center-start,
.#{$name}-end-start,
.#{$name}-space-between-start,
.#{$name}-space-around-start
{
align-items: flex-start;
align-content: flex-start;
}
// Cross Axis Center
.#{$name}-start-center,
.#{$name}-center-center,
.#{$name}-end-center,
.#{$name}-space-between-center,
.#{$name}-space-around-center
{
align-items: center;
align-content: center;
max-width: 100%;
}
// Cross Axis Center IE overflow fix
.#{$name}-start-center > *,
.#{$name}-center-center > *,
.#{$name}-end-center > *,
.#{$name}-space-between-center > *,
.#{$name}-space-around-center > *
{
max-width: 100%;
box-sizing: border-box;
}
// Cross Axis End
.#{$name}-start-end,
.#{$name}-center-end,
.#{$name}-end-end,
.#{$name}-space-between-end,
.#{$name}-space-around-end
{
align-items: flex-end;
align-content: flex-end;
}
// Cross Axis Start
.#{$name}-start-stretch,
.#{$name}-center-stretch,
.#{$name}-end-stretch,
.#{$name}-space-between-stretch,
.#{$name}-space-around-stretch
{
align-items: stretch;
align-content: stretch;
}
}
@mixin layout-padding-margin() {
// NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
.layout-padding-sm > *,
.layout-padding > .flex-sm
{
padding: $layout-gutter-width / 4;
}
.layout-padding,
.layout-padding-gt-sm,
.layout-padding-md,
// NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
.layout-padding > *,
.layout-padding-gt-sm > *,
.layout-padding-md > *,
.layout-padding > .flex,
.layout-padding > .flex-gt-sm,
.layout-padding > .flex-md
{
padding: $layout-gutter-width / 2;
}
// NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
.layout-padding-gt-md > *,
.layout-padding-lg > *,
.layout-padding-gt-lg > *,
.layout-padding > .flex-gt-md,
.layout-padding > .flex-lg,
.layout-padding > .flex-lg,
.layout-padding > .flex-gt-lg
{
padding: $layout-gutter-width / 1;
}
// Margin enhancements
.layout-margin-sm > *,
.layout-margin > .flex-sm
{
margin: $layout-gutter-width / 4;
}
.layout-margin,
.layout-margin-gt-sm,
.layout-margin-md,
// NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
.layout-margin > *,
.layout-margin-gt-sm > *,
.layout-margin-md > *,
.layout-margin > .flex,
.layout-margin > .flex-gt-sm,
.layout-margin > .flex-md
{
margin: $layout-gutter-width / 2;
}
// NOTE: these`> *` selectors should only be applied for layout="row" or layout="column" children !!
.layout-margin-gt-md > *,
.layout-margin-lg > *,
.layout-margin-gt-lg > *,
.layout-margin > .flex-gt-md,
.layout-margin > .flex-lg,
.layout-margin > .flex-gt-lg
{
margin: $layout-gutter-width / 1;
}
.layout-wrap {
flex-wrap: wrap;
}
.layout-nowrap {
flex-wrap: nowrap;
}
.layout-fill {
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
}
}
@mixin layouts_for_breakpoint($name:null) {
@include flex-order-for-name($name);
@include offset-for-name($name);
@include layout-align-for-name($name);
@include flex-properties-for-name($name);
@include layout-for-name($name);
}