Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-23 13:29:35 -07:00
Code Issues Packages Projects Releases Wiki Activity

Anim init

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-11 13:36:41 +01:00
parent 77c3aa5c98
commit 823a100d51
8 changed files with 386 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
docs/_includes/index/focus.html
View File

@@ -10,13 +10,13 @@
</p> </p>
<p class="subtitle is-6">Designed for <strong>mobile</strong> first</p> <p class="subtitle is-6">Designed for <strong>mobile</strong> first</p>
<figure class="bd-focus-icon"> <figure class="bd-focus-icon">
<span class="icon is-large"> <span class="bd-focus-mobile icon is-large">
<i class="fas fa-lg fa-mobile-alt"></i> <i class="fas fa-lg fa-mobile-alt"></i>
</span> </span>
<span class="icon is-large"> <span class="bd-focus-tablet icon is-large">
<i class="fas fa-2x fa-tablet-alt"></i> <i class="fas fa-2x fa-tablet-alt"></i>
</span> </span>
<span class="icon is-large"> <span class="bd-focus-desktop icon is-large">
<i class="fas fa-3x fa-desktop"></i> <i class="fas fa-3x fa-desktop"></i>
</span> </span>
</figure> </figure>
@@ -29,9 +29,15 @@
<p class="subtitle is-6"> <p class="subtitle is-6">
Just import what you <strong>need</strong> Just import what you <strong>need</strong>
</p> </p>
<figure class="bd-focus-icon"> <figure class="bd-focus-cubes bd-focus-icon">
<span class="icon is-large"> <span class="bd-focus-cube bd-focus-cube-1 icon is-large">
<i class="fas fa-3x fa-cubes"></i> <i class="fas fa-2x fa-cube"></i>
</span>
<span class="bd-focus-cube bd-focus-cube-2 icon is-large">
<i class="fas fa-2x fa-cube"></i>
</span>
<span class="bd-focus-cube bd-focus-cube-3 icon is-large">
<i class="fas fa-2x fa-cube"></i>
</span> </span>
</figure> </figure>
</a> </a>
@@ -43,7 +49,7 @@
<p class="subtitle is-6"> <p class="subtitle is-6">
Built with <strong>Flexbox</strong> Built with <strong>Flexbox</strong>
</p> </p>
<figure class="bd-focus-icon"> <figure class="bd-focus-css3 bd-focus-icon">
<span class="icon is-large"> <span class="icon is-large">
<i class="fab fa-3x fa-css3"></i> <i class="fab fa-3x fa-css3"></i>
</span> </span>
@@ -57,7 +63,7 @@
<p class="subtitle is-6"> <p class="subtitle is-6">
Open source on <strong>GitHub</strong> Open source on <strong>GitHub</strong>
</p> </p>
<figure class="bd-focus-icon"> <figure class="bd-focus-github bd-focus-icon">
<span class="icon is-large"> <span class="icon is-large">
<i class="fab fa-3x fa-github-alt"></i> <i class="fab fa-3x fa-github-alt"></i>
</span> </span>

1
docs/_sass/book.sass
View File

@@ -45,6 +45,7 @@ $book-beige: #FFEDD7
.bd-book-content .bd-book-content
@extend %bd-box @extend %bd-box
box-shadow: 0 3rem 3rem -1rem rgba($black, 0.2)
max-width: 520px max-width: 520px
padding: 3rem padding: 3rem

130
docs/_sass/focus.sass Normal file
View File

@@ -0,0 +1,130 @@
@keyframes bdGrow
from
transform: scale(0)
to
transform: scale(1)
$cubic-dramatic: cubic-bezier(0, 0.75, 0.25, 1)
$cubic-less-dramatic: cubic-bezier(0.14, 0.71, 0.29, 0.86)
$cubic-magic: cubic-bezier(0.175, 0.885, 0.32, 1.275)
$delay: 250ms
%bd-focus-animation
animation-duration: 500ms
animation-fill-mode: both
animation-timing-function: $cubic-less-dramatic
transform-origin: center center
.bd-focus-mobile,
.bd-focus-tablet,
.bd-focus-desktop
@extend %bd-focus-animation
animation-name: bdGrow
transform-origin: bottom center
.bd-focus-tablet
animation-delay: $delay
.bd-focus-desktop
animation-delay: $delay * 2
$cube-factor: 10px
@keyframes moveCube1
0%
transform: translate3d(0, (-5 * $cube-factor), 0)
opacity: 0
25%, 100%
transform: translate3d(0, 0, 0)
opacity: 1
@keyframes moveCube2
0%
transform: translate3d((-4 * $cube-factor), (3 * $cube-factor), 0)
opacity: 0
25%, 100%
transform: translate3d(0, 0, 0)
opacity: 1
@keyframes moveCube3
0%
transform: translate3d((4 * $cube-factor), (3 * $cube-factor), 0)
opacity: 0
25%, 100%
transform: translate3d(0, 0, 0)
opacity: 1
%bd-focus-animation-cube
@extend %bd-focus-animation
animation-iteration-count: infinite
animation-direction: alternate
animation-duration: 2000ms
.bd-focus-cube-1
@extend %bd-focus-animation-cube
animation-name: moveCube1
.bd-focus-cube-2
@extend %bd-focus-animation-cube
animation-name: moveCube2
animation-delay: $delay
.bd-focus-cube-3
@extend %bd-focus-animation-cube
animation-name: moveCube3
animation-delay: $delay * 2
@keyframes bdJellyGrow
0%
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
3.4%
transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
4.7%
transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
6.81%
transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
9.41%
transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
10.21%
transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
13.61%
transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
14.11%
transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
17.52%
transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
18.72%
transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
21.32%
transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
24.32%
transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
25.23%
transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
29.03%
transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
29.93%
transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
35.54%
transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
36.74%
transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
41.04%
transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
44.44%
transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
52.15%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
59.86%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
63.26%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
75.28%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
85.49%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
90.69%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
100%
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)

