fix(style): don`t disturb native styles

closes #68
sibiraj-s · Feb 27, 2018 · 01ef7b7 · 01ef7b7
1 parent 7b1e5f9
commit 01ef7b7
Show file tree

Hide file tree

Showing 4 changed files with 247 additions and 243 deletions.
diff --git a/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html b/src/app/ngx-editor/ngx-editor-toolbar/ngx-editor-toolbar.component.html
@@ -27,11 +27,11 @@
   </div>
   <div class="ngx-toolbar-set">
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('fontSize')" (click)="fontSize = ''" title="Font Size"
-      [popover]="fontSizeTemplate" #fontSizePopover="bs-popover" [disabled]="!config['enableToolbar']">
+      [popover]="fontSizeTemplate" #fontSizePopover="bs-popover" containerClass="ngxePopover" [disabled]="!config['enableToolbar']">
       <i class="fa fa-text-height" aria-hidden="true"></i>
     </button>
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('color')" (click)="hexColor = ''" title="Color Picker"
-      [popover]="insertColorTemplate" #colorPopover="bs-popover" [disabled]="!config['enableToolbar']">
+      [popover]="insertColorTemplate" #colorPopover="bs-popover" containerClass="ngxePopover" [disabled]="!config['enableToolbar']">
       <i class="fa fa-tint" aria-hidden="true"></i>
     </button>
   </div>
@@ -115,15 +115,15 @@
   </div>
   <div class="ngx-toolbar-set">
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('link')" (click)="buildUrlForm()" [popover]="insertLinkTemplate"
-      title="Insert Link" #urlPopover="bs-popover" [disabled]="!config['enableToolbar']">
+      title="Insert Link" #urlPopover="bs-popover" containerClass="ngxePopover" [disabled]="!config['enableToolbar']">
       <i class="fa fa-link" aria-hidden="true"></i>
     </button>
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('unlink')" (click)="triggerCommand('unlink')"
       title="Unlink" [disabled]="!config['enableToolbar']">
       <i class="fa fa-chain-broken" aria-hidden="true"></i>
     </button>
     <button type="button" class="ngx-editor-button" *ngIf="canEnableToolbarOptions('image')" (click)="buildInsertImageForm()"
-      title="Insert Image" [popover]="insertImageTemplate" #imagePopover="bs-popover" [disabled]="!config['enableToolbar']">
+      title="Insert Image" [popover]="insertImageTemplate" #imagePopover="bs-popover" containerClass="ngxePopover" [disabled]="!config['enableToolbar']">
       <i class="fa fa-picture-o" aria-hidden="true"></i>
     </button>
   </div>

diff --git a/src/assets/styles/_buttons.scss b/src/assets/styles/_buttons.scss
@@ -1,45 +1,47 @@
-::ng-deep .btn {
-    display: inline-block;
-    font-weight: 400;
-    text-align: center;
-    white-space: nowrap;
-    vertical-align: middle;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-    border: 1px solid transparent;
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    line-height: 1.5;
-    border-radius: 0.25rem;
-    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-    &.btn-sm {
-        padding: 0.25rem 0.5rem;
-        font-size: 0.875rem;
+::ng-deep .ngxePopover {
+    .btn {
+        display: inline-block;
+        font-weight: 400;
+        text-align: center;
+        white-space: nowrap;
+        vertical-align: middle;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        border: 1px solid transparent;
+        padding: 0.375rem 0.75rem;
+        font-size: 1rem;
         line-height: 1.5;
-        border-radius: 0.2rem;
-    }
+        border-radius: 0.25rem;
+        transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 
-    &:active, &:focus {
-        outline: none;
-        box-shadow: none;
-    }
+        &.btn-sm {
+            padding: 0.25rem 0.5rem;
+            font-size: 0.875rem;
+            line-height: 1.5;
+            border-radius: 0.2rem;
+        }
 
-    &.btn-primary {
-        color: #fff;
-        background-color: #007bff;
-        border-color: #007bff;
+        &:active, &:focus {
+            outline: none;
+            box-shadow: none;
+        }
 
-        &:hover {
+        &.btn-primary {
             color: #fff;
-            background-color: #0069d9;
-            border-color: #0062cc;
+            background-color: #007bff;
+            border-color: #007bff;
+
+            &:hover {
+                color: #fff;
+                background-color: #0069d9;
+                border-color: #0062cc;
+            }
         }
-    }
 
-    &:not(:disabled):not(.disabled) {
-        cursor: pointer;
+        &:not(:disabled):not(.disabled) {
+            cursor: pointer;
+        }
     }
 }
diff --git a/src/assets/styles/_forms.scss b/src/assets/styles/_forms.scss
@@ -1,33 +1,35 @@
-::ng-deep form {
-    .form-group {
-        margin-bottom: 1rem;
+::ng-deep .ngxePopover {
+    form {
+        .form-group {
+            margin-bottom: 1rem;
 
-        input {
-            overflow: visible;
-        }
+            input {
+                overflow: visible;
+            }
 
-        .form-control-sm {
-            width: 100%;
-            outline: none;
-            border: none;
-            border-bottom: solid 1px #bdbdbd;
-            border-radius: 0;
-            margin-bottom: 1px;
-            padding: .25rem .5rem;
-            font-size: .875rem;
-            line-height: 1.5;
+            .form-control-sm {
+                width: 100%;
+                outline: none;
+                border: none;
+                border-bottom: solid 1px #bdbdbd;
+                border-radius: 0;
+                margin-bottom: 1px;
+                padding: .25rem .5rem;
+                font-size: .875rem;
+                line-height: 1.5;
+            }
         }
-    }
 
-    .form-check {
-        position: relative;
-        display: block;
-        padding-left: 1.25rem;
+        .form-check {
+            position: relative;
+            display: block;
+            padding-left: 1.25rem;
 
-        .form-check-input {
-            position: absolute;
-            margin-top: .3rem;
-            margin-left: -1.25rem;
+            .form-check-input {
+                position: absolute;
+                margin-top: .3rem;
+                margin-left: -1.25rem;
+            }
         }
     }
 }