Merge pull request #3288 from weseek/imprv/gw4862-apply-differnt-colors-to-each-col

apply different colors to each col

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -174,7 +174,7 @@ class GridEditModal extends React.Component {
       const key = `grid-preview-col-${i}`;
       const className = `col-${ratio} grid-edit-border-for-each-cols`;
       return (
-        <div key={key} className={className}></div>
+        <div key={key} className={`${key} ${className}`}></div>
       );
     });
     return (

src/client/styles/scss/_on-edit.scss

@@ -346,7 +346,6 @@ body.on-edit {
     .row {
       div {
         padding: 0px;
-        background-color: $info;
       }
     }
   }
@@ -355,7 +354,6 @@ body.on-edit {
     .row {
       div {
         padding: 0px;
-        background-color: $purple;
       }
     }
   }
@@ -365,7 +363,6 @@ body.on-edit {
     .row {
       div {
         padding: 0px;
-        background-color: $pink;
       }
     }
   }

src/client/styles/scss/theme/_apply-colors.scss

@@ -449,6 +449,22 @@ body.on-edit {
   }
 }
 
+.grid-preview-col-0 {
+  background: $growi-blue;
+}
+
+.grid-preview-col-1 {
+  background: $info;
+}
+
+.grid-preview-col-2 {
+  background: $success;
+}
+
+.grid-preview-col-3 {
+  background: $growi-green;
+}
+
 /*
  * GROWI comment
  */