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 Components

Browse Source
This commit is contained in:
Jeremy Thomas 2024-06-26 20:00:17 +01:00
parent 303da19588
commit 493aa56bbb
48 changed files with 1331 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/_react/bulma-customizer/index.html
View File

@ -9,6 +9,16 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="scope" class="is-hidden"> <div id="scope" class="is-hidden">
<div class="breadcrumb"></div>
<div class="card"></div>
<div class="dropdown"></div>
<div class="menu"></div>
<div class="message"></div>
<div class="modal"></div>
<div class="navbar"></div>
<div class="pagination"></div>
<div class="panel"></div>
<div class="tabs"></div>
<div class="box"></div> <div class="box"></div>
<div class="content"></div> <div class="content"></div>
<div class="delete"></div> <div class="delete"></div>

212
docs/_react/bulma-customizer/src/App.jsx
View File

@ -1,6 +1,7 @@
import { createContext, useEffect, useRef, useState } from "react"; import { createContext, useEffect, useRef, useState } from "react";
import classNames from "classnames"; import classNames from "classnames";
import "../../../../css/bulma.css"; import "../../../../css/bulma.css";
import cn from "./App.module.css";
import { CSSVAR_KEYS } from "./constants"; import { CSSVAR_KEYS } from "./constants";
import { unslug } from "./utils"; import { unslug } from "./utils";
@ -12,6 +13,17 @@ import Other from "./pages/Other";
import Generic from "./pages/Generic"; import Generic from "./pages/Generic";
import Skeleton from "./pages/Skeleton"; import Skeleton from "./pages/Skeleton";
import Breadcrumb from "./pages/components/Breadcrumb";
import Card from "./pages/components/Card";
import Dropdown from "./pages/components/Dropdown";
import Menu from "./pages/components/Menu";
import Message from "./pages/components/Message";
import Modal from "./pages/components/Modal";
import Navbar from "./pages/components/Navbar";
import Pagination from "./pages/components/Pagination";
import Panel from "./pages/components/Panel";
import Tabs from "./pages/components/Tabs";
import Box from "./pages/elements/Box"; import Box from "./pages/elements/Box";
import Content from "./pages/elements/Content"; import Content from "./pages/elements/Content";
import Delete from "./pages/elements/Delete"; import Delete from "./pages/elements/Delete";
@ -46,6 +58,17 @@ const PAGE_TO_COMPONENT = {
other: <Other />, other: <Other />,
generic: <Generic />, generic: <Generic />,
skeleton: <Skeleton />, skeleton: <Skeleton />,
// Components
breadcrumb: <Breadcrumb />,
card: <Card />,
dropdown: <Dropdown />,
menu: <Menu />,
message: <Message />,
modal: <Modal />,
navbar: <Navbar />,
pagination: <Pagination />,
panel: <Panel />,
tabs: <Tabs />,
// Elements // Elements
box: <Box />, box: <Box />,
content: <Content />, content: <Content />,
@ -69,38 +92,58 @@ const PAGE_TO_COMPONENT = {
media: <Media />, media: <Media />,
section: <Section />, section: <Section />,
}; };
const PAGE_IDS = [ const TAB_IDS = [
"colors", "Global Variables",
"scheme", "Components",
"typography", "Elements",
"other", "Form",
"generic", "Grid",
"skeleton", "Layout",
"box",
"content",
"delete",
"icon",
"notification",
"progress",
"table",
"tag",
"title",
"control",
"input",
"file",
"columns",
"grid",
"footer",
"hero",
"media",
"section",
]; ];
const PAGE_IDS = {
"Global Variables": [
"colors",
"scheme",
"typography",
"other",
"generic",
"skeleton",
],
Components: [
"breadcrumb",
"card",
"dropdown",
"menu",
"message",
"modal",
"navbar",
"pagination",
"panel",
"tabs",
],
Elements: [
"box",
"content",
"delete",
"icon",
"notification",
"progress",
"table",
"tag",
"title",
],
Form: ["control", "input", "file"],
Grid: ["columns", "grid"],
Layout: ["footer", "hero", "media", "section"],
};
export const CustomizerContext = createContext({ export const CustomizerContext = createContext({
cssvars: {}, cssvars: {},
currentTab: "",
currentPage: "", currentPage: "",
getVar: () => {}, getVar: () => {},
changeTab: () => {}, changeTab: () => {},
changePage: () => {},
updateVar: () => {}, updateVar: () => {},
}); });
@ -108,11 +151,20 @@ function App() {
const styleRef = useRef(); const styleRef = useRef();
const initialContext = { const initialContext = {
cssvars: {}, cssvars: {},
currentTab: "Global Variables",
currentPage: "delete", currentPage: "delete",
getVar: (id) => { getVar: (id) => {
return context.cssvars[id]; return context.cssvars[id];
}, },
changeTab: (pageId) => { changeTab: (tabId) => {
setContext((context) => {
return {
...context,
currentTab: tabId,
};
});
},
changePage: (pageId) => {
setContext((context) => { setContext((context) => {
return { return {
...context, ...context,
@ -122,16 +174,6 @@ function App() {
}, },
updateVar: (id, newValue) => { updateVar: (id, newValue) => {
setContext((context) => { setContext((context) => {
// const { start, unit, scope } = context.cssvars[id];
// const computedValue = `${newValue}${unit}`;
// const el = document.querySelector(`#scope ${scope}`);
// if (start === newValue) {
// el.style.removeProperty(`--bulma-${id}`);
// } else {
// el.style.setProperty(`--bulma-${id}`, computedValue);
// }
return { return {
...context, ...context,
cssvars: { cssvars: {
@ -147,14 +189,34 @@ function App() {
}; };
const [context, setContext] = useState(initialContext); const [context, setContext] = useState(initialContext);
const handleTabChange = (event, pageId) => { const handleTabChange = (event, tabId) => {
event.preventDefault(); event.preventDefault();
context.changeTab(pageId); context.changeTab(tabId);
context.changePage(PAGE_IDS[tabId][0]);
};
const handlePageChange = (event, pageId) => {
event.preventDefault();
context.changePage(pageId);
}; };
useEffect(() => { useEffect(() => {
const styles = { const styles = {
root: window.getComputedStyle(document.documentElement), root: window.getComputedStyle(document.documentElement),
breadcrumb: window.getComputedStyle(
document.querySelector(".breadcrumb"),
),
card: window.getComputedStyle(document.querySelector(".card")),
dropdown: window.getComputedStyle(document.querySelector(".dropdown")),
menu: window.getComputedStyle(document.querySelector(".menu")),
message: window.getComputedStyle(document.querySelector(".message")),
modal: window.getComputedStyle(document.querySelector(".modal")),
navbar: window.getComputedStyle(document.querySelector(".navbar")),
pagination: window.getComputedStyle(
document.querySelector(".pagination"),
),
panel: window.getComputedStyle(document.querySelector(".panel")),
tabs: window.getComputedStyle(document.querySelector(".tabs")),
box: window.getComputedStyle(document.querySelector(".box")), box: window.getComputedStyle(document.querySelector(".box")),
content: window.getComputedStyle(document.querySelector(".content")), content: window.getComputedStyle(document.querySelector(".content")),
delete: window.getComputedStyle(document.querySelector(".delete")), delete: window.getComputedStyle(document.querySelector(".delete")),
@ -177,14 +239,47 @@ function App() {
}; };
const cssvars = {}; const cssvars = {};
const allKeys = PAGE_IDS.map((pageId) => CSSVAR_KEYS[pageId]).flat(); const allKeys = Object.values(PAGE_IDS)
.flat()
.map((pageId) => CSSVAR_KEYS[pageId])
.flat();
const allKeyIds = allKeys.map((i) => i.id); const allKeyIds = allKeys.map((i) => i.id);
allKeyIds.map((key) => { allKeyIds.map((key) => {
let original; let original;
let scope = ":root"; let scope = ":root";
if (key.startsWith("box")) { if (key.startsWith("breadcrumb")) {
scope = ".breadcrumb";
original = styles.breadcrumb.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("card")) {
scope = ".card";
original = styles.card.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("dropdown")) {
scope = ".dropdown";
original = styles.dropdown.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("menu")) {
scope = ".menu";
original = styles.menu.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("message")) {
scope = ".message";
original = styles.message.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("modal")) {
scope = ".modal";
original = styles.modal.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("navbar")) {
scope = ".navbar";
original = styles.navbar.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("pagination")) {
scope = ".pagination";
original = styles.pagination.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("panel")) {
scope = ".panel";
original = styles.panel.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("tabs")) {
scope = ".tabs";
original = styles.tabs.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("box")) {
scope = ".box"; scope = ".box";
original = styles.box.getPropertyValue(`--bulma-${key}`); original = styles.box.getPropertyValue(`--bulma-${key}`);
} else if (key.startsWith("content")) { } else if (key.startsWith("content")) {
@ -300,22 +395,47 @@ function App() {
} }
}, [context.cssvars]); }, [context.cssvars]);
const tabsStyle = {
"--bulma-tabs-link-active-color": "var(--bulma-primary)",
};
return ( return (
<CustomizerContext.Provider value={context}> <CustomizerContext.Provider value={context}>
<style ref={styleRef} /> <style ref={styleRef} />
<section className="section"> <div className={cn.app}>
<div className="buttons"> <div className="tabs is-primary is-boxed is-centered" style={tabsStyle}>
{PAGE_IDS.map((pageId) => { <ul>
{TAB_IDS.map((tabId) => {
const buttonClass = classNames({
// button: true,
"is-active": tabId === context.currentTab,
});
return (
<li
className={buttonClass}
key={tabId}
onClick={(e) => handleTabChange(e, tabId)}
>
<a>{unslug(tabId)}</a>
</li>
);
})}
</ul>
</div>
<div className="buttons are-small has-addons is-centered">
{PAGE_IDS[context.currentTab].map((pageId) => {
const buttonClass = classNames({ const buttonClass = classNames({
button: true, button: true,
"is-link": pageId === context.currentPage, "is-primary": pageId === context.currentPage,
}); });
return ( return (
<button <button
className={buttonClass} className={buttonClass}
key={pageId} key={pageId}
onClick={(e) => handleTabChange(e, pageId)} onClick={(e) => handlePageChange(e, pageId)}
> >
{unslug(pageId)} {unslug(pageId)}
</button> </button>
@ -324,7 +444,7 @@ function App() {
</div> </div>
{PAGE_TO_COMPONENT[context.currentPage]} {PAGE_TO_COMPONENT[context.currentPage]}
</section> </div>
</CustomizerContext.Provider> </CustomizerContext.Provider>
); );
} }

21
docs/_react/bulma-customizer/src/App.module.css
View File

@ -0,0 +1,21 @@
.app {
--var-item-side-width: 12rem;
--var-item-slider-width: 30rem;
--var-item-padding: 1rem;
--var-item-gap: 1rem;
}
.items {
display: grid;
grid-template-columns: repeat(
auto-fit,
minmax(
calc(
var(--var-item-padding) + var(--var-item-side-width) +
var(--var-item-gap) + var(--var-item-slider-width) +
var(--var-item-padding)
),
1fr
)
);
}

9
docs/_react/bulma-customizer/src/components/Color.module.css
View File

@ -1,9 +1,11 @@
.main { .main {
background-color: var(--bulma-body-background-color);
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 1.5rem; gap: var(--var-item-gap);
border-bottom: 1px solid var(--bulma-border); box-shadow: 0 0 0 1px var(--bulma-border);
padding: 1.25rem 0; padding: var(--var-item-padding);
justify-content: center;
} }
.side { .side {
@ -19,6 +21,7 @@
} }
.name { .name {
color: var(--bulma-primary);
gap: 1rem; gap: 1rem;
display: flex; display: flex;
align-items: center; align-items: center;

13
docs/_react/bulma-customizer/src/components/VarItem.jsx
View File

@ -5,6 +5,7 @@ import Slider from "./Slider";
import { CustomizerContext } from "../App"; import { CustomizerContext } from "../App";
import cn from "./VarItem.module.css"; import cn from "./VarItem.module.css";
import classNames from "classnames";
function VarItem({ id }) { function VarItem({ id }) {
const { cssvars, updateVar } = useContext(CustomizerContext); const { cssvars, updateVar } = useContext(CustomizerContext);
@ -26,6 +27,11 @@ function VarItem({ id }) {
}; };
const isDisabled = cssvar.current == cssvar.start; const isDisabled = cssvar.current == cssvar.start;
const resetClass = classNames({
button: true,
"is-danger is-outlined": !isDisabled,
});
const resetStyle = isDisabled ? { opacity: 0.1 } : {};
let control; let control;
@ -70,11 +76,14 @@ function VarItem({ id }) {
<code>{cssvar.id}</code> <code>{cssvar.id}</code>
</div> </div>
<div className={cn.description}>{cssvar.description}</div>
<div className="buttons are-small"> <div className="buttons are-small">
<button <button
className="button" className={resetClass}
onClick={handleReset} onClick={handleReset}
disabled={isDisabled} disabled={isDisabled}
style={resetStyle}
> >
Reset Reset
</button> </button>
@ -82,8 +91,6 @@ function VarItem({ id }) {
</div> </div>
<div className={cn.slider}>{control}</div> <div className={cn.slider}>{control}</div>
<div className={cn.description}>{cssvar.description}</div>
</div> </div>
); );
} }

14
docs/_react/bulma-customizer/src/components/VarItem.module.css
View File

@ -1,9 +1,10 @@
.main { .main {
background-color: var(--bulma-body-background-color);
align-items: start; align-items: start;
display: flex; display: flex;
gap: 1.5rem; gap: var(--var-item-gap);
border-bottom: 1px solid var(--bulma-border); box-shadow: 0 0 0 1px var(--bulma-border);
padding: 1.25rem; padding: var(--var-item-padding);
transition-property: background-color; transition-property: background-color;
transition-duration: var(--bulma-duration); transition-duration: var(--bulma-duration);
} }
@ -14,7 +15,7 @@
.side { .side {
flex-shrink: 0; flex-shrink: 0;
width: 15rem; width: var(--var-item-side-width);
} }
.name { .name {
@ -25,6 +26,7 @@
} }
.name code { .name code {
color: var(--bulma-primary);
font-size: 1em; font-size: 1em;
font-weight: 400; font-weight: 400;
padding: 0; padding: 0;
@ -36,8 +38,8 @@
display: flex; display: flex;
gap: 1.5rem; gap: 1.5rem;
/* padding: 2px 0; */ /* padding: 2px 0; */
width: 30rem;
flex-shrink: 0; flex-shrink: 0;
width: var(--var-item-slider-width);
} }
.form { .form {
@ -64,4 +66,6 @@
.description { .description {
flex-shrink: 1; flex-shrink: 1;
flex-grow: 1; flex-grow: 1;
margin: -0.25rem 0 0.5rem;
font-size: 0.875em;
} }

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

@ -246,6 +246,778 @@ export const CSSVAR_KEYS = {
description: "The height of each skeleton line", description: "The height of each skeleton line",
}, },
], ],
breadcrumb: [
{
id: "breadcrumb-item-color",
description: "The breadcrumb items text color",
},
{
id: "breadcrumb-item-hover-color",
description: "The breadcrumb items text color when hovered",
},
{
id: "breadcrumb-item-active-color",
description: "The breadcrumb items text color when active",
},
{
id: "breadcrumb-item-padding-vertical",
description: "The breadcrumb items vertical padding",
},
{
id: "breadcrumb-item-padding-horizontal",
description: "The breadcrumb items horizontal padding",
},
{
id: "breadcrumb-item-separator-color",
description: "The breadcrumb items separator color",
},
],
card: [
{ id: "card-color", description: "The card text color" },
{ id: "card-background-color", description: "The card background color" },
{ id: "card-shadow", description: "The card box shadow" },
{ id: "card-radius", description: "The card border radius" },
{
id: "card-header-background-color",
description: "The card header background color",
},
{ id: "card-header-color", description: "The card header text color" },
{ id: "card-header-padding", description: "The card header padding" },
{ id: "card-header-shadow", description: "The card header box shadow" },
{ id: "card-header-weight", description: "The card header font weight" },
{
id: "card-content-background-color",
description: "The card content background color",
},
{ id: "card-content-padding", description: "The card content padding" },
{
id: "card-footer-background-color",
description: "The card footer background color",
},
{ id: "card-footer-border-top", description: "The card footer top border" },
{ id: "card-footer-padding", description: "The card footer padding" },
{ id: "card-media-margin", description: "The card media margin" },
],
dropdown: [
{
id: "dropdown-menu-min-width",
description: "The dropdown menu minimum width",
},
{
id: "dropdown-content-background-color",
description: "The dropdown content background color",
},
{
id: "dropdown-content-offset",
description: "The dropdown content offset",
},
{
id: "dropdown-content-padding-bottom",
description: "The dropdown content bottom padding",
},
{
id: "dropdown-content-padding-top",
description: "The dropdown content top padding",
},
{
id: "dropdown-content-radius",
description: "The dropdown content border radius",
},
{
id: "dropdown-content-shadow",
description: "The dropdown content box shadow",
},
{ id: "dropdown-content-z", description: "The dropdown content z index" },
{ id: "dropdown-item-h", description: "The dropdown item main Hue" },
{ id: "dropdown-item-s", description: "The dropdown item main Saturation" },
{ id: "dropdown-item-l", description: "The dropdown item main Lightness" },
{
id: "dropdown-item-background-l",
description: "The dropdown item background Lightness",
},
{
id: "dropdown-item-background-l-delta",
description: "The dropdown item background Lightness delta",
},
{
id: "dropdown-item-hover-background-l-delta",
description: "The dropdown item background Lightness delta when hovered",
},
{
id: "dropdown-item-active-background-l-delta",
description: "The dropdown item background Lightness delta when active",
},
{
id: "dropdown-item-color-l",
description: "The dropdown item color Lightness",
},
{
id: "dropdown-item-selected-h",
description: "The dropdown item main Hue when selected",
},
{
id: "dropdown-item-selected-s",
description: "The dropdown item main Saturation when selected",
},
{
id: "dropdown-item-selected-l",
description: "The dropdown item main Lightness when selected",
},
{
id: "dropdown-item-selected-background-l",
description: "The dropdown item background Lightness when selected",
},
{
id: "dropdown-item-selected-color-l",
description: "The dropdown item color Lightness when selected",
},
{
id: "dropdown-divider-background-color",
description: "The dropdown divider background color",
},
],
menu: [
{ id: "menu-item-h", description: "The menu item main Hue" },
{ id: "menu-item-s", description: "The menu item main Saturation" },
{ id: "menu-item-l", description: "The menu item main Lightness" },
{
id: "menu-item-background-l",
description: "The menu item background Lightness",
},
{
id: "menu-item-background-l-delta",
description: "The menu item background Lightness delta",
},
{
id: "menu-item-hover-background-l-delta",
description: "The menu item background Lightness when hovered",
},
{
id: "menu-item-active-background-l-delta",
description: "The menu item background Lightness when active",
},
{ id: "menu-item-color-l", description: "The menu item color Lightness" },
{ id: "menu-item-radius", description: "The menu item border radius" },
{
id: "menu-item-selected-h",
description: "The menu item main Hue when selected",
},
{
id: "menu-item-selected-s",
description: "The menu item main Saturation when selected",
},
{
id: "menu-item-selected-l",
description: "The menu item main Lightness when selected",
},
{
id: "menu-item-selected-background-l",
description: "The menu item background Lightness when selected",
},
{
id: "menu-item-selected-color-l",
description: "The menu item color Lightness when selected",
},
{ id: "menu-list-border-left", description: "The menu list left border" },
{ id: "menu-list-line-height", description: "The menu list line height" },
{ id: "menu-list-link-padding", description: "The menu list link padding" },
{
id: "menu-nested-list-margin",
description: "The menu list margin when nested",
},
{
id: "menu-nested-list-padding-left",
description: "The menu list left padding when nested",
},
{ id: "menu-label-color", description: "The menu label text color" },
{ id: "menu-label-font-size", description: "The menu label font size" },
{
id: "menu-label-letter-spacing",
description: "The menu label letter spacing",
},
{ id: "menu-label-spacing", description: "The menu label spacing" },
],
message: [
{ id: "message-h", description: "The message main Hue" },
{ id: "message-s", description: "The message main Saturation" },
{
id: "message-background-l",
description: "The message background Lightness",
},
{ id: "message-border-l", description: "The message border Lightness" },
{
id: "message-border-l-delta",
description: "The message border Lightness delta",
},
{ id: "message-border-style", description: "The message border style" },
{ id: "message-border-width", description: "The message border width" },
{ id: "message-color-l", description: "The message color Lightness" },
{ id: "message-radius", description: "The message border radius" },
{
id: "message-header-weight",
description: "The message header font weight",
},
{ id: "message-header-padding", description: "The message header padding" },
{
id: "message-header-radius",
description: "The message header border radius",
},
{
id: "message-header-body-border-width",
description: "The message header body border width",
},
{
id: "message-header-background-l",
description: "The message header background Lightness",
},
{
id: "message-header-color-l",
description: "The message header color Lightness",
},
{
id: "message-body-border-width",
description: "The message body border width",
},
{ id: "message-body-color", description: "The message body color" },
{ id: "message-body-padding", description: "The message body padding" },
{
id: "message-body-radius",
description: "The message body border radius",
},
{
id: "message-body-pre-code-background-color",
description: "The message body code element background color",
},
],
modal: [
{ id: "modal-z", description: "The modal z index" },
{
id: "modal-background-background-color",
description: "The modal background background color",
},
{ id: "modal-content-width", description: "The modal content width" },
{
id: "modal-content-margin-mobile",
description: "The modal content margin on Mobile viewports",
},
{
id: "modal-content-spacing-mobile",
description: "The modal content spacing on Mobile viewports",
},
{
id: "modal-content-spacing-tablet",
description: "The modal content spacing on Tablet viewports and wider",
},
{ id: "modal-close-dimensions", description: "The modal close dimensions" },
{ id: "modal-close-right", description: "The modal close right offset" },
{ id: "modal-close-top", description: "The modal close top offset" },
{ id: "modal-card-spacing", description: "The modal card spacing" },
{
id: "modal-card-head-background-color",
description: "The modal card head background color",
},
{
id: "modal-card-head-padding",
description: "The modal card head padding",
},
{
id: "modal-card-head-radius",
description: "The modal card head border radius",
},
{ id: "modal-card-title-color", description: "The modal card title color" },
{
id: "modal-card-title-line-height",
description: "The modal card title line height",
},
{
id: "modal-card-title-size",
description: "The modal card title font size",
},
{
id: "modal-card-foot-background-color",
description: "The modal card foot background color",
},
{
id: "modal-card-foot-radius",
description: "The modal card foot border radius",
},
{
id: "modal-card-body-background-color",
description: "The modal card body background color",
},
{
id: "modal-card-body-padding",
description: "The modal card body padding",
},
],
navbar: [
{ id: "navbar-h", description: "The navbar main Hue" },
{ id: "navbar-s", description: "The navbar main Saturation" },
{ id: "navbar-l", description: "The navbar main Lightness" },
{
id: "navbar-background-color",
description: "The navbar background color",
},
{ id: "navbar-box-shadow-size", description: "The navbar box shadow size" },
{
id: "navbar-box-shadow-color",
description: "The navbar box shadow color",
},
{
id: "navbar-padding-vertical",
description: "The navbar vertical padidng",
},
{
id: "navbar-padding-horizontal",
description: "The navbar horizontal padidng",
},
{ id: "navbar-z", description: "The navbar z index" },
{ id: "navbar-fixed-z", description: "The navbar z index" },
{
id: "navbar-item-background-a",
description: "The navbar item background transparency",
},
{
id: "navbar-item-background-l",
description: "The navbar item Lightness",
},
{
id: "navbar-item-background-l-delta",
description: "The navbar item Lightness delta",
},
{
id: "navbar-item-hover-background-l-delta",
description: "The navbar item Lightness delta when hovered",
},
{
id: "navbar-item-active-background-l-delta",
description: "The navbar item Lightness delta when active",
},
{ id: "navbar-item-color-l", description: "The navbar item Lightness" },
{
id: "navbar-item-selected-h",
description: "The navbar item main Hue when selected",
},
{
id: "navbar-item-selected-s",
description: "The navbar item main Saturation when selected",
},
{
id: "navbar-item-selected-l",
description: "The navbar item main Lightness when selected",
},
{
id: "navbar-item-selected-background-l",
description: "The navbar item background Lightness when selected",
},
{
id: "navbar-item-selected-color-l",
description: "The navbar item color Lightness when selected",
},
{
id: "navbar-item-img-max-height",
description: "The navbar item image maximum height",
},
{ id: "navbar-burger-color", description: "The navbar burder color" },
{
id: "navbar-tab-hover-background-color",
description: "The navbar tab background color when hovered",
},
{
id: "navbar-tab-hover-border-bottom-color",
description: "The navbar tab bottom border color when hovered",
},
{
id: "navbar-tab-active-color",
description: "The navbar tab color when active",
},
{
id: "navbar-tab-active-background-color",
description: "The navbar tab background color when active",
},
{
id: "navbar-tab-active-border-bottom-color",
description: "The navbar tab bottom border color when active",
},
{
id: "navbar-tab-active-border-bottom-style",
description: "The navbar tab bottom border style when active",
},
{
id: "navbar-tab-active-border-bottom-width",
description: "The navbar tab bottom border width when active",
},
{
id: "navbar-dropdown-background-color",
description: "The navbar dropdown background color",
},
{
id: "navbar-dropdown-border-l",
description: "The navbar dropdown border Lightness",
},
{
id: "navbar-dropdown-border-color",
description: "The navbar dropdown border color",
},
{
id: "navbar-dropdown-border-style",
description: "The navbar dropdown border style",
},
{
id: "navbar-dropdown-border-width",
description: "The navbar dropdown border width",
},
{ id: "navbar-dropdown-offset", description: "The navbar dropdown offset" },
{
id: "navbar-dropdown-arrow",
description: "The navbar dropdown arrow color",
},
{
id: "navbar-dropdown-radius",
description: "The navbar dropdown border radius",
},
{ id: "navbar-dropdown-z", description: "The navbar dropdown z index" },
{
id: "navbar-dropdown-boxed-radius",
description: "The navbar boxed dropdown border radius",
},
{
id: "navbar-dropdown-boxed-shadow",
description: "The navbarboxed dropdown box shadow",
},
{
id: "navbar-dropdown-item-h",
description: "The navbar dropdown main Hue",
},
{
id: "navbar-dropdown-item-s",
description: "The navbar dropdown main Saturation",
},
{
id: "navbar-dropdown-item-l",
description: "The navbar dropdown main Lightness",
},
{
id: "navbar-dropdown-item-background-l",
description: "The navbar dropdown item background Lightness",
},
{
id: "navbar-dropdown-item-color-l",
description: "The navbar dropdown item color Lightness",
},
{
id: "navbar-divider-background-l",
description: "The navbar divider background Lightness",
},
{ id: "navbar-divider-height", description: "The navbar divider height" },
{
id: "navbar-bottom-box-shadow-size",
description: "The bottom navbar box shadow size",
},
],
pagination: [
{ id: "pagination-margin", description: "The pagination margin" },
{ id: "pagination-min-width", description: "The pagination minimum width" },
{ id: "pagination-item-h", description: "The pagination item main Hue" },
{
id: "pagination-item-s",
description: "The pagination item main Saturation",
},
{
id: "pagination-item-l",
description: "The pagination item main Lightness",
},
{
id: "pagination-item-background-l-delta",
description: "The pagination item background Lightness delta",
},
{
id: "pagination-item-hover-background-l-delta",
description:
"The pagination item background Lightness delta when hovered",
},
{
id: "pagination-item-active-background-l-delta",
description: "The pagination item background Lightness delta when active",
},
{
id: "pagination-item-border-style",
description: "The pagination item border style",
},
{
id: "pagination-item-border-width",
description: "The pagination item border width",
},
{
id: "pagination-item-border-l",
description: "The pagination item border Lightness",
},
{
id: "pagination-item-border-l-delta",
description: "The pagination item border Lightness delta",
},
{
id: "pagination-item-hover-border-l-delta",
description: "The pagination item border Lightness delta when hovered",
},
{
id: "pagination-item-active-border-l-delta",
description: "The pagination item border Lightness delta when active",
},
{
id: "pagination-item-focus-border-l-delta",
description: "The pagination item border Lightness delta when focused",
},
{
id: "pagination-item-color-l",
description: "The pagination item color Lightness",
},
{
id: "pagination-item-font-size",
description: "The pagination item font size",
},
{ id: "pagination-item-margin", description: "The pagination item margin" },
{
id: "pagination-item-padding-left",
description: "The pagination item left padding",
},
{
id: "pagination-item-padding-right",
description: "The pagination item right padding",
},
{
id: "pagination-item-outer-shadow-h",
description: "The pagination item outer shadow main Hue",
},
{
id: "pagination-item-outer-shadow-s",
description: "The pagination item outer shadow main Saturation",
},
{
id: "pagination-item-outer-shadow-l",
description: "The pagination item outer shadow main Lightness",
},
{
id: "pagination-item-outer-shadow-a",
description: "The pagination item outer shadow main transparency",
},
{
id: "pagination-nav-padding-left",
description: "The pagination nav left padding",
},
{
id: "pagination-nav-padding-right",
description: "The pagination nav right padding",
},
{
id: "pagination-disabled-color",
description: "The pagination item color when disabled",
},
{
id: "pagination-disabled-background-color",
description: "The pagination item background color when disabled",
},
{
id: "pagination-disabled-border-color",
description: "The pagination item border color when disabled",
},
{
id: "pagination-current-color",
description: "The current pagination color",
},
{
id: "pagination-current-background-color",
description: "The current pagination background color",
},
{
id: "pagination-current-border-color",
description: "The current pagination border color",
},
{
id: "pagination-ellipsis-color",
description: "The pagination ellipsis color",
},
{
id: "pagination-shadow-inset",
description: "The pagination item inset shadow",
},
{
id: "pagination-selected-item-h",
description: "The pagination item main Hue when selected",
},
{
id: "pagination-selected-item-s",
description: "The pagination item main Saturation when selected",
},
{
id: "pagination-selected-item-l",
description: "The pagination item main Lightness when selected",
},
{
id: "pagination-selected-item-background-l",
description: "The pagination item background Lightness when selected",
},
{
id: "pagination-selected-item-border-l",
description: "The pagination item border Lightness when selected",
},
{
id: "pagination-selected-item-color-l",
description: "The pagination item color Lightness when selected",
},
],
panel: [
{ id: "panel-margin", description: "The panel margin" },
{ id: "panel-item-border", description: "The panel item border" },
{ id: "panel-radius", description: "The panel border radius" },
{ id: "panel-shadow", description: "The panel box shadow" },
{
id: "panel-heading-line-height",
description: "The panel heading line height",
},
{ id: "panel-heading-padding", description: "The panel heading padding" },
{
id: "panel-heading-radius",
description: "The panel heading border radius",
},
{ id: "panel-heading-size", description: "The panel heading font size" },
{
id: "panel-heading-weight",
description: "The panel heading font weight",
},
{ id: "panel-tabs-font-size", description: "The panel font size" },
{
id: "panel-tab-border-bottom-color",
description: "The panel bottom border color",
},
{
id: "panel-tab-border-bottom-style",
description: "The panel bottom border style",
},
{
id: "panel-tab-border-bottom-width",
description: "The panel bottom border width",
},
{
id: "panel-tab-active-color",
description: "The panel tab color when active",
},
{ id: "panel-list-item-color", description: "The panel list item color" },
{
id: "panel-list-item-hover-color",
description: "The panel list item color when hovered",
},
{ id: "panel-block-color", description: "The panel block color" },
{
id: "panel-block-hover-background-color",
description: "The panel block background color when hovered",
},
{
id: "panel-block-active-border-left-color",
description: "The panel block left border color when active",
},
{
id: "panel-block-active-color",
description: "The panel block color when active",
},
{
id: "panel-block-active-icon-color",
description: "The panel block icon color when active",
},
{ id: "panel-icon-color", description: "The panel icon color" },
],
tabs: [
{
id: "tabs-border-bottom-color",
description: "The tabs bottom border color",
},
{
id: "tabs-border-bottom-style",
description: "The tabs bottom border style",
},
{
id: "tabs-border-bottom-width",
description: "The tabs bottom border width",
},
{ id: "tabs-link-color", description: "The tabs link color" },
{
id: "tabs-link-hover-border-bottom-color",
description: "The tabs link bottom border color when hovered",
},
{
id: "tabs-link-hover-color",
description: "The tabs link color when hovered",
},
{
id: "tabs-link-active-border-bottom-color",
description: "The tabs link bottom border color when active",
},
{
id: "tabs-link-active-color",
description: "The tabs link color when active",
},
{ id: "tabs-link-padding", description: "The tabs link padding" },
{
id: "tabs-boxed-link-radius",
description: "The boxed tabs link border radius",
},
{
id: "tabs-boxed-link-hover-background-color",
description: "The boxed tabs link background color when hovered",
},
{
id: "tabs-boxed-link-hover-border-bottom-color",
description: "The boxed tabs link bottom border color when hovered",
},
{
id: "tabs-boxed-link-active-background-color",
description: "The boxed tabs link background color when active",
},
{
id: "tabs-boxed-link-active-border-color",
description: "The boxed tabs link border color when active",
},
{
id: "tabs-boxed-link-active-border-bottom-color",
description: "The boxed tabs link bototm border color when active",
},
{
id: "tabs-toggle-link-border-color",
description: "The toggle tabs link border color",
},
{
id: "tabs-toggle-link-border-style",
description: "The toggle tabs link border style",
},
{
id: "tabs-toggle-link-border-width",
description: "The toggle tabs link border width",
},
{
id: "tabs-toggle-link-hover-background-color",
description: "The toggle tabs link background color when hovered",
},
{
id: "tabs-toggle-link-hover-border-color",
description: "The toggle tabs link border color when hovered",
},
{
id: "tabs-toggle-link-radius",
description: "The toggle tabs link border radius",
},
{
id: "tabs-toggle-link-active-background-color",
description: "The toggle tabs link background color when active",
},
{
id: "tabs-toggle-link-active-border-color",
description: "The toggle tabs link border color when active",
},
{
id: "tabs-toggle-link-active-color",
description: "The toggle tabs link color when active",
},
],
box: [ box: [
{ id: "box-background-color", description: "The box background color" }, { id: "box-background-color", description: "The box background color" },
{ id: "box-color", description: "The box text color" }, { id: "box-color", description: "The box text color" },

4
docs/_react/bulma-customizer/src/pages/Colors.jsx
View File

@ -2,9 +2,11 @@ import Color from "../components/Color";
const COLORS = ["primary", "link", "info", "success", "warning", "danger"]; const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
import cn from "root/App.module.css";
function Colors() { function Colors() {
return ( return (
<div> <div className={cn.colors}>
{COLORS.map((color) => { {COLORS.map((color) => {
return <Color key={color} color={color} />; return <Color key={color} color={color} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/Generic.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "../components/VarItem"; import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants"; import { CSSVAR_KEYS } from "../constants";
import cn from "root/App.module.css";
function Generic() { function Generic() {
const ids = CSSVAR_KEYS.generic.map((i) => i.id); const ids = CSSVAR_KEYS.generic.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/Other.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "../components/VarItem"; import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants"; import { CSSVAR_KEYS } from "../constants";
import cn from "root/App.module.css";
function Other() { function Other() {
const ids = CSSVAR_KEYS.other.map((i) => i.id); const ids = CSSVAR_KEYS.other.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/Scheme.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "../components/VarItem"; import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants"; import { CSSVAR_KEYS } from "../constants";
import cn from "root/App.module.css";
function Scheme() { function Scheme() {
const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id); const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{schemeIds.map((schemeId) => { {schemeIds.map((schemeId) => {
return <VarItem key={schemeId} id={schemeId} />; return <VarItem key={schemeId} id={schemeId} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/Skeleton.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "../components/VarItem"; import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants"; import { CSSVAR_KEYS } from "../constants";
import cn from "root/App.module.css";
function Skeleton() { function Skeleton() {
const ids = CSSVAR_KEYS.skeleton.map((i) => i.id); const ids = CSSVAR_KEYS.skeleton.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/Typography.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "../components/VarItem"; import VarItem from "../components/VarItem";
import { CSSVAR_KEYS } from "../constants"; import { CSSVAR_KEYS } from "../constants";
import cn from "root/App.module.css";
function Typography() { function Typography() {
const ids = CSSVAR_KEYS.typography.map((i) => i.id); const ids = CSSVAR_KEYS.typography.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

18
docs/_react/bulma-customizer/src/pages/components/Breadcrumb.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Breadcrumb() {
const ids = CSSVAR_KEYS.breadcrumb.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Breadcrumb;

18
docs/_react/bulma-customizer/src/pages/components/Card.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Card() {
const ids = CSSVAR_KEYS.card.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Card;

18
docs/_react/bulma-customizer/src/pages/components/Dropdown.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Dropdown() {
const ids = CSSVAR_KEYS.dropdown.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Dropdown;

18
docs/_react/bulma-customizer/src/pages/components/Menu.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Menu() {
const ids = CSSVAR_KEYS.menu.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Menu;

18
docs/_react/bulma-customizer/src/pages/components/Message.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Message() {
const ids = CSSVAR_KEYS.message.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Message;

18
docs/_react/bulma-customizer/src/pages/components/Modal.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Modal() {
const ids = CSSVAR_KEYS.modal.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Modal;

18
docs/_react/bulma-customizer/src/pages/components/Navbar.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Navbar() {
const ids = CSSVAR_KEYS.navbar.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Navbar;

18
docs/_react/bulma-customizer/src/pages/components/Pagination.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Pagination() {
const ids = CSSVAR_KEYS.pagination.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Pagination;

18
docs/_react/bulma-customizer/src/pages/components/Panel.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Panel() {
const ids = CSSVAR_KEYS.panel.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Panel;

18
docs/_react/bulma-customizer/src/pages/components/Tabs.jsx Normal file
View File

@ -0,0 +1,18 @@
import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Tabs() {
const ids = CSSVAR_KEYS.tabs.map((i) => i.id);
return (
<div className={cn.items}>
{ids.map((id) => {
return <VarItem key={id} id={id} />;
})}
</div>
);
}
export default Tabs;

4
docs/_react/bulma-customizer/src/pages/elements/Box.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Box() { function Box() {
const ids = CSSVAR_KEYS.box.map((i) => i.id); const ids = CSSVAR_KEYS.box.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
<div className="box">I am in a box</div> <div className="box">I am in a box</div>
{ids.map((id) => { {ids.map((id) => {

4
docs/_react/bulma-customizer/src/pages/elements/Content.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Content() { function Content() {
const ids = CSSVAR_KEYS.content.map((i) => i.id); const ids = CSSVAR_KEYS.content.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Delete.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Delete() { function Delete() {
const ids = CSSVAR_KEYS.delete.map((i) => i.id); const ids = CSSVAR_KEYS.delete.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Icon.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Icon() { function Icon() {
const ids = CSSVAR_KEYS.icon.map((i) => i.id); const ids = CSSVAR_KEYS.icon.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Notification.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Notification() { function Notification() {
const ids = CSSVAR_KEYS.notification.map((i) => i.id); const ids = CSSVAR_KEYS.notification.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Progress.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Progress() { function Progress() {
const ids = CSSVAR_KEYS.progress.map((i) => i.id); const ids = CSSVAR_KEYS.progress.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Table.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Table() { function Table() {
const ids = CSSVAR_KEYS.table.map((i) => i.id); const ids = CSSVAR_KEYS.table.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Tag.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Tag() { function Tag() {
const ids = CSSVAR_KEYS.tag.map((i) => i.id); const ids = CSSVAR_KEYS.tag.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/elements/Title.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Title() { function Title() {
const ids = CSSVAR_KEYS.title.map((i) => i.id); const ids = CSSVAR_KEYS.title.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/form/Control.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Control() { function Control() {
const ids = CSSVAR_KEYS.control.map((i) => i.id); const ids = CSSVAR_KEYS.control.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/form/File.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function File() { function File() {
const ids = CSSVAR_KEYS.file.map((i) => i.id); const ids = CSSVAR_KEYS.file.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/form/Input.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Input() { function Input() {
const ids = CSSVAR_KEYS.input.map((i) => i.id); const ids = CSSVAR_KEYS.input.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/grid/Columns.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Columns() { function Columns() {
const ids = CSSVAR_KEYS.columns.map((i) => i.id); const ids = CSSVAR_KEYS.columns.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/grid/Grid.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Grid() { function Grid() {
const ids = CSSVAR_KEYS.grid.map((i) => i.id); const ids = CSSVAR_KEYS.grid.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/layout/Footer.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Footer() { function Footer() {
const ids = CSSVAR_KEYS.footer.map((i) => i.id); const ids = CSSVAR_KEYS.footer.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/layout/Hero.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Hero() { function Hero() {
const ids = CSSVAR_KEYS.hero.map((i) => i.id); const ids = CSSVAR_KEYS.hero.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/layout/Media.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Media() { function Media() {
const ids = CSSVAR_KEYS.media.map((i) => i.id); const ids = CSSVAR_KEYS.media.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

4
docs/_react/bulma-customizer/src/pages/layout/Section.jsx
View File

@ -1,11 +1,13 @@
import VarItem from "components/VarItem"; import VarItem from "components/VarItem";
import { CSSVAR_KEYS } from "root/constants"; import { CSSVAR_KEYS } from "root/constants";
import cn from "root/App.module.css";
function Section() { function Section() {
const ids = CSSVAR_KEYS.section.map((i) => i.id); const ids = CSSVAR_KEYS.section.map((i) => i.id);
return ( return (
<div> <div className={cn.items}>
{ids.map((id) => { {ids.map((id) => {
return <VarItem key={id} id={id} />; return <VarItem key={id} id={id} />;
})} })}

5
docs/_sass/docs/hero.scss
View File

@ -10,6 +10,7 @@
padding: calc(var(--scale) * 3rem); padding: calc(var(--scale) * 3rem);
text-align: center; text-align: center;
&.is-horizontal,
&.is-docs { &.is-docs {
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
@ -30,6 +31,10 @@
justify-content: flex-start; justify-content: flex-start;
} }
} }
&.is-horizontal {
padding: calc(var(--scale) * 3rem);
}
} }
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {

11
docs/assets/css/website.css
View File

@ -36819,23 +36819,26 @@ has-background-moon.is-hoverable:active {
padding: calc(var(--scale) * 3rem); padding: calc(var(--scale) * 3rem);
text-align: center; text-align: center;
} }
.bd-hero.is-docs { .bd-hero.is-horizontal, .bd-hero.is-docs {
align-items: center; align-items: center;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
padding: 0; padding: 0;
text-align: left; text-align: left;
} }
.bd-hero.is-docs .bd-hero-body { .bd-hero.is-horizontal .bd-hero-body, .bd-hero.is-docs .bd-hero-body {
flex-basis: 20em; flex-basis: 20em;
flex-grow: 1; flex-grow: 1;
} }
.bd-hero.is-docs .bd-hr { .bd-hero.is-horizontal .bd-hr, .bd-hero.is-docs .bd-hr {
margin-left: 0; margin-left: 0;
} }
.bd-hero.is-docs .bd-hero-prints { .bd-hero.is-horizontal .bd-hero-prints, .bd-hero.is-docs .bd-hero-prints {
justify-content: flex-start; justify-content: flex-start;
} }
.bd-hero.is-horizontal {
padding: calc(var(--scale) * 3rem);
}
@media screen and (min-width: 1000px) { @media screen and (min-width: 1000px) {
.bd-hero.is-docs { .bd-hero.is-docs {

2
docs/assets/css/website.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
docs/assets/javascript/bulma-customizer/index.css
View File

File diff suppressed because one or more lines are too long

29
docs/assets/javascript/bulma-customizer/index.html
View File

@ -10,5 +10,34 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="scope" class="is-hidden">
<div class="breadcrumb"></div>
<div class="card"></div>
<div class="dropdown"></div>
<div class="menu"></div>
<div class="message"></div>
<div class="modal"></div>
<div class="navbar"></div>
<div class="pagination"></div>
<div class="panel"></div>
<div class="tabs"></div>
<div class="box"></div>
<div class="content"></div>
<div class="delete"></div>
<div class="icon"></div>
<div class="notification"></div>
<div class="progress"></div>
<div class="table"></div>
<div class="tag"></div>
<div class="title"></div>
<input class="input">
<div class="file"></div>
<div class="columns"></div>
<div class="grid"></div>
<div class="footer"></div>
<div class="hero"></div>
<div class="media"></div>
<div class="section"></div>
</div>
</body> </body>
</html> </html>

22
docs/assets/javascript/bulma-customizer/index.js
View File

File diff suppressed because one or more lines are too long

33
docs/customizer.html
View File

@ -4,10 +4,39 @@ theme: customizer
route: customizer route: customizer
--- ---
{% include global/header.html %} {% include docs/hero.html title="The Bulma {% include global/header.html %} {% include docs/hero.html variant="horizontal" title="The Bulma
Customizer" subtitle="Gorgeous websites built with Bulma." %} Customizer" subtitle="Easily customize Bulma with your own CSS variables." %}
<div id="root"></div> <div id="root"></div>
<div id="scope" class="is-hidden">
<div class="breadcrumb"></div>
<div class="card"></div>
<div class="dropdown"></div>
<div class="menu"></div>
<div class="message"></div>
<div class="modal"></div>
<div class="navbar"></div>
<div class="pagination"></div>
<div class="panel"></div>
<div class="tabs"></div>
<div class="box"></div>
<div class="content"></div>
<div class="delete"></div>
<div class="icon"></div>
<div class="notification"></div>
<div class="progress"></div>
<div class="table"></div>
<div class="tag"></div>
<div class="title"></div>
<input class="input">
<div class="file"></div>
<div class="columns"></div>
<div class="grid"></div>
<div class="footer"></div>
<div class="hero"></div>
<div class="media"></div>
<div class="section"></div>
</div>
<link <link
rel="stylesheet" rel="stylesheet"