mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add Flexbox helpers documentation
This commit is contained in:
Jeremy Thomas
parent
8ee5898d47
commit
3d61f41fea
@ -190,6 +190,7 @@
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"new": true,
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "arrows-alt-h",
|
||||
@ -202,6 +203,14 @@
|
||||
"icon": "eye",
|
||||
"path": "/documentation/helpers/visibility-helpers"
|
||||
},
|
||||
"helpers-flexbox": {
|
||||
"name": "Flexbox",
|
||||
"new": true,
|
||||
"subtitle": "Helpers for all <strong>Flexbox</strong> properties",
|
||||
"color": "primary",
|
||||
"icon": "ellipsis-h",
|
||||
"path": "/documentation/helpers/flexbox-helpers"
|
||||
},
|
||||
"helpers-other": {
|
||||
"name": "Other",
|
||||
"subtitle": "Other useful Bulma helpers",
|
||||
@ -636,7 +645,7 @@
|
||||
"categories": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modifiers", "overview-modular", "overview-responsiveness", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"customize": ["customize-concepts", "customize-variables", "customize-node-sass", "customize-sass-cli", "customize-webpack"],
|
||||
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-other"],
|
||||
"helpers": ["helpers-color", "helpers-spacing", "helpers-typography", "helpers-visibility", "helpers-flexbox", "helpers-other"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
|
||||
@ -13,11 +13,6 @@
|
||||
</a>
|
||||
<a class="bd-category-name {% if category_id == current_link_id %}is-active{% endif %}" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
{% if category_link.name == 'Helpers' %}
|
||||
<span class="tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</header>
|
||||
|
||||
@ -27,6 +22,11 @@
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-1 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
icon=link.icon
|
||||
name=link.name
|
||||
subtitle=link.subtitle
|
||||
new=link.new
|
||||
%}
|
||||
{% endfor %}
|
||||
</nav>
|
||||
|
||||
16
docs/_includes/elements/flexbox-helper-table.html
Normal file
16
docs/_includes/elements/flexbox-helper-table.html
Normal file
@ -0,0 +1,16 @@
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Property: Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for value in include.values %}
|
||||
<tr>
|
||||
<td><code>is-{{ include.property }}-{{ value }}</code></td>
|
||||
<td><code>{{ include.property }}: {{ value }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
@ -14,6 +14,11 @@
|
||||
<span class="bd-link-counter"></span>
|
||||
{% endif %}
|
||||
</figure>
|
||||
{% if include.new %}
|
||||
<span style="float: right;" class="ml-2 tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
{{ include.name }}
|
||||
</h2>
|
||||
<p class="bd-link-subtitle">
|
||||
|
||||
@ -72,6 +72,11 @@ route: documentation
|
||||
<li {% if link_id == current_link_id %}class="is-active"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
{% if link.new %}
|
||||
<span class="ml-2 tag bd-mini-tag is-primary">
|
||||
New!
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
@ -1,6 +1,14 @@
|
||||
@charset "UTF-8";
|
||||
/*! bulma.io v0.9.0 | MIT License | github.com/jgthms/bulma */
|
||||
/* Bulma Utilities */
|
||||
@-webkit-keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@ -123,7 +131,8 @@
|
||||
}
|
||||
|
||||
.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
-webkit-animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
@ -314,7 +323,10 @@ html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
article,
|
||||
@ -2559,10 +2571,14 @@ fieldset[disabled] .button {
|
||||
}
|
||||
|
||||
.progress:indeterminate {
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: moveIndeterminate;
|
||||
animation-name: moveIndeterminate;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
background-color: #ededed;
|
||||
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
|
||||
background-position: top left;
|
||||
@ -2594,6 +2610,15 @@ fieldset[disabled] .button {
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
@-webkit-keyframes moveIndeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
to {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes moveIndeterminate {
|
||||
from {
|
||||
background-position: 200% 0;
|
||||
@ -8711,6 +8736,8 @@ label.panel-block:hover {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
@ -12947,6 +12974,17 @@ svg {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@-webkit-keyframes introSpinner {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(1.14);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes introSpinner {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -12960,9 +12998,11 @@ svg {
|
||||
|
||||
.intro-spinner,
|
||||
.intro-shadow {
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
animation-easing-function: ease-out;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@ -12972,11 +13012,13 @@ svg {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
animation-name: introSpinner;
|
||||
-webkit-animation-name: introSpinner;
|
||||
animation-name: introSpinner;
|
||||
}
|
||||
|
||||
.intro-spinner::before {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
-webkit-animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 290486px;
|
||||
border-right-color: transparent;
|
||||
@ -12995,6 +13037,17 @@ svg {
|
||||
width: 1.5em;
|
||||
}
|
||||
|
||||
@-webkit-keyframes introShadow {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.86);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes introShadow {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -13017,7 +13070,8 @@ svg {
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.2);
|
||||
animation-name: introShadow;
|
||||
-webkit-animation-name: introShadow;
|
||||
animation-name: introShadow;
|
||||
}
|
||||
|
||||
.intro-iframe {
|
||||
@ -14873,7 +14927,8 @@ svg {
|
||||
}
|
||||
|
||||
.bd-rainbow {
|
||||
animation: rainbow 8s ease infinite;
|
||||
-webkit-animation: rainbow 8s ease infinite;
|
||||
animation: rainbow 8s ease infinite;
|
||||
background-image: linear-gradient(124deg, #ff470f, #f14668, #b86bff, #3273dc);
|
||||
background-size: 800% 800%;
|
||||
}
|
||||
@ -14883,6 +14938,18 @@ svg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
@-webkit-keyframes rainbow {
|
||||
0% {
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
50% {
|
||||
background-position: 99% 20%;
|
||||
}
|
||||
100% {
|
||||
background-position: 1% 80%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rainbow {
|
||||
0% {
|
||||
background-position: 1% 80%;
|
||||
@ -15389,6 +15456,15 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -15398,6 +15474,15 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoomIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes zoomIn {
|
||||
from {
|
||||
transform: scale(0.8);
|
||||
@ -15542,17 +15627,21 @@ svg {
|
||||
|
||||
.bd-book-modal .bd-book-modal-background,
|
||||
.bd-book-modal .modal-content {
|
||||
animation-duration: 250ms;
|
||||
-webkit-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
animation-easing-function: ease-out;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.bd-book-modal .bd-book-modal-background {
|
||||
animation-name: fadeIn;
|
||||
-webkit-animation-name: fadeIn;
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
.bd-book-modal .modal-content {
|
||||
animation-name: zoomIn;
|
||||
-webkit-animation-name: zoomIn;
|
||||
animation-name: zoomIn;
|
||||
transform-origin: center;
|
||||
}
|
||||
|
||||
@ -15743,6 +15832,15 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdGrow {
|
||||
from {
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdGrow {
|
||||
from {
|
||||
transform: scale(0);
|
||||
@ -15752,6 +15850,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdSlideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -15763,6 +15872,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(1rem);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdSlideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -15776,95 +15896,132 @@ svg {
|
||||
|
||||
.intro-title, .intro-ghbtns,
|
||||
.intro-author, .intro-npm, .intro-buttons .button, .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
animation-name: bdSlideDown;
|
||||
-webkit-animation-name: bdSlideDown;
|
||||
animation-name: bdSlideDown;
|
||||
}
|
||||
|
||||
.intro-ghbtns,
|
||||
.intro-author {
|
||||
animation-delay: 1s;
|
||||
animation-duration: 1000ms;
|
||||
animation-name: bdFadeIn;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-duration: 1000ms;
|
||||
animation-duration: 1000ms;
|
||||
-webkit-animation-name: bdFadeIn;
|
||||
animation-name: bdFadeIn;
|
||||
}
|
||||
|
||||
.intro-npm {
|
||||
animation-delay: 250ms;
|
||||
animation-name: bdSlowIn;
|
||||
-webkit-animation-delay: 250ms;
|
||||
animation-delay: 250ms;
|
||||
-webkit-animation-name: bdSlowIn;
|
||||
animation-name: bdSlowIn;
|
||||
}
|
||||
|
||||
.intro-buttons .button {
|
||||
animation-name: bdSlowIn;
|
||||
-webkit-animation-name: bdSlowIn;
|
||||
animation-name: bdSlowIn;
|
||||
}
|
||||
|
||||
.intro-buttons .button:first-child {
|
||||
animation-delay: 500ms;
|
||||
-webkit-animation-delay: 500ms;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.intro-buttons .button:last-child {
|
||||
animation-delay: 750ms;
|
||||
-webkit-animation-delay: 750ms;
|
||||
animation-delay: 750ms;
|
||||
}
|
||||
|
||||
.bd-focus-item .title {
|
||||
animation-name: bdSlideDown;
|
||||
-webkit-animation-name: bdSlideDown;
|
||||
animation-name: bdSlideDown;
|
||||
}
|
||||
|
||||
.bd-focus-item .subtitle {
|
||||
animation-name: bdSlideUp;
|
||||
-webkit-animation-name: bdSlideUp;
|
||||
animation-name: bdSlideUp;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(1) .title {
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(1) .subtitle {
|
||||
animation-delay: 1.125s;
|
||||
-webkit-animation-delay: 1.125s;
|
||||
animation-delay: 1.125s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(2) .title {
|
||||
animation-delay: 1.5s;
|
||||
-webkit-animation-delay: 1.5s;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(2) .subtitle {
|
||||
animation-delay: 1.625s;
|
||||
-webkit-animation-delay: 1.625s;
|
||||
animation-delay: 1.625s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(3) .title {
|
||||
animation-delay: 2s;
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(3) .subtitle {
|
||||
animation-delay: 2.125s;
|
||||
-webkit-animation-delay: 2.125s;
|
||||
animation-delay: 2.125s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(4) .title {
|
||||
animation-delay: 2.5s;
|
||||
-webkit-animation-delay: 2.5s;
|
||||
animation-delay: 2.5s;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(4) .subtitle {
|
||||
animation-delay: 2.625s;
|
||||
-webkit-animation-delay: 2.625s;
|
||||
animation-delay: 2.625s;
|
||||
}
|
||||
|
||||
.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
|
||||
animation-name: bdGrow;
|
||||
-webkit-animation-name: bdGrow;
|
||||
animation-name: bdGrow;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.bd-focus-mobile {
|
||||
animation-delay: 1s;
|
||||
-webkit-animation-delay: 1s;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.bd-focus-tablet {
|
||||
animation-delay: 1.25s;
|
||||
-webkit-animation-delay: 1.25s;
|
||||
animation-delay: 1.25s;
|
||||
}
|
||||
|
||||
.bd-focus-desktop {
|
||||
animation-delay: 1.5s;
|
||||
-webkit-animation-delay: 1.5s;
|
||||
animation-delay: 1.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdCube1 {
|
||||
0% {
|
||||
transform: translate3d(0, -50px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
25%, 100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdCube1 {
|
||||
@ -15878,6 +16035,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdCube2 {
|
||||
0% {
|
||||
transform: translate3d(-40px, 30px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
25%, 100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdCube2 {
|
||||
0% {
|
||||
transform: translate3d(-40px, 30px, 0);
|
||||
@ -15889,6 +16057,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdCube3 {
|
||||
0% {
|
||||
transform: translate3d(40px, 30px, 0);
|
||||
opacity: 0;
|
||||
}
|
||||
25%, 100% {
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdCube3 {
|
||||
0% {
|
||||
transform: translate3d(40px, 30px, 0);
|
||||
@ -15901,24 +16080,42 @@ svg {
|
||||
}
|
||||
|
||||
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
|
||||
animation-direction: alternate;
|
||||
animation-duration: 2000ms;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation-duration: 2000ms;
|
||||
animation-duration: 2000ms;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bd-focus-cube-1 {
|
||||
animation-delay: 1.5s;
|
||||
animation-name: bdCube1;
|
||||
-webkit-animation-delay: 1.5s;
|
||||
animation-delay: 1.5s;
|
||||
-webkit-animation-name: bdCube1;
|
||||
animation-name: bdCube1;
|
||||
}
|
||||
|
||||
.bd-focus-cube-2 {
|
||||
animation-name: bdCube2;
|
||||
animation-delay: 1.75s;
|
||||
-webkit-animation-name: bdCube2;
|
||||
animation-name: bdCube2;
|
||||
-webkit-animation-delay: 1.75s;
|
||||
animation-delay: 1.75s;
|
||||
}
|
||||
|
||||
.bd-focus-cube-3 {
|
||||
animation-name: bdCube3;
|
||||
animation-delay: 2s;
|
||||
-webkit-animation-name: bdCube3;
|
||||
animation-name: bdCube3;
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdFadeIn {
|
||||
@ -15930,6 +16127,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdSlowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdSlowIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -15941,6 +16149,17 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdScaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdScaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
@ -15953,14 +16172,103 @@ svg {
|
||||
}
|
||||
|
||||
.bd-focus-css3 {
|
||||
animation-delay: 2s;
|
||||
animation-name: bdScaleIn;
|
||||
-webkit-animation-delay: 2s;
|
||||
animation-delay: 2s;
|
||||
-webkit-animation-name: bdScaleIn;
|
||||
animation-name: bdScaleIn;
|
||||
}
|
||||
|
||||
.bd-focus-github {
|
||||
animation-delay: 2.5s;
|
||||
animation-duration: 1500ms;
|
||||
animation-name: bdJellyPop;
|
||||
-webkit-animation-delay: 2.5s;
|
||||
animation-delay: 2.5s;
|
||||
-webkit-animation-duration: 1500ms;
|
||||
animation-duration: 1500ms;
|
||||
-webkit-animation-name: bdJellyPop;
|
||||
animation-name: bdJellyPop;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdJellyPop {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
3.4% {
|
||||
opacity: 1;
|
||||
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
4.7% {
|
||||
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
6.81% {
|
||||
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
9.41% {
|
||||
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
10.21% {
|
||||
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
13.61% {
|
||||
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
14.11% {
|
||||
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
17.52% {
|
||||
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
18.72% {
|
||||
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
21.32% {
|
||||
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
24.32% {
|
||||
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
25.23% {
|
||||
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.03% {
|
||||
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
29.93% {
|
||||
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
35.54% {
|
||||
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
36.74% {
|
||||
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
41.04% {
|
||||
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
44.44% {
|
||||
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
52.15% {
|
||||
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
59.86% {
|
||||
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
63.26% {
|
||||
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
75.28% {
|
||||
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
85.49% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
90.69% {
|
||||
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdJellyPop {
|
||||
@ -16046,3 +16354,5 @@ svg {
|
||||
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
|
||||
}
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bulma-docs.css.map */
|
||||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
131
docs/documentation/helpers/flexbox-helpers.html
Normal file
131
docs/documentation/helpers/flexbox-helpers.html
Normal file
@ -0,0 +1,131 @@
|
||||
---
|
||||
title: Flexbox helpers
|
||||
layout: documentation
|
||||
doc-tab: helpers
|
||||
doc-subtab: helpers-flexbox
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- helpers
|
||||
- helpers-flexbox
|
||||
flex-direction-values:
|
||||
- row
|
||||
- row-reverse
|
||||
- column
|
||||
- column-reverse
|
||||
flex-wrap-values:
|
||||
- nowrap
|
||||
- wrap
|
||||
- wrap-reverse
|
||||
justify-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- start
|
||||
- end
|
||||
- left
|
||||
- right
|
||||
align-content-values:
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- space-between
|
||||
- space-around
|
||||
- space-evenly
|
||||
- stretch
|
||||
- start
|
||||
- end
|
||||
- baseline
|
||||
align-items-values:
|
||||
- stretch
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- start
|
||||
- end
|
||||
- self-start
|
||||
- self-end
|
||||
align-self-values:
|
||||
- auto
|
||||
- flex-start
|
||||
- flex-end
|
||||
- center
|
||||
- baseline
|
||||
- stretch
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
All of the <strong>Flexbox CSS properties</strong> are available as Bulma helpers:
|
||||
</p>
|
||||
<ul>
|
||||
<li><code>flex-direction</code></li>
|
||||
<li><code>flex-wrap</code></li>
|
||||
<li><code>justify-content</code></li>
|
||||
<li><code>align-content</code></li>
|
||||
<li><code>align-items</code></li>
|
||||
<li><code>align-self</code></li>
|
||||
<li><code>flex-grow</code></li>
|
||||
<li><code>flex-shrink</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Flex direction" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-direction" values=page.flex-direction-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex wrap" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="flex-wrap" values=page.flex-wrap-values %}
|
||||
|
||||
{% include elements/anchor.html name="Justify content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="justify-content" values=page.justify-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align content" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-content" values=page.align-content-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align items" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-items" values=page.align-items-values %}
|
||||
|
||||
{% include elements/anchor.html name="Align self" %}
|
||||
|
||||
{% include elements/flexbox-helper-table.html property="align-self" values=page.align-self-values %}
|
||||
|
||||
{% include elements/anchor.html name="Flex grow and flex shrink" %}
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Class</th>
|
||||
<th>Property: Value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th colspan="2">Grow</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-grow-{{ i }}</code></td>
|
||||
<td><code>flex-grow: {{ i }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<th colspan="2">Shrink</th>
|
||||
</tr>
|
||||
{% for i in (0..5) %}
|
||||
<tr>
|
||||
<td><code>is-flex-shrink-{{ i }}</code></td>
|
||||
<td><code>flex-shrink: {{ i }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
$flex-directions-values: row, row-reverse, column, column-reverse
|
||||
@each $value in $flex-directions-values
|
||||
.is-flex-direction-#{$value}
|
||||
flex-direction: $value !important
|
||||
$flex-direction-values: row, row-reverse, column, column-reverse
|
||||
@each $value in $flex-direction-values
|
||||
.is-flex-direction-#{$value}
|
||||
flex-direction: $value !important
|
||||
|
||||
$flex-wrap-values: nowrap, wrap, wrap-reverse
|
||||
@each $value in $flex-wrap-values
|
||||
.is-flex-wrap-#{$value}
|
||||
flex-wrap: $value !important
|
||||
.is-flex-wrap-#{$value}
|
||||
flex-wrap: $value !important
|
||||
|
||||
$justify-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, start, end, left, right
|
||||
@each $value in $justify-content-values
|
||||
.is-justify-content-#{$value}
|
||||
justify-content: $value !important
|
||||
.is-justify-content-#{$value}
|
||||
justify-content: $value !important
|
||||
|
||||
$align-content-values: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch, start, end, baseline
|
||||
@each $value in $align-content-values
|
||||
.is-align-content-#{$value}
|
||||
align-content: $value !important
|
||||
.is-align-content-#{$value}
|
||||
align-content: $value !important
|
||||
|
||||
$align-items-values: stretch, flex-start, flex-end, center, baseline, start, end, self-start, self-end
|
||||
@each $value in $align-items-values
|
||||
.is-align-items-#{$value}
|
||||
align-items: $value !important
|
||||
.is-align-items-#{$value}
|
||||
align-items: $value !important
|
||||
|
||||
$align-self-values: auto, flex-start, flex-end, center, baseline, stretch
|
||||
@each $value in $align-self-values
|
||||
.is-align-self-#{$value}
|
||||
align-self: $value !important
|
||||
.is-align-self-#{$value}
|
||||
align-self: $value !important
|
||||
|
||||
$flex-operators: grow, shrink
|
||||
@each $operator in $flex-operators
|
||||
@for $i from 0 through 5
|
||||
.is-flex-#{$operator}-#{$i}
|
||||
flex-#{$operator}: $i !important
|
||||
@for $i from 0 through 5
|
||||
.is-flex-#{$operator}-#{$i}
|
||||
flex-#{$operator}: $i !important
|
||||
|
||||
Loading…
Reference in New Issue
Block a user