diff --git a/docs/styles/offset.md b/docs/styles/offset.md index 059a1edbe..e8cf643d6 100644 --- a/docs/styles/offset.md +++ b/docs/styles/offset.md @@ -1,19 +1,33 @@ # Offset -The `offset` rule adds an offset to the widget's position. The offset is given as two values. - -Coordinates may be specified individually with `offset-x` and `offset-y`. +The `offset` rule defines an offset for the position of the widget. ## Syntax -``` -offset: ; -``` +--8<-- "docs/snippets/syntax_block_start.md" +offset: <scalar> <scalar>; + +offset-x: <scalar>; +offset-y: <scalar> +--8<-- "docs/snippets/syntax_block_end.md" + +The two [``](../css_types/scalar.md) in the `offset` define, respectively, the offsets in the horizontal and vertical axes for the widget. + +To specify an offset along a single axis, you can use `offset-x` and `offset-y`. + +### Values + +--8<-- "docs/snippets/type_syntax/scalar.md" ## Example In this example, we have 3 widgets with differing offsets. +=== "Output" + + ```{.textual path="docs/examples/styles/offset.py"} + ``` + === "offset.py" ```python @@ -26,20 +40,23 @@ In this example, we have 3 widgets with differing offsets. --8<-- "docs/examples/styles/offset.css" ``` -=== "Output" - - ```{.textual path="docs/examples/styles/offset.py"} - ``` - ## CSS ```sass -/* Move the widget 2 cells in the x direction, and 4 in the y direction. */ -offset: 2 4; +/* Move the widget 8 cells in the x direction and 2 in tye y direction */ +offset: 8 2; + +/* Move the widget 4 cells in the x direction +offset-x: 4; +/* Move the widget -2 cells in the y direction +offset-y: -2; ``` ## Python +You cannot change programmatically the offset for a single axis. +You have to set the two axes at the same time. + ```python # Move the widget 2 cells in the x direction, and 4 in the y direction. widget.styles.offset = (2, 4)