diff --git a/examples/index.html b/examples/index.html index a06f5f9..71d54c4 100644 --- a/examples/index.html +++ b/examples/index.html @@ -181,30 +181,30 @@ Available rulesets
-
+
The base ruleset, providing the layout and basic high contrast theming.
-
+
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
-
+
Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background.
-
+
Experimental ruleset with bizzare or buggy but fun rules. Unsupported, do not use in production!
Colors
-
+
Steffo's signature color theme, based upon RYG⁵'s logo colors.
-
+
Nemesis' own color theme, with a "coffee-like" look.
@@ -213,7 +213,7 @@
Fonts
-
+
Font theme based upon Mozilla's Fira font.
@@ -226,11 +226,11 @@ Available selectorsets
-
+
Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
-
+
All selectors use class names, allowing the usage of the target with CSS Modules. Useful for React or similar web app projects.
diff --git a/src/rulesets/base.less b/src/rulesets/base.less index 754dd0f..18adcce 100644 --- a/src/rulesets/base.less +++ b/src/rulesets/base.less @@ -547,6 +547,11 @@ } } + @{property-disabled} { + border-style: dashed; + cursor: not-allowed; + } + @{modifier-red} { .map-hsl-group(current; red); } @@ -599,7 +604,7 @@ color: .hsl-group(current; 0.4)[@c]; } - &:hover { + &:hover:not(@{property-disabled}) { border-color: .hsl-group(current; 0.7)[@c]; &::placeholder { @@ -607,7 +612,7 @@ } } - &:active, &:focus { + &:active:not(@{property-disabled}), &:focus:not(@{property-disabled}) { border-color: .hsl-group(current)[@c]; } } @@ -627,15 +632,18 @@ } // Mark interactivity by changing the mouse cursor - @{input-field}, @{input-area} { + @{input-field}:not(@{property-disabled}), @{input-area}:not(@{property-disabled}) { cursor: text; } - @{input-select}, @{input-multiselect} { + @{input-select}:not(@{property-disabled}), @{input-multiselect}:not(@{property-disabled}) { cursor: vertical-text; } - @{input-range} { + @{input-range}:not(@{property-disabled}) { cursor: ew-resize; } + @{input-radio}:not(@{property-disabled}), @{input-checkbox}:not(@{property-disabled}), @{input-button}:not(@{property-disabled}), @{input-color}:not(@{property-disabled}) { + cursor: pointer; + } // Configure option display @{input-select}, @{input-multiselect} { @@ -662,9 +670,6 @@ @{input-radio}, @{input-checkbox} { appearance: none; - // Make the element feel clickable - cursor: pointer; - // Set a fixed size width: 1em; height: 1em; diff --git a/src/selectorsets/module.less b/src/selectorsets/module.less index 716f974..8242af0 100644 --- a/src/selectorsets/module.less +++ b/src/selectorsets/module.less @@ -75,6 +75,7 @@ @modifier-mark: ~".modifier-mark"; @element-mark: ~".element-mark"; @modifier-todo: ~".modifier-todo"; +@property-disabled: ~".property-disabled"; @modifier-red: ~".modifier-red"; @modifier-yellow: ~".modifier-yellow"; @modifier-green: ~".modifier-green"; diff --git a/src/selectorsets/root.less b/src/selectorsets/root.less index c2fcfe1..fe7376a 100644 --- a/src/selectorsets/root.less +++ b/src/selectorsets/root.less @@ -75,6 +75,7 @@ @modifier-mark: ~".mark"; @element-mark: ~"mark"; @modifier-todo: ~".todo"; +@property-disabled: ~"[disabled]"; @modifier-red: ~".red"; @modifier-yellow: ~".yellow"; @modifier-green: ~".green";