Merge pull request tailwindlabs#32 from tailwindcss/add-outline-docs

Add barebones docs for outline-related stuff

Author: adamwathan

navigation.php

@@ -85,6 +85,7 @@
         'Appearance' => 'appearance',
         'Box Shadow' => 'shadows',
         'Opacity' => 'opacity',
+        'Outline' => 'outline',
         'SVG' => 'svg',
     ],
     'Component Examples' => [

package.json

@@ -22,7 +22,7 @@
     "postcss-cssnext": "^3.0.2",
     "prismjs": "^1.8.3",
     "stylefmt": "^6.0.0",
-    "tailwindcss": "0.6.0",
+    "tailwindcss": "0.6.1",
     "vue": "^2.5.2",
     "webpack-watch": "^0.2.0",
     "yargs": "^10.0.3"

source/docs/outline.blade.md

@@ -0,0 +1,28 @@
+---
+extends: _layouts.documentation
+title: "Outline"
+description: "Utilities for controlling an element's outline."
+---
+
+@include('_partials.work-in-progress')
+
+@include('_partials.class-table', [
+  'rows' => [
+    [
+      '.outline-none',
+      'outline: 0;',
+      "Remove an element's outline.",
+    ],
+  ]
+])
+
+
+## Customizing
+
+@include('_partials.variants-and-disabling', [
+    'utility' => [
+        'name' => 'outline',
+        'property' => 'outline',
+    ],
+    'variants' => ['focus'],
+])

source/docs/shadows.blade.md

@@ -13,22 +13,27 @@ features:
   'rows' => [
     [
       '.shadow',
-      "box-shadow:\n  0 2px 4px 0 rgba(0,0,0,0.10);",
+      "box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);",
       "Apply a small box shadow to an element.",
     ],
     [
       '.shadow-md',
-      "box-shadow:\n  0 4px 8px 0 rgba(0,0,0,0.12),\n  0 2px 4px 0 rgba(0,0,0,0.08);",
+      "box-shadow: 0 4px 8px 0 rgba(0,0,0,0.12),\n            0 2px 4px 0 rgba(0,0,0,0.08);",
       "Apply a medium box shadow to an element.",
     ],
     [
       '.shadow-lg',
-      "box-shadow:\n  0 15px 30px 0 rgba(0,0,0,0.11),\n  0 5px 15px 0 rgba(0,0,0,0.08);",
+      "box-shadow: 0 15px 30px 0 rgba(0,0,0,0.11),\n            0 5px 15px 0 rgba(0,0,0,0.08);",
       "Apply a large box shadow to an element.",
     ],
     [
       '.shadow-inner',
-      "box-shadow:\n  inset 0 2px 4px 0 rgba(0,0,0,0.06);",
+      "box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.06);",
+      "Apply a small inner box shadow to an element.",
+    ],
+    [
+      '.shadow-outline',
+      "box-shadow: 2px solid rgba(52,144,220,0.5);",
       "Apply a small inner box shadow to an element.",
     ],
     [
@@ -65,6 +70,24 @@ Use the `.shadow-inner` utility to apply a subtle inset box shadow to an element
 @endslot
 @endcomponent
 
+## Outline shadow
+
+Use the `.shadow-outline` utility to apply a focus-ring-style shadow to an element. This can be useful when combined with `.focus:outline-none` to create a better looking focus style that follows an element's border radius.
+
+@component('_partials.code-sample', ['class' => 'flex justify-center text-sm py-8'])
+<button class="focus:outline-none focus:shadow-outline bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded w-24 mr-6">
+  Unfocused
+</button>
+<button class="focus:outline-none shadow-outline bg-grey-light hover:bg-grey text-grey-darkest font-bold py-2 px-4 rounded w-24">
+  Focused
+</button>
+@slot('code')
+<button class="focus:outline-none focus:shadow-outline ...">
+  Button
+</button>
+@endslot
+@endcomponent
+
 ## No shadow
 
 Use `.shadow-none` to remove an existing box shadow from an element. This is most commonly used to remove a shadow that was applied at a smaller breakpoint.

yarn.lock

@@ -1865,6 +1865,10 @@ css-what@2.1:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+
 css@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.1.tgz#73a4c81de85db664d4ee674f7d47085e3b2d55dc"
@@ -7415,13 +7419,14 @@ table@^4.0.1:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
-tailwindcss@0.5.3:
-  version "0.5.3"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.5.3.tgz#5444f85ab5e68a37c2bf13bc4ac097a7ee05321d"
+tailwindcss@0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-0.6.1.tgz#6fa250df581a044b3240a5b40e7beb281d56b41e"
   dependencies:
     commander "^2.11.0"
+    css.escape "^1.5.1"
     fs-extra "^4.0.2"
-    lodash "^4.17.4"
+    lodash "^4.17.5"
     perfectionist "^2.4.0"
     postcss "^6.0.9"
     postcss-functions "^3.0.0"