mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add block documentation
This commit is contained in:
Jeremy Thomas
parent
98090feaf8
commit
9e0c9a35db
@ -1,6 +1,6 @@
|
||||
{
|
||||
"fontawesome4": "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css",
|
||||
"fontawesome5": "https://use.fontawesome.com/releases/v5.3.1/js/all.js",
|
||||
"fontawesome5": "https://use.fontawesome.com/releases/v5.14.0/js/all.js",
|
||||
"ionicons": "https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css",
|
||||
"mdi": "https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css"
|
||||
}
|
||||
|
||||
@ -372,6 +372,13 @@
|
||||
"icon": "cube",
|
||||
"path": "/documentation/elements"
|
||||
},
|
||||
"elements-block": {
|
||||
"name": "Block",
|
||||
"subtitle": "Bulma's most basic spacer <strong>block</strong>",
|
||||
"color": "grey",
|
||||
"icon": "arrows-alt-v",
|
||||
"path": "/documentation/elements/block"
|
||||
},
|
||||
"elements-box": {
|
||||
"name": "Box",
|
||||
"subtitle": "A white <strong>box</strong> to contain other elements",
|
||||
@ -633,7 +640,7 @@
|
||||
"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"],
|
||||
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
||||
"elements": ["elements-block", "elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
||||
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
||||
}
|
||||
}
|
||||
|
||||
@ -253,6 +253,14 @@
|
||||
"title": "vpn for netflix",
|
||||
"width":"137",
|
||||
"height":"85"
|
||||
},
|
||||
"dfds": {
|
||||
"name": "dfds",
|
||||
"url": "https://www.dietfooddeliveryservice.com/",
|
||||
"title": "vpn for netflix",
|
||||
"width":"60",
|
||||
"height":"60",
|
||||
"follow": true
|
||||
}
|
||||
},
|
||||
"home": [
|
||||
@ -280,6 +288,7 @@
|
||||
,"edusson"
|
||||
,"inkoop"
|
||||
,"vpnreview"
|
||||
,"dfds"
|
||||
],
|
||||
"footer": [
|
||||
"polygon"
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
"$card-radius": {
|
||||
"name": "$card-radius",
|
||||
"value": "0",
|
||||
"type": "size"
|
||||
"type": "string"
|
||||
},
|
||||
"$card-header-background-color": {
|
||||
"name": "$card-header-background-color",
|
||||
@ -90,6 +90,7 @@
|
||||
"$card-color",
|
||||
"$card-background-color",
|
||||
"$card-shadow",
|
||||
"$card-radius",
|
||||
"$card-header-background-color",
|
||||
"$card-header-color",
|
||||
"$card-header-padding",
|
||||
@ -103,4 +104,4 @@
|
||||
"$card-media-margin"
|
||||
],
|
||||
"file_path": "components/card.sass"
|
||||
}
|
||||
}
|
||||
@ -116,6 +116,13 @@
|
||||
"name": "$modal-card-body-padding",
|
||||
"value": "20px",
|
||||
"type": "size"
|
||||
},
|
||||
"$modal-breakpoint": {
|
||||
"name": "$modal-breakpoint",
|
||||
"value": "$tablet",
|
||||
"type": "variable",
|
||||
"computed_type": "size",
|
||||
"computed_value": "769px"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -139,7 +146,8 @@
|
||||
"$modal-card-foot-radius",
|
||||
"$modal-card-foot-border-top",
|
||||
"$modal-card-body-background-color",
|
||||
"$modal-card-body-padding"
|
||||
"$modal-card-body-padding",
|
||||
"$modal-breakpoint"
|
||||
],
|
||||
"file_path": "components/modal.sass"
|
||||
}
|
||||
@ -227,6 +227,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "computed",
|
||||
"computed_value": "960px + (2 * $gap)"
|
||||
},
|
||||
"$navbar-colors": {
|
||||
"name": "$navbar-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -267,7 +274,8 @@
|
||||
"$navbar-divider-background-color",
|
||||
"$navbar-divider-height",
|
||||
"$navbar-bottom-box-shadow-size",
|
||||
"$navbar-breakpoint"
|
||||
"$navbar-breakpoint",
|
||||
"$navbar-colors"
|
||||
],
|
||||
"file_path": "components/navbar.sass"
|
||||
}
|
||||
@ -163,6 +163,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(0, 0%, 86%)"
|
||||
},
|
||||
"$button-colors": {
|
||||
"name": "$button-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -191,7 +198,8 @@
|
||||
"$button-disabled-opacity",
|
||||
"$button-static-color",
|
||||
"$button-static-background-color",
|
||||
"$button-static-border-color"
|
||||
"$button-static-border-color",
|
||||
"$button-colors"
|
||||
],
|
||||
"file_path": "elements/button.sass"
|
||||
}
|
||||
@ -25,13 +25,33 @@
|
||||
"name": "$notification-padding",
|
||||
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$notification-padding-ltr": {
|
||||
"name": "$notification-padding-ltr",
|
||||
"value": "1.25rem 2.5rem 1.25rem 1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$notification-padding-rtl": {
|
||||
"name": "$notification-padding-rtl",
|
||||
"value": "1.25rem 1.5rem 1.25rem 2.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$notification-colors": {
|
||||
"name": "$notification-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$notification-background-color",
|
||||
"$notification-code-background-color",
|
||||
"$notification-radius",
|
||||
"$notification-padding"
|
||||
"$notification-padding",
|
||||
"$notification-padding-ltr",
|
||||
"$notification-padding-rtl",
|
||||
"$notification-colors"
|
||||
],
|
||||
"file_path": "elements/notification.sass"
|
||||
}
|
||||
@ -25,13 +25,21 @@
|
||||
"name": "$progress-indeterminate-duration",
|
||||
"value": "1.5s",
|
||||
"type": "string"
|
||||
},
|
||||
"$progress-colors": {
|
||||
"name": "$progress-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$progress-bar-background-color",
|
||||
"$progress-value-background-color",
|
||||
"$progress-border-radius",
|
||||
"$progress-indeterminate-duration"
|
||||
"$progress-indeterminate-duration",
|
||||
"$progress-colors"
|
||||
],
|
||||
"file_path": "elements/progress.sass"
|
||||
}
|
||||
@ -109,6 +109,13 @@
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(0, 0%, 96%)"
|
||||
},
|
||||
"$table-colors": {
|
||||
"name": "$table-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -129,7 +136,8 @@
|
||||
"$table-row-active-background-color",
|
||||
"$table-row-active-color",
|
||||
"$table-striped-row-even-background-color",
|
||||
"$table-striped-row-even-hover-background-color"
|
||||
"$table-striped-row-even-hover-background-color",
|
||||
"$table-colors"
|
||||
],
|
||||
"file_path": "elements/table.sass"
|
||||
}
|
||||
@ -25,13 +25,21 @@
|
||||
"name": "$tag-delete-margin",
|
||||
"value": "1px",
|
||||
"type": "size"
|
||||
},
|
||||
"$tag-colors": {
|
||||
"name": "$tag-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$tag-background-color",
|
||||
"$tag-color",
|
||||
"$tag-radius",
|
||||
"$tag-delete-margin"
|
||||
"$tag-delete-margin",
|
||||
"$tag-colors"
|
||||
],
|
||||
"file_path": "elements/tag.sass"
|
||||
}
|
||||
@ -63,6 +63,11 @@
|
||||
"name": "$file-name-max-width",
|
||||
"value": "16em",
|
||||
"type": "size"
|
||||
},
|
||||
"$file-colors": {
|
||||
"name": "$file-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -75,7 +80,8 @@
|
||||
"$file-name-border-color",
|
||||
"$file-name-border-style",
|
||||
"$file-name-border-width",
|
||||
"$file-name-max-width"
|
||||
"$file-name-max-width",
|
||||
"$file-colors"
|
||||
],
|
||||
"file_path": "form/file.sass"
|
||||
}
|
||||
@ -14,12 +14,18 @@
|
||||
"name": "$textarea-min-height",
|
||||
"value": "8em",
|
||||
"type": "size"
|
||||
},
|
||||
"$textarea-colors": {
|
||||
"name": "$textarea-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$textarea-padding",
|
||||
"$textarea-max-height",
|
||||
"$textarea-min-height"
|
||||
"$textarea-min-height",
|
||||
"$textarea-colors"
|
||||
],
|
||||
"file_path": "form/input-textarea.sass"
|
||||
}
|
||||
13
docs/_data/variables/form/select.json
Normal file
13
docs/_data/variables/form/select.json
Normal file
@ -0,0 +1,13 @@
|
||||
{
|
||||
"by_name": {
|
||||
"$select-colors": {
|
||||
"name": "$select-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$select-colors"
|
||||
],
|
||||
"file_path": "form/select.sass"
|
||||
}
|
||||
@ -1,5 +1,12 @@
|
||||
{
|
||||
"by_name": {
|
||||
"$form-colors": {
|
||||
"name": "$form-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
},
|
||||
"$input-color": {
|
||||
"name": "$input-color",
|
||||
"value": "$text-strong",
|
||||
@ -130,6 +137,7 @@
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$form-colors",
|
||||
"$input-color",
|
||||
"$input-background-color",
|
||||
"$input-border-color",
|
||||
|
||||
@ -20,12 +20,18 @@
|
||||
"type": "variable",
|
||||
"computed_type": "size",
|
||||
"computed_value": "0.75rem"
|
||||
},
|
||||
"$label-colors": {
|
||||
"name": "$label-colors",
|
||||
"value": "$form-colors",
|
||||
"type": "variable"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$label-color",
|
||||
"$label-weight",
|
||||
"$help-size"
|
||||
"$help-size",
|
||||
"$label-colors"
|
||||
],
|
||||
"file_path": "form/tools.sass"
|
||||
}
|
||||
37
docs/_data/variables/helpers/spacing.json
Normal file
37
docs/_data/variables/helpers/spacing.json
Normal file
@ -0,0 +1,37 @@
|
||||
{
|
||||
"by_name": {
|
||||
"$spacing-shortcuts": {
|
||||
"name": "$spacing-shortcuts",
|
||||
"value": "(\"margin\": \"m\", \"padding\": \"p\")",
|
||||
"type": "string"
|
||||
},
|
||||
"$spacing-directions": {
|
||||
"name": "$spacing-directions",
|
||||
"value": "(\"top\": \"t\", \"right\": \"r\", \"bottom\": \"b\", \"left\": \"l\")",
|
||||
"type": "string"
|
||||
},
|
||||
"$spacing-horizontal": {
|
||||
"name": "$spacing-horizontal",
|
||||
"value": "\"x\"",
|
||||
"type": "string"
|
||||
},
|
||||
"$spacing-vertical": {
|
||||
"name": "$spacing-vertical",
|
||||
"value": "\"y\"",
|
||||
"type": "string"
|
||||
},
|
||||
"$spacing-values": {
|
||||
"name": "$spacing-values",
|
||||
"value": "(\"0\": 0, \"1\": 0.25rem, \"2\": 0.5rem, \"3\": 0.75rem, \"4\": 1rem, \"5\": 1.5rem, \"6\": 3rem)",
|
||||
"type": "string"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$spacing-shortcuts",
|
||||
"$spacing-directions",
|
||||
"$spacing-horizontal",
|
||||
"$spacing-vertical",
|
||||
"$spacing-values"
|
||||
],
|
||||
"file_path": "helpers/spacing.sass"
|
||||
}
|
||||
@ -19,13 +19,21 @@
|
||||
"name": "$hero-body-padding-large",
|
||||
"value": "18rem 1.5rem",
|
||||
"type": "size"
|
||||
},
|
||||
"$hero-colors": {
|
||||
"name": "$hero-colors",
|
||||
"value": "$colors",
|
||||
"type": "variable",
|
||||
"computed_type": "function",
|
||||
"computed_value": "mergeColorMaps((\"white\": ($white, $black), \"black\": ($black, $white), \"light\": ($light, $light-invert), \"dark\": ($dark, $dark-invert), \"primary\": ($primary, $primary-invert, $primary-light, $primary-dark), \"link\": ($link, $link-invert, $link-light, $link-dark), \"info\": ($info, $info-invert, $info-light, $info-dark), \"success\": ($success, $success-invert, $success-light, $success-dark), \"warning\": ($warning, $warning-invert, $warning-light, $warning-dark), \"danger\": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors)"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
"$hero-body-padding",
|
||||
"$hero-body-padding-small",
|
||||
"$hero-body-padding-medium",
|
||||
"$hero-body-padding-large"
|
||||
"$hero-body-padding-large",
|
||||
"$hero-colors"
|
||||
],
|
||||
"file_path": "layout/hero.sass"
|
||||
}
|
||||
@ -311,10 +311,8 @@
|
||||
},
|
||||
"$code": {
|
||||
"name": "$code",
|
||||
"value": "$red",
|
||||
"type": "variable",
|
||||
"computed_type": "color",
|
||||
"computed_value": "hsl(348, 86%, 61%)"
|
||||
"value": "darken($red, 15%)",
|
||||
"type": "compound"
|
||||
},
|
||||
"$code-background": {
|
||||
"name": "$code-background",
|
||||
|
||||
@ -249,6 +249,11 @@
|
||||
"name": "$variable-columns",
|
||||
"value": "true",
|
||||
"type": "boolean"
|
||||
},
|
||||
"$rtl": {
|
||||
"name": "$rtl",
|
||||
"value": "false",
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"list": [
|
||||
@ -301,7 +306,8 @@
|
||||
"$radius-large",
|
||||
"$radius-rounded",
|
||||
"$speed",
|
||||
"$variable-columns"
|
||||
"$variable-columns",
|
||||
"$rtl"
|
||||
],
|
||||
"file_path": "utilities/initial-variables.sass"
|
||||
}
|
||||
@ -21,7 +21,7 @@ $bd-partner-width: 12rem
|
||||
justify-content: space-around
|
||||
justify-content: center
|
||||
margin: 0 auto
|
||||
max-width: (8 * $bd-partner-width)
|
||||
// max-width: (8 * $bd-partner-width)
|
||||
|
||||
.bd-partner-sponsor
|
||||
align-items: stretch
|
||||
@ -120,9 +120,9 @@ $bd-partnrs-4: 1130px
|
||||
width: $bd-partner-width
|
||||
|
||||
+widescreen
|
||||
.bd-partnrs
|
||||
.container
|
||||
max-width: 1536px
|
||||
// .bd-partnrs
|
||||
// .container
|
||||
// max-width: 1536px
|
||||
.bd-partner
|
||||
&.bd-is-carbon
|
||||
margin-left: 3rem
|
||||
|
||||
@ -342,6 +342,7 @@ section {
|
||||
body,
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
|
||||
@ -377,7 +378,7 @@ a:hover {
|
||||
|
||||
code {
|
||||
background-color: whitesmoke;
|
||||
color: #f14668;
|
||||
color: #da1039;
|
||||
font-size: 0.875em;
|
||||
font-weight: normal;
|
||||
padding: 0.25em 0.5em 0.25em;
|
||||
@ -2593,6 +2594,10 @@ fieldset[disabled] .button {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.progress:indeterminate::-ms-fill {
|
||||
animation-name: none;
|
||||
}
|
||||
|
||||
.progress.is-small {
|
||||
height: 0.75rem;
|
||||
}
|
||||
@ -3458,7 +3463,9 @@ fieldset[disabled] .select select:-ms-input-placeholder,
|
||||
|
||||
.checkbox[disabled], .radio[disabled],
|
||||
fieldset[disabled] .checkbox,
|
||||
fieldset[disabled] .radio {
|
||||
fieldset[disabled] .radio,
|
||||
.checkbox input[disabled],
|
||||
.radio input[disabled] {
|
||||
color: #7a7a7a;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@ -5213,7 +5220,7 @@ button.dropdown-item.is-active {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px), print {
|
||||
@media screen and (min-width: 769px) {
|
||||
.modal-content,
|
||||
.modal-card {
|
||||
margin: 0 auto;
|
||||
@ -9155,6 +9162,222 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
.is-flex-direction-row {
|
||||
flex-direction: row !important;
|
||||
}
|
||||
|
||||
.is-flex-direction-row-reverse {
|
||||
flex-direction: row-reverse !important;
|
||||
}
|
||||
|
||||
.is-flex-direction-column {
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.is-flex-direction-column-reverse {
|
||||
flex-direction: column-reverse !important;
|
||||
}
|
||||
|
||||
.is-flex-wrap-nowrap {
|
||||
flex-wrap: nowrap !important;
|
||||
}
|
||||
|
||||
.is-flex-wrap-wrap {
|
||||
flex-wrap: wrap !important;
|
||||
}
|
||||
|
||||
.is-flex-wrap-wrap-reverse {
|
||||
flex-wrap: wrap-reverse !important;
|
||||
}
|
||||
|
||||
.is-justify-content-flex-start {
|
||||
justify-content: flex-start !important;
|
||||
}
|
||||
|
||||
.is-justify-content-flex-end {
|
||||
justify-content: flex-end !important;
|
||||
}
|
||||
|
||||
.is-justify-content-center {
|
||||
justify-content: center !important;
|
||||
}
|
||||
|
||||
.is-justify-content-space-between {
|
||||
justify-content: space-between !important;
|
||||
}
|
||||
|
||||
.is-justify-content-space-around {
|
||||
justify-content: space-around !important;
|
||||
}
|
||||
|
||||
.is-justify-content-space-evenly {
|
||||
justify-content: space-evenly !important;
|
||||
}
|
||||
|
||||
.is-justify-content-start {
|
||||
justify-content: start !important;
|
||||
}
|
||||
|
||||
.is-justify-content-end {
|
||||
justify-content: end !important;
|
||||
}
|
||||
|
||||
.is-justify-content-left {
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.is-justify-content-right {
|
||||
justify-content: right !important;
|
||||
}
|
||||
|
||||
.is-align-content-flex-start {
|
||||
align-content: flex-start !important;
|
||||
}
|
||||
|
||||
.is-align-content-flex-end {
|
||||
align-content: flex-end !important;
|
||||
}
|
||||
|
||||
.is-align-content-center {
|
||||
align-content: center !important;
|
||||
}
|
||||
|
||||
.is-align-content-space-between {
|
||||
align-content: space-between !important;
|
||||
}
|
||||
|
||||
.is-align-content-space-around {
|
||||
align-content: space-around !important;
|
||||
}
|
||||
|
||||
.is-align-content-space-evenly {
|
||||
align-content: space-evenly !important;
|
||||
}
|
||||
|
||||
.is-align-content-stretch {
|
||||
align-content: stretch !important;
|
||||
}
|
||||
|
||||
.is-align-content-start {
|
||||
align-content: start !important;
|
||||
}
|
||||
|
||||
.is-align-content-end {
|
||||
align-content: end !important;
|
||||
}
|
||||
|
||||
.is-align-content-baseline {
|
||||
align-content: baseline !important;
|
||||
}
|
||||
|
||||
.is-align-items-stretch {
|
||||
align-items: stretch !important;
|
||||
}
|
||||
|
||||
.is-align-items-flex-start {
|
||||
align-items: flex-start !important;
|
||||
}
|
||||
|
||||
.is-align-items-flex-end {
|
||||
align-items: flex-end !important;
|
||||
}
|
||||
|
||||
.is-align-items-center {
|
||||
align-items: center !important;
|
||||
}
|
||||
|
||||
.is-align-items-baseline {
|
||||
align-items: baseline !important;
|
||||
}
|
||||
|
||||
.is-align-items-start {
|
||||
align-items: start !important;
|
||||
}
|
||||
|
||||
.is-align-items-end {
|
||||
align-items: end !important;
|
||||
}
|
||||
|
||||
.is-align-items-self-start {
|
||||
align-items: self-start !important;
|
||||
}
|
||||
|
||||
.is-align-items-self-end {
|
||||
align-items: self-end !important;
|
||||
}
|
||||
|
||||
.is-align-self-auto {
|
||||
align-self: auto !important;
|
||||
}
|
||||
|
||||
.is-align-self-flex-start {
|
||||
align-self: flex-start !important;
|
||||
}
|
||||
|
||||
.is-align-self-flex-end {
|
||||
align-self: flex-end !important;
|
||||
}
|
||||
|
||||
.is-align-self-center {
|
||||
align-self: center !important;
|
||||
}
|
||||
|
||||
.is-align-self-baseline {
|
||||
align-self: baseline !important;
|
||||
}
|
||||
|
||||
.is-align-self-stretch {
|
||||
align-self: stretch !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-0 {
|
||||
flex-grow: 0 !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-1 {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-2 {
|
||||
flex-grow: 2 !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-3 {
|
||||
flex-grow: 3 !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-4 {
|
||||
flex-grow: 4 !important;
|
||||
}
|
||||
|
||||
.is-flex-grow-5 {
|
||||
flex-grow: 5 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-0 {
|
||||
flex-shrink: 0 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-1 {
|
||||
flex-shrink: 1 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-2 {
|
||||
flex-shrink: 2 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-3 {
|
||||
flex-shrink: 3 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-4 {
|
||||
flex-shrink: 4 !important;
|
||||
}
|
||||
|
||||
.is-flex-shrink-5 {
|
||||
flex-shrink: 5 !important;
|
||||
}
|
||||
|
||||
.is-clearfix::after {
|
||||
clear: both;
|
||||
content: " ";
|
||||
@ -9177,6 +9400,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.is-clickable {
|
||||
cursor: pointer !important;
|
||||
}
|
||||
|
||||
.is-clipped {
|
||||
overflow: hidden !important;
|
||||
}
|
||||
@ -9193,6 +9420,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.m-0 {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
.mt-0 {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
@ -9219,6 +9450,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.m-1 {
|
||||
margin: 0.25rem !important;
|
||||
}
|
||||
|
||||
.mt-1 {
|
||||
margin-top: 0.25rem !important;
|
||||
}
|
||||
@ -9245,6 +9480,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.m-2 {
|
||||
margin: 0.5rem !important;
|
||||
}
|
||||
|
||||
.mt-2 {
|
||||
margin-top: 0.5rem !important;
|
||||
}
|
||||
@ -9271,6 +9510,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.m-3 {
|
||||
margin: 0.75rem !important;
|
||||
}
|
||||
|
||||
.mt-3 {
|
||||
margin-top: 0.75rem !important;
|
||||
}
|
||||
@ -9297,6 +9540,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.m-4 {
|
||||
margin: 1rem !important;
|
||||
}
|
||||
|
||||
.mt-4 {
|
||||
margin-top: 1rem !important;
|
||||
}
|
||||
@ -9323,6 +9570,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.m-5 {
|
||||
margin: 1.5rem !important;
|
||||
}
|
||||
|
||||
.mt-5 {
|
||||
margin-top: 1.5rem !important;
|
||||
}
|
||||
@ -9349,6 +9600,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.m-6 {
|
||||
margin: 3rem !important;
|
||||
}
|
||||
|
||||
.mt-6 {
|
||||
margin-top: 3rem !important;
|
||||
}
|
||||
@ -9375,6 +9630,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
margin-bottom: 3rem !important;
|
||||
}
|
||||
|
||||
.p-0 {
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.pt-0 {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
@ -9401,6 +9660,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.p-1 {
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
|
||||
.pt-1 {
|
||||
padding-top: 0.25rem !important;
|
||||
}
|
||||
@ -9427,6 +9690,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 0.25rem !important;
|
||||
}
|
||||
|
||||
.p-2 {
|
||||
padding: 0.5rem !important;
|
||||
}
|
||||
|
||||
.pt-2 {
|
||||
padding-top: 0.5rem !important;
|
||||
}
|
||||
@ -9453,6 +9720,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 0.5rem !important;
|
||||
}
|
||||
|
||||
.p-3 {
|
||||
padding: 0.75rem !important;
|
||||
}
|
||||
|
||||
.pt-3 {
|
||||
padding-top: 0.75rem !important;
|
||||
}
|
||||
@ -9479,6 +9750,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 0.75rem !important;
|
||||
}
|
||||
|
||||
.p-4 {
|
||||
padding: 1rem !important;
|
||||
}
|
||||
|
||||
.pt-4 {
|
||||
padding-top: 1rem !important;
|
||||
}
|
||||
@ -9505,6 +9780,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 1rem !important;
|
||||
}
|
||||
|
||||
.p-5 {
|
||||
padding: 1.5rem !important;
|
||||
}
|
||||
|
||||
.pt-5 {
|
||||
padding-top: 1.5rem !important;
|
||||
}
|
||||
@ -9531,6 +9810,10 @@ a.has-text-danger-dark:hover, a.has-text-danger-dark:focus {
|
||||
padding-bottom: 1.5rem !important;
|
||||
}
|
||||
|
||||
.p-6 {
|
||||
padding: 3rem !important;
|
||||
}
|
||||
|
||||
.pt-6 {
|
||||
padding-top: 3rem !important;
|
||||
}
|
||||
@ -15049,7 +15332,6 @@ svg {
|
||||
justify-content: space-around;
|
||||
justify-content: center;
|
||||
margin: 0 auto;
|
||||
max-width: 96rem;
|
||||
}
|
||||
|
||||
.bd-partner-sponsor {
|
||||
@ -15166,9 +15448,6 @@ svg {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1216px) {
|
||||
.bd-partnrs .container {
|
||||
max-width: 1536px;
|
||||
}
|
||||
.bd-partner.bd-is-carbon {
|
||||
margin-left: 3rem;
|
||||
}
|
||||
|
||||
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
112
docs/documentation/elements/block.html
Normal file
112
docs/documentation/elements/block.html
Normal file
@ -0,0 +1,112 @@
|
||||
---
|
||||
title: Block
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: block
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
- elements-block
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
---
|
||||
|
||||
{% capture block_example %}
|
||||
<div class="block">
|
||||
This text is within a <strong>block</strong>.
|
||||
</div>
|
||||
<div class="block">
|
||||
This text is within a <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</div>
|
||||
<div class="block">
|
||||
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture no_block_example %}
|
||||
<div>
|
||||
This text is within a <strong>block</strong>.
|
||||
</div>
|
||||
<div>
|
||||
This text is within a longer <strong>second block</strong>. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean efficitur sit amet massa fringilla egestas. Nullam condimentum luctus turpis.
|
||||
</div>
|
||||
<div>
|
||||
This text is within a <strong>third block</strong>. This block has no margin at the bottom.
|
||||
</div>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture block_css %}
|
||||
.block:not(:last-child) {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>block</code> element is a simple <strong>spacer tool</strong>. It allows <strong>sibling</strong> HTML elements to have a consistent margin between them:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=block_example %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As you can see, the first two blocks have a <code>margin-bottom</code> applied, but <strong>not the third one.</strong>. That is because Bulma applies a space on all blocks, <strong>except the last one</strong>. This means you can use as many blocks as you want, the spacing will only appear <strong>between them</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Without using <code>block</code>, the HTML elements would have no space between them:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/snippet.html content=no_block_example %}
|
||||
|
||||
{% include elements/anchor.html name="One line of CSS" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
As you can see, the CSS of the <code>block</code> is very simple: it applies a <code>margin-bottom</code> on all siblings, <strong>except the last one</strong>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight css %}{{ block_css }}{% endhighlight %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
This prevents the last sibling to add unnecessary space at the bottom.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Already used everywhere in Bulma" %}
|
||||
<div class="content">
|
||||
<p>
|
||||
As a matter of fact, you're <strong>already using</strong> the <code>block</code> without knowing it. The <code>block</code> CSS properties are <strong>shared</strong> across several Bulma elements and components:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li><code>breadcrumb</code></li>
|
||||
<li><code>level</code></li>
|
||||
<li><code>message</code></li>
|
||||
<li><code>pagination</code></li>
|
||||
<li><code>tabs</code></li>
|
||||
<li><code>box</code></li>
|
||||
<li><code>content</code></li>
|
||||
<li><code>notification</code></li>
|
||||
<li><code>other</code></li>
|
||||
<li><code>progress</code></li>
|
||||
<li><code>table</code></li>
|
||||
<li><code>title</code></li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
This is thanks to the <code>@extend %block</code> Sass placeholder feature.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
As a result, no matter which Bulma elements and components you are using, and no matter their order, they will have a <strong>consistent space</strong> between them.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include elements/variables.html type='element' %}
|
||||
@ -11,7 +11,7 @@ breadcrumb:
|
||||
meta:
|
||||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
variables: false
|
||||
---
|
||||
|
||||
{% capture box_example %}
|
||||
|
||||
BIN
docs/images/amis/dfds.png
Normal file
BIN
docs/images/amis/dfds.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.8 KiB |
BIN
docs/images/amis/dfds@2x.png
Normal file
BIN
docs/images/amis/dfds@2x.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
Loading…
Reference in New Issue
Block a user