From d4f7b3b51390dee87cd27ad29f77b61d4230c42c Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Mon, 13 Nov 2017 16:41:08 -0500 Subject: [PATCH] Update docs for new radius utilities --- .../js/components/ResponsiveCodeSample.vue | 2 +- docs/source/_assets/less/markdown.less | 4 +- docs/source/_layouts/documentation.blade.php | 2 +- docs/source/_partials/code-sample.blade.php | 2 +- .../_partials/customized-config.blade.php | 2 +- .../source/_partials/feature-badges.blade.php | 32 +- .../work-in-progress-example.blade.php | 2 +- .../_partials/work-in-progress.blade.php | 2 +- docs/source/docs/border-color.blade.md | 2 +- docs/source/docs/border-radius.blade.md | 338 +++++++++++++----- docs/source/docs/border-width.blade.md | 22 +- docs/source/docs/colors.blade.md | 20 +- docs/source/docs/examples/alerts.blade.md | 8 +- docs/source/docs/examples/buttons.blade.md | 28 +- docs/source/docs/examples/cards.blade.md | 14 +- docs/source/docs/examples/forms.blade.md | 30 +- docs/source/docs/examples/navigation.blade.md | 18 +- .../docs/extracting-components.blade.md | 30 +- docs/source/docs/forms.blade.md | 2 +- .../docs/functions-and-directives.blade.md | 6 +- docs/source/docs/installation.blade.md | 4 +- docs/source/docs/opacity.blade.md | 10 +- docs/source/docs/positioning.blade.md | 28 +- docs/source/docs/responsive-design.blade.md | 10 +- docs/source/docs/shadows.blade.md | 10 +- docs/source/docs/spacing.blade.md | 38 +- docs/source/docs/text-color.blade.md | 2 +- docs/source/docs/visibility.blade.md | 14 +- docs/source/docs/what-is-tailwind.blade.md | 18 +- docs/source/index.blade.php | 12 +- 30 files changed, 445 insertions(+), 267 deletions(-) diff --git a/docs/source/_assets/js/components/ResponsiveCodeSample.vue b/docs/source/_assets/js/components/ResponsiveCodeSample.vue index 408d694a6..c11a7655a 100644 --- a/docs/source/_assets/js/components/ResponsiveCodeSample.vue +++ b/docs/source/_assets/js/components/ResponsiveCodeSample.vue @@ -22,7 +22,7 @@

xl

-
+
diff --git a/docs/source/_assets/less/markdown.less b/docs/source/_assets/less/markdown.less index 9081c6798..b76bedf42 100644 --- a/docs/source/_assets/less/markdown.less +++ b/docs/source/_assets/less/markdown.less @@ -31,7 +31,7 @@ > p code, p& code& { @apply .inline-block; @apply .bg-smoke-lighter; - @apply .rounded-sm; + @apply .radius-sm; @apply .text-sm; @apply .p-1; @apply .leading-none; @@ -46,7 +46,7 @@ @apply .font-mono; @apply .border-2; @apply .border-smoke; - @apply .rounded; + @apply .radius-md; font-weight: 400; } diff --git a/docs/source/_layouts/documentation.blade.php b/docs/source/_layouts/documentation.blade.php index f2e1f1f88..48268c153 100644 --- a/docs/source/_layouts/documentation.blade.php +++ b/docs/source/_layouts/documentation.blade.php @@ -24,7 +24,7 @@

