Skip to content

Commit b0eb71b

Browse files
macroingmacroing
committed
Add the Button and Input components.
1 parent f42eefc commit b0eb71b

File tree

6 files changed

+122
-2
lines changed

6 files changed

+122
-2
lines changed

‎dist/index.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
import Button from "./src/Button";
12
import DesktopMenuBar from "./src/DesktopMenuBar";
3+
import Input from "./src/Input";
24
import MenuBar from "./src/MenuBar";
35
import MobileMenuBar from "./src/MobileMenuBar";
46
import TabPane from "./src/TabPane";
57

6-
export { DesktopMenuBar, MenuBar, MobileMenuBar, TabPane };
8+
export { Button, DesktopMenuBar, Input, MenuBar, MobileMenuBar, TabPane };

‎src/Button.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import importedStyles from "./Button.module.css";
2+
3+
export default function Button(props) {
4+
let { children, styles, theme, ...rest } = props;
5+
6+
//If no styles property has been assigned, the imported CSS module will be used for styling.
7+
if (styles === null || styles === undefined) {
8+
styles = importedStyles;
9+
}
10+
11+
return (
12+
<button className={styles.button + (theme === "primary" ? " " + styles.button_primary : "") + (theme === "secondary" ? " " + styles.button_secondary : "")} {...rest}>
13+
{children}
14+
</button>
15+
);
16+
}

‎src/Button.module.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
.button {
2+
--src-button-background-color: #eeeeee;
3+
--src-button-background-color-disabled: #eeeeee;
4+
--src-button-background-color-hover: #ffffff;
5+
--src-button-border-color: #dddddd;
6+
--src-button-border-color-disabled: #dddddd;
7+
--src-button-border-color-hover: #dddddd;
8+
--src-button-color: #333333;
9+
--src-button-color-disabled: #dddddd;
10+
--src-button-color-hover: #1877f2;
11+
12+
align-items: center;
13+
background: linear-gradient(rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.1) 50%, transparent 50%, rgba(255, 255, 255, 0.1) 100%);
14+
background-color: var(--src-button-background-color);
15+
border: 1px solid var(--src-button-border-color);
16+
border-radius: 5px;
17+
box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.12);
18+
color: var(--src-button-color);
19+
display: flex;
20+
flex-direction: row;
21+
font-family: inherit;
22+
font-size: 16px;
23+
font-weight: bold;
24+
gap: 10px;
25+
justify-content: center;
26+
padding: 8px;
27+
}
28+
29+
.button.button_primary {
30+
--src-button-background-color-hover: #1877f2;
31+
--src-button-border-color-hover: #1877f2;
32+
--src-button-color-hover: #ffffff;
33+
}
34+
35+
.button.button_secondary {
36+
--src-button-background-color-hover: #f27718;
37+
--src-button-border-color-hover: #f27718;
38+
--src-button-color-hover: #ffffff;
39+
}
40+
41+
.button:hover {
42+
background-color: var(--src-button-background-color-hover);
43+
border-color: var(--src-button-border-color-hover);
44+
color: var(--src-button-color-hover);
45+
cursor: pointer;
46+
}
47+
48+
.button:disabled {
49+
background-color: var(--src-button-background-color-disabled);
50+
border-color: var(--src-button-border-color-disabled);
51+
color: var(--src-button-color-disabled);
52+
cursor: default;
53+
}

‎src/Input.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import importedStyles from "./Input.module.css";
2+
3+
export default function Input(props) {
4+
let { styles, ...rest } = props;
5+
6+
//If no styles property has been assigned, the imported CSS module will be used for styling.
7+
if (styles === null || styles === undefined) {
8+
styles = importedStyles;
9+
}
10+
11+
return <input className={styles.input} {...rest} />;
12+
}

‎src/Input.module.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
.input {
2+
--src-input-background-color: #ffffff;
3+
--src-input-background-color-disabled: #f9f9f9;
4+
--src-input-border-color: #dddddd;
5+
--src-input-border-color-disabled: #dddddd;
6+
--src-input-color: #333333;
7+
--src-input-color-disabled: #dddddd;
8+
9+
background-color: var(--src-input-background-color);
10+
border: 1px solid var(--src-input-border-color);
11+
border-radius: 5px;
12+
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.39) inset, 0 -1px 1px #ffffff, 0 1px 0 #ffffff;
13+
color: var(--src-input-color);
14+
font-family: inherit;
15+
padding: 10px;
16+
}
17+
18+
.input:focus {
19+
outline: 1px solid var(--src-input-border-color);
20+
}
21+
22+
.input:disabled {
23+
background-color: var(--src-input-background-color-disabled);
24+
border-color: var(--src-input-border-color-disabled);
25+
color: var(--src-input-color-disabled);
26+
}
27+
28+
.input[type="checkbox"] {
29+
background-color: transparent;
30+
border: none;
31+
border-radius: 0px;
32+
box-shadow: none;
33+
}
34+
35+
.input[type="checkbox"]:focus {
36+
outline: none;
37+
}

0 commit comments

Comments
 (0)