valentineus/popov.link
valentineus/popov.link
0
Fork 0
Code Issues Pull Requests Actions Releases Activity

Snippets flexbox

Browse Source
This commit is contained in:
Valentin Popov 2018-04-18 01:30:22 +04:00
parent 6e44c9b432
commit b5a946b6f5
Signed by: Valentin Popov
GPG Key ID: 269A00ACA90A8EA3
1 changed files with 46 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
_scss/_flexbox.scss → _scss/utilities/_flexbox.scss
View File

@ -22,18 +22,25 @@
// property to determine the main size of the element. If an element is // property to determine the main size of the element. If an element is
// not a flex item, 'flex' has no effect. // not a flex item, 'flex' has no effect.
// //
// Values: <flex-basis> // Values: none | <flex-grow> <flex-shrink> || <flex-basis>
// Default: 1 // Default: See individual properties (1 1 0)
// //
// http://w3.org/tr/css3-flexbox/#flex-property // http://w3.org/tr/css3-flexbox/#flex-property
@mixin flex($values: 1) { @mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $values;
-moz-box-flex: $values; $fg-boxflex: $fg;
-webkit-flex: $values;
-moz-flex: $values; @if type-of($fg) == 'list' {
-ms-flex: $values; $fg-boxflex: nth($fg, 1);
flex: $values; }
-webkit-box-flex: $fg-boxflex;
-moz-box-flex: $fg-boxflex;
-webkit-flex: $fg $fs $fb;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
} }
// Flexbox Direction // Flexbox Direction
@ -48,6 +55,20 @@
// http://w3.org/tr/css3-flexbox/#flex-direction-property // http://w3.org/tr/css3-flexbox/#flex-direction-property
@mixin flex-direction($value: row) { @mixin flex-direction($value: row) {
@if $value == 'row-reverse' {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == 'column' {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == 'column-reverse' {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value; -webkit-flex-direction: $value;
-moz-flex-direction: $value; -moz-flex-direction: $value;
-ms-flex-direction: $value; -ms-flex-direction: $value;
@ -66,7 +87,7 @@
// http://w3.org/tr/css3-flexbox/#flex-wrap-property // http://w3.org/tr/css3-flexbox/#flex-wrap-property
@mixin flex-wrap($value: nowrap) { @mixin flex-wrap($value: nowrap) {
@if $value == nowrap { @if $value == 'nowrap' {
-ms-flex-wrap: none; -ms-flex-wrap: none;
} @else { } @else {
-ms-flex-wrap: $value; -ms-flex-wrap: $value;
@ -182,16 +203,16 @@
// http://w3.org/tr/css3-flexbox/#justify-content-property // http://w3.org/tr/css3-flexbox/#justify-content-property
@mixin justify-content($value: flex-start) { @mixin justify-content($value: flex-start) {
@if $value == flex-start { @if $value == 'flex-start' {
-webkit-box-pack: start; -webkit-box-pack: start;
-ms-flex-pack: start; -ms-flex-pack: start;
} @else if $value == flex-end { } @else if $value == 'flex-end' {
-webkit-box-pack: end; -webkit-box-pack: end;
-ms-flex-pack: end; -ms-flex-pack: end;
} @else if $value == space-between { } @else if $value == 'space-between' {
-webkit-box-pack: justify; -webkit-box-pack: justify;
-ms-flex-pack: justify; -ms-flex-pack: justify;
} @else if $value == space-around { } @else if $value == 'space-around' {
-ms-flex-pack: distribute; -ms-flex-pack: distribute;
} @else { } @else {
-webkit-box-pack: $value; -webkit-box-pack: $value;
@ -217,19 +238,19 @@
// //
// http://w3.org/tr/css3-flexbox/#align-content-property // http://w3.org/tr/css3-flexbox/#align-content-property
@mixin align-content($align: stretch) { @mixin align-content($value: stretch) {
@if $value == flex-start { @if $value == 'flex-start' {
-ms-flex-line-pack: start; -ms-flex-line-pack: start;
} @else if $value == flex-end { } @else if $value == 'flex-end' {
-ms-flex-line-pack: end; -ms-flex-line-pack: end;
} @else { } @else {
-ms-flex-line-pack: $value; -ms-flex-line-pack: $value;
} }
-webkit-align-content: $align; -webkit-align-content: $value;
-moz-align-content: $align; -moz-align-content: $value;
-ms-align-content: $align; -ms-align-content: $value;
align-content: $align; align-content: $value;
} }
// Flexbox Align Items // Flexbox Align Items
@ -248,10 +269,10 @@
// http://w3.org/tr/css3-flexbox/#align-items-property // http://w3.org/tr/css3-flexbox/#align-items-property
@mixin align-items($value: stretch) { @mixin align-items($value: stretch) {
@if $value == flex-start { @if $value == 'flex-start' {
-webkit-box-align: start; -webkit-box-align: start;
-ms-flex-align: start; -ms-flex-align: start;
} @else if $value == flex-end { } @else if $value == 'flex-end' {
-webkit-box-align: end; -webkit-box-align: end;
-ms-flex-align: end; -ms-flex-align: end;
} @else { } @else {
@ -271,9 +292,9 @@
// Default: auto // Default: auto
@mixin align-self($value: auto) { @mixin align-self($value: auto) {
@if $value == flex-start { @if $value == 'flex-start' {
-ms-flex-item-align: start; -ms-flex-item-align: start;
} @else if $value == flex-end { } @else if $value == 'flex-end' {
-ms-flex-item-align: end; -ms-flex-item-align: end;
} @else { } @else {
-ms-flex-item-align: $value; -ms-flex-item-align: $value;