Add show code

docs/_javascript/main.js

@@ -143,11 +143,19 @@ 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,6 +42,10 @@
     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
@@ -210,6 +214,33 @@ $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/css/bulma-docs.css

@@ -8972,12 +8972,15 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
 =======
 >>>>>>> Use link instead of primary
 =======
 >>>>>>> Add love data
+=======
+>>>>>>> Add show code
 =======
   box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
 >>>>>>> Use link instead of primary
@@ -9031,7 +9034,12 @@ label.panel-block:hover {
 =======
   box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
 >>>>>>> Add love data
+<<<<<<< HEAD
 >>>>>>> Add love data
+=======
+=======
+>>>>>>> Add show code
+>>>>>>> Add show code
 }
 
 .hero .tabs ul {
@@ -9066,6 +9074,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
 @media screen and (max-width: 1023px) {
@@ -9090,6 +9099,8 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .hero.is-white .navbar-menu {
 =======
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-white .navbar-menu {
 =======
@@ -9100,7 +9111,14 @@ label.panel-block:hover {
 @media screen and (max-width: 768px) {
   .hero.is-white .nav-menu {
 >>>>>>> Use link instead of primary
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
+=======
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-white .navbar-menu {
+>>>>>>> Add show code
+>>>>>>> Add show code
     background-color: white;
   }
 }
@@ -9182,10 +9200,13 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
 =======
 >>>>>>> Use link instead of primary
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-black .navbar-menu {
 =======
@@ -9211,6 +9232,10 @@ label.panel-block:hover {
 =======
 >>>>>>> Use link instead of primary
 >>>>>>> Use link instead of primary
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-black .navbar-menu {
+>>>>>>> Add show code
     background-color: #0a0a0a;
   }
 }
@@ -9292,6 +9317,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
 @media screen and (max-width: 1023px) {
@@ -9316,6 +9342,8 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .hero.is-light .navbar-menu {
 =======
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-light .navbar-menu {
 =======
@@ -9326,7 +9354,14 @@ label.panel-block:hover {
 @media screen and (max-width: 768px) {
   .hero.is-light .nav-menu {
 >>>>>>> Use link instead of primary
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
+=======
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-light .navbar-menu {
+>>>>>>> Add show code
+>>>>>>> Add show code
     background-color: whitesmoke;
   }
 }
@@ -9408,6 +9443,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 @media screen and (max-width: 1023px) {
   .hero.is-dark .navbar-menu {
 =======
@@ -9438,6 +9474,8 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .hero.is-dark .navbar-menu {
 =======
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-dark .navbar-menu {
 =======
@@ -9448,7 +9486,14 @@ label.panel-block:hover {
 @media screen and (max-width: 768px) {
   .hero.is-dark .nav-menu {
 >>>>>>> Use link instead of primary
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
+=======
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-dark .navbar-menu {
+>>>>>>> Add show code
+>>>>>>> Add show code
     background-color: #363636;
   }
 }
@@ -9530,6 +9575,9 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-primary .navbar-menu {
 =======
@@ -9544,6 +9592,7 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .hero.is-primary .navbar-menu {
 >>>>>>> Add show code
+<<<<<<< HEAD
 =======
 @media screen and (max-width: 1023px) {
   .hero.is-primary .navbar-menu {
@@ -9571,6 +9620,8 @@ label.panel-block:hover {
   .hero.is-primary .nav-menu {
 >>>>>>> Use link instead of primary
 >>>>>>> Use link instead of primary
+=======
+>>>>>>> Add show code
     background-color: #00d1b2;
   }
 }
@@ -9628,6 +9679,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 .hero.is-info {
 =======
 @media screen and (max-width: 768px) {
@@ -9652,6 +9704,8 @@ label.panel-block:hover {
 =======
 =======
 >>>>>>> Add link color
+=======
+>>>>>>> Add show code
 .hero.is-link {
 =======
 .hero.is-info {
@@ -9660,6 +9714,8 @@ label.panel-block:hover {
 >>>>>>> Add show code
 =======
 =======
+=======
+>>>>>>> Add show code
 .hero.is-info {
 =======
 @media screen and (max-width: 768px) {
@@ -9677,6 +9733,8 @@ label.panel-block:hover {
   }
 }
 
+=======
+>>>>>>> Add show code
 .hero.is-link {
 >>>>>>> Add link color
 >>>>>>> Add link color
@@ -9703,6 +9761,7 @@ label.panel-block:hover {
   color: #fff;
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 @media screen and (max-width: 1023px) {
 <<<<<<< HEAD
@@ -9741,19 +9800,30 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
   .hero.is-link .nav-menu {
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-link .navbar-menu {
+>>>>>>> Add show code
     background-color: #3273dc;
   }
 }
 
-.hero.is-link a.nav-item,
+.hero.is-link .navbar-item,
-.hero.is-link .nav-item a:not(.button) {
+.hero.is-link .navbar-link {
   color: rgba(255, 255, 255, 0.7);
 }
 
+<<<<<<< HEAD
 .hero.is-link a.nav-item:hover, .hero.is-link a.nav-item.is-active,
 .hero.is-link .nav-item a:not(.button):hover,
 .hero.is-link .nav-item a:not(.button).is-active {
 >>>>>>> Add link color
+=======
+.hero.is-link a.navbar-item:hover, .hero.is-link a.navbar-item.is-active,
+.hero.is-link .navbar-link:hover,
+.hero.is-link .navbar-link.is-active {
+  background-color: #2366d1;
+>>>>>>> Add show code
   color: #fff;
 }
 
@@ -9790,6 +9860,7 @@ label.panel-block:hover {
 
 @media screen and (max-width: 768px) {
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   .hero.is-link.is-bold .navbar-menu {
 =======
@@ -9798,10 +9869,14 @@ label.panel-block:hover {
 =======
   .hero.is-link.is-bold .nav-menu {
 >>>>>>> Add link color
+=======
+  .hero.is-link.is-bold .navbar-menu {
+>>>>>>> Add show code
     background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
   }
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
 =======
@@ -9821,6 +9896,8 @@ label.panel-block:hover {
 }
 
 >>>>>>> Add link color
+=======
+>>>>>>> Add show code
 .hero.is-info {
   background-color: #209cee;
   color: #fff;
@@ -9849,6 +9926,7 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 @media screen and (max-width: 1023px) {
   .hero.is-info .navbar-menu {
 =======
@@ -9885,6 +9963,8 @@ label.panel-block:hover {
     background-color: #209cee;
 >>>>>>> Add link color
 =======
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-info .navbar-menu {
 <<<<<<< HEAD
@@ -9907,6 +9987,10 @@ label.panel-block:hover {
 =======
 =======
 =======
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-info .navbar-menu {
+>>>>>>> Add show code
     background-color: #209cee;
 >>>>>>> Add link color
 >>>>>>> Add link color
@@ -9923,9 +10007,19 @@ label.panel-block:hover {
 .hero.is-info .navbar-link:hover,
 .hero.is-info .navbar-link.is-active {
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+  background-color: #118fe4;
+=======
+<<<<<<< HEAD
+>>>>>>> Add show code
   background-color: #2366d1;
 =======
   background-color: #118fe4;
+>>>>>>> Add show code
+<<<<<<< HEAD
+=======
+>>>>>>> Add show code
 >>>>>>> Add show code
   color: #fff;
 }
@@ -9964,6 +10058,7 @@ label.panel-block:hover {
 @media screen and (max-width: 768px) {
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 <<<<<<< HEAD
   .hero.is-info.is-bold .navbar-menu {
     background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
@@ -9974,6 +10069,8 @@ label.panel-block:hover {
 =======
 =======
 >>>>>>> Add link color
+=======
+>>>>>>> Add show code
   .hero.is-info.is-bold .navbar-menu {
 <<<<<<< HEAD
     background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
@@ -9987,7 +10084,14 @@ label.panel-block:hover {
 =======
 >>>>>>> Add link color
 >>>>>>> Add link color
+<<<<<<< HEAD
 >>>>>>> Add link color
+=======
+=======
+  .hero.is-info.is-bold .navbar-menu {
+    background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
+>>>>>>> Add show code
+>>>>>>> Add show code
   }
 }
 
@@ -10021,8 +10125,11 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-success .navbar-menu {
 =======
@@ -10056,6 +10163,10 @@ label.panel-block:hover {
   .hero.is-success .nav-menu {
 >>>>>>> Use link instead of primary
 >>>>>>> Use link instead of primary
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-success .navbar-menu {
+>>>>>>> Add show code
     background-color: #23d160;
   }
 }
@@ -10137,6 +10248,9 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-warning .navbar-menu {
 =======
@@ -10151,6 +10265,7 @@ label.panel-block:hover {
 @media screen and (max-width: 1023px) {
   .hero.is-warning .navbar-menu {
 >>>>>>> Add show code
+<<<<<<< HEAD
 =======
 @media screen and (max-width: 1023px) {
   .hero.is-warning .navbar-menu {
@@ -10178,6 +10293,8 @@ label.panel-block:hover {
   .hero.is-warning .nav-menu {
 >>>>>>> Use link instead of primary
 >>>>>>> Use link instead of primary
+=======
+>>>>>>> Add show code
     background-color: #ffdd57;
   }
 }
@@ -10259,10 +10376,13 @@ label.panel-block:hover {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Update expo
 =======
 >>>>>>> Use link instead of primary
+=======
+>>>>>>> Add show code
 @media screen and (max-width: 1023px) {
   .hero.is-danger .navbar-menu {
 =======
@@ -10288,6 +10408,10 @@ label.panel-block:hover {
 =======
 >>>>>>> Use link instead of primary
 >>>>>>> Use link instead of primary
+=======
+@media screen and (max-width: 1023px) {
+  .hero.is-danger .navbar-menu {
+>>>>>>> Add show code
     background-color: #ff3860;
   }
 }
@@ -11513,6 +11637,14 @@ 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;
@@ -12162,6 +12294,47 @@ html.route-index #carbon {
   }
 }
 
+.bd-highlight-clipped .bd-show {
+  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);
+  border: none;
+  color: white;
+  cursor: pointer;
+  display: none;
+  font-size: 1rem;
+  justify-content: center;
+  opacity: 0.7;
+  width: 100%;
+}
+
+.bd-highlight-clipped .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;
+}
+
+.bd-highlight-clipped .highlight.bd-is-clipped .bd-show {
+  display: flex;
+}
+
 @media screen and (min-width: 769px), print {
   .section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth) {
     margin-left: 1.5rem;

docs/lib/main.js

@@ -113,10 +113,15 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
 =======
 >>>>>>> Improve snippet
+=======
+=======
+>>>>>>> Add show code
+>>>>>>> Add show code
       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>';
@@ -130,6 +135,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> Add show code
 =======
 >>>>>>> Improve snippet
       var $parent = $el.parentNode;
@@ -143,6 +151,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.insertAdjacentHTML('beforeend', expandEl);
 >>>>>>> Improve snippet
 =======
+<<<<<<< HEAD
 =======
 =======
 >>>>>>> Improve snippet
@@ -161,6 +170,15 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.insertAdjacentHTML('beforeend', expandEl);
 >>>>>>> Improve snippet
 >>>>>>> Improve snippet
+=======
+      var $parent = $el.parentNode;
+      if ($parent && $parent.className == 'bd-highlight-clipped') {
+        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);
+>>>>>>> Add show code
+>>>>>>> Add show code
+>>>>>>> Add show code
       }
 
       itemsProcessed++;
@@ -195,8 +213,11 @@ document.addEventListener('DOMContentLoaded', function () {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Improve snippet
+=======
+>>>>>>> Add show code
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
@@ -211,10 +232,15 @@ document.addEventListener('DOMContentLoaded', function () {
 >>>>>>> Add show code
 =======
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 >>>>>>> Add show code
 =======
 >>>>>>> Improve snippet
+=======
+=======
+>>>>>>> Add show code
+>>>>>>> Add show code
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
@@ -222,6 +248,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 >>>>>>> Improve snippet
 =======
 =======
@@ -234,7 +261,18 @@ document.addEventListener('DOMContentLoaded', function () {
 >>>>>>> Add show code
 =======
 >>>>>>> Improve snippet
+=======
+>>>>>>> Add show code
 >>>>>>> Improve snippet
+=======
+=======
+    var $highlightShows = getAll('.bd-highlight-clipped .bd-show');
+
+    $highlightShows.forEach(function ($el) {
+      $el.addEventListener('click', function () {
+        $el.parentNode.classList.remove('bd-is-clipped');
+>>>>>>> Add show code
+>>>>>>> Add show code
       });
     });
   }