_display.scss
136 lines
| 1 | /** |
| 2 | * Display Variations |
| 3 | **/ |
| 4 | $displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex; |
| 5 | |
| 6 | @each $breakpoint in map-keys($grid-breakpoints) { |
| 7 | @include media-breakpoint-up($breakpoint) { |
| 8 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); |
| 9 | |
| 10 | @each $value in $displays { |
| 11 | .evf-d#{$infix}-#{$value} { |
| 12 | display: $value !important; |
| 13 | } |
| 14 | } |
| 15 | } |
| 16 | } |
| 17 | |
| 18 | /** |
| 19 | * Flex variation |
| 20 | * |
| 21 | * Custom styles for additional flex alignment options. |
| 22 | **/ |
| 23 | @each $breakpoint in map-keys($grid-breakpoints) { |
| 24 | @include media-breakpoint-up($breakpoint) { |
| 25 | $infix: breakpoint-infix($breakpoint, $grid-breakpoints); |
| 26 | |
| 27 | .evf-flex#{$infix}-row { |
| 28 | flex-direction: row !important; |
| 29 | } |
| 30 | .evf-flex#{$infix}-column { |
| 31 | flex-direction: column !important; |
| 32 | } |
| 33 | .evf-flex#{$infix}-row-reverse { |
| 34 | flex-direction: row-reverse !important; |
| 35 | } |
| 36 | .evf-flex#{$infix}-column-reverse { |
| 37 | flex-direction: column-reverse !important; |
| 38 | } |
| 39 | |
| 40 | .evf-flex#{$infix}-wrap { |
| 41 | flex-wrap: wrap !important; |
| 42 | } |
| 43 | .evf-flex#{$infix}-nowrap { |
| 44 | flex-wrap: nowrap !important; |
| 45 | } |
| 46 | .evf-flex#{$infix}-wrap-reverse { |
| 47 | flex-wrap: wrap-reverse !important; |
| 48 | } |
| 49 | .evf-flex#{$infix}-fill { |
| 50 | flex: 1 1 auto !important; |
| 51 | } |
| 52 | .evf-flex#{$infix}-grow-0 { |
| 53 | flex-grow: 0 !important; |
| 54 | } |
| 55 | .evf-flex#{$infix}-grow-1 { |
| 56 | flex-grow: 1 !important; |
| 57 | } |
| 58 | .evf-flex#{$infix}-shrink-0 { |
| 59 | flex-shrink: 0 !important; |
| 60 | } |
| 61 | .evf-flex#{$infix}-shrink-1 { |
| 62 | flex-shrink: 1 !important; |
| 63 | } |
| 64 | |
| 65 | .evf-justify-content#{$infix}-start { |
| 66 | justify-content: flex-start !important; |
| 67 | } |
| 68 | .evf-justify-content#{$infix}-end { |
| 69 | justify-content: flex-end !important; |
| 70 | } |
| 71 | .evf-justify-content#{$infix}-center { |
| 72 | justify-content: center !important; |
| 73 | } |
| 74 | .evf-justify-content#{$infix}-between { |
| 75 | justify-content: space-between !important; |
| 76 | } |
| 77 | .evf-justify-content#{$infix}-around { |
| 78 | justify-content: space-around !important; |
| 79 | } |
| 80 | |
| 81 | .evf-align-items#{$infix}-start { |
| 82 | align-items: flex-start !important; |
| 83 | } |
| 84 | .evf-align-items#{$infix}-end { |
| 85 | align-items: flex-end !important; |
| 86 | } |
| 87 | .evf-align-items#{$infix}-center { |
| 88 | align-items: center !important; |
| 89 | } |
| 90 | .evf-align-items#{$infix}-baseline { |
| 91 | align-items: baseline !important; |
| 92 | } |
| 93 | .evf-align-items#{$infix}-stretch { |
| 94 | align-items: stretch !important; |
| 95 | } |
| 96 | |
| 97 | .evf-align-content#{$infix}-start { |
| 98 | align-content: flex-start !important; |
| 99 | } |
| 100 | .evf-align-content#{$infix}-end { |
| 101 | align-content: flex-end !important; |
| 102 | } |
| 103 | .evf-align-content#{$infix}-center { |
| 104 | align-content: center !important; |
| 105 | } |
| 106 | .evf-align-content#{$infix}-between { |
| 107 | align-content: space-between !important; |
| 108 | } |
| 109 | .evf-align-content#{$infix}-around { |
| 110 | align-content: space-around !important; |
| 111 | } |
| 112 | .evf-align-content#{$infix}-stretch { |
| 113 | align-content: stretch !important; |
| 114 | } |
| 115 | |
| 116 | .evf-align-self#{$infix}-auto { |
| 117 | align-self: auto !important; |
| 118 | } |
| 119 | .evf-align-self#{$infix}-start { |
| 120 | align-self: flex-start !important; |
| 121 | } |
| 122 | .evf-align-self#{$infix}-end { |
| 123 | align-self: flex-end !important; |
| 124 | } |
| 125 | .evf-align-self#{$infix}-center { |
| 126 | align-self: center !important; |
| 127 | } |
| 128 | .evf-align-self#{$infix}-baseline { |
| 129 | align-self: baseline !important; |
| 130 | } |
| 131 | .evf-align-self#{$infix}-stretch { |
| 132 | align-self: stretch !important; |
| 133 | } |
| 134 | } |
| 135 | } |
| 136 |