alihan/textual
1
0
Fork 0
mirror of https://github.com/Textualize/textual.git synced 2025-10-17 02:38:12 +03:00
Code Issues Packages Projects Releases Wiki Activity

css updates

Browse Source
This commit is contained in:
Will McGugan
2021-12-26 17:58:33 +00:00
parent a034c76405
commit c5e1d76cfd
17 changed files with 161 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
examples/basic.css
View File

@@ -1,39 +1,39 @@
App > View {
layout: dock;
docks: side=left/1 header=top footer=bottom;
layers: base panels;
}
#sidebar {
text: bold #09312e on #3caea3;
dock-group: side;
dock: side;
width: 30;
height: 1fr;
layer: panels;
border-right: outer #09312e;
offset-x: -100%;
transition: offset 1.2s in_cubic 200ms;
transition: offset 400ms in_out_cubic;
}
#sidebar.-active {
offset-x: 0;
transition: offset 400ms in_out_cubic;
text: on red;
}
#header {
text: on #173f5f;
dock-group: header;
dock: header;
height: 3;
border: hkey white;
}
#footer {
dock-group: header;
dock: header;
height: 3;
border-top: hkey #0f2b41;
text: #3a3009 on #f6d55c;
}
#content {
dock-group: header;
text: on #20639b;
dock: header;
text: bold on #20639b;
}

3
examples/basic.py
View File

@@ -6,6 +6,7 @@ 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):
@@ -18,4 +19,4 @@ class BasicApp(App):
)
BasicApp.run(log="textual.log", css_file="basic.css", watch_css=True)
BasicApp.run(css_file="basic.css", watch_css=True)

38
examples/example.css Normal file
View File

@@ -0,0 +1,38 @@
App > View {
layout: dock;
docks: side=left/1 header=top footer=bottom;
}
#sidebar {
text: bold #09312e on #3caea3;
dock: side;
width: 30;
height: 1fr;
border-right: outer #09312e;
offset-x: -100%;
transition: offset 400ms in_out_cubic;
}
#sidebar.-active {
offset-x: 0;
transition: offset 400ms in_out_cubic;
}
#header {
text: on #173f5f;
dock: header;
height: 3;
border: hkey white;
}
#footer {
dock: header;
height: 3;
border-top: hkey #0f2b41;
text: #3a3009 on #f6d55c;
}
#content {
dock: header;
text: bold on #20639b;
}