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

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