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

Init mixin docs

Browse Source
This commit is contained in:
Jeremy Thomas 2021-09-19 01:23:53 +01:00
parent 67ab02b289
commit 8def6f6afa
15 changed files with 986 additions and 474 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
css/bulma.css.map
View File

File diff suppressed because one or more lines are too long

48
docs/_data/links.json
View File

@ -79,19 +79,47 @@
"icon": "tint",
"path": "/documentation/overview/colors"
},
"overview-functions": {
"utilities": {
"name": "Utilities",
"subtitle": "Sass tools used by Bulma and available for you",
"color": "primary",
"icon": "eye",
"path": "/documentation/utilities"
},
"utilities-functions": {
"name": "Functions",
"subtitle": "Utility functions to calculate colors and other values",
"color": "orange",
"icon": "code",
"path": "/documentation/overview/functions"
"path": "/documentation/utilities/functions"
},
"overview-mixins": {
"utilities-mixins": {
"name": "Mixins",
"subtitle": "Utility mixins for custom elements and responsive helpers",
"color": "purple",
"icon": "plus",
"path": "/documentation/overview/mixins"
"path": "/documentation/utilities/mixins"
},
"utilities-responsive-mixins": {
"name": "Responsive Mixins",
"subtitle": "Utility mixins for custom elements and responsive helpers",
"color": "purple",
"icon": "plus",
"path": "/documentation/utilities/responsive-mixins"
},
"utilities-extends": {
"name": "Extends",
"subtitle": "Utility mixins for custom elements and responsive helpers",
"color": "purple",
"icon": "plus",
"path": "/documentation/utilities/extends"
},
"utilities-control-mixins": {
"name": "Controls",
"subtitle": "Utility mixins for custom elements and responsive helpers",
"color": "purple",
"icon": "plus",
"path": "/documentation/utilities/controls"
},
"customize": {
"name": "Customize",
@ -661,6 +689,7 @@
"categoryIds": [
"overview",
"customize",
"utilities",
"columns",
"elements",
"components",
@ -675,9 +704,14 @@
"overview-modifiers",
"overview-modular",
"overview-responsiveness",
"overview-colors",
"overview-functions",
"overview-mixins"
"overview-colors"
],
"utilities": [
"utilities-mixins",
"utilities-responsive-mixins",
"utilities-control-mixins",
"utilities-functions",
"utilities-extends"
],
"customize": [
"customize-concepts",

6
docs/_includes/components/categories.html
View File

@ -8,17 +8,15 @@
{% assign category_links = site.data.links.categories[category_id] %}
{% assign category_link = site.data.links.by_id[category_id] %}
{% comment %}
{% if category_id == 'overview' %}
<p class="bd-category-group">
Learn
Concepts
</p>
{% elsif category_id == 'columns' %}
<p class="bd-category-group">
Style
Library
</p>
{% endif %}
{% endcomment %}
<div class="bd-category {% if category_id == current_category %}is-current{% endif %}">
<header class="bd-category-header">

11
docs/_sass/examples/mixins.scss Normal file
View File

@ -0,0 +1,11 @@
.bulma-arrow-mixin {
@include arrow(purple);
}
.bulma-hamburger-mixin {
@include hamburger(2.5rem);
}
.bulma-delete-mixin {
@include delete;
}

134
docs/bulma-docs.scss
View File

@ -40,77 +40,77 @@ $radius: 0.375em;
$bd-edge-width: 11.25rem;
$bd-edge-offset: 2rem;
@import '../sass/utilities/initial-variables';
@import '../sass/utilities/functions';
@import "../sass/utilities/initial-variables";
@import "../sass/utilities/functions";
$custom-colors: (
'expo': (
"expo": (
$star,
$white,
findLightColor($star),
findDarkColor($star),
),
'love': (
"love": (
$red,
$white,
findLightColor($red),
findDarkColor($red),
),
'patreon': (
"patreon": (
$patreon,
$white,
findLightColor($patreon),
findDarkColor($patreon),
),
'rss': (
"rss": (
$rss,
$white,
findLightColor($rss),
findDarkColor($rss),
),
'bleeding': (
"bleeding": (
$bleeding-green,
findColorInvert($bleeding-green),
findLightColor($bleeding-green),
findDarkColor($bleeding-green),
),
'sass': (
"sass": (
$sass,
$white,
findLightColor($sass),
findDarkColor($sass),
),
'amazon': (
"amazon": (
$amazon,
findColorInvert($amazon),
findLightColor($amazon),
findDarkColor($amazon),
),
'sponsor': (
"sponsor": (
$rose,
$white,
findLightColor($rose),
findDarkColor($rose),
),
'twitter': (
"twitter": (
$twitter,
$white,
findLightColor($twitter),
findDarkColor($twitter),
),
'videos': (
"videos": (
$green,
$white,
findLightColor($green),
findDarkColor($green),
),
'extensions': (
"extensions": (
$cyan,
$white,
findLightColor($cyan),
findDarkColor($cyan),
),
'bootstrap': (
"bootstrap": (
$bootstrap,
$white,
findLightColor($bootstrap),
@ -118,11 +118,11 @@ $custom-colors: (
),
);
@import '../sass/utilities/derived-variables';
@import "../sass/utilities/derived-variables";
$navbar-breakpoint: $tablet;
@import '../bulma';
@import "../bulma";
%center {
align-items: center;
@ -175,7 +175,7 @@ $navbar-breakpoint: $tablet;
@include overlay;
background-color: $scheme-main-bis;
border-radius: $radius-large;
content: '';
content: "";
display: block;
opacity: 0;
pointer-events: none;
@ -193,56 +193,58 @@ $navbar-breakpoint: $tablet;
}
}
@import './_sass/base/css-vars';
@import './_sass/base/custom';
@import './_sass/base/helpers';
@import "./_sass/base/css-vars";
@import "./_sass/base/custom";
@import "./_sass/base/helpers";
@import './_sass/components/anchors';
@import './_sass/components/options';
@import './_sass/components/banner';
@import './_sass/components/call';
@import './_sass/components/carbon';
@import './_sass/components/categories';
@import './_sass/components/code';
@import './_sass/components/content';
@import './_sass/components/hero';
@import './_sass/components/highlight';
@import './_sass/components/klmn';
@import './_sass/components/navbar';
@import './_sass/components/notification';
@import './_sass/components/pagination';
@import './_sass/components/features';
@import './_sass/components/links';
@import './_sass/components/screenshots';
@import './_sass/components/drawing';
@import './_sass/components/variables';
@import './_sass/components/book';
@import './_sass/components/native';
@import './_sass/components/fortyfour';
@import './_sass/components/spacing-table';
@import './_sass/components/survey';
@import "./_sass/components/anchors";
@import "./_sass/components/options";
@import "./_sass/components/banner";
@import "./_sass/components/call";
@import "./_sass/components/carbon";
@import "./_sass/components/categories";
@import "./_sass/components/code";
@import "./_sass/components/content";
@import "./_sass/components/hero";
@import "./_sass/components/highlight";
@import "./_sass/components/klmn";
@import "./_sass/components/navbar";
@import "./_sass/components/notification";
@import "./_sass/components/pagination";
@import "./_sass/components/features";
@import "./_sass/components/links";
@import "./_sass/components/screenshots";
@import "./_sass/components/drawing";
@import "./_sass/components/variables";
@import "./_sass/components/book";
@import "./_sass/components/native";
@import "./_sass/components/fortyfour";
@import "./_sass/components/spacing-table";
@import "./_sass/components/survey";
@import './_sass/pages/index';
@import './_sass/pages/docs';
@import './_sass/pages/videos';
@import './_sass/pages/love';
@import './_sass/pages/expo';
@import './_sass/pages/backers';
@import './_sass/pages/blog';
@import './_sass/pages/single';
@import './_sass/pages/extensions';
@import './_sass/pages/made-with-bulma';
@import './_sass/pages/bootstrap';
@import "./_sass/pages/index";
@import "./_sass/pages/docs";
@import "./_sass/pages/videos";
@import "./_sass/pages/love";
@import "./_sass/pages/expo";
@import "./_sass/pages/backers";
@import "./_sass/pages/blog";
@import "./_sass/pages/single";
@import "./_sass/pages/extensions";
@import "./_sass/pages/made-with-bulma";
@import "./_sass/pages/bootstrap";
@import './_sass/index/hello';
@import './_sass/index/focus';
@import './_sass/index/focus-animations';
@import './_sass/index/best';
@import './_sass/index/sponsors';
@import './_sass/index/heading';
@import './_sass/index/columns';
@import './_sass/index/custom';
@import "./_sass/index/hello";
@import "./_sass/index/focus";
@import "./_sass/index/focus-animations";
@import "./_sass/index/best";
@import "./_sass/index/sponsors";
@import "./_sass/index/heading";
@import "./_sass/index/columns";
@import "./_sass/index/custom";
@import './_sass/global/support';
@import './_sass/global/newsletter';
@import './_sass/global/cc';
@import "./_sass/global/support";
@import "./_sass/global/newsletter";
@import "./_sass/global/cc";
@import "./_sass/examples/mixins";

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

@ -183,8 +183,7 @@ fieldset[disabled] .pagination-ellipsis {
}
.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
-webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb;
border-radius: 9999px;
border-right-color: transparent;
@ -325,9 +324,7 @@ html {
overflow-x: hidden;
overflow-y: scroll;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
text-size-adjust: 100%;
}
article,
@ -453,15 +450,6 @@ table th {
color: #363636;
}
@-webkit-keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes spinAround {
from {
transform: rotate(0deg);
@ -4426,14 +4414,10 @@ div.icon-text {
}
.progress:indeterminate {
-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;
animation-duration: 1.5s;
animation-iteration-count: infinite;
animation-name: moveIndeterminate;
animation-timing-function: linear;
background-color: #ededed;
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
background-position: top left;
@ -4465,15 +4449,6 @@ div.icon-text {
height: 1.5rem;
}
@-webkit-keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@keyframes moveIndeterminate {
from {
background-position: 200% 0;
@ -9590,6 +9565,11 @@ body.has-navbar-fixed-bottom {
.navbar-burger {
color: #4a4a4a;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
cursor: pointer;
display: block;
height: 3.25rem;
@ -12524,8 +12504,6 @@ 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;
}
@ -16913,7 +16891,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
top: 0;
background-color: #fafafa;
border-radius: 6px;
content: '';
content: "";
display: block;
opacity: 0;
pointer-events: none;
@ -17158,7 +17136,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-anchors {
padding: var(--docs-side-padding);
position: -webkit-sticky;
position: sticky;
top: 0;
}
@ -17594,7 +17571,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-categories {
--height: 1.25;
padding: var(--docs-side-padding);
position: -webkit-sticky;
position: sticky;
top: 0;
}
@ -20986,8 +20962,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
--device-md-width: 24px;
--device-lg-height: 40px;
--device-lg-width: 48px;
-webkit-animation: bdDeviceBounce 3.5s infinite;
animation: bdDeviceBounce 3.5s infinite;
animation: bdDeviceBounce 3.5s infinite;
border: 0 solid hsl(var(--device-deg), 100%, 53%);
border-width: var(--device-y) var(--device-x);
border-radius: 0.375em;
@ -21032,44 +21007,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
color: #333333;
}
@-webkit-keyframes bdDeviceBounce {
0% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
28% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
33% {
--device-deg: var(--device-md-deg);
height: var(--device-md-height);
width: var(--device-md-width);
}
62% {
--device-deg: var(--device-md-deg);
height: var(--device-md-height);
width: var(--device-md-width);
}
67% {
--device-deg: var(--device-lg-deg);
height: var(--device-lg-height);
width: var(--device-lg-width);
}
95% {
--device-deg: var(--device-lg-deg);
height: var(--device-lg-height);
width: var(--device-lg-width);
}
100% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
}
@keyframes bdDeviceBounce {
0% {
--device-deg: var(--device-sm-deg);
@ -21108,15 +21045,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-webkit-keyframes bdGrow {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes bdGrow {
from {
transform: scale(0);
@ -21126,17 +21054,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-webkit-keyframes bdSlideDown {
from {
opacity: 0;
transform: translateY(-1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bdSlideDown {
from {
opacity: 0;
@ -21148,17 +21065,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-webkit-keyframes bdSlideUp {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bdSlideUp {
from {
opacity: 0;
@ -21171,96 +21077,67 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
.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 {
-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);
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-item .title {
-webkit-animation-name: bdSlideDown;
animation-name: bdSlideDown;
animation-name: bdSlideDown;
}
.bd-focus-item .subtitle {
-webkit-animation-name: bdSlideUp;
animation-name: bdSlideUp;
animation-name: bdSlideUp;
}
.bd-focus-item:nth-child(1) .title {
-webkit-animation-delay: 0;
animation-delay: 0;
animation-delay: 0;
}
.bd-focus-item:nth-child(1) .subtitle {
-webkit-animation-delay: 125ms;
animation-delay: 125ms;
animation-delay: 125ms;
}
.bd-focus-item:nth-child(2) .title {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
animation-delay: 500ms;
}
.bd-focus-item:nth-child(2) .subtitle {
-webkit-animation-delay: 625ms;
animation-delay: 625ms;
animation-delay: 625ms;
}
.bd-focus-item:nth-child(3) .title {
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
animation-delay: 1000ms;
}
.bd-focus-item:nth-child(3) .subtitle {
-webkit-animation-delay: 1125ms;
animation-delay: 1125ms;
animation-delay: 1125ms;
}
.bd-focus-item:nth-child(4) .title {
-webkit-animation-delay: 1500ms;
animation-delay: 1500ms;
animation-delay: 1500ms;
}
.bd-focus-item:nth-child(4) .subtitle {
-webkit-animation-delay: 1625ms;
animation-delay: 1625ms;
animation-delay: 1625ms;
}
.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
-webkit-animation-name: bdGrow;
animation-name: bdGrow;
animation-name: bdGrow;
transform-origin: bottom center;
}
.bd-focus-mobile {
-webkit-animation-delay: 0;
animation-delay: 0;
animation-delay: 0;
}
.bd-focus-tablet {
-webkit-animation-delay: 250ms;
animation-delay: 250ms;
animation-delay: 250ms;
}
.bd-focus-desktop {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes bdCube1 {
0% {
transform: translate3d(0, -50px, 0);
opacity: 0;
}
25%,
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
animation-delay: 500ms;
}
@keyframes bdCube1 {
@ -21275,18 +21152,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-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);
@ -21299,18 +21164,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-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);
@ -21324,42 +21177,24 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
-webkit-animation-direction: alternate;
animation-direction: alternate;
-webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-duration: 2000ms;
animation-iteration-count: infinite;
}
.bd-focus-cube-1 {
-webkit-animation-delay: 500ms;
animation-delay: 500ms;
-webkit-animation-name: bdCube1;
animation-name: bdCube1;
animation-delay: 500ms;
animation-name: bdCube1;
}
.bd-focus-cube-2 {
-webkit-animation-name: bdCube2;
animation-name: bdCube2;
-webkit-animation-delay: 750ms;
animation-delay: 750ms;
animation-name: bdCube2;
animation-delay: 750ms;
}
.bd-focus-cube-3 {
-webkit-animation-name: bdCube3;
animation-name: bdCube3;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
@-webkit-keyframes bdFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
animation-name: bdCube3;
animation-delay: 1000ms;
}
@keyframes bdFadeIn {
@ -21371,17 +21206,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-webkit-keyframes bdSlowIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bdSlowIn {
from {
opacity: 0;
@ -21393,17 +21217,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
@-webkit-keyframes bdScaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bdScaleIn {
from {
opacity: 0;
@ -21416,103 +21229,14 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
.bd-focus-css3 {
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
-webkit-animation-name: bdScaleIn;
animation-name: bdScaleIn;
animation-delay: 1000ms;
animation-name: bdScaleIn;
}
.bd-focus-github {
-webkit-animation-delay: 1500ms;
animation-delay: 1500ms;
-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);
}
animation-delay: 1500ms;
animation-duration: 1500ms;
animation-name: bdJellyPop;
}
@keyframes bdJellyPop {
@ -21608,23 +21332,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-best-list {
align-items: stretch;
-webkit-animation-duration: 93.6s;
animation-duration: 93.6s;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
animation-duration: 93.6s;
animation-iteration-count: infinite;
animation-timing-function: linear;
display: flex;
left: 0;
position: absolute;
top: 1.5rem;
-webkit-animation-name: bdBestCarousel;
animation-name: bdBestCarousel;
animation-name: bdBestCarousel;
}
.bd-best-list:hover {
-webkit-animation-play-state: paused;
animation-play-state: paused;
animation-play-state: paused;
}
.bd-best-item {
@ -21672,12 +21391,6 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
width: auto;
}
@-webkit-keyframes bdBestCarousel {
100% {
transform: translateX(calc(-100% + 3120px));
}
}
@keyframes bdBestCarousel {
100% {
transform: translateX(calc(-100% + 3120px));
@ -22495,4 +22208,157 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
}
}
/*# sourceMappingURL=bulma-docs.css.map */
.bulma-arrow-mixin {
border: 3px solid purple;
border-radius: 2px;
border-right: 0;
border-top: 0;
content: " ";
display: block;
height: 0.625em;
margin-top: -0.4375em;
pointer-events: none;
position: absolute;
top: 50%;
transform: rotate(-45deg);
transform-origin: center;
width: 0.625em;
}
.bulma-hamburger-mixin {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: none;
border: none;
cursor: pointer;
display: block;
height: 2.5rem;
position: relative;
width: 2.5rem;
}
.bulma-hamburger-mixin span {
background-color: currentColor;
display: block;
height: 1px;
left: calc(50% - 8px);
position: absolute;
transform-origin: center;
transition-duration: 86ms;
transition-property: background-color, opacity, transform;
transition-timing-function: ease-out;
width: 16px;
}
.bulma-hamburger-mixin span:nth-child(1) {
top: calc(50% - 6px);
}
.bulma-hamburger-mixin span:nth-child(2) {
top: calc(50% - 1px);
}
.bulma-hamburger-mixin span:nth-child(3) {
top: calc(50% + 4px);
}
.bulma-hamburger-mixin:hover {
background-color: rgba(0, 0, 0, 0.05);
}
.bulma-hamburger-mixin.is-active span:nth-child(1) {
transform: translateY(5px) rotate(45deg);
}
.bulma-hamburger-mixin.is-active span:nth-child(2) {
opacity: 0;
}
.bulma-hamburger-mixin.is-active span:nth-child(3) {
transform: translateY(-5px) rotate(-45deg);
}
.bulma-delete-mixin {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-moz-appearance: none;
-webkit-appearance: none;
background-color: rgba(10, 10, 10, 0.2);
border: none;
border-radius: 9999px;
cursor: pointer;
pointer-events: auto;
display: inline-block;
flex-grow: 0;
flex-shrink: 0;
font-size: 0;
height: 20px;
max-height: 20px;
max-width: 20px;
min-height: 20px;
min-width: 20px;
outline: none;
position: relative;
vertical-align: top;
width: 20px;
}
.bulma-delete-mixin::before, .bulma-delete-mixin::after {
background-color: white;
content: "";
display: block;
left: 50%;
position: absolute;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotate(45deg);
transform-origin: center center;
}
.bulma-delete-mixin::before {
height: 2px;
width: 50%;
}
.bulma-delete-mixin::after {
height: 50%;
width: 2px;
}
.bulma-delete-mixin:hover, .bulma-delete-mixin:focus {
background-color: rgba(10, 10, 10, 0.3);
}
.bulma-delete-mixin:active {
background-color: rgba(10, 10, 10, 0.4);
}
.bulma-delete-mixin.is-small {
height: 16px;
max-height: 16px;
max-width: 16px;
min-height: 16px;
min-width: 16px;
width: 16px;
}
.bulma-delete-mixin.is-medium {
height: 24px;
max-height: 24px;
max-width: 24px;
min-height: 24px;
min-width: 24px;
width: 24px;
}
.bulma-delete-mixin.is-large {
height: 32px;
max-height: 32px;
max-width: 32px;
min-height: 32px;
min-width: 32px;
width: 32px;
}

28
docs/documentation/overview/functions.html
View File

@ -11,11 +11,23 @@ breadcrumb:
---
<div class="content">
<p>Bulma uses 3 custom functions to help define the values and colors dynamically:</p>
<p>
Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
</p>
<ul>
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number.</li>
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light.</li>
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color.</li>
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
<li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
<li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
</ul>
<p>
Bulma also has a few utility functions to calculate useful values:
</p>
<ul>
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
</ul>
</div>
@ -232,3 +244,11 @@ breadcrumb:
</table>
</div>
</div>
{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
<div class="content">
<p>
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
</p>
</div>

104
docs/documentation/overview/modifiers.html
View File

@ -11,75 +11,75 @@ breadcrumb:
---
{% capture button_example %}
<a class="button">
<button class="button">
Button
</a>
</button>
{% endcapture %}
{% capture button_primary_example %}
<a class="button is-primary">
<button class="button is-primary">
Button
</a>
</button>
{% endcapture %}
{% capture button_colors %}
<a class="button is-primary">
<button class="button is-primary">
Button
</a>
<a class="button is-link">
</button>
<button class="button is-link">
Button
</a>
<a class="button is-info">
</button>
<button class="button is-info">
Button
</a>
<a class="button is-success">
</button>
<button class="button is-success">
Button
</a>
<a class="button is-warning">
</button>
<button class="button is-warning">
Button
</a>
<a class="button is-danger">
</button>
<button class="button is-danger">
Button
</a>
</button>
{% endcapture %}
{% capture button_sizes %}
<a class="button is-small">
<button class="button is-small">
Button
</a>
<a class="button">
</button>
<button class="button">
Button
</a>
<a class="button is-medium">
</button>
<button class="button is-medium">
Button
</a>
<a class="button is-large">
</button>
<button class="button is-large">
Button
</a>
</button>
{% endcapture %}
{% capture button_states %}
<a class="button is-primary is-outlined">
<button class="button is-primary is-outlined">
Button
</a>
<a class="button is-loading">
</button>
<button class="button is-loading">
Button
</a>
<a class="button" disabled>
</button>
<button class="button" disabled>
Button
</a>
</button>
{% endcapture %}
{% capture button_combinations %}
<a class="button is-primary is-small" disabled>
<button class="button is-primary is-small" disabled>
Button
</a>
<a class="button is-info is-loading">
</button>
<button class="button is-info is-loading">
Button
</a>
<a class="button is-danger is-outlined is-large">
</button>
<button class="button is-danger is-outlined is-large">
Button
</a>
</button>
{% endcapture %}
<div class="columns">
@ -124,22 +124,22 @@ breadcrumb:
</div>
<div class="column">
<p class="field">
<a class="button is-primary">Button</a>
<button class="button is-primary">Button</button>
</p>
<p class="field">
<a class="button is-link">Button</a>
<button class="button is-link">Button</button>
</p>
<p class="field">
<a class="button is-info">Button</a>
<button class="button is-info">Button</button>
</p>
<p class="field">
<a class="button is-success">Button</a>
<button class="button is-success">Button</button>
</p>
<p class="field">
<a class="button is-warning">Button</a>
<button class="button is-warning">Button</button>
</p>
<p class="field">
<a class="button is-danger">Button</a>
<button class="button is-danger">Button</button>
</p>
</div>
<div class="column is-half">
@ -162,16 +162,16 @@ breadcrumb:
</div>
<div class="column">
<p class="field">
<a class="button is-small">Button</a>
<button class="button is-small">Button</button>
</p>
<p class="field">
<a class="button">Button</a>
<button class="button">Button</button>
</p>
<p class="field">
<a class="button is-medium">Button</a>
<button class="button is-medium">Button</button>
</p>
<p class="field">
<a class="button is-large">Button</a>
<button class="button is-large">Button</button>
</p>
</div>
<div class="column is-half">
@ -192,13 +192,13 @@ breadcrumb:
</div>
<div class="column">
<p class="field">
<a class="button is-primary is-outlined">Button</a>
<button class="button is-primary is-outlined">Button</button>
</p>
<p class="field">
<a class="button is-loading">Button</a>
<button class="button is-loading">Button</button>
</p>
<p class="field">
<a class="button" disabled>Button</a>
<button class="button" disabled>Button</button>
</p>
</div>
<div class="column is-half">
@ -214,13 +214,13 @@ breadcrumb:
</div>
<div class="column">
<p class="field">
<a class="button is-primary is-small" disabled>Button</a>
<button class="button is-primary is-small" disabled>Button</button>
</p>
<p class="field">
<a class="button is-info is-loading">Button</a>
<button class="button is-info is-loading">Button</button>
</p>
<p class="field">
<a class="button is-danger is-outlined is-large">Button</a>
<button class="button is-danger is-outlined is-large">Button</button>
</p>
</div>
<div class="column is-half">

68
docs/documentation/utilities/control-mixins.html Normal file
View File

@ -0,0 +1,68 @@
---
title: Mixins
layout: documentation
doc-tab: overview
doc-subtab: mixins
breadcrumb:
- home
- documentation
- overview
- overview-mixins
---
<div class="table-container">
<table class="table is-bordered">
<tr>
<td><code>=arrow($color)</code></td>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr>
<tr>
<td><code>=block</code></td>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
</tr>
<tr>
<td><code>=clearfix</code></td>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
</tr>
<tr>
<td><code>=center($size)</code></td>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
</tr>
<tr>
<td><code>=delete</code></td>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
</tr>
<tr>
<td><code>=fa($size, $dimensions)</code></td>
<td>Sets the style of a Font Awesome icon container.</td>
</tr>
<tr>
<td><code>=hamburger($dimensions)</code></td>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
</tr>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div>
<div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
</div>

68
docs/documentation/utilities/extends.html Normal file
View File

@ -0,0 +1,68 @@
---
title: Mixins
layout: documentation
doc-tab: overview
doc-subtab: mixins
breadcrumb:
- home
- documentation
- overview
- overview-mixins
---
<div class="table-container">
<table class="table is-bordered">
<tr>
<td><code>=arrow($color)</code></td>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr>
<tr>
<td><code>=block</code></td>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
</tr>
<tr>
<td><code>=clearfix</code></td>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
</tr>
<tr>
<td><code>=center($size)</code></td>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
</tr>
<tr>
<td><code>=delete</code></td>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
</tr>
<tr>
<td><code>=fa($size, $dimensions)</code></td>
<td>Sets the style of a Font Awesome icon container.</td>
</tr>
<tr>
<td><code>=hamburger($dimensions)</code></td>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
</tr>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div>
<div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
</div>

254
docs/documentation/utilities/functions.html Normal file
View File

@ -0,0 +1,254 @@
---
title: Functions
layout: documentation
doc-tab: overview
doc-subtab: functions
breadcrumb:
- home
- documentation
- overview
- overview-functions
---
<div class="content">
<p>
Bulma has <strong>custom Sass functions</strong> to help find <strong>related colors</strong> dynamically:
</p>
<ul>
<li><code>findColorInvert($color)</code>: returns either 70% transparent black or 100% opaque white depending on the luminance of the color</li>
<li><code>findLightColor($color)</code>: returns the current color but with a lightness of at <em>least</em> 96%</li>
<li><code>findDarkColor($color)</code>: returns the current color but with a lightness of at <em>most</em> 29%</li>
</ul>
<p>
Bulma also has a few utility functions to calculate useful values:
</p>
<ul>
<li><code>powerNumber($number, $exp)</code>: calculates the value of a number exposed to another one. Returns a number</li>
<li><code>colorLuminance($color)</code>: defines if a color is dark or light. Return a decimal number between 0 and 1 where <= 0.5 is dark and > 0.5 is light</li>
</ul>
</div>
{% include elements/anchor.html name="The <code>findColorInvert()</code> function" %}
<div class="content">
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
<ul>
<li>if <code>colorLuminance($color) > 0.55</code>, it outputs <code>rgba(#000, 0.7)</code></li>
<li>otherwise, it outputs <code>#fff</code></li>
</ul>
<p>Its purpose is to guarantee a <strong>readable</strong> shade for the <em>text</em> when the input color is used as the <em>background</em>.</p>
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
<th>color</th>
<th>color luminance</th>
<th>findColorInvert()</th>
<th>result</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<span class="bd-color" style="background: #00d1b2;"></span>
<code>#00d1b2</code>
</td>
<td>
<code>0.52831</code>
</td>
<td>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
<a class="button" style="background: #00d1b2; border-color: #00d1b2; color: #fff;">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #3273dc;"></span>
<code>#3273dc</code>
</td>
<td>
<code>0.23119</code>
</td>
<td>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
<a class="button" style="background: #3273dc; border-color: #3273dc; color: #fff;">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #23d160;"></span>
<code>#23d160</code>
</td>
<td>
<code>0.51067</code>
</td>
<td>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
<a class="button" style="background: #23d160; border-color: #23d160; color: #fff;">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #ffdd57;"></span>
<code>#ffdd57</code>
</td>
<td>
<code>0.76863</code>
</td>
<td>
<span class="bd-color" style="background: rgba(0, 0, 0, 0.7);"></span>
<code>rgba(0, 0, 0, 0.7)</code>
</td>
<td>
<a class="button" style="background: #ffdd57; border-color: #ffdd57; color: rgba(0, 0, 0, 0.7);">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #ff3860;"></span>
<code>#ff3860</code>
</td>
<td>
<code>0.27313</code>
</td>
<td>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
<a class="button" style="background: #ff3860; border-color: #ff3860; color: #fff;">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #ffb3b3;"></span>
<code>#ffb3b3</code>
</td>
<td>
<code>0.61796</code>
</td>
<td>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
<a class="button" style="background: #ffb3b3; border-color: #ffb3b3; color: rgba(0,0,0,0.7);">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: #ffbc6b;"></span>
<code>#ffbc6b</code>
</td>
<td>
<code>0.63053</code>
</td>
<td>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
<a class="button" style="background: #ffbc6b; border-color: #ffbc6b; color: rgba(0,0,0,0.7);">
Button
</a>
</td>
</tr>
<tr>
<td>
<span class="bd-color" style="background: hsl(294, 71%, 79%);"></span>
<code>hsl(294, 71%, 79%)</code>
</td>
<td>
<code>0.5529</code>
</td>
<td>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
Button
</a>
</td>
</tr>
</tbody>
</table>
</div>
<p>
For colors that have a luminance close to the <code>0.55</code> threshold, it can be useful to <strong>override</strong> the <code>findColorInvert()</code> function, and rather set the invert color <strong>manually.</strong>
<br>
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
</p>
<div class="table-container">
<table class="table is-bordered">
<tbody>
<tr>
<th>
with <code>findColorInvert()</code>
</th>
<td>
<code>$purple-invert: findColorInvert($purple)</code>
</td>
<td>
<span class="bd-color" style="background: rgba(0,0,0,0.7);"></span>
<code>rgba(0,0,0,0.7)</code>
</td>
<td>
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: rgba(0,0,0,0.7);">
Button
</a>
</td>
</tr>
<tr>
<th>
with manual setting
</th>
<td>
<code>$purple-invert: #fff</code>
</td>
<td>
<span class="bd-color" style="background: #fff;"></span>
<code>#fff</code>
</td>
<td>
<a class="button" style="background: hsl(294, 71%, 79%); border-color: hsl(294, 71%, 79%); color: #fff;">
Button
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
{% include elements/anchor.html name="The <code>findLightColor()</code> and <code>findDarkColor()</code> functions" %}
<div class="content">
<p>
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
</p>
</div>

119
docs/documentation/utilities/mixins.html Normal file
View File

@ -0,0 +1,119 @@
---
title: Mixins
layout: documentation
doc-tab: utilities
doc-subtab: mixins
breadcrumb:
- home
- documentation
- utilities
- utilities-mixins
---
<div class="content">
<p>
Throughout the codebase, Bulma uses Sass mixins to <strong>enhance</strong> and facilitate the CSS output. While these mixins are mainly used within the context of Bulma, they are of course available for you to <strong>re-use</strong> in your own projects.
</p>
</div>
{% include elements/anchor.html name="Element Mixins" %}
<h4 class="title is-5">Arrow</h4>
<div class="content">
<p>
The <code>arrow()</code> mixin creates a down-facing arrow. The <code>$color</code> parameter defines the color of the arrow.
</p>
</div>
{% highlight sass %}.bulma-arrow-mixin {
@include arrow(purple);
}{% endhighlight %}
{% capture arrow %}
<span class="bulma-arrow-mixin"></span>
{% endcapture %}
{% include elements/snippet.html content=arrow %}
<!-- -->
<h4 class="title is-5">Hamburger</h4>
<div class="content">
<p>
The <code>hamburger()</code> mixin creates a 16x16px set of <strong>3 horizontal bars</strong> grouped within square. The dimensions of this square are defined by the <code>$dimensions</code> parameter.
</p>
</div>
{% highlight sass %}.bulma-hamburger-mixin {
@include hamburger(2.5rem);
}{% endhighlight %}
{% capture hamburger %}
<button class="bulma-hamburger-mixin">
<span></span>
<span></span>
<span></span>
</button>
{% endcapture %}
{% include elements/snippet.html content=hamburger %}
<!-- -->
<h4 class="title is-5">Delete</h4>
<div class="content">
<p>
The <code>delete()</code> mixin creates a 20x20px circle containing a <strong>cross</strong>. It comes with 3 modifiers: <code>is-small</code>, <code>is-medium</code> and <code>is-large</code>.
</p>
</div>
{% highlight sass %}.bulma-delete-mixin {
@include delete;
}{% endhighlight %}
{% capture delete %}
<button class="bulma-delete-mixin is-small"></button>
<button class="bulma-delete-mixin"></button>
<button class="bulma-delete-mixin is-medium"></button>
<button class="bulma-delete-mixin is-large"></button>
{% endcapture %}
{% include elements/snippet.html content=delete %}
<!-- -->
@include loader
@include fa($size, $dimensions)
@include block($spacing: $block-spacing)
@include overlay($offset: 0)
@include placeholder
// Tools
@include clearfix
@include center($width, $height: 0)
@include overflow-touch
@include reset
@include unselectable
// RTL
@include ltr
@include rtl
@include ltr-property($property, $spacing, $right: true)
@include ltr-position($spacing, $right: true)

68
docs/documentation/utilities/responsive-mixins.html Normal file
View File

@ -0,0 +1,68 @@
---
title: Mixins
layout: documentation
doc-tab: overview
doc-subtab: mixins
breadcrumb:
- home
- documentation
- overview
- overview-mixins
---
<div class="table-container">
<table class="table is-bordered">
<tr>
<td><code>=arrow($color)</code></td>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr>
<tr>
<td><code>=block</code></td>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
</tr>
<tr>
<td><code>=clearfix</code></td>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
</tr>
<tr>
<td><code>=center($size)</code></td>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
</tr>
<tr>
<td><code>=delete</code></td>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
</tr>
<tr>
<td><code>=fa($size, $dimensions)</code></td>
<td>Sets the style of a Font Awesome icon container.</td>
</tr>
<tr>
<td><code>=hamburger($dimensions)</code></td>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
</tr>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div>
<div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
</div>

5
sass/utilities/functions.sass
View File

@ -82,7 +82,7 @@
@else
@return #fff
@function findLightColor($color)
@function findLightColor($color, $l: 96%)
@if type-of($color) == 'color'
$l: 96%
@if lightness($color) > 96%
@ -90,9 +90,8 @@
@return change-color($color, $lightness: $l)
@return $background
@function findDarkColor($color)
@function findDarkColor($color, $base-l: 29%)
@if type-of($color) == 'color'
$base-l: 29%
$luminance: colorLuminance($color)
$luminance-delta: (0.53 - $luminance)
$target-l: round($base-l + ($luminance-delta * 53))

5
sass/utilities/mixins.sass
View File

@ -25,6 +25,11 @@
width: $dimensions
=hamburger($dimensions)
-moz-appearance: none
-webkit-appearance: none
appearance: none
background: none
border: none
cursor: pointer
display: block
height: $dimensions