/*! Flexible Grid System 5.6.0 | Scss | MIT License | dnomak.com/flexiblegs */ @mixin wrap($prop: null, $val: null) { @if $prop == null { display: block; width: 100%; font-size: 0; letter-spacing: 0; text-align: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; > * { display: inline-block; vertical-align: top; } } @else if $prop == "table" { display: table; table-layout: fixed; -webkit-flex-direction: initial; -ms-flex-direction: initial; flex-direction: initial; -webkit-flex-wrap: initial; -ms-flex-wrap: initial; flex-wrap: initial; -webkit-justify-content: initial; -ms-justify-content: initial; justify-content: initial; -webkit-align-content: initial; -ms-align-content: initial; align-content: initial; -webkit-align-items: initial; -ms-align-items: initial; align-items: initial; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; > * { display: table-cell; } } @else if $prop == "flexbox" { display: -webkit-flex; display: -ms-flexbox; display: flex; table-layout: auto; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; -webkit-align-content: center; -ms-align-content: center; align-content: center; -webkit-align-items: center; -ms-align-items: center; align-items: center; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; > * { display: inline-block; } } @else if $prop == "normal" { display: block; table-layout: auto; -webkit-flex-direction: initial; -ms-flex-direction: initial; flex-direction: initial; -webkit-flex-wrap: initial; -ms-flex-wrap: initial; flex-wrap: initial; -webkit-justify-content: initial; -ms-justify-content: initial; justify-content: initial; -webkit-align-content: initial; -ms-align-content: initial; align-content: initial; -webkit-align-items: initial; -ms-align-items: initial; align-items: initial; -webkit-column-count: auto; -moz-column-count: auto; column-count: auto; > * { display: inline-block; } } @else if $prop == "left" { -webkit-justify-content: flex-start; -ms-justify-content: flex-start; justify-content: flex-start; text-align: left; } @else if $prop == "center" { -webkit-justify-content: center; -ms-justify-content: center; justify-content: center; text-align: center; } @else if $prop == "right" { -webkit-justify-content: flex-end; -ms-justify-content: flex-end; justify-content: flex-end; text-align: right; } @else if $prop == "top" { -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; > * { vertical-align: top; } } @else if $prop == "middle" { -webkit-align-items: center; -ms-align-items: center; align-items: center; > * { vertical-align: middle; } } @else if $prop == "bottom" { -webkit-align-items: flex-end; -ms-align-items: flex-end; align-items: flex-end; > * { vertical-align: bottom; } } @else if $prop == "stretch" { -webkit-align-content: stretch; -ms-align-content: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-align-items: stretch; align-items: stretch; } @else if $prop == "between" { -webkit-justify-content: space-between; -ms-justify-content: space-between; justify-content: space-between; -webkit-align-content: space-between; -ms-align-content: space-between; align-content: space-between; } @else if $prop == "around" { -webkit-justify-content: space-around; -ms-justify-content: space-around; justify-content: space-around; -webkit-align-content: space-around; -ms-align-content: space-around; align-content: space-around; } @else if $prop == "baseline" { -webkit-align-items: baseline; -ms-align-items: baseline; align-items: baseline; } @else if $prop == "reverse" { -webkit-flex-direction: row-reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-flex-wrap: wrap-reverse; -ms-flex-wrap: wrap-reverse; flex-wrap: wrap-reverse; } @else if $prop == "not-reverse" { -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } @else if $prop == "gutter" { width: calc(100% + #{$val}#{"px"}); margin-left: -#{$val / 2}#{"px"}; margin-right: -#{$val / 2}#{"px"}; padding-left: 0; padding-right: 0; > * { padding-left: #{$val / 2}#{"px"}; padding-right: #{$val / 2}#{"px"}; } } @else if $prop == "outside" { width: 100%; margin-left: 0; margin-right: 0; padding-left: #{$val / 2}#{"px"}; padding-right: #{$val / 2}#{"px"}; } @else { > * { @if $prop == "auto" { width: auto; } @else { width: #{100% / $prop}; } } } } @mixin col($prop: null, $val: null) { @if $prop == null { min-height: 1px; font-size: 1rem; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } @else if $prop == "width" { width: #{$val}#{"px"}; } @else if $prop == "hidden" { display: none; } @else if $prop == "not-hidden" { display: inline-block; } @else if $prop == "first" { -ms-flex-order: -1; -webkit-order: -1; order: -1; } @else if $prop == "not-first" { -ms-flex-order: 0; -webkit-order: 0; order: 0; } @else if $prop == "last" { -ms-flex-order: 1; -webkit-order: 1; order: 1; } @else if $prop == "not-last" { -ms-flex-order: 0; -webkit-order: 0; order: 0; } @else { width: #{100% / $val * $prop}; } }