Merge branch 'css' of github.com:Textualize/textual into dev-server

sandbox/basic.css

@@ -0,0 +1,193 @@
+/* CSS file for basic.py */
+
+
+
+* {
+    transition: color 300ms linear, background 300ms linear;
+}
+
+
+* {
+  scrollbar-background: $panel-darken-2;
+  scrollbar-background-hover: $panel-darken-3;
+  scrollbar-color: $system;
+  scrollbar-color-active: $accent-darken-1;
+}
+
+App > Screen {
+  layout: dock;
+  docks: side=left/1;
+  background: $background;
+  color: $text-background;
+}
+
+#sidebar {
+  color: $text-primary;
+  background: $primary;
+  dock: side;
+  width: 30;
+  offset-x: -100%;
+  layout: dock;
+  transition: offset 500ms in_out_cubic;
+}
+
+#sidebar.-active {
+  offset-x: 0;
+}
+
+#sidebar .title {
+  height: 3;
+  background: $primary-darken-2;
+  color: $text-primary-darken-2 ;
+  border-right: outer $primary-darken-3;
+}
+
+#sidebar .user {
+  height: 8;
+  background: $primary-darken-1;
+  color: $text-primary-darken-1;
+  border-right: outer $primary-darken-3;
+}
+
+#sidebar .content {
+  background: $primary;
+  color: $text-primary;
+  border-right: outer $primary-darken-3;
+}
+
+#header {
+  color: $text-primary-darken-1;
+  background: $primary-darken-1;
+  height: 3;
+
+}
+
+#content {
+  color: $text-background;
+  background: $background;
+  layout: vertical;
+  overflow-y:scroll;  
+
+}
+
+
+Tweet {
+  height: 22;
+  max-width: 80;
+  margin: 1 3;
+  background: $panel;
+  color: $text-panel;
+  layout: vertical;
+  /* border: outer $primary; */
+  padding: 1;
+  border: wide $panel-darken-2;
+  overflow-y: scroll
+}
+
+
+TweetHeader {
+  height:1
+  background: $accent
+  color: $text-accent
+}
+
+TweetBody {  
+  background: $panel;
+  color: $text-panel;
+  height:20;
+  padding: 0 1 0 0;
+ 
+}
+
+.button {
+  background: $accent;
+  color: $text-accent;
+  width:20;
+  height: 3
+  /* border-top: hidden  $accent-darken-3;  */
+  border: tall $accent-darken-2;
+  /* border-left: tall $accent-darken-1; */
+ 
+
+  /* padding: 1 0 0 0 ; */
+
+  transition: background 200ms in_out_cubic, color 300ms in_out_cubic;
+ 
+}
+
+.button:hover {
+  background: $accent-lighten-1;
+  color: $text-accent-lighten-1;
+  width: 20;
+  height: 3
+  border: tall $accent-darken-1;
+  /* border-left: tall $accent-darken-3; */
+ 
+
+
+ 
+}
+
+#footer {
+  color: $text-accent;
+  background: $accent;
+  height: 1;
+  border-top: hkey $accent-darken-2;
+}
+
+
+#sidebar .content {
+  layout: vertical
+}
+
+OptionItem {
+  height: 3;
+  background: $primary;
+  transition: background 100ms linear;
+  border-right: outer $primary-darken-2;
+  border-left: hidden;
+}
+
+OptionItem:hover {
+  height: 3;
+  color: $accent;
+  background: $primary-darken-1;
+  /* border-top: hkey $accent2-darken-3;
+  border-bottom: hkey $accent2-darken-3; */
+  text-style: bold;
+  border-left: outer $accent-darken-2;
+}
+
+Error {
+  max-width: 80;
+  height:3;
+  background: $error;
+  color: $text-error;
+  border-top: hkey $error-darken-2;
+  border-bottom: hkey $error-darken-2; 
+  margin: 1 3;
+  
+  text-style: bold;
+}
+
+Warning {
+  max-width: 80;
+  height:3;
+  background: $warning;
+  color: $text-warning-fade-1;
+  border-top: hkey $warning-darken-2;
+  border-bottom: hkey $warning-darken-2; 
+  margin: 1 2;
+  text-style: bold;
+}
+
+Success {
+  max-width: 80;
+  height:3;
+  background: $success-lighten-3;
+  color: $text-success-lighten-3-fade-1;
+  border-top: hkey $success;
+  border-bottom: hkey $success; 
+  margin: 1 2;
+  text-style: bold;
+}

sandbox/basic.py

