demo stylesheet, md fixes

build/scss-compile.js

@@ -15,7 +15,7 @@ const path = require('path'),
 
 const dir = BUNDLE ? 'dist' : 'tmp-dist';
 
-glob("scss/tabler*.scss", {}, function (er, files) {
+glob("scss/{tabler*,demo}.scss", {}, function (er, files) {
 	files.forEach(function (file) {
 		var basename = path.basename(file, '.scss');
 

pages/_includes/layout/css.html

@@ -14,3 +14,5 @@
 {% for plugin in site.tabler-plugins %}
 <link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/{{ plugin }}{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>
 {% endfor %}
+
+<link href="{{ site.base }}/{% if jekyll.environment == 'development' %}tmp-{% endif %}dist/css/demo{% if jekyll.environment == 'production' %}.min{% endif %}.css?{{ site.time | date: '%s' }}" rel="stylesheet"/>

pages/_plugins/jekyll-example.rb

@@ -19,8 +19,8 @@ def render_rouge(code, lang, dark = false)
 end
 
 def add_code_tag(code, lang)
-  code = code.sub(/<pre>\n*/, '<pre><code class="language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '">')
-  code = code.sub(/\n*<\/pre>/, "</code></pre>")
+  code = code.sub(/<pre>\n*/, '<div class="example-code language-' + lang.to_s.gsub("+", "-") + '" data-lang="' + lang.to_s + '"><pre class="highlight"><code>')
+  code = code.sub(/\n*<\/pre>/, "</code></pre></div>")
 
   code.strip
 end
@@ -74,7 +74,7 @@ Valid syntax: example <lang> [id=foo]
                  render_rouge(code, @lang, @options[:linenos])
                end
 
-      rendered_output = example(code) + "<div class=\"highlight\">#{add_code_tag(output, @lang)}</div>"
+      rendered_output = example(code) + add_code_tag(output, @lang)
       prefix + rendered_output + suffix
     end
 

scss/_dark.scss

@@ -3,8 +3,7 @@
 @mixin dark-mode {
   &,
   .modal-content,
-  .dropdown-menu,
-  .example-bg {
+  .dropdown-menu {
     color: $dark-body-color;
     background: $dark-body-bg;
   }

scss/_tabler-core.scss

@@ -21,7 +21,6 @@
 @import "ui/dropdowns";
 @import "ui/empty";
 @import "ui/grid";
-@import "ui/highlight";
 @import "ui/icons";
 @import "ui/forms";
 @import "ui/forms/form-icon";
@@ -50,9 +49,6 @@
 @import "ui/markdown";
 @import "ui/charts";
 
-@import "ui/examples";
-
-@import "utils/border";
 @import "utils/background";
 @import "utils/colors";
 @import "utils/scroll";

scss/demo.scss

@@ -0,0 +1,3 @@
+@import "config";
+@import "demo/highlight";
+@import "demo/examples";

scss/demo/_examples.scss

@@ -6,14 +6,18 @@
 }
 
 .example-bg {
-  background: $min-black;
+  background: $body-bg;
 }
 
-.example + .highlight {
+.example-code {
   margin-top: 0;
   border-top: none;
+
+  pre {
+    margin: 0;
     border-radius: 0 0 3px 3px;
   }
+}
 
 .example-column {
   margin: 0 auto;

scss/ui/_cards.scss

@@ -185,21 +185,21 @@
 }
 
 .card-body {
-  >:last-child:not {
+  >:last-child {
     margin-bottom: 0;
   }
 
-  .card-sm & {
+  .card-sm>& {
     padding: map-get($spacers, 3);
   }
 
-  .card-md & {
+  .card-md>& {
     @include media-breakpoint-up(md) {
       padding: map-get($spacers, 5);
     }
   }
 
-  .card-lg & {
+  .card-lg>& {
     @include media-breakpoint-up(md) {
       padding: map-get($spacers, 6);
     }

scss/ui/_type.scss

@@ -68,13 +68,6 @@ code {
   background: rgba($code-color, .03);
   border: 1px solid rgba($code-color, .064);
   border-radius: $border-radius;
-
-  pre & {
-    padding: 0;
-    background: none;
-    border: none;
-    border-radius: 0;
-  }
 }
 
 
@@ -86,6 +79,14 @@ pre {
   line-height: 1.5;
   tab-size: 3;
   border-radius: $border-radius;
+  white-space: pre-wrap;
+
+  code {
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 0;
+  }
 }
 
 img {

scss/utils/_border.scss

@@ -1,7 +0,0 @@
-.border-dashed {
-  border-style: dashed !important;
-}
-
-.border-transparent {
-  border-color: transparent !important;
-}