library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-14 11:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add layout elements

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-26 15:29:29 +01:00
parent f9a418dd26
commit 891e6e3cb7
1 changed files with 153 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

211
docs/_react/bulma-customizer/src/constants.js
View File

@ -3,35 +3,35 @@ export const CSSVAR_KEYS = {
{ {
id: "scheme-h", id: "scheme-h",
description: description:
"Defines the Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes", "The Scheme's Hue, that is used for backgrounds, borders, and text, in both Light and Dark modes",
}, },
{ {
id: "scheme-s", id: "scheme-s",
description: description:
"Defines the Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes", "The Scheme's Saturation, that is used for backgrounds, borders, and text, in both Light and Dark modes",
}, },
{ id: "light-l", description: "Defines the lightness of backgrounds" }, { id: "light-l", description: "The lightness of backgrounds" },
{ {
id: "light-invert-l", id: "light-invert-l",
description: "Defines the lightness of backgrounds' invert color", description: "The lightness of backgrounds' invert color",
}, },
{ {
id: "dark-l", id: "dark-l",
description: "Defines the lightness of dark backgrounds", description: "The lightness of dark backgrounds",
}, },
{ {
id: "dark-invert-l", id: "dark-invert-l",
description: "Defines the lightness of dark backgrounds' invert color", description: "The lightness of dark backgrounds' invert color",
}, },
{ id: "soft-l", description: "Defines the lightness of soft colors" }, { id: "soft-l", description: "The lightness of soft colors" },
{ id: "bold-l", description: "Defines the lightness of bold colors" }, { id: "bold-l", description: "The lightness of bold colors" },
{ {
id: "soft-invert-l", id: "soft-invert-l",
description: "Defines the lightness of soft color's invert color", description: "The lightness of soft color's invert color",
}, },
{ {
id: "bold-invert-l", id: "bold-invert-l",
description: "Defines the lightness of bold color's invert color", description: "The lightness of bold color's invert color",
}, },
{ {
id: "hover-background-l-delta", id: "hover-background-l-delta",
@ -75,115 +75,115 @@ export const CSSVAR_KEYS = {
}, },
], ],
colors: [ colors: [
{ id: "primary-h", description: "Defines the Primary color's hue" }, { id: "primary-h", description: "The Primary color's hue" },
{ {
id: "primary-s", id: "primary-s",
description: "Defines the Primary color's saturation", description: "The Primary color's saturation",
}, },
{ id: "primary-l", description: "Defines the Primary color's lightness" }, { id: "primary-l", description: "The Primary color's lightness" },
{ id: "link-h", description: "Defines the Link color's hue" }, { id: "link-h", description: "The Link color's hue" },
{ id: "link-s", description: "Defines the Link color's saturation" }, { id: "link-s", description: "The Link color's saturation" },
{ id: "link-l", description: "Defines the Link color's lightness" }, { id: "link-l", description: "The Link color's lightness" },
{ id: "info-h", description: "Defines the Info color's hue" }, { id: "info-h", description: "The Info color's hue" },
{ id: "info-s", description: "Defines the Info color's saturation" }, { id: "info-s", description: "The Info color's saturation" },
{ id: "info-l", description: "Defines the Info color's lightness" }, { id: "info-l", description: "The Info color's lightness" },
{ id: "success-h", description: "Defines the Success color's hue" }, { id: "success-h", description: "The Success color's hue" },
{ {
id: "success-s", id: "success-s",
description: "Defines the Success color's saturation", description: "The Success color's saturation",
}, },
{ id: "success-l", description: "Defines the Success color's lightness" }, { id: "success-l", description: "The Success color's lightness" },
{ id: "warning-h", description: "Defines the Warning color's hue" }, { id: "warning-h", description: "The Warning color's hue" },
{ {
id: "warning-s", id: "warning-s",
description: "Defines the Warning color's saturation", description: "The Warning color's saturation",
}, },
{ id: "warning-l", description: "Defines the Warning color's lightness" }, { id: "warning-l", description: "The Warning color's lightness" },
{ id: "danger-h", description: "Defines the Danger color's hue" }, { id: "danger-h", description: "The Danger color's hue" },
{ id: "danger-s", description: "Defines the Danger color's saturation" }, { id: "danger-s", description: "The Danger color's saturation" },
{ id: "danger-l", description: "Defines the Danger color's lightness" }, { id: "danger-l", description: "The Danger color's lightness" },
], ],
typography: [ typography: [
{ id: "family-primary", description: "Defines the Primary font family" }, { id: "family-primary", description: "The Primary font family" },
{ {
id: "family-secondary", id: "family-secondary",
description: "Defines the Secondary font family", description: "The Secondary font family",
}, },
{ id: "family-code", description: "Defines the Code font family" }, { id: "family-code", description: "The Code font family" },
{ id: "size-small", description: "Defines the Small font size" }, { id: "size-small", description: "The Small font size" },
{ id: "size-normal", description: "Defines the Normal font size" }, { id: "size-normal", description: "The Normal font size" },
{ id: "size-medium", description: "Defines the Medium font size" }, { id: "size-medium", description: "The Medium font size" },
{ id: "size-large", description: "Defines the Large font size" }, { id: "size-large", description: "The Large font size" },
{ id: "weight-light", description: "Defines the Light font weight" }, { id: "weight-light", description: "The Light font weight" },
{ id: "weight-normal", description: "Defines the Normal font weight" }, { id: "weight-normal", description: "The Normal font weight" },
{ id: "weight-medium", description: "Defines the Medium font weight" }, { id: "weight-medium", description: "The Medium font weight" },
{ {
id: "weight-semibold", id: "weight-semibold",
description: "Defines the Semibold font weight", description: "The Semibold font weight",
}, },
{ id: "weight-bold", description: "Defines the Bold font weight" }, { id: "weight-bold", description: "The Bold font weight" },
{ {
id: "weight-extrabold", id: "weight-extrabold",
description: "Defines the Extrabold font weight", description: "The Extrabold font weight",
}, },
], ],
other: [ other: [
{ {
id: "block-spacing", id: "block-spacing",
description: "Defines the space below Block elements", description: "The space below Block elements",
}, },
{ {
id: "duration", id: "duration",
description: "Defines the duration of Transitions and Animations", description: "The duration of Transitions and Animations",
}, },
{ {
id: "easing", id: "easing",
description: "Defines the timing function of Transitions and Animations", description: "The timing function of Transitions and Animations",
}, },
{ id: "radius-small", description: "Defines the Small border radius" }, { id: "radius-small", description: "The Small border radius" },
{ id: "radius", description: "Defines the Normal border radius" }, { id: "radius", description: "The Normal border radius" },
{ id: "radius-medium", description: "Defines the Medium border radius" }, { id: "radius-medium", description: "The Medium border radius" },
{ id: "radius-large", description: "Defines the Large border radius" }, { id: "radius-large", description: "The Large border radius" },
{ {
id: "radius-rounded", id: "radius-rounded",
description: "Defines the Rounded border radius", description: "The Rounded border radius",
}, },
{ id: "speed", description: "" }, { id: "speed", description: "" },
{ {
id: "arrow-color", id: "arrow-color",
description: "Defines the arrow color use for Select dropdowns", description: "The arrow color use for Select dropdowns",
}, },
{ {
id: "loading-color", id: "loading-color",
description: "Defines the color of the loading spinner", description: "The color of the loading spinner",
}, },
{ {
id: "burger-h", id: "burger-h",
description: "Defines the Hue of the burger element lines", description: "The Hue of the burger element lines",
}, },
{ {
id: "burger-s", id: "burger-s",
description: "Defines the Saturation of the burger element lines", description: "The Saturation of the burger element lines",
}, },
{ {
id: "burger-l", id: "burger-l",
description: "Defines the Lightness of the burger element lines", description: "The Lightness of the burger element lines",
}, },
{ {
id: "burger-border-radius", id: "burger-border-radius",
description: "Defines the border radius of the burger element", description: "The border radius of the burger element",
}, },
{ {
id: "burger-gap", id: "burger-gap",
description: "Defines the gap of the burger element", description: "The gap of the burger element",
}, },
{ {
id: "burger-item-height", id: "burger-item-height",
description: "Defines the height of the burger element", description: "The height of the burger element",
}, },
{ {
id: "burger-item-width", id: "burger-item-width",
description: "Defines the width of the burger element", description: "The width of the burger element",
}, },
], ],
generic: [ generic: [
@ -681,4 +681,99 @@ export const CSSVAR_KEYS = {
}, },
{ id: "input-radius", description: "The input element border radius" }, { id: "input-radius", description: "The input element border radius" },
], ],
columns: [{ id: "column-gap", description: "The gap between columns" }],
grid: [
{ id: "grid-gap", description: "The gap between Grid cells" },
{
id: "grid-column-count",
description: "The number of columns in the Grid",
},
{
id: "grid-column-min",
description: "The minimum width of Grid columns",
},
{
id: "grid-cell-column-span",
description: "How many columns a Grid cell will span",
},
{
id: "grid-cell-column-span",
description: "How many columns a Grid cell will span",
},
{
id: "grid-cell-column-start",
description: "At which column a Grid cell will start",
},
{
id: "grid-cell-column-start",
description: "At which column a Grid cell will start",
},
],
footer: [
{
id: "footer-background-color",
description: "The footer background color",
},
{ id: "footer-color", description: "The footer text color" },
{ id: "footer-padding", description: "The footer padding" },
],
hero: [
{ id: "hero-body-padding", description: "The hero body padding" },
{
id: "hero-body-padding-tablet",
description: "The hero body padding on Tablet viewports and wider",
},
{
id: "hero-body-padding-small",
description: "The Small hero body padding",
},
{
id: "hero-body-padding-medium",
description: "The Medium hero body padding",
},
{
id: "hero-body-padding-large",
description: "The Large hero body padding",
},
],
media: [
{ id: "media-border-color", description: "The media element border color" },
{ id: "media-border-size", description: "The media element border size" },
{ id: "media-spacing", description: "The media element spacing" },
{
id: "media-spacing-large",
description: "The Large media element spacing",
},
{
id: "media-content-spacing",
description: "The media content element spacing",
},
{
id: "media-level-1-spacing",
description: "The media element spacing when nested 1 level deep",
},
{
id: "media-level-1-content-spacing",
description: "The media content element spacing when nested 1 level deep",
},
{
id: "media-level-2-spacing",
description: "The media element spacing when nested 2 levels deep",
},
],
section: [
{ id: "section-padding", description: "The section element padding" },
{
id: "section-padding-desktop",
description: "The section element padding on Desktop viewports and wider",
},
{
id: "section-padding-medium",
description: "The Medium section element padding",
},
{
id: "section-padding-large",
description: "The Large section element padding",
},
],
}; };