@@ -0,0 +1,89 @@
+from rich.align import Align
+from rich.console import RenderableType
+from rich.text import Text
+
+from textual.app import App
+from textual.widget import Widget
+
+
+lorem = Text.from_markup(
+    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
+    """Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In velit libero, volutpat nec hendrerit at, faucibus in odio. Aliquam hendrerit nibh sed quam volutpat maximus. Nullam suscipit convallis lorem quis sodales. In tristique lobortis ante et dictum. Ut at finibus ipsum. In urna dolor, placerat et mi facilisis, congue sollicitudin massa. Phasellus felis turpis, cursus eu lectus et, porttitor malesuada augue. Sed feugiat volutpat velit, sollicitudin fringilla velit bibendum faucibus. """
+)
+
+
+class TweetHeader(Widget):
+    def render(self) -> RenderableType:
+        return Text("Lorem Impsum", justify="center")
+
+
+class TweetBody(Widget):
+    def render(self) -> Text:
+        return lorem
+
+
+class Tweet(Widget):
+    pass
+
+
+class OptionItem(Widget):
+    def render(self) -> Text:
+        return Align.center(Text("Option", justify="center"), vertical="middle")
+
+
+class Error(Widget):
+    def render(self) -> Text:
+        return Text("This is an error message", justify="center")
+
+
+class Warning(Widget):
+    def render(self) -> Text:
+        return Text("This is a warning message", justify="center")
+
+
+class Success(Widget):
+    def render(self) -> Text:
+        return Text("This is a success message", justify="center")
+
+
+class BasicApp(App):
+    """A basic app demonstrating CSS"""
+
+    def on_load(self):
+        """Bind keys here."""
+        self.bind("tab", "toggle_class('#sidebar', '-active')")
+
+    def on_mount(self):
+        """Build layout here."""
+        self.mount(
+            header=Widget(),
+            content=Widget(
+                Tweet(TweetBody(), Widget(classes={"button"})),
+                Error(),
+                Tweet(TweetBody()),
+                Warning(),
+                Tweet(TweetBody()),
+                Success(),
+            ),
+            footer=Widget(),
+            sidebar=Widget(
+                Widget(classes={"title"}),
+                Widget(classes={"user"}),
+                OptionItem(),
+                OptionItem(),
+                OptionItem(),
+                Widget(classes={"content"}),
+            ),
+        )
+
+    async def on_key(self, event) -> None:
+        await self.dispatch_key(event)
+
+    def key_d(self):
+        self.dark = not self.dark
+
+    def key_x(self):
+        self.panic(self.tree)
+
+
+BasicApp.run(css_file="basic.css", watch_css=True, log="textual.log")

sandbox/dev_sandbox.scss

@@ -5,22 +5,22 @@ $primary: #021720;
 $secondary: #95d52a;
 $background: #262626;
 
-$primary-style: $text on $background;
-$animation-speed: 500ms;
-$animation: offset $animation-speed in_out_cubic;
+$animatitext-speed: 500ms;
+$animation: offset $animatitext-speed in_out_cubic;
 
 App > View {
   docks: side=left/1;
-  text: on $background;
+  background: $background;
 }
 
 Widget:hover {
   outline: heavy;
-  text: bold !important;
+  text-style: bold !important;
 }
 
 #sidebar {
-  text: $primary-style;
+  color: $text;
+  background: $background;
   dock: side;
   width: 30;
   offset-x: -100%;
@@ -33,7 +33,8 @@ Widget:hover {
 }
 
 #header {
-  text: $text on $primary;
+  color: $text;
+  background: $primary;
   height: 3;
   border-bottom: hkey $secondary;
 }
@@ -43,7 +44,8 @@ Widget:hover {
 }
 
 #content {
-  text: $text on $background;
+  color: $text;
+  background: $background;
   offset-y: -3;
 }
 
@@ -53,7 +55,8 @@ Widget:hover {
 
 #footer {
   opacity: 1;
-  text: $text on $primary;
+  color: $text;
+  background: $background;
   height: 3;
   border-top: hkey $secondary;
 }

sandbox/tabs.scss

@@ -1,7 +1,7 @@
 $background: #021720;
 
 App > View {
-  text: on $background;
+  background: $background;
 }
 
 #info {

sandbox/uber.css

@@ -1,6 +1,7 @@
 #uber1 {
   layout: vertical;
-  text: on dark_green;
+
+  background: dark_green;
   overflow: hidden auto;
   border: heavy white;
 }
@@ -8,5 +9,5 @@
 .list-item {
   height: 8;
   min-width: 80;
-  text-background: dark_blue;
+  background: dark_blue;
 }