From b8ca236400d5ebbcb6bf664fe6012ca2b3c51562 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 9 Feb 2018 16:51:58 +0100 Subject: [PATCH 1/7] Add support for active state variant --- defaultConfig.stub.js | 3 ++- src/lib/substituteVariantsAtRules.js | 11 ++++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/defaultConfig.stub.js b/defaultConfig.stub.js index d2e5ab7f8277..c95709754d44 100644 --- a/defaultConfig.stub.js +++ b/defaultConfig.stub.js @@ -804,7 +804,8 @@ module.exports = { | Here is where you control which modules are generated and what variants are | generated for each of those modules. | - | Currently supported variants: 'responsive', 'hover', 'focus', 'group-hover' + | Currently supported variants: 'responsive', 'hover', 'active', focus', + | 'group-hover' | | To disable a module completely, use `false` instead of an array. | diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 652c133fb902..79fc634cc02e 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -12,6 +12,15 @@ const variantGenerators = { container.before(cloned.nodes) }, + active: (container, config) => { + const cloned = container.clone() + + cloned.walkRules(rule => { + rule.selector = `${buildClassVariant(rule.selector, 'active', config.options.separator)}:active` + }) + + container.before(cloned.nodes) + }, focus: (container, config) => { const cloned = container.clone() @@ -48,7 +57,7 @@ export default function(config) { atRule.before(atRule.clone().nodes) - _.forEach(['focus', 'hover', 'group-hover'], variant => { + _.forEach(['hover', 'active', 'focus', 'group-hover'], variant => { if (variants.includes(variant)) { variantGenerators[variant](atRule, unwrappedConfig) } From e112b98d4e3c0f3c91f2fcbca8ad42d3bf1ac877 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 9 Feb 2018 18:58:37 +0100 Subject: [PATCH 2/7] Update docs with active state variant --- docs/source/_assets/less/main.less | 12 +++++++ .../source/_partials/feature-badges.blade.php | 16 +++++++++ .../variants-and-disabling.blade.php | 5 +-- .../docs/background-attachment.blade.md | 1 + docs/source/docs/background-color.blade.md | 1 + docs/source/docs/background-position.blade.md | 1 + docs/source/docs/background-repeat.blade.md | 1 + docs/source/docs/background-size.blade.md | 1 + docs/source/docs/border-color.blade.md | 1 + docs/source/docs/border-radius.blade.md | 1 + docs/source/docs/border-style.blade.md | 1 + docs/source/docs/border-width.blade.md | 1 + docs/source/docs/configuration.blade.md | 1 + docs/source/docs/cursor.blade.md | 1 + docs/source/docs/display.blade.md | 1 + .../docs/flexbox-align-content.blade.md | 1 + docs/source/docs/flexbox-align-items.blade.md | 1 + docs/source/docs/flexbox-align-self.blade.md | 1 + docs/source/docs/flexbox-direction.blade.md | 1 + docs/source/docs/flexbox-display.blade.md | 1 + .../docs/flexbox-flex-grow-shrink.blade.md | 1 + .../docs/flexbox-justify-content.blade.md | 1 + docs/source/docs/flexbox-wrapping.blade.md | 1 + docs/source/docs/floats.blade.md | 1 + docs/source/docs/font-weight.blade.md | 1 + docs/source/docs/fonts.blade.md | 1 + docs/source/docs/forms.blade.md | 1 + docs/source/docs/height.blade.md | 1 + docs/source/docs/letter-spacing.blade.md | 1 + docs/source/docs/line-height.blade.md | 1 + docs/source/docs/lists.blade.md | 1 + docs/source/docs/max-height.blade.md | 1 + docs/source/docs/max-width.blade.md | 1 + docs/source/docs/min-height.blade.md | 1 + docs/source/docs/min-width.blade.md | 1 + docs/source/docs/opacity.blade.md | 1 + docs/source/docs/overflow.blade.md | 1 + docs/source/docs/pointer-events.blade.md | 1 + docs/source/docs/positioning.blade.md | 1 + docs/source/docs/resize.blade.md | 1 + docs/source/docs/shadows.blade.md | 1 + docs/source/docs/spacing.blade.md | 1 + docs/source/docs/state-variants.blade.md | 33 +++++++++++++++++-- docs/source/docs/text-alignment.blade.md | 1 + docs/source/docs/text-color.blade.md | 1 + docs/source/docs/text-sizing.blade.md | 1 + docs/source/docs/text-style.blade.md | 1 + docs/source/docs/user-select.blade.md | 1 + docs/source/docs/vertical-alignment.blade.md | 1 + docs/source/docs/visibility.blade.md | 1 + .../docs/whitespace-and-wrapping.blade.md | 1 + docs/source/docs/width.blade.md | 1 + docs/source/docs/z-index.blade.md | 1 + 53 files changed, 111 insertions(+), 4 deletions(-) diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index 8de9f296bdc1..63b46dad4dd6 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -24,6 +24,18 @@ ul { @tailwind utilities; +.active\:bg-blue:active { + @apply .bg-blue; +} + +.active\:text-white:active { + @apply .text-white; +} + +.active\:border-transparent:active { + @apply .border-transparent; +} + .focus\:bg-grey-dark:focus { @apply .bg-grey-dark; } diff --git a/docs/source/_partials/feature-badges.blade.php b/docs/source/_partials/feature-badges.blade.php index 3e16ab376a4d..77e7b9bcdf22 100644 --- a/docs/source/_partials/feature-badges.blade.php +++ b/docs/source/_partials/feature-badges.blade.php @@ -48,6 +48,22 @@ @endif + @if ($active) + + + + + Active + + @else + + + + + Active + + @endif + @if ($focus) diff --git a/docs/source/_partials/variants-and-disabling.blade.php b/docs/source/_partials/variants-and-disabling.blade.php index daaa785b08de..1ca6ff3e5ab6 100644 --- a/docs/source/_partials/variants-and-disabling.blade.php +++ b/docs/source/_partials/variants-and-disabling.blade.php @@ -9,6 +9,7 @@ $extraVariants = collect([ 'responsive', 'hover', + 'active', 'focus', 'group-hover', ])->diff($variants) @@ -16,7 +17,7 @@ ->implode(' and '); @endphp -

Responsive, Hover, and Focus Variants

+

Responsive, Hover, Active and Focus Variants

By default, {{ $whichVariants }} variants are generated for {{ $utility['name'] }} utilities.

@@ -27,7 +28,7 @@ @component('_partials.customized-config', ['key' => 'modules']) // ... - {{ $utility['property'] }}: [{{$currentVariants}}], -+ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'], ++ {{ $utility['property'] }}: ['responsive', 'hover', 'active', 'focus'], @endcomponent @isset($extraMessage) diff --git a/docs/source/docs/background-attachment.blade.md b/docs/source/docs/background-attachment.blade.md index 60708655f437..192ce64a6456 100644 --- a/docs/source/docs/background-attachment.blade.md +++ b/docs/source/docs/background-attachment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-color.blade.md b/docs/source/docs/background-color.blade.md index 2ea73bdceef7..5a302d889024 100644 --- a/docs/source/docs/background-color.blade.md +++ b/docs/source/docs/background-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/background-position.blade.md b/docs/source/docs/background-position.blade.md index 5b171bc6d91e..6fa7c5e586ae 100644 --- a/docs/source/docs/background-position.blade.md +++ b/docs/source/docs/background-position.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-repeat.blade.md b/docs/source/docs/background-repeat.blade.md index ac7994e2a8ad..a7a7bc05530c 100644 --- a/docs/source/docs/background-repeat.blade.md +++ b/docs/source/docs/background-repeat.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/background-size.blade.md b/docs/source/docs/background-size.blade.md index 3f81cf40ad72..a6402fc09a67 100644 --- a/docs/source/docs/background-size.blade.md +++ b/docs/source/docs/background-size.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-color.blade.md b/docs/source/docs/border-color.blade.md index 8bc4f16e1f88..c239cc2ef968 100644 --- a/docs/source/docs/border-color.blade.md +++ b/docs/source/docs/border-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/border-radius.blade.md b/docs/source/docs/border-radius.blade.md index 4cd4fc28e4fb..4420809a9ed8 100644 --- a/docs/source/docs/border-radius.blade.md +++ b/docs/source/docs/border-radius.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-style.blade.md b/docs/source/docs/border-style.blade.md index a37b2c5ef610..edabf0de60d6 100644 --- a/docs/source/docs/border-style.blade.md +++ b/docs/source/docs/border-style.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/border-width.blade.md b/docs/source/docs/border-width.blade.md index d80d257fc076..898820d34fde 100644 --- a/docs/source/docs/border-width.blade.md +++ b/docs/source/docs/border-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/configuration.blade.md b/docs/source/docs/configuration.blade.md index 9e92a8522e79..4f24db3d87f8 100644 --- a/docs/source/docs/configuration.blade.md +++ b/docs/source/docs/configuration.blade.md @@ -162,6 +162,7 @@ The available state variants are: - `responsive`, for generating breakpoint-specific versions of those utilities - `hover`, for generating versions of those utilities that only take effect on hover +- `active`, for generating versions of those utilities that only take effect on active - `focus`, for generating versions of those utilities that only take effect on focus - `group-hover`, for generating versions of those utilities that only take effect when a marked parent element is hovered diff --git a/docs/source/docs/cursor.blade.md b/docs/source/docs/cursor.blade.md index 44c0b9a58413..07338f296acf 100644 --- a/docs/source/docs/cursor.blade.md +++ b/docs/source/docs/cursor.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/display.blade.md b/docs/source/docs/display.blade.md index 9364e93581f6..5b2d6cd156ca 100644 --- a/docs/source/docs/display.blade.md +++ b/docs/source/docs/display.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-content.blade.md b/docs/source/docs/flexbox-align-content.blade.md index 911c9a3429c0..875b94161334 100644 --- a/docs/source/docs/flexbox-align-content.blade.md +++ b/docs/source/docs/flexbox-align-content.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-items.blade.md b/docs/source/docs/flexbox-align-items.blade.md index bbe7c10983cc..c638d8216cc9 100644 --- a/docs/source/docs/flexbox-align-items.blade.md +++ b/docs/source/docs/flexbox-align-items.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-align-self.blade.md b/docs/source/docs/flexbox-align-self.blade.md index 6d62577a60cd..817c76e12841 100644 --- a/docs/source/docs/flexbox-align-self.blade.md +++ b/docs/source/docs/flexbox-align-self.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-direction.blade.md b/docs/source/docs/flexbox-direction.blade.md index 0388046e1f52..51d0996229f2 100644 --- a/docs/source/docs/flexbox-direction.blade.md +++ b/docs/source/docs/flexbox-direction.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-display.blade.md b/docs/source/docs/flexbox-display.blade.md index 7d008ffc374d..5f917975c3bb 100644 --- a/docs/source/docs/flexbox-display.blade.md +++ b/docs/source/docs/flexbox-display.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-flex-grow-shrink.blade.md b/docs/source/docs/flexbox-flex-grow-shrink.blade.md index 3b1118c8437e..4724ad6aeab2 100644 --- a/docs/source/docs/flexbox-flex-grow-shrink.blade.md +++ b/docs/source/docs/flexbox-flex-grow-shrink.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-justify-content.blade.md b/docs/source/docs/flexbox-justify-content.blade.md index c8c5cec15e5b..db6c59f1f15e 100644 --- a/docs/source/docs/flexbox-justify-content.blade.md +++ b/docs/source/docs/flexbox-justify-content.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/flexbox-wrapping.blade.md b/docs/source/docs/flexbox-wrapping.blade.md index 596e66b7a1f3..5526d730aaad 100644 --- a/docs/source/docs/flexbox-wrapping.blade.md +++ b/docs/source/docs/flexbox-wrapping.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/floats.blade.md b/docs/source/docs/floats.blade.md index 6ca9a94bb5d7..faa545bce652 100644 --- a/docs/source/docs/floats.blade.md +++ b/docs/source/docs/floats.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/font-weight.blade.md b/docs/source/docs/font-weight.blade.md index ed821deba91c..7264e74286e7 100644 --- a/docs/source/docs/font-weight.blade.md +++ b/docs/source/docs/font-weight.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/fonts.blade.md b/docs/source/docs/fonts.blade.md index 5964aa51a690..c2c0c613615d 100644 --- a/docs/source/docs/fonts.blade.md +++ b/docs/source/docs/fonts.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/forms.blade.md b/docs/source/docs/forms.blade.md index 3aa0b4d1595c..4bd6a051de46 100644 --- a/docs/source/docs/forms.blade.md +++ b/docs/source/docs/forms.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/height.blade.md b/docs/source/docs/height.blade.md index 87534acfb250..1bb6060f81cd 100644 --- a/docs/source/docs/height.blade.md +++ b/docs/source/docs/height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/letter-spacing.blade.md b/docs/source/docs/letter-spacing.blade.md index 218b6a0970ad..2efb3064a272 100644 --- a/docs/source/docs/letter-spacing.blade.md +++ b/docs/source/docs/letter-spacing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/line-height.blade.md b/docs/source/docs/line-height.blade.md index fd2fc8d37309..369900db215a 100644 --- a/docs/source/docs/line-height.blade.md +++ b/docs/source/docs/line-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/lists.blade.md b/docs/source/docs/lists.blade.md index a79b17e91c02..b04da70311f9 100644 --- a/docs/source/docs/lists.blade.md +++ b/docs/source/docs/lists.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/max-height.blade.md b/docs/source/docs/max-height.blade.md index 6d1325dd2f2d..1819b7123af5 100644 --- a/docs/source/docs/max-height.blade.md +++ b/docs/source/docs/max-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/max-width.blade.md b/docs/source/docs/max-width.blade.md index dc1903486e5a..bca2f8c58f78 100644 --- a/docs/source/docs/max-width.blade.md +++ b/docs/source/docs/max-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/min-height.blade.md b/docs/source/docs/min-height.blade.md index 6cfbbc4cf2fd..54cbb182cdaa 100644 --- a/docs/source/docs/min-height.blade.md +++ b/docs/source/docs/min-height.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/min-width.blade.md b/docs/source/docs/min-width.blade.md index 3eb1562e74d1..5ef2f7592ed0 100644 --- a/docs/source/docs/min-width.blade.md +++ b/docs/source/docs/min-width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/opacity.blade.md b/docs/source/docs/opacity.blade.md index fdfe1a94b29a..00ec0a6e0110 100644 --- a/docs/source/docs/opacity.blade.md +++ b/docs/source/docs/opacity.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/overflow.blade.md b/docs/source/docs/overflow.blade.md index 7487e721c731..32e7faf64244 100644 --- a/docs/source/docs/overflow.blade.md +++ b/docs/source/docs/overflow.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/pointer-events.blade.md b/docs/source/docs/pointer-events.blade.md index a8ae844ff377..fdc2e51b87ad 100644 --- a/docs/source/docs/pointer-events.blade.md +++ b/docs/source/docs/pointer-events.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/positioning.blade.md b/docs/source/docs/positioning.blade.md index b18a3fac7559..484825cf334d 100644 --- a/docs/source/docs/positioning.blade.md +++ b/docs/source/docs/positioning.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/resize.blade.md b/docs/source/docs/resize.blade.md index a4c1f89aeddd..581dfc7c505c 100644 --- a/docs/source/docs/resize.blade.md +++ b/docs/source/docs/resize.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/shadows.blade.md b/docs/source/docs/shadows.blade.md index 5dc2a2ad4da7..cee2e3ecd4a1 100644 --- a/docs/source/docs/shadows.blade.md +++ b/docs/source/docs/shadows.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/spacing.blade.md b/docs/source/docs/spacing.blade.md index ebc99e9bcb82..3aac00a2622a 100644 --- a/docs/source/docs/spacing.blade.md +++ b/docs/source/docs/spacing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md index 582b354fe256..ee568d81c9f1 100644 --- a/docs/source/docs/state-variants.blade.md +++ b/docs/source/docs/state-variants.blade.md @@ -1,10 +1,10 @@ --- extends: _layouts.documentation title: "State Variants" -description: "Using utilities to style elements on hover, focus, and more." +description: "Using utilities to style elements on hover, active, focus, and more." --- -Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes. +Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, active, focus, and more using *state* prefixes. ## Hover @@ -35,6 +35,35 @@ Add the `hover:` prefix to only apply a utility on hover. +## Active + +Add the `active:` prefix to only apply a utility on active. + +@component('_partials.code-sample', ['lang' => 'html', 'class' => 'text-center']) + + + +@slot('code') + +@endslot +@endcomponent + +
+
+
+ +
+
+

By default, active variants are not generated for any utilities.

+

You can customize this in the modules section of your configuration file.

+
+
+
+ ## Focus diff --git a/docs/source/docs/text-alignment.blade.md b/docs/source/docs/text-alignment.blade.md index afd8ec3e14ce..932a3b63438b 100644 --- a/docs/source/docs/text-alignment.blade.md +++ b/docs/source/docs/text-alignment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/text-color.blade.md b/docs/source/docs/text-color.blade.md index 0de8f055ad87..58d71f1ae5b1 100644 --- a/docs/source/docs/text-color.blade.md +++ b/docs/source/docs/text-color.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/text-sizing.blade.md b/docs/source/docs/text-sizing.blade.md index 2ecc40e1f713..ee752b6e00fe 100644 --- a/docs/source/docs/text-sizing.blade.md +++ b/docs/source/docs/text-sizing.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/text-style.blade.md b/docs/source/docs/text-style.blade.md index 48ee7d50336a..1655874d26cd 100644 --- a/docs/source/docs/text-style.blade.md +++ b/docs/source/docs/text-style.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: true + active: false focus: false --- diff --git a/docs/source/docs/user-select.blade.md b/docs/source/docs/user-select.blade.md index ef76d83b9173..cb242c89c7c3 100644 --- a/docs/source/docs/user-select.blade.md +++ b/docs/source/docs/user-select.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/vertical-alignment.blade.md b/docs/source/docs/vertical-alignment.blade.md index be85ec7c79fe..70b16c6f225b 100644 --- a/docs/source/docs/vertical-alignment.blade.md +++ b/docs/source/docs/vertical-alignment.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/visibility.blade.md b/docs/source/docs/visibility.blade.md index 940bbc54b726..310a3fa6bc0a 100644 --- a/docs/source/docs/visibility.blade.md +++ b/docs/source/docs/visibility.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: false hover: false + active: false focus: false --- diff --git a/docs/source/docs/whitespace-and-wrapping.blade.md b/docs/source/docs/whitespace-and-wrapping.blade.md index 409d23ed0f30..3a9831e36ed5 100644 --- a/docs/source/docs/whitespace-and-wrapping.blade.md +++ b/docs/source/docs/whitespace-and-wrapping.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/width.blade.md b/docs/source/docs/width.blade.md index d5f690976a09..52791c9dbc9d 100644 --- a/docs/source/docs/width.blade.md +++ b/docs/source/docs/width.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- diff --git a/docs/source/docs/z-index.blade.md b/docs/source/docs/z-index.blade.md index 3e4a7bee7b8b..facb4845ca2b 100644 --- a/docs/source/docs/z-index.blade.md +++ b/docs/source/docs/z-index.blade.md @@ -6,6 +6,7 @@ features: responsive: true customizable: true hover: false + active: false focus: false --- From 1f57fbfbaf1074b1adb453475d91509dee4e82d7 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 9 Feb 2018 20:20:24 +0100 Subject: [PATCH 3/7] Add tests for active state variant --- __tests__/variantsAtRule.test.js | 35 +++++++++++++++++++++++----- src/lib/substituteVariantsAtRules.js | 6 ++++- 2 files changed, 34 insertions(+), 7 deletions(-) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 2a30529a64ed..b4d1d9d09ba8 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -27,6 +27,27 @@ test('it can generate hover variants', () => { }) }) +test('it can generate active variants', () => { + const input = ` + @variants active { + .banana { color: yellow; } + .chocolate { color: brown; } + } + ` + + const output = ` + .banana { color: yellow; } + .chocolate { color: brown; } + .active\\:banana:active { color: yellow; } + .active\\:chocolate:active { color: brown; } + ` + + return run(input).then(result => { + expect(result.css).toMatchCss(output) + expect(result.warnings().length).toBe(0) + }) +}) + test('it can generate focus variants', () => { const input = ` @variants focus { @@ -69,9 +90,9 @@ test('it can generate group-hover variants', () => { }) }) -test('it can generate hover and focus variants', () => { +test('it can generate hover, active and focus variants', () => { const input = ` - @variants hover, focus { + @variants hover, active, focus { .banana { color: yellow; } .chocolate { color: brown; } } @@ -80,10 +101,12 @@ test('it can generate hover and focus variants', () => { const output = ` .banana { color: yellow; } .chocolate { color: brown; } - .focus\\:banana:focus { color: yellow; } - .focus\\:chocolate:focus { color: brown; } .hover\\:banana:hover { color: yellow; } .hover\\:chocolate:hover { color: brown; } + .active\\:banana:active { color: yellow; } + .active\\:chocolate:active { color: brown; } + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } ` return run(input).then(result => { @@ -104,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a @responsive { .banana { color: yellow; } .chocolate { color: brown; } - .focus\\:banana:focus { color: yellow; } - .focus\\:chocolate:focus { color: brown; } .hover\\:banana:hover { color: yellow; } .hover\\:chocolate:hover { color: brown; } + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } } ` diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 79fc634cc02e..9df30520bc16 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -16,7 +16,11 @@ const variantGenerators = { const cloned = container.clone() cloned.walkRules(rule => { - rule.selector = `${buildClassVariant(rule.selector, 'active', config.options.separator)}:active` + rule.selector = `${buildClassVariant( + rule.selector, + 'active', + config.options.separator + )}:active` }) container.before(cloned.nodes) From 2e4e4a79e229866586de033276161a121887ab99 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 9 Feb 2018 20:57:34 +0100 Subject: [PATCH 4/7] Revert output order from hover-active-focus to focus-active-hover --- __tests__/variantsAtRule.test.js | 12 ++++++------ src/lib/substituteVariantsAtRules.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index b4d1d9d09ba8..58bbaaf0294f 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -101,12 +101,12 @@ test('it can generate hover, active and focus variants', () => { const output = ` .banana { color: yellow; } .chocolate { color: brown; } - .hover\\:banana:hover { color: yellow; } - .hover\\:chocolate:hover { color: brown; } - .active\\:banana:active { color: yellow; } - .active\\:chocolate:active { color: brown; } .focus\\:banana:focus { color: yellow; } .focus\\:chocolate:focus { color: brown; } + .active\\:banana:active { color: yellow; } + .active\\:chocolate:active { color: brown; } + .hover\\:banana:hover { color: yellow; } + .hover\\:chocolate:hover { color: brown; } ` return run(input).then(result => { @@ -127,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a @responsive { .banana { color: yellow; } .chocolate { color: brown; } - .hover\\:banana:hover { color: yellow; } - .hover\\:chocolate:hover { color: brown; } .focus\\:banana:focus { color: yellow; } .focus\\:chocolate:focus { color: brown; } + .hover\\:banana:hover { color: yellow; } + .hover\\:chocolate:hover { color: brown; } } ` diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 9df30520bc16..1487471f1acf 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -61,7 +61,7 @@ export default function(config) { atRule.before(atRule.clone().nodes) - _.forEach(['hover', 'active', 'focus', 'group-hover'], variant => { + _.forEach(['focus', 'active', 'hover', 'group-hover'], variant => { if (variants.includes(variant)) { variantGenerators[variant](atRule, unwrappedConfig) } From eec03465f4a94438c669ff8d132c9840649f3162 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 16 Feb 2018 15:08:38 +0100 Subject: [PATCH 5/7] Avoid long lists of features in the documentation --- docs/source/_partials/variants-and-disabling.blade.php | 4 ++-- docs/source/docs/state-variants.blade.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/source/_partials/variants-and-disabling.blade.php b/docs/source/_partials/variants-and-disabling.blade.php index 1ca6ff3e5ab6..a324c6c5f1f7 100644 --- a/docs/source/_partials/variants-and-disabling.blade.php +++ b/docs/source/_partials/variants-and-disabling.blade.php @@ -9,8 +9,8 @@ $extraVariants = collect([ 'responsive', 'hover', - 'active', 'focus', + 'active', 'group-hover', ])->diff($variants) ->take(3 - count($variants)) @@ -28,7 +28,7 @@ @component('_partials.customized-config', ['key' => 'modules']) // ... - {{ $utility['property'] }}: [{{$currentVariants}}], -+ {{ $utility['property'] }}: ['responsive', 'hover', 'active', 'focus'], ++ {{ $utility['property'] }}: ['responsive', 'hover', 'focus'], @endcomponent @isset($extraMessage) diff --git a/docs/source/docs/state-variants.blade.md b/docs/source/docs/state-variants.blade.md index ee568d81c9f1..73ad910055be 100644 --- a/docs/source/docs/state-variants.blade.md +++ b/docs/source/docs/state-variants.blade.md @@ -1,10 +1,10 @@ --- extends: _layouts.documentation title: "State Variants" -description: "Using utilities to style elements on hover, active, focus, and more." +description: "Using utilities to style elements on hover, focus, and more." --- -Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, active, focus, and more using *state* prefixes. +Similar to our [responsive prefixes](/docs/responsive-design), Tailwind makes it easy to style elements on hover, focus, and more using *state* prefixes. ## Hover From 62cf25f718b7ef8bdec543a0b4e71c59df944c30 Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Fri, 16 Feb 2018 18:09:20 +0100 Subject: [PATCH 6/7] Change priority order to (from the highest): focus-active-hover --- __tests__/variantsAtRule.test.js | 12 ++++++------ src/lib/substituteVariantsAtRules.js | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index 58bbaaf0294f..b4d1d9d09ba8 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -101,12 +101,12 @@ test('it can generate hover, active and focus variants', () => { const output = ` .banana { color: yellow; } .chocolate { color: brown; } - .focus\\:banana:focus { color: yellow; } - .focus\\:chocolate:focus { color: brown; } - .active\\:banana:active { color: yellow; } - .active\\:chocolate:active { color: brown; } .hover\\:banana:hover { color: yellow; } .hover\\:chocolate:hover { color: brown; } + .active\\:banana:active { color: yellow; } + .active\\:chocolate:active { color: brown; } + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } ` return run(input).then(result => { @@ -127,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a @responsive { .banana { color: yellow; } .chocolate { color: brown; } - .focus\\:banana:focus { color: yellow; } - .focus\\:chocolate:focus { color: brown; } .hover\\:banana:hover { color: yellow; } .hover\\:chocolate:hover { color: brown; } + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } } ` diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 1487471f1acf..9df30520bc16 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -61,7 +61,7 @@ export default function(config) { atRule.before(atRule.clone().nodes) - _.forEach(['focus', 'active', 'hover', 'group-hover'], variant => { + _.forEach(['hover', 'active', 'focus', 'group-hover'], variant => { if (variants.includes(variant)) { variantGenerators[variant](atRule, unwrappedConfig) } From b7cb21360d9b4d788916cd3a4c2257a129386c0b Mon Sep 17 00:00:00 2001 From: fedeTibaldo Date: Mon, 19 Feb 2018 17:23:22 +0100 Subject: [PATCH 7/7] Update priority order to (from the highest): active-hover-focus --- __tests__/variantsAtRule.test.js | 8 ++++---- src/lib/substituteVariantsAtRules.js | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/__tests__/variantsAtRule.test.js b/__tests__/variantsAtRule.test.js index b4d1d9d09ba8..79c0d9442de7 100644 --- a/__tests__/variantsAtRule.test.js +++ b/__tests__/variantsAtRule.test.js @@ -101,12 +101,12 @@ test('it can generate hover, active and focus variants', () => { const output = ` .banana { color: yellow; } .chocolate { color: brown; } + .focus\\:banana:focus { color: yellow; } + .focus\\:chocolate:focus { color: brown; } .hover\\:banana:hover { color: yellow; } .hover\\:chocolate:hover { color: brown; } .active\\:banana:active { color: yellow; } .active\\:chocolate:active { color: brown; } - .focus\\:banana:focus { color: yellow; } - .focus\\:chocolate:focus { color: brown; } ` return run(input).then(result => { @@ -127,10 +127,10 @@ test('it wraps the output in a responsive at-rule if responsive is included as a @responsive { .banana { color: yellow; } .chocolate { color: brown; } - .hover\\:banana:hover { color: yellow; } - .hover\\:chocolate:hover { color: brown; } .focus\\:banana:focus { color: yellow; } .focus\\:chocolate:focus { color: brown; } + .hover\\:banana:hover { color: yellow; } + .hover\\:chocolate:hover { color: brown; } } ` diff --git a/src/lib/substituteVariantsAtRules.js b/src/lib/substituteVariantsAtRules.js index 9df30520bc16..ac4074973cae 100644 --- a/src/lib/substituteVariantsAtRules.js +++ b/src/lib/substituteVariantsAtRules.js @@ -61,7 +61,7 @@ export default function(config) { atRule.before(atRule.clone().nodes) - _.forEach(['hover', 'active', 'focus', 'group-hover'], variant => { + _.forEach(['focus', 'hover', 'active', 'group-hover'], variant => { if (variants.includes(variant)) { variantGenerators[variant](atRule, unwrappedConfig) }