@windijs/variants
Version:
@windijs/variants
342 lines (333 loc) • 11.3 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var core = require('@windijs/core');
var shared = require('@windijs/shared');
/**
* Same as :nth-child(1). Represents an element that is the first child of some other element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
*/
const first = core.createVariant("&:first-child");
/**
* Same as :nth-last-child(1). Represents an element that is the last child of some other element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:last-child)
*/
const last = core.createVariant("&:last-child");
/**
* Same as :nth-of-type(even)
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
*/
const evenOfType = core.createVariant("&:nth-of-type(even)");
/**
* Same as :nth-of-type(odd)
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-of-type)
*/
const oddOfType = core.createVariant("&:nth-of-type(odd)");
/**
* Applies to the one or more UI elements that are the default among a set of similar elements. Typically applies to context menu items, buttons, and select lists/menus.
*
* (Edge 79, Firefox 4, Safari 5, Chrome 10, Opera 10)
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:default)
*/
const $default = core.createVariant("&:default");
/**
* Same as :not(:first-child).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:first-child)
*/
const notFirst = core.createVariant("&:not(:first-child)");
/**
* Same as :not(:last-child).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/:last-child)
*/
const notLast = core.createVariant("&:not(:last-child)");
/**
* Same as :nth-child(odd), Represents the odd elements of its parent.
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
*/
const odd = core.createVariant("&:nth-child(odd)");
/**
* Same as :nth-child(even), Represents the even elements of its parent.
*
* [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child)
*/
const even = core.createVariant("&:nth-child(even)");
const { visited, checked, disabled, focusWithin, hover, focus, focusVisible, active, link, target, notChecked, enabled, indeterminate, invalid, valid, optional, required, placeholderShown, readOnly, readWrite, notDisabled, firstOfType, notFirstOfType, lastOfType, notLastOfType, onlyChild, notOnlyChild, onlyOfType, notOnlyOfType, root, empty, } = new Proxy({}, {
get(_, p) {
p = shared.camelToDash(p);
if (p.startsWith("not-"))
p = `not(:${p.slice(4)})`;
return core.createVariant("&:" + p);
},
});
/**
* Represents a styleable child pseudo-element immediately after the originating element’s actual content.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::after)
*/
const after = core.createVariant("&::after");
/**
* Used to create a backdrop that hides the underlying document for an element in a top layer (such as an element that is displayed fullscreen).
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::backdrop)
*/
// export const backdrop = createVariant("&::backdrop");
/**
* Represents a styleable child pseudo-element immediately before the originating element’s actual content.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::before)
*/
const before = core.createVariant("&::before");
/**
* Represents the first letter of an element, if it is not preceded by any other content (such as images or inline tables) on its line.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::first-letter)
*/
const firstLetter = core.createVariant("&::first-letter");
/**
* Describes the contents of the first formatted line of its originating element.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::first-line)
*/
const firstLine = core.createVariant("&::first-line");
/**
* The ::marker CSS pseudo-element selects the marker box of a list item, which typically contains a bullet or number. It works on any element or pseudo-element set to display: list-item, such as the \<li> and \<summary> elements.
*
* (Edge 86, Firefox 68, Safari 11.1, Chrome 86, Opera 72)
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::marker)
*/
const marker = core.createVariant("& *::marker, &::marker");
/**
* Represents the portion of a document that has been highlighted by the user.
*
* [MDN Reference](https://developer.mozilla.org/docs/Web/CSS/::selection)
*/
const selection = core.createVariant("& *::selection, &::selection");
/**
* Targets an element when a marked parent matches the hover pseudo-class.
*/
const groupHover = core.createVariant(".group:hover &");
/**
* Targets an element when a marked parent matches the focus pseudo-class.
*/
const groupFocus = core.createVariant(".group:focus &");
/**
* Targets an element when a marked parent matches the active pseudo-class.
*/
const groupActive = core.createVariant(".group:active &");
/**
* Targets an element when a marked parent matches the visited pseudo-class.
*/
const groupVisited = core.createVariant(".group:visited &");
/**
* Targets svg nodes.
*/
const svg = core.createVariant("& svg");
/**
* Target all nodes.
*/
const all = core.createVariant("& *");
/**
* Targets children nodes.
*/
const children = core.createVariant("& > *");
/**
* Targets siblings nodes.
*/
const siblings = core.createVariant("& ~ *");
/**
* Targets first sibling node.
*/
const sibling = core.createVariant("& + *");
// screens
/**
* Enable utility when the screen width is greater than 640px
*/
const sm = core.createMedia("(min-width: 640px)");
/**
* Enable utility when the screen width is greater than 768px
*/
const md = core.createMedia("(min-width: 768px)");
/**
* Enable utility when the screen width is greater than 1024px
*/
const lg = core.createMedia("(min-width: 1024px)");
/**
* Enable utility when the screen width is greater than 120px
*/
const xl = core.createMedia("(min-width: 1280x)");
/**
* Enable utility when the screen width is greater than 1536px
*/
const xxl = core.createMedia("(min-width: 1536px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _sm = core.createMedia("(max-width: 640px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _md = core.createMedia("(max-width: 768px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _lg = core.createMedia("(max-width: 1024px)");
/**
* Enable utility when the screen width is less than 640px
*/
const _xl = core.createMedia("(max-width: 1280x)");
/**
* Enable utility when the screen width is less than 640px
*/
const _xxl = core.createMedia("(max-width: 1536px)");
/**
* Enable utility when the screen width is greater than 640px and less than 768px
*/
const $sm = core.createMedia("(min-width: 640px) and (max-width: 768px)");
/**
* Enable utility when the screen width is greater than 768px and less than 1024px
*/
const $md = core.createMedia("(min-width: 768px) and (max-width: 1024px)");
/**
* Enable utility when the screen width is greater than 1024px and less than 1280px
*/
const $lg = core.createMedia("(min-width: 1024px) and (max-width: 1280px)");
/**
* Enable utility when the screen width is greater than 1280px and less than 1536px
*/
const $xl = core.createMedia("(min-width: 1280px) and (max-width: 1536px)");
/**
* Enable utility when the screen width is greater than 1536px
*/
const $xxl = core.createMedia("(min-width: 1536px)");
// motions
/**
* Targets the prefers-reduced-motion: no-preference media query.
*/
const motionSafe = core.createMedia("(prefers-reduced-motion: no-preference)");
/**
* Targets the prefers-reduced-motion: reduce media query.
*/
const motionReduce = core.createMedia("(prefers-reduced-motion: reduce)");
// themes
/**
* Enable utility when the system turns on dark mode
*/
const dark = core.createMedia("(prefers-color-scheme: dark)");
/**
* Enable utility when the system turns on light mode
*/
const light = core.createMedia("(prefers-color-scheme: light)");
/**
* Enable utility base on application dark mode
*/
const $dark = core.createVariant(".dark &");
/**
* Enable utility base on application light mode
*/
const $light = core.createVariant(".light &");
// orientations
/**
* Enable utility when the device is in portrait orientation
*/
const portrait = core.createMedia("(orientation: portrait)");
/**
* Enable utility when the device is in landscape orientation
*/
const landscape = core.createMedia("(orientation: landscape)");
// directions
/**
* Enable utility when text is written from left to right.
*/
const ltr = core.createVariant("[dir='ltr'] &, [dir='ltr']&");
/**
* Enable utility when text is written from right to left.
*/
const rtl = core.createVariant("[dir='rtl'] &, [dir='rtl']&");
exports.$dark = $dark;
exports.$default = $default;
exports.$lg = $lg;
exports.$light = $light;
exports.$md = $md;
exports.$sm = $sm;
exports.$xl = $xl;
exports.$xxl = $xxl;
exports._lg = _lg;
exports._md = _md;
exports._sm = _sm;
exports._xl = _xl;
exports._xxl = _xxl;
exports.active = active;
exports.after = after;
exports.all = all;
exports.before = before;
exports.checked = checked;
exports.children = children;
exports.dark = dark;
exports.disabled = disabled;
exports.empty = empty;
exports.enabled = enabled;
exports.even = even;
exports.evenOfType = evenOfType;
exports.first = first;
exports.firstLetter = firstLetter;
exports.firstLine = firstLine;
exports.firstOfType = firstOfType;
exports.focus = focus;
exports.focusVisible = focusVisible;
exports.focusWithin = focusWithin;
exports.groupActive = groupActive;
exports.groupFocus = groupFocus;
exports.groupHover = groupHover;
exports.groupVisited = groupVisited;
exports.hover = hover;
exports.indeterminate = indeterminate;
exports.invalid = invalid;
exports.landscape = landscape;
exports.last = last;
exports.lastOfType = lastOfType;
exports.lg = lg;
exports.light = light;
exports.link = link;
exports.ltr = ltr;
exports.marker = marker;
exports.md = md;
exports.motionReduce = motionReduce;
exports.motionSafe = motionSafe;
exports.notChecked = notChecked;
exports.notDisabled = notDisabled;
exports.notFirst = notFirst;
exports.notFirstOfType = notFirstOfType;
exports.notLast = notLast;
exports.notLastOfType = notLastOfType;
exports.notOnlyChild = notOnlyChild;
exports.notOnlyOfType = notOnlyOfType;
exports.odd = odd;
exports.oddOfType = oddOfType;
exports.onlyChild = onlyChild;
exports.onlyOfType = onlyOfType;
exports.optional = optional;
exports.placeholderShown = placeholderShown;
exports.portrait = portrait;
exports.readOnly = readOnly;
exports.readWrite = readWrite;
exports.required = required;
exports.root = root;
exports.rtl = rtl;
exports.selection = selection;
exports.sibling = sibling;
exports.siblings = siblings;
exports.sm = sm;
exports.svg = svg;
exports.target = target;
exports.valid = valid;
exports.visited = visited;
exports.xl = xl;
exports.xxl = xxl;