Home Explore Help
Sign In
SMusatov
/
gentelella
mirror of https://github.com/ColorlibHQ/gentelella.git
1
0
Fork 0
Files
Tree: c3812bbf23
Branches Tags
gentelella
/
vendors
/
bootstrap
/
scss
/
utilities
/
_flex.scss

_flex.scss 2.7 KB
History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 
  1. // stylelint-disable declaration-no-important
    2. 

  2. 

  3. // Flex variation
    4. 

  4. //
    5. 

  5. // Custom styles for additional flex alignment options.
    6. 

  6. 

  7. @each $breakpoint in map-keys($grid-breakpoints) {
    8. 

  8.   @include media-breakpoint-up($breakpoint) {
    9. 

  9.     $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    10. 

  10. 

  11.     .flex#{$infix}-row            { flex-direction: row !important; }
    12. 

  12.     .flex#{$infix}-column         { flex-direction: column !important; }
    13. 

  13.     .flex#{$infix}-row-reverse    { flex-direction: row-reverse !important; }
    14. 

  14.     .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
    15. 

  15. 

  16.     .flex#{$infix}-wrap         { flex-wrap: wrap !important; }
    17. 

  17.     .flex#{$infix}-nowrap       { flex-wrap: nowrap !important; }
    18. 

  18.     .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
    19. 

  19.     .flex#{$infix}-fill         { flex: 1 1 auto !important; }
    20. 

  20.     .flex#{$infix}-grow-0       { flex-grow: 0 !important; }
    21. 

  21.     .flex#{$infix}-grow-1       { flex-grow: 1 !important; }
    22. 

  22.     .flex#{$infix}-shrink-0     { flex-shrink: 0 !important; }
    23. 

  23.     .flex#{$infix}-shrink-1     { flex-shrink: 1 !important; }
    24. 

  24. 

  25.     .justify-content#{$infix}-start   { justify-content: flex-start !important; }
    26. 

  26.     .justify-content#{$infix}-end     { justify-content: flex-end !important; }
    27. 

  27.     .justify-content#{$infix}-center  { justify-content: center !important; }
    28. 

  28.     .justify-content#{$infix}-between { justify-content: space-between !important; }
    29. 

  29.     .justify-content#{$infix}-around  { justify-content: space-around !important; }
    30. 

  30. 

  31.     .align-items#{$infix}-start    { align-items: flex-start !important; }
    32. 

  32.     .align-items#{$infix}-end      { align-items: flex-end !important; }
    33. 

  33.     .align-items#{$infix}-center   { align-items: center !important; }
    34. 

  34.     .align-items#{$infix}-baseline { align-items: baseline !important; }
    35. 

  35.     .align-items#{$infix}-stretch  { align-items: stretch !important; }
    36. 

  36. 

  37.     .align-content#{$infix}-start   { align-content: flex-start !important; }
    38. 

  38.     .align-content#{$infix}-end     { align-content: flex-end !important; }
    39. 

  39.     .align-content#{$infix}-center  { align-content: center !important; }
    40. 

  40.     .align-content#{$infix}-between { align-content: space-between !important; }
    41. 

  41.     .align-content#{$infix}-around  { align-content: space-around !important; }
    42. 

  42.     .align-content#{$infix}-stretch { align-content: stretch !important; }
    43. 

  43. 

  44.     .align-self#{$infix}-auto     { align-self: auto !important; }
    45. 

  45.     .align-self#{$infix}-start    { align-self: flex-start !important; }
    46. 

  46.     .align-self#{$infix}-end      { align-self: flex-end !important; }
    47. 

  47.     .align-self#{$infix}-center   { align-self: center !important; }
    48. 

  48.     .align-self#{$infix}-baseline { align-self: baseline !important; }
    49. 

  49.     .align-self#{$infix}-stretch  { align-self: stretch !important; }
    50. 

  50.   }
    51. 

  51. }
    52.