From 32fb2ec147964a87ff85d132f566f13ae0e5f2ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rodrigo=20Gir=C3=A3o=20Serr=C3=A3o?=
 <5621605+rodrigogiraoserrao@users.noreply.github.com>
Date: Wed, 21 Dec 2022 20:58:27 +0000
Subject: [PATCH] Add pages for horizontal and vertical types.

---
 docs/css_types/horizontal.md            | 27 +++++++++++++++++++++++++
 docs/css_types/vertical.md              | 27 +++++++++++++++++++++++++
 docs/snippets/type_syntax/horizontal.md |  7 +++++++
 docs/snippets/type_syntax/vertical.md   |  7 +++++++
 4 files changed, 68 insertions(+)
 create mode 100644 docs/css_types/horizontal.md
 create mode 100644 docs/css_types/vertical.md
 create mode 100644 docs/snippets/type_syntax/horizontal.md
 create mode 100644 docs/snippets/type_syntax/vertical.md

diff --git a/docs/css_types/horizontal.md b/docs/css_types/horizontal.md
new file mode 100644
index 000000000..2aef91b47
--- /dev/null
+++ b/docs/css_types/horizontal.md
@@ -0,0 +1,27 @@
+# &lt;horizontal&gt;
+
+The `<horizontal>` CSS type represents a position along the horizontal axis.
+
+## Syntax
+
+--8<-- "docs/snippets/type_syntax/horizontal.md"
+
+## Examples
+
+### CSS
+
+```sass
+* {
+    rule: left;
+    rule: center;
+    rule: right
+}
+```
+
+### Python
+
+```py
+horizontal = "left"
+horizontal = "center"
+horizontal = "right"
+```
diff --git a/docs/css_types/vertical.md b/docs/css_types/vertical.md
new file mode 100644
index 000000000..f301e1fe1
--- /dev/null
+++ b/docs/css_types/vertical.md
@@ -0,0 +1,27 @@
+# &lt;vertical&gt;
+
+The `<vertical>` CSS type represents a position along the vertical axis.
+
+## Syntax
+
+--8<-- "docs/snippets/type_syntax/vertical.md"
+
+## Examples
+
+### CSS
+
+```sass
+* {
+    rule: top;
+    rule: middle;
+    rule: bottom
+}
+```
+
+### Python
+
+```py
+vertical = "top"
+vertical = "middle"
+vertical = "bottom"
+```
diff --git a/docs/snippets/type_syntax/horizontal.md b/docs/snippets/type_syntax/horizontal.md
new file mode 100644
index 000000000..9aad683f0
--- /dev/null
+++ b/docs/snippets/type_syntax/horizontal.md
@@ -0,0 +1,7 @@
+The [`<horizontal>`](/css_types/horizontal) type can take any of the following values:
+
+| Value            | Description                                  |
+| ---------------- | -------------------------------------------- |
+| `left` (default) | Aligns on the left of the horizontal axis.   |
+| `center`         | Aligns in the center of the horizontal axis. |
+| `right`          | Aligns on the right of the horizontal axis.  |
diff --git a/docs/snippets/type_syntax/vertical.md b/docs/snippets/type_syntax/vertical.md
new file mode 100644
index 000000000..b5d91213e
--- /dev/null
+++ b/docs/snippets/type_syntax/vertical.md
@@ -0,0 +1,7 @@
+The [`<vertical>`](/css_types/vertical) type can take any of the following values:
+
+| Value           | Description                                |
+| --------------- | ------------------------------------------ |
+| `top` (default) | Aligns at the top of the vertical axis.    |
+| `middle`        | Aligns in the middle of the vertical axis. |
+| `bottom`        | Aligns at the bottom of the vertical axis. |