feat: disabled style

zheeeng · Jul 15, 2022 · 8ba383e · 8ba383e
1 parent dae6f39
commit 8ba383e
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 25 deletions.
diff --git a/packages/styled-css-base-example/demo/demoSet.tsx b/packages/styled-css-base-example/demo/demoSet.tsx
@@ -38,74 +38,74 @@ export const demoSet = {
     Pre: (code: string) => (
         <pre>{code}</pre>
     ),
-    Select: () => (
+    Select: (disabled?: boolean) => (
         <label>
             Select
-            <select>
+            <select disabled={disabled}>
                 <option value="option1">option1</option>
                 <option value="option2">option2</option>
                 <option value="option3">option3</option>
                 <option value="option4">option4</option>
             </select>
         </label>
     ),
-    Radio: () => (
+    Radio: (disabled?: boolean) => (
         <label>
             Radio
-            <input type="radio" />
+            <input type="radio" disabled={disabled}/>
         </label>
     ),
-    CheckBox: () => (
+    CheckBox: (disabled?: boolean) => (
         <label>
             CheckBox
-            <input type="checkbox" />
+            <input type="checkbox" disabled={disabled}/>
         </label>
     ),
-    Range: () => (
+    Range: (disabled?: boolean) => (
         <label>
             Range
-            <input type="range" />
+            <input type="range" disabled={disabled}/>
         </label>
     ),
-    Text: () => (
+    Text: (disabled?: boolean) => (
         <label>
             Text
-            <input type="text" />
+            <input type="text" disabled={disabled}/>
         </label>
     ),
-    Number: () => (
+    Number: (disabled?: boolean) => (
         <label>
             Number
-            <input type="number" />
+            <input type="number" disabled={disabled}/>
         </label>
     ),
-    Password: () => (
+    Password: (disabled?: boolean) => (
         <label>
             Password
-            <input type="password" />
+            <input type="password" disabled={disabled}/>
         </label>
     ),
-    Date: () => (
+    Date: (disabled?: boolean) => (
         <label>
             Date
-            <input type="date" />
+            <input type="date" disabled={disabled}/>
         </label>
     ),
-    Textarea: () => (
+    Textarea: (disabled?: boolean) => (
         <label>
-            <textarea />
+            <textarea disabled={disabled}/>
         </label>
     ),
-    Color: () => (
+    Color: (disabled?: boolean) => (
         <label>
             Color
-            <input type="color" />
+            <input type="color" disabled={disabled}/>
         </label>
     ),
-    File: () => (
+    File: (disabled?: boolean) => (
         <label>
             File
-            <input type="file" />
+            <input type="file" disabled={disabled}/>
         </label>
     ),
     Table: () => (
@@ -252,8 +252,8 @@ export const demoSet = {
             <dd>is the muscle of the webpage.</dd>
         </dl>
     ),
-    Button: () => (
-        <button>button</button>
+    Button: (disabled?: boolean) => (
+        <button disabled={disabled}>button</button>
     ),
     Dialog: () => (
         <div>
@@ -306,25 +306,56 @@ export const createDemoSet = ({ preCode }: { preCode: string }) => (
                     {demoSet.Section(demoSet.Range())}
                 </>
             )}
+            {demoSet.Section(
+                <>
+                    {demoSet.Section(demoSet.Select(true))}
+                    {demoSet.Section(demoSet.Radio(true))}
+                    {demoSet.Section(demoSet.CheckBox(true))}
+                    {demoSet.Section(demoSet.Range(true))}
+                </>
+            )}
             {demoSet.Section(
                 <>
                     {demoSet.Section(demoSet.Text())}
                     {demoSet.Section(demoSet.Number())}
                 </>
             )}
+            {demoSet.Section(
+                <>
+                    {demoSet.Section(demoSet.Text(true))}
+                    {demoSet.Section(demoSet.Number(true))}
+                </>
+            )}
             {demoSet.Section(
                 <>
                     {demoSet.Section(demoSet.Password())}
                     {demoSet.Section(demoSet.Date())}
                 </>
             )}
-            {demoSet.Section(demoSet.Textarea())}
+            {demoSet.Section(
+                <>
+                    {demoSet.Section(demoSet.Password(true))}
+                    {demoSet.Section(demoSet.Date(true))}
+                </>
+            )}
+            {demoSet.Section(
+                <>
+                    {demoSet.Section(demoSet.Textarea())}
+                    {demoSet.Section(demoSet.Textarea(true))}
+                </>
+            )}
             {demoSet.Section(
                 <>
                     {demoSet.Section(demoSet.Color())}
                     {demoSet.Section(demoSet.File())}
                 </>
             )}
+            {demoSet.Section(
+                <>
+                    {demoSet.Section(demoSet.Color(true))}
+                    {demoSet.Section(demoSet.File(true))}
+                </>
+            )}
             {demoSet.Section(demoSet.Table())}
             {demoSet.Section(demoSet.TableVertical())}
             {demoSet.Section(demoSet.Details())}
@@ -338,6 +369,7 @@ export const createDemoSet = ({ preCode }: { preCode: string }) => (
             {demoSet.Section(
                 <>
                     {demoSet.Section(demoSet.Button())}
+                    {demoSet.Section(demoSet.Button(true))}
                     {demoSet.Section(demoSet.Dialog())}
                 </>
             )}

diff --git a/packages/styled-css-base/src/simple/index.css b/packages/styled-css-base/src/simple/index.css
@@ -290,6 +290,11 @@ button:focus {
     box-shadow: currentColor 0px 0px 0px 1px, rgba(15, 23, 42, 1) 0px 0px 0px 2px;
 }
 
+button[disabled] {
+    color: rgba(223, 224, 226, 1);
+    background-color: rgba(15, 23, 42, 0.5);
+}
+
 dialog[open] {
     display: flex;
     flex-direction: column;
@@ -317,6 +322,14 @@ input[type=radio], input[type=checkbox], input[type=range], input[type=color], i
     cursor: pointer;
 }
 
+input[disabled], textarea[disabled], select[disabled], button[disabled], *[disabled] {
+    cursor: not-allowed;
+}
+
+input[disabled]:hover, textarea[disabled]:hover, select[disabled]:hover, button[disabled]:hover, *[disabled]:hover {
+    outline: none;
+}
+
 img, iframe {
     transition: box-shadow 0.2s ease-in-out;
     border: none;