feat: Update contents

contents/toggle-password-visibility.mdx

@@ -0,0 +1,124 @@
+---
+category: Input
+created: '2019-11-23'
+description: Create a toggle password visibility with CSS flexbox
+keywords: css flexbox, toggle password visibility
+thumbnail: /assets/css-layout/thumbnails/toggle-password-visibility.png
+title: Toggle password visibility
+---
+
+## HTML
+
+```html
+<div class="toggle-password-visibility">
+    <!-- Text input -->
+    <input type="text" class="toggle-password-visibility__input" />
+
+    <!-- Toggle button sticks to the right -->
+    <button class="toggle-password-visibility__toggle">...</button>
+</div>
+```
+
+## CSS
+
+```css
+.toggle-password-visibility {
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+}
+
+.toggle-password-visibility__input {
+    border-color: transparent;
+
+    /* Take available width */
+    flex: 1;
+}
+
+.toggle-password-visibility__toggle {
+    /* Reset */
+    background: #fff;
+    border-color: transparent;
+
+    /* Center the content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+```
+
+In reality, the `click` event handler of the button needs to update the `type` attribute of the input to `text` or `password`:
+
+```js
+document.querySelector('.toggle-password-visibility__toggle').addEventListener('click', (e) => {
+    const input = e.target.previousElementSibling;
+    const type = input.getAttribute('type');
+    input.setAttribute('type', type === 'text' ? 'password' : 'text');
+});
+```
+
+<Playground>
+```css styles.css hidden
+body {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+}
+
+.toggle-password-visibility {
+    display: flex;
+
+    /* Border */
+    border: 1px solid #d1d5db;
+    border-radius: 0.25rem;
+    padding: 0.25rem;
+
+    /* Demo */
+    height: 2.5rem;
+}
+
+.toggle-password-visibility__input {
+    border-color: transparent;
+    /* Take available width */
+    flex: 1;
+
+    /* Demo */
+    width: 16rem;
+}
+
+.toggle-password-visibility__toggle {
+    /* Reset */
+    background: #fff;
+    border-color: transparent;
+
+    /* Center the content */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.toggle-password-visibility__svg {
+    fill: none;
+    height: 1.5rem;
+    stroke: #d1d5db;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+    stroke-width: 1;
+    width: 1.5rem;
+}
+```
+
+```html index.html hidden
+<div class="toggle-password-visibility">
+    <input type="text" class="toggle-password-visibility__input" value="*****" />
+    <button class="toggle-password-visibility__toggle">
+        <svg class="toggle-password-visibility__svg" viewBox="0 0 24 24">
+            <path d="M23.5,12c0,0-5.148,6.5-11.5,6.5S0.5,12,0.5,12S5.648,5.5,12,5.5S23.5,12,23.5,12z M12,8c2.209,0,4,1.791,4,4 s-1.791,4-4,4s-4-1.791-4-4S9.791,8,12,8z M12,10c1.105,0,2,0.895,2,2s-0.895,2-2,2s-2-0.895-2-2"></path>
+        </svg>
+    </button>
+</div>
+```
+</Playground>