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

Border colour percentage (#1954)

Browse Source 
* Allow setting an additional alpha on a border

See #1863.

* Update the ChangeLog

* Add snapshot tests for the border alpha value

* Extend the border snapshot tests

While this doesn't test *every* permutation, it covers enough bases that if
something were to change it should catch it.

* Tweak a typo in the border style examples

* Add border transparency percentage to the border docs

* Add a CSS example for using border transparency

* Add Color.multiply_alpha

* Update the CHANGELOG

* Multiply the alpha on a colour rather than replace it

As requested in
https://github.com/Textualize/textual/pull/1954#pullrequestreview-1328170386

(actually required while talking in person with Will, but noted in the
above)

* Multiply the alpha on a border colour rather than replace it

As requested in
https://github.com/Textualize/textual/pull/1954#pullrequestreview-1328170386

(actually requested while talking in person with Will, but noted in the
above)
This commit is contained in:
Dave Pearson
2023-03-07 14:14:17 +00:00
committed by GitHub
parent b9977812f7
commit b7de48cca3
7 changed files with 247 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/styles/border.md
View File

@@ -9,15 +9,15 @@ The `border` rule enables the drawing of a box around a widget.
## Syntax
--8<-- "docs/snippets/syntax_block_start.md"
border: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>] [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
border-top: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-right: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-bottom: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-left: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>];
border-top: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a>] [<a href="../../css_types/percentage">&lt;percentage&gt;</a>];
border-right: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>]];
border-bottom: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>]];
border-left: [<a href="../../css_types/border">&lt;border&gt;</a>] [<a href="../../css_types/color">&lt;color&gt;</a> [<a href="../../css_types/percentage">&lt;percentage&gt;</a>]];
--8<-- "docs/snippets/syntax_block_end.md"
The style `border` accepts an optional [`<border>`](../../css_types/border) that sets the visual style of the widget border and an optional [`<color>`](../../css_types/color) to set the color of the border.
The style `border` accepts an optional [`<border>`](../../css_types/border) that sets the visual style of the widget border, an optional [`<color>`](../../css_types/color) to set the color of the border, and an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
Borders may also be set individually for the four edges of a widget with the `border-top`, `border-right`, `border-bottom` and `border-left` rules.
@@ -41,6 +41,7 @@ The CSS snippet above will add a solid green border around `Static` widgets, exc
If `<color>` is specified but `<border>` is not, it defaults to `"solid"`.
If `<border>` is specified but `<color>`is not, it defaults to green (RGB color `"#00FF00"`).
If `<percentage>` is not specified it defaults to `100%`.
## Border command
@@ -126,8 +127,11 @@ This example also shows that a widget cannot contain both a `border` and an `out
/* Set a heavy white border */
border: heavy white;
/* set a red border on the left */
/* Set a red border on the left */
border-left: outer red;
/* Set a rounded orange border, 50% transparency. */
border: round orange 50%;
```
## Python