Add show code

docs/_javascript/main.js

@@ -107,12 +107,24 @@ 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++;
@@ -147,7 +159,7 @@ document.addEventListener('DOMContentLoaded', () => {
 
     $highlightShows.forEach($el => {
       $el.addEventListener('click', () => {
-        $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
+        $el.parentNode.classList.remove('bd-is-clipped');
       });
     });
   }

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

@@ -1179,11 +1179,19 @@ a.has-text-danger:hover, a.has-text-danger:focus {
 }
 
 a.box:hover, a.box:focus {
+<<<<<<< HEAD
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
 }
 
 a.box:active {
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
+=======
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+}
+
+a.box:active {
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+>>>>>>> Add show code
 }
 
 .button {
@@ -1263,7 +1271,11 @@ a.box:active {
 }
 
 .button:focus:not(:active), .button.is-focused:not(:active) {
+<<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+=======
+  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+>>>>>>> Add show code
 }
 
 .button:active, .button.is-active {
@@ -1876,7 +1888,11 @@ a.box:active {
 }
 
 .button.is-info:focus:not(:active), .button.is-info.is-focused:not(:active) {
+<<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+=======
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+>>>>>>> Add show code
 }
 
 .button.is-info:active, .button.is-info.is-active {
@@ -1904,7 +1920,11 @@ a.box:active {
   background-color: #fff;
   border-color: transparent;
   box-shadow: none;
+<<<<<<< HEAD
   color: #209cee;
+=======
+  color: #3273dc;
+>>>>>>> Add show code
 }
 
 .button.is-info.is-loading:after {
@@ -1929,9 +1949,15 @@ a.box:active {
 
 .button.is-info.is-outlined[disabled] {
   background-color: transparent;
+<<<<<<< HEAD
   border-color: #209cee;
   box-shadow: none;
   color: #209cee;
+=======
+  border-color: #3273dc;
+  box-shadow: none;
+  color: #3273dc;
+>>>>>>> Add show code
 }
 
 .button.is-info.is-inverted.is-outlined {
@@ -2593,8 +2619,13 @@ a.box:active {
 .textarea.is-focused,
 .textarea:active,
 .textarea.is-active {
+<<<<<<< HEAD
   border-color: #3273dc;
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+=======
+  border-color: #00d1b2;
+  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+>>>>>>> Add show code
 }
 
 .input[disabled],
@@ -2698,6 +2729,7 @@ a.box:active {
 .textarea.is-primary:active,
 .textarea.is-primary.is-active {
   box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+<<<<<<< HEAD
 }
 
 .input.is-link,
@@ -2711,6 +2743,8 @@ a.box:active {
 .textarea.is-link:active,
 .textarea.is-link.is-active {
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+=======
+>>>>>>> Add show code
 }
 
 .input.is-info,
@@ -2723,7 +2757,11 @@ a.box:active {
 .textarea.is-info.is-focused,
 .textarea.is-info:active,
 .textarea.is-info.is-active {
+<<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+=======
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+>>>>>>> Add show code
 }
 
 .input.is-success,
@@ -2935,8 +2973,13 @@ a.box:active {
 }
 
 .select select:focus, .select select.is-focused, .select select:active, .select select.is-active {
+<<<<<<< HEAD
   border-color: #3273dc;
   box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+=======
+  border-color: #00d1b2;
+  box-shadow: 0 0 0 0.125em rgba(0, 209, 178, 0.25);
+>>>>>>> Add show code
 }
 
 .select select[disabled] {
@@ -3040,7 +3083,11 @@ a.box:active {
 }
 
 .select.is-info select:focus, .select.is-info select.is-focused, .select.is-info select:active, .select.is-info select.is-active {
+<<<<<<< HEAD
   box-shadow: 0 0 0 0.125em rgba(32, 156, 238, 0.25);
+=======
+  box-shadow: 0 0 0 0.125em rgba(50, 115, 220, 0.25);
+>>>>>>> Add show code
 }
 
 .select.is-success select {
@@ -3292,7 +3339,11 @@ a.box:active {
 
 .file.is-info:focus .file-cta, .file.is-info.is-focused .file-cta {
   border-color: transparent;
+<<<<<<< HEAD
   box-shadow: 0 0 0.5em rgba(32, 156, 238, 0.25);
+=======
+  box-shadow: 0 0 0.5em rgba(50, 115, 220, 0.25);
+>>>>>>> Add show code
   color: #fff;
 }
 
@@ -4869,7 +4920,11 @@ a.tag:hover {
 
 .breadcrumb a {
   align-items: center;
+<<<<<<< HEAD
   color: #3273dc;
+=======
+  color: #7a7a7a;
+>>>>>>> Add show code
   display: flex;
   justify-content: center;
   padding: 0.5em 0.75em;
@@ -8992,6 +9047,7 @@ label.panel-block:hover {
   }
 }
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
 .hero.is-info {
@@ -9015,6 +9071,12 @@ label.panel-block:hover {
 >>>>>>> Add show code
 .hero.is-link {
 >>>>>>> Add link color
+=======
+.hero.is-link {
+=======
+.hero.is-info {
+>>>>>>> Add show code
+>>>>>>> Add show code
   background-color: #3273dc;
   color: #fff;
 }
@@ -9038,11 +9100,16 @@ label.panel-block:hover {
 }
 
 @media screen and (max-width: 1023px) {
+<<<<<<< HEAD
   .hero.is-link .navbar-menu {
+=======
+  .hero.is-info .navbar-menu {
+>>>>>>> Add show code
     background-color: #3273dc;
   }
 }
 
+<<<<<<< HEAD
 .hero.is-link .navbar-item,
 .hero.is-link .navbar-link {
   color: rgba(255, 255, 255, 0.7);
@@ -9051,6 +9118,16 @@ label.panel-block:hover {
 .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 {
+=======
+.hero.is-info .navbar-item,
+.hero.is-info .navbar-link {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.hero.is-info a.navbar-item:hover, .hero.is-info a.navbar-item.is-active,
+.hero.is-info .navbar-link:hover,
+.hero.is-info .navbar-link.is-active {
+>>>>>>> Add show code
   background-color: #2366d1;
   color: #fff;
 }
@@ -9087,11 +9164,16 @@ label.panel-block:hover {
 }
 
 @media screen and (max-width: 768px) {
+<<<<<<< HEAD
   .hero.is-link.is-bold .navbar-menu {
+=======
+  .hero.is-info.is-bold .navbar-menu {
+>>>>>>> Add show code
     background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
   }
 }
 
+<<<<<<< HEAD
 .hero.is-info {
   background-color: #209cee;
   color: #fff;
@@ -9220,6 +9302,8 @@ label.panel-block:hover {
   }
 }
 
+=======
+>>>>>>> Add show code
 .hero.is-success {
   background-color: #23d160;
   color: #fff;
@@ -10710,6 +10794,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;
@@ -10811,6 +10903,7 @@ html.route-index #carbon {
 >>>>>>> Add variables data
     align-items: stretch;
 <<<<<<< HEAD
+<<<<<<< HEAD
 >>>>>>> Add love data
 =======
     border-radius: 5px;
@@ -10843,6 +10936,12 @@ html.route-index #carbon {
 >>>>>>> Use link instead of primary
 =======
 >>>>>>> Add variables data
+=======
+    border-radius: 5px;
+    border-top-left-radius: 0;
+=======
+>>>>>>> Add show code
+>>>>>>> Add show code
     display: flex;
     justify-content: center;
   }
@@ -10870,6 +10969,7 @@ html.route-index #carbon {
 =======
     align-items: stretch;
 <<<<<<< HEAD
+<<<<<<< HEAD
 >>>>>>> Use link instead of primary
 =======
     -webkit-box-align: stretch;
@@ -10926,6 +11026,11 @@ html.route-index #carbon {
 >>>>>>> Use link instead of primary
 =======
 >>>>>>> Add variables data
+=======
+    border-radius: 0 5px 5px 0;
+=======
+>>>>>>> Add show code
+>>>>>>> Add show code
     display: flex;
     flex-direction: column;
   }
@@ -11129,6 +11234,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;
@@ -11259,11 +11405,19 @@ html.route-index #carbon {
 }
 
 #_default_ > a:hover, #_default_ > a:focus {
+<<<<<<< HEAD
   box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #3273dc;
 }
 
 #_default_ > a:active {
   box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #3273dc;
+=======
+  box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px #00d1b2;
+}
+
+#_default_ > a:active {
+  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2), 0 0 0 1px #00d1b2;
+>>>>>>> Add show code
 }
 
 #_default_ > a span {
@@ -11477,9 +11631,12 @@ html.route-index .hero.is-primary a.column:hover .title strong {
 <<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
 =======
 =======
 >>>>>>> Use link instead of primary
+=======
+>>>>>>> Add show code
   align-items: center;
   display: none;
 =======
@@ -11492,6 +11649,9 @@ html.route-index .hero.is-primary a.column:hover .title strong {
           align-items: center;
   display: -webkit-box;
   display: -ms-flexbox;
+=======
+  align-items: center;
+>>>>>>> Add show code
   display: flex;
 <<<<<<< HEAD
 =======

docs/lib/main.js

@@ -111,6 +111,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
 <<<<<<< HEAD
 <<<<<<< HEAD
+<<<<<<< HEAD
+=======
+>>>>>>> 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>';
@@ -122,6 +125,7 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.insertAdjacentHTML('beforeend', expandEl);
       }
 
+<<<<<<< HEAD
 =======
 >>>>>>> Improve snippet
       var $parent = $el.parentNode;
@@ -134,6 +138,14 @@ document.addEventListener('DOMContentLoaded', function () {
       } else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
         $el.insertAdjacentHTML('beforeend', expandEl);
 >>>>>>> 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
       }
 
       itemsProcessed++;
@@ -164,6 +176,7 @@ document.addEventListener('DOMContentLoaded', function () {
       });
     });
 
+<<<<<<< HEAD
 <<<<<<< HEAD
 <<<<<<< HEAD
     var $highlightShows = getAll('.highlight .bd-show');
@@ -179,12 +192,24 @@ document.addEventListener('DOMContentLoaded', function () {
         $el.parentNode.classList.remove('bd-is-clipped');
 >>>>>>> Add show code
 =======
+=======
+>>>>>>> Add show code
     var $highlightShows = getAll('.highlight .bd-show');
 
     $highlightShows.forEach(function ($el) {
       $el.addEventListener('click', function () {
         $el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
+<<<<<<< HEAD
 >>>>>>> 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
       });
     });
   }