Merge branch 'css' into inline-styles-view

examples/basic.css

@@ -1,9 +1,11 @@
 /* CSS file for basic.py */
 
+$primary: #20639b;
+
 App > View {
   layout: dock;
   docks: side=left/1;
-  text: on #20639b;
+  text: on $primary;
 }
 
 #sidebar {
@@ -26,7 +28,7 @@ App > View {
 }
 
 #content {
-  text: white on #20639b;
+  text: white on $primary;
   border-bottom: hkey #0f2b41;
 }
 

examples/dev_sandbox.css

@@ -1,44 +0,0 @@
-/* CSS file for basic.py */
-
-App > View {
-  docks: side=left/1;
-  text: on #20639b;
-}
-
-Widget:hover {
-  outline: heavy;
-  text: bold !important;
-}
-
-#sidebar {
-  text: #09312e on #3caea3;
-  dock: side;
-  width: 30;
-  offset-x: -100%;
-  transition: offset 500ms in_out_cubic;
-  border-right: outer #09312e;
-}
-
-#sidebar.-active {
-  offset-x: 0;
-}
-
-#header {
-  text: white on #173f5f;
-  height: 3;
-  border: hkey;
-}
-
-#header.-visible {
-  visibility: hidden;
-}
-
-#content {
-  text: white on #20639b;
-  border-bottom: hkey #0f2b41;
-}
-
-#footer {
-  text: #3a3009 on #f6d55c;
-  height: 3;
-}

examples/dev_sandbox.py

@@ -1,23 +1,32 @@
+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):
-    """A basic app demonstrating CSS"""
+    """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')")
 
     def on_mount(self):
         """Build layout here."""
         self.mount(
             header=Widget(),
-            content=Widget(),
+            content=PanelWidget(),
             footer=Widget(),
             sidebar=Widget(),
         )
 
 
-BasicApp.run(css_file="dev_sandbox.css", watch_css=True, log="textual.log")
+BasicApp.run(css_file="dev_sandbox.scss", watch_css=True, log="textual.log")

examples/dev_sandbox.scss

@@ -0,0 +1,58 @@
+/* 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 {
+  text: $text on $primary;
+  height: 3;
+  border-top: hkey $secondary;
+}