Просмотр исходного кода

apply gray-color to the preview content

kaori 5 лет назад
Родитель
Сommit
b2f74b22a9

+ 4 - 2
src/client/js/components/PageEditor/GridEditModal.jsx

@@ -143,7 +143,7 @@ class GridEditModal extends React.Component {
     const isMdSelected = this.state.responsiveSize === BootstrapGrid.ResponsiveSize.MD_SIZE;
     const isXsSelected = this.state.responsiveSize === BootstrapGrid.ResponsiveSize.XS_SIZE;
     return (
-      <div className="row">
+      <div className="row grw-grid-edit-prevew-bg-color">
         <div className="col-lg-3">
           <label className="d-block mt-2">{t('phone')}</label>
           <div className="mobile-preview d-block">
@@ -226,7 +226,9 @@ class GridEditModal extends React.Component {
             </div>
           </div>
           <h3 className="grw-modal-head">{t('preview')}</h3>
-          {this.renderPreview()}
+          <div className="col-12">
+            {this.renderPreview()}
+          </div>
         </ModalBody>
         <ModalFooter className="grw-modal-footer">
           <div className="ml-auto">

+ 6 - 0
src/client/styles/scss/_on-edit.scss

@@ -377,3 +377,9 @@ body.on-edit {
     }
   }
 }
+
+.grw-grid-edit-prevew-bg-color {
+  background: $gray-100;
+  // border: $gray-200;
+  border-color: red;
+}