57
docs/_sass/index.sass
View File

@@ -156,24 +156,45 @@
.title .title
color: $link color: $link
.bd-focus-icon .bd-focus-mobile
.fa-mobile-alt color: $purple
color: $purple margin-right: -20px
margin-right: -20px
.fa-tablet-alt .bd-focus-tablet
color: $red color: $red
margin-left: -20px
.fa-desktop .bd-focus-desktop
color: $orange color: $orange
margin-left: -20px position: relative
position: relative top: 2px
top: 2px
.fa-cubes .bd-focus-cubes
color: $green position: relative
.fa-css3 height: 3rem
color: $blue margin: 0 auto
.fa-github-alt width: 3rem
color: $github
.bd-focus-cube
color: $green
position: absolute
.bd-focus-cube-1
left: 0
top: 0
.bd-focus-cube-2
left: -1rem
top: 23px
.bd-focus-cube-3
left: 1rem
top: 23px
.bd-focus-css3
color: $blue
.bd-focus-github
color: $github
// Intro // Intro

21
docs/_sass/route.sass
View File

@@ -1,21 +0,0 @@
html.route-index
.title.is-2,
.title.is-3
position: relative
a
color: $text-strong
position: relative
a:hover
color: $blue
.hero .title.is-2 a
color: $white
.hero .title.is-2 a:hover
color: $white
.hero.is-primary a.column,
.hero.is-primary a.column:hover
color: $white
.hero.is-primary a.column:hover .title strong
border-bottom: 1px solid
@media screen and (max-width: 979px)
.title.is-2 a
padding-left: 0

4
docs/bulma-docs.sass
View File

@@ -36,7 +36,7 @@ $navbar-item-img-max-height: none
%bd-box %bd-box
background-color: $white background-color: $white
border-radius: $radius-large border-radius: $radius-large
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.1) box-shadow: 0 1.5rem 1.5rem -1.25rem rgba($black, 0.05)
display: block display: block
=selection($current-selector: false) =selection($current-selector: false)
@@ -62,7 +62,6 @@ $navbar-item-img-max-height: none
@import "./_sass/example" @import "./_sass/example"
@import "./_sass/callout" @import "./_sass/callout"
@import "./_sass/bsa" @import "./_sass/bsa"
// @import "./_sass/route"
@import "./_sass/twitter" @import "./_sass/twitter"
@import "./_sass/expo" @import "./_sass/expo"
@import "./_sass/love" @import "./_sass/love"
@@ -72,3 +71,4 @@ $navbar-item-img-max-height: none
@import "./_sass/sponsors" @import "./_sass/sponsors"
@import "./_sass/book" @import "./_sass/book"
@import "./_sass/native" @import "./_sass/native"
@import "./_sass/focus"

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

