From dd74a1c6e257ad2c5f2f3dff4c360ea851f3a793 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Sat, 28 Oct 2017 07:37:05 -0400 Subject: [PATCH] Add z-index docs --- defaultConfig.js | 2 +- docs/source/styles/z-index.blade.md | 141 ++++++++++++++++++++++++++++ docs/source/styles/z-index.md | 12 --- 3 files changed, 142 insertions(+), 13 deletions(-) create mode 100644 docs/source/styles/z-index.blade.md delete mode 100644 docs/source/styles/z-index.md diff --git a/defaultConfig.js b/defaultConfig.js index 93ebdd092..a7e98b7e3 100644 --- a/defaultConfig.js +++ b/defaultConfig.js @@ -724,7 +724,7 @@ module.exports = { | provide a sensible numeric scale. You can, of course, modify these | values as needed. | - | Class name: .z-{name} + | Class name: .z-{index} | */ diff --git a/docs/source/styles/z-index.blade.md b/docs/source/styles/z-index.blade.md new file mode 100644 index 000000000..43ffdbac9 --- /dev/null +++ b/docs/source/styles/z-index.blade.md @@ -0,0 +1,141 @@ +--- +extends: _layouts.markdown +title: "Z-Index" +--- + +# Z-Index + +
+ Utilities for controlling the stack order of an element. +
+ +
+ Responsive + Customizing +
+ +Control the stack order (or three-dimensional positioning) of an element in Tailwind, regardless of order it has been displayed, using the `.z-{index}` utilities. + +@component('_partials.code-sample') +
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@slot('code') +
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+@endslot +@endcomponent + +## Responsive + +To control the z-index of an element at a specific breakpoint, add a `{breakpoint}:` prefix to any existing z-index utility. For example, use `md:z-50` to apply the `z-50` utility at only medium screen sizes and above. + +For more information about Tailwind's responsive design features, check out the [Responsive Design](/workflow/responsive-design) documentation. + +@component('_partials.responsive-code-sample') +@slot('none') +
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@endslot +@slot('sm') +
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@endslot +@slot('md') +
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@endslot +@slot('lg') +
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@endslot +@slot('xl') +
+
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+
+@endslot +@slot('code') +
yellow
+
z-40
+
z-30
+
z-20
+
z-10
+
z-0
+@endslot +@endcomponent + +## Customizing + +By default Tailwind provides a sensible numeric z-index scale. You can, of course, modify these values as needed. This is done in the `zIndex` section of your Tailwind config. + +@component('_partials.customized-config') +@slot('default') +{ + // ... + zIndex: { + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + 'auto': 'auto', + }, +} +@endslot +@slot('customized') +{ + // ... + zIndex: { + '0': 0, + '10': 10, + '20': 20, + '30': 30, + '40': 40, + '50': 50, + '60': 60, + '70': 70, + '80': 80, + '90': 90, + '100': 100, + 'auto': 'auto', + }, +} +@endslot +@endcomponent diff --git a/docs/source/styles/z-index.md b/docs/source/styles/z-index.md deleted file mode 100644 index 18b8acb78..000000000 --- a/docs/source/styles/z-index.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -extends: _layouts.markdown -title: "Z-Index" ---- - -# Z-Index - -
- Usage - Responsive - Customizing -