0ct0pu5/bulma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add show code

Browse source
This commit is contained in:
Jeremy Thomas 2017-10-09 12:27:08 +01:00
parent 5491eb4d8c
commit 02f7b216f1
4 changed files with 182 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
docs/_javascript/main.js
View file

@ -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');
});
});
}

31
docs/_sass/example.sass
View file

@ -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

145
docs/css/bulma-docs.css
View file

@ -8425,6 +8425,7 @@ label.panel-block:hover {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
>>>>>>> Use link instead of primary
@ -8442,6 +8443,8 @@ label.panel-block:hover {
=======
box-shadow: 0 1px 0 rgba(219, 219, 219, 0.3);
>>>>>>> Add love data
=======
>>>>>>> Add show code
}
.hero .tabs ul {
@ -8471,6 +8474,7 @@ label.panel-block:hover {
color: #0a0a0a;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-white .navbar-menu {
@ -8482,6 +8486,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-white .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-white .navbar-menu {
>>>>>>> Add show code
background-color: white;
}
}
@ -8558,6 +8566,7 @@ label.panel-block:hover {
color: white;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-black .navbar-menu {
@ -8569,6 +8578,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-black .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-black .navbar-menu {
>>>>>>> Add show code
background-color: #0a0a0a;
}
}
@ -8645,6 +8658,7 @@ label.panel-block:hover {
color: #363636;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-light .navbar-menu {
@ -8656,6 +8670,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-light .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-light .navbar-menu {
>>>>>>> Add show code
background-color: whitesmoke;
}
}
@ -8732,6 +8750,7 @@ label.panel-block:hover {
color: whitesmoke;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-dark .navbar-menu {
@ -8743,6 +8762,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-dark .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-dark .navbar-menu {
>>>>>>> Add show code
background-color: #363636;
}
}
@ -8819,6 +8842,7 @@ label.panel-block:hover {
color: #fff;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-primary .navbar-menu {
@ -8830,6 +8854,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-primary .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-primary .navbar-menu {
>>>>>>> Add show code
background-color: #00d1b2;
}
}
@ -8883,6 +8911,7 @@ label.panel-block:hover {
}
}
<<<<<<< HEAD
<<<<<<< HEAD
.hero.is-info {
=======
@ -8901,6 +8930,8 @@ label.panel-block:hover {
}
}
=======
>>>>>>> Add show code
.hero.is-link {
>>>>>>> Add link color
background-color: #3273dc;
@ -8925,24 +8956,21 @@ label.panel-block:hover {
color: #fff;
}
.hero.is-link .nav {
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}
@media screen and (max-width: 768px) {
.hero.is-link .nav-menu {
@media screen and (max-width: 1023px) {
.hero.is-link .navbar-menu {
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);
}
.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 {
.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;
color: #fff;
}
@ -8978,26 +9006,11 @@ label.panel-block:hover {
}
@media screen and (max-width: 768px) {
.hero.is-link.is-bold .nav-menu {
.hero.is-link.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
}
}
@media screen and (max-width: 768px) {
.hero.is-link .nav-toggle span {
background-color: #fff;
}
.hero.is-link .nav-toggle:hover {
background-color: rgba(10, 10, 10, 0.1);
}
.hero.is-link .nav-toggle.is-active span {
background-color: #fff;
}
.hero.is-link .nav-menu .nav-item {
border-top-color: rgba(255, 255, 255, 0.2);
}
}
.hero.is-info {
background-color: #209cee;
color: #fff;
@ -9021,6 +9034,7 @@ label.panel-block:hover {
color: #fff;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-info .navbar-menu {
@ -9035,6 +9049,10 @@ label.panel-block:hover {
>>>>>>> Use link instead of primary
background-color: #3273dc;
=======
=======
@media screen and (max-width: 1023px) {
.hero.is-info .navbar-menu {
>>>>>>> Add show code
background-color: #209cee;
>>>>>>> Add link color
}
@ -9048,7 +9066,11 @@ label.panel-block:hover {
.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 {
<<<<<<< HEAD
background-color: #2366d1;
=======
background-color: #118fe4;
>>>>>>> Add show code
color: #fff;
}
@ -9084,6 +9106,7 @@ label.panel-block:hover {
}
@media screen and (max-width: 768px) {
<<<<<<< HEAD
<<<<<<< HEAD
.hero.is-info.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #1577c6 0%, #3273dc 71%, #4366e5 100%);
@ -9091,6 +9114,10 @@ label.panel-block:hover {
.hero.is-info.is-bold .nav-menu {
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
>>>>>>> Add link color
=======
.hero.is-info.is-bold .navbar-menu {
background-image: linear-gradient(141deg, #04a6d7 0%, #209cee 71%, #3287f5 100%);
>>>>>>> Add show code
}
}
@ -9117,6 +9144,7 @@ label.panel-block:hover {
color: #fff;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-success .navbar-menu {
@ -9128,6 +9156,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-success .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-success .navbar-menu {
>>>>>>> Add show code
background-color: #23d160;
}
}
@ -9204,6 +9236,7 @@ label.panel-block:hover {
color: rgba(0, 0, 0, 0.7);
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-warning .navbar-menu {
@ -9215,6 +9248,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-warning .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-warning .navbar-menu {
>>>>>>> Add show code
background-color: #ffdd57;
}
}
@ -9291,6 +9328,7 @@ label.panel-block:hover {
color: #fff;
}
<<<<<<< HEAD
<<<<<<< HEAD
@media screen and (max-width: 1023px) {
.hero.is-danger .navbar-menu {
@ -9302,6 +9340,10 @@ label.panel-block:hover {
@media screen and (max-width: 768px) {
.hero.is-danger .nav-menu {
>>>>>>> Use link instead of primary
=======
@media screen and (max-width: 1023px) {
.hero.is-danger .navbar-menu {
>>>>>>> Add show code
background-color: #ff3860;
}
}
@ -10523,6 +10565,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;
@ -10823,6 +10873,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;

20
docs/lib/main.js
View file

@ -109,12 +109,24 @@ document.addEventListener('DOMContentLoaded', function () {
var expandEl = '<button class="button is-small bd-expand">Expand</button>';
$el.insertAdjacentHTML('beforeend', copyEl);
<<<<<<< HEAD
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>';
$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);
}
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
}
itemsProcessed++;
@ -145,11 +157,19 @@ document.addEventListener('DOMContentLoaded', function () {
});
});
<<<<<<< HEAD
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
$el.addEventListener('click', function () {
$el.parentNode.parentNode.classList.remove('bd-is-more-clipped');
=======
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
});
});
}