@@ -9604,7 +9604,7 @@ label.panel-block:hover {
.bd-footer-support, .bd-footer-star, .bd-book-content { .bd-footer-support, .bd-footer-star, .bd-book-content {
background-color: white; background-color: white;
border-radius: 6px; border-radius: 6px;
box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.1); box-shadow: 0 1.5rem 1.5rem -1.25rem rgba(10, 10, 10, 0.05);
display: block; display: block;
} }
@@ -10512,32 +10512,53 @@ svg {
color: #3273dc; color: #3273dc;
} }
.bd-focus-icon .fa-mobile-alt { .bd-focus-mobile {
color: #b86bff; color: #b86bff;
margin-right: -20px; margin-right: -20px;
} }
.bd-focus-icon .fa-tablet-alt { .bd-focus-tablet {
color: #ff3860; color: #ff3860;
margin-left: -20px;
} }
.bd-focus-icon .fa-desktop { .bd-focus-desktop {
color: #ff470f; color: #ff470f;
margin-left: -20px;
position: relative; position: relative;
top: 2px; top: 2px;
} }
.bd-focus-icon .fa-cubes { .bd-focus-cubes {
color: #23d160; position: relative;
height: 3rem;
margin: 0 auto;
width: 3rem;
} }
.bd-focus-icon .fa-css3 { .bd-focus-cube {
color: #23d160;
position: absolute;
}
.bd-focus-cube-1 {
left: 0;
top: 0;
}
.bd-focus-cube-2 {
left: -1rem;
top: 23px;
}
.bd-focus-cube-3 {
left: 1rem;
top: 23px;
}
.bd-focus-css3 {
color: #3273dc; color: #3273dc;
} }
.bd-focus-icon .fa-github-alt { .bd-focus-github {
color: #333333; color: #333333;
} }
@@ -12814,6 +12835,7 @@ svg {
} }
.bd-book-content { .bd-book-content {
box-shadow: 0 3rem 3rem -1rem rgba(10, 10, 10, 0.2);
max-width: 520px; max-width: 520px;
padding: 3rem; padding: 3rem;
} }
@@ -13073,3 +13095,170 @@ svg {
font-size: 1.25rem; font-size: 1.25rem;
} }
} }
@keyframes bdGrow {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
.bd-focus-mobile,
.bd-focus-tablet,
.bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
animation-duration: 500ms;
animation-fill-mode: both;
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
transform-origin: center center;
}
.bd-focus-mobile,
.bd-focus-tablet,
.bd-focus-desktop {
animation-name: bdGrow;
transform-origin: bottom center;
}
.bd-focus-tablet {
animation-delay: 250ms;
}
.bd-focus-desktop {
animation-delay: 500ms;
}
@keyframes moveCube1 {
0% {
transform: translate3d(0, -50px, 0);
opacity: 0;
}
25%, 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes moveCube2 {
0% {
transform: translate3d(-40px, 30px, 0);
opacity: 0;
}
25%, 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes moveCube3 {
0% {
transform: translate3d(40px, 30px, 0);
opacity: 0;
}
25%, 100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2000ms;
}
.bd-focus-cube-1 {
animation-name: moveCube1;
}
.bd-focus-cube-2 {
animation-name: moveCube2;
animation-delay: 250ms;
}
.bd-focus-cube-3 {
animation-name: moveCube3;
animation-delay: 500ms;
}
@keyframes bdJellyGrow {
0% {
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
3.4% {
transform: matrix3d(1.013, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.7% {
transform: matrix3d(1.018, 0, 0, 0, 0, 1.024, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
6.81% {
transform: matrix3d(1.026, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
9.41% {
transform: matrix3d(1.035, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
10.21% {
transform: matrix3d(1.038, 0, 0, 0, 0, 1.049, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
13.61% {
transform: matrix3d(1.045, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.11% {
transform: matrix3d(1.046, 0, 0, 0, 0, 1.053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
17.52% {
transform: matrix3d(1.048, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.72% {
transform: matrix3d(1.048, 0, 0, 0, 0, 1.047, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
21.32% {
transform: matrix3d(1.048, 0, 0, 0, 0, 1.043, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
24.32% {
transform: matrix3d(1.046, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
25.23% {
transform: matrix3d(1.045, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.03% {
transform: matrix3d(1.043, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.93% {
transform: matrix3d(1.042, 0, 0, 0, 0, 1.036, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.54% {
transform: matrix3d(1.039, 0, 0, 0, 0, 1.038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
36.74% {
transform: matrix3d(1.039, 0, 0, 0, 0, 1.039, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.04% {
transform: matrix3d(1.038, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
44.44% {
transform: matrix3d(1.039, 0, 0, 0, 0, 1.041, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.15% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
59.86% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
63.26% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
75.28% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.49% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
90.69% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
transform: matrix3d(1.04, 0, 0, 0, 0, 1.04, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
}

2
docs/test.html
View File

@@ -21,7 +21,7 @@
<!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> --> <!-- <iframe width="560" height="315" src="https://www.youtube.com/embed/hK8ONv4wcbA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> -->
<!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> --> <!-- <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe> -->
{% include global/navbar.html %} {% include global/navbar.html %}
{% include footer/main.html %} {% include index/focus.html %}
<!-- {% include test/from-to.html %} --> <!-- {% include test/from-to.html %} -->
<!-- {% include test/features.html %} --> <!-- {% include test/features.html %} -->
<script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script> <script async defer id="twitter-wjs" src="https://platform.twitter.com/widgets.js"></script>