From c71c337fb19948d3785eb8d6baba1e724d170608 Mon Sep 17 00:00:00 2001
From: Will McGugan <willmcgugan@gmail.com>
Date: Mon, 14 Feb 2022 21:00:40 +0000
Subject: [PATCH] dev sandbox

---
 sandbox/dev_sandbox.py   | 33 +++++++++++++++++++++
 sandbox/dev_sandbox.scss | 63 ++++++++++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+)
 create mode 100644 sandbox/dev_sandbox.py
 create mode 100644 sandbox/dev_sandbox.scss

diff --git a/sandbox/dev_sandbox.py b/sandbox/dev_sandbox.py
new file mode 100644
index 000000000..8a43a203e
--- /dev/null
+++ b/sandbox/dev_sandbox.py
@@ -0,0 +1,33 @@
+from rich.console import RenderableType
+from rich.panel import Panel
+
+from textual.app import App
+from textual.widget import Widget
+
+
+class PanelWidget(Widget):
+    def render(self) -> RenderableType:
+        return Panel("hello world!", title="Title")
+
+
+class BasicApp(App):
+    """Sandbox application used for testing/development by Textual developers"""
+
+    def on_load(self):
+        """Bind keys here."""
+        self.bind("tab", "toggle_class('#sidebar', '-active')")
+        self.bind("a", "toggle_class('#header', '-visible')")
+        self.bind("c", "toggle_class('#content', '-content-visible')")
+        self.bind("d", "toggle_class('#footer', 'dim')")
+
+    def on_mount(self):
+        """Build layout here."""
+        self.mount(
+            header=Widget(),
+            content=PanelWidget(),
+            footer=Widget(),
+            sidebar=Widget(),
+        )
+
+
+BasicApp.run(css_file="dev_sandbox.scss", watch_css=True, log="textual.log")
diff --git a/sandbox/dev_sandbox.scss b/sandbox/dev_sandbox.scss
new file mode 100644
index 000000000..987c0f09e
--- /dev/null
+++ b/sandbox/dev_sandbox.scss
@@ -0,0 +1,63 @@
+/* CSS file for dev_sandbox.py */
+
+$text: #f0f0f0;
+$primary: #021720;
+$secondary:#95d52a;
+$background: #262626;
+
+$primary-style: $text on $background;
+$animation-speed: 500ms;
+$animation: offset $animation-speed in_out_cubic;
+
+App > View {
+  docks: side=left/1;
+  text: on $background;
+}
+
+Widget:hover {
+  outline: heavy;
+  text: bold !important;
+}
+
+#sidebar {
+  text: $primary-style;
+  dock: side;
+  width: 30;
+  offset-x: -100%;
+  transition: $animation;
+  border-right: outer $secondary;
+}
+
+#sidebar.-active {
+  offset-x: 0;
+}
+
+#header {
+  text: $text on $primary;
+  height: 3;
+  border-bottom: hkey $secondary;
+}
+
+#header.-visible {
+  visibility: hidden;
+}
+
+#content {
+  text: $text on $background;
+  offset-y: -3;
+}
+
+#content.-content-visible {
+  visibility: hidden;
+}
+
+#footer {
+  opacity: 1;
+  text: $text on $primary;
+  height: 3;
+  border-top: hkey $secondary;
+}
+
+#footer.dim {
+  opacity: 0.5;
+}