Adds readonly example. Adds placeholder styles.

AgnosticUI · Oct 2, 2020 · 6bf3bbc · 6bf3bbc
1 parent fe4c379
commit 6bf3bbc
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 4 deletions.
diff --git a/agnosticui-css/input.css b/agnosticui-css/input.css
@@ -92,6 +92,33 @@
   margin-right: var(--agnosticui-input-side-padding);
 }
 
+/**
+* Placeholder
+*/
+.input::-webkit-input-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity .2s ease-out;
+}
+
+.input::-moz-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity .2s ease-out;
+}
+
+.input::-ms-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity .2s ease-out;
+}
+
+.input:-ms-placeholder {
+  color: currentColor;
+  opacity: 0.5;
+  transition: opacity .2s ease-out;
+}
+
 /**
 * Underlined inputs
 */

diff --git a/agnosticui-css/input.html b/agnosticui-css/input.html
@@ -54,6 +54,14 @@ <h3>Text Input</h3>
           <input placeholder="Placeholder text" class="input input-rounded" id="input-text-rounded"
             name="input-text-rounded" type="text">
         </div>
+        <div>
+          <label class="label" for="input-readonly">Input readonly</label>
+          <input readonly placeholder="readonly" class="input" id="input-readonly" name="input-readonly" type="text">
+        </div>
+        <div>
+          <label class="label" for="input-disabled">Input disabled</label>
+          <input placeholder="disabled" class="input" id="input-disabled" name="input-disabled" type="text" disabled>
+        </div>
         <div>
           <label class="label" for="input-text-small">Input small label</label>
           <input placeholder="Placeholder text" class="input input-small" id="input-text-small" name="input-text-small"
@@ -79,10 +87,7 @@ <h3>Text Input</h3>
           <input placeholder="Placeholder text" class="input input-underlined input-underlined-bg input-large"
             id="input-text-underlined-bg-large" name="input-text-underlined-bg-large" type="text">
         </div>
-        <div>
-          <label class="label" for="input-disabled">Input disabled</label>
-          <input placeholder="disabled" class="input" id="input-disabled" name="input-disabled" type="text" disabled>
-        </div>
+
         <div class="row" style="justify-content: flex-start;">
           <label class="label label-inline" for="input-text-inlined">Input label (inline)</label>
           <input placeholder="Placeholder text" class="input input-inline" id="input-text-inlined"