Add property-disabled selector and rules (fixes #52)

examples/index.html

@@ -181,30 +181,30 @@
                             Available rulesets
                         </h3>
                         <dl>
-                            <dt><label><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
                             <dd>
                                 The base <i>ruleset</i>, providing the layout and basic high contrast theming.
                             </dd>
-                            <dt><label><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
                             <dd>
                                 Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
                             </dd>
-                            <dt><label><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-glass"> Glass</label></dt>
                             <dd>
                                 Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background.
                             </dd>
-                            <dt><label><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt>
+                            <dt><label class="fade"><input type="checkbox" disabled checked name="ruleset-fun"> Fun</label></dt>
                             <dd>
                                 Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production!
                             </dd>
                             <dt>Colors</dt>
                             <dd>
                                <dl>
-                                   <dt><label><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt>
+                                   <dt><label class="fade"><input type="radio" disabled checked name="ruleset-colors"> Royal Blue</label></dt>
                                    <dd>
                                        <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors.
                                    </dd>
-                                   <dt><label><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt>
+                                   <dt><label class="fade"><input type="radio" disabled name="ruleset-colors"> Gestione Amber</label></dt>
                                    <dd>
                                        <a href="https://github.com/Nemesis-FT">Nemesis</a>' own color theme, with a "coffee-like" look.
                                    </dd>
@@ -213,7 +213,7 @@
                             <dt>Fonts</dt>
                             <dd>
                                 <dl>
-                                    <dt><label><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt>
+                                    <dt><label class="fade"><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt>
                                     <dd>
                                         Font theme based upon Mozilla's <a href="https://github.com/mozilla/Fira">Fira</a> font.
                                     </dd>
@@ -226,11 +226,11 @@
                             Available selectorsets
                         </h3>
                         <dl>
-                            <dt><label><input type="radio" disabled checked name="selectorset"> Root</label></dt>
+                            <dt><label class="fade"><input type="radio" disabled checked name="selectorset"> Root</label></dt>
                             <dd>
                                 Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
                             </dd>
-                            <dt><label><input type="radio" disabled name="selectorset"> Module</label></dt>
+                            <dt><label class="fade"><input type="radio" disabled name="selectorset"> Module</label></dt>
                             <dd>
                                 All selectors use class names, allowing the usage of the target with <a href="https://github.com/css-modules/css-modules">CSS Modules</a>. Useful for React or similar web app projects.
                             </dd>

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;

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

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