🔧 Refactor .status-* and revert @all changes

src/rules/skeleton.less

@@ -234,6 +234,26 @@
         max-height: max(14.1vw, 25vh);
     }
 
+    /// ===== Status =====
+    /// Statuses are classes that can be applied to elements to indicate that special interactions are available
+
+    @{status-hoverable} {
+        cursor: help;
+    }
+
+    @{status-clickable} {
+        cursor: pointer;
+    }
+
+    @{status-disabled} {
+        opacity: 50%;
+
+        // All sub-elements of a disabled element should have a not-allowed cursor
+        &, @{all} {
+            cursor: not-allowed !important;
+        }
+    }
+
     /// ===== Forms =====
     /// Forms are containers where interactable elements are contained.
     /// Every interactable is split in two parts: a label on the left and the control on the right
@@ -542,21 +562,6 @@
         border-radius: 0 4px 4px 0;
     }
 
-    // --- Element status ---
-
-    @{status-hoverable} {
-        cursor: help;
-    }
-
-    @{status-clickable} {
-        cursor: pointer;
-    }
-
-    @{status-disabled} {
-        cursor: not-allowed !important;
-        opacity: 50%;
-    }
-
     // --- Elements ---
 
     @{element-title} {

src/targets/paper.module.css

@@ -141,18 +141,18 @@
   font-weight: 400;
 }
 .bluelib,
-.bluelib .bluelib *,
+.bluelib *,
 .bluelib .all {
   color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
 }
 .bluelib,
-.bluelib .bluelib *,
+.bluelib *,
 .bluelib .all,
 .bluelib::before,
-.bluelib .bluelib *::before,
+.bluelib *::before,
 .bluelib .all::before,
 .bluelib::after,
-.bluelib .bluelib *::after,
+.bluelib *::after,
 .bluelib .all::after {
   box-sizing: border-box;
 }
@@ -228,11 +228,11 @@
   background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
   border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
 }
-.bluelib .panel > .bluelib *:first-child,
+.bluelib .panel > *:first-child,
 .bluelib .panel .all:first-child {
   margin-top: 0;
 }
-.bluelib .panel > .bluelib *:last-child,
+.bluelib .panel > *:last-child,
 .bluelib .panel .all:last-child {
   margin-bottom: 0;
 }
@@ -259,7 +259,7 @@
 .bluelib .split > .panel {
   margin: 0;
 }
-.bluelib .split > .bluelib *,
+.bluelib .split > *,
 .bluelib .split .all {
   flex-grow: 1;
   flex-shrink: 0;
@@ -295,6 +295,20 @@
 .bluelib .image-limit-quarter {
   max-height: max(14.1vw, 25vh);
 }
+.bluelib .status-hoverable {
+  cursor: help;
+}
+.bluelib .status-clickable {
+  cursor: pointer;
+}
+.bluelib .status-disabled {
+  opacity: 50%;
+}
+.bluelib .status-disabled,
+.bluelib .status-disabled *,
+.bluelib .status-disabled .all {
+  cursor: not-allowed !important;
+}
 .bluelib .form {
   display: grid;
   align-items: center;
@@ -521,16 +535,6 @@
   border-width: 0 0 0 2px;
   border-radius: 0 4px 4px 0;
 }
-.bluelib .status-hoverable {
-  cursor: help;
-}
-.bluelib .status-clickable {
-  cursor: pointer;
-}
-.bluelib .status-disabled {
-  cursor: not-allowed !important;
-  opacity: 50%;
-}
 .bluelib .element-title {
   text-align: center;
   --bluelib-color-r: 24;

src/targets/paper.root.css

@@ -383,6 +383,34 @@ body .image-limit-quarter,
 .bluelib .image-limit-quarter {
   max-height: max(14.1vw, 25vh);
 }
+body [title],
+.bluelib [title],
+body .status-hoverable,
+.bluelib .status-hoverable {
+  cursor: help;
+}
+body [onclick],
+.bluelib [onclick],
+body .status-clickable,
+.bluelib .status-clickable {
+  cursor: pointer;
+}
+body [disabled],
+.bluelib [disabled],
+body .status-disabled,
+.bluelib .status-disabled {
+  opacity: 50%;
+}
+body [disabled],
+.bluelib [disabled],
+body .status-disabled,
+.bluelib .status-disabled,
+body [disabled] *,
+.bluelib [disabled] *,
+body .status-disabled *,
+.bluelib .status-disabled * {
+  cursor: not-allowed !important;
+}
 body form,
 .bluelib form,
 body .form,
@@ -939,25 +967,6 @@ body .input-multiselect,
   border-width: 0 0 0 2px;
   border-radius: 0 4px 4px 0;
 }
-body [title],
-.bluelib [title],
-body .status-hoverable,
-.bluelib .status-hoverable {
-  cursor: help;
-}
-body [onclick],
-.bluelib [onclick],
-body .status-clickable,
-.bluelib .status-clickable {
-  cursor: pointer;
-}
-body [disabled],
-.bluelib [disabled],
-body .status-disabled,
-.bluelib .status-disabled {
-  cursor: not-allowed !important;
-  opacity: 50%;
-}
 body .element-title,
 .bluelib .element-title,
 body h1,

src/targets/royalblue.module.css

@@ -141,18 +141,18 @@
   font-weight: 400;
 }
 .bluelib,
