From 02f7b216f120ee44e095fb1e6b32d9f0ef150796 Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Mon, 9 Oct 2017 12:27:08 +0100 Subject: [PATCH] Add show code --- docs/_javascript/main.js | 14 +++- docs/_sass/example.sass | 31 +++++++++ docs/css/bulma-docs.css | 145 +++++++++++++++++++++++++++++++-------- docs/lib/main.js | 20 ++++++ 4 files changed, 182 insertions(+), 28 deletions(-) diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index d0fb65d03..bc7d48af3 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -107,12 +107,24 @@ document.addEventListener('DOMContentLoaded', () => { const expandEl = ''; $el.insertAdjacentHTML('beforeend', copyEl); +<<<<<<< HEAD const $parent = $el.parentNode; if ($parent && $parent.classList.contains('bd-is-more')) { const showEl = ''; $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 = ''; + $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'); }); }); } diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index 8790c9a6d..685cdc275 100644 --- a/docs/_sass/example.sass +++ b/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 diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 813288b1b..221dc1aa8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -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; diff --git a/docs/lib/main.js b/docs/lib/main.js index a8969d1df..e67a2223b 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -109,12 +109,24 @@ document.addEventListener('DOMContentLoaded', function () { var expandEl = ''; $el.insertAdjacentHTML('beforeend', copyEl); +<<<<<<< HEAD var $parent = $el.parentNode; if ($parent && $parent.classList.contains('bd-is-more')) { var showEl = ''; $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 = ''; + $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 }); }); } -- 2.47.2