jauhar54
/
jasaraharja
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
10 Commits
2 Branches
Branch: main
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'main'
${ noResults }
jasaraharja/public/assets/scss/argon-dashboard/bootstrap/utilities/_flex.scss

_flex.scss 2.7KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051 
  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.     .flex#{$infix}-fill         { flex: 1 1 auto !important; }

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

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

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

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

  24. 

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

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

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

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

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

  30. 

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

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

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

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

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

  36. 

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

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

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

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

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

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

  43. 

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

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

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

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

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

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

  50.   }

  51. }