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";