-
Notifications
You must be signed in to change notification settings - Fork 819
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Rename link-hover-* rules to link-*-hover.
- Loading branch information
1 parent
07bfcf2
commit 85761b2
Showing
28 changed files
with
162 additions
and
154 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
...xamples/styles/link_hover_background.tcss → ...xamples/styles/link_background_hover.tcss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| #lbl1, #lbl2 { | ||
| link-color-hover: red; /* (1)! */ | ||
| } | ||
|
|
||
| #lbl3 { | ||
| link-color-hover: hsl(60,100%,50%) 50%; | ||
| } | ||
|
|
||
| #lbl4 { | ||
| link-color-hover: black; | ||
| } |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| #lbl1, #lbl2 { | ||
| link-style-hover: bold italic; /* (1)! */ | ||
| } | ||
|
|
||
| #lbl3 { | ||
| link-style-hover: reverse strike; | ||
| } | ||
|
|
||
| #lbl4 { | ||
| link-style-hover: bold; | ||
| } |
File renamed without changes
File renamed without changes
File renamed without changes
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 25 additions & 25 deletions
50
docs/styles/links/link_hover_color.md → docs/styles/links/link_color_hover.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,80 +1,80 @@ | ||
| # Link-hover-color | ||
| # Link-color-hover | ||
|
|
||
| The `link-hover-color` style sets the color of the link text when the mouse cursor is over the link. | ||
| The `link-color-hover` style sets the color of the link text when the mouse cursor is over the link. | ||
|
|
||
| !!! note | ||
|
|
||
| `link-hover-color` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. | ||
| `link-color-hover` only applies to Textual action links as described in the [actions guide](../../guide/actions.md#links) and not to regular hyperlinks. | ||
|
|
||
| ## Syntax | ||
|
|
||
| --8<-- "docs/snippets/syntax_block_start.md" | ||
| link-hover-color: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]; | ||
| link-color-hover: <a href="../../css_types/color"><color></a> [<a href="../../css_types/percentage"><percentage></a>]; | ||
| --8<-- "docs/snippets/syntax_block_end.md" | ||
|
|
||
| `link-hover-color` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity 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. | ||
| `link-color-hover` accepts a [`<color>`](../../css_types/color.md) (with an optional opacity 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. | ||
|
|
||
| ### Defaults | ||
|
|
||
| If not provided, a Textual action link will have `link-hover-color` set to `white`. | ||
| If not provided, a Textual action link will have `link-color-hover` set to `white`. | ||
|
|
||
| ## Example | ||
|
|
||
| The example below shows some links that have their colour changed when the mouse moves over it. | ||
| It also shows that `link-hover-color` does not affect hyperlinks. | ||
| It also shows that `link-color-hover` does not affect hyperlinks. | ||
|
|
||
| === "Output" | ||
|
|
||
|  | ||
|  | ||
|
|
||
| !!! note | ||
|
|
||
| The background color also changes when the mouse moves over the links because that is the default behavior. | ||
| That can be customised by setting [`link-hover-background`](./link_hover_background.md) but we haven't done so in this example. | ||
| That can be customised by setting [`link-background-hover`](./link_background_hover.md) but we haven't done so in this example. | ||
|
|
||
| !!! note | ||
|
|
||
| The GIF has reduced quality to make it easier to load in the documentation. | ||
| Try running the example yourself with `textual run docs/examples/styles/link_hover_color.py`. | ||
| Try running the example yourself with `textual run docs/examples/styles/link_color_hover.py`. | ||
|
|
||
| === "link_hover_color.py" | ||
| === "link_color_hover.py" | ||
|
|
||
| ```py hl_lines="10-11 14-15 18-19 22-23" | ||
| --8<-- "docs/examples/styles/link_hover_color.py" | ||
| --8<-- "docs/examples/styles/link_color_hover.py" | ||
| ``` | ||
|
|
||
| 1. This label has a hyperlink so it won't be affected by the `link-hover-color` rule. | ||
| 2. This label has an "action link" that can be styled with `link-hover-color`. | ||
| 3. This label has an "action link" that can be styled with `link-hover-color`. | ||
| 4. This label has an "action link" that can be styled with `link-hover-color`. | ||
| 1. This label has a hyperlink so it won't be affected by the `link-color-hover` rule. | ||
| 2. This label has an "action link" that can be styled with `link-color-hover`. | ||
| 3. This label has an "action link" that can be styled with `link-color-hover`. | ||
| 4. This label has an "action link" that can be styled with `link-color-hover`. | ||
|
|
||
| === "link_hover_color.tcss" | ||
| === "link_color_hover.tcss" | ||
|
|
||
| ```sass hl_lines="2 6 10" | ||
| --8<-- "docs/examples/styles/link_hover_color.tcss" | ||
| --8<-- "docs/examples/styles/link_color_hover.tcss" | ||
| ``` | ||
|
|
||
| 1. This will only affect one of the labels because action links are the only links that this rule affects. | ||
|
|
||
| ## CSS | ||
|
|
||
| ```sass | ||
| link-hover-color: red 70%; | ||
| link-hover-color: black; | ||
| link-color-hover: red 70%; | ||
| link-color-hover: black; | ||
| ``` | ||
|
|
||
| ## Python | ||
|
|
||
| ```py | ||
| widget.styles.link_hover_color = "red 70%" | ||
| widget.styles.link_hover_color = "black" | ||
| widget.styles.link_color_hover = "red 70%" | ||
| widget.styles.link_color_hover = "black" | ||
|
|
||
| # You can also use a `Color` object directly: | ||
| widget.styles.link_hover_color = Color(100, 30, 173) | ||
| widget.styles.link_color_hover = Color(100, 30, 173) | ||
| ``` | ||
|
|
||
| ## See also | ||
|
|
||
| - [`link-color`](./link_color.md) to set the color of link text. | ||
| - [`link-hover-background](./link_hover_background.md) to set the background color of link text when the mouse pointer is over it. | ||
| - [`link-hover-style](./link_hover_style.md) to set the style of link text when the mouse pointer is over it. | ||
| - [`link-background-hover](./link_background_hover.md) to set the background color of link text when the mouse pointer is over it. | ||
| - [`link-style-hover](./link_style_hover.md) to set the style of link text when the mouse pointer is over it. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.