Remove redundant values subsections.

[skip ci]
This commit is contained in:
Rodrigo Girão Serrão
2023-01-06 14:41:13 +00:00
parent 583b1273ac
commit 42baa0e074
20 changed files with 1 additions and 137 deletions

View File

@@ -21,17 +21,6 @@ To specify alignment on a single axis, use the respective style and type:
- `align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- `align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
### Values
#### &lt;horizontal&gt;
--8<-- "docs/snippets/type_syntax/horizontal.md"
#### &lt;vertical&gt;
--8<-- "docs/snippets/type_syntax/vertical.md"
## Examples
This example contains a simple app with two labels centered on the screen with `align: center middle;`:

View File

@@ -8,18 +8,7 @@ The `background` rule sets the background color of a widget.
background: <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 `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md"
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
This is clamped between `0%` and `100%`.
The style `background` needs a [`<color>`](../../css_types/color) followed by an optional [`<percentage>`](../../css_types/percentage) to specify the color transparency (clamped between `0%` and `100%`).
## Examples

View File

@@ -17,16 +17,6 @@ The style `border` accepts an optional [`<border>`](../../css_types/border) that
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.
### Values
#### &lt;border&gt;
--8<-- "docs/snippets/type_syntax/border.md"
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md"
### Multiple edge rules
If multiple border rules target the same edge, the last rule that targets a specific edge is the one that is applied to that edge.

View File

@@ -12,18 +12,6 @@ The style `color` needs a [`<color>`](../../css_types/color) followed by an opti
Instead of a [`<color>`](../../css_types/color), one can use the special value `"auto"` to choose automatically the color with the best contrast for readability purposes.
### Values
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md"
The alternative value `"auto"` picks the color that provides the best contrast for readability purposes.
#### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
## Examples
This example sets a different text color for each of three different widgets.

View File

@@ -22,16 +22,6 @@ To specify content alignment on a single axis, use the respective style and type
- `content-align-horizontal` takes a [`<horizontal>`](../../css_types/horizontal) and does alignment along the horizontal axis; and
- `content-align-vertical` takes a [`<vertical>`](../../css_types/vertical) and does alignment along the vertical axis.
### Values
#### &lt;horizontal&gt;
--8<-- "docs/snippets/type_syntax/horizontal.md"
#### &lt;vertical&gt;
--8<-- "docs/snippets/type_syntax/vertical.md"
## Examples
This first example shows three labels stacked vertically, each with different content alignments.

View File

@@ -11,10 +11,6 @@ height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
The style `height` needs a [`<scalar>`](../../css_types/scalar) to determine the vertical length of the widget.
By default, it sets the height of the content area, but if [`box-sizing`](./box_sizing) is set to `border-box` it sets the height of the border area.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Examples
This examples creates a widget with a height of 50% of the screen.

View File

@@ -13,10 +13,6 @@ This [`<name>`](../../css_types/name) must correspond to a [`<name>`](../../css_
More information on layers can be found in the [guide](../guide/layout.md#layers).
### Values
--8<-- "docs/snippets/type_syntax/name.md"
!!! warning
Using a `<name>` that hasn't been defined in a [`layers`](./layers.md) declaration of an ancestor of this widget has no effect.

View File

@@ -15,10 +15,6 @@ The layers defined first in the list are drawn under the layers that are defined
More information on layers can be found in the [guide](../guide/layout.md#layers).
### Values
--8<-- "docs/snippets/type_syntax/name.md"
## Example
In the example below, `#box1` is yielded before `#box2`.

View File

@@ -32,10 +32,6 @@ The number of values given defines what edges get what margin:
Alternatively, margin can be set for each edge individually through the rules `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`, respectively.
### Values
--8<-- "docs/snippets/type_syntax/integer.md"
## Examples
In the example below we add a large margin to a label, which makes it move away from the top-left corner of the screen.

View File

