From 37df5cc5a8b0667f30bae0825052596576154a6b Mon Sep 17 00:00:00 2001
From: tglide <thomglopes@gmail.com>
Date: Wed, 14 Oct 2020 08:16:57 -0300
Subject: [PATCH 1/2] add input-with-prefix.md

---
 snippets/input-with-prefix.md | 59 +++++++++++++++++++++++++++++++++++
 1 file changed, 59 insertions(+)
 create mode 100644 snippets/input-with-prefix.md

diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md
new file mode 100644
index 000000000..48e16f974
--- /dev/null
+++ b/snippets/input-with-prefix.md
@@ -0,0 +1,59 @@
+---
+title: Input with Prefix
+tags: visual,interactivity,intermediate
+---
+
+Creates an input with a visual, non-editable prefix.
+
+- Create a parent element, containing the prefix and the input 
+- Remove border and outline from the input, and apply it to the parent element, to give it the appearance of an input box
+- Use `:focus-within` selector to change the parent element style accordingly
+
+```html
+<div class="input-box">
+  <span class="prefix">R$</span>
+  <input />  
+</div>
+```
+
+```css
+.input-box {
+  display: flex;
+  align-items: center;
+  
+  max-width: 300px;  
+  border: 1px #A0AEC0 solid;
+  border-radius: 4px;
+  padding-left: 0.5rem;
+  overflow: hidden;
+  
+  font-family: sans-serif;
+  
+  transition: border-color 0.5s ease;
+}
+
+.input-box:focus-within, .input-box:hover {
+  border-color: #38B2AC;
+}
+
+.input-box .prefix {
+  font-weight: 300;
+  font-size: 14px;
+  color: #A0AEC0;
+}
+
+.input-box:focus-within .prefix, .input-box:hover .prefix { 
+  color: #38B2AC;
+}
+
+
+.input-box input {
+  flex-grow: 1;
+  
+  border: none;
+  outline: none;
+  padding: 0.5rem;
+  
+} 
+
+```

From 97f23395b7ef2835f056d85f0a1291e30dc562e7 Mon Sep 17 00:00:00 2001
From: Angelos Chalaris <chalarangelo@gmail.com>
Date: Sun, 15 Nov 2020 16:49:51 +0200
Subject: [PATCH 2/2] Update input-with-prefix.md

---
 snippets/input-with-prefix.md | 37 ++++++++++++-----------------------
 1 file changed, 13 insertions(+), 24 deletions(-)

diff --git a/snippets/input-with-prefix.md b/snippets/input-with-prefix.md
index 48e16f974..f382d3608 100644
--- a/snippets/input-with-prefix.md
+++ b/snippets/input-with-prefix.md
@@ -1,18 +1,18 @@
 ---
-title: Input with Prefix
-tags: visual,interactivity,intermediate
+title: Input with prefix
+tags: interactivity,visual,intermediate
 ---
 
 Creates an input with a visual, non-editable prefix.
 
-- Create a parent element, containing the prefix and the input 
-- Remove border and outline from the input, and apply it to the parent element, to give it the appearance of an input box
-- Use `:focus-within` selector to change the parent element style accordingly
+- Use `display: flex` to create a container element.
+- Remove the border and outline from the `input` field and apply them to the parent element instead to make it look like an input box.
+- Use the `:focus-within` selector to style the parent element accordingly, when the user interacts with the `input` field.
 
 ```html
 <div class="input-box">
-  <span class="prefix">R$</span>
-  <input />  
+  <span class="prefix">+30</span>
+  <input type="tel" placeholder="210 123 4567"/>  
 </div>
 ```
 
@@ -20,40 +20,29 @@ Creates an input with a visual, non-editable prefix.
 .input-box {
   display: flex;
   align-items: center;
-  
   max-width: 300px;  
-  border: 1px #A0AEC0 solid;
+  border: 1px solid #a0a0a0;
   border-radius: 4px;
   padding-left: 0.5rem;
   overflow: hidden;
-  
   font-family: sans-serif;
-  
-  transition: border-color 0.5s ease;
-}
-
-.input-box:focus-within, .input-box:hover {
-  border-color: #38B2AC;
 }
 
 .input-box .prefix {
   font-weight: 300;
   font-size: 14px;
-  color: #A0AEC0;
+  color: #999;
 }
 
-.input-box:focus-within .prefix, .input-box:hover .prefix { 
-  color: #38B2AC;
-}
-
-
 .input-box input {
   flex-grow: 1;
-  
+  font-size: 14px;
   border: none;
   outline: none;
   padding: 0.5rem;
-  
 } 
 
+.input-box:focus-within {
+  border-color: #777;
+}
 ```