Clean: Proton - Radio, Checkbox order

black7375 · May 31, 2022 · a2d5227 · a2d5227
1 parent 5b7634a
commit a2d5227
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 58 deletions.
diff --git a/css/leptonChrome.css b/css/leptonChrome.css
@@ -1613,14 +1613,6 @@
       /* avoid shrinking inside flex container */
     }
 
-    xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
-      background-color: var(--in-content-button-background-hover) !important;
-      color: var(--in-content-button-text-color-hover) !important;
-    }
-    xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
-      background-color: var(--in-content-button-background-active) !important;
-    }
-
     xul|*.radio-check[selected] {
       -moz-context-properties: fill !important;
       fill: currentColor !important;
@@ -1632,6 +1624,14 @@
       color-adjust: exact !important;
     }
 
+    xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
+      background-color: var(--in-content-button-background-hover) !important;
+      color: var(--in-content-button-text-color-hover) !important;
+    }
+    xul|radio:not([disabled="true"]):hover:active > xul|*.radio-check {
+      background-color: var(--in-content-button-background-active) !important;
+    }
+
     xul|radio:not([disabled="true"])[selected]:hover > xul|*.radio-check {
       background-color: var(--in-content-primary-button-background-hover) !important;
       color: var(--in-content-primary-button-text-color-hover) !important;
@@ -1661,18 +1661,6 @@
       margin: 4px 2px !important;
     }
 
-    .checkbox-icon[src] {
-      margin-inline-end: 2px !important;
-    }
-
-    .checkbox-label {
-      margin: 1px 0 !important;
-    }
-
-    checkbox[disabled="true"] {
-      opacity: 0.4 !important;
-    }
-
     .checkbox-check {
       appearance: none !important;
       width: 16px !important;
@@ -1687,19 +1675,6 @@
       /* From common.css */
     }
 
-    checkbox:not([disabled="true"]):hover > .checkbox-check > .checkbox-check {
-      background-color: var(
-        --checkbox-unchecked-hover-bgcolor,
-        color-mix(in srgb, -moz-accent-color 4%, Field)
-      ) !important;
-    }
-    checkbox:not([disabled="true"]):hover > .checkbox-check:active > .checkbox-check {
-      background-color: var(
-        --checkbox-unchecked-active-bgcolor,
-        color-mix(in srgb, -moz-accent-color 8%, Field)
-      ) !important;
-    }
-
     .checkbox-check[checked] {
       -moz-context-properties: fill !important;
       fill: currentColor !important;
@@ -1713,6 +1688,18 @@
       color-adjust: exact !important;
     }
 
+    checkbox:not([disabled="true"]):hover > .checkbox-check {
+      background-color: var(
+        --checkbox-unchecked-hover-bgcolor,
+        color-mix(in srgb, -moz-accent-color 4%, Field)
+      ) !important;
+    }
+    checkbox:not([disabled="true"]):hover:active > .checkbox-check {
+      background-color: var(
+        --checkbox-unchecked-active-bgcolor,
+        color-mix(in srgb, -moz-accent-color 8%, Field)
+      ) !important;
+    }
     checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
       background-color: var(
         --checkbox-checked-hover-bgcolor,
@@ -1742,12 +1729,24 @@
         fill: var(--checkbox-checked-color, -moz-accent-color-foreground) !important;
       }
 
-      checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
-      checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
+      checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked] > .checkbox-check[checked],
+      checkbox:not([disabled="true"]):hover > .checkbox-check[checked] > .checkbox-check[checked] {
         color: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
         fill: var(--checkbox-checked-border-color-hover, -moz-accent-color-foreground) !important;
       }
     }
+    .checkbox-icon[src] {
+      margin-inline-end: 2px !important;
+    }
+
+    .checkbox-label {
+      margin: 1px 0 !important;
+    }
+
+    checkbox[disabled="true"] {
+      opacity: 0.4 !important;
+    }
+
     /* From common.css */
     xul|richlistitem > xul|*.checkbox-check {
       margin: 3px 6px !important;

diff --git a/src/theme/proton_chrome/_proton_commons.scss b/src/theme/proton_chrome/_proton_commons.scss
@@ -143,6 +143,9 @@
   xul|*.radio-check {
     @include Proton.RadioIcon;
   }
+  xul|*.radio-check[selected] {
+    @include Proton.RadioCheckedIcon;
+  }
 
   xul|radio:not([disabled="true"]):hover {
     > xul|*.radio-check {
@@ -153,10 +156,6 @@
     }
   }
 
-  xul|*.radio-check[selected] {
-    @include Proton.RadioCheckedIcon;
-  }
-
   xul|radio:not([disabled="true"])[selected]:hover {
     > xul|*.radio-check {
       @include Proton.RadioCheckedIconHover;
@@ -183,35 +182,21 @@
     @include Proton.CheckboxGlobal;
   }
 
-  .checkbox-icon[src] {
-    margin-inline-end: 2px !important;
-  }
-  .checkbox-label {
-    @include Proton.ChexboxLabel;
-  }
-
-  checkbox[disabled="true"] {
-    @include Proton.DisabledChexbox;
-  }
-
   .checkbox-check {
     @include Proton.CheckboxIcon;
   }
+  .checkbox-check[checked] {
+    @include Proton.CheckboxCheckedIcon;
+  }
 
-  checkbox:not([disabled="true"]):hover > .checkbox-check {
+  checkbox:not([disabled="true"]):hover {
     > .checkbox-check {
       @include Proton.CheckboxIconHover;
     }
     &:active > .checkbox-check {
       @include Proton.CheckboxIconActive;
     }
-  }
-
-  .checkbox-check[checked] {
-    @include Proton.CheckboxCheckedIcon;
-  }
 
-  checkbox:not([disabled="true"]):hover {
     > .checkbox-check[checked] {
       @include Proton.CheckboxCheckedIconHover;
     }
@@ -235,10 +220,23 @@
 
     checkbox:not([disabled="true"]):hover:active > .checkbox-check[checked],
     checkbox:not([disabled="true"]):hover > .checkbox-check[checked] {
-      @include Proton.CheckboxCheckedIconHoverContrast;
+      > .checkbox-check[checked] {
+        @include Proton.CheckboxCheckedIconHoverContrast;
+      }
     }
   }
 
+  .checkbox-icon[src] {
+    margin-inline-end: 2px !important;
+  }
+  .checkbox-label {
+    @include Proton.ChexboxLabel;
+  }
+
+  checkbox[disabled="true"] {
+    @include Proton.DisabledChexbox;
+  }
+
   /* From common.css */
   xul|richlistitem > xul|*.checkbox-check {
     margin: 3px 6px !important;