#Pseudo Variants

New

0.8.0

The pseudo-variant configuration is used to tell Cirrus which classes to generate to apply on different CSS pseudo-classes. Below is an example of how you can change which pseudo-variants are generated.

/*
    Below are all possible values you can use to configure pseudo-variants:
        - 'responsive',
        - 'dark', 'light',
        - 'reduce-motion',
        - 'first-of-type',
        - 'last-of-type',
        - 'portrait', 'landscape',
        - 'hover', 'group-hover',
        - 'focus', 'group-focus', 'focus-visible', 'focus-within',
        - 'active',
        - 'visited',
        - 'checked',
        - 'disabled'
*/
@use "cirrus-ext" with (
    $config: (
        pseudo-variants: (
            FLEX: ('responsive'), // Generates sm:u-flex, md:u-flex, lg:u-flex, xl:u-flex, sm:u-flex-column, etc.
            OPACITY: ('group-hover', 'hover', 'group-focus', 'focus', 'active'), // Generates hover:u-opacity-0, focus:u-opacity-0, etc.
            ...
        ),
    ),
);

#Responsive

The responsive pseudo-variant is used to generate classes with the sm, md, lg, and xl prefixes. These will apply select styles based on the current viewport.

You can read more about it in the Viewports docs.

<div class="u-flex u-flex-column md:u-flex-row">
    ...                
</div>

.foo {
    @extend
        .u-flex,
        .u-flex-column,
        .md\:u-flex-row;
}

#Dark/Light

The dark and light pseudo-variants generate class variations that apply for prefers-color-scheme: dark and prefers-color-scheme: light respectively.

By default, all classes with the light: prefix will apply even with no prefers-color-scheme value set.

Dark

<div class="text-black dark:text-gray-100">
...                
</div>

.foo {
    @extend
        .text-black,
        .dark\:text-gray-100;
}

Light

<div class="text-white light:text-black">
...                
</div>

.foo {
    @extend
        .text-black,
        .light\:text-white;
}

#Reduce Motion

The reduce-motion pseudo-variant generates class variations that apply for prefers-reduced-motion to apply styles that minimize non-essential motions.

In the example below, we have styles for an animated class that has no duration for users that have reduced motion enabled.

<div class="animated ping reduce-motion:duration-0">
...                
</div>

.foo {
    @extend
        .animated,
        .ping,
        .reduce-motion\:duration-0;
}

#First/Last of Type

The first-of-type and last-of-type pseudo-variants generate class variations that apply on the first and last child elements respectively.

<div class="first-of-type:text-red-700 last-of-type:text-green-700">
    <p>I am red</p>
    <p>I am the foreground color</p>
    <p>I am green</p>
</div>

.foo {
    @extend
        .first-of-type\:text-red-700,
        .last-of-type\:text-green-700;
}

#Portrait/Landscape

The portrait and landscape pseudo-variants generate class variations that apply on the portrait and landscape device orientations respectively.

<div class="u-flex portrait:u-flex-column landscape:u-flex-row">
    ...
</div>

.foo {
    @extend
        .u-flex
        .portrait\:u-flex-column,
        .landscape\:u-flex-row;
}

#Hover/Group Hover

The hover pseudo-variant generates class variations that apply when an element is hovered.

<div class="bg-gray-000 hover:bg-gray-200">
    ...
</div>

.foo {
    @extend
        .bg-gray-000
        .hover\:bg-gray-200;
}

To apply a style when hovering a parent/encompassing element, we can use the group-hover pseudo-variants. We just need to add the group class to the parent element and the group-hover: styles to the child elements we want to update.

<div class="group">
   <div class="group-hover:u-opacity-90"></div> 
</div>

.child {
    @extend
        .hover\:u-opacity-90;
}

#Focus/Group Focus

The focus pseudo-variant generates class variations that apply when an element is focused.

<input class="focus:bg-blue-100">
    ...
</input>

.foo {
    @extend
        .focus\:bg-blue-100;
}

To apply a style when focusing a parent/encompassing element, we can use the group-focus pseudo-variants. We just need to add the group class to the parent element and the group-focus: styles to the child elements we want to update.

<div class="group">
   <div class="group-focus:p-2"></div> 
</div>

.child {
    @extend
        .group-focus\:p-2;
}

#Focus Visible

The focus-visible pseudo-variant generates class variations that apply on elements when the focus ring is visible.

<select class="focus-visible:u-border-2 border-green-600">
...                
</select>

.foo {
    @extend
        .border-green-600,
        .focus-visible\:border-green-600;
}

#Focus Within

The focus-within pseudo-variant generates class variations that apply on elements when the element or any of its children are focused.

<select class="focus-visible:u-border-2 border-green-600">
...                
</select>

.foo {
    @extend
        .border-green-600,
        .focus-visible\:border-green-600;
}

#Active

The active pseudo-variant generates class variations that apply on elements that are active (typically while the mouse is actively clicking on an element).

<div class="bg-teal-100 active:u-shadow-md">
...                
</div>

.foo {
    @extend
        .border-teal-100,
        .active\:u-shadow-md;
}

#Visited

The visited pseudo-variant generates class variations that typically apply on a and area elements.

<a href="#" class="visited:text-pink-600">
...                
</a>

.foo {
    @extend
        .visited\:text-pink-600;
}

#Checked

The checked pseudo-variant generates class variations that typically apply on <input type="radio">, <input type="checkbox">, and option elements for the checked state.

<input name="origin" type="radio" value="google" checked class="checked:u-opacity-100">
...                
</input>

.foo {
    @extend
        .checked\:u-opacity-100;
}

#Disabled

The disabled pseudo-variant generates class variations that applies on the disabled state of elements.

<input id="name" name="name" type="text" class="text-white disabled:bg-gray-600">
...                
</input>

.foo {
    @extend
        .text-white,
        .disabled\:bg-gray-600;
}

Cirrus