-.bluelib .bluelib *,
+.bluelib *,
 .bluelib .all {
   color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 1);
 }
 .bluelib,
-.bluelib .bluelib *,
+.bluelib *,
 .bluelib .all,
 .bluelib::before,
-.bluelib .bluelib *::before,
+.bluelib *::before,
 .bluelib .all::before,
 .bluelib::after,
-.bluelib .bluelib *::after,
+.bluelib *::after,
 .bluelib .all::after {
   box-sizing: border-box;
 }
@@ -228,11 +228,11 @@
   background-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.025);
   border-color: rgba(var(--bluelib-color-r), var(--bluelib-color-g), var(--bluelib-color-b), 0.1);
 }
-.bluelib .panel > .bluelib *:first-child,
+.bluelib .panel > *:first-child,
 .bluelib .panel .all:first-child {
   margin-top: 0;
 }
-.bluelib .panel > .bluelib *:last-child,
+.bluelib .panel > *:last-child,
 .bluelib .panel .all:last-child {
   margin-bottom: 0;
 }
@@ -259,7 +259,7 @@
 .bluelib .split > .panel {
   margin: 0;
 }
-.bluelib .split > .bluelib *,
+.bluelib .split > *,
 .bluelib .split .all {
   flex-grow: 1;
   flex-shrink: 0;
@@ -295,6 +295,20 @@
 .bluelib .image-limit-quarter {
   max-height: max(14.1vw, 25vh);
 }
+.bluelib .status-hoverable {
+  cursor: help;
+}
+.bluelib .status-clickable {
+  cursor: pointer;
+}
+.bluelib .status-disabled {
+  opacity: 50%;
+}
+.bluelib .status-disabled,
+.bluelib .status-disabled *,
+.bluelib .status-disabled .all {
+  cursor: not-allowed !important;
+}
 .bluelib .form {
   display: grid;
   align-items: center;
@@ -521,16 +535,6 @@
   border-width: 0 0 0 2px;
   border-radius: 0 4px 4px 0;
 }
-.bluelib .status-hoverable {
-  cursor: help;
-}
-.bluelib .status-clickable {
-  cursor: pointer;
-}
-.bluelib .status-disabled {
-  cursor: not-allowed !important;
-  opacity: 50%;
-}
 .bluelib .element-title {
   text-align: center;
   --bluelib-color-r: 255;

src/targets/royalblue.root.css

@@ -383,6 +383,34 @@ body .image-limit-quarter,
 .bluelib .image-limit-quarter {
   max-height: max(14.1vw, 25vh);
 }
+body [title],
+.bluelib [title],
+body .status-hoverable,
+.bluelib .status-hoverable {
+  cursor: help;
+}
+body [onclick],
+.bluelib [onclick],
+body .status-clickable,
+.bluelib .status-clickable {
+  cursor: pointer;
+}
+body [disabled],
+.bluelib [disabled],
+body .status-disabled,
+.bluelib .status-disabled {
+  opacity: 50%;
+}
+body [disabled],
+.bluelib [disabled],
+body .status-disabled,
+.bluelib .status-disabled,
+body [disabled] *,
+.bluelib [disabled] *,
+body .status-disabled *,
+.bluelib .status-disabled * {
+  cursor: not-allowed !important;
+}
 body form,
 .bluelib form,
 body .form,
@@ -939,25 +967,6 @@ body .input-multiselect,
   border-width: 0 0 0 2px;
   border-radius: 0 4px 4px 0;
 }
-body [title],
-.bluelib [title],
-body .status-hoverable,
-.bluelib .status-hoverable {
-  cursor: help;
-}
-body [onclick],
-.bluelib [onclick],
-body .status-clickable,
-.bluelib .status-clickable {
-  cursor: pointer;
-}
-body [disabled],
-.bluelib [disabled],
-body .status-disabled,
-.bluelib .status-disabled {
-  cursor: not-allowed !important;
-  opacity: 50%;
-}
 body .element-title,
 .bluelib .element-title,
 body h1,

src/vars/module.less

@@ -1,5 +1,5 @@
 @bluelib: ~".bluelib";
-@all: ~".bluelib *, .all";
+@all: ~"*, .all";
 
 @layout: ~".layout";
 @layout-fill: ~".layout-fill";