Add block documentation

This commit is contained in:
Jeremy Thomas 2020-09-17 00:30:49 +01:00
parent 98090feaf8
commit 9e0c9a35db
27 changed files with 597 additions and 33 deletions

View File

@ -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"
}

View File

@ -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"]
}
}

View File

@ -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"

View File

@ -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",

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View File

@ -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"
}

View 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"
}

View File

@ -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",

View File

@ -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"
}

View 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"
}

View File

@ -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"
}

View File

@ -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",

View File

@ -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"
}

View File

@ -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

View File

@ -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;
}

File diff suppressed because one or more lines are too long

View 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' %}

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 25 KiB