From 81ddae793332c6e14835c6d80961c8cb2cb2fb03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?= <5621605+rodrigogiraoserrao@users.noreply.github.com> Date: Mon, 9 Jan 2023 09:32:10 +0000 Subject: [PATCH] Use specific rules in CSS type examples. [skip ci] --- docs/css_types/_template.md | 9 ++++----- docs/css_types/border.md | 39 ++++++++---------------------------- docs/css_types/color.md | 29 +++++++++++++++------------ docs/css_types/horizontal.md | 10 +++------ docs/css_types/integer.md | 8 +++----- docs/css_types/name.md | 16 +++------------ docs/css_types/number.md | 17 ++++++++-------- docs/css_types/overflow.md | 10 +++------ docs/css_types/percentage.md | 15 ++++++++++---- docs/css_types/scalar.md | 22 +++++--------------- docs/css_types/text_align.md | 14 ++----------- docs/css_types/text_style.md | 20 +++++------------- docs/css_types/vertical.md | 10 +++------ 13 files changed, 74 insertions(+), 145 deletions(-) diff --git a/docs/css_types/_template.md b/docs/css_types/_template.md index fbb79dcb6..079f1b7ef 100644 --- a/docs/css_types/_template.md +++ b/docs/css_types/_template.md @@ -46,14 +46,13 @@ The [``](/css_types/my_type) type can take any of the following values: ### CSS ```sass -* { +.some-class { rule: type-value-1; rule: type-value-2; rule: type-value-3; @@ -65,7 +64,7 @@ Add comments when needed/if helpful. ```py -type_name = type_value_1 -type_name = type_value_2 -type_name = type_value_3 +widget.styles.rule = type_value_1 +widget.styles.rule = type_value_2 +widget.styles.rule = type_value_3 ``` diff --git a/docs/css_types/border.md b/docs/css_types/border.md index 447a74069..8147cbf39 100644 --- a/docs/css_types/border.md +++ b/docs/css_types/border.md @@ -37,41 +37,18 @@ textual borders ### CSS ```sass -* { - rule: ascii /* A border with plus, hyphen, and vertical bar characters. */ - rule: blank /* A blank border (reserves space for a border). */ - rule: dashed /* Dashed line border. */ - rule: double /* Double lined border. */ - rule: heavy /* Heavy border. */ - rule: hidden /* Alias for "none". */ - rule: hkey /* Horizontal key-line border. */ - rule: inner /* Thick solid border. */ - rule: none /* Disabled border. */ - rule: outer /* Solid border with additional space around content. */ - rule: round /* Rounded corners. */ - rule: solid /* Solid border. */ - rule: tall /* Solid border with additional space top and bottom. */ - rule: vkey /* Vertical key-line border. */ - rule: wide /* Solid border with additional space left and right. */ +#container { + border: heavy red; +} + +#heading { + border-bottom: solid blue; } ``` ### Python ```py -border = "ascii" # A border with plus, hyphen, and vertical bar characters. -border = "blank" # A blank border (reserves space for a border). -border = "dashed" # Dashed line border. -border = "double" # Double lined border. -border = "heavy" # Heavy border. -border = "hidden" # Alias for "none". -border = "hkey" # Horizontal key-line border. -border = "inner" # Thick solid border. -border = "none" # Disabled border. -border = "outer" # Solid border with additional space around content. -border = "round" # Rounded corners. -border = "solid" # Solid border. -border = "tall" # Solid border with extras space top and bottom. -border = "vkey" # Vertical key-line border. -border = "wide" # Solid border with additional space left and right. +widget.styles.border = ("heavy", "red") +widget.styles.border_bottom = ("solid", "blue") ``` diff --git a/docs/css_types/color.md b/docs/css_types/color.md index 0d6852356..4b18f07f3 100644 --- a/docs/css_types/color.md +++ b/docs/css_types/color.md @@ -23,27 +23,30 @@ For more details about the exact formats accepted, see [the class method `Color. ### CSS ```sass -* { - rule: red; /* color name */ - rule: #A8F; /* 3-digit hex RGB */ - rule: #FF00FFDD; /* 6-digit hex RGB + transparency */ - rule: rgb(15,200,73); /* RGB description */ - rule: hsl(300,20%,70%); /* HSL description */ - rule: $accent; /* Textual variable */ +Header { + background: red; /* Color name */ +} + +.accent { + color: $accent; /* Textual variable */ +} + +#footer { + tint: hsl(300, 20%, 70%); /* HSL description */ } ``` ### Python +In Python, rules that expect a `` can also accept an instance of the type [`Color`][textual.color.Color]. + ```py # Mimicking the CSS syntax -color = "red" -color = "#A8F" -color = "#FF00FFDD" -color = "rgb(15,200,73)" -color = "hsl(300,20%,70%)" -color = "$accent" +widget.styles.background = "red" # Color name +widget.styles.color = "$accent" # Textual variable +widget.styles.tint = "hsl(300, 20%, 70%)" # HSL description +from textual.color import Color # Using a Color object directly... color = Color(16, 200, 45) # ... which can also parse the CSS syntax diff --git a/docs/css_types/horizontal.md b/docs/css_types/horizontal.md index f5df8d04a..d46d17a55 100644 --- a/docs/css_types/horizontal.md +++ b/docs/css_types/horizontal.md @@ -17,17 +17,13 @@ The [``](/css_types/horizontal) type can take any of the following v ### CSS ```sass -* { - rule: left; - rule: center; - rule: right +.container { + align-horizontal: right; } ``` ### Python ```py -horizontal = "left" -horizontal = "center" -horizontal = "right" +widget.styles.align_horizontal = "right" ``` diff --git a/docs/css_types/integer.md b/docs/css_types/integer.md index 6823d97fb..ac97f400e 100644 --- a/docs/css_types/integer.md +++ b/docs/css_types/integer.md @@ -15,9 +15,8 @@ An [``](/css_types/integer) is any valid integer number like `-10` or ` ### CSS ```sass -* { - rule: -5; - rule: 10; +.classname { + offset: 10 -20 } ``` @@ -26,6 +25,5 @@ An [``](/css_types/integer) is any valid integer number like `-10` or ` In Python, a rule that expects a CSS type `` will expect a value of the type `int`: ```py -integer = -5 -integer = 10 +widget.styles.offset = (10, -20) ``` diff --git a/docs/css_types/name.md b/docs/css_types/name.md index ef2faa625..caca3639a 100644 --- a/docs/css_types/name.md +++ b/docs/css_types/name.md @@ -14,23 +14,13 @@ A [``](/css_types/name) is any non-empty sequence of characters: ### CSS ```sass -* { - rule: onlyLetters; - rule: Letters-and-hiphens; - rule: _leading-underscore; - rule: letters-and-1-digit; - rule: name1234567890; +Screen { + layers: onlyLetters Letters-and-hiphens _lead-under letters-1-digit; } ``` ### Python - - ```py -name = "onlyLetters" -name = "Letters-and-hiphens" -name = "_leading-underscore" -name = "letters-and-1-digit" -name = "name1234567890" +widget.styles.layers = "onlyLetters Letters-and-hiphens _lead-under letters-1-digit" ``` diff --git a/docs/css_types/number.md b/docs/css_types/number.md index a3b50660c..c810a315f 100644 --- a/docs/css_types/number.md +++ b/docs/css_types/number.md @@ -11,11 +11,12 @@ A [``](/css_types/number) is an [``](/css_types/integer), optio ### CSS ```sass -* { - css-rule: 6 /* Integers are numbers */ - css-rule: -13 /* Numbers can be negative */ - css-rule: 4.75 /* Numbers can have a decimal part */ - css-rule: -73.73 +Grid { + grid-size: 3 6 /* Integers are numbers */ +} + +.translucid { + opacity: 0.5 /* Numbers can have a decimal part */ } ``` @@ -24,8 +25,6 @@ A [``](/css_types/number) is an [``](/css_types/integer), optio In Python, a rule that expects a CSS type `` will accept an `int` or a `float`: ```py -number = 6 # ints are numbers -number = -13 # ints can be negative -number = 4.75 # floats are numbers -number = -73.73 # negative floats too +widget.styles.grid_size = (3, 6) # Integers are numbers +widget.styles.opacity = 0.5 # Numbers can have a decimal part ``` diff --git a/docs/css_types/overflow.md b/docs/css_types/overflow.md index b4f89aa2f..ebfcc0585 100644 --- a/docs/css_types/overflow.md +++ b/docs/css_types/overflow.md @@ -17,17 +17,13 @@ The [``](/css_types/overflow) type can take any of the following value ### CSS ```sass -* { - rule: auto; /* Determine overflow mode automatically. */ - rule: hidden; /* Don't overflow. */ - rule: scroll; /* Allow overflowing. */ +#container { + overflow-y: hidden; /* Don't overflow */ } ``` ### Python ```py -overflow = "auto" # Determine overflow mode automatically. -overflow = "hidden" # Don't overflow. -overflow = "scroll" # Allow overflowing. +widget.styles.overflow_y = "hidden" # Don't overflow ``` diff --git a/docs/css_types/percentage.md b/docs/css_types/percentage.md index 6252cae97..8deb78c0e 100644 --- a/docs/css_types/percentage.md +++ b/docs/css_types/percentage.md @@ -17,14 +17,21 @@ Some rules may clamp the values between `0%` and `100%`. ### CSS ```sass -* { - rule: 70%; /* Integer followed by % */ - rule: -3.5%; /* The number can be negative/decimal */ +#footer { + /* Integer followed by % */ + color: red 70%; + + /* The number can be negative/decimal, although that may not make sense */ + offset: -30% 12.5%; } ``` ### Python ```py -percentage = "70%" +# Integer followed by % +widget.styles.color = "red 70%" + +# The number can be negative/decimal, althought that may not make sense +widget.styles.offset = ("-30%", "12.5%") ``` diff --git a/docs/css_types/scalar.md b/docs/css_types/scalar.md index e909c2f05..bf1640348 100644 --- a/docs/css_types/scalar.md +++ b/docs/css_types/scalar.md @@ -97,27 +97,15 @@ For example, if its container is big enough, a label with `width: auto` will be ### CSS ```sass -* { - rule: 16; /* 16 cells */ - rule: 1fr; /* proportional size of 1 */ - rule: 50%; /* 50% of the same dimension of the parent */ - rule: 25w; /* 25% of the width of the parent */ - rule: 75h; /* 75% of the height of the parent */ - rule: 25vw; /* 25% of the viewport width */ - rule: 75vh; /* 75% of the viewport height */ - rule: auto; /* special value */ +Horizontal { + width: 60; /* 60 cells */ + height: 1fr; /* proportional size of 1 */ } ``` ### Python ```py -scalar = 16 # Cell unit can be specified with an int/float -scalar = "1fr" # proportional size of 1 -scalar = "50%" # 50% of the same dimension of the parent -scalar = "25w" # 25% of the width of the parent -scalar = "75h" # 75% of the height of the parent -scalar = "25vw" # 25% of the viewport width -scalar = "75vh" # 75% of the viewport height -scalar = "auto" # special value +widget.styles.width = 16 # Cell unit can be specified with an int/float +widget.styles.height = "1fr" # proportional size of 1 ``` diff --git a/docs/css_types/text_align.md b/docs/css_types/text_align.md index 8a18b51c7..acc670bd3 100644 --- a/docs/css_types/text_align.md +++ b/docs/css_types/text_align.md @@ -28,23 +28,13 @@ A [``](/css_types/text_align) can be any of the following values: ### CSS ```sass -* { - rule: center; - rule: end; +Label { rule: justify; - rule: left; - rule: right; - rule: start; } ``` ### Python ```py -text_align = "center" -text_align = "end" -text_align = "justify" -text_align = "left" -text_align = "right" -text_align = "start" +widget.styles.text_align = "justify" ``` diff --git a/docs/css_types/text_style.md b/docs/css_types/text_style.md index 1dd36ce10..f41646e3c 100644 --- a/docs/css_types/text_style.md +++ b/docs/css_types/text_style.md @@ -24,18 +24,14 @@ A [``](/css_types/text_style) can be any _space-separated_ combinati ### CSS ```sass -* { +#label1 { /* You can specify any value by itself. */ - rule: bold; - rule: italic; - rule: none; - rule: reverse; rule: strike; - rule: underline; +} +#label2 { /* You can also combine multiple values. */ rule: strike bold italic reverse; - rule: bold underline italic; } ``` @@ -43,14 +39,8 @@ A [``](/css_types/text_style) can be any _space-separated_ combinati ```py # You can specify any value by itself -text_style = "bold" -text_style = "italic" -text_style = "none" -text_style = "reverse" -text_style = "strike" -text_style = "underline" +widget.styles.text_style = "strike" # You can also combine multiple values -text_style = "strike bold italic reverse" -text_style = "bold underline italic" +widget.styles.text_style = "bold underline italic" ``` diff --git a/docs/css_types/vertical.md b/docs/css_types/vertical.md index 5d95e093f..d5d8066aa 100644 --- a/docs/css_types/vertical.md +++ b/docs/css_types/vertical.md @@ -17,17 +17,13 @@ The [``](/css_types/vertical) type can take any of the following value ### CSS ```sass -* { - rule: top; - rule: middle; - rule: bottom +.container { + align-vertical: top; } ``` ### Python ```py -vertical = "top" -vertical = "middle" -vertical = "bottom" +widget.styles.align_vertical = "top" ```