Improve snippet

docs/_javascript/main.js

@@ -143,19 +143,11 @@ document.addEventListener('DOMContentLoaded', () => {
       });
     });
 
-<<<<<<< HEAD
-    const $highlightShows = getAll('.highlight .bd-show');
-
-    $highlightShows.forEach($el => {
-      $el.addEventListener('click', () => {
-        $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
-=======
     const $highlightShows = getAll('.bd-highlight-clipped .bd-show');
 
     $highlightShows.forEach($el => {
       $el.addEventListener('click', () => {
         $el.parentNode.classList.remove('bd-is-clipped');
->>>>>>> Add show code
       });
     });
   }

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
@@ -218,28 +214,23 @@ $structure-invert: $danger-invert
   .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))
+    background-color: rgba($background, 0.7)
     border: none
-    color: $white
+    color: rgba(#000, 0.5)
     cursor: pointer
     display: none
-    font-size: $size-6
+    font-size: $size-small
     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
+      background-color: rgba($yellow, 0.8)
+      color: rgba(#000, 0.7)
+  +tablet
     pre
-        overflow: hidden
-    .bd-show
-      display: flex
+      white-space: pre-wrap
 
 +tablet
   .section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)

docs/css/bulma-docs.css

@@ -11637,14 +11637,6 @@ html.route-index #carbon {
   margin-bottom: 1.5rem;
 }
 
-.bd-example + .bd-highlight-clipped {
-  margin-top: -1.5rem;
-}
-
-.bd-example + .bd-highlight-clipped:not(:last-child) {
-  margin-bottom: 1.5rem;
-}
-
 .bd-snippet {
   border: 1px solid #ffdd57;
   margin-top: 2rem;
@@ -11680,14 +11672,22 @@ html.route-index #carbon {
 
 .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight .bd-show {
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   display: -webkit-box;
   display: -ms-flexbox;
 =======
 =======
+=======
+>>>>>>> Improve snippet
+=======
+  display: -webkit-box;
+  display: -ms-flexbox;
 =======
   display: -webkit-box;
   display: -ms-flexbox;
+=======
+>>>>>>> Improve snippet
 >>>>>>> Improve snippet
 >>>>>>> Improve snippet
   display: flex;
@@ -11866,8 +11866,16 @@ html.route-index #carbon {
 =======
 =======
     align-items: stretch;
+<<<<<<< HEAD
 >>>>>>> Add love data
+<<<<<<< HEAD
 >>>>>>> Add love data
+=======
+=======
+    border-radius: 5px;
+    border-top-left-radius: 0;
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
     display: flex;
     justify-content: center;
   }
@@ -12002,6 +12010,7 @@ html.route-index #carbon {
 =======
 =======
     align-items: stretch;
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
 <<<<<<< HEAD
 >>>>>>> Use link instead of primary
@@ -12047,8 +12056,17 @@ html.route-index #carbon {
 =======
     align-items: stretch;
 >>>>>>> Add love data
+<<<<<<< HEAD
 >>>>>>> Add love data
+<<<<<<< HEAD
 >>>>>>> Add love data
+=======
+=======
+=======
+    border-radius: 0 5px 5px 0;
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
     display: flex;
     flex-direction: column;
   }
@@ -12181,6 +12199,7 @@ html.route-index #carbon {
 
 .highlight .bd-show {
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   bottom: 0;
   left: 0;
@@ -12222,6 +12241,8 @@ html.route-index #carbon {
 =======
 >>>>>>> Improve snippet
 =======
+>>>>>>> Improve snippet
+=======
 >>>>>>> Improve snippet
   bottom: 0;
   left: 0;
@@ -12257,6 +12278,8 @@ html.route-index #carbon {
 
 .bd-highlight-clipped .bd-show {
 =======
+>>>>>>> Improve snippet
+=======
 >>>>>>> Improve snippet
   bottom: 0;
   left: 0;
@@ -12295,44 +12318,38 @@ html.route-index #carbon {
 }
 
 .bd-highlight-clipped .bd-show {
+=======
+>>>>>>> Improve snippet
   bottom: 0;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
   align-items: center;
-  background-color: rgba(0, 0, 0, 0.9);
-  background-image: linear-gradient(transparent, transparent 90%, black);
+  background-color: rgba(245, 245, 245, 0.7);
   border: none;
-  color: white;
+  color: rgba(0, 0, 0, 0.5);
   cursor: pointer;
   display: none;
-  font-size: 1rem;
+  font-size: 0.75rem;
   justify-content: center;
-  opacity: 0.7;
   width: 100%;
 }
 
-.bd-highlight-clipped .bd-show strong {
+.highlight .bd-show strong {
   color: currentColor;
   font-weight: 600;
 }
 
-.bd-highlight-clipped .bd-show:hover {
-  opacity: 0.8;
-}
-
-.bd-highlight-clipped .highlight.bd-is-clipped {
-  height: 4em;
-  overflow: hidden;
-}
-
-.bd-highlight-clipped .highlight.bd-is-clipped pre {
-  overflow: hidden;
+.highlight .bd-show:hover {
+  background-color: rgba(255, 221, 87, 0.8);
+  color: rgba(0, 0, 0, 0.7);
 }
 
-.bd-highlight-clipped .highlight.bd-is-clipped .bd-show {
-  display: flex;
+@media screen and (min-width: 769px), print {
+  .highlight pre {
+    white-space: pre-wrap;
+  }
 }
 
 @media screen and (min-width: 769px), print {

docs/lib/main.js

@@ -114,14 +114,19 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
 =======
 >>>>>>> Improve snippet
 =======
+>>>>>>> Improve snippet
+=======
 =======
 >>>>>>> Add show code
 >>>>>>> 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>';
@@ -136,6 +141,7 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
 =======
@@ -153,6 +159,8 @@ document.addEventListener('DOMContentLoaded', function () {
 =======
 <<<<<<< HEAD
 =======
+>>>>>>> Improve snippet
+=======
 =======
 >>>>>>> Improve snippet
 >>>>>>> Improve snippet
@@ -171,14 +179,28 @@ document.addEventListener('DOMContentLoaded', function () {
 >>>>>>> Improve snippet
 >>>>>>> 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
+<<<<<<< HEAD
 >>>>>>> Add show code
+=======
+=======
+=======
+      } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
+        $el.insertAdjacentHTML('beforeend', expandEl);
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
       }
 
       itemsProcessed++;
@@ -214,10 +236,15 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Improve snippet
 =======
 >>>>>>> Add show code
+=======
+=======
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
@@ -233,6 +260,7 @@ document.addEventListener('DOMContentLoaded', function () {
 =======
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
 =======
@@ -241,6 +269,12 @@ document.addEventListener('DOMContentLoaded', function () {
 =======
 >>>>>>> Add show code
 >>>>>>> Add show code
+=======
+=======
+>>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
@@ -249,6 +283,7 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 >>>>>>> Improve snippet
 =======
 =======
@@ -263,6 +298,8 @@ document.addEventListener('DOMContentLoaded', function () {
 >>>>>>> Improve snippet
 =======
 >>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
 >>>>>>> Improve snippet
 =======
 =======
@@ -273,6 +310,9 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.parentNode.classList.remove('bd-is-clipped');
 >>>>>>> Add show code
 >>>>>>> Add show code
+=======
+>>>>>>> Improve snippet
+>>>>>>> Improve snippet
       });
     });
   }