mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add utilities documentation
This commit is contained in:
Jeremy Thomas
parent
89c5ed1a39
commit
32107ab8dd
@ -2,17 +2,17 @@
|
||||
"by_id": {
|
||||
"home": {
|
||||
"name": "Home",
|
||||
"path": ""
|
||||
"path": "/"
|
||||
},
|
||||
"documentation": {
|
||||
"name": "Documentation",
|
||||
"subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
|
||||
"path": "/documentation"
|
||||
"path": "/documentation/"
|
||||
},
|
||||
"become-sponsor": {
|
||||
"name": "Become a Bulma sponsor",
|
||||
"subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
|
||||
"path": "/become-a-bulma-sponsor"
|
||||
"path": "/become-a-bulma-sponsor/"
|
||||
},
|
||||
"bulma-book": {
|
||||
"name": "The official Bulma book",
|
||||
@ -20,28 +20,28 @@
|
||||
"subtitle": "A step-by-step guide that teaches you how to build a web interface from scratch using Bulma",
|
||||
"icon": "bookmark",
|
||||
"color": "bleeding",
|
||||
"path": "/the-official-bulma-book"
|
||||
"path": "/the-official-bulma-book/"
|
||||
},
|
||||
"overview": {
|
||||
"name": "Overview",
|
||||
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
|
||||
"color": "primary",
|
||||
"icon": "eye",
|
||||
"path": "/documentation/overview"
|
||||
"path": "/documentation/overview/"
|
||||
},
|
||||
"overview-start": {
|
||||
"name": "Start",
|
||||
"subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
|
||||
"color": "danger",
|
||||
"icon": "rocket",
|
||||
"path": "/documentation/overview/start"
|
||||
"path": "/documentation/overview/start/"
|
||||
},
|
||||
"overview-customize": {
|
||||
"name": "Customize",
|
||||
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
|
||||
"color": "purple",
|
||||
"icon": "paint-brush",
|
||||
"path": "/documentation/overview/customize"
|
||||
"path": "/documentation/overview/customize/"
|
||||
},
|
||||
"overview-classes": {
|
||||
"name": "CSS classes",
|
||||
@ -49,98 +49,99 @@
|
||||
"color": "link",
|
||||
"icon_brand": "true",
|
||||
"icon": "css3",
|
||||
"path": "/documentation/overview/classes"
|
||||
"path": "/documentation/overview/classes/"
|
||||
},
|
||||
"overview-modular": {
|
||||
"name": "Modularity",
|
||||
"subtitle": "Just import what you <strong>need</strong>",
|
||||
"color": "success",
|
||||
"icon": "cubes",
|
||||
"path": "/documentation/overview/modular"
|
||||
"path": "/documentation/overview/modular/"
|
||||
},
|
||||
"overview-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"subtitle": "Bulma is a <strong>mobile-first</strong> framework",
|
||||
"color": "primary",
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/overview/responsiveness"
|
||||
"path": "/documentation/overview/responsiveness/"
|
||||
},
|
||||
"overview-variables": {
|
||||
"name": "Variables",
|
||||
"subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
|
||||
"color": "grey",
|
||||
"icon": "cogs",
|
||||
"path": "/documentation/overview/variables"
|
||||
"path": "/documentation/overview/variables/"
|
||||
},
|
||||
"overview-colors": {
|
||||
"name": "Colors",
|
||||
"subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
|
||||
"color": "info",
|
||||
"icon": "tint",
|
||||
"path": "/documentation/overview/colors"
|
||||
"path": "/documentation/overview/colors/"
|
||||
},
|
||||
"utilities": {
|
||||
"name": "Utilities",
|
||||
"subtitle": "Sass tools used by Bulma and available for you",
|
||||
"color": "primary",
|
||||
"icon": "eye",
|
||||
"path": "/documentation/utilities"
|
||||
"icon": "tools",
|
||||
"path": "/documentation/utilities/"
|
||||
},
|
||||
"utilities-functions": {
|
||||
"name": "Functions",
|
||||
"subtitle": "Utility functions to calculate colors and other values",
|
||||
"color": "orange",
|
||||
"icon": "code",
|
||||
"path": "/documentation/utilities/functions"
|
||||
"path": "/documentation/utilities/functions/"
|
||||
},
|
||||
"utilities-mixins": {
|
||||
"name": "Mixins",
|
||||
"subtitle": "Utility mixins for custom elements and responsive helpers",
|
||||
"subtitle": "Utility mixins for custom elements and other CSS helpers",
|
||||
"color": "purple",
|
||||
"icon": "plus",
|
||||
"path": "/documentation/utilities/mixins"
|
||||
"icon": "equals",
|
||||
"path": "/documentation/utilities/mixins/"
|
||||
},
|
||||
"utilities-responsive-mixins": {
|
||||
"name": "Responsive Mixins",
|
||||
"subtitle": "Utility mixins for custom elements and responsive helpers",
|
||||
"name": "Responsive mixins",
|
||||
"subtitle": "Mixins that allows you to define different styles for each screen size",
|
||||
"color": "purple",
|
||||
"icon": "plus",
|
||||
"path": "/documentation/utilities/responsive-mixins"
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/utilities/responsive-mixins/"
|
||||
},
|
||||
"utilities-extends": {
|
||||
"name": "Extends",
|
||||
"subtitle": "Utility mixins for custom elements and responsive helpers",
|
||||
"subtitle": "Sass extends to keep your CSS code DRY",
|
||||
"color": "purple",
|
||||
"icon": "plus",
|
||||
"path": "/documentation/utilities/extends"
|
||||
"icon": "percentage",
|
||||
"path": "/documentation/utilities/extends/"
|
||||
},
|
||||
"utilities-control-mixins": {
|
||||
"name": "Controls",
|
||||
"subtitle": "Utility mixins for custom elements and responsive helpers",
|
||||
"name": "Form Control mixins",
|
||||
"subtitle": "Mixins for Bulma's buttons and form controls",
|
||||
"color": "purple",
|
||||
"icon": "plus",
|
||||
"path": "/documentation/utilities/controls"
|
||||
"icon": "hand-pointer",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/utilities/control-mixins/"
|
||||
},
|
||||
"customize": {
|
||||
"name": "Customize",
|
||||
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
|
||||
"color": "purple",
|
||||
"icon": "paint-brush",
|
||||
"path": "/documentation/customize"
|
||||
"path": "/documentation/customize/"
|
||||
},
|
||||
"customize-concepts": {
|
||||
"name": "Concepts",
|
||||
"subtitle": "What makes Bulma <strong>customizable</strong>",
|
||||
"color": "info",
|
||||
"icon": "lightbulb",
|
||||
"path": "/documentation/customize/concepts"
|
||||
"path": "/documentation/customize/concepts/"
|
||||
},
|
||||
"customize-variables": {
|
||||
"name": "Variables",
|
||||
"subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
|
||||
"color": "grey",
|
||||
"icon": "cogs",
|
||||
"path": "/documentation/customize/variables"
|
||||
"path": "/documentation/customize/variables/"
|
||||
},
|
||||
"customize-node-sass": {
|
||||
"name": "With node-sass",
|
||||
@ -148,7 +149,7 @@
|
||||
"color": "danger",
|
||||
"icon_brand": "true",
|
||||
"icon": "npm",
|
||||
"path": "/documentation/customize/with-node-sass"
|
||||
"path": "/documentation/customize/with-node-sass/"
|
||||
},
|
||||
"customize-sass-cli": {
|
||||
"name": "With Sass CLI",
|
||||
@ -156,7 +157,7 @@
|
||||
"color": "purple",
|
||||
"icon_brand": "true",
|
||||
"icon": "sass",
|
||||
"path": "/documentation/customize/with-sass-cli"
|
||||
"path": "/documentation/customize/with-sass-cli/"
|
||||
},
|
||||
"customize-webpack": {
|
||||
"name": "With webpack",
|
||||
@ -164,195 +165,195 @@
|
||||
"color": "warning",
|
||||
"icon_brand": "true",
|
||||
"icon": "js",
|
||||
"path": "/documentation/customize/with-webpack"
|
||||
"path": "/documentation/customize/with-webpack/"
|
||||
},
|
||||
"modifiers": {
|
||||
"name": "Modifiers",
|
||||
"subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
|
||||
"color": "grey",
|
||||
"icon": "cogs",
|
||||
"path": "/documentation/modifiers"
|
||||
"path": "/documentation/modifiers/"
|
||||
},
|
||||
"overview-modifiers": {
|
||||
"name": "Modifiers syntax",
|
||||
"subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
|
||||
"color": "orange",
|
||||
"icon": "code",
|
||||
"path": "/documentation/overview/modifiers"
|
||||
"path": "/documentation/overview/modifiers/"
|
||||
},
|
||||
"modifiers-helpers": {
|
||||
"name": "Helpers",
|
||||
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style",
|
||||
"color": "danger",
|
||||
"icon": "medkit",
|
||||
"path": "/documentation/modifiers/helpers"
|
||||
"path": "/documentation/modifiers/helpers/"
|
||||
},
|
||||
"modifiers-responsive-helpers": {
|
||||
"name": "Responsive helpers",
|
||||
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
|
||||
"color": "primary",
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/modifiers/responsive-helpers"
|
||||
"path": "/documentation/modifiers/responsive-helpers/"
|
||||
},
|
||||
"modifiers-color-helpers": {
|
||||
"name": "Color helpers",
|
||||
"subtitle": "Change the <strong>color</strong> of the text and/or background",
|
||||
"color": "info",
|
||||
"icon": "tint",
|
||||
"path": "/documentation/modifiers/color-helpers"
|
||||
"path": "/documentation/modifiers/color-helpers/"
|
||||
},
|
||||
"modifiers-typography-helpers": {
|
||||
"name": "Typography helpers",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "font",
|
||||
"path": "/documentation/modifiers/typography-helpers"
|
||||
"path": "/documentation/modifiers/typography-helpers/"
|
||||
},
|
||||
"helpers": {
|
||||
"name": "Helpers",
|
||||
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
|
||||
"color": "danger",
|
||||
"icon": "medkit",
|
||||
"path": "/documentation/helpers"
|
||||
"path": "/documentation/helpers/"
|
||||
},
|
||||
"helpers-color": {
|
||||
"name": "Color",
|
||||
"subtitle": "Change the <strong>color</strong> of the text and/or background",
|
||||
"color": "info",
|
||||
"icon": "tint",
|
||||
"path": "/documentation/helpers/color-helpers"
|
||||
"path": "/documentation/helpers/color-helpers/"
|
||||
},
|
||||
"helpers-typography": {
|
||||
"name": "Typography",
|
||||
"subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
|
||||
"color": "grey-dark",
|
||||
"icon": "font",
|
||||
"path": "/documentation/helpers/typography-helpers"
|
||||
"path": "/documentation/helpers/typography-helpers/"
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "grey-dark",
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/helpers/spacing-helpers"
|
||||
"path": "/documentation/helpers/spacing-helpers/"
|
||||
},
|
||||
"helpers-visibility": {
|
||||
"name": "Visibility",
|
||||
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
|
||||
"color": "primary",
|
||||
"icon": "eye",
|
||||
"path": "/documentation/helpers/visibility-helpers"
|
||||
"path": "/documentation/helpers/visibility-helpers/"
|
||||
},
|
||||
"helpers-flexbox": {
|
||||
"name": "Flexbox",
|
||||
"subtitle": "Helpers for all <strong>Flexbox</strong> properties",
|
||||
"color": "primary",
|
||||
"icon": "ellipsis-h",
|
||||
"path": "/documentation/helpers/flexbox-helpers"
|
||||
"path": "/documentation/helpers/flexbox-helpers/"
|
||||
},
|
||||
"helpers-other": {
|
||||
"name": "Other",
|
||||
"subtitle": "Other useful Bulma helpers",
|
||||
"color": "primary",
|
||||
"icon": "medkit",
|
||||
"path": "/documentation/helpers/other-helpers"
|
||||
"path": "/documentation/helpers/other-helpers/"
|
||||
},
|
||||
"columns": {
|
||||
"name": "Columns",
|
||||
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
|
||||
"color": "star",
|
||||
"icon": "columns",
|
||||
"path": "/documentation/columns"
|
||||
"path": "/documentation/columns/"
|
||||
},
|
||||
"columns-basics": {
|
||||
"name": "Basics",
|
||||
"subtitle": "A simple way to build <strong>responsive columns</strong>",
|
||||
"color": "star",
|
||||
"icon": "columns",
|
||||
"path": "/documentation/columns/basics"
|
||||
"path": "/documentation/columns/basics/"
|
||||
},
|
||||
"columns-sizes": {
|
||||
"name": "Sizes",
|
||||
"subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
|
||||
"color": "success",
|
||||
"icon": "expand-arrows-alt",
|
||||
"path": "/documentation/columns/sizes"
|
||||
"path": "/documentation/columns/sizes/"
|
||||
},
|
||||
"columns-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
|
||||
"color": "primary",
|
||||
"icon": "arrows-alt-h",
|
||||
"path": "/documentation/columns/responsiveness"
|
||||
"path": "/documentation/columns/responsiveness/"
|
||||
},
|
||||
"columns-nesting": {
|
||||
"name": "Nesting",
|
||||
"subtitle": "A simple way to build <strong>responsive columns</strong>",
|
||||
"color": "danger",
|
||||
"icon": "sitemap",
|
||||
"path": "/documentation/columns/nesting"
|
||||
"path": "/documentation/columns/nesting/"
|
||||
},
|
||||
"columns-gap": {
|
||||
"name": "Gap",
|
||||
"subtitle": "Customize the <strong>gap</strong> between the columns",
|
||||
"color": "info",
|
||||
"icon": "pause",
|
||||
"path": "/documentation/columns/gap"
|
||||
"path": "/documentation/columns/gap/"
|
||||
},
|
||||
"columns-options": {
|
||||
"name": "Options",
|
||||
"subtitle": "Design different <strong>types</strong> of column layouts",
|
||||
"color": "grey",
|
||||
"icon": "cogs",
|
||||
"path": "/documentation/columns/options"
|
||||
"path": "/documentation/columns/options/"
|
||||
},
|
||||
"layout": {
|
||||
"name": "Layout",
|
||||
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
|
||||
"color": "success",
|
||||
"icon": "warehouse",
|
||||
"path": "/documentation/layout"
|
||||
"path": "/documentation/layout/"
|
||||
},
|
||||
"layout-container": {
|
||||
"name": "Container",
|
||||
"subtitle": "A simple <strong>container</strong> to center your content horizontally",
|
||||
"path": "/documentation/layout/container",
|
||||
"path": "/documentation/layout/container/",
|
||||
"icon": "arrows-alt-h"
|
||||
},
|
||||
"layout-level": {
|
||||
"name": "Level",
|
||||
"subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
|
||||
"path": "/documentation/layout/level",
|
||||
"path": "/documentation/layout/level/",
|
||||
"icon": "ruler-horizontal"
|
||||
},
|
||||
"layout-media": {
|
||||
"name": "Media Object",
|
||||
"subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
|
||||
"path": "/documentation/layout/media-object",
|
||||
"path": "/documentation/layout/media-object/",
|
||||
"icon": "th-list"
|
||||
},
|
||||
"layout-hero": {
|
||||
"name": "Hero",
|
||||
"subtitle": "An imposing <strong>hero banner</strong> to showcase something",
|
||||
"path": "/documentation/layout/hero",
|
||||
"path": "/documentation/layout/hero/",
|
||||
"icon": "star"
|
||||
},
|
||||
"layout-section": {
|
||||
"name": "Section",
|
||||
"subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
|
||||
"path": "/documentation/layout/section",
|
||||
"path": "/documentation/layout/section/",
|
||||
"icon": "square"
|
||||
},
|
||||
"layout-footer": {
|
||||
"name": "Footer",
|
||||
"subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
|
||||
"path": "/documentation/layout/footer",
|
||||
"path": "/documentation/layout/footer/",
|
||||
"icon": "window-minimize"
|
||||
},
|
||||
"layout-tiles": {
|
||||
"name": "Tiles",
|
||||
"subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
|
||||
"path": "/documentation/layout/tiles",
|
||||
"path": "/documentation/layout/tiles/",
|
||||
"icon": "th"
|
||||
},
|
||||
"form": {
|
||||
@ -361,7 +362,7 @@
|
||||
"color": "link",
|
||||
"icon_brand": "true",
|
||||
"icon": "wpforms",
|
||||
"path": "/documentation/form"
|
||||
"path": "/documentation/form/"
|
||||
},
|
||||
"form-general": {
|
||||
"name": "General",
|
||||
@ -369,63 +370,63 @@
|
||||
"color": "link",
|
||||
"icon": "keyboard",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/form/general"
|
||||
"path": "/documentation/form/general/"
|
||||
},
|
||||
"form-input": {
|
||||
"name": "Input",
|
||||
"subtitle": "The <strong>text input</strong> and its variations",
|
||||
"color": "link",
|
||||
"icon": "minus",
|
||||
"path": "/documentation/form/input"
|
||||
"path": "/documentation/form/input/"
|
||||
},
|
||||
"form-textarea": {
|
||||
"name": "Textarea",
|
||||
"subtitle": "The multiline <strong>textarea</strong> and its variations",
|
||||
"color": "link",
|
||||
"icon": "square",
|
||||
"path": "/documentation/form/textarea"
|
||||
"path": "/documentation/form/textarea/"
|
||||
},
|
||||
"form-select": {
|
||||
"name": "Select",
|
||||
"subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
|
||||
"color": "link",
|
||||
"icon": "mouse-pointer",
|
||||
"path": "/documentation/form/select"
|
||||
"path": "/documentation/form/select/"
|
||||
},
|
||||
"form-checkbox": {
|
||||
"name": "Checkbox",
|
||||
"subtitle": "The 2-state <strong>checkbox</strong> in its native format",
|
||||
"color": "link",
|
||||
"icon": "check-square",
|
||||
"path": "/documentation/form/checkbox"
|
||||
"path": "/documentation/form/checkbox/"
|
||||
},
|
||||
"form-radio": {
|
||||
"name": "Radio",
|
||||
"subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
|
||||
"color": "link",
|
||||
"icon": "dot-circle",
|
||||
"path": "/documentation/form/radio"
|
||||
"path": "/documentation/form/radio/"
|
||||
},
|
||||
"form-file": {
|
||||
"name": "File",
|
||||
"subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
|
||||
"color": "link",
|
||||
"icon": "cloud-upload-alt",
|
||||
"path": "/documentation/form/file"
|
||||
"path": "/documentation/form/file/"
|
||||
},
|
||||
"elements": {
|
||||
"name": "Elements",
|
||||
"subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
|
||||
"color": "orange",
|
||||
"icon": "cube",
|
||||
"path": "/documentation/elements"
|
||||
"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"
|
||||
"path": "/documentation/elements/block/"
|
||||
},
|
||||
"elements-box": {
|
||||
"name": "Box",
|
||||
@ -433,7 +434,7 @@
|
||||
"color": "grey",
|
||||
"icon": "square",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/elements/box"
|
||||
"path": "/documentation/elements/box/"
|
||||
},
|
||||
"elements-button": {
|
||||
"name": "Button",
|
||||
@ -441,104 +442,104 @@
|
||||
"color": "success",
|
||||
"icon": "hand-pointer",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/elements/button"
|
||||
"path": "/documentation/elements/button/"
|
||||
},
|
||||
"elements-content": {
|
||||
"name": "Content",
|
||||
"subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
|
||||
"color": "primary",
|
||||
"icon": "align-left",
|
||||
"path": "/documentation/elements/content"
|
||||
"path": "/documentation/elements/content/"
|
||||
},
|
||||
"elements-delete": {
|
||||
"name": "Delete",
|
||||
"subtitle": "A versatile <strong>delete</strong> cross",
|
||||
"color": "danger",
|
||||
"icon": "times-circle",
|
||||
"path": "/documentation/elements/delete"
|
||||
"path": "/documentation/elements/delete/"
|
||||
},
|
||||
"elements-icon": {
|
||||
"name": "Icon",
|
||||
"subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
|
||||
"icon": "font-awesome",
|
||||
"icon_brand": "true",
|
||||
"path": "/documentation/elements/icon"
|
||||
"path": "/documentation/elements/icon/"
|
||||
},
|
||||
"elements-image": {
|
||||
"name": "Image",
|
||||
"subtitle": "A container for <strong>responsive images</strong>",
|
||||
"color": "purple",
|
||||
"icon": "image",
|
||||
"path": "/documentation/elements/image"
|
||||
"path": "/documentation/elements/image/"
|
||||
},
|
||||
"elements-notification": {
|
||||
"name": "Notification",
|
||||
"subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
|
||||
"color": "orange",
|
||||
"icon": "exclamation-triangle",
|
||||
"path": "/documentation/elements/notification"
|
||||
"path": "/documentation/elements/notification/"
|
||||
},
|
||||
"elements-progress": {
|
||||
"name": "Progress bars",
|
||||
"subtitle": "Native HTML <strong>progress</strong> bars",
|
||||
"color": "warning",
|
||||
"icon": "spinner",
|
||||
"path": "/documentation/elements/progress"
|
||||
"path": "/documentation/elements/progress/"
|
||||
},
|
||||
"elements-table": {
|
||||
"name": "Table",
|
||||
"subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
|
||||
"color": "info",
|
||||
"icon": "table",
|
||||
"path": "/documentation/elements/table"
|
||||
"path": "/documentation/elements/table/"
|
||||
},
|
||||
"elements-tag": {
|
||||
"name": "Tag",
|
||||
"subtitle": "Small <strong>tag labels</strong> to insert anywhere",
|
||||
"color": "success",
|
||||
"icon": "tag",
|
||||
"path": "/documentation/elements/tag"
|
||||
"path": "/documentation/elements/tag/"
|
||||
},
|
||||
"elements-title": {
|
||||
"name": "Title",
|
||||
"subtitle": "Simple <strong>headings</strong> to add depth to your page",
|
||||
"color": "black",
|
||||
"icon": "heading",
|
||||
"path": "/documentation/elements/title"
|
||||
"path": "/documentation/elements/title/"
|
||||
},
|
||||
"components": {
|
||||
"name": "Components",
|
||||
"subtitle": "Advanced multi-part components with lots of possibilities",
|
||||
"color": "danger",
|
||||
"icon": "cubes",
|
||||
"path": "/documentation/components"
|
||||
"path": "/documentation/components/"
|
||||
},
|
||||
"components-breadcrumb": {
|
||||
"name": "Breadcrumb",
|
||||
"subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
|
||||
"color": "star",
|
||||
"icon": "ellipsis-h",
|
||||
"path": "/documentation/components/breadcrumb"
|
||||
"path": "/documentation/components/breadcrumb/"
|
||||
},
|
||||
"components-card": {
|
||||
"name": "Card",
|
||||
"subtitle": "An all-around flexible and composable component",
|
||||
"color": "success",
|
||||
"icon": "id-card",
|
||||
"path": "/documentation/components/card"
|
||||
"path": "/documentation/components/card/"
|
||||
},
|
||||
"components-dropdown": {
|
||||
"name": "Dropdown",
|
||||
"subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
|
||||
"color": "success",
|
||||
"icon": "angle-down",
|
||||
"path": "/documentation/components/dropdown"
|
||||
"path": "/documentation/components/dropdown/"
|
||||
},
|
||||
"components-menu": {
|
||||
"name": "Menu",
|
||||
"subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
|
||||
"icon": "bars",
|
||||
"path": "/documentation/components/menu"
|
||||
"path": "/documentation/components/menu/"
|
||||
},
|
||||
"components-message": {
|
||||
"name": "Message",
|
||||
@ -546,28 +547,28 @@
|
||||
"color": "info",
|
||||
"icon": "window-maximize",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/components/message"
|
||||
"path": "/documentation/components/message/"
|
||||
},
|
||||
"components-modal": {
|
||||
"name": "Modal",
|
||||
"subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
|
||||
"color": "danger",
|
||||
"icon": "clone",
|
||||
"path": "/documentation/components/modal"
|
||||
"path": "/documentation/components/modal/"
|
||||
},
|
||||
"components-navbar": {
|
||||
"name": "Navbar",
|
||||
"subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
|
||||
"color": "primary",
|
||||
"icon": "minus",
|
||||
"path": "/documentation/components/navbar"
|
||||
"path": "/documentation/components/navbar/"
|
||||
},
|
||||
"components-pagination": {
|
||||
"name": "Pagination",
|
||||
"subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
|
||||
"color": "orange",
|
||||
"icon": "caret-square-right",
|
||||
"path": "/documentation/components/pagination"
|
||||
"path": "/documentation/components/pagination/"
|
||||
},
|
||||
"components-panel": {
|
||||
"name": "Panel",
|
||||
@ -575,21 +576,21 @@
|
||||
"color": "grey-dark",
|
||||
"icon": "list-alt",
|
||||
"icon_regular": "true",
|
||||
"path": "/documentation/components/panel"
|
||||
"path": "/documentation/components/panel/"
|
||||
},
|
||||
"components-tabs": {
|
||||
"name": "Tabs",
|
||||
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
|
||||
"color": "purple",
|
||||
"icon": "folder",
|
||||
"path": "/documentation/components/tabs"
|
||||
"path": "/documentation/components/tabs/"
|
||||
},
|
||||
"videos": {
|
||||
"name": "Videos",
|
||||
"color": "success",
|
||||
"icon": "play-circle",
|
||||
"title": "Videos",
|
||||
"path": "/videos"
|
||||
"path": "/videos/"
|
||||
},
|
||||
"blog": {
|
||||
"name": "Blog",
|
||||
@ -597,7 +598,7 @@
|
||||
"subtitle": "Stay updated with new features",
|
||||
"color": "rss",
|
||||
"icon": "rss",
|
||||
"path": "/blog"
|
||||
"path": "/blog/"
|
||||
},
|
||||
"expo": {
|
||||
"name": "Expo",
|
||||
@ -605,7 +606,7 @@
|
||||
"subtitle": "Official Bulma showcase",
|
||||
"icon": "star",
|
||||
"color": "expo",
|
||||
"path": "/expo"
|
||||
"path": "/expo/"
|
||||
},
|
||||
"love": {
|
||||
"name": "Love",
|
||||
@ -613,7 +614,7 @@
|
||||
"subtitle": "Fans of Bulma around the world",
|
||||
"color": "love",
|
||||
"icon": "heart",
|
||||
"path": "/love"
|
||||
"path": "/love/"
|
||||
},
|
||||
"backers": {
|
||||
"id": "backers",
|
||||
@ -621,14 +622,14 @@
|
||||
"title": "Backers",
|
||||
"color": "patreon",
|
||||
"icon": "patreon",
|
||||
"path": "/backers",
|
||||
"path": "/backers/",
|
||||
"icon_brand": true,
|
||||
"subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
|
||||
"description": "Everyone who is supporting Bulma"
|
||||
},
|
||||
"more": {
|
||||
"name": "More",
|
||||
"path": "/more"
|
||||
"path": "/more/"
|
||||
},
|
||||
"bulma-start": {
|
||||
"name": "Bulma start",
|
||||
@ -636,7 +637,7 @@
|
||||
"subtitle": "A tiny npm package to get started",
|
||||
"icon": "rocket",
|
||||
"color": "success",
|
||||
"path": "/bulma-start"
|
||||
"path": "/bulma-start/"
|
||||
},
|
||||
"made-with-bulma": {
|
||||
"name": "Made with Bulma",
|
||||
@ -644,14 +645,14 @@
|
||||
"subtitle": "The official community badge",
|
||||
"icon": "certificate",
|
||||
"color": "warning",
|
||||
"path": "/made-with-bulma"
|
||||
"path": "/made-with-bulma/"
|
||||
},
|
||||
"bootstrap": {
|
||||
"name": "Coming from Bootstrap",
|
||||
"subtitle": "See how Bulma is an alternative to Bootstrap",
|
||||
"icon": "exchange-alt",
|
||||
"color": "bootstrap",
|
||||
"path": "/alternative-to-bootstrap"
|
||||
"path": "/alternative-to-bootstrap/"
|
||||
},
|
||||
"patreon-backers": {
|
||||
"name": "Patreon and GitHub backers",
|
||||
@ -659,7 +660,7 @@
|
||||
"icon_brand": "true",
|
||||
"icon": "patreon",
|
||||
"color": "patreon",
|
||||
"path": "/backers"
|
||||
"path": "/backers/"
|
||||
},
|
||||
"extensions": {
|
||||
"name": "Bulma extensions",
|
||||
@ -667,7 +668,7 @@
|
||||
"subtitle": "Side projects to enhance Bulma",
|
||||
"icon": "plug",
|
||||
"color": "extensions",
|
||||
"path": "/extensions"
|
||||
"path": "/extensions/"
|
||||
}
|
||||
},
|
||||
"navbar": ["videos", "expo", "love", "backers"],
|
||||
|
||||
120
docs/_includes/components/breakpoints-table.html
Normal file
120
docs/_includes/components/breakpoints-table.html
Normal file
@ -0,0 +1,120 @@
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-primary">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-primary">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-primary">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-primary">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-primary">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-primary">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification is-primary">until-widescreen</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification is-primary">until-fullhd</p>
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
1
docs/_includes/elements/snippet-inline.html
Normal file
1
docs/_includes/elements/snippet-inline.html
Normal file
@ -0,0 +1 @@
|
||||
<div class="bd-snippet-inline">{% highlight sass %}{{ include.content }}{% endhighlight %}</div>
|
||||
@ -11,7 +11,7 @@
|
||||
is-active
|
||||
{% endif %}
|
||||
"
|
||||
href="{{ site.url }}{{ link.path }}/">
|
||||
href="{{ site.url }}{{ link.path }}">
|
||||
<span class="icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
||||
@ -20,7 +20,17 @@ route: documentation
|
||||
<button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button>
|
||||
</header>
|
||||
|
||||
<div id="docs" class="bd-docs {% if page.fullwidth %}bd-is-fullwidth{% else %}bd-is-contained{% endif %}">
|
||||
<div
|
||||
id="docs"
|
||||
class="
|
||||
bd-docs
|
||||
{% if page.fullwidth %}
|
||||
bd-is-fullwidth
|
||||
{% else %}
|
||||
bd-is-contained
|
||||
{% endif %}
|
||||
{% if page.fullmain %}bd-is-full-main{% endif %}
|
||||
">
|
||||
<div id="docsNavOverlay" class="bd-docs-overlay"></div>
|
||||
|
||||
<nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}">
|
||||
|
||||
@ -37,6 +37,20 @@
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-snippet-inline {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.25em;
|
||||
vertical-align: bottom;
|
||||
|
||||
.highlight pre {
|
||||
padding: 0.5em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
.button.bd-copy {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
@extend %block;
|
||||
--snippet-spacing: #{$block-spacing};
|
||||
@ -159,7 +173,7 @@
|
||||
&::before {
|
||||
background: linear-gradient(0deg, var(--hl-background), transparent);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
|
||||
9
docs/_sass/components/color.scss
Normal file
9
docs/_sass/components/color.scss
Normal file
@ -0,0 +1,9 @@
|
||||
.bd-color {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
}
|
||||
@ -30,14 +30,14 @@
|
||||
|
||||
pre {
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
padding: 0.25em 0.5em 0.375em;
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-copy {
|
||||
font-size: 0.5em !important;
|
||||
font-size: 0.75em !important;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@ -160,3 +160,27 @@
|
||||
@include ltr-property("margin", 1rem, false);
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.bulma-control-mixin {
|
||||
@include control;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}
|
||||
|
||||
.bulma-control-extend {
|
||||
@extend %control;
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
@ -150,6 +150,16 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-docs.bd-is-full-main {
|
||||
.bd-docs-main {
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
|
||||
.bd-docs-side {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-docs.bd-is-fullwidth {
|
||||
display: block;
|
||||
|
||||
@ -199,7 +209,7 @@
|
||||
&::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
content: "•";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
@ -236,7 +246,7 @@
|
||||
&::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
content: "•";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
|
||||
@ -221,6 +221,7 @@ $navbar-breakpoint: $tablet;
|
||||
@import "./_sass/components/fortyfour";
|
||||
@import "./_sass/components/spacing-table";
|
||||
@import "./_sass/components/survey";
|
||||
@import "./_sass/components/color";
|
||||
|
||||
@import "./_sass/pages/index";
|
||||
@import "./_sass/pages/docs";
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
.file-name, .pagination-previous,
|
||||
.pagination-next,
|
||||
.pagination-link,
|
||||
.pagination-ellipsis {
|
||||
.pagination-ellipsis, .bulma-control-extend {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
@ -29,19 +29,19 @@
|
||||
.file-name:focus, .pagination-previous:focus,
|
||||
.pagination-next:focus,
|
||||
.pagination-link:focus,
|
||||
.pagination-ellipsis:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
|
||||
.pagination-ellipsis:focus, .bulma-control-extend:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
|
||||
.is-focused.file-name, .is-focused.pagination-previous,
|
||||
.is-focused.pagination-next,
|
||||
.is-focused.pagination-link,
|
||||
.is-focused.pagination-ellipsis, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
|
||||
.is-focused.pagination-ellipsis, .is-focused.bulma-control-extend, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
|
||||
.file-name:active, .pagination-previous:active,
|
||||
.pagination-next:active,
|
||||
.pagination-link:active,
|
||||
.pagination-ellipsis:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
|
||||
.pagination-ellipsis:active, .bulma-control-extend:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
|
||||
.is-active.file-name, .is-active.pagination-previous,
|
||||
.is-active.pagination-next,
|
||||
.is-active.pagination-link,
|
||||
.is-active.pagination-ellipsis {
|
||||
.is-active.pagination-ellipsis, .is-active.bulma-control-extend {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@ -49,7 +49,7 @@
|
||||
.file-name[disabled], .pagination-previous[disabled],
|
||||
.pagination-next[disabled],
|
||||
.pagination-link[disabled],
|
||||
.pagination-ellipsis[disabled],
|
||||
.pagination-ellipsis[disabled], .bulma-control-extend[disabled],
|
||||
fieldset[disabled] .button,
|
||||
fieldset[disabled] .input,
|
||||
fieldset[disabled] .textarea,
|
||||
@ -60,7 +60,8 @@ fieldset[disabled] .file-name,
|
||||
fieldset[disabled] .pagination-previous,
|
||||
fieldset[disabled] .pagination-next,
|
||||
fieldset[disabled] .pagination-link,
|
||||
fieldset[disabled] .pagination-ellipsis {
|
||||
fieldset[disabled] .pagination-ellipsis,
|
||||
fieldset[disabled] .bulma-control-extend {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@ -183,7 +184,8 @@ fieldset[disabled] .pagination-ellipsis {
|
||||
}
|
||||
|
||||
.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
-webkit-animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 9999px;
|
||||
border-right-color: transparent;
|
||||
@ -324,7 +326,9 @@ html {
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
text-rendering: optimizeLegibility;
|
||||
text-size-adjust: 100%;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
article,
|
||||
@ -450,6 +454,15 @@ table th {
|
||||
color: #363636;
|
||||
}
|
||||
|
||||
@-webkit-keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spinAround {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
@ -4414,10 +4427,14 @@ div.icon-text {
|
||||
}
|
||||
|
||||
.progress:indeterminate {
|
||||
animation-duration: 1.5s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-name: moveIndeterminate;
|
||||
animation-timing-function: linear;
|
||||
-webkit-animation-duration: 1.5s;
|
||||
animation-duration: 1.5s;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-name: moveIndeterminate;
|
||||
animation-name: moveIndeterminate;
|
||||
-webkit-animation-timing-function: linear;
|
||||
animation-timing-function: linear;
|
||||
background-color: #ededed;
|
||||
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
|
||||
background-position: top left;
|
||||
@ -4449,6 +4466,15 @@ 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;
|
||||
@ -12504,6 +12530,8 @@ label.panel-block:hover {
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
min-height: -webkit-min-content;
|
||||
min-height: -moz-min-content;
|
||||
min-height: min-content;
|
||||
}
|
||||
|
||||
@ -17136,6 +17164,7 @@ 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;
|
||||
}
|
||||
@ -17571,6 +17600,7 @@ 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;
|
||||
}
|
||||
@ -17746,6 +17776,20 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.bd-snippet-inline {
|
||||
display: inline-block;
|
||||
margin-bottom: -0.25em;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.bd-snippet-inline .highlight pre {
|
||||
padding: 0.5em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
.bd-snippet-inline .button.bd-copy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bd-snippet {
|
||||
--snippet-spacing: 1.5rem;
|
||||
font-size: 1rem;
|
||||
@ -17840,7 +17884,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
.bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight::before {
|
||||
background: linear-gradient(0deg, var(--hl-background), transparent);
|
||||
bottom: 0;
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
@ -19076,13 +19120,13 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
|
||||
.bd-var .highlight pre {
|
||||
overflow: visible;
|
||||
padding: 0;
|
||||
padding: 0.25em 0.5em 0.375em;
|
||||
white-space: pre-wrap;
|
||||
white-space: break-spaces;
|
||||
}
|
||||
|
||||
.bd-var .bd-copy {
|
||||
font-size: 0.5em !important;
|
||||
font-size: 0.75em !important;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
@ -19456,6 +19500,16 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.bd-color {
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
|
||||
display: inline-block;
|
||||
float: left;
|
||||
height: 24px;
|
||||
margin-right: 8px;
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
:root {
|
||||
--bd-index-vertical: 1.5rem;
|
||||
--bd-index-gap: 3rem;
|
||||
@ -19687,6 +19741,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
.bd-docs-toggles {
|
||||
display: none;
|
||||
}
|
||||
.bd-docs.bd-is-full-main .bd-docs-main {
|
||||
grid-column: 2 / span 2;
|
||||
}
|
||||
.bd-docs.bd-is-full-main .bd-docs-side {
|
||||
display: none;
|
||||
}
|
||||
.bd-docs.bd-is-fullwidth {
|
||||
display: block;
|
||||
}
|
||||
@ -19730,7 +19790,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
.bd-docs.bd-is-fullwidth .bd-docs-nav:not(:hover) .bd-category a::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
content: "•";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
@ -19765,7 +19825,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
.bd-docs.bd-is-fullwidth .bd-docs-side:not(:hover) .bd-anchors-list li::after {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
content: '•';
|
||||
content: "•";
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
@ -20967,7 +21027,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
--device-md-width: 24px;
|
||||
--device-lg-height: 40px;
|
||||
--device-lg-width: 48px;
|
||||
animation: bdDeviceBounce 3.5s infinite;
|
||||
-webkit-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;
|
||||
@ -21012,6 +21073,44 @@ 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);
|
||||
@ -21050,6 +21149,15 @@ 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);
|
||||
@ -21059,6 +21167,17 @@ 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;
|
||||
@ -21070,6 +21189,17 @@ 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;
|
||||
@ -21082,67 +21212,96 @@ 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 {
|
||||
animation-duration: 500ms;
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.bd-focus-item .title {
|
||||
animation-name: bdSlideDown;
|
||||
-webkit-animation-name: bdSlideDown;
|
||||
animation-name: bdSlideDown;
|
||||
}
|
||||
|
||||
.bd-focus-item .subtitle {
|
||||
animation-name: bdSlideUp;
|
||||
-webkit-animation-name: bdSlideUp;
|
||||
animation-name: bdSlideUp;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(1) .title {
|
||||
animation-delay: 0;
|
||||
-webkit-animation-delay: 0;
|
||||
animation-delay: 0;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(1) .subtitle {
|
||||
animation-delay: 125ms;
|
||||
-webkit-animation-delay: 125ms;
|
||||
animation-delay: 125ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(2) .title {
|
||||
animation-delay: 500ms;
|
||||
-webkit-animation-delay: 500ms;
|
||||
animation-delay: 500ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(2) .subtitle {
|
||||
animation-delay: 625ms;
|
||||
-webkit-animation-delay: 625ms;
|
||||
animation-delay: 625ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(3) .title {
|
||||
animation-delay: 1000ms;
|
||||
-webkit-animation-delay: 1000ms;
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(3) .subtitle {
|
||||
animation-delay: 1125ms;
|
||||
-webkit-animation-delay: 1125ms;
|
||||
animation-delay: 1125ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(4) .title {
|
||||
animation-delay: 1500ms;
|
||||
-webkit-animation-delay: 1500ms;
|
||||
animation-delay: 1500ms;
|
||||
}
|
||||
|
||||
.bd-focus-item:nth-child(4) .subtitle {
|
||||
animation-delay: 1625ms;
|
||||
-webkit-animation-delay: 1625ms;
|
||||
animation-delay: 1625ms;
|
||||
}
|
||||
|
||||
.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
|
||||
animation-name: bdGrow;
|
||||
-webkit-animation-name: bdGrow;
|
||||
animation-name: bdGrow;
|
||||
transform-origin: bottom center;
|
||||
}
|
||||
|
||||
.bd-focus-mobile {
|
||||
animation-delay: 0;
|
||||
-webkit-animation-delay: 0;
|
||||
animation-delay: 0;
|
||||
}
|
||||
|
||||
.bd-focus-tablet {
|
||||
animation-delay: 250ms;
|
||||
-webkit-animation-delay: 250ms;
|
||||
animation-delay: 250ms;
|
||||
}
|
||||
|
||||
.bd-focus-desktop {
|
||||
animation-delay: 500ms;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdCube1 {
|
||||
@ -21157,6 +21316,18 @@ 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);
|
||||
@ -21169,6 +21340,18 @@ 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);
|
||||
@ -21182,24 +21365,42 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
}
|
||||
|
||||
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
|
||||
animation-direction: alternate;
|
||||
animation-duration: 2000ms;
|
||||
animation-iteration-count: infinite;
|
||||
-webkit-animation-direction: alternate;
|
||||
animation-direction: alternate;
|
||||
-webkit-animation-duration: 2000ms;
|
||||
animation-duration: 2000ms;
|
||||
-webkit-animation-iteration-count: infinite;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.bd-focus-cube-1 {
|
||||
animation-delay: 500ms;
|
||||
animation-name: bdCube1;
|
||||
-webkit-animation-delay: 500ms;
|
||||
animation-delay: 500ms;
|
||||
-webkit-animation-name: bdCube1;
|
||||
animation-name: bdCube1;
|
||||
}
|
||||
|
||||
.bd-focus-cube-2 {
|
||||
animation-name: bdCube2;
|
||||
animation-delay: 750ms;
|
||||
-webkit-animation-name: bdCube2;
|
||||
animation-name: bdCube2;
|
||||
-webkit-animation-delay: 750ms;
|
||||
animation-delay: 750ms;
|
||||
}
|
||||
|
||||
.bd-focus-cube-3 {
|
||||
animation-name: bdCube3;
|
||||
animation-delay: 1000ms;
|
||||
-webkit-animation-name: bdCube3;
|
||||
animation-name: bdCube3;
|
||||
-webkit-animation-delay: 1000ms;
|
||||
animation-delay: 1000ms;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bdFadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdFadeIn {
|
||||
@ -21211,6 +21412,17 @@ 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;
|
||||
@ -21222,6 +21434,17 @@ 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;
|
||||
@ -21234,14 +21457,103 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
}
|
||||
|
||||
.bd-focus-css3 {
|
||||
animation-delay: 1000ms;
|
||||
animation-name: bdScaleIn;
|
||||
-webkit-animation-delay: 1000ms;
|
||||
animation-delay: 1000ms;
|
||||
-webkit-animation-name: bdScaleIn;
|
||||
animation-name: bdScaleIn;
|
||||
}
|
||||
|
||||
.bd-focus-github {
|
||||
animation-delay: 1500ms;
|
||||
animation-duration: 1500ms;
|
||||
animation-name: bdJellyPop;
|
||||
-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);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes bdJellyPop {
|
||||
@ -21337,18 +21649,23 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
|
||||
.bd-best-list {
|
||||
align-items: stretch;
|
||||
animation-duration: 93.6s;
|
||||
animation-iteration-count: infinite;
|
||||
animation-timing-function: linear;
|
||||
-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;
|
||||
display: flex;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
animation-name: bdBestCarousel;
|
||||
-webkit-animation-name: bdBestCarousel;
|
||||
animation-name: bdBestCarousel;
|
||||
}
|
||||
|
||||
.bd-best-list:hover {
|
||||
animation-play-state: paused;
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
.bd-best-item {
|
||||
@ -21396,6 +21713,12 @@ 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));
|
||||
@ -22369,7 +22692,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
}
|
||||
|
||||
.bulma-loader-mixin {
|
||||
animation: spinAround 500ms infinite linear;
|
||||
-webkit-animation: spinAround 500ms infinite linear;
|
||||
animation: spinAround 500ms infinite linear;
|
||||
border: 2px solid #dbdbdb;
|
||||
border-radius: 9999px;
|
||||
border-right-color: transparent;
|
||||
@ -22551,3 +22875,54 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
|
||||
margin-left: 1rem;
|
||||
border-radius: 0.25em;
|
||||
}
|
||||
|
||||
.bulma-control-mixin {
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
align-items: center;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 0.375em;
|
||||
box-shadow: none;
|
||||
display: inline-flex;
|
||||
font-size: 1rem;
|
||||
height: 2.5em;
|
||||
justify-content: flex-start;
|
||||
line-height: 1.5;
|
||||
padding-bottom: calc(0.5em - 1px);
|
||||
padding-left: calc(0.75em - 1px);
|
||||
padding-right: calc(0.75em - 1px);
|
||||
padding-top: calc(0.5em - 1px);
|
||||
position: relative;
|
||||
vertical-align: top;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.bulma-control-mixin:focus, .bulma-control-mixin.is-focused, .bulma-control-mixin:active, .bulma-control-mixin.is-active {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.bulma-control-mixin[disabled],
|
||||
fieldset[disabled] .bulma-control-mixin {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.bulma-control-mixin.is-small {
|
||||
border-radius: 2px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.bulma-control-mixin.is-medium {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.bulma-control-mixin.is-large {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.bulma-control-extend {
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=bulma-docs.css.map */
|
||||
2
docs/css/bulma-docs.min.css
vendored
2
docs/css/bulma-docs.min.css
vendored
File diff suppressed because one or more lines are too long
@ -44,7 +44,7 @@ $fullhd-enabled: false
|
||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p>
|
||||
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
@ -52,160 +52,17 @@ $fullhd-enabled: false
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p>
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
{% case breakpoint.id %}
|
||||
{% when 'mobile' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% when 'fullhd' %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
{% else %}
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>={{ breakpoint.id }}-only</code><br>
|
||||
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% if breakpoint.id == 'tablet' %}
|
||||
<li>
|
||||
<code>=touch</code><br>
|
||||
until <code>{{ breakpoint.to }}px</code>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endcase %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
<p>To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification is-success">mobile</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">tablet</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">desktop</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">widescreen</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">fullhd</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">tablet-only</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">desktop-only</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification is-success">widescreen-only</p>
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification is-success">touch</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification is-success">until-widescreen</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification is-success">until-fullhd</p>
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
{% include components/breakpoints-table.html %}
|
||||
|
||||
{% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
To simplify using these breakpoints, Bulma provides <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}
|
||||
|
||||
13
docs/documentation/utilities.html
Normal file
13
docs/documentation/utilities.html
Normal file
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: Utilities
|
||||
layout: documentation
|
||||
doc-tab: utilities
|
||||
hide_tabs: true
|
||||
hide_pagination: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- utilities
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='utilities' %}
|
||||
@ -1,68 +1,130 @@
|
||||
---
|
||||
title: Mixins
|
||||
title: Form Control Mixins
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
doc-tab: utilities
|
||||
doc-subtab: control-mixins
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
- utilities
|
||||
- utilities-control-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 class="content">
|
||||
<p>
|
||||
In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
<code>.button</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.input</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.select</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.file-cta</code>
|
||||
<code>.file-name</code>
|
||||
</li>
|
||||
<li>
|
||||
<code>.pagination-previous</code>
|
||||
<code>.pagination-next</code>
|
||||
<code>.pagination-link</code>
|
||||
<code>.pagination-ellipsis</code>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p>
|
||||
The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-mixin {
|
||||
@include control;
|
||||
background: deeppink;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin %}
|
||||
<button class="bulma-control-mixin">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-mixin %}
|
||||
|
||||
{% include elements/anchor.html name="Sizes" %}
|
||||
|
||||
<div class="content">
|
||||
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p>
|
||||
<p>
|
||||
Controls have a default font size of <code>$size-normal</code> also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-small;" %} with a font size <code>$size-small</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="@include control-large;" %} with a font size <code>$size-large</code>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-mixin {
|
||||
&.is-small {
|
||||
@include control-small;
|
||||
}
|
||||
|
||||
&.is-medium {
|
||||
@include control-medium;
|
||||
}
|
||||
|
||||
&.is-large {
|
||||
@include control-large;
|
||||
}
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-mixin-sizes %}
|
||||
<button class="bulma-control-mixin is-small">
|
||||
Small
|
||||
</button>
|
||||
<button class="bulma-control-mixin">
|
||||
Normal
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-medium">
|
||||
Medium
|
||||
</button>
|
||||
<button class="bulma-control-mixin is-large">
|
||||
Large
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-mixin-sizes %}
|
||||
|
||||
{% include elements/anchor.html name="Control placeholder" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% highlight sass %}.bulma-control-extend {
|
||||
@extend %control;
|
||||
background: mediumblue;
|
||||
color: white;
|
||||
}{% endhighlight %}
|
||||
|
||||
{% capture control-extend %}
|
||||
<button class="bulma-control-extend">
|
||||
My control
|
||||
</button>
|
||||
{% endcapture %}
|
||||
|
||||
{% include elements/snippet.html content=control-extend %}
|
||||
|
||||
@ -1,68 +1,59 @@
|
||||
---
|
||||
title: Mixins
|
||||
title: Extends
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
doc-tab: utilities
|
||||
doc-subtab: extends
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-mixins
|
||||
- utilities
|
||||
- utilities-extends
|
||||
---
|
||||
|
||||
<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>
|
||||
<p>
|
||||
In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
To avoid the repetition, Bulma uses the <code>@extend</code> rule to share code. This rule tells Sass that one selector should inherit the styles of another. <a href="https://sass-lang.com/documentation/at-rules/extend" target="_blank">Learn more about the extend rule</a>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Instead of creating CSS classes that might not be used to be the <strong>source</strong> of the set of styles, Bulma uses Sass <strong>placeholders</strong>:
|
||||
</p>
|
||||
|
||||
<ul>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%control" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%unselectable" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%arrow" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%block" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%delete" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%loader" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%overlay" %}
|
||||
</li>
|
||||
<li>
|
||||
{% include elements/snippet-inline.html content="%reset" %}
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{% assign mixins_link = site.data.links.by_id['utilities-mixins'] %}
|
||||
{% assign controls_link = site.data.links.by_id['utilities-control-mixins'] %}
|
||||
|
||||
<p>
|
||||
Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
---
|
||||
title: Functions
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-tab: utilities
|
||||
doc-subtab: functions
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
- overview-functions
|
||||
- utilities
|
||||
- utilities-functions
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
@ -203,6 +203,7 @@ breadcrumb:
|
||||
<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>
|
||||
@ -252,3 +253,77 @@ breadcrumb:
|
||||
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>
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>color</th>
|
||||
<th>findLightColor</th>
|
||||
<th>findDarkColor</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(171deg, 100%, 41%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(171deg, 100%, 96%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(171deg, 100%, 29%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(229deg 53% 53%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(229deg 52% 96%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(229deg 53% 47%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(153deg 53% 53%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(153deg 52% 96%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(153deg 53% 31%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(44deg 100% 77%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(45deg 100% 96%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(44deg 100% 29%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(348deg 86% 61%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(347deg 90% 96%)" %}
|
||||
</td>
|
||||
<td>
|
||||
{% include elements/color-square.html value="hsl(348deg 86% 43%)" %}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,11 +1,231 @@
|
||||
---
|
||||
title: Mixins
|
||||
title: Responsive Mixins
|
||||
layout: documentation
|
||||
doc-tab: utilities
|
||||
doc-subtab: mixins
|
||||
doc-subtab: responsive-mixins
|
||||
fullmain: true
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- utilities
|
||||
- utilities-responsive-mixins
|
||||
---
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
|
||||
</p>
|
||||
|
||||
<div class="content">
|
||||
By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups. To simplify your development process, the framework provides several <strong>responsive mixins</strong> that you can use to create a <strong>responsive design</strong>:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% capture inc-mobile %}
|
||||
@include mobile {
|
||||
// Styles applied
|
||||
// below $tablet
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-tablet %}
|
||||
@include tablet {
|
||||
// Styles applied
|
||||
// above $tablet
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-tablet-only %}
|
||||
@include tablet-only {
|
||||
// Styles applied
|
||||
// between $tablet
|
||||
// and $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-desktop-only %}
|
||||
@include desktop-only {
|
||||
// Styles applied
|
||||
// between $desktop
|
||||
// and $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-widescreen-only %}
|
||||
@include widescreen-only {
|
||||
// Styles applied
|
||||
// between $widescreen
|
||||
// and $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-desktop %}
|
||||
@include desktop {
|
||||
// Styles applied
|
||||
// above $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-widescreen %}
|
||||
@include widescreen {
|
||||
// Styles applied
|
||||
// above $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-fullhd %}
|
||||
@include fullhd {
|
||||
// Styles applied
|
||||
// above $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-touch %}
|
||||
@include touch {
|
||||
// Styles applied
|
||||
// below $desktop
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-until-widescreen %}
|
||||
@include until-widescreen {
|
||||
// Styles applied
|
||||
// below $widescreen
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture inc-until-fullhd %}
|
||||
@include until {
|
||||
// Styles applied
|
||||
// below $fullhd
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
<div class="table-container">
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th style="width: 20%;">
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-mobile }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="4">
|
||||
{% highlight sass %}{{ inc-tablet }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="3">
|
||||
{% highlight sass %}{{ inc-desktop }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td colspan="2">
|
||||
{% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
<td>
|
||||
{% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
|
||||
</td>
|
||||
<td>
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
{% highlight sass %}{{ inc-touch }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="3">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="3">
|
||||
{% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="2">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
{% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
|
||||
</td>
|
||||
<td colspan="1">
|
||||
<p class="notification">-</p>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user