feat: add wrapper styles

sibiraj-s · Jan 13, 2021 · f1934b8 · f1934b8
1 parent e069eb0
commit f1934b8
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -85,13 +85,15 @@ export class EditorComponent implements OnInit, OnDestroy {
 Then in HTML
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
-<ngx-editor
-  [editor]="editor"
-  [ngModel]="html"
-  [editable]="true"
-  [placeholder]="Type here..."
-></ngx-editor>
+<div class="NgxEditor__Wrapper">
+  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+  <ngx-editor
+    [editor]="editor"
+    [ngModel]="html"
+    [editable]="true"
+    [placeholder]="Type here..."
+  ></ngx-editor>
+</div>
 ```
 
 Note: Input can be a HTML string or a jsonDoc

diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
@@ -15,7 +15,7 @@
 
     <form [formGroup]="form">
 
-      <div class="editor">
+      <div class="editor NgxEditor__Wrapper">
         <ngx-editor-menu [editor]="editor" [toolbar]="toolbar" [customMenuRef]="customMenu">
         </ngx-editor-menu>
         <ngx-editor [editor]="editor" formControlName="editorContent">

diff --git a/demo/src/app/app.component.scss b/demo/src/app/app.component.scss
@@ -36,21 +36,6 @@
 }
 
 .editor {
-  border: 2px solid rgba(0, 0, 0, 0.2);
-  border-radius: 4px;
-
-  .NgxEditor__MenuBar {
-    border-top-left-radius: 4px;
-    border-top-right-radius: 4px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
-  }
-
-  .NgxEditor {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-    border: none;
-  }
-
   .CodeMirror {
     border: 1px solid #eee;
     height: auto;

diff --git a/docs/README.md b/docs/README.md
@@ -85,13 +85,15 @@ export class EditorComponent implements OnInit, OnDestroy {
 Then in HTML
 
 ```html
-<ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
-<ngx-editor
-  [editor]="editor"
-  [ngModel]="html"
-  [editable]="true"
-  [placeholder]="Type here..."
-></ngx-editor>
+<div class="NgxEditor__Wrapper">
+  <ngx-editor-menu [editor]="editor" [toolbar]="toolbar"> </ngx-editor-menu>
+  <ngx-editor
+    [editor]="editor"
+    [ngModel]="html"
+    [editable]="true"
+    [placeholder]="Type here..."
+  ></ngx-editor>
+</div>
 ```
 
 Note: Input can be a HTML string or a jsonDoc

diff --git a/src/lib/editor.component.scss b/src/lib/editor.component.scss
@@ -104,3 +104,20 @@ $light-gray: #f1f1f1;
     }
   }
 }
+
+.NgxEditor__Wrapper {
+  border: 1px solid rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+
+  .NgxEditor__MenuBar {
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+  }
+
+  .NgxEditor {
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border: none;
+  }
+}