PageRenderTime 22ms CodeModel.GetById 13ms app.highlight 6ms RepoModel.GetById 2ms app.codeStats 0ms

/mizuxe2017/scss/bootstrap/utilities/_flex.scss

https://bitbucket.org/Trulsh/personal-bootstrap-projects
Sass | 46 lines | 34 code | 8 blank | 4 comment | 0 complexity | f18428e932f17a5fa4ad3c9dd6d08adf MD5 | raw file
 1// stylelint-disable declaration-no-important
 2
 3// Flex variation
 4//
 5// Custom styles for additional flex alignment options.
 6
 7@each $breakpoint in map-keys($grid-breakpoints) {
 8  @include media-breakpoint-up($breakpoint) {
 9    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10
11    .flex#{$infix}-row            { flex-direction: row !important; }
12    .flex#{$infix}-column         { flex-direction: column !important; }
13    .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
14    .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
15
16    .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
17    .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
18    .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
19
20    .justify-content#{$infix}-start   { justify-content: flex-start !important; }
21    .justify-content#{$infix}-end     { justify-content: flex-end !important; }
22    .justify-content#{$infix}-center  { justify-content: center !important; }
23    .justify-content#{$infix}-between { justify-content: space-between !important; }
24    .justify-content#{$infix}-around  { justify-content: space-around !important; }
25
26    .align-items#{$infix}-start    { align-items: flex-start !important; }
27    .align-items#{$infix}-end      { align-items: flex-end !important; }
28    .align-items#{$infix}-center   { align-items: center !important; }
29    .align-items#{$infix}-baseline { align-items: baseline !important; }
30    .align-items#{$infix}-stretch  { align-items: stretch !important; }
31
32    .align-content#{$infix}-start   { align-content: flex-start !important; }
33    .align-content#{$infix}-end     { align-content: flex-end !important; }
34    .align-content#{$infix}-center  { align-content: center !important; }
35    .align-content#{$infix}-between { align-content: space-between !important; }
36    .align-content#{$infix}-around  { align-content: space-around !important; }
37    .align-content#{$infix}-stretch { align-content: stretch !important; }
38
39    .align-self#{$infix}-auto     { align-self: auto !important; }
40    .align-self#{$infix}-start    { align-self: flex-start !important; }
41    .align-self#{$infix}-end      { align-self: flex-end !important; }
42    .align-self#{$infix}-center   { align-self: center !important; }
43    .align-self#{$infix}-baseline { align-self: baseline !important; }
44    .align-self#{$infix}-stretch  { align-self: stretch !important; }
45  }
46}