- +
diff --git a/docs/source/_partials/code-sample.blade.php b/docs/source/_partials/code-sample.blade.php index 3c5925c0b..cde8dd68e 100644 --- a/docs/source/_partials/code-sample.blade.php +++ b/docs/source/_partials/code-sample.blade.php @@ -1,4 +1,4 @@ -
+
{{ $slot }}
diff --git a/docs/source/_partials/customized-config.blade.php b/docs/source/_partials/customized-config.blade.php index f69383f2a..159e08e72 100644 --- a/docs/source/_partials/customized-config.blade.php +++ b/docs/source/_partials/customized-config.blade.php @@ -1,4 +1,4 @@ -
+
{
// ...
diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php index 4f2be45b5..50e7aef41 100644 --- a/docs/source/_partials/feature-badges.blade.php +++ b/docs/source/_partials/feature-badges.blade.php @@ -1,15 +1,15 @@
@if ($responsive) - - + + Responsive @else - - + + Responsive @@ -17,15 +17,15 @@ @endif @if ($customizable) - - + + Customizable @else - - + + Customizable @@ -33,15 +33,15 @@ @endif @if ($hover) - - + + Hover @else - - + + Hover @@ -49,15 +49,15 @@ @endif @if ($focus) - - + + Focus @else - - + + Focus diff --git a/docs/source/_partials/work-in-progress-example.blade.php b/docs/source/_partials/work-in-progress-example.blade.php index be08a866d..dc95d2093 100644 --- a/docs/source/_partials/work-in-progress-example.blade.php +++ b/docs/source/_partials/work-in-progress-example.blade.php @@ -1,5 +1,5 @@
-
+
diff --git a/docs/source/_partials/work-in-progress.blade.php b/docs/source/_partials/work-in-progress.blade.php index 16a349c70..47cd42cbb 100644 --- a/docs/source/_partials/work-in-progress.blade.php +++ b/docs/source/_partials/work-in-progress.blade.php @@ -1,4 +1,4 @@ -
+
diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index a55a18f57..f0c2b7247 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -37,7 +37,7 @@ features: In addition to the standard responsive variations, border colors also come in `hover:` variations that apply the given border color on hover. @component('_partials.code-sample', ['class' => 'text-center']) - @endcomponent diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 320a21f9a..560a8e5e0 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -11,11 +11,6 @@ features:
- - - - - @@ -25,61 +20,229 @@ features: - - - - - - - + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + + - - - + + + - - - + + + - - - + + + - - - + + + + + + + + + + + + + + + + + + + + + + + Remove any border radius from all corners of an element. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Class
.roundedborder-radius: .25rem;Apply a medium border radius to all corners of an element.
.rounded-smborder-radius: .125rem;.radius-smborder-radius: .125rem; Apply a small border radius to all corners of an element.
.rounded-lgborder-radius: .5rem;.radius-t-smborder-top-left-radius: .125rem;
border-top-right-radius: .125rem;		Apply a small border radius to the top corners of an element.
.radius-r-smborder-top-right-radius: .125rem;
border-bottom-right-radius: .125rem;		Apply a small border radius to the right corners of an element.
.radius-b-smborder-bottom-right-radius: .125rem;
border-bottom-left-radius: .125rem;		Apply a small border radius to the bottom corners of an element.
.radius-l-smborder-top-left-radius: .125rem;
border-bottom-left-radius: .125rem;		Apply a small border radius to the left corners of an element.
.radius-tl-smborder-top-left-radius: .125rem;Apply a small border radius to the top left corner of an element.
.radius-tr-smborder-top-right-radius: .125rem;Apply a small border radius to the top right corner of an element.
.radius-br-smborder-bottom-right-radius: .125rem;Apply a small border radius to the bottom right corner of an element.
.radius-bl-smborder-bottom-left-radius: .125rem;Apply a small border radius to the bottom left corner of an element.
.radius-mdborder-radius: .25rem;Apply a medium border radius to all corners of an element.
.radius-t-mdborder-top-left-radius: .25rem;
border-top-right-radius: .25rem;		Apply a medium border radius to the top corners of an element.
.radius-r-mdborder-top-right-radius: .25rem;
border-bottom-right-radius: .25rem;		Apply a medium border radius to the right corners of an element.
.radius-b-mdborder-bottom-right-radius: .25rem;
border-bottom-left-radius: .25rem;		Apply a medium border radius to the bottom corners of an element.
.radius-l-mdborder-top-left-radius: .25rem;
border-bottom-left-radius: .25rem;		Apply a medium border radius to the left corners of an element.
.radius-tl-mdborder-top-left-radius: .25rem;Apply a medium border radius to the top left corner of an element.
.radius-tr-mdborder-top-right-radius: .25rem;Apply a medium border radius to the top right corner of an element.
.radius-br-mdborder-bottom-right-radius: .25rem;Apply a medium border radius to the bottom right corner of an element.
.radius-bl-mdborder-bottom-left-radius: .25rem;Apply a medium border radius to the bottom left corner of an element.
.radius-lgborder-radius: .5rem; Apply a large border radius to all corners of an element.
.rounded-fullborder-radius: 9999px;.radius-t-lgborder-top-left-radius: .5rem;
border-top-right-radius: .5rem;		Apply a large border radius to the top corners of an element.
.radius-r-lgborder-top-right-radius: .5rem;
border-bottom-right-radius: .5rem;		Apply a large border radius to the right corners of an element.
.radius-b-lgborder-bottom-right-radius: .5rem;
border-bottom-left-radius: .5rem;		Apply a large border radius to the bottom corners of an element.
.radius-l-lgborder-top-left-radius: .5rem;
border-bottom-left-radius: .5rem;		Apply a large border radius to the left corners of an element.
.radius-tl-lgborder-top-left-radius: .5rem;Apply a large border radius to the top left corner of an element.
.radius-tr-lgborder-top-right-radius: .5rem;Apply a large border radius to the top right corner of an element.
.radius-br-lgborder-bottom-right-radius: .5rem;Apply a large border radius to the bottom right corner of an element.
.radius-bl-lgborder-bottom-left-radius: .5rem;Apply a large border radius to the bottom left corner of an element.
.radius-fullborder-radius: 9999px; Fully round all corners of an element.
.rounded-noneborder-radius: 0;Remove any border radius from all sides of an element..radius-t-fullborder-top-left-radius: 9999px;
border-top-right-radius: 9999px;		Fully round the top corners of an element.
.rounded-t - border-bottom-left-radius: 0;
- border-bottom-right-radius: 0; - 		Only round the top corners of an element..radius-r-fullborder-top-right-radius: 9999px;
border-bottom-right-radius: 9999px;		Fully round the right corners of an element.
.rounded-r - border-top-left-radius: 0;
- border-bottom-left-radius: 0; - 		Only round the right side corners of an element..radius-b-fullborder-bottom-right-radius: 9999px;
border-bottom-left-radius: 9999px;		Fully round the bottom corners of an element.
.rounded-b - border-top-right-radius: 0;
- border-top-left-radius: 0; - 		Only round the bottom corners of an element..radius-l-fullborder-top-left-radius: 9999px;
border-bottom-left-radius: 9999px;		Fully round the left corners of an element.
.rounded-l - border-top-right-radius: 0;
- border-bottom-right-radius: 0; - 		Only round the left side corners of an element..radius-tl-fullborder-top-left-radius: 9999px;Fully round the top left corner of an element.
.radius-tr-fullborder-top-right-radius: 9999px;Fully round the top right corner of an element.
.radius-br-fullborder-bottom-right-radius: 9999px;Fully round the bottom right corner of an element.
.radius-bl-fullborder-bottom-left-radius: 9999px;Fully round the bottom left corner of an element.
.radius-noneborder-radius: 0;
.radius-t-noneborder-top-left-radius: 0;
border-top-right-radius: 0;		Remove any border radius from the top corners of an element.
.radius-r-noneborder-top-right-radius: 0;
border-bottom-right-radius: 0;		Remove any border radius from the right corners of an element.
.radius-b-noneborder-bottom-right-radius: 0;
border-bottom-left-radius: 0;		Remove any border radius from the bottom corners of an element.
.radius-l-noneborder-top-left-radius: 0;
border-bottom-left-radius: 0;		Remove any border radius from the left corners of an element.
.radius-tl-noneborder-top-left-radius: 0;Remove any border radius from the top left corner of an element.
.radius-tr-noneborder-top-right-radius: 0;Remove any border radius from the top right corner of an element.
.radius-br-noneborder-bottom-right-radius: 0;Remove any border radius from the bottom right corner of an element.
.radius-bl-noneborder-bottom-left-radius: 0;Remove any border radius from the bottom left corner of an element.
@@ -87,96 +250,113 @@ features: ## Rounded corners -Use the `.rounded`, `.rounded-sm`, or `.rounded-lg` utilities to apply different border radius sizes to an element. +Use the `.radius-sm`, `.radius-md`, or `.radius-lg` utilities to apply different border radius sizes to an element. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm']) -
.rounded-sm
-
.rounded
-
.rounded-lg
+
.radius-sm
+
.radius-md
+
.radius-lg
@slot('code') -
-
-
+
+
+
@endslot @endcomponent ## Pills and circles -Use the `.rounded-full` utility to create pills and circles. +Use the `.radius-full` utility to create pills and circles. @component('_partials.code-sample', ['class' => 'flex items-center justify-around text-sm']) -
Pill shape
-
Circle
+
Pill shape
+
Circle
@slot('code') -
Pill shape
-
Circle
+
Pill shape
+
Circle
@endslot @endcomponent ## No rounding -Use `.rounded-none` to remove an existing border radius from an element. +Use `.radius-none` to remove an existing border radius from an element. This is most commonly used to remove a border radius that was applied at a smaller breakpoint. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm py-8']) -
.rounded-none
+
.radius-none
@slot('code') -
+
@endslot @endcomponent ## Rounding sides separately -Combine one of the `.rounded{-size}` utilities with `.rounded-t`, `.rounded-r`, `.rounded-b`, or `.rounded-l` to only round one side of an element. +Use `.radius-{t|r|b|l}-{size}` to only round one side an element. @component('_partials.code-sample', ['class' => 'flex justify-around text-sm']) -
.rounded-t
-
.rounded-r
-
.rounded-b
-
.rounded-l
+
.radius-t-lg
+
.radius-r-lg
+
.radius-b-lg
+
.radius-l-lg
@slot('code') -
-
-
-
+
+
+
+
+@endslot +@endcomponent + +## Rounding corners separately + +Use `.radius-{tl|tr|br|bl}-{size}` to only round one corner an element. + +@component('_partials.code-sample', ['class' => 'flex justify-around text-sm']) +
.radius-tl-lg
+
.radius-tr-lg
+
.radius-br-lg
+
.radius-bl-lg
+@slot('code') +
+
+
+
@endslot @endcomponent ## Responsive -To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:rounded-lg` to apply the `rounded-lg` utility at only medium screen sizes and above. +To control the border radius of an element at a specific breakpoint, add a `{screen}:` prefix to any existing border radius utility. For example, use `md:radius-lg` to apply the `radius-lg` utility at only medium screen sizes and above. For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. @component('_partials.responsive-code-sample') @slot('none')
-
+
@endslot @slot('sm')
-
+
@endslot @slot('md')
-
+
@endslot @slot('lg')
-
+
@endslot @slot('xl')
-
+
@endslot @slot('code') -
+
@endslot @@ -186,16 +366,14 @@ For more information about Tailwind's responsive design features, check out the By default Tailwind provides five border radius size utilities. You can change, add, or remove these by editing the `borderRadius` section of your Tailwind config. -If a `default` border radius is provided, it will be used for the non-suffixed `.rounded` utility. Any other keys will be used as suffixes, for example the key `'2'` will create a corresponding `.rounded-2` utility. - -Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.rounded-t`) aren't customizable. +Note that only the different border radius *sizes* can be customized; the utilities for controlling which side to round (like `.radius-t`) aren't customizable. @component('_partials.customized-config', ['key' => 'borderRadius']) -- default: '.25rem', -+ default: '4px', + 'none': '0', - 'sm': '.125rem', +- 'md': '.25rem', ++ 'md': '4px', - 'lg': '.5rem', - 'full': '9999px', + 'large': '12px', - 'none': '0', @endcomponent diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index 19dca9611..f4f45c7bb 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -18,22 +18,22 @@ For example, `.border` would add a `1px` border to all sides of the element, whe
Class
-
border
+
border
Side (optional)
-
  All (default)
-
t Top
-
r Right
-
b Bottom
-
l Left
+
  All (default)
+
t Top
+
r Right
+
b Bottom
+
l Left
Width (optional)
-
0 0px
-
  1px (default)
-
2 2px
-
4 4px
-
8 8px
+
0 0px
+
  1px (default)
+
2 2px
+
4 4px
+
8 8px
diff --git a/docs/source/docs/colors.blade.md b/docs/source/docs/colors.blade.md index e4ca285b7..9c9008b93 100644 --- a/docs/source/docs/colors.blade.md +++ b/docs/source/docs/colors.blade.md @@ -12,7 +12,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Grey
@@ -62,7 +62,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Red
@@ -101,7 +101,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Orange
@@ -140,7 +140,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Yellow
@@ -179,7 +179,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Green
@@ -218,7 +218,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Teal
@@ -257,7 +257,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Blue
@@ -296,7 +296,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Indigo
@@ -335,7 +335,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Purple
@@ -374,7 +374,7 @@ To get you started, we've provided a generous palette of great looking colors th
-
+
Pink
diff --git a/docs/source/docs/examples/alerts.blade.md b/docs/source/docs/examples/alerts.blade.md index d35f4b55b..318ed80f0 100644 --- a/docs/source/docs/examples/alerts.blade.md +++ b/docs/source/docs/examples/alerts.blade.md @@ -9,7 +9,7 @@ description: null ### Traditional @component('_partials.code-sample', ['lang' => 'html']) -