Compare commits
No commits in common. "main" and "customizer" have entirely different histories.
main
...
customizer
158 changed files with 35514 additions and 37251 deletions
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
6
.github/PULL_REQUEST_TEMPLATE.md
vendored
|
|
@ -22,10 +22,10 @@ This is a **new feature | improvement | bugfix | documentation fix**.
|
|||
None.
|
||||
|
||||
<!-- BEFORE SUBMITTING YOUR PR, MAKE SURE TO FOLLOW THESE STEPS: -->
|
||||
<!-- 1. Pull the latest `main` branch -->
|
||||
<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
|
||||
<!-- 1. Pull the latest `master` branch -->
|
||||
<!-- 2. Make sure your Sass code is compliant with the [Bulma Sass styleguide](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#bulma-sass-styleguide) -->
|
||||
<!-- 3. Make sure your PR only affects `.sass` or documentation files -->
|
||||
<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/main/.github/CONTRIBUTING.md#try-your-changes). -->
|
||||
<!-- 4. [Try your changes](https://github.com/jgthms/bulma/blob/master/.github/CONTRIBUTING.md#try-your-changes). -->
|
||||
|
||||
<!-- How have you confirmed this feature works? -->
|
||||
<!-- Please explain more than "Yes". -->
|
||||
|
|
|
|||
2
.gitignore
vendored
2
.gitignore
vendored
|
|
@ -6,9 +6,7 @@ npm-debug.log
|
|||
test.css
|
||||
test.css.map
|
||||
test.html
|
||||
test*.html
|
||||
test.sass
|
||||
test.scss
|
||||
test.css
|
||||
test.css.map
|
||||
|
||||
|
|
|
|||
41
CHANGELOG.md
41
CHANGELOG.md
|
|
@ -1,45 +1,7 @@
|
|||
# Bulma Changelog
|
||||
|
||||
## 1.0.3
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
- Fix #3842: restore use of `$easing`, `$radius-rounded` and `$speed` Sass variables
|
||||
- Fix #3920: migrate code to avoid Sass 1.80 deprecation warning of global built-in functions
|
||||
- Fix #3822: Non-minified version of bulma-prefixed was missing
|
||||
- Fix #3805: helper classes were missing prefix
|
||||
|
||||
### Documentation Fixes
|
||||
|
||||
- Fix #3904, #3884: fix website horizontal overflow
|
||||
- Fix #3849: fix Light Mode color swatches in Dark Mode
|
||||
- Fix #3918: broken placeholder images
|
||||
- Fix #3926: broken documentation hero
|
||||
|
||||
## 1.0.2
|
||||
|
||||
### Improvements
|
||||
|
||||
- Smart Grid `is-col-min` now goes up to `32` (Fixes #3829)
|
||||
- Remove need for `is-variable` modifier for Column gaps
|
||||
- You can have a list of radio buttons or checkboxes with the `radios` and `checkboxes` classes respectively
|
||||
- Add `is-max-tablet` modifier to the Container element
|
||||
- Add `currentColor` and `inherit` as possible values for the color and background helpers
|
||||
- The Section can now have a minimum height of `100vh` with the `is-fullheight` modifier
|
||||
- Add more SCSS variables:
|
||||
- `$input-border-style`
|
||||
- `$input-border-width`
|
||||
- `$label-spacing`
|
||||
- `$field-block-spacing`
|
||||
- Add more CSS variables:
|
||||
- `--bulma-input-border-style`
|
||||
- `--bulma-input-border-width`
|
||||
- `--bulma-label-color`
|
||||
- `--bulma-label-spacing`
|
||||
- `--bulma-label-weight`
|
||||
- `--bulma-help-size`
|
||||
- `--bulma-field-block-spacing`
|
||||
|
||||
### Bug fixes
|
||||
|
||||
- Fix #3824: ability to override `$scheme-h`, `$scheme-s`, `$dark-l` and `$light-l` Sass variables
|
||||
|
|
@ -47,9 +9,6 @@
|
|||
- Fix #3743: make sure 12 columns system take up whole width
|
||||
- Fix #3799: restore variable columns
|
||||
- Fix #3846: restore `--bulma-column-gap` CSS variable
|
||||
- Fix #3775: `has-background` helpers should only affect element it's applied to
|
||||
- Fix #3856: Sass nested rule deprecation warning
|
||||
- Fix #3757: restore use of `$navbar-burger-color`
|
||||
|
||||
## 1.0.1
|
||||
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ Feel free to raise an issue or submit a pull request.
|
|||
|
||||
## CSS only
|
||||
|
||||
Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/main/css/bulma.css)
|
||||
Bulma is a **CSS** framework. As such, the sole output is a single CSS file: [bulma.css](https://github.com/jgthms/bulma/blob/master/css/bulma.css)
|
||||
|
||||
You can either use that file, "out of the box", or download the Sass source files to customize the [variables](https://bulma.io/documentation/customize/#docsNav).
|
||||
|
||||
|
|
@ -131,14 +131,12 @@ Browse the [online documentation here.](https://bulma.io/documentation/start/ove
|
|||
| [@angular-bulma](https://quinnjr.github.io/angular-bulma) | [Angular](https://angular.io/) directives and components to use in your Bulma projects |
|
||||
| [Bulma CSS Class Completion](https://github.com/eliutdev/bulma-css-class-completion) | CSS class name completion for the HTML class attribute based on Bulma CSS classes. |
|
||||
| [Crispy-Bulma](https://github.com/ckrybus/crispy-bulma) | Bulma template pack for django-crispy-forms |
|
||||
| [Manifest](https://manifest.build) | Manifest is a lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK |
|
||||
| [CASE](https://case.app) | CASE is Lightweight Backend-as-a-Service with essential features: DB, Admin panel, API, JS SDK |
|
||||
| [Reactive Bulma](https://github.com/NicolasOmar/reactive-bulma) | A component library based on React, Bulma, Typescript and Rollup |
|
||||
|
||||
<p>Browser testing via<br /><a href="https://www.lambdatest.com/" target="_blank"><img src="https://bulma.io/assets/images/amis/lambdatest-logo.png" width="168" height="40" /></a></p>
|
||||
|
||||
## Copyright and license 
|
||||
|
||||
Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/main/LICENSE).
|
||||
Code copyright 2023 Jeremy Thomas. Code released under [the MIT license](https://github.com/jgthms/bulma/blob/master/LICENSE).
|
||||
|
||||
[npm-link]: https://www.npmjs.com/package/bulma
|
||||
[awesome-link]: https://github.com/awesome-css-group/awesome-css
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bulma",
|
||||
"version": "1.0.3",
|
||||
"version": "1.0.0",
|
||||
"homepage": "https://bulma.io",
|
||||
"authors": ["jgthms <bbxdesign@gmail.com>"],
|
||||
"description": "Modern CSS framework based on Flexbox",
|
||||
|
|
|
|||
2
bulma.scss
vendored
2
bulma.scss
vendored
|
|
@ -1,4 +1,4 @@
|
|||
@charset "utf-8";
|
||||
|
||||
/*! bulma.io v1.0.3 | MIT License | github.com/jgthms/bulma */
|
||||
/*! bulma.io v1.0.1 | MIT License | github.com/jgthms/bulma */
|
||||
@use "sass";
|
||||
|
|
|
|||
4390
css/bulma.css
vendored
4390
css/bulma.css
vendored
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
4
css/bulma.min.css
vendored
4
css/bulma.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
4
css/versions/bulma-no-dark-mode.min.css
vendored
4
css/versions/bulma-no-dark-mode.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
4
css/versions/bulma-no-helpers.min.css
vendored
4
css/versions/bulma-no-helpers.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
22878
css/versions/bulma-prefixed.min.css
vendored
22878
css/versions/bulma-prefixed.min.css
vendored
File diff suppressed because one or more lines are too long
1
css/versions/bulma-prefixed.min.css.map
Normal file
1
css/versions/bulma-prefixed.min.css.map
Normal file
File diff suppressed because one or more lines are too long
3
css/versions/bulma-prefixed.min.min.css
vendored
Normal file
3
css/versions/bulma-prefixed.min.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -757,7 +757,7 @@
|
|||
"path": "/documentation/helpers/other-helpers/"
|
||||
}
|
||||
},
|
||||
"navbar": ["docs", "expo", "love", "sponsor"],
|
||||
"navbar": ["docs", "expo", "love", "sponsor", "shop"],
|
||||
"navbar_icons": ["github", "twitter"],
|
||||
"navbar_more": ["made-with-bulma", "backers", "brand", "extensions"],
|
||||
"category_ids": [
|
||||
|
|
|
|||
|
|
@ -1984,9 +1984,9 @@
|
|||
"id": "1161404522331344896",
|
||||
"date": "11:29 PM - 13 Aug 2019",
|
||||
"content": "Bloody hell.... To think that I was using my own simple framework for all of the <a href=\"https://twitter.com/search?q=%23Frontend\">#Frontend</a> <a href=\"https://twitter.com/search?q=%23webdevelopment\">#webdevelopment</a>. Here is a my old login page vs <a href=\"https://twitter.com/search?q=%23bulmaio\">#bulmaio</a> framework... Me so dumb. Why reinvent the wheel? Amazing job <a href=\"https://twitter.com/jgthms\">@jgthms</a> <a href=\"https://twitter.com/search?q=%23CSS\">#CSS</a> <a href=\"https://t.co/X5NnKZxyQq\">pic.twitter.com/X5NnKZxyQq</a>",
|
||||
"fullname": "gebsystems",
|
||||
"username": "gebsystems",
|
||||
"avatar": "https://pbs.twimg.com/profile_images/1713156593137639424/Wwz0i_rj_400x400.jpg",
|
||||
"fullname": "db4you",
|
||||
"username": "db4you2",
|
||||
"avatar": "https://pbs.twimg.com/profile_images/1283183292683038727/wVhp9AQr_normal.jpg",
|
||||
"hearts": 22,
|
||||
"retweets": 4
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
"title": "Bulma: Free, open source, and modern CSS framework based on Flexbox",
|
||||
"description": "Bulma is a free, open source CSS framework based on Flexbox and built with Sass. It's 100% responsive, fully modular, and available for free.",
|
||||
"documentation": "/documentation",
|
||||
"download": "https://github.com/jgthms/bulma/releases/download/1.0.2/bulma-1.0.2.zip",
|
||||
"release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.2",
|
||||
"download": "https://github.com/jgthms/bulma/releases/download/1.0.1/bulma-1.0.1.zip",
|
||||
"release_notes": "https://github.com/jgthms/bulma/releases/tag/1.0.1",
|
||||
"github": "https://github.com/jgthms/bulma",
|
||||
"twitter": "https://twitter.com/jgthms",
|
||||
"version": "1.0.2",
|
||||
"version": "1.0.1",
|
||||
"book_url": "https://bleedingedgepress.com/creating-interfaces-bulma/",
|
||||
"book_amazon": "https://www.amazon.com/Creating-Interfaces-Bulma-Jeremy-Thomas-ebook/dp/B079M1BJG4/",
|
||||
"book_sample": "http://www.bleedingedgepress.com/book_excerpts/01E9D1/creating_interfaces_with_bulma_sample.pdf",
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
},
|
||||
{
|
||||
"name": "card-header-shadow",
|
||||
"value": "0 0.125em 0.25em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n)",
|
||||
"value": "0 0.125em 0.25em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n )",
|
||||
"css-var": "card-header-shadow"
|
||||
},
|
||||
{
|
||||
|
|
@ -138,4 +138,4 @@
|
|||
"value": "var(--bulma-block-spacing)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -99,6 +99,10 @@
|
|||
"name": "modal-card-body-padding",
|
||||
"value": "2rem",
|
||||
"css-var": "modal-card-body-padding"
|
||||
},
|
||||
{
|
||||
"name": "modal-breakpoint",
|
||||
"value": "iv.$tablet"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
|
|
@ -183,4 +187,4 @@
|
|||
"value": "2rem"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -2,17 +2,14 @@
|
|||
"sass-vars": [
|
||||
{
|
||||
"name": "navbar-background-color",
|
||||
"css-var": "navbar-background-color",
|
||||
"value": "var(--bulma-scheme-main)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-box-shadow-size",
|
||||
"css-var": "navbar-box-shadow-size",
|
||||
"value": "0 0.125em 0 0"
|
||||
},
|
||||
{
|
||||
"name": "navbar-box-shadow-color",
|
||||
"css-var": "navbar-box-shadow-color",
|
||||
"value": "var(--bulma-background)"
|
||||
},
|
||||
{
|
||||
|
|
@ -22,145 +19,125 @@
|
|||
},
|
||||
{
|
||||
"name": "navbar-padding-vertical",
|
||||
"css-var": "navbar-padding-vertical",
|
||||
"value": "1rem"
|
||||
},
|
||||
{
|
||||
"name": "navbar-padding-horizontal",
|
||||
"css-var": "navbar-padding-horizontal",
|
||||
"value": "2rem"
|
||||
},
|
||||
{
|
||||
"name": "navbar-z",
|
||||
"css-var": "navbar-z",
|
||||
"value": "30"
|
||||
},
|
||||
{
|
||||
"name": "navbar-fixed-z",
|
||||
"css-var": "navbar-fixed-z",
|
||||
"value": "30"
|
||||
},
|
||||
{
|
||||
"name": "navbar-item-img-max-height",
|
||||
"css-var": "navbar-item-img-max-height",
|
||||
"value": "1.75rem"
|
||||
},
|
||||
{
|
||||
"name": "navbar-burger-color",
|
||||
"css-var": "navbar-burger-color",
|
||||
"value": "var(--bulma-navbar-item-color)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-hover-background-color",
|
||||
"css-var": "navbar-tab-hover-background-color",
|
||||
"value": "transparent"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-hover-border-bottom-color",
|
||||
"css-var": "navbar-tab-hover-border-bottom-color",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-active-color",
|
||||
"css-var": "navbar-tab-active-color",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-active-background-color",
|
||||
"css-var": "navbar-tab-active-background-color",
|
||||
"value": "transparent"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-active-border-bottom-color",
|
||||
"css-var": "navbar-tab-active-border-bottom-color",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-active-border-bottom-style",
|
||||
"css-var": "navbar-tab-active-border-bottom-style",
|
||||
"value": "solid"
|
||||
},
|
||||
{
|
||||
"name": "navbar-tab-active-border-bottom-width",
|
||||
"css-var": "navbar-tab-active-border-bottom-width",
|
||||
"value": "0.1875em"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-background-color",
|
||||
"css-var": "navbar-dropdown-background-color",
|
||||
"value": "var(--bulma-scheme-main)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-border-l",
|
||||
"css-var": "navbar-dropdown-border-l",
|
||||
"value": "var(--bulma-border-l)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-border-color",
|
||||
"css-var": "navbar-dropdown-border-color",
|
||||
"value": "hsl(\n var(--bulma-navbar-h),\n var(--bulma-navbar-s),\n var(--bulma-navbar-dropdown-border-l)\n)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-border-style",
|
||||
"css-var": "navbar-dropdown-border-style",
|
||||
"value": "solid"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-border-width",
|
||||
"css-var": "navbar-dropdown-border-width",
|
||||
"value": "0.125em"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-offset",
|
||||
"css-var": "navbar-dropdown-offset",
|
||||
"value": "-0.25em"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-arrow",
|
||||
"css-var": "navbar-dropdown-arrow",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-radius",
|
||||
"css-var": "navbar-dropdown-radius",
|
||||
"value": "var(--bulma-radius-large)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-z",
|
||||
"css-var": "navbar-dropdown-z",
|
||||
"value": "20"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-boxed-radius",
|
||||
"css-var": "navbar-dropdown-boxed-radius",
|
||||
"value": "var(--bulma-radius-large)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-dropdown-boxed-shadow",
|
||||
"css-var": "navbar-dropdown-boxed-shadow",
|
||||
"value": "0 0.5em 0.5em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n),\n0 0 0 1px hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n)"
|
||||
"value": "0 0.5em 0.5em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n ),\n 0 0 0 1px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n )"
|
||||
},
|
||||
{
|
||||
"name": "navbar-divider-background-l",
|
||||
"css-var": "navbar-divider-background-l",
|
||||
"value": "var(--bulma-background-l)"
|
||||
},
|
||||
{
|
||||
"name": "navbar-divider-height",
|
||||
"css-var": "navbar-divider-height",
|
||||
"value": "0.125em"
|
||||
},
|
||||
{
|
||||
"name": "navbar-bottom-box-shadow-size",
|
||||
"css-var": "navbar-bottom-box-shadow-size",
|
||||
"value": "0 -0.125em 0 0"
|
||||
},
|
||||
{
|
||||
"name": "navbar-breakpoint",
|
||||
"value": "iv.$desktop"
|
||||
},
|
||||
{
|
||||
"name": "navbar-colors",
|
||||
"value": "dv.$colors"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "navbar-height",
|
||||
"css-var": "navbar-height",
|
||||
"value": "3.25rem"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -87,7 +87,7 @@
|
|||
},
|
||||
{
|
||||
"name": "pagination-shadow-inset",
|
||||
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n)",
|
||||
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n )",
|
||||
"css-var": "pagination-shadow-inset"
|
||||
}
|
||||
],
|
||||
|
|
@ -226,7 +226,7 @@
|
|||
},
|
||||
{
|
||||
"name": "pagination-shadow-inset",
|
||||
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n)"
|
||||
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n )"
|
||||
},
|
||||
{
|
||||
"name": "pagination-selected-item-h",
|
||||
|
|
@ -253,4 +253,4 @@
|
|||
"value": "#{$pagination-selected-item-color-l},"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,4 @@
|
|||
{
|
||||
"sass-vars": [],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "block-spacing",
|
||||
"value": "1.5rem"
|
||||
}
|
||||
]
|
||||
}
|
||||
"css-vars": []
|
||||
}
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
},
|
||||
{
|
||||
"name": "box-link-hover-shadow",
|
||||
"value": "0 0.5em 1em -0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.1\n),\n0 0 0 1px var(--bulma-link)",
|
||||
"value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n \"scheme-invert-l\"\n )}, 0.1),\n 0 0 0 1px var(--bulma-link)",
|
||||
"css-var": "box-link-hover-shadow"
|
||||
},
|
||||
{
|
||||
"name": "box-link-active-shadow",
|
||||
"value": "inset 0 1px 2px hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n),\n0 0 0 1px var(--bulma-link)",
|
||||
"value": "inset 0 1px 2px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n ),\n 0 0 0 1px var(--bulma-link)",
|
||||
"css-var": "box-link-active-shadow"
|
||||
}
|
||||
],
|
||||
|
|
@ -59,11 +59,11 @@
|
|||
},
|
||||
{
|
||||
"name": "box-link-hover-shadow",
|
||||
"value": "0 0.5em 1em -0.125em hsla(\nvar(--bulma-scheme-h),\nvar(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1),\n0 0 0 1px var(--bulma-link)"
|
||||
"value": "0 0.5em 1em -0.125em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), #{cv.getVar(\n \"scheme-invert-l\"\n )}, 0.1),\n 0 0 0 1px var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "box-link-active-shadow",
|
||||
"value": "inset 0 1px 2px hsla( var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.2),\n0 0 0 1px var(--bulma-link)"
|
||||
"value": "inset 0 1px 2px\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.2\n ),\n 0 0 0 1px var(--bulma-link)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -148,6 +148,10 @@
|
|||
{
|
||||
"name": "button-colors",
|
||||
"value": "dv.$colors"
|
||||
},
|
||||
{
|
||||
"name": "button-responsive-sizes",
|
||||
"value": "(\n \"mobile\": (\n \"small\": calc(var(--bulma-size-small) * 0.75),\n \"normal\": calc(var(--bulma-size-small) * 0.875),\n \"medium\": var(--bulma-size-small),\n \"large\": var(--bulma-size-normal),\n ),\n \"tablet-only\": (\n \"small\": calc(var(--bulma-size-small) * 0.875),\n \"normal\": var(--bulma-size-small),\n \"medium\": var(--bulma-size-normal),\n \"large\": var(--bulma-size-medium),\n ),\n)"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
|
|
@ -268,4 +272,4 @@
|
|||
"value": "var(--bulma-border)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,21 +1,4 @@
|
|||
{
|
||||
"sass-vars": [],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "delete-dimensions",
|
||||
"value": "1.25rem"
|
||||
},
|
||||
{
|
||||
"name": "delete-background-l",
|
||||
"value": "0%"
|
||||
},
|
||||
{
|
||||
"name": "delete-background-alpha",
|
||||
"value": "0.5"
|
||||
},
|
||||
{
|
||||
"name": "delete-color",
|
||||
"value": "var(--bulma-white)"
|
||||
}
|
||||
]
|
||||
}
|
||||
"css-vars": []
|
||||
}
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
},
|
||||
{
|
||||
"name": "table-striped-row-even-hover-background-color",
|
||||
"value": "var(--bulma-scheme-main-ter)",
|
||||
"value": "cv.getVar(\n \"scheme-main-ter\"\n)",
|
||||
"css-var": "table-striped-row-even-hover-background-color"
|
||||
},
|
||||
{
|
||||
|
|
@ -187,4 +187,4 @@
|
|||
"value": "cv.getVar(\n \"scheme-main-ter\"\n)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +36,10 @@
|
|||
"name": "file-name-max-width",
|
||||
"value": "16em",
|
||||
"css-var": "file-name-max-width"
|
||||
},
|
||||
{
|
||||
"name": "file-colors",
|
||||
"value": "shared.$form-colors"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
|
|
@ -120,4 +124,4 @@
|
|||
"value": "#{$file-active-color-l-delta},"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
{
|
||||
"sass-vars": [
|
||||
{
|
||||
"name": "control-radius",
|
||||
"value": "var(--bulma-radius)",
|
||||
"css-var": "control-radius"
|
||||
},
|
||||
{
|
||||
"name": "control-radius-small",
|
||||
"value": "var(--bulma-radius-small)",
|
||||
"css-var": "control-radius-small"
|
||||
},
|
||||
{
|
||||
"name": "control-border-width",
|
||||
"value": "1px",
|
||||
"css-var": "control-border-width"
|
||||
},
|
||||
{
|
||||
"name": "control-size",
|
||||
"value": "var(--bulma-size-normal)",
|
||||
"css-var": "control-size"
|
||||
},
|
||||
{
|
||||
"name": "control-height",
|
||||
"value": "2.5em",
|
||||
"css-var": "control-height"
|
||||
},
|
||||
{
|
||||
"name": "control-line-height",
|
||||
"value": "1.5",
|
||||
"css-var": "control-line-height"
|
||||
},
|
||||
{
|
||||
"name": "control-padding-vertical",
|
||||
"value": "calc(0.5em - 1px)",
|
||||
"css-var": "control-padding-vertical"
|
||||
},
|
||||
{
|
||||
"name": "control-padding-horizontal",
|
||||
"value": "calc(0.75em - 1px)",
|
||||
"css-var": "control-padding-horizontal"
|
||||
},
|
||||
{
|
||||
"name": "control-focus-shadow-l",
|
||||
"value": "50%",
|
||||
"css-var": "control-focus-shadow-l"
|
||||
},
|
||||
{
|
||||
"name": "label-color",
|
||||
"css-var": "label-color",
|
||||
"value": "var(--bulma-text-strong)"
|
||||
},
|
||||
{
|
||||
"name": "label-weight",
|
||||
"css-var": "label-weight",
|
||||
"value": "var(--bulma-weight-semibold)"
|
||||
},
|
||||
{
|
||||
"name": "help-size",
|
||||
"css-var": "help-size",
|
||||
"value": "var(--bulma-size-small)"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "input-h",
|
||||
"value": "var(--bulma-scheme-h)"
|
||||
},
|
||||
{
|
||||
"name": "input-s",
|
||||
"value": "var(--bulma-scheme-s)"
|
||||
},
|
||||
{
|
||||
"name": "input-l",
|
||||
"value": "var(--bulma-scheme-main-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l",
|
||||
"value": "var(--bulma-border-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l-delta",
|
||||
"value": "0%"
|
||||
},
|
||||
{
|
||||
"name": "input-hover-border-l-delta",
|
||||
"value": "var(--bulma-hover-border-l-delta)"
|
||||
},
|
||||
{
|
||||
"name": "input-active-border-l-delta",
|
||||
"value": "var(--bulma-active-border-l-delta)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-h",
|
||||
"value": "var(--bulma-focus-h)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-s",
|
||||
"value": "var(--bulma-focus-s)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-l",
|
||||
"value": "var(--bulma-focus-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-size",
|
||||
"value": "var(--bulma-focus-shadow-size)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-alpha",
|
||||
"value": "var(--bulma-focus-shadow-alpha)"
|
||||
},
|
||||
{
|
||||
"name": "input-color-l",
|
||||
"value": "var(--bulma-text-strong-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l",
|
||||
"value": "var(--bulma-scheme-main-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l-delta",
|
||||
"value": "0%"
|
||||
},
|
||||
{
|
||||
"name": "input-height",
|
||||
"value": "var(--bulma-control-height)"
|
||||
},
|
||||
{
|
||||
"name": "input-shadow",
|
||||
"value": "inset 0 0.0625em 0.125em\n hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n )"
|
||||
},
|
||||
{
|
||||
"name": "input-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-color",
|
||||
"value": "var(--bulma-text-weak)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-background-color",
|
||||
"value": "var(--bulma-background)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-border-color",
|
||||
"value": "var(--bulma-background)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)"
|
||||
},
|
||||
{
|
||||
"name": "input-arrow",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-color",
|
||||
"value": "var(--bulma-text-light)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-hover-color",
|
||||
"value": "var(--bulma-text-weak)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-focus-color",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "input-radius",
|
||||
"value": "var(--bulma-radius)"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,249 +0,0 @@
|
|||
{
|
||||
"sass-vars": [
|
||||
{
|
||||
"name": "input-h",
|
||||
"value": "var(--bulma-scheme-h)",
|
||||
"css-var": "input-h"
|
||||
},
|
||||
{
|
||||
"name": "input-s",
|
||||
"value": "var(--bulma-scheme-s)",
|
||||
"css-var": "input-s"
|
||||
},
|
||||
{
|
||||
"name": "input-l",
|
||||
"value": "var(--bulma-scheme-main-l)",
|
||||
"css-var": "input-l"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l",
|
||||
"value": "var(--bulma-border-l)",
|
||||
"css-var": "input-border-l"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l-delta",
|
||||
"value": "0%",
|
||||
"css-var": "input-border-l-delta"
|
||||
},
|
||||
{
|
||||
"name": "input-hover-border-l-delta",
|
||||
"value": "var(--bulma-hover-border-l-delta)",
|
||||
"css-var": "input-hover-border-l-delta"
|
||||
},
|
||||
{
|
||||
"name": "input-active-border-l-delta",
|
||||
"value": "var(--bulma-active-border-l-delta)",
|
||||
"css-var": "input-active-border-l-delta"
|
||||
},
|
||||
{
|
||||
"name": "input-color-l",
|
||||
"value": "var(--bulma-text-strong-l)",
|
||||
"css-var": "input-color-l"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l",
|
||||
"value": "var(--bulma-scheme-main-l)",
|
||||
"css-var": "input-background-l"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l-delta",
|
||||
"value": "0%",
|
||||
"css-var": "input-background-l-delta"
|
||||
},
|
||||
{
|
||||
"name": "input-height",
|
||||
"value": "var(--bulma-control-height)",
|
||||
"css-var": "input-height"
|
||||
},
|
||||
{
|
||||
"name": "input-shadow",
|
||||
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n)",
|
||||
"css-var": "input-shadow"
|
||||
},
|
||||
{
|
||||
"name": "input-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)",
|
||||
"css-var": "input-placeholder-color"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-h",
|
||||
"value": "var(--bulma-focus-h)",
|
||||
"css-var": "input-focus-h"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-s",
|
||||
"value": "var(--bulma-focus-s)",
|
||||
"css-var": "input-focus-s"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-l",
|
||||
"value": "var(--bulma-focus-l)",
|
||||
"css-var": "input-focus-l"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-size",
|
||||
"value": "var(--bulma-focus-shadow-size)",
|
||||
"css-var": "input-focus-shadow-size"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-alpha",
|
||||
"value": "var(--bulma-focus-shadow-alpha)",
|
||||
"css-var": "input-focus-shadow-alpha"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-color",
|
||||
"value": "var(--bulma-text-weak)",
|
||||
"css-var": "input-disabled-color"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-background-color",
|
||||
"value": "var(--bulma-background)",
|
||||
"css-var": "input-disabled-background-color"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-border-color",
|
||||
"value": "var(--bulma-background)",
|
||||
"css-var": "input-disabled-border-color"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)",
|
||||
"css-var": "input-disabled-placeholder-color"
|
||||
},
|
||||
{
|
||||
"name": "input-arrow",
|
||||
"value": "var(--bulma-link)",
|
||||
"css-var": "input-arrow"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-color",
|
||||
"value": "var(--bulma-text-light)",
|
||||
"css-var": "input-icon-color"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-hover-color",
|
||||
"value": "var(--bulma-text-weak)",
|
||||
"css-var": "input-icon-hover-color"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-focus-color",
|
||||
"value": "var(--bulma-link)",
|
||||
"css-var": "input-icon-focus-color"
|
||||
},
|
||||
{
|
||||
"name": "input-radius",
|
||||
"value": "var(--bulma-radius)",
|
||||
"css-var": "input-radius"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "input-h",
|
||||
"value": "var(--bulma-scheme-h)"
|
||||
},
|
||||
{
|
||||
"name": "input-s",
|
||||
"value": "var(--bulma-scheme-s)"
|
||||
},
|
||||
{
|
||||
"name": "input-l",
|
||||
"value": "var(--bulma-scheme-main-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l",
|
||||
"value": "var(--bulma-border-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l-delta",
|
||||
"value": "0%"
|
||||
},
|
||||
{
|
||||
"name": "input-hover-border-l-delta",
|
||||
"value": "var(--bulma-hover-border-l-delta)"
|
||||
},
|
||||
{
|
||||
"name": "input-active-border-l-delta",
|
||||
"value": "var(--bulma-active-border-l-delta)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-h",
|
||||
"value": "var(--bulma-focus-h)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-s",
|
||||
"value": "var(--bulma-focus-s)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-l",
|
||||
"value": "var(--bulma-focus-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-size",
|
||||
"value": "var(--bulma-focus-shadow-size)"
|
||||
},
|
||||
{
|
||||
"name": "input-focus-shadow-alpha",
|
||||
"value": "var(--bulma-focus-shadow-alpha)"
|
||||
},
|
||||
{
|
||||
"name": "input-color-l",
|
||||
"value": "var(--bulma-text-strong-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l",
|
||||
"value": "var(--bulma-scheme-main-l)"
|
||||
},
|
||||
{
|
||||
"name": "input-background-l-delta",
|
||||
"value": "0%"
|
||||
},
|
||||
{
|
||||
"name": "input-height",
|
||||
"value": "var(--bulma-control-height)"
|
||||
},
|
||||
{
|
||||
"name": "input-shadow",
|
||||
"value": "inset 0 0.0625em 0.125em hsla(\n var(--bulma-scheme-h),\n var(--bulma-scheme-s),\n var(--bulma-scheme-invert-l),\n 0.05\n)"
|
||||
},
|
||||
{
|
||||
"name": "input-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-strong-l),\n 0.3\n)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-color",
|
||||
"value": "var(--bulma-text-weak)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-background-color",
|
||||
"value": "var(--bulma-background)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-border-color",
|
||||
"value": "var(--bulma-background)"
|
||||
},
|
||||
{
|
||||
"name": "input-disabled-placeholder-color",
|
||||
"value": "hsla(\n var(--bulma-text-h),\n var(--bulma-text-s),\n var(--bulma-text-weak-l),\n 0.3\n)"
|
||||
},
|
||||
{
|
||||
"name": "input-arrow",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-color",
|
||||
"value": "var(--bulma-text-light)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-hover-color",
|
||||
"value": "var(--bulma-text-weak)"
|
||||
},
|
||||
{
|
||||
"name": "input-icon-focus-color",
|
||||
"value": "var(--bulma-link)"
|
||||
},
|
||||
{
|
||||
"name": "input-radius",
|
||||
"value": "var(--bulma-radius)"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
{
|
||||
"sass-vars": [
|
||||
{
|
||||
"name": "textarea-padding",
|
||||
"css-var": "textarea-padding",
|
||||
"value": "var(--bulma-control-padding-horizontal)"
|
||||
},
|
||||
{
|
||||
"name": "textarea-max-height",
|
||||
"css-var": "textarea-max-height",
|
||||
"value": "40em"
|
||||
},
|
||||
{
|
||||
"name": "textarea-min-height",
|
||||
"css-var": "textarea-min-height",
|
||||
"value": "8em"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
{
|
||||
"name": "input-h",
|
||||
"value": "#{cv.getVar(\"scheme-h\")},"
|
||||
},
|
||||
{
|
||||
"name": "input-s",
|
||||
"value": "#{cv.getVar(\"scheme-s\")},"
|
||||
},
|
||||
{
|
||||
"name": "input-border-style",
|
||||
"value": "solid,"
|
||||
},
|
||||
{
|
||||
"name": "input-border-width",
|
||||
"value": "1px,"
|
||||
},
|
||||
{
|
||||
"name": "input-border-l",
|
||||
"value": "#{cv.getVar(\"border-l\")},"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -2,14 +2,12 @@
|
|||
"sass-vars": [
|
||||
{
|
||||
"name": "container-offset",
|
||||
"css-var": "container-offset",
|
||||
"value": "64px"
|
||||
"value": "2 * iv.$gap"
|
||||
},
|
||||
{
|
||||
"name": "container-max-width",
|
||||
"css-var": "container-max-width",
|
||||
"value": "1408px"
|
||||
"value": "iv.$fullhd"
|
||||
}
|
||||
],
|
||||
"css-vars": []
|
||||
}
|
||||
}
|
||||
|
|
@ -26,19 +26,8 @@
|
|||
"css-var": "hero-body-padding-large"
|
||||
},
|
||||
{
|
||||
"name": "hero-gradient-h-offset",
|
||||
"value": "5deg",
|
||||
"css-var": "hero-gradient-h-offset"
|
||||
},
|
||||
{
|
||||
"name": "hero-gradient-s-offset",
|
||||
"value": "10%",
|
||||
"css-var": "hero-gradient-s-offset"
|
||||
},
|
||||
{
|
||||
"name": "hero-gradient-l-offset",
|
||||
"value": "5%",
|
||||
"css-var": "hero-gradient-l-offset:"
|
||||
"name": "hero-colors",
|
||||
"value": "dv.$colors"
|
||||
}
|
||||
],
|
||||
"css-vars": [
|
||||
|
|
@ -63,4 +52,4 @@
|
|||
"value": "18rem 6rem"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -6,4 +6,4 @@
|
|||
}
|
||||
],
|
||||
"css-vars": []
|
||||
}
|
||||
}
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<span class="bd-color" style="background: currentColor"></span>
|
||||
<code>currentColor</code>
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
<span class="bd-color" style="background: inherit"></span>
|
||||
<code>inherit</code>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<div
|
||||
{% if include.unsplash %}
|
||||
class="bd-logos-item"
|
||||
style="background-image: url(/assets/images/unsplash/{{ include.unsplash }}.jpg)"
|
||||
style="background-image: url(https://source.unsplash.com/{{ include.unsplash }}/480x480)"
|
||||
{% else %}
|
||||
class="bd-logos-item is-transparent"
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,8 @@
|
|||
{% assign subtab = include.subtab | default: page.doc-subtab %}
|
||||
{% assign data = include.data | default: site.data.variables[tab][subtab] %}
|
||||
{% assign sass_vars = include.data | default: data["sass-vars"] %}
|
||||
{% assign sass_vars_size = sass_vars | size %}
|
||||
{% assign css_vars = include.data | default: data["css-vars"] %}
|
||||
{% assign css_vars_size = css_vars | size %}
|
||||
|
||||
{% if sass_vars_size > 0 or css_vars_size > 0 %}
|
||||
{% include docs/elements/anchor.html name="Sass and CSS variables" %}
|
||||
|
||||
{% if sass_vars_size > 0 %}
|
||||
<div class="bd-vars-table block table-container">
|
||||
<table>
|
||||
<thead>
|
||||
|
|
@ -20,7 +14,7 @@
|
|||
<span>Sass Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
{% unless include.hide_css_vars or page.meta.hide_css_vars %}
|
||||
{% unless include.hide_css_vars %}
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-link"><i class="fab fa-css3"></i></span>
|
||||
|
|
@ -42,7 +36,7 @@
|
|||
{% unless sass_var["value"] == "dv.$colors" %}
|
||||
<tr>
|
||||
<td class="bd-theme-sass">{% highlight sass %}${{ sass_var["name"] }}{% endhighlight %}</td>
|
||||
{% unless include.hide_css_vars or page.meta.hide_css_vars %}
|
||||
{% unless include.hide_css_vars %}
|
||||
<td class="bd-theme-code">{% highlight css %}var(--bulma-{{ sass_var["css-var"] }}){% endhighlight %}</td>
|
||||
{% endunless %}
|
||||
<td class="bd-theme-docs">{% highlight css %}{{ sass_var["value"] }}{% endhighlight %}</td>
|
||||
|
|
@ -52,35 +46,3 @@
|
|||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% elsif css_vars_size > 0 %}
|
||||
<div class="bd-vars-table block table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-link"><i class="fab fa-css3"></i></span>
|
||||
<span>CSS Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-success"><i class="fas fa-code"></i></span>
|
||||
<span>Value</span>
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
<tbody>
|
||||
{% for css_var in css_vars %}
|
||||
<tr>
|
||||
<td class="bd-theme-sass">{% highlight sass %}var(--bulma-{{ css_var["name"] }}){% endhighlight %}</td>
|
||||
<td class="bd-theme-docs">{% highlight css %}{{ css_var["value"] }}{% endhighlight %}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -33,13 +33,13 @@
|
|||
|
||||
<ul class="bd-tw-actions">
|
||||
<li class="bd-tw-action is-reply">
|
||||
<a class="bd-tw-action-link" href="https://x.com/intent/tweet?in_reply_to={{ tweet.id }}">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="bd-tw-action is-retweet">
|
||||
<a class="bd-tw-action-link" href="https://x.com/intent/retweet?tweet_id={{ tweet.id }}">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.retweets != 0 %}
|
||||
<span class="bd-tw-action-stat">
|
||||
|
|
@ -50,7 +50,7 @@
|
|||
</li>
|
||||
|
||||
<li class="bd-tw-action is-heart">
|
||||
<a class="bd-tw-action-link" href="https://x.com/intent/like?tweet_id={{ tweet.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ tweet.id }}&tw_p=tweetembed" target="_blank">
|
||||
<a class="bd-tw-action-link" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&ref_src=twsrc%5Etfw&ref_url=http%3A%2F%2Fbulma.io%2F&original_referer=http%3A%2F%2Fbulma.io%2F&tw_i={{ tweet.id }}&tw_p=tweetembed" target="_blank">
|
||||
<div class="bd-tw-icon"></div>
|
||||
{% if tweet.hearts != 0 %}
|
||||
<span class="bd-tw-action-stat">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
{% if include.prints %}
|
||||
<div class="bd-hero-prints">
|
||||
{% for print in include.prints %}
|
||||
<a class="bd-hero-print icon-text" href="{{ print.url }}" target="_blank">
|
||||
<a class="bd-hero-print icon-text">
|
||||
<span class="icon">
|
||||
<i class="{{ print.icon }}"></i>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -63,5 +63,3 @@
|
|||
{% include docs/menu-list.html category_id="helpers" %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include docs/side-sponsr.html %}
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
<div class="bd-side-sponsrs">
|
||||
<p class="bd-side-sponsor-label">Sponsor</p>
|
||||
<p class="bd-side-sponsor-label">Sponsors</p>
|
||||
|
||||
<a class="bd-side-sponsor" href="https://www.route4me.com/" target="_blank">
|
||||
<a class="bd-side-sponsor" href="https://password.link/" target="_blank">
|
||||
{%
|
||||
include docs/elements/responsive-image.html
|
||||
path="amis/route4me"
|
||||
path="amis/passwordlink"
|
||||
extension="png"
|
||||
alt="Route Planner and Route Optimizer"
|
||||
width="224"
|
||||
height="57"
|
||||
alt="Password.link"
|
||||
width="332"
|
||||
height="96"
|
||||
%}
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
{% assign link = site.data.links.by_id[include.link_id] %} {% assign cleanpath =
|
||||
link.path | remove: '/' %}
|
||||
{% assign link = site.data.links.by_id[include.link_id] %}
|
||||
{% assign cleanpath = link.path | remove: '/' %}
|
||||
|
||||
<a
|
||||
class="
|
||||
|
|
@ -17,30 +17,28 @@ link.path | remove: '/' %}
|
|||
{% endif %}
|
||||
"
|
||||
title="{{ link.subtitle | strip_html }}"
|
||||
{%
|
||||
if
|
||||
link.href
|
||||
%}
|
||||
href="{{ link.href }}"
|
||||
target="_blank"
|
||||
{%
|
||||
else
|
||||
%}
|
||||
href="{{ site.url }}{{ link.path }}"
|
||||
{%
|
||||
endif
|
||||
%}
|
||||
{% if link.href %}
|
||||
href="{{ link.href }}"
|
||||
target="_blank"
|
||||
{% else %}
|
||||
href="{{ site.url }}{{ link.path }}"
|
||||
{% endif %}
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="{{ link.icon }}"></i>
|
||||
</span>
|
||||
|
||||
{% unless link.icon_only %}
|
||||
<span class="bd-nav-item-name">
|
||||
{% if link.long_name %}
|
||||
<span class="is-hidden-fullhd">{{ link.name }}</span>
|
||||
<span class="is-hidden is-block-fullhd">{{ link.long_name }}</span>
|
||||
{% else %} {{ link.name }} {% endif %}
|
||||
</span>
|
||||
<span class="bd-nav-item-name">
|
||||
{% if link.long_name %}
|
||||
<span class="is-hidden-fullhd">{{ link.name }}</span>
|
||||
<span class="is-hidden is-block-fullhd">{{ link.long_name }}</span>
|
||||
{% else %}
|
||||
{{ link.name }}
|
||||
{% endif %}
|
||||
{% if include.link_id == "shop" %}
|
||||
<span class="tag is-success ml-1">New!</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
{% endunless %}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -23,14 +23,6 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-footer-donation column">
|
||||
<p class="bd-footer-donation-title"><strong>Browser testing</strong> via</p>
|
||||
<div class="bd-footer-donation-action">
|
||||
<a class="bd-hidden-dark" href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/support/img/logo.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
|
||||
<a class="bd-hidden-light" href="https://www.lambdatest.com/" target="_blank"><img src="https://www.lambdatest.com/resources/images/logo-white.svg" style="vertical-align: middle;margin-left:5px" width="147" height="26" /></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if site.data.sponsors.footer.size > 0 %}
|
||||
<div class="bd-footer-donation column">
|
||||
<p class="bd-footer-donation-title">Visit our <strong>Sponsors</strong></p>
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="https://opensource.org/license/mit">MIT</a>. The website content is licensed
|
||||
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed
|
||||
<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<a href="https://cssmasterclass.io/" target="_blank" class="launch-code is-animated">
|
||||
<h3><img
|
||||
src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
|
||||
height="40"
|
||||
width="300"
|
||||
/>
|
||||
</h3>
|
||||
|
||||
<small>
|
||||
Learn CSS with 🎓 online interactive courses,📺 educational videos, and
|
||||
🧑🏻💻project-building tutorials.
|
||||
</small>
|
||||
</a>
|
||||
|
|
@ -1,8 +1,5 @@
|
|||
<div id="carboncontainer" class="bd-carbon">
|
||||
<div id="carbon">
|
||||
<a id="masterclass-carbon" href="https://cssmasterclass.io/" target="_blank" style="display: none; aspect-ratio: 40 / 26; max-width: 400px; max-height: 260px;">
|
||||
<img src="{{ site.url }}/assets/images/masterclass/masterclass-carbon.png" height="260" width="400" alt="CSS Masterclass">
|
||||
</a>
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js" onerror="this.previousElementSibling.style.display = 'flex'"></script>
|
||||
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?serve=CWYIE237&placement=bulmaio&format=cover" id="_carbonads_js"></script>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,43 +0,0 @@
|
|||
<div id="masterclass" class="masterclass">
|
||||
<div id="masterclass-background" class="masterclass-background"></div>
|
||||
|
||||
<a class="masterclass-body" href="https://cssmasterclass.io/" target="_blank">
|
||||
<div class="masterclass-content is-hidden-desktop">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/masterclass/logo-mobile.png"
|
||||
height="68"
|
||||
width="240"
|
||||
/>
|
||||
<img
|
||||
src="{{site.url}}/assets/images/masterclass/text-mobile.png"
|
||||
height="99"
|
||||
width="228"
|
||||
/>
|
||||
<div class="shine">
|
||||
<span>Get started for Free</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="masterclass-content is-hidden-touch">
|
||||
<img
|
||||
src="{{site.url}}/assets/images/masterclass/logo-desktop.png"
|
||||
height="50"
|
||||
width="378"
|
||||
/>
|
||||
<img
|
||||
src="{{site.url}}/assets/images/masterclass/text-desktop.png"
|
||||
height="58"
|
||||
width="571"
|
||||
/>
|
||||
<div class="shine">
|
||||
<span>Get started for Free</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<button
|
||||
id="masterclass-close"
|
||||
class="modal-close is-large"
|
||||
aria-label="close"
|
||||
></button>
|
||||
</div>
|
||||
|
|
@ -4,8 +4,6 @@
|
|||
{% include global/head.html %}
|
||||
</head>
|
||||
<body>
|
||||
{% include website/banner.html %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% if page.modals %}
|
||||
|
|
@ -32,6 +30,5 @@
|
|||
</script>
|
||||
<script src="{{ site.url }}/assets/javascript/main.js"></script>
|
||||
{% include global/customizer.html %}
|
||||
{% include website/masterclass.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -39,9 +39,10 @@ route: documentation
|
|||
{{ content }}
|
||||
{% endif %}
|
||||
|
||||
{% if page.meta.variables %}
|
||||
{% include docs/components/variables.html %}
|
||||
{% endif %}
|
||||
{% if page.meta.variables %}
|
||||
{% include docs/elements/anchor.html name="Sass and CSS variables" %}
|
||||
{% include docs/components/variables.html %}
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% include docs/components/pagination.html %}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
}
|
||||
|
||||
.bulma-overlay-mixin-parent {
|
||||
background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
|
||||
background-image: url(https://source.unsplash.com/La2kOu2dmH4/640x320);
|
||||
background-size: cover;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
}
|
||||
|
||||
.bulma-center-mixin-parent {
|
||||
background-image: url(/assets/images/unsplash/La2kOu2dmH4.jpg);
|
||||
background-image: url(https://source.unsplash.com/xo3Bd2tYeqg/640x320);
|
||||
background-size: cover;
|
||||
border-radius: 0.5em;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1400px) {
|
||||
@media screen and (min-width: 1000px) {
|
||||
.bd-hero.is-docs {
|
||||
flex-wrap: nowrap;
|
||||
|
||||
|
|
@ -47,6 +47,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1200px) {
|
||||
.bd-hero.is-docs {
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
.bd-hero-title {
|
||||
color: hsl(
|
||||
cv.getVar("text-h"),
|
||||
|
|
@ -93,10 +99,6 @@
|
|||
}
|
||||
|
||||
.bd-carbon {
|
||||
aspect-ratio: 40 / 26;
|
||||
max-height: 280px !important;
|
||||
max-width: 400px !important;
|
||||
|
||||
&,
|
||||
& > div {
|
||||
align-items: center;
|
||||
|
|
@ -105,6 +107,7 @@
|
|||
}
|
||||
|
||||
> div {
|
||||
aspect-ratio: 40 / 26;
|
||||
height: 280px !important;
|
||||
width: 400px !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -171,19 +171,10 @@
|
|||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.bd-side-sponsrs {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.bd-side-sponsor-label {
|
||||
font-weight: 500;
|
||||
font-size: 0.875em;
|
||||
margin-bottom: 0.5em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.bd-side-sponsor {
|
||||
display: flex;
|
||||
margin: 0.5rem;
|
||||
margin-top: 0;
|
||||
|
||||
img {
|
||||
border-radius: 0.75rem;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@use "sass:list";
|
||||
@use "sass/utilities/css-variables" as cv;
|
||||
@use "../utils";
|
||||
|
||||
|
|
@ -129,8 +128,8 @@
|
|||
$bubble-order: ("axbom", "jesseschoff", "ale_codes", "MyTopSecretName");
|
||||
$delay-factor: 0.3s;
|
||||
|
||||
@for $index from 1 through list.length($bubble-order) {
|
||||
$name: list.nth($bubble-order, $index);
|
||||
@for $index from 1 through length($bubble-order) {
|
||||
$name: nth($bubble-order, $index);
|
||||
|
||||
.js-bubble-#{$name} {
|
||||
.bd-bubble-content {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
@use "sass:color";
|
||||
@use "sass/utilities/mixins" as mx;
|
||||
@use "sass/themes/light";
|
||||
|
||||
|
|
@ -73,11 +72,11 @@ $sass: #bf4080;
|
|||
color: light.$scheme-main;
|
||||
|
||||
&:hover {
|
||||
background-color: color.adjust($mauve, $lightness: -2.5%);
|
||||
background-color: darken($mauve, 2.5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: color.adjust($mauve, $lightness: -5%);
|
||||
background-color: darken($mauve, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,11 +85,11 @@ $sass: #bf4080;
|
|||
color: light.$scheme-main;
|
||||
|
||||
&:hover {
|
||||
background-color: color.adjust($pink, $lightness: -2.5%);
|
||||
background-color: darken($pink, 2.5%);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: color.adjust($pink, $lightness: -5%);
|
||||
background-color: darken($pink, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
4
docs/assets/css/website.min.css
vendored
4
docs/assets/css/website.min.css
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 33 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 468 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 302 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 247 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 183 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 87 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 120 KiB |
|
|
@ -108,18 +108,10 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
// MODALS
|
||||
// Functions to open and close a modal
|
||||
function openModal($el) {
|
||||
if (!$el) {
|
||||
return;
|
||||
}
|
||||
|
||||
$el.classList.add("is-active");
|
||||
}
|
||||
|
||||
function closeModal($el) {
|
||||
if (!$el) {
|
||||
return;
|
||||
}
|
||||
|
||||
$el.classList.remove("is-active");
|
||||
}
|
||||
|
||||
|
|
@ -424,38 +416,4 @@ document.addEventListener("DOMContentLoaded", () => {
|
|||
|
||||
new window.ClipboardJS(".bd-clipboard");
|
||||
}, 100);
|
||||
|
||||
// MASTERCLASS
|
||||
const MASTERCLASS_KEY = "cssmasterclass";
|
||||
const $masterclass = document.getElementById("masterclass");
|
||||
const $masterclassBackground = document.getElementById(
|
||||
"masterclass-background",
|
||||
);
|
||||
const $masterclassClose = document.getElementById("masterclass-close");
|
||||
const masterclassStorage = window.localStorage.getItem(MASTERCLASS_KEY);
|
||||
|
||||
if (masterclassStorage !== "seen") {
|
||||
window.setTimeout(() => {
|
||||
openMasterclass();
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
const openMasterclass = () => {
|
||||
$masterclass.classList.add("is-open");
|
||||
};
|
||||
|
||||
const closeMasterclass = () => {
|
||||
window.localStorage.setItem(MASTERCLASS_KEY, "seen");
|
||||
$masterclass.classList.remove("is-open");
|
||||
};
|
||||
|
||||
$masterclassBackground.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
closeMasterclass();
|
||||
});
|
||||
|
||||
$masterclassClose.addEventListener("click", (event) => {
|
||||
event.preventDefault();
|
||||
closeMasterclass();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ title: Layout/Footer
|
|||
<div class="content has-text-centered">
|
||||
<p>
|
||||
<strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The source code is licensed
|
||||
<a href="https://opensource.org/license/mit">MIT</a>. The website content
|
||||
is licensed <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
<a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content
|
||||
is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
|||
|
|
@ -6,10 +6,8 @@ subtitle: Everything you need to create a website with Bulma.
|
|||
hero_prints:
|
||||
- label: "Creative Commons"
|
||||
icon: "fab fa-creative-commons"
|
||||
url: https://creativecommons.org/licenses/by-nc-sa/4.0/
|
||||
- label: "Contribute on GitHub"
|
||||
icon: "fas fa-code-pull-request"
|
||||
url: https://github.com/jgthms/bulma
|
||||
---
|
||||
{% assign category_ids = site.data.links.category_ids %}
|
||||
|
||||
|
|
|
|||
|
|
@ -35,14 +35,6 @@ breadcrumb:
|
|||
<div class="column">No gap</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% capture columns_variable_gap %}
|
||||
<div class="columns is-8">
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
</div>
|
||||
{% endcapture %}
|
||||
{% capture columns_gapless_multiline %}
|
||||
<div class="columns is-gapless is-multiline is-mobile">
|
||||
<div class="column is-one-quarter">is-one-quarter</div>
|
||||
|
|
@ -57,7 +49,9 @@ breadcrumb:
|
|||
</div>
|
||||
{% endcapture %}
|
||||
{% capture columns_variable_responsive_gaps %}
|
||||
<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
|
||||
<div
|
||||
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
|
||||
>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
<div class="column">Column</div>
|
||||
|
|
@ -161,20 +155,28 @@ breadcrumb:
|
|||
<li><code>is-3</code> is the <strong>default value</strong>, equivalent to the <code>0.75rem</code> value</li>
|
||||
<li><code>is-8</code> is the maximum gap of <code>2rem</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{% highlight html -%}
|
||||
{{- columns_variable_gap -}}
|
||||
{%- endhighlight %}
|
||||
<p>Additionally, <code>.is-variable</code> should be added on the <code>.columns</code> container.</p>
|
||||
</div>
|
||||
|
||||
{% include docs/content/klmn.html %}
|
||||
|
||||
<div class="message is-warning">
|
||||
<div class="message-body">
|
||||
<p>
|
||||
This feature is only available in browsers that support
|
||||
<a
|
||||
href="https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables"
|
||||
>CSS Variables</a
|
||||
>.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% assign vernum = site.data.meta.version | downcase | remove: '.' | plus: 0 %}
|
||||
{% if vernum >= 72 %}
|
||||
{%
|
||||
include docs/elements/anchor.html name="Breakpoint based column gaps"
|
||||
include docs/elements/anchor.html name="Breakpoint
|
||||
based column gaps"
|
||||
%}
|
||||
|
||||
<div class="content">
|
||||
|
|
@ -182,17 +184,19 @@ breadcrumb:
|
|||
|
||||
<p>
|
||||
For example, here's how it looks with the following modifiers:
|
||||
<code>is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
|
||||
<code>is-variable is-2-mobile is-0-tablet is-3-desktop is-8-widescreen is-1-fullhd</code>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-highlight-full">
|
||||
{%- highlight html -%}
|
||||
{% highlight html -%}
|
||||
{{- columns_variable_responsive_gaps -}}
|
||||
{%- endhighlight -%}
|
||||
{%- endhighlight %}
|
||||
</div>
|
||||
|
||||
<div class="columns is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd">
|
||||
<div
|
||||
class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
|
||||
>
|
||||
<div class="column">
|
||||
<p class="bd-notification is-primary">Column</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -282,7 +282,7 @@ document.addEventListener('DOMContentLoaded', () => {
|
|||
<div class="content">
|
||||
<h4>3. Add the JS for the trigger</h4>
|
||||
|
||||
<p>In a <code>script</code> element (or in a separate <code>.js</code> file), add the following JS code:</p>
|
||||
<p>In a <code>script</code> element (or in a seperate <code>.js</code> file), add the following JS code:</p>
|
||||
</div>
|
||||
|
||||
{% highlight javascript -%}
|
||||
|
|
|
|||
|
|
@ -482,8 +482,9 @@ name="Combining" %}
|
|||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=tabs_centered_boxed_example
|
||||
horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_centered_boxed_medium_example
|
||||
horizontal=true more=true %}
|
||||
{% include docs/elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_example horizontal=true more=true %} {% include
|
||||
docs/elements/snippet.html content=tabs_centered_boxed_medium_example
|
||||
horizontal=true more=true %} {% include docs/elements/snippet.html
|
||||
content=tabs_toggle_fullwidth_large_example horizontal=true more=true %} {%
|
||||
include docs/components/variables.html type='component' %}
|
||||
|
|
|
|||
|
|
@ -82,6 +82,6 @@ If you wanted to import a component **and** customize it, do the same when impor
|
|||
|
||||
{% highlight sass %}
|
||||
@use "bulma/sass/elements/image" with (
|
||||
$dimensions: 20 40 80 160,
|
||||
$dimensions: 20 40 80 160;
|
||||
);
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -78,5 +78,3 @@ meta:
|
|||
</div>
|
||||
|
||||
{% include docs/elements/snippet.html content=cross_elements_example %}
|
||||
|
||||
{% include docs/components/variables.html %}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,6 @@ meta:
|
|||
colors: false
|
||||
sizes: false
|
||||
variables: true
|
||||
hide_css_vars: true
|
||||
---
|
||||
{% capture image %}
|
||||
<figure class="image is-128x128">
|
||||
|
|
|
|||
|
|
@ -862,3 +862,7 @@ meta:
|
|||
{{- scrollable_table -}}
|
||||
{%- endhighlight %}
|
||||
{{ simple_scrollable_table_example }}
|
||||
{%
|
||||
include docs/components/variables.html
|
||||
type='element'
|
||||
%}
|
||||
|
|
|
|||
|
|
@ -259,70 +259,70 @@ For Dark Mode, Bulma will keep the same hue and saturation of the main scheme co
|
|||
<tr>
|
||||
<th><code>--bulma-scheme-main-l</code></th>
|
||||
<td><code>100%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
|
||||
<td><code>11%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-scheme-main-bis-l</code></th>
|
||||
<td><code>98%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
|
||||
<td><code>13%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-bis-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-scheme-main-ter-l</code></th>
|
||||
<td><code>98%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
|
||||
<td><code>15%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-main-ter-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-background-l</code></th>
|
||||
<td><code>96%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
|
||||
<td><code>14%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-background-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-border-weak-l</code></th>
|
||||
<td><code>93%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
|
||||
<td><code>21%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-weak-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-border-l</code></th>
|
||||
<td><code>86%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
|
||||
<td><code>24%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-border-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-weak-l</code></th>
|
||||
<td><code>48%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
|
||||
<td><code>53%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-weak-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-l</code></th>
|
||||
<td><code>29%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
|
||||
<td><code>71%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-strong-l</code></th>
|
||||
<td><code>21%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
|
||||
<td><code>93%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-strong-l));"></span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th><code>--bulma-text-title-l</code></th>
|
||||
<td><code>14%</code></td>
|
||||
<td class="theme-light"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
|
||||
<td><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
|
||||
<td><code>100%</code></td>
|
||||
<td class="theme-dark"><span class="bd-color-swatch" style="--background: hsl(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-text-title-l));"></span></td>
|
||||
</tr>
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Reference in a new issue