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

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