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, 33%);
  67         @include gridCol(2, 50%);
  68         @include gridCol(3, 75%);
  69         @include gridCol(4, 100%);
  70     }
  71 }