Improve snippet

docs/_javascript/main.js

@@ -107,24 +107,12 @@ document.addEventListener('DOMContentLoaded', () => {
       const expandEl = '<button class="button is-small bd-expand">Expand</button>';
       $el.insertAdjacentHTML('beforeend', copyEl);
 
-<<<<<<< HEAD
       const $parent = $el.parentNode;
       if ($parent && $parent.classList.contains('bd-is-more')) {
         const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
         $el.insertAdjacentHTML('beforeend', showEl);
       } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
         $el.insertAdjacentHTML('beforeend', expandEl);
-=======
-      if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
-        $el.insertAdjacentHTML('beforeend', expandEl);
-      }
-
-      const $parent = $el.parentNode;
-      if ($parent && $parent.className == 'bd-highlight-clipped') {
-        const showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
-        $el.classList.add('bd-is-clipped');
-        $el.insertAdjacentHTML('beforeend', showEl);
->>>>>>> Add show code
       }
 
       itemsProcessed++;
@@ -159,7 +147,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     $highlightShows.forEach($el => {
       $el.addEventListener('click', () => {
-        $el.parentNode.classList.remove('bd-is-clipped');
+        $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
       });
     });
   }

docs/_sass/example.sass

@@ -42,10 +42,6 @@
     margin-top: -1.5rem
     &:not(:last-child)
       margin-bottom: 1.5rem
-  & + .bd-highlight-clipped
-    margin-top: -1.5rem
-    &:not(:last-child)
-      margin-bottom: 1.5rem
 
 // Snippet
 .bd-snippet
@@ -214,33 +210,6 @@ $structure-invert: $danger-invert
     pre
       white-space: pre-wrap
 
-.bd-highlight-clipped
-  .bd-show
-    +overlay
-    align-items: center
-    background-color: rgba(#000, 0.9)
-    background-image: linear-gradient(rgba(#000, 0), rgba(#000, 0) 90%, rgba(#000, 1))
-    border: none
-    color: $white
-    cursor: pointer
-    display: none
-    font-size: $size-6
-    justify-content: center
-    opacity: 0.7
-    width: 100%
-    strong
-      color: currentColor
-      font-weight: $weight-semibold
-    &:hover
-      opacity: 0.8
-  .highlight.bd-is-clipped
-    height: 4em
-    overflow: hidden
-    pre
-        overflow: hidden
-    .bd-show
-      display: flex
-
 +tablet
   .section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)
     margin-left: 1.5rem

docs/lib/main.js

@@ -112,8 +112,11 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
       var $parent = $el.parentNode;
       if ($parent && $parent.classList.contains('bd-is-more')) {
         var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
@@ -125,6 +128,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.insertAdjacentHTML('beforeend', expandEl);
       }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 =======
 >>>>>>> Improve snippet
@@ -139,13 +143,24 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.insertAdjacentHTML('beforeend', expandEl);
 >>>>>>> Improve snippet
 =======
+=======
+=======
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
       var $parent = $el.parentNode;
-      if ($parent && $parent.className == 'bd-highlight-clipped') {
+      if ($parent && $parent.classList.contains('bd-is-more')) {
         var showEl = '<button class="bd-show"><div><span class="icon"><i class="fa fa-code"></i></span> <strong>Show code</strong></div></button>';
-        $el.classList.add('bd-is-clipped');
         $el.insertAdjacentHTML('beforeend', showEl);
+<<<<<<< HEAD
 >>>>>>> Add show code
+<<<<<<< HEAD
 >>>>>>> Add show code
+=======
+=======
+      } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
+        $el.insertAdjacentHTML('beforeend', expandEl);
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
       }
 
       itemsProcessed++;
@@ -179,6 +194,9 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Improve snippet
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
@@ -192,14 +210,18 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.parentNode.classList.remove('bd-is-clipped');
 >>>>>>> Add show code
 =======
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
       $el.addEventListener('click', function () {
         $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
 <<<<<<< HEAD
+<<<<<<< HEAD
 >>>>>>> Improve snippet
 =======
 =======
@@ -210,6 +232,9 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.parentNode.classList.remove('bd-is-clipped');
 >>>>>>> Add show code
 >>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
       });
     });
   }