Fix disabled button

oxalorg · Jan 28, 2024 · c816fe4 · c816fe4
1 parent 242a6a9
commit c816fe4
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 79 deletions.
diff --git a/css/sakura-dark-solarized.css b/css/sakura-dark-solarized.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #657b83;
   color: #002b36;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-dark.css b/css/sakura-dark.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #c9c9c9;
   color: #222222;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-earthly.css b/css/sakura-earthly.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #006994;
   color: #ffffff;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-ink.css b/css/sakura-ink.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #DA4453;
   color: #ffffff;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-pink.css b/css/sakura-pink.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #753851;
   color: #ffe4f5;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-radical.css b/css/sakura-radical.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #00ffff;
   color: #000000;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura-vader.css b/css/sakura-vader.css
@@ -174,7 +174,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -187,16 +187,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #DA4453;
   color: #120c0e;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/css/sakura.css b/css/sakura.css
@@ -173,7 +173,7 @@ textarea {
   width: 100%;
 }
 
-.button, button, input[type=submit], input[type=reset], input[type=button], input[type=file]::file-selector-button {
+.button, input[type=file]::file-selector-button, button, input[type=submit], input[type=reset], input[type=button] {
   display: inline-block;
   padding: 5px 10px;
   text-align: center;
@@ -186,16 +186,18 @@ textarea {
   cursor: pointer;
   box-sizing: border-box;
 }
-.button[disabled], button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled], input[type=file]::file-selector-button[disabled] {
-  cursor: default;
-  opacity: 0.5;
-}
-.button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover, input[type=file]::file-selector-button:hover {
+.button:hover, input[type=file]::file-selector-button:hover, button:hover, input[type=submit]:hover, input[type=reset]:hover, input[type=button]:hover {
   background-color: #982c61;
   color: #f9f9f9;
   outline: 0;
 }
-.button:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible, input[type=file]::file-selector-button:focus-visible {
+
+.button[disabled], input[type=file][disabled]::file-selector-button, button[disabled], input[type=submit][disabled], input[type=reset][disabled], input[type=button][disabled] {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.button:focus-visible, input[type=file]:focus-visible, button:focus-visible, input[type=submit]:focus-visible, input[type=reset]:focus-visible, input[type=button]:focus-visible {
   outline-style: solid;
   outline-width: 2px;
 }

diff --git a/scss/_main.scss b/scss/_main.scss
@@ -172,34 +172,38 @@ textarea {
     width: 100%;
 }
 
-.button, button, input[type="submit"], input[type="reset"], input[type="button"], input[type=file]::file-selector-button {
-    display: inline-block;
-    padding: 5px 10px;
-    text-align: center;
-    text-decoration: none;
-    white-space: nowrap;
-
-    background-color: $color-blossom;
-    color: $color-bg;
-    border-radius: 1px;
-    border: 1px solid $color-blossom;
-    cursor: pointer;
-    box-sizing: border-box;
+.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
+    @at-root &, input[type=file]::file-selector-button {
+        display: inline-block;
+        padding: 5px 10px;
+        text-align: center;
+        text-decoration: none;
+        white-space: nowrap;
+
+        background-color: $color-blossom;
+        color: $color-bg;
+        border-radius: 1px;
+        border: 1px solid $color-blossom;
+        cursor: pointer;
+        box-sizing: border-box;
+
+        &:hover {
+            background-color: $color-fade;
+            color: $color-bg;
+            outline: 0;
+        }
+    }
 
-    &[disabled] {
+    @at-root &[disabled], input[type=file][disabled]::file-selector-button {
         cursor: default;
         opacity: .5;
     }
 
-    &:hover {
-        background-color: $color-fade;
-        color: $color-bg;
-        outline: 0;
-    }
-
-    &:focus-visible {
-        outline-style: solid;
-        outline-width: 2px;
+    @at-root &, input[type=file] {
+        &:focus-visible {
+            outline-style: solid;
+            outline-width: 2px;
+        }
     }
 }