| kumaran.m | 3b4814a | 2020-05-01 19:48:54 +0530 | [diff] [blame^] | 1 | /* |
| 2 | Copyright 2020 TATA ELXSI |
| 3 | |
| 4 | Licensed under the Apache License, Version 2.0 (the 'License'); |
| 5 | you may not use this file except in compliance with the License. |
| 6 | You may obtain a copy of the License at |
| 7 | |
| 8 | http://www.apache.org/licenses/LICENSE-2.0 |
| 9 | |
| 10 | Unless required by applicable law or agreed to in writing, software |
| 11 | distributed under the License is distributed on an "AS IS" BASIS, |
| 12 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| 13 | See the License for the specific language governing permissions and |
| 14 | limitations under the License. |
| 15 | |
| 16 | Author: KUMARAN M (kumaran.m@tataelxsi.co.in), RAJESH S (rajesh.s@tataelxsi.co.in), BARATH KUMAR R (barath.r@tataelxsi.co.in) |
| 17 | */ |
| 18 | /** |
| 19 | * @ file contains @mixin function for flex properties |
| 20 | * example: @include flexbox(flex, flex-start, row-reverse, center, center, flex-end); |
| 21 | * 1. display: flex | inline-flex |
| 22 | * 2. justify-content : flex-start | flex-end | center | space-between | space-around |
| 23 | * 3. flex-direction: row | row-reverse | column | column-reverse |
| 24 | * 4. align-content: flex-start | flex-end | center | space-between | space-around | stretch |
| 25 | * 5. align-items: flex-start | flex-end | center | baseline | stretch |
| 26 | * 6. align-self: auto | flex-start | flex-end | center | baseline | stretch |
| 27 | */ |
| 28 | |
| 29 | @mixin flexbox($display: null, $justify: null, $direction: null, $aligncontent: null, $alignitems: null, $alignself: null) { |
| 30 | display: $display; |
| 31 | justify-content: $justify; |
| 32 | flex-direction: $direction; |
| 33 | align-content: $aligncontent; |
| 34 | align-items: $alignitems; |
| 35 | align-self: $alignself; |
| 36 | } |
| 37 | |
| 38 | /** To set flexible length for items |
| 39 | * flex-grow: how much an item will grow relative to the rest of the flexible items |
| 40 | flex-shrink: how much an item will shrink relative to the rest of the flexible items |
| 41 | flex-basis: The length of the item. Legal values: "auto", "inherit", or a number followed by "%", "px", "em" |
| 42 | */ |
| 43 | @mixin flex($flex-grow: null, $flex-shrink: null, $flex-basis: null){ |
| 44 | flex-grow: $flex-grow; |
| 45 | flex-shrink: $flex-shrink; |
| 46 | flex-basis: $flex-basis; |
| 47 | } |