library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improve snippet

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-09 15:38:12 +01:00
parent 8d6a0a43dc
commit c4c3c32a83
5 changed files with 112 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/_javascript/main.js
View File

@ -143,19 +143,11 @@ 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
});
});
}

23
docs/_sass/example.sass
View File

@ -42,10 +42,6 @@
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
@ -218,28 +214,23 @@ $structure-invert: $danger-invert
.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))
background-color: rgba($background, 0.7)
border: none
color: $white
color: rgba(#000, 0.5)
cursor: pointer
display: none
font-size: $size-6
font-size: $size-small
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
background-color: rgba($yellow, 0.8)
color: rgba(#000, 0.7)
+tablet
pre
overflow: hidden
.bd-show
display: flex
white-space: pre-wrap
+tablet
.section:not(.is-fullwidth) > .bd-example:not(.is-fullwidth)

69
docs/css/bulma-docs.css
View File

@ -11637,14 +11637,6 @@ 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;
@ -11680,14 +11672,22 @@ html.route-index #carbon {
.bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight .bd-show {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
display: -webkit-box;
display: -ms-flexbox;
=======
=======
=======
>>>>>>> Improve snippet
=======
display: -webkit-box;
display: -ms-flexbox;
=======
display: -webkit-box;
display: -ms-flexbox;
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
>>>>>>> Improve snippet
display: flex;
@ -11866,8 +11866,16 @@ html.route-index #carbon {
=======
=======
align-items: stretch;
<<<<<<< HEAD
>>>>>>> Add love data
<<<<<<< HEAD
>>>>>>> Add love data
=======
=======
border-radius: 5px;
border-top-left-radius: 0;
>>>>>>> Improve snippet
>>>>>>> Improve snippet
display: flex;
justify-content: center;
}
@ -12002,6 +12010,7 @@ html.route-index #carbon {
=======
=======
align-items: stretch;
<<<<<<< HEAD
>>>>>>> Use link instead of primary
<<<<<<< HEAD
>>>>>>> Use link instead of primary
@ -12047,8 +12056,17 @@ html.route-index #carbon {
=======
align-items: stretch;
>>>>>>> Add love data
<<<<<<< HEAD
>>>>>>> Add love data
<<<<<<< HEAD
>>>>>>> Add love data
=======
=======
=======
border-radius: 0 5px 5px 0;
>>>>>>> Improve snippet
>>>>>>> Improve snippet
>>>>>>> Improve snippet
display: flex;
flex-direction: column;
}
@ -12181,6 +12199,7 @@ html.route-index #carbon {
.highlight .bd-show {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
bottom: 0;
left: 0;
@ -12222,6 +12241,8 @@ html.route-index #carbon {
=======
>>>>>>> Improve snippet
=======
>>>>>>> Improve snippet
=======
>>>>>>> Improve snippet
bottom: 0;
left: 0;
@ -12257,6 +12278,8 @@ html.route-index #carbon {
.bd-highlight-clipped .bd-show {
=======
>>>>>>> Improve snippet
=======
>>>>>>> Improve snippet
bottom: 0;
left: 0;
@ -12295,44 +12318,38 @@ html.route-index #carbon {
}
.bd-highlight-clipped .bd-show {
=======
>>>>>>> Improve snippet
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);
background-color: rgba(245, 245, 245, 0.7);
border: none;
color: white;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
display: none;
font-size: 1rem;
font-size: 0.75rem;
justify-content: center;
opacity: 0.7;
width: 100%;
}
.bd-highlight-clipped .bd-show strong {
.highlight .bd-show strong {
color: currentColor;
font-weight: 600;
}
.bd-highlight-clipped .bd-show:hover {
opacity: 0.8;
.highlight .bd-show:hover {
background-color: rgba(255, 221, 87, 0.8);
color: rgba(0, 0, 0, 0.7);
}
.bd-highlight-clipped .highlight.bd-is-clipped {
height: 4em;
overflow: hidden;
@media screen and (min-width: 769px), print {
.highlight pre {
white-space: pre-wrap;
}
.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 {

19
docs/css/bulma-docs.css.map
View File

File diff suppressed because one or more lines are too long

44
docs/lib/main.js
View File

@ -114,14 +114,19 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
=======
>>>>>>> Improve snippet
=======
=======
>>>>>>> Add show code
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
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>';
@ -136,6 +141,7 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Add show code
=======
@ -153,6 +159,8 @@ document.addEventListener('DOMContentLoaded', function () {
=======
<<<<<<< HEAD
=======
>>>>>>> Improve snippet
=======
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
@ -171,14 +179,28 @@ document.addEventListener('DOMContentLoaded', function () {
>>>>>>> Improve snippet
>>>>>>> Improve snippet
=======
=======
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
var $parent = $el.parentNode;
if ($parent && $parent.className == 'bd-highlight-clipped') {
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.classList.add('bd-is-clipped');
$el.insertAdjacentHTML('beforeend', showEl);
<<<<<<< HEAD
>>>>>>> Add show code
<<<<<<< HEAD
>>>>>>> Add show code
<<<<<<< HEAD
>>>>>>> Add show code
=======
=======
=======
} else if ($el.firstElementChild.scrollHeight > 480 && $el.firstElementChild.clientHeight <= 480) {
$el.insertAdjacentHTML('beforeend', expandEl);
>>>>>>> Improve snippet
>>>>>>> Improve snippet
>>>>>>> Improve snippet
}
itemsProcessed++;
@ -214,10 +236,15 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Improve snippet
=======
>>>>>>> Add show code
=======
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
@ -233,6 +260,7 @@ document.addEventListener('DOMContentLoaded', function () {
=======
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
=======
>>>>>>> Add show code
=======
@ -241,6 +269,12 @@ document.addEventListener('DOMContentLoaded', function () {
=======
>>>>>>> Add show code
>>>>>>> Add show code
=======
=======
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
var $highlightShows = getAll('.highlight .bd-show');
$highlightShows.forEach(function ($el) {
@ -249,6 +283,7 @@ document.addEventListener('DOMContentLoaded', function () {
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
<<<<<<< HEAD
>>>>>>> Improve snippet
=======
=======
@ -263,6 +298,8 @@ document.addEventListener('DOMContentLoaded', function () {
>>>>>>> Improve snippet
=======
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
=======
=======
@ -273,6 +310,9 @@ document.addEventListener('DOMContentLoaded', function () {
$el.parentNode.classList.remove('bd-is-clipped');
>>>>>>> Add show code
>>>>>>> Add show code
=======
>>>>>>> Improve snippet
>>>>>>> Improve snippet
});
});
}