From fa4d637525c2b6cf107b4563e34808ee0e994adc Mon Sep 17 00:00:00 2001
From: Laura Chan <laurachan205@gmail.com>
Date: Tue, 16 Mar 2021 21:32:05 +0000
Subject: [PATCH] Adds silver background colour to inputs disabled type email,
 password, text (#110)

* Adds silver background colour to inputs type email, password, text

* Add example to docs

* Textarea disabled styling

* Revert autoformatting

* fix: text shadow, use :disabled pseudoselector
---
 docs/index.html.ejs | 13 +++++++++++++
 style.css           | 11 +++++++++++
 2 files changed, 24 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 127359c..f3b597b 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -388,7 +388,20 @@
             <textarea id="text${getCurrentId()}" rows="8"></textarea>
           </div>
         `) %>
+
+        <p>
+          Text boxes can also be disabled and have value with their corresponding HTML attributes. 
+        </p>
+  
+        <%- example(`
+          <div class="field-row">
+            <label for="text${getNewId()}">Favorite color</label>
+            <input id="text${getCurrentId()}" disabled type="text" value="Windows Green"/>
+          </div>
+        `) %>
       </div>
+
+
     </section>
 
     <section class="component">
diff --git a/style.css b/style.css
index be77ea1..d5a6af2 100644
--- a/style.css
+++ b/style.css
@@ -169,6 +169,10 @@ button::-moz-focus-inner {
 :disabled,
 :disabled + label {
   color: var(--button-shadow);
+}
+
+button:disabled,
+:disabled + label {
   text-shadow: 1px 1px 0 var(--button-highlight);
 }
 
@@ -433,6 +437,13 @@ input[type="email"] {
   line-height: 2;
 }
 
+input[type="email"]:disabled,
+input[type="password"]:disabled,
+input[type="text"]:disabled,
+textarea:disabled {
+  background-color: var(--surface);
+}
+
 select {
   appearance: none;
   -webkit-appearance: none;