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

Add index JS

Browse Source
This commit is contained in:
Jeremy Thomas 2017-10-10 17:48:01 +01:00
parent be06c297dc
commit 336c88d9c9
8 changed files with 197 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/_includes/index/intro.html
View File

@ -36,8 +36,10 @@
<div class="intro-column is-video">
<div class="intro-video">
<div class="intro-shadow"></div>
<div class="intro-spinner"></div>
<div class="intro-iframe">
<iframe src="https://player.vimeo.com/video/232485795?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<iframe id="introVimeo" src="https://player.vimeo.com/video/232485795?color=00d1b2" width="640" height="338" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>

30
docs/_javascript/index.js
View File

@ -1,5 +1,35 @@
document.addEventListener('DOMContentLoaded', () => {
// Intro
const introVimeo = document.getElementById('introVimeo');
const npmClipboard = new Clipboard('#npmCopy');
introVimeo.addEventListener('load', () => {
introVimeo.parentNode.parentNode.classList.add('has-loaded');
});
npmClipboard.on('success', function(e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function(e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
}, 500);
});
// Grid
const $grid = document.getElementById('grid');
const $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
const $markup = document.querySelector('#markup code');

25
docs/_javascript/main.js
View File

@ -158,31 +158,6 @@ document.addEventListener('DOMContentLoaded', () => {
}
});
var npmClipboard = new Clipboard('#npmCopy');
npmClipboard.on('onclick', function(e) {
console.log('CLICK');
});
npmClipboard.on('success', function(e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function(e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
setTimeout(() => {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
}, 500);
});
// Functions
function getAll(selector) {

52
docs/_sass/index.sass
View File

@ -58,14 +58,64 @@
padding-right: 1.375em
.intro-video
background-color: lavender
background-color: $white
margin-left: auto
margin-right: auto
max-width: 640px
position: relative
&.has-loaded
.intro-spinner
display: none
.intro-iframe
opacity: 1
@keyframes introSpinner
from
opacity: 0
transform: scale(1.14)
to
opacity: 1
transform: scale(1)
.intro-spinner,
.intro-shadow
animation-duration: 1000ms
animation-easing-function: ease-out
animation-fill-mode: both
transform-origin: center
.intro-spinner
+overlay
animation-name: introSpinner
&::before
+loader
border-bottom-color: $primary
border-left-color: $primary
height: 1.5em
left: calc(50% - 0.75em)
position: absolute
top: calc(50% - 0.75em)
width: 1.5em
@keyframes introShadow
from
opacity: 0
transform: scale(0.86)
to
opacity: 1
transform: scale(1)
.intro-shadow
+overlay
box-shadow: 0 1.5rem 3rem rgba(#000, 0.2)
animation-name: introShadow
.intro-iframe
opacity: 0
padding-top: 52.8125%
position: relative
transition-duration: 500ms
transition-property: opacity
iframe
height: 100%
left: 0

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

@ -9535,15 +9535,96 @@ svg {
}
.intro-video {
background-color: lavender;
background-color: white;
margin-left: auto;
margin-right: auto;
max-width: 640px;
position: relative;
}
.intro-video.has-loaded .intro-spinner {
display: none;
}
.intro-video.has-loaded .intro-iframe {
opacity: 1;
}
@keyframes introSpinner {
from {
opacity: 0;
transform: scale(1.14);
}
to {
opacity: 1;
transform: scale(1);
}
}
.intro-spinner,
.intro-shadow {
animation-duration: 1000ms;
animation-easing-function: ease-out;
animation-fill-mode: both;
transform-origin: center;
}
.intro-spinner {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
animation-name: introSpinner;
}
.intro-spinner::before {
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
display: block;
height: 1em;
position: relative;
width: 1em;
border-bottom-color: #00d1b2;
border-left-color: #00d1b2;
height: 1.5em;
left: calc(50% - 0.75em);
position: absolute;
top: calc(50% - 0.75em);
width: 1.5em;
}
@keyframes introShadow {
from {
opacity: 0;
transform: scale(0.86);
}
to {
opacity: 1;
transform: scale(1);
}
}
.intro-shadow {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
animation-name: introShadow;
}
.intro-iframe {
opacity: 0;
padding-top: 52.8125%;
position: relative;
transition-duration: 500ms;
transition-property: opacity;
}
.intro-iframe iframe {

2
docs/index.html
View File

@ -23,7 +23,7 @@ route: index
<span class="icon is-large" style="margin-right: 10px;">
<i class="fa fa-3x fa-desktop"></i>
</span>
<p class="title is-4" style="margin-top: 0.5em;"><strong>Responsive</strong></p>
<p class="title is-4" style="margin-top: 0.5em;"><strong>100% Responsive</strong></p>
<p class="subtitle">Designed for <strong>mobile</strong> first</p>
</a>
<a class="column has-text-centered" href="{{ site.url }}/documentation/overview/modular/">

30
docs/lib/index.js
View File

@ -2,6 +2,36 @@
document.addEventListener('DOMContentLoaded', function () {
// Intro
var introVimeo = document.getElementById('introVimeo');
var npmClipboard = new Clipboard('#npmCopy');
introVimeo.addEventListener('load', function () {
introVimeo.parentNode.parentNode.classList.add('has-loaded');
});
npmClipboard.on('success', function (e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function (e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
}, 500);
});
// Grid
var $grid = document.getElementById('grid');
var $columns = Array.prototype.slice.call(document.querySelectorAll('#grid > .column'), 0);
var $markup = document.querySelector('#markup code');

25
docs/lib/main.js
View File

@ -160,31 +160,6 @@ document.addEventListener('DOMContentLoaded', function () {
}
});
var npmClipboard = new Clipboard('#npmCopy');
npmClipboard.on('onclick', function (e) {
console.log('CLICK');
});
npmClipboard.on('success', function (e) {
e.trigger.innerText = 'copied!';
e.trigger.classList.add('is-success');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-success');
}, 500);
e.clearSelection();
});
npmClipboard.on('error', function (e) {
e.trigger.innerText = 'error!';
e.trigger.classList.add('is-error');
setTimeout(function () {
e.trigger.innerText = 'copy';
e.trigger.classList.remove('is-error');
}, 500);
});
// Functions
function getAll(selector) {