mirror of
https://github.com/jgthms/bulma.git
synced 2024-10-17 09:04:18 +00:00
Add Components
This commit is contained in:
Jeremy Thomas
parent
303da19588
commit
493aa56bbb
@ -9,6 +9,16 @@
|
||||
<body>
|
||||
<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>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { createContext, useEffect, useRef, useState } from "react";
|
||||
import classNames from "classnames";
|
||||
import "../../../../css/bulma.css";
|
||||
import cn from "./App.module.css";
|
||||
|
||||
import { CSSVAR_KEYS } from "./constants";
|
||||
import { unslug } from "./utils";
|
||||
@ -12,6 +13,17 @@ import Other from "./pages/Other";
|
||||
import Generic from "./pages/Generic";
|
||||
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 Content from "./pages/elements/Content";
|
||||
import Delete from "./pages/elements/Delete";
|
||||
@ -46,6 +58,17 @@ const PAGE_TO_COMPONENT = {
|
||||
other: <Other />,
|
||||
generic: <Generic />,
|
||||
skeleton: <Skeleton />,
|
||||
// Components
|
||||
breadcrumb: <Breadcrumb />,
|
||||
card: <Card />,
|
||||
dropdown: <Dropdown />,
|
||||
menu: <Menu />,
|
||||
message: <Message />,
|
||||
modal: <Modal />,
|
||||
navbar: <Navbar />,
|
||||
pagination: <Pagination />,
|
||||
panel: <Panel />,
|
||||
tabs: <Tabs />,
|
||||
// Elements
|
||||
box: <Box />,
|
||||
content: <Content />,
|
||||
@ -69,38 +92,58 @@ const PAGE_TO_COMPONENT = {
|
||||
media: <Media />,
|
||||
section: <Section />,
|
||||
};
|
||||
const PAGE_IDS = [
|
||||
"colors",
|
||||
"scheme",
|
||||
"typography",
|
||||
"other",
|
||||
"generic",
|
||||
"skeleton",
|
||||
"box",
|
||||
"content",
|
||||
"delete",
|
||||
"icon",
|
||||
"notification",
|
||||
"progress",
|
||||
"table",
|
||||
"tag",
|
||||
"title",
|
||||
"control",
|
||||
"input",
|
||||
"file",
|
||||
"columns",
|
||||
"grid",
|
||||
"footer",
|
||||
"hero",
|
||||
"media",
|
||||
"section",
|
||||
const TAB_IDS = [
|
||||
"Global Variables",
|
||||
"Components",
|
||||
"Elements",
|
||||
"Form",
|
||||
"Grid",
|
||||
"Layout",
|
||||
];
|
||||
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({
|
||||
cssvars: {},
|
||||
currentTab: "",
|
||||
currentPage: "",
|
||||
getVar: () => {},
|
||||
changeTab: () => {},
|
||||
changePage: () => {},
|
||||
updateVar: () => {},
|
||||
});
|
||||
|
||||
@ -108,11 +151,20 @@ function App() {
|
||||
const styleRef = useRef();
|
||||
const initialContext = {
|
||||
cssvars: {},
|
||||
currentTab: "Global Variables",
|
||||
currentPage: "delete",
|
||||
getVar: (id) => {
|
||||
return context.cssvars[id];
|
||||
},
|
||||
changeTab: (pageId) => {
|
||||
changeTab: (tabId) => {
|
||||
setContext((context) => {
|
||||
return {
|
||||
...context,
|
||||
currentTab: tabId,
|
||||
};
|
||||
});
|
||||
},
|
||||
changePage: (pageId) => {
|
||||
setContext((context) => {
|
||||
return {
|
||||
...context,
|
||||
@ -122,16 +174,6 @@ function App() {
|
||||
},
|
||||
updateVar: (id, newValue) => {
|
||||
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 {
|
||||
...context,
|
||||
cssvars: {
|
||||
@ -147,14 +189,34 @@ function App() {
|
||||
};
|
||||
const [context, setContext] = useState(initialContext);
|
||||
|
||||
const handleTabChange = (event, pageId) => {
|
||||
const handleTabChange = (event, tabId) => {
|
||||
event.preventDefault();
|
||||
context.changeTab(pageId);
|
||||
context.changeTab(tabId);
|
||||
context.changePage(PAGE_IDS[tabId][0]);
|
||||
};
|
||||
|
||||
const handlePageChange = (event, pageId) => {
|
||||
event.preventDefault();
|
||||
context.changePage(pageId);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const styles = {
|
||||
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")),
|
||||
content: window.getComputedStyle(document.querySelector(".content")),
|
||||
delete: window.getComputedStyle(document.querySelector(".delete")),
|
||||
@ -177,14 +239,47 @@ function App() {
|
||||
};
|
||||
|
||||
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);
|
||||
|
||||
allKeyIds.map((key) => {
|
||||
let original;
|
||||
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";
|
||||
original = styles.box.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("content")) {
|
||||
@ -300,22 +395,47 @@ function App() {
|
||||
}
|
||||
}, [context.cssvars]);
|
||||
|
||||
const tabsStyle = {
|
||||
"--bulma-tabs-link-active-color": "var(--bulma-primary)",
|
||||
};
|
||||
|
||||
return (
|
||||
<CustomizerContext.Provider value={context}>
|
||||
<style ref={styleRef} />
|
||||
<section className="section">
|
||||
<div className="buttons">
|
||||
{PAGE_IDS.map((pageId) => {
|
||||
<div className={cn.app}>
|
||||
<div className="tabs is-primary is-boxed is-centered" style={tabsStyle}>
|
||||
<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({
|
||||
button: true,
|
||||
"is-link": pageId === context.currentPage,
|
||||
"is-primary": pageId === context.currentPage,
|
||||
});
|
||||
|
||||
return (
|
||||
<button
|
||||
className={buttonClass}
|
||||
key={pageId}
|
||||
onClick={(e) => handleTabChange(e, pageId)}
|
||||
onClick={(e) => handlePageChange(e, pageId)}
|
||||
>
|
||||
{unslug(pageId)}
|
||||
</button>
|
||||
@ -324,7 +444,7 @@ function App() {
|
||||
</div>
|
||||
|
||||
{PAGE_TO_COMPONENT[context.currentPage]}
|
||||
</section>
|
||||
</div>
|
||||
</CustomizerContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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
|
||||
)
|
||||
);
|
||||
}
|
||||
@ -1,9 +1,11 @@
|
||||
.main {
|
||||
background-color: var(--bulma-body-background-color);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 1.5rem;
|
||||
border-bottom: 1px solid var(--bulma-border);
|
||||
padding: 1.25rem 0;
|
||||
gap: var(--var-item-gap);
|
||||
box-shadow: 0 0 0 1px var(--bulma-border);
|
||||
padding: var(--var-item-padding);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.side {
|
||||
@ -19,6 +21,7 @@
|
||||
}
|
||||
|
||||
.name {
|
||||
color: var(--bulma-primary);
|
||||
gap: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
@ -5,6 +5,7 @@ import Slider from "./Slider";
|
||||
import { CustomizerContext } from "../App";
|
||||
|
||||
import cn from "./VarItem.module.css";
|
||||
import classNames from "classnames";
|
||||
|
||||
function VarItem({ id }) {
|
||||
const { cssvars, updateVar } = useContext(CustomizerContext);
|
||||
@ -26,6 +27,11 @@ function VarItem({ id }) {
|
||||
};
|
||||
|
||||
const isDisabled = cssvar.current == cssvar.start;
|
||||
const resetClass = classNames({
|
||||
button: true,
|
||||
"is-danger is-outlined": !isDisabled,
|
||||
});
|
||||
const resetStyle = isDisabled ? { opacity: 0.1 } : {};
|
||||
|
||||
let control;
|
||||
|
||||
@ -70,11 +76,14 @@ function VarItem({ id }) {
|
||||
<code>{cssvar.id}</code>
|
||||
</div>
|
||||
|
||||
<div className={cn.description}>{cssvar.description}</div>
|
||||
|
||||
<div className="buttons are-small">
|
||||
<button
|
||||
className="button"
|
||||
className={resetClass}
|
||||
onClick={handleReset}
|
||||
disabled={isDisabled}
|
||||
style={resetStyle}
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
@ -82,8 +91,6 @@ function VarItem({ id }) {
|
||||
</div>
|
||||
|
||||
<div className={cn.slider}>{control}</div>
|
||||
|
||||
<div className={cn.description}>{cssvar.description}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,9 +1,10 @@
|
||||
.main {
|
||||
background-color: var(--bulma-body-background-color);
|
||||
align-items: start;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
border-bottom: 1px solid var(--bulma-border);
|
||||
padding: 1.25rem;
|
||||
gap: var(--var-item-gap);
|
||||
box-shadow: 0 0 0 1px var(--bulma-border);
|
||||
padding: var(--var-item-padding);
|
||||
transition-property: background-color;
|
||||
transition-duration: var(--bulma-duration);
|
||||
}
|
||||
@ -14,7 +15,7 @@
|
||||
|
||||
.side {
|
||||
flex-shrink: 0;
|
||||
width: 15rem;
|
||||
width: var(--var-item-side-width);
|
||||
}
|
||||
|
||||
.name {
|
||||
@ -25,6 +26,7 @@
|
||||
}
|
||||
|
||||
.name code {
|
||||
color: var(--bulma-primary);
|
||||
font-size: 1em;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
@ -36,8 +38,8 @@
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
/* padding: 2px 0; */
|
||||
width: 30rem;
|
||||
flex-shrink: 0;
|
||||
width: var(--var-item-slider-width);
|
||||
}
|
||||
|
||||
.form {
|
||||
@ -64,4 +66,6 @@
|
||||
.description {
|
||||
flex-shrink: 1;
|
||||
flex-grow: 1;
|
||||
margin: -0.25rem 0 0.5rem;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
@ -246,6 +246,778 @@ export const CSSVAR_KEYS = {
|
||||
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: [
|
||||
{ id: "box-background-color", description: "The box background color" },
|
||||
{ id: "box-color", description: "The box text color" },
|
||||
|
||||
@ -2,9 +2,11 @@ import Color from "../components/Color";
|
||||
|
||||
const COLORS = ["primary", "link", "info", "success", "warning", "danger"];
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Colors() {
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.colors}>
|
||||
{COLORS.map((color) => {
|
||||
return <Color key={color} color={color} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Generic() {
|
||||
const ids = CSSVAR_KEYS.generic.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Other() {
|
||||
const ids = CSSVAR_KEYS.other.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Scheme() {
|
||||
const schemeIds = CSSVAR_KEYS.scheme.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{schemeIds.map((schemeId) => {
|
||||
return <VarItem key={schemeId} id={schemeId} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Skeleton() {
|
||||
const ids = CSSVAR_KEYS.skeleton.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Typography() {
|
||||
const ids = CSSVAR_KEYS.typography.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -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
18
docs/_react/bulma-customizer/src/pages/components/Card.jsx
Normal 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;
|
||||
@ -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
18
docs/_react/bulma-customizer/src/pages/components/Menu.jsx
Normal 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;
|
||||
@ -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
18
docs/_react/bulma-customizer/src/pages/components/Modal.jsx
Normal 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
18
docs/_react/bulma-customizer/src/pages/components/Navbar.jsx
Normal 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;
|
||||
@ -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
18
docs/_react/bulma-customizer/src/pages/components/Panel.jsx
Normal 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
18
docs/_react/bulma-customizer/src/pages/components/Tabs.jsx
Normal 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;
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Box() {
|
||||
const ids = CSSVAR_KEYS.box.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
<div className="box">I am in a box</div>
|
||||
|
||||
{ids.map((id) => {
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Content() {
|
||||
const ids = CSSVAR_KEYS.content.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Delete() {
|
||||
const ids = CSSVAR_KEYS.delete.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Icon() {
|
||||
const ids = CSSVAR_KEYS.icon.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Notification() {
|
||||
const ids = CSSVAR_KEYS.notification.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Progress() {
|
||||
const ids = CSSVAR_KEYS.progress.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Table() {
|
||||
const ids = CSSVAR_KEYS.table.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Tag() {
|
||||
const ids = CSSVAR_KEYS.tag.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Title() {
|
||||
const ids = CSSVAR_KEYS.title.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Control() {
|
||||
const ids = CSSVAR_KEYS.control.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function File() {
|
||||
const ids = CSSVAR_KEYS.file.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Input() {
|
||||
const ids = CSSVAR_KEYS.input.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Columns() {
|
||||
const ids = CSSVAR_KEYS.columns.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Grid() {
|
||||
const ids = CSSVAR_KEYS.grid.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Footer() {
|
||||
const ids = CSSVAR_KEYS.footer.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Hero() {
|
||||
const ids = CSSVAR_KEYS.hero.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Media() {
|
||||
const ids = CSSVAR_KEYS.media.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -1,11 +1,13 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
import cn from "root/App.module.css";
|
||||
|
||||
function Section() {
|
||||
const ids = CSSVAR_KEYS.section.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className={cn.items}>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
|
||||
@ -10,6 +10,7 @@
|
||||
padding: calc(var(--scale) * 3rem);
|
||||
text-align: center;
|
||||
|
||||
&.is-horizontal,
|
||||
&.is-docs {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
@ -30,6 +31,10 @@
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-horizontal {
|
||||
padding: calc(var(--scale) * 3rem);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
|
||||
@ -36819,23 +36819,26 @@ has-background-moon.is-hoverable:active {
|
||||
padding: calc(var(--scale) * 3rem);
|
||||
text-align: center;
|
||||
}
|
||||
.bd-hero.is-docs {
|
||||
.bd-hero.is-horizontal, .bd-hero.is-docs {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
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-grow: 1;
|
||||
}
|
||||
.bd-hero.is-docs .bd-hr {
|
||||
.bd-hero.is-horizontal .bd-hr, .bd-hero.is-docs .bd-hr {
|
||||
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;
|
||||
}
|
||||
.bd-hero.is-horizontal {
|
||||
padding: calc(var(--scale) * 3rem);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px) {
|
||||
.bd-hero.is-docs {
|
||||
|
||||
2
docs/assets/css/website.min.css
vendored
2
docs/assets/css/website.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -10,5 +10,34 @@
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -4,10 +4,39 @@ theme: customizer
|
||||
route: customizer
|
||||
---
|
||||
|
||||
{% include global/header.html %} {% include docs/hero.html title="The Bulma
|
||||
Customizer" subtitle="Gorgeous websites built with Bulma." %}
|
||||
{% include global/header.html %} {% include docs/hero.html variant="horizontal" title="The Bulma
|
||||
Customizer" subtitle="Easily customize Bulma with your own CSS variables." %}
|
||||
|
||||
<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
|
||||
rel="stylesheet"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user