react 16 upgrade
[sdc.git] / openecomp-ui / resources / scss / components / _grid.scss
index f210b64..595b0cd 100644 (file)
@@ -1,71 +1,71 @@
 .grid-section {
-  $gridItemSpace: 15%;
+    $gridItemSpace: 15%;
 
-  @mixin gridCol($numOfCols, $flexBasis) {
-    .#{grid-col- + $numOfCols} {
-      @extend %grid-col-base;
-      flex-basis:  $flexBasis;
-      &:not(.last-col-in-row):after {
-        flex-basis: $gridItemSpace / $numOfCols;
-        content: ' ';
-      }
+    @mixin gridCol($numOfCols, $flexBasis) {
+        .#{grid-col- + $numOfCols} {
+            @extend %grid-col-base;
+            flex-basis: $flexBasis;
+            &:not(.last-col-in-row):after {
+                flex-basis: $gridItemSpace / $numOfCols;
+                content: ' ';
+            }
+        }
     }
-  }
 
-  @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
-    .#{grid-col- + $numOfCols} {
-      @extend %grid-col-base;
-      &:not(.last-col-in-row) {
-        flex-basis:  $flexBasis;
-        margin-right: 5%;
-      }
-      &.last-col-in-row {
-        flex-basis:  $flexBasisLast;
-      }
+    @mixin gridColWithLastColumn($numOfCols, $flexBasis, $flexBasisLast) {
+        .#{grid-col- + $numOfCols} {
+            @extend %grid-col-base;
+            &:not(.last-col-in-row) {
+                flex-basis: $flexBasis;
+                margin-right: 5%;
+            }
+            &.last-col-in-row {
+                flex-basis: $flexBasisLast;
+            }
+        }
     }
-  }
 
-  &:not(:last-of-type) {
-    padding-bottom: 30px;
-  }
+    &:not(:last-of-type) {
+        padding-bottom: 30px;
+    }
 
-  .grid-items {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-  }
+    .grid-items {
+        display: flex;
+        flex-direction: row;
+        flex-wrap: wrap;
+    }
 
-  %grid-col-base {
-    flex-shrink: 0;
-    display: flex;
-  }
+    %grid-col-base {
+        flex-shrink: 0;
+        display: flex;
+    }
 
-  .grid-item {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
+    .grid-item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+    }
 
-  .grid-item-stretch {
-    @extend .grid-item;
-    & *:last-child {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
+    .grid-item-stretch {
+        @extend .grid-item;
+        & *:last-child {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+        }
     }
-  }
 
-  &.has-last-col-set {
-    @include gridColWithLastColumn(1, 21%, 22%);
-    @include gridColWithLastColumn(2, 47%, 48%);
-    @include gridColWithLastColumn(3, 73%, 74%);
-    @include gridColWithLastColumn(4, 100%, 100%);
-  }
+    &.has-last-col-set {
+        @include gridColWithLastColumn(1, 21%, 22%);
+        @include gridColWithLastColumn(2, 47%, 48%);
+        @include gridColWithLastColumn(3, 73%, 74%);
+        @include gridColWithLastColumn(4, 100%, 100%);
+    }
 
-  &:not(.has-last-col-set) {
-    @include gridCol(1, 25%);
-    @include gridCol(2, 50%);
-    @include gridCol(3, 75%);
-    @include gridCol(4, 100%);
-  }
+    &:not(.has-last-col-set) {
+        @include gridCol(1, 25%);
+        @include gridCol(2, 50%);
+        @include gridCol(3, 75%);
+        @include gridCol(4, 100%);
+    }
 }