From 564a9967d3cb8d2dd175d6543ba872df2c491e55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Magalh=C3=A3es?= <joamag@gmail.com>
Date: Mon, 31 Oct 2022 10:06:54 +0000
Subject: [PATCH] feat: new styles
---
examples/web/react/app.tsx | 9 ++
.../button-container/button-container.css | 2 +-
.../keyboard-chip8/keyboard-chip8.css | 110 +++++++++---------
3 files changed, 65 insertions(+), 56 deletions(-)
diff --git a/examples/web/react/app.tsx b/examples/web/react/app.tsx
index 29767a2a..d6fbe52d 100644
--- a/examples/web/react/app.tsx
+++ b/examples/web/react/app.tsx
@@ -293,6 +293,9 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
const onKeyboardClick = () => {
showToast("Keyboard click");
};
+ const onInformationClick = () => {
+ showToast("Information click");
+ };
const onThemeClick = () => {
setBackgroundIndex((backgroundIndex + 1) % backgrounds.length);
};
@@ -420,6 +423,12 @@ export const App: FC<AppProps> = ({ emulator, backgrounds = ["264653"] }) => {
imageAlt="keyboard"
onClick={onKeyboardClick}
/>
+ <Button
+ text={"Information"}
+ image={require("../res/info.svg")}
+ imageAlt="iformation"
+ onClick={onInformationClick}
+ />
<Button
text={"Theme"}
image={require("../res/marker.svg")}
diff --git a/examples/web/react/components/button-container/button-container.css b/examples/web/react/components/button-container/button-container.css
index 6bf22e66..1d1df8f7 100644
--- a/examples/web/react/components/button-container/button-container.css
+++ b/examples/web/react/components/button-container/button-container.css
@@ -3,8 +3,8 @@
}
.button-container > * {
- margin-right: 8px;
margin-bottom: 12px;
+ margin-right: 8px;
}
.button-container > *:last-child {
diff --git a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
index 002e1321..01f35fef 100644
--- a/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
+++ b/examples/web/react/components/keyboard-chip8/keyboard-chip8.css
@@ -1,55 +1,55 @@
-
-.keyboard-chip8 {
- font-size: 0px;
- text-align: center;
- touch-callout: none;
- -o-touch-callout: none;
- -ms-touch-callout: none;
- -moz-touch-callout: none;
- -khtml-touch-callout: none;
- -webkit-touch-callout: none;
- user-select: none;
- -o-user-select: none;
- -ms-user-select: none;
- -moz-user-select: none;
- -khtml-user-select: none;
- -webkit-user-select: none;
-}
-
-.keyboard-chip8 > .keyboard-line {
- margin-bottom: 12px;
-}
-
-.keyboard-chip8 > .keyboard-line:last-child {
- margin-bottom: 0px;
-}
-
-.keyboard-chip8 .key {
- border: 2px solid #ffffff;
- border-radius: 5px 5px 5px 5px;
- -o-border-radius: 5px 5px 5px 5px;
- -ms-border-radius: 5px 5px 5px 5px;
- -moz-border-radius: 5px 5px 5px 5px;
- -khtml-border-radius: 5px 5px 5px 5px;
- -webkit-border-radius: 5px 5px 5px 5px;
- cursor: pointer;
- display: inline-block;
- font-size: 38px;
- height: 48px;
- line-height: 46px;
- margin-right: 14px;
- text-align: center;
- width: 48px;
-}
-
-.keyboard-chip8 .key:last-child {
- margin-right: 0px;
-}
-
-.keyboard-chip8 .key:hover {
- background-color: #50cb93;
-}
-
-.keyboard-chip8 .key:active {
- background-color: #2a9d8f;
-}
+
+.keyboard-chip8 {
+ font-size: 0px;
+ text-align: center;
+ touch-callout: none;
+ -o-touch-callout: none;
+ -ms-touch-callout: none;
+ -moz-touch-callout: none;
+ -khtml-touch-callout: none;
+ -webkit-touch-callout: none;
+ user-select: none;
+ -o-user-select: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ -khtml-user-select: none;
+ -webkit-user-select: none;
+}
+
+.keyboard-chip8 > .keyboard-line {
+ margin-bottom: 12px;
+}
+
+.keyboard-chip8 > .keyboard-line:last-child {
+ margin-bottom: 0px;
+}
+
+.keyboard-chip8 .key {
+ border: 2px solid #ffffff;
+ border-radius: 5px 5px 5px 5px;
+ -o-border-radius: 5px 5px 5px 5px;
+ -ms-border-radius: 5px 5px 5px 5px;
+ -moz-border-radius: 5px 5px 5px 5px;
+ -khtml-border-radius: 5px 5px 5px 5px;
+ -webkit-border-radius: 5px 5px 5px 5px;
+ cursor: pointer;
+ display: inline-block;
+ font-size: 38px;
+ height: 48px;
+ line-height: 46px;
+ margin-right: 14px;
+ text-align: center;
+ width: 48px;
+}
+
+.keyboard-chip8 .key:last-child {
+ margin-right: 0px;
+}
+
+.keyboard-chip8 .key:hover {
+ background-color: #50cb93;
+}
+
+.keyboard-chip8 .key:active {
+ background-color: #2a9d8f;
+}
--
GitLab