diff --git a/docs/snippets/type_syntax/text_style.md b/docs/snippets/type_syntax/text_style.md index 96907b3a5..f95b25b9b 100644 --- a/docs/snippets/type_syntax/text_style.md +++ b/docs/snippets/type_syntax/text_style.md @@ -1,4 +1,4 @@ -The [``](/css_types/text_style) type can be any _space-separated_ combination of the following values: +A [``](/css_types/text_style) can be any _space-separated_ combination of the following values: | Value | Description | |-------------|-----------------------------------------------------------------| diff --git a/docs/styles/links/index.md b/docs/styles/links/index.md index 471e0b29d..d8a69b555 100644 --- a/docs/styles/links/index.md +++ b/docs/styles/links/index.md @@ -1,35 +1,51 @@ # Links 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 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 | |-------------------------------------------------------|-------------------------------------------------------------------| -| [`link-color`](./link_color.md) | The 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-hover-color`](./link_hover_color.md) | The color of the link text when the cursor is over it. | +| [`link-color`](./link_color.md) | The color of the link text. | | [`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-style`](./link_style.md) | The style of the link text (e.g. underline). | ## Syntax -```scss -link-color: []; -link-background: []; -link-style: ; -link-hover-color: []; -link-hover-background: []; -link-hover-style: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-background: <color> [<percentage>]; + +link-color: <color> [<percentage>]; + +link-style: <text-style>; + +link-hover-background: <color> [<percentage>]; + +link-hover-color: <color> [<percentage>]; + +link-hover-style: <text-style>; +--8<-- "docs/snippets/syntax_block_end.md" + +Visit each style's reference page to learn more about how the values are used. + +### Values + +#### <color> --8<-- "docs/snippets/type_syntax/color.md" +#### <percentage> + +--8<-- "docs/snippets/type_syntax/percentage.md" + +#### <text-style> + --8<-- "docs/snippets/type_syntax/text_style.md" ## Example diff --git a/docs/styles/links/link_background.md b/docs/styles/links/link_background.md index 6c0dd0cc0..5d6b78046 100644 --- a/docs/styles/links/link_background.md +++ b/docs/styles/links/link_background.md @@ -8,12 +8,20 @@ The `link-background` sets the background color of the link. ## Syntax -```sass -link-background: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-background: <color> [<percentage>]; +--8<-- "docs/snippets/syntax_block_end.md" + +`link-background` accepts a [``](../../css_types/color.md) (with an optional transparency level defined by a [``](../../css_types/percentage.md)) that is used to define the background color of text enclosed in Textual action links. + +### Values + +#### <color> --8<-- "docs/snippets/type_syntax/color.md" +#### <percentage> + --8<-- "docs/snippets/type_syntax/percentage.md" ## Example diff --git a/docs/styles/links/link_color.md b/docs/styles/links/link_color.md index 36dbf7b73..4b537a1b2 100644 --- a/docs/styles/links/link_color.md +++ b/docs/styles/links/link_color.md @@ -8,12 +8,20 @@ The `link-color` sets the color of the link text. ## Syntax -```sass -link-color: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-color: <color> [<percentage>]; +--8<-- "docs/snippets/syntax_block_end.md" + +`link-color` accepts a [``](../../css_types/color.md) (with an optional transparency level defined by a [``](../../css_types/percentage.md)) that is used to define the color of text enclosed in Textual action links. + +### Values + +#### <color> --8<-- "docs/snippets/type_syntax/color.md" +#### <percentage> + --8<-- "docs/snippets/type_syntax/percentage.md" ## Example diff --git a/docs/styles/links/link_hover_background.md b/docs/styles/links/link_hover_background.md index c22a52476..03235bb60 100644 --- a/docs/styles/links/link_hover_background.md +++ b/docs/styles/links/link_hover_background.md @@ -8,14 +8,26 @@ The `link-hover-background` sets the background color of the link when the mouse ## Syntax -```sass -link-hover-background: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-hover-background: <color> [<percentage>]; +--8<-- "docs/snippets/syntax_block_end.md" + +`link-hover-background` accepts a [``](../../css_types/color.md) (with an optional transparency level defined by a [``](../../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 + +#### <color> --8<-- "docs/snippets/type_syntax/color.md" +#### <percentage> + --8<-- "docs/snippets/type_syntax/percentage.md" +### Defaults + +If not provided, a Textual action link will have `link-hover-background` set to `$accent`. + ## 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`. diff --git a/docs/styles/links/link_hover_color.md b/docs/styles/links/link_hover_color.md index e0a1409a3..d04758987 100644 --- a/docs/styles/links/link_hover_color.md +++ b/docs/styles/links/link_hover_color.md @@ -8,14 +8,26 @@ The `link-hover-color` sets the color of the link text when the mouse cursor is ## Syntax -```sass -link-hover-color: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-hover-color: <color> [<percentage>]; +--8<-- "docs/snippets/syntax_block_end.md" + +`link-hover-color` accepts a [``](../../css_types/color.md) (with an optional transparency level defined by a [``](../../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 + +#### <color> --8<-- "docs/snippets/type_syntax/color.md" +#### <percentage> + --8<-- "docs/snippets/type_syntax/percentage.md" +### Defaults + +If not provided, a Textual action link will have `link-hover-color` set to `white`. + ## Example The example below shows some links that have their colour changed when the mouse moves over it. diff --git a/docs/styles/links/link_hover_style.md b/docs/styles/links/link_hover_style.md index b3d92b3fe..015930c0b 100644 --- a/docs/styles/links/link_hover_style.md +++ b/docs/styles/links/link_hover_style.md @@ -8,13 +8,19 @@ The `link-hover-style` sets the text style for the link text when the mouse curs ## Syntax -```sass -link-hover-style: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-hover-style: <text-style>; +--8<-- "docs/snippets/syntax_block_end.md" ---8<-- "docs/snippets/type_syntax/color.md" +`link-hover-style` applies its [``](../../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 diff --git a/docs/styles/links/link_style.md b/docs/styles/links/link_style.md index c25670055..2f37484f9 100644 --- a/docs/styles/links/link_style.md +++ b/docs/styles/links/link_style.md @@ -8,12 +8,20 @@ The `link-style` sets the text style for the link text. ## Syntax -```sass -link-style: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +link-style: <text-style>; +--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" +### Defaults + +If not provided, a Textual action link will have `link-style` set to `underline`. + ## Example The example below shows some links with different styles applied to their text.