diff --git a/package-lock.json b/package-lock.json index 863023892..f365719b3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -18,11 +18,11 @@ "@vue/eslint-config-prettier": "^10.2.0", "@vue/eslint-config-typescript": "^14.7.0", "conventional-changelog": "^7.2.0", - "conventional-changelog-conventionalcommits": "9.2.0", + "conventional-changelog-conventionalcommits": "9.3.0", "eslint": "^9.36.0", "eslint-plugin-vue": "^10.5.0", "eslint-plugin-vuejs-accessibility": "^2.4.1", - "npm-check-updates": "^19.6.3", + "npm-check-updates": "^19.6.5", "npm-run-all2": "^8.0.4", "prettier": "^3.8.1", "replace-in-file": "^8.4.0", @@ -1850,36 +1850,36 @@ "link": true }, "node_modules/@oruga-ui/theme-bootstrap": { - "version": "0.10.3", - "resolved": "https://registry.npmjs.org/@oruga-ui/theme-bootstrap/-/theme-bootstrap-0.10.3.tgz", - "integrity": "sha512-HSv1Q/qcppoNu7W6jJ0wz6I0W3FWCN2VWyxdBV8kJRnBZTbWJ2cYh05AOitW6VmNYeyOXhFvaB5pjau5MM4eqw==", + "version": "0.11.0", + "resolved": "https://registry.npmjs.org/@oruga-ui/theme-bootstrap/-/theme-bootstrap-0.11.0.tgz", + "integrity": "sha512-wynK4Vp3Bg2QT9mL9ww69KqrfutYmn7y6Io9hZIqPiFTiS/MYzpbhUpCvDl+tVVWavb03jBNEDlrWNF4oLATNg==", "license": "MIT", "dependencies": { "bootstrap": "^5.3.8" }, "peerDependencies": { - "@oruga-ui/oruga-next": "^0.12.0" + "@oruga-ui/oruga-next": "^0.13.0" } }, "node_modules/@oruga-ui/theme-bulma": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/@oruga-ui/theme-bulma/-/theme-bulma-0.8.3.tgz", - "integrity": "sha512-00IrmZA3xE81/l5A1zTLm4JNSc6yUQEXMLVQMTywCFaFlCW3mwK6/nuQ7/27bzEpggXGisOp1MmSlR4zZAiCXg==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@oruga-ui/theme-bulma/-/theme-bulma-0.9.0.tgz", + "integrity": "sha512-R22zsds6pT+QK4+RSCtMKJu9Howg4X58osrIQrxJQhVoUt5GBwwNc0vk7kIIWtfkkoWhK3oyJ/pNVn5d0UO9Zg==", "license": "MIT", "dependencies": { "bulma": "1.0.4" }, "peerDependencies": { - "@oruga-ui/oruga-next": "^0.12.0" + "@oruga-ui/oruga-next": "^0.13.0" } }, "node_modules/@oruga-ui/theme-oruga": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/@oruga-ui/theme-oruga/-/theme-oruga-0.8.1.tgz", - "integrity": "sha512-SvHYO/CRCaGTUBImDTvmXHAwlniVkkZ/IEnP8I5rfQuh7nMQBdqaqIlkCsTr3g4lL0K7rRGMAbPqzCcavXxhxA==", + "version": "0.9.0", + "resolved": "https://registry.npmjs.org/@oruga-ui/theme-oruga/-/theme-oruga-0.9.0.tgz", + "integrity": "sha512-AFEGHqT70VmmqlIPJXvydHjyQnktMpKtOvWt5yOpoOT5nQX/7nl8Q+8TyFXI859giN7vq7d6cjH4F63kAwX7XA==", "license": "MIT", "peerDependencies": { - "@oruga-ui/oruga-next": "^0.12.0" + "@oruga-ui/oruga-next": "^0.13.0" } }, "node_modules/@parcel/watcher": { @@ -4761,9 +4761,9 @@ } }, "node_modules/conventional-changelog-conventionalcommits": { - "version": "9.2.0", - "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-9.2.0.tgz", - "integrity": "sha512-fCf+ODjseueTV09wVBoC0HXLi3OyuBJ+HfE3L63Khxqnr99f9nUcnQh3a15lCWHlGLihyZShW/mVVkBagr9JvQ==", + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/conventional-changelog-conventionalcommits/-/conventional-changelog-conventionalcommits-9.3.0.tgz", + "integrity": "sha512-kYFx6gAyjSIMwNtASkI3ZE99U1fuVDJr0yTYgVy+I2QG46zNZfl2her+0+eoviG82c5WQvW1jMt1eOQTeJLodA==", "dev": true, "license": "ISC", "dependencies": { @@ -7592,9 +7592,9 @@ } }, "node_modules/npm-check-updates": { - "version": "19.6.3", - "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.6.3.tgz", - "integrity": "sha512-VAt9Bp26eLaymZ0nZyh5n/by+YZIuegXlvWR0yv1zBqd984f8VnEnBbn+1lS3nN5LyEjn62BJ+yYgzNSpb6Gzg==", + "version": "19.6.5", + "resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.6.5.tgz", + "integrity": "sha512-XlBUMC30relXfEerrnX239W9iB30U6Woz0Hj42Sv6iSF4EGOvj2mS2r45sZ3RglH0VPBxXOWooMxObZ/SMZhrw==", "dev": true, "license": "Apache-2.0", "bin": { @@ -11076,9 +11076,9 @@ "@fortawesome/free-solid-svg-icons": "^7.2.0", "@fortawesome/vue-fontawesome": "^3.1.3", "@highlightjs/vue-plugin": "2.1.2", - "@oruga-ui/theme-bootstrap": "0.10.3", - "@oruga-ui/theme-bulma": "0.8.3", - "@oruga-ui/theme-oruga": "0.8.1", + "@oruga-ui/theme-bootstrap": "0.11.0", + "@oruga-ui/theme-bulma": "0.9.0", + "@oruga-ui/theme-oruga": "0.9.0", "highlight.js": "11.11.1", "markdown-it": "^14.1.1", "markdown-it-highlightjs": "^4.3.0" diff --git a/package.json b/package.json index 7b0f329af..fa8d26576 100644 --- a/package.json +++ b/package.json @@ -45,11 +45,11 @@ "@vue/eslint-config-prettier": "^10.2.0", "@vue/eslint-config-typescript": "^14.7.0", "conventional-changelog": "^7.2.0", - "conventional-changelog-conventionalcommits": "9.2.0", + "conventional-changelog-conventionalcommits": "9.3.0", "eslint": "^9.36.0", "eslint-plugin-vue": "^10.5.0", "eslint-plugin-vuejs-accessibility": "^2.4.1", - "npm-check-updates": "^19.6.3", + "npm-check-updates": "^19.6.5", "npm-run-all2": "^8.0.4", "prettier": "^3.8.1", "replace-in-file": "^8.4.0", diff --git a/packages/docs/components/Button.md b/packages/docs/components/Button.md index 5849e5b67..91fb5431c 100644 --- a/packages/docs/components/Button.md +++ b/packages/docs/components/Button.md @@ -93,7 +93,7 @@ The component implements the W3C ARIA APG [Button Pattern](https://www.w3.org/WA | $button-border-style | solid | | $button-border-color | h.useVar("control-border-color") | | $button-border-radius | h.useVar("border-radius") | -| $button-background-color | h.useVar("control-brackground-color") | +| $button-background-color | h.useVar("control-background-color") | | $button-hover-color | $button-color | | $button-hover-background-color | $button-background-color | | $button-hover-border-color | h.useVar("grey-light") | diff --git a/packages/docs/components/Dialog.md b/packages/docs/components/Dialog.md index f96ed60f9..89c1e15b9 100644 --- a/packages/docs/components/Dialog.md +++ b/packages/docs/components/Dialog.md @@ -120,7 +120,7 @@ The component implements the W3C ARIA APG [Dialog (Modal) Pattern](https://www.w | $dialog-spacer | calc(2 \* h.useVar("control-spacer")) | | $dialog-zindex | map.get(vars.$zindex, "fixed") | | $dialog-box-shadow | h.useVar("overlay-box-shadow") | -| $dialog-background-color | h.useVar("control-brackground-color") | +| $dialog-background-color | h.useVar("control-background-color") | | $dialog-border-width | h.useVar("control-border-width") | | $dialog-border-style | solid | | $dialog-border-color | h.useVar("control-border-color") | diff --git a/packages/docs/components/Dropdown.md b/packages/docs/components/Dropdown.md index dbd947182..409c8b9c9 100644 --- a/packages/docs/components/Dropdown.md +++ b/packages/docs/components/Dropdown.md @@ -158,7 +158,7 @@ The component implements both the W3C ARIA APG [Combobox Pattern](https://www.w3 | $dropdown-menu-spacer | 0px | | $dropdown-menu-padding | h.useVar("control-spacer") 0 | | $dropdown-menu-box-shadow | 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02) | -| $dropdown-menu-background-color | h.useVar("control-brackground-color") | +| $dropdown-menu-background-color | h.useVar("control-background-color") | | $dropdown-menu-border-color | h.useVar("control-border-color") | | $dropdown-menu-border-style | solid | | $dropdown-menu-border-width | h.useVar("control-border-width") | diff --git a/packages/docs/components/Input.md b/packages/docs/components/Input.md index a35647c0d..ea5339425 100644 --- a/packages/docs/components/Input.md +++ b/packages/docs/components/Input.md @@ -105,7 +105,7 @@ Combine it with the [Field](/components/Field) component to access all functiona | $input-border-color | h.useVar("control-border-color") | | $input-border-radius | h.useVar("border-radius") | | $input-border-radius-rounded | h.useVar("border-radius-rounded") | -| $input-background-color | h.useVar("control-brackground-color") | +| $input-background-color | h.useVar("control-background-color") | | $input-textarea-min-height | 120px | | $input-textarea-max-height | 600px | | $input-textarea-padding | h.useVar("control-spacer") | diff --git a/packages/docs/components/Listbox.md b/packages/docs/components/Listbox.md index 345e833e1..9c83bd2b1 100644 --- a/packages/docs/components/Listbox.md +++ b/packages/docs/components/Listbox.md @@ -134,25 +134,24 @@ Combine it with the [Field](/components/Field) component to access all functiona > Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ -| SASS Variable | Default | -| ------------------------------------- | ---------------------------------------------------------------------------- | -| $listbox-disabled-opacity | h.useVar("control-disabled-opacity") | -| $listbox-box-shadow | 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02) | -| $listbox-background-color | h.useVar("control-brackground-color") | -| $listbox-border-color | h.useVar("control-border-color") | -| $listbox-border-style | solid | -| $listbox-border-width | h.useVar("control-border-width") | -| $listbox-border-radius | h.useVar("border-radius") | -| $listbox-item-padding | h.useVar("control-spacer") calc(h.useVar("control-spacer") \* 2) | -| $listbox-item-color | h.useVar("font-color") | -| $listbox-item-font-size | h.useVar("font-size") | -| $listbox-item-font-weight | h.useVar("font-weight") | -| $listbox-item-line-height | h.useVar("line-height") | -| $listbox-item-background-color | transparent | -| $listbox-item-active-color | h.useVar("primary-invert") | -| $listbox-item-active-background-color | h.useVar("primary") | -| $listbox-item-hover-background-color | h.useVar("grey-lighter") | -| $listbox-item-hover-color | h.useVar("font-color") | +| SASS Variable | Default | +| ------------------------------------- | ---------------------------------------------------------------- | +| $listbox-disabled-opacity | h.useVar("control-disabled-opacity") | +| $listbox-background-color | h.useVar("control-background-color") | +| $listbox-border-color | h.useVar("control-border-color") | +| $listbox-border-style | solid | +| $listbox-border-width | h.useVar("control-border-width") | +| $listbox-border-radius | h.useVar("border-radius") | +| $listbox-item-padding | h.useVar("control-spacer") calc(h.useVar("control-spacer") \* 2) | +| $listbox-item-color | h.useVar("font-color") | +| $listbox-item-font-size | h.useVar("font-size") | +| $listbox-item-font-weight | h.useVar("font-weight") | +| $listbox-item-line-height | h.useVar("line-height") | +| $listbox-item-background-color | transparent | +| $listbox-item-active-color | h.useVar("primary-invert") | +| $listbox-item-active-background-color | h.useVar("primary") | +| $listbox-item-hover-background-color | h.useVar("grey-lighter") | +| $listbox-item-hover-color | h.useVar("font-color") | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_listbox.scss) diff --git a/packages/docs/components/Modal.md b/packages/docs/components/Modal.md index 4198611c2..152ecefd1 100644 --- a/packages/docs/components/Modal.md +++ b/packages/docs/components/Modal.md @@ -94,23 +94,23 @@ The component supports the W3C ARIA APG [Dialog (Modal) Pattern](https://www.w3. > Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ -| SASS Variable | Default | -| ------------------------------- | ------------------------------------- | -| $modal-zindex | map.get(vars.$zindex, "fixed") | -| $modal-overlay-background-color | h.useVar("overlay-background-color") | -| $modal-overlay-zindex | map.get(vars.$zindex, "overlay") | -| $modal-content-zindex | map.get(vars.$zindex, "modal") | -| $modal-content-max-height | calc(100vh - 160px) | -| $modal-content-max-width | calc(100vw - 160px) | -| $modal-content-box-shadow | h.useVar("overlay-box-shadow") | -| $modal-content-border-radius | h.useVar("border-radius") | -| $modal-content-background-color | h.useVar("control-brackground-color") | -| $modal-close-top | 20px | -| $modal-close-right | 20px | -| $modal-close-color | h.useVar("white") | -| $modal-close-size | 2rem | -| $modal-close-border-radius | h.useVar("border-radius-rounded") | -| $modal-close-background-color | h.useVar("control-shadow-color") | +| SASS Variable | Default | +| ------------------------------- | ------------------------------------ | +| $modal-zindex | map.get(vars.$zindex, "fixed") | +| $modal-overlay-background-color | h.useVar("overlay-background-color") | +| $modal-overlay-zindex | map.get(vars.$zindex, "overlay") | +| $modal-content-zindex | map.get(vars.$zindex, "modal") | +| $modal-content-max-height | calc(100vh - 160px) | +| $modal-content-max-width | calc(100vw - 160px) | +| $modal-content-box-shadow | h.useVar("overlay-box-shadow") | +| $modal-content-border-radius | h.useVar("border-radius") | +| $modal-content-background-color | h.useVar("control-background-color") | +| $modal-close-top | 20px | +| $modal-close-right | 20px | +| $modal-close-color | h.useVar("white") | +| $modal-close-size | 2rem | +| $modal-close-border-radius | h.useVar("border-radius-rounded") | +| $modal-close-background-color | h.useVar("control-shadow-color") | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_modal.scss) diff --git a/packages/docs/components/Pagination.md b/packages/docs/components/Pagination.md index 889774878..0aaa49ab7 100644 --- a/packages/docs/components/Pagination.md +++ b/packages/docs/components/Pagination.md @@ -103,7 +103,7 @@ The component uses the [Button](/components/Button) component for the navigation | $pagination-button-border-style | solid | | $pagination-button-border-radius | h.useVar("border-radius") | | $pagination-button-border-radius-rounded | h.useVar( "border-radius-rounded") | -| $pagination-button-background-color | h.useVar( "control-brackground-color") | +| $pagination-button-background-color | h.useVar( "control-background-color") | | $pagination-button-hover-color | $pagination-button-color | | $pagination-button-hover-background-color | $pagination-button-background-color | | $pagination-button-hover-border-color | $pagination-button-border-color | diff --git a/packages/docs/components/Select.md b/packages/docs/components/Select.md index d509023a6..3a5bdf415 100644 --- a/packages/docs/components/Select.md +++ b/packages/docs/components/Select.md @@ -100,7 +100,7 @@ Use it with the [Field](/components/Field) component to access all the functiona | $select-font-weight | h.useVar("font-weight") | | $select-line-height | h.useVar("line-height") | | $select-box-shadow | h.useVar("control-box-shadow-inset") | -| $select-background-color | h.useVar("control-brackground-color") | +| $select-background-color | h.useVar("control-background-color") | | $select-border-color | h.useVar("control-border-color") | | $select-border-style | solid | | $select-border-width | h.useVar("control-border-width") | diff --git a/packages/docs/components/Sidebar.md b/packages/docs/components/Sidebar.md index 9467555ef..f324b27d5 100644 --- a/packages/docs/components/Sidebar.md +++ b/packages/docs/components/Sidebar.md @@ -79,20 +79,20 @@ The component can be used to show an overlay for navigation, shopping carts, and > Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ -| SASS Variable | Default | -| --------------------------------- | -------------------------------------- | -| $sidebar-zindex | map.get(vars.$zindex, "fixed") | -| $sidebar-overlay-background-color | h.useVar( "overlay-background-color") | -| $sidebar-overlay-zindex | map.get(vars.$zindex, "overlay") | -| $sidebar-content-zindex | map.get(vars.$zindex, "sidebar") | -| $sidebar-content-max-width | 50vw | -| $sidebar-content-max-height | 50vh | -| $sidebar-content-box-shadow | h.useVar("overlay-box-shadow") | -| $sidebar-content-background-color | h.useVar( "control-brackground-color") | -| $sidebar-content-border-radius | h.useVar("border-radius") | -| $sidebar-content-border-width | h.useVar("control-border-width") | -| $sidebar-content-border-style | solid | -| $sidebar-content-border-color | h.useVar("control-border-color") | +| SASS Variable | Default | +| --------------------------------- | ------------------------------------- | +| $sidebar-zindex | map.get(vars.$zindex, "fixed") | +| $sidebar-overlay-background-color | h.useVar( "overlay-background-color") | +| $sidebar-overlay-zindex | map.get(vars.$zindex, "overlay") | +| $sidebar-content-zindex | map.get(vars.$zindex, "sidebar") | +| $sidebar-content-max-width | 50vw | +| $sidebar-content-max-height | 50vh | +| $sidebar-content-box-shadow | h.useVar("overlay-box-shadow") | +| $sidebar-content-background-color | h.useVar( "control-background-color") | +| $sidebar-content-border-radius | h.useVar("border-radius") | +| $sidebar-content-border-width | h.useVar("control-border-width") | +| $sidebar-content-border-style | solid | +| $sidebar-content-border-color | h.useVar("control-border-color") | See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_sidebar.scss) diff --git a/packages/docs/components/Slider.md b/packages/docs/components/Slider.md index 04f2a3ea6..47c9c87c3 100644 --- a/packages/docs/components/Slider.md +++ b/packages/docs/components/Slider.md @@ -127,7 +127,7 @@ Use it with the [Field](/components/Field) component to access all the functiona | $slider-track-border-color | h.useVar("grey") | | $slider-track-border-radius | h.useVar("border-radius") | | $slider-track-background-color | h.useVar("grey-lighter") | -| $slider-fill-box-shadow | h.useVar("control-focus-box-shadow") | +| $slider-fill-box-shadow | h.useVar("control-box-shadow") | | $slider-fill-background-color | h.useVar("primary") | | $slider-thumb-size | h.useVar("slider-font-size") | | $slider-thumb-font-size | calc(0.85 \* h.useVar("slider-font-size")) | @@ -139,7 +139,7 @@ Use it with the [Field](/components/Field) component to access all the functiona | $slider-thumb-border-color | h.useVar("grey-light") | | $slider-thumb-border-radius | h.useVar("border-radius") | | $slider-thumb-border-radius-rounded | h.useVar("border-radius-rounded") | -| $slider-thumb-background-color | h.useVar("control-brackground-color") | +| $slider-thumb-background-color | h.useVar("control-background-color") | | $slider-thumb-transform | scale(1.25) | | $slider-tick-to-track-ratio | 0.5 | | $slider-tick-size | calc( h.useVar("slider-track-height") \* $slider-tick-to-track-ratio) | diff --git a/packages/docs/components/Steps.md b/packages/docs/components/Steps.md index b59ed3caa..bce951d57 100644 --- a/packages/docs/components/Steps.md +++ b/packages/docs/components/Steps.md @@ -139,7 +139,7 @@ Breaking things down into multiple steps can improve the user experience by keep | $steps-step-font-size | h.useVar("font-size") | | $steps-step-font-weight | 500 | | $steps-step-line-height | h.useVar("line-height") | -| $steps-step-border-color | h.useVar( "control-brackground-color") | +| $steps-step-border-color | h.useVar( "control-background-color") | | // color scheme is inverted for steps$steps-step-background-color | h.useVar( "control-border-color") | | // color scheme is inverted for steps$steps-step-active-border-color | h.useVar("primary") | | $steps-step-active-background-color | h.useVar("primary-invert") | diff --git a/packages/docs/components/Switch.md b/packages/docs/components/Switch.md index 9a9df10bc..df010c9c7 100644 --- a/packages/docs/components/Switch.md +++ b/packages/docs/components/Switch.md @@ -100,7 +100,7 @@ Use it with the [Field](/components/Field) component to access all the functiona | $switch-border-radius | h.useVar("border-radius") | | $switch-border-radius-rounded | h.useVar("border-radius-rounded") | | $switch-background-color | h.useVar("grey-light") | -| $switch-toggle-background-color | vars.$control-brackground-color | +| $switch-toggle-background-color | vars.$control-background-color | | $switch-checked-background-color | h.useVar("primary") | | $switch-checked-border-color | h.useVar("primary") | | $switch-disabled-opacity | h.useVar("control-disabled-opacity") | diff --git a/packages/docs/components/Table.md b/packages/docs/components/Table.md index 69f97f2de..bc4bc60f3 100644 --- a/packages/docs/components/Table.md +++ b/packages/docs/components/Table.md @@ -224,7 +224,7 @@ It allows tabular data to be displayed in a responsive way with special case cel | $table-border-style | solid | | $table-border-color | transparent | | $table-border-radius | h.useVar("border-radius") | -| $table-background-color | h.useVar("control-brackground-color") | +| $table-background-color | h.useVar("control-background-color") | | $table-focus-border-color | h.useVar("primary") | | $table-focus-box-shadow | vars.$control-focus-box-shadow h.useVar("focus") | | $table-sticky-zindex | 1 | diff --git a/packages/docs/components/Tree.md b/packages/docs/components/Tree.md index ecc10371b..a0695253e 100644 --- a/packages/docs/components/Tree.md +++ b/packages/docs/components/Tree.md @@ -137,7 +137,26 @@ Combine it with the [Field](/components/Field) component to access all functiona > Current theme ➜ _[Oruga](https://github.com/oruga-ui/theme-oruga)_ -
The theme does not have any custom variables for this component.
+| SASS Variable | Default | +| ---------------------------------- | ------------------------------------ | +| $tree-spacer | 0.25rem | +| $tree-border | 1px solid h.useVar("secondary") | +| $tree-disabled-opacity | h.useVar("control-disabled-opacity") | +| $tree-item-padding | 0.5em 0.75em | +| $tree-item-color | h.useVar("font-color") | +| $tree-item-font-size | h.useVar("font-size") | +| $tree-item-font-weight | h.useVar("font-weight") | +| $tree-item-line-heigth | h.useVar("line-height") | +| $tree-item-border | unset | +| $tree-item-border-radius | h.useVar("border-radius") | +| $tree-item-background-color | transparent | +| $tree-item-hover-color | h.useVar("black") | +| $tree-item-hover-background-color | h.useVar("grey-lightest") | +| $tree-item-active-color | h.useVar("primary-invert") | +| $tree-item-active-background-color | h.useVar("primary") | + +See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-oruga/tree/main/src/assets/scss/components/_tree.scss) +The theme does not have any custom variables for this component.
+| SASS Variable | Default | +| ------------------------- | ------------------------------ | +| $tree-list-line-height | 1.25em | +| $tree-item-padding | 0.5em 0.75em | +| $tree-item-margin | 0.2em 0 | +| $tree-item-bg | transparent | +| $tree-item-border-radius | var(--#{$prefix}border-radius) | +| $tree-item-color | var(--#{$prefix}body-color) | +| $tree-item-active-bg | var(--#{$prefix}primary) | +| $tree-item-active-color | var(--#{$prefix}white) | +| $tree-item-disabled-bg | transparent | +| $tree-item-disabled-color | var(--#{$prefix}secondary) | +| $tree-item-hover-bg | var(--#{$prefix}tertiary-bg) | +| $tree-item-hover-color | var(--#{$prefix}body-color) | +| $tree-icon-spacer | 0.25rem | +| $tree-subtree-border-left | 1px solid #445e00 | +| $tree-subtree-padding | 0 0.5em | +| $tree-subtree-margin | 0.5em 1.3em | + +See ➜ 📄 [SCSS file](https://github.com/oruga-ui/theme-bootstrap/tree/main/src/assets/scss/components/_tree.scss) +