openecomp-ui/resources/scss/components/_grid.scss

   1 .grid-section {
   2   $gridItemSpace: 15%;
   3
   4   @mixin gridCol($numOfCols, $flexBasis) {
   5     .#{grid-col- + $numOfCols} {
   6       @extend %grid-col-base;
   7       flex-basis:  $flexBasis;
   8       &:not(.last-col-in-row):after {
   9         flex-basis: $gridItemSpace / $numOfCols;
  10         content: ' ';
  11       }
  12     }
  13   }
  14
  15   @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
  16     .#{grid-col- + $numOfCols} {
  17       @extend %grid-col-base;
  18       &:not(.last-col-in-row) {
  19         flex-basis:  $flexBasis;
  20         margin-right: 5%;
  21       }
  22       &.last-col-in-row {
  23         flex-basis:  $flexBasisLast;
  24       }
  25     }
  26   }
  27
  28   &:not(:last-of-type) {
  29     padding-bottom: 30px;
  30   }
  31
  32   .grid-items {
  33     display: flex;
  34     flex-direction: row;
  35     flex-wrap: wrap;
  36   }
  37
  38   %grid-col-base {
  39     flex-shrink: 0;
  40     display: flex;
  41   }
  42
  43   .grid-item {
  44     flex: 1;
  45     display: flex;
  46     flex-direction: column;
  47   }
  48
  49   .grid-item-stretch {
  50     @extend .grid-item;
  51     & *:last-child {
  52       flex: 1;
  53       display: flex;
  54       flex-direction: column;
  55     }
  56   }
  57
  58   &.has-last-col-set {
  59     @include gridColWithLastColumn(1, 21%, 22%);
  60     @include gridColWithLastColumn(2, 47%, 48%);
  61     @include gridColWithLastColumn(3, 73%, 74%);
  62     @include gridColWithLastColumn(4, 100%, 100%);
  63   }
  64
  65   &:not(.has-last-col-set) {
  66     @include gridCol(1, 25%);
  67     @include gridCol(2, 50%);
  68     @include gridCol(3, 75%);
  69     @include gridCol(4, 100%);
  70   }
  71 }