Added targeted classes to pre and code tags to prevent style conflicts.

NoDivide · Jul 27, 2016 · 3433b9f · 3433b9f
1 parent d0d42fb
commit 3433b9f
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1 +1,2 @@
-node_modules
+node_modules
+.idea
diff --git a/_template/app/css/styles.css b/_template/app/css/styles.css
@@ -288,8 +288,8 @@
 .ndpl-error code { background-color: #e07070; }
 .ndpl-info code  { background-color: #7098e0; }
 
-.ndpl-error pre,
-.ndpl-info pre {
+.ndpl-error .ndpl-pre,
+.ndpl-info .ndpl-pre {
     margin-bottom: 0;
 }
 
@@ -1014,10 +1014,10 @@
 .ndpl-component__code {
     border-bottom: 1px solid #E0E6ED;
 }
-.ndpl-component__code pre {
+.ndpl-component__code .ndpl-pre {
     margin: 0;
 }
-.ndpl-component__code code {
+.ndpl-component__code .ndpl-code {
     font-size: 12px;
     line-height: 18px;
     opacity: 0.75;
@@ -1054,7 +1054,7 @@
         border: 1px solid #E0E6ED;
         border-top: none;
     }
-    .ndpl-component__code code {
+    .ndpl-component__code .ndpl-code {
         font-size: 15px;
         line-height: 21px;
         padding: 36px;

diff --git a/_template/app/css/styles.min.css b/_template/app/css/styles.min.css
diff --git a/_template/index.html b/_template/index.html
@@ -239,7 +239,7 @@ <h3 class="ndpl-component__title">{{ component.title }}</h3>
                                         </div>
                                         <ul v-else class="ndpl-component__sample-missing ndpl-info">
                                             <li class="ndpl-info__item">Locate this component in your <code>data.json</code> file and add your colors to the "colors" array that has been created for you e.g.:</li>
-                                            <li><pre>"colors": ["#4c4c4c","#7d8284","#a6b1b5","#e6eaf2","#FFFFFF"]</pre></li>
+                                            <li><pre class="ndpl-pre">"colors": ["#4c4c4c","#7d8284","#a6b1b5","#e6eaf2","#FFFFFF"]</pre></li>
                                         </ul>
                                     </template>
                                     <template v-else>
@@ -256,7 +256,7 @@ <h3 class="ndpl-component__title">{{ component.title }}</h3>
                                             <template v-if="component.html">
                                                 <div class="ndpl-component__code ndpl-c-border"
                                                      v-show="component.code_show">
-                                                    <pre><code class="html" v-text="component.html"></code></pre>
+                                                    <pre class="ndpl-pre"><code class="ndpl-code html" v-text="component.html"></code></pre>
                                                 </div>
                                                 <a class="ndpl-component__code-toggle ndpl-c-highlight ndpl-c-border"
                                                    @click.prevent="component.code_show = ! component.code_show"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "astrum",
-  "version": "1.5.14",
+  "version": "1.5.15",
   "description": "A lightweight pattern library designed to be included with any web project.",
   "main": "./manager/astrum.js",
   "scripts": {