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

Update links references.

Browse Source
This commit is contained in:
Rodrigo Girão Serrão
2022-12-22 14:41:16 +00:00
parent a89a4b93e0
commit f807df73f9
8 changed files with 104 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/snippets/type_syntax/text_style.md
View File

@@ -1,4 +1,4 @@
The [`<text-style>`](/css_types/text_style) type can be any _space-separated_ combination of the following values: A [`<text-style>`](/css_types/text_style) can be any _space-separated_ combination of the following values:
| Value | Description | | Value | Description |
|-------------|-----------------------------------------------------------------| |-------------|-----------------------------------------------------------------|

42
docs/styles/links/index.md
View File

@@ -1,35 +1,51 @@
# Links # Links
Textual supports the concept of inline "links" embedded in text which trigger an action when pressed. Textual supports the concept of inline "links" embedded in text which trigger an action when pressed.
There are a number of styles which influence the appearance of these links within a widget.
!!! note !!! note
These CSS rules only target Textual action links. Internet hyperlinks are not affected by these CSS rules. These CSS rules only target Textual action links. Internet hyperlinks are not affected by these CSS rules.
There are a number of styles which influence the appearance of these links within a widget.
| Property | Description | | Property | Description |
|-------------------------------------------------------|-------------------------------------------------------------------| |-------------------------------------------------------|-------------------------------------------------------------------|
| [`link-color`](./link_color.md) | The color of the link text. |
| [`link-background`](./link_background.md) | The background color of the link text. | | [`link-background`](./link_background.md) | The background color of the link text. |
| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). | | [`link-color`](./link_color.md) | The color of the link text. |
| [`link-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. |
| [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. | | [`link-hover-background`](./link_hover_background.md) | The background color of the link text when the cursor is over it. |
| [`link-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. |
| [`link-hover-style`](./link_hover_style.md) | The style of the link text when the cursor is over it. | | [`link-hover-style`](./link_hover_style.md) | The style of the link text when the cursor is over it. |
| [`link-style`](./link_style.md) | The style of the link text (e.g. underline). |
## Syntax ## Syntax
```scss --8<-- "docs/snippets/syntax_block_start.md"
link-color: <COLOR> [<PERCENTAGE>]; <a href="./link_background.md">link-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-background: <COLOR> [<PERCENTAGE>];
link-style: <TEXT STYLE>; <a href="./link_color.md">link-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
link-hover-color: <COLOR> [<PERCENTAGE>];
link-hover-background: <COLOR> [<PERCENTAGE>]; <a href="./link_style.md">link-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
link-hover-style: <TEXT STYLE>;
``` <a href="./link_hover_background.md">link-hover-background</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_hover_color.md">link-hover-color</a>: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
<a href="./link_hover_style.md">link-hover-style</a>: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
--8<-- "docs/snippets/syntax_block_end.md"
Visit each style's reference page to learn more about how the values are used.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
#### &lt;text-style&gt;
--8<-- "docs/snippets/type_syntax/text_style.md" --8<-- "docs/snippets/type_syntax/text_style.md"
## Example ## Example

14
docs/styles/links/link_background.md
View File

@@ -8,12 +8,20 @@ The `link-background` sets the background color of the link.
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-background: <COLOR> <PERCENTAGE>; link-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
``` --8<-- "docs/snippets/syntax_block_end.md"
`link-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md" --8<-- "docs/snippets/type_syntax/percentage.md"
## Example ## Example

14
docs/styles/links/link_color.md
View File

@@ -8,12 +8,20 @@ The `link-color` sets the color of the link text.
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-color: <COLOR> <PERCENTAGE>; link-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
``` --8<-- "docs/snippets/syntax_block_end.md"
`link-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md" --8<-- "docs/snippets/type_syntax/percentage.md"
## Example ## Example

18
docs/styles/links/link_hover_background.md
View File

@@ -8,14 +8,26 @@ The `link-hover-background` sets the background color of the link when the mouse
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-hover-background: <COLOR> <PERCENTAGE>; link-hover-background: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
``` --8<-- "docs/snippets/syntax_block_end.md"
`link-hover-background` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links when the mouse pointer is over it.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md" --8<-- "docs/snippets/type_syntax/percentage.md"
### Defaults
If not provided, a Textual action link will have `link-hover-background` set to `$accent`.
## Example ## Example
The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`. The example below shows some links that have their background colour changed when the mouse moves over it and it shows that there is a default color for `link-hover-background`.

18
docs/styles/links/link_hover_color.md
View File

@@ -8,14 +8,26 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-hover-color: <COLOR> <PERCENTAGE>; link-hover-color: <a href="../css_types/color.md">&lt;color&gt;</a> [<a href="../css_types/percentage.md">&lt;percentage&gt;</a>];
``` --8<-- "docs/snippets/syntax_block_end.md"
`link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional transparency level defined by a [`<percentage>`](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links when the mouse pointer is over it.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md" --8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md" --8<-- "docs/snippets/type_syntax/percentage.md"
### Defaults
If not provided, a Textual action link will have `link-hover-color` set to `white`.
## Example ## Example
The example below shows some links that have their colour changed when the mouse moves over it. The example below shows some links that have their colour changed when the mouse moves over it.

16
docs/styles/links/link_hover_style.md
View File

@@ -8,13 +8,19 @@ The `link-hover-style` sets the text style for the link text when the mouse curs
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-hover-style: <COLOR> <PERCENTAGE>; link-hover-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
--8<-- "docs/snippets/type_syntax/color.md" `link-hover-style` applies its [`<text-style>`](../../css_types/text_style.md) to the text of Textual action links when the mouse pointer is over them.
--8<-- "docs/snippets/type_syntax/percentage.md" ### Values
--8<-- "docs/snippets/type_syntax/text_style.md"
### Defaults
If not provided, a Textual action link will have `link-hover-style` set to `bold`.
## Example ## Example

14
docs/styles/links/link_style.md
View File

@@ -8,12 +8,20 @@ The `link-style` sets the text style for the link text.
## Syntax ## Syntax
```sass --8<-- "docs/snippets/syntax_block_start.md"
link-style: <TEXT STYLE>; link-style: <a href="../css_types/text_style.md">&lt;text-style&gt;</a>;
``` --8<-- "docs/snippets/syntax_block_end.md"
`link-style` will take all the values specified and will apply that styling to text that is enclosed by a Textual action link.
### Values
--8<-- "docs/snippets/type_syntax/text_style.md" --8<-- "docs/snippets/type_syntax/text_style.md"
### Defaults
If not provided, a Textual action link will have `link-style` set to `underline`.
## Example ## Example
The example below shows some links with different styles applied to their text. The example below shows some links with different styles applied to their text.