mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add all Elements
This commit is contained in:
Jeremy Thomas
parent
5b9f3a0d2a
commit
7670f4eed9
@ -8,7 +8,17 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<div class="box">Box</div>
|
||||
<div class="is-hidden">
|
||||
<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>
|
||||
</div>
|
||||
<script type="module" src="/src/main.jsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -11,7 +11,16 @@ import Typography from "./pages/Typography";
|
||||
import Other from "./pages/Other";
|
||||
import Generic from "./pages/Generic";
|
||||
import Skeleton from "./pages/Skeleton";
|
||||
import Box from "./pages/Box";
|
||||
|
||||
import Box from "./pages/elements/Box";
|
||||
import Content from "./pages/elements/Content";
|
||||
import Delete from "./pages/elements/Delete";
|
||||
import Icon from "./pages/elements/Icon";
|
||||
import Notification from "./pages/elements/Notification";
|
||||
import Progress from "./pages/elements/Progress";
|
||||
import Table from "./pages/elements/Table";
|
||||
import Tag from "./pages/elements/Tag";
|
||||
import Title from "./pages/elements/Title";
|
||||
|
||||
const SUFFIX_TO_KIND = {
|
||||
"-h": "hue",
|
||||
@ -29,6 +38,14 @@ const PAGE_TO_COMPONENT = {
|
||||
generic: <Generic />,
|
||||
skeleton: <Skeleton />,
|
||||
box: <Box />,
|
||||
content: <Content />,
|
||||
delete: <Delete />,
|
||||
icon: <Icon />,
|
||||
notification: <Notification />,
|
||||
progress: <Progress />,
|
||||
table: <Table />,
|
||||
tag: <Tag />,
|
||||
title: <Title />,
|
||||
};
|
||||
const PAGE_IDS = [
|
||||
"colors",
|
||||
@ -38,6 +55,14 @@ const PAGE_IDS = [
|
||||
"generic",
|
||||
"skeleton",
|
||||
"box",
|
||||
"content",
|
||||
"delete",
|
||||
"icon",
|
||||
"notification",
|
||||
"progress",
|
||||
"table",
|
||||
"tag",
|
||||
"title",
|
||||
];
|
||||
|
||||
export const CustomizerContext = createContext({
|
||||
@ -51,7 +76,7 @@ export const CustomizerContext = createContext({
|
||||
function App() {
|
||||
const initialContext = {
|
||||
cssvars: {},
|
||||
currentPage: "box",
|
||||
currentPage: "delete",
|
||||
getVar: (id) => {
|
||||
return context.cssvars[id];
|
||||
},
|
||||
@ -96,14 +121,19 @@ function App() {
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
// const elements = document.querySelectorAll("html, .box");
|
||||
// const allStyles = Array.from(elements).map((element) =>
|
||||
// getComputedStyle(element),
|
||||
// );
|
||||
|
||||
const styles = {
|
||||
root: window.getComputedStyle(document.documentElement),
|
||||
box: window.getComputedStyle(document.querySelector(".box")),
|
||||
content: window.getComputedStyle(document.querySelector(".content")),
|
||||
delete: window.getComputedStyle(document.querySelector(".delete")),
|
||||
icon: window.getComputedStyle(document.querySelector(".icon")),
|
||||
notification: window.getComputedStyle(
|
||||
document.querySelector(".notification"),
|
||||
),
|
||||
progress: window.getComputedStyle(document.querySelector(".progress")),
|
||||
table: window.getComputedStyle(document.querySelector(".table")),
|
||||
tag: window.getComputedStyle(document.querySelector(".tag")),
|
||||
title: window.getComputedStyle(document.querySelector(".title")),
|
||||
};
|
||||
|
||||
const cssvars = {};
|
||||
@ -117,6 +147,30 @@ function App() {
|
||||
if (key.startsWith("box")) {
|
||||
scope = ".box";
|
||||
original = styles.box.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("content")) {
|
||||
scope = ".content";
|
||||
original = styles.content.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("delete")) {
|
||||
scope = ".delete";
|
||||
original = styles.delete.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("icon")) {
|
||||
scope = ".icon";
|
||||
original = styles.icon.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("notification")) {
|
||||
scope = ".notification";
|
||||
original = styles.notification.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("progress")) {
|
||||
scope = ".progress";
|
||||
original = styles.progress.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("table")) {
|
||||
scope = ".table";
|
||||
original = styles.table.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("tag")) {
|
||||
scope = ".tag";
|
||||
original = styles.tag.getPropertyValue(`--bulma-${key}`);
|
||||
} else if (key.startsWith("title")) {
|
||||
scope = ".title";
|
||||
original = styles.title.getPropertyValue(`--bulma-${key}`);
|
||||
} else {
|
||||
original = styles.root.getPropertyValue(`--bulma-${key}`);
|
||||
}
|
||||
|
||||
@ -26,7 +26,7 @@
|
||||
|
||||
.name code {
|
||||
font-size: 1.25em;
|
||||
font-weight: 600;
|
||||
font-weight: 400;
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
@ -35,7 +35,7 @@
|
||||
align-items: center;
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
padding: 2px 0;
|
||||
/* padding: 2px 0; */
|
||||
width: 30rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@ -261,4 +261,265 @@ export const CSSVAR_KEYS = {
|
||||
description: "The box link shadow when active",
|
||||
},
|
||||
],
|
||||
content: [
|
||||
{ id: "content-heading-color", description: "The content headings color" },
|
||||
{
|
||||
id: "content-heading-weight",
|
||||
description: "The content headings font weight",
|
||||
},
|
||||
{
|
||||
id: "content-heading-line-height",
|
||||
description: "The content headings line height",
|
||||
},
|
||||
{
|
||||
id: "content-block-margin-bottom",
|
||||
description: "The content blocks margin bottom",
|
||||
},
|
||||
{
|
||||
id: "content-blockquote-background-color",
|
||||
description: "The content blockquotes background color",
|
||||
},
|
||||
{
|
||||
id: "content-blockquote-border-left",
|
||||
description: "The content blockquotes left border",
|
||||
},
|
||||
{
|
||||
id: "content-blockquote-padding",
|
||||
description: "The content blockquotes padding",
|
||||
},
|
||||
{ id: "content-pre-padding", description: "The content pres padding" },
|
||||
{
|
||||
id: "content-table-cell-border",
|
||||
description: "The content table cells border",
|
||||
},
|
||||
{
|
||||
id: "content-table-cell-border-width",
|
||||
description: "The content table cells border width",
|
||||
},
|
||||
{
|
||||
id: "content-table-cell-padding",
|
||||
description: "The content table cells heading color",
|
||||
},
|
||||
{
|
||||
id: "content-table-cell-heading-color",
|
||||
description: "The content table cells heading color",
|
||||
},
|
||||
{
|
||||
id: "content-table-head-cell-border-width",
|
||||
description: "The content table head cells border width",
|
||||
},
|
||||
{
|
||||
id: "content-table-head-cell-color",
|
||||
description: "The content table head cells color",
|
||||
},
|
||||
{
|
||||
id: "content-table-body-last-row-cell-border-bottom-width",
|
||||
description: "The content table last rows bottom border width",
|
||||
},
|
||||
{
|
||||
id: "content-table-foot-cell-border-width",
|
||||
description: "The content table foot cells border width",
|
||||
},
|
||||
{
|
||||
id: "content-table-foot-cell-color",
|
||||
description: "The content table foot cells heading color",
|
||||
},
|
||||
],
|
||||
delete: [
|
||||
{ id: "delete-dimensions", description: "The delete element dimensions" },
|
||||
{
|
||||
id: "delete-background-l",
|
||||
description: "The delete element background lightness",
|
||||
},
|
||||
{
|
||||
id: "delete-background-alpha",
|
||||
description: "The delete element background transparency",
|
||||
},
|
||||
{ id: "delete-color", description: "The delete element color" },
|
||||
],
|
||||
icon: [
|
||||
{ id: "icon-dimensions", description: "The icon element dimensions" },
|
||||
{
|
||||
id: "icon-dimensions-small",
|
||||
description: "The Small icon element dimensions",
|
||||
},
|
||||
{
|
||||
id: "icon-dimensions-medium",
|
||||
description: "The Medium icon element dimensions",
|
||||
},
|
||||
{
|
||||
id: "icon-dimensions-large",
|
||||
description: "The Large icon element dimensions",
|
||||
},
|
||||
{ id: "icon-text-spacing", description: "The icon element text spacing" },
|
||||
],
|
||||
notification: [
|
||||
{ id: "notification-h", description: "The notification main Hue" },
|
||||
{ id: "notification-s", description: "The notification main Saturation" },
|
||||
{
|
||||
id: "notification-background-l",
|
||||
description: "The notification background Lightness",
|
||||
},
|
||||
{
|
||||
id: "notification-color-l",
|
||||
description: "The notification main text color Lightness",
|
||||
},
|
||||
{
|
||||
id: "notification-code-background-color",
|
||||
description: "The notification code background color",
|
||||
},
|
||||
{
|
||||
id: "notification-radius",
|
||||
description: "The notification border radius",
|
||||
},
|
||||
{ id: "notification-padding", description: "The notification padding" },
|
||||
],
|
||||
progress: [
|
||||
{
|
||||
id: "progress-border-radius",
|
||||
description: "The progress bar border radius",
|
||||
},
|
||||
{
|
||||
id: "progress-bar-background-color",
|
||||
description: "The progress bar background color",
|
||||
},
|
||||
{
|
||||
id: "progress-value-background-color",
|
||||
description: "The progress value background color",
|
||||
},
|
||||
{
|
||||
id: "progress-indeterminate-duration",
|
||||
description: "The progress bar loading animation speed",
|
||||
},
|
||||
],
|
||||
table: [
|
||||
{ id: "table-color", description: "The table text color" },
|
||||
{ id: "table-background-color", description: "The table background color" },
|
||||
{
|
||||
id: "table-cell-border-color",
|
||||
description: "The table cells border color",
|
||||
},
|
||||
{
|
||||
id: "table-cell-border-style",
|
||||
description: "The table cells border style",
|
||||
},
|
||||
{
|
||||
id: "table-cell-border-width",
|
||||
description: "The table cells border width",
|
||||
},
|
||||
{ id: "table-cell-padding", description: "The table cells padding" },
|
||||
{
|
||||
id: "table-cell-heading-color",
|
||||
description: "The table heading cells text color",
|
||||
},
|
||||
{
|
||||
id: "table-cell-text-align",
|
||||
description: "The table cells text alignment",
|
||||
},
|
||||
{
|
||||
id: "table-head-cell-border-width",
|
||||
description: "The table head cells border width",
|
||||
},
|
||||
{
|
||||
id: "table-head-cell-color",
|
||||
description: "The table head cells text color",
|
||||
},
|
||||
{
|
||||
id: "table-foot-cell-border-width",
|
||||
description: "The table foot cells border width",
|
||||
},
|
||||
{
|
||||
id: "table-foot-cell-color",
|
||||
description: "The table foot cells text color",
|
||||
},
|
||||
{
|
||||
id: "table-head-background-color",
|
||||
description: "The table head background color",
|
||||
},
|
||||
{
|
||||
id: "table-body-background-color",
|
||||
description: "The table body background color",
|
||||
},
|
||||
{
|
||||
id: "table-foot-background-color",
|
||||
description: "The table foot background color",
|
||||
},
|
||||
{
|
||||
id: "table-row-hover-background-color",
|
||||
description: "The table rows hover background color",
|
||||
},
|
||||
{
|
||||
id: "table-row-active-background-color",
|
||||
description: "The table rows active background color",
|
||||
},
|
||||
{
|
||||
id: "table-row-active-color",
|
||||
description: "The table rows active text color",
|
||||
},
|
||||
{
|
||||
id: "table-striped-row-even-background-color",
|
||||
description: "The striped tables alternate rows background color",
|
||||
},
|
||||
{
|
||||
id: "table-striped-row-even-hover-background-color",
|
||||
description:
|
||||
"The striped tables alternate rows background color when hovered",
|
||||
},
|
||||
],
|
||||
tag: [
|
||||
{ id: "tag-h", description: "The tag elements Hue" },
|
||||
{ id: "tag-s", description: "The tag elements Saturation" },
|
||||
{
|
||||
id: "tag-background-l",
|
||||
description: "The tag elements background Lightness",
|
||||
},
|
||||
{
|
||||
id: "tag-background-l-delta",
|
||||
description: "The tag elements background Lightness delta",
|
||||
},
|
||||
{
|
||||
id: "tag-hover-background-l-delta",
|
||||
description: "The tag elements background Lightness when hovered",
|
||||
},
|
||||
{
|
||||
id: "tag-active-background-l-delta",
|
||||
description: "The tag elements background Lightness when active",
|
||||
},
|
||||
{ id: "tag-color-l", description: "The tag elements text color Lightness" },
|
||||
{ id: "tag-radius", description: "The tag elements border radius" },
|
||||
{ id: "tag-delete-margin", description: "The tag delete elements margin" },
|
||||
],
|
||||
title: [
|
||||
{ id: "title-color", description: "The title elements text color" },
|
||||
{ id: "title-family", description: "The title elements font family" },
|
||||
{ id: "title-size", description: "The title elements font size" },
|
||||
{ id: "title-weight", description: "The title elements font weight" },
|
||||
{ id: "title-line-height", description: "The title elements line height" },
|
||||
{
|
||||
id: "title-strong-color",
|
||||
description: "The title strong elements text color",
|
||||
},
|
||||
{
|
||||
id: "title-strong-weight",
|
||||
description: "The title strong elements font weight",
|
||||
},
|
||||
{ id: "title-sub-size", description: "The title sub elements font size" },
|
||||
{ id: "title-sup-size", description: "The title sup elements font size" },
|
||||
{ id: "subtitle-color", description: "The subtitle elements text color" },
|
||||
{ id: "subtitle-family", description: "The subtitle elements font family" },
|
||||
{ id: "subtitle-size", description: "The subtitle elements font size" },
|
||||
{ id: "subtitle-weight", description: "The subtitle elements font weight" },
|
||||
{
|
||||
id: "subtitle-line-height",
|
||||
description: "The subtitle elements line height",
|
||||
},
|
||||
{
|
||||
id: "subtitle-strong-color",
|
||||
description: "The subtitle strong elements text color",
|
||||
},
|
||||
{
|
||||
id: "subtitle-strong-weight",
|
||||
description: "The subtitle strong elements font weight",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import VarItem from "../components/VarItem";
|
||||
import { CSSVAR_KEYS } from "../constants";
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Box() {
|
||||
const ids = CSSVAR_KEYS.box.map((i) => i.id);
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Content.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Content.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Content() {
|
||||
const ids = CSSVAR_KEYS.content.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Content;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Delete.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Delete.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Delete() {
|
||||
const ids = CSSVAR_KEYS.delete.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Delete;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Icon.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Icon.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Icon() {
|
||||
const ids = CSSVAR_KEYS.icon.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Icon;
|
||||
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Notification() {
|
||||
const ids = CSSVAR_KEYS.notification.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Notification;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Progress.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Progress.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Progress() {
|
||||
const ids = CSSVAR_KEYS.progress.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Progress;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Table.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Table.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Table() {
|
||||
const ids = CSSVAR_KEYS.table.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Table;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Tag.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Tag.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Tag() {
|
||||
const ids = CSSVAR_KEYS.tag.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Tag;
|
||||
16
docs/_react/bulma-customizer/src/pages/elements/Title.jsx
Normal file
16
docs/_react/bulma-customizer/src/pages/elements/Title.jsx
Normal file
@ -0,0 +1,16 @@
|
||||
import VarItem from "components/VarItem";
|
||||
import { CSSVAR_KEYS } from "root/constants";
|
||||
|
||||
function Title() {
|
||||
const ids = CSSVAR_KEYS.title.map((i) => i.id);
|
||||
|
||||
return (
|
||||
<div>
|
||||
{ids.map((id) => {
|
||||
return <VarItem key={id} id={id} />;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Title;
|
||||
@ -14,4 +14,10 @@ export default defineConfig({
|
||||
},
|
||||
},
|
||||
plugins: [react()],
|
||||
resolve: {
|
||||
alias: {
|
||||
root: "/src",
|
||||
components: "/src/components",
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user