@@ -11,10 +11,6 @@ max-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
The `max-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`height`](./height) of a widget.
That is, the height of a widget is never allowed to exceed `max-height`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders that were defined to span vertically from the top edge of the terminal to the bottom edge.

View File

@@ -11,10 +11,6 @@ max-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
The `max-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines an upper bound for the [`width`](./width) of a widget.
That is, the width of a widget is never allowed to exceed `max-width`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders that were defined to span horizontally from the top edge of the terminal to the bottom edge.

View File

@@ -11,10 +11,6 @@ min-height: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
The `min-height` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`height`](./height) of a widget.
That is, the height of a widget is never allowed to be under `min-height`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders with their height set to `50%`.

View File

@@ -11,10 +11,6 @@ min-width: <a href="../../css_types/scalar">&lt;scalar&gt;</a>;
The `min-width` rule accepts a [`<scalar>`](../../css_types/scalar) that defines a lower bound for the [`width`](./width) of a widget.
That is, the width of a widget is never allowed to be under `min-width`.
### Values
--8<-- "docs/snippets/type_syntax/scalar.md"
## Example
The example below shows some placeholders with their width set to `50%`.

View File

@@ -15,10 +15,6 @@ The two [`<scalar>`](../../css_types/scalar) in the `offset` define, respectivel
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.

View File

@@ -13,18 +13,6 @@ The opacity of a widget can be set as a [`<number>`](../css_types/number.md) or
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
Values outside of these ranges will be clamped.
### Values
### &lt;number&gt;
--8<-- "docs/snippets/type_syntax/number.md"
The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
## Example
This example shows, from top to bottom, increasing opacity values for a label with a border and some text.

View File

@@ -22,16 +22,6 @@ The style `outline` accepts an optional [`<border>`](../../css_types/border) tha
Unlike the style [`border`](./border.md), the frame of the outline is drawn over the content area of the widget.
This rule can be useful for temporary emphasis of the content of a widget, if you want to draw the user's attention to it.
### Values
#### &lt;border&gt;
--8<-- "docs/snippets/type_syntax/border.md"
#### &lt;color&gt;
--8<-- "docs/snippets/type_syntax/color.md"
## Examples
This example shows a widget with an outline. Note how the outline occludes the text area.

View File

@@ -19,10 +19,6 @@ Overflow may also be set individually for each axis:
- `overflow-x` sets the overflow for the horizontal axis; and
- `overflow-y` sets the overflow for the vertical axis.
### Values
--8<-- "docs/snippets/type_syntax/overflow.md"
### Defaults
The default setting for containers is `overflow: auto auto`.

View File

@@ -10,10 +10,6 @@ text-align: <a href="../../css_types/text_align">&lt;text-align&gt;</a>;
The `text-align` rule accepts a value of the type [`<text-align>`](../css_types/text_align.md) that defines how text is aligned inside the widget.
### Values
--8<-- "docs/snippets/type_syntax/text_align.md"
### Defaults
The default value is `start`.

View File

@@ -13,18 +13,6 @@ The text opacity can be set as a [`<number>`](../css_types/number.md) or a [`<pe
Conversely, `1`/`100%` means full opacity, which is equivalent to no transparency.
Values outside of these ranges will be clamped.
### Values
### &lt;number&gt;
--8<-- "docs/snippets/type_syntax/number.md"
The value of [`<number>`](../../css_types/number) is clamped between `0` and `1`.
### &lt;percentage&gt;
--8<-- "docs/snippets/type_syntax/percentage.md"
The value of [`<percentage>`](../../css_types/percentage) is clamped between `0%` and `100%`.
## Example
This example shows, from top to bottom, increasing `text-opacity` values.

View File

@@ -10,10 +10,6 @@ text-style: <a href="../../css_types/text_style">&lt;text-style&gt;</a>;
`text-style` will take all the values specified and will apply that styling combination to the text in the widget.
### Values
--8<-- "docs/snippets/type_syntax/text_style.md"
## Examples
Each of the three text panels has a different text style, respectively `bold`, `italic`, and `reverse`, from left to right.