Add show code
This commit is contained in:
Jeremy Thomas
parent
2c15a21f41
commit
8d6a0a43dc
4 changed files with 252 additions and 2 deletions
|
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 .nav-item a:not(.button) {
|
||||
.hero.is-link .navbar-item,
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue