From c64e8a5f81e4efbc18780a4a161e9eca7aeb52cd Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Tue, 20 Sep 2022 18:12:22 +0700
Subject: [PATCH] feat: Resizable element

---
 .../_includes/patterns/resizable-element.njk  |  10 +
 contents/index.njk                            |   1 +
 contents/resizable-element.md                 | 147 ++++++++++
 pages/resizable-element/index.tsx             | 273 ------------------
 pages/status-light/index.tsx                  | 139 ---------
 patterns/resizable-element/Cover.tsx          | 128 --------
 styles/index.scss                             |   1 +
 styles/patterns/_resizable-element.scss       | 101 +++++++
 8 files changed, 260 insertions(+), 540 deletions(-)
 create mode 100644 contents/_includes/patterns/resizable-element.njk
 create mode 100644 contents/resizable-element.md
 delete mode 100644 pages/resizable-element/index.tsx
 delete mode 100644 pages/status-light/index.tsx
 delete mode 100644 patterns/resizable-element/Cover.tsx
 create mode 100644 styles/patterns/_resizable-element.scss

diff --git a/contents/_includes/patterns/resizable-element.njk b/contents/_includes/patterns/resizable-element.njk
new file mode 100644
index 0000000..cead0b9
--- /dev/null
+++ b/contents/_includes/patterns/resizable-element.njk
@@ -0,0 +1,10 @@
+<div class="resizable-element">
+    <div class="resizable-element__resizer resizable-element__resizer--tl"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--tc"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--tr"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--rc"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--rb"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--bc"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--bl"></div>
+    <div class="resizable-element__resizer resizable-element__resizer--lc"></div>
+</div>
\ No newline at end of file
diff --git a/contents/index.njk b/contents/index.njk
index cc3eb92..03fe99c 100644
--- a/contents/index.njk
+++ b/contents/index.njk
@@ -75,6 +75,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Popover arrow" %}{% include "patterns/popover-arrow.njk" %}{% endpattern %}
             {% pattern "Progress bar" %}{% include "patterns/progress-bar.njk" %}{% endpattern %}
             {% pattern "Radial progress bar" %}{% include "patterns/radial-progress-bar.njk" %}{% endpattern %}
+            {% pattern "Resizable element" %}{% include "patterns/resizable-element.njk" %}{% endpattern %}
         </div>
     </div>
 
diff --git a/contents/resizable-element.md b/contents/resizable-element.md
new file mode 100644
index 0000000..0c86b09
--- /dev/null
+++ b/contents/resizable-element.md
@@ -0,0 +1,147 @@
+---
+layout: layouts/post.njk
+title: Resizable element
+description: Create resizable indicators with CSS
+keywords: css resizable, css resize cursor
+---
+
+## HTML
+
+```html
+<div class="resizable-element">
+    <!-- The content -->
+    ...
+
+    <!-- The top left square -->
+    <div class="resizable-element__resizer resizable-element__resizer--tl"></div>
+
+    <!-- The top square -->
+    <div class="resizable-element__resizer resizable-element__resizer--tc"></div>
+
+    <!-- The top right square -->
+    <div class="resizable-element__resizer resizable-element__resizer--tr"></div>
+
+    <!-- The right square -->
+    <div class="resizable-element__resizer resizable-element__resizer--rc"></div>
+
+    <!-- The right bottom square -->
+    <div class="resizable-element__resizer resizable-element__resizer--rb"></div>
+
+    <!-- The bottom square -->
+    <div class="resizable-element__resizer resizable-element__resizer--bc"></div>
+
+    <!-- The bottom left square -->
+    <div class="resizable-element__resizer resizable-element__resizer--bl"></div>
+
+    <!-- The left square -->
+    <div class="resizable-element__resizer resizable-element__resizer--lc"></div>
+</div>
+```
+
+## CSS
+
+```css
+.resizable-element {
+    /* Border */
+    border: 1px dashed #d1d5db;
+
+    /* Used to position the squares */
+    position: relative;
+}
+
+.resizable-element__resizer {
+    /* Border */
+    border: 1px solid #d1d5db;
+    position: absolute;
+
+    /* Size */
+    height: 0.75rem;
+    width: 0.75rem;
+}
+
+.resizable-element__resizer--tl {
+    /* Resize cursor */
+    cursor: nwse-resize;
+
+    /* Positioned at the top left corner */
+    left: 0px;
+    top: 0px;
+    transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tc {
+    /* Resize cursor */
+    cursor: ns-resize;
+
+    /* Positioned at the middle of top side */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tr {
+    /* Resize cursor */
+    cursor: nesw-resize;
+
+    /* Positioned at the top right corner */
+    right: 0px;
+    top: 0px;
+    transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rc {
+    /* Resize cursor */
+    cursor: ew-resize;
+
+    /* Positioned at the middle of right side */
+    right: 0px;
+    top: 50%;
+    transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rb {
+    /* Resize cursor */
+    cursor: nwse-resize;
+
+    /* Positioned at the right bottom corner */
+    bottom: 0px;
+    right: 0px;
+    transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bc {
+    /* Resize cursor */
+    cursor: ns-resize;
+
+    /* Positioned at the middle of bottom side */
+    bottom: 0px;
+    right: 50%;
+    transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bl {
+    /* Resize cursor */
+    cursor: nesw-resize;
+
+    /* Positioned at the bottom left corner */
+    bottom: 0px;
+    left: 0px;
+    transform: translate(-50%, 50%);
+}
+
+.resizable-element__resizer--lc {
+    /* Resize cursor */
+    cursor: ew-resize;
+
+    /* Positioned at the middle of left side */
+    left: 0px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+```
+
+You can move the mouse over each squares located at the corners and the middle of sides to see the cursors which indicate the associated side can be resized.
+
+{% demo %}
+{% include "patterns/resizable-element.njk" %}
+{% enddemo %}
diff --git a/pages/resizable-element/index.tsx b/pages/resizable-element/index.tsx
deleted file mode 100644
index e5f87a3..0000000
--- a/pages/resizable-element/index.tsx
+++ /dev/null
@@ -1,273 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.ResizableElement}>
-            <Head>
-                <meta name="description" content="Create resizable indicators with CSS" />
-                <meta name="og:description" content="Create resizable indicators with CSS" />
-                <meta name="twitter:description" content="Create resizable indicators with CSS" />
-                <meta name="keywords" content="css resizable, css resize cursor" />
-            </Head>
-            <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
-                You can move the mouse over each squares located at the corners and the middle of sides to see the
-                cursors which indicate the associated side can be resized.
-            </div>
-            <BrowserFrame
-                html={`
-<div class="container">
-    <!-- The content -->
-    ...
-
-    <!-- The top left square -->
-    <div class="container__resizer container__resizer--tl"></div>
-
-    <!-- The top square -->
-    <div class="container__resizer container__resizer--tc"></div>
-
-    <!-- The top right square -->
-    <div class="container__resizer container__resizer--tr"></div>
-
-    <!-- The right square -->
-    <div class="container__resizer container__resizer--rc"></div>
-
-    <!-- The right bottom square -->
-    <div class="container__resizer container__resizer--rb"></div>
-
-    <!-- The bottom square -->
-    <div class="container__resizer container__resizer--bc"></div>
-
-    <!-- The bottom left square -->
-    <div class="container__resizer container__resizer--bl"></div>
-
-    <!-- The left square -->
-    <div class="container__resizer container__resizer--lc"></div>
-</div>
-`}
-                css={`
-                    .container {
-                        /* Border */
-                        border: 1px dashed rgba(0, 0, 0, 0.3);
-
-                        /* Used to position the squares */
-                        position: relative;
-                    }
-
-                    .container__resizer {
-                        /* Border */
-                        border: 1px solid rgba(0, 0, 0, 0.3);
-                        position: absolute;
-
-                        /* Size */
-                        height: 12px;
-                        width: 12px;
-                    }
-
-                    .container__resizer--tl {
-                        /* Resize cursor */
-                        cursor: nwse-resize;
-
-                        /* Positioned at the top left corner */
-                        left: 0px;
-                        top: 0px;
-                        transform: translate(-50%, -50%);
-                    }
-
-                    .container__resizer--tc {
-                        /* Resize cursor */
-                        cursor: ns-resize;
-
-                        /* Positioned at the middle of top side */
-                        left: 50%;
-                        top: 0px;
-                        transform: translate(-50%, -50%);
-                    }
-
-                    .container__resizer--tr {
-                        /* Resize cursor */
-                        cursor: nesw-resize;
-
-                        /* Positioned at the top right corner */
-                        right: 0px;
-                        top: 0px;
-                        transform: translate(50%, -50%);
-                    }
-
-                    .container__resizer--rc {
-                        /* Resize cursor */
-                        cursor: ew-resize;
-
-                        /* Positioned at the middle of right side */
-                        right: 0px;
-                        top: 50%;
-                        transform: translate(50%, -50%);
-                    }
-
-                    .container__resizer--rb {
-                        /* Resize cursor */
-                        cursor: nwse-resize;
-
-                        /* Positioned at the right bottom corner */
-                        bottom: 0px;
-                        right: 0px;
-                        transform: translate(50%, 50%);
-                    }
-
-                    .container__resizer--bc {
-                        /* Resize cursor */
-                        cursor: ns-resize;
-
-                        /* Positioned at the middle of bottom side */
-                        bottom: 0px;
-                        right: 50%;
-                        transform: translate(50%, 50%);
-                    }
-
-                    .container__resizer--bl {
-                        /* Resize cursor */
-                        cursor: nesw-resize;
-
-                        /* Positioned at the bottom left corner */
-                        bottom: 0px;
-                        left: 0px;
-                        transform: translate(-50%, 50%);
-                    }
-
-                    .container__resizer--lc {
-                        /* Resize cursor */
-                        cursor: ew-resize;
-
-                        /* Positioned at the middle of left side */
-                        left: 0px;
-                        top: 50%;
-                        transform: translate(-50%, -50%);
-                    }
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '1px dashed rgba(0, 0, 0, 0.3)',
-                            height: '200px',
-                            position: 'relative',
-                            width: '200px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                cursor: 'nwse-resize',
-                                height: '12px',
-                                left: 0,
-                                position: 'absolute',
-                                top: 0,
-                                transform: 'translate(-50%, -50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                cursor: 'ns-resize',
-                                height: '12px',
-                                left: '50%',
-                                position: 'absolute',
-                                top: 0,
-                                transform: 'translate(-50%, -50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                cursor: 'nesw-resize',
-                                height: '12px',
-                                position: 'absolute',
-                                right: 0,
-                                top: 0,
-                                transform: 'translate(50%, -50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                cursor: 'ew-resize',
-                                height: '12px',
-                                position: 'absolute',
-                                right: 0,
-                                top: '50%',
-                                transform: 'translate(50%, -50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: 0,
-                                cursor: 'nwse-resize',
-                                height: '12px',
-                                position: 'absolute',
-                                right: 0,
-                                transform: 'translate(50%, 50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: 0,
-                                cursor: 'ns-resize',
-                                height: '12px',
-                                position: 'absolute',
-                                right: '50%',
-                                transform: 'translate(50%, 50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                bottom: 0,
-                                cursor: 'nesw-resize',
-                                height: '12px',
-                                left: 0,
-                                position: 'absolute',
-                                transform: 'translate(-50%, 50%)',
-                                width: '12px',
-                            }}
-                        />
-                        <div
-                            style={{
-                                border: '1px solid rgba(0, 0, 0, 0.3)',
-                                cursor: 'ew-resize',
-                                height: '12px',
-                                left: 0,
-                                position: 'absolute',
-                                top: '50%',
-                                transform: 'translate(-50%, -50%)',
-                                width: '12px',
-                            }}
-                        />
-                    </div>
-                </div>
-            </BrowserFrame>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/pages/status-light/index.tsx b/pages/status-light/index.tsx
deleted file mode 100644
index f700fc9..0000000
--- a/pages/status-light/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import * as React from 'react';
-import Head from 'next/head';
-
-import { Heading, Spacer } from '@1milligram/design';
-import { Pattern } from '../../constants/Pattern';
-import { PatternLayout } from '../../layouts/PatternLayout';
-import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-
-const Details: React.FC<{}> = () => {
-    return (
-        <PatternLayout pattern={Pattern.StatusLight}>
-            <Head>
-                <meta name="description" content="" />
-                <meta name="og:description" content="Create a status light with CSS flexbox" />
-                <meta name="twitter:description" content="Create a status light with CSS flexbox" />
-                <meta name="keywords" content="" />
-            </Head>
-            <BrowserFrame
-                html={`
-
-`}
-                css={`
-                    
-                `}
-            >
-                <div
-                    style={{
-                        alignItems: 'center',
-                        display: 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                        justifyContent: 'center',
-                        padding: '8px',
-                    }}
-                >
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            display: 'inline-flex',
-                            width: '150px',
-                        }}
-                    >
-                        <div
-                            style={{
-                                backgroundColor: '#4299e1',
-                                borderRadius: '9999px',
-                                height: '8px',
-                                marginRight: '8px',
-                                width: '8px',
-                            }}
-                        />
-
-                        <div style={{ flex: 1 }}>
-                            <Rectangle />
-                        </div>
-                    </div>
-                </div>
-            </BrowserFrame>
-            <Spacer size="extraLarge" />
-
-            <section>
-                <Heading level={2}>Use cases</Heading>
-
-                <div style={{ padding: '48px' }}>
-                    <div
-                        style={{
-                            alignItems: 'center',
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            display: 'flex',
-                            height: '500px',
-                            justifyContent: 'center',
-                        }}
-                    >
-                        <div>
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    marginBottom: '12px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#f56565',
-                                        borderRadius: '9999px',
-                                        height: '8px',
-                                        marginRight: '8px',
-                                        width: '8px',
-                                    }}
-                                />
-                                In review
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                    marginBottom: '12px',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#a0aec0',
-                                        borderRadius: '9999px',
-                                        height: '8px',
-                                        marginRight: '8px',
-                                        width: '8px',
-                                    }}
-                                />
-                                Draft
-                            </div>
-
-                            <div
-                                style={{
-                                    alignItems: 'center',
-                                    display: 'flex',
-                                }}
-                            >
-                                <div
-                                    style={{
-                                        backgroundColor: '#4299e1',
-                                        borderRadius: '9999px',
-                                        height: '8px',
-                                        marginRight: '8px',
-                                        width: '8px',
-                                    }}
-                                />
-                                Published
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </section>
-        </PatternLayout>
-    );
-};
-
-export default Details;
diff --git a/patterns/resizable-element/Cover.tsx b/patterns/resizable-element/Cover.tsx
deleted file mode 100644
index 7945733..0000000
--- a/patterns/resizable-element/Cover.tsx
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as React from 'react';
-
-import Frame from '../../placeholders/Frame';
-
-const Cover: React.FC<{}> = () => {
-    return (
-        <Frame>
-            <div
-                style={{
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    height: '100%',
-                    justifyContent: 'center',
-                    padding: '16px',
-                }}
-            >
-                <div
-                    style={{
-                        border: '1px dashed rgba(0, 0, 0, 0.3)',
-                        height: '100%',
-                        position: 'relative',
-                        width: '100%',
-                    }}
-                >
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            cursor: 'nwse-resize',
-                            height: '12px',
-                            left: 0,
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'translate(-50%, -50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            cursor: 'ns-resize',
-                            height: '12px',
-                            left: '50%',
-                            position: 'absolute',
-                            top: 0,
-                            transform: 'translate(-50%, -50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            cursor: 'nesw-resize',
-                            height: '12px',
-                            position: 'absolute',
-                            right: 0,
-                            top: 0,
-                            transform: 'translate(50%, -50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            cursor: 'ew-resize',
-                            height: '12px',
-                            position: 'absolute',
-                            right: 0,
-                            top: '50%',
-                            transform: 'translate(50%, -50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            bottom: 0,
-                            cursor: 'nwse-resize',
-                            height: '12px',
-                            position: 'absolute',
-                            right: 0,
-                            transform: 'translate(50%, 50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            bottom: 0,
-                            cursor: 'ns-resize',
-                            height: '12px',
-                            position: 'absolute',
-                            right: '50%',
-                            transform: 'translate(50%, 50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            bottom: 0,
-                            cursor: 'nesw-resize',
-                            height: '12px',
-                            left: 0,
-                            position: 'absolute',
-                            transform: 'translate(-50%, 50%)',
-                            width: '12px',
-                        }}
-                    />
-                    <div
-                        style={{
-                            border: '1px solid rgba(0, 0, 0, 0.3)',
-                            cursor: 'ew-resize',
-                            height: '12px',
-                            left: 0,
-                            position: 'absolute',
-                            top: '50%',
-                            transform: 'translate(-50%, -50%)',
-                            width: '12px',
-                        }}
-                    />
-                </div>
-            </div>
-        </Frame>
-    );
-};
-
-export default Cover;
diff --git a/styles/index.scss b/styles/index.scss
index 41d9ad8..e11e627 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -50,6 +50,7 @@
 @import './patterns/property-list';
 @import './patterns/questions-and-answers';
 @import './patterns/radial-progress-bar';
+@import './patterns/resizable-element';
 @import './patterns/ribbon';
 @import './patterns/separator';
 @import './patterns/stacked-cards';
diff --git a/styles/patterns/_resizable-element.scss b/styles/patterns/_resizable-element.scss
new file mode 100644
index 0000000..9a1b1be
--- /dev/null
+++ b/styles/patterns/_resizable-element.scss
@@ -0,0 +1,101 @@
+.resizable-element {
+    /* Border */
+    border: 1px dashed #d1d5db;
+
+    /* Used to position the squares */
+    position: relative;
+
+    /* Demo */
+    height: 100%;
+    width: 100%;
+}
+
+.resizable-element__resizer {
+    /* Border */
+    border: 1px solid #d1d5db;
+    position: absolute;
+
+    /* Size */
+    height: 0.75rem;
+    width: 0.75rem;
+}
+
+.resizable-element__resizer--tl {
+    /* Resize cursor */
+    cursor: nwse-resize;
+
+    /* Positioned at the top left corner */
+    left: 0px;
+    top: 0px;
+    transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tc {
+    /* Resize cursor */
+    cursor: ns-resize;
+
+    /* Positioned at the middle of top side */
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, -50%);
+}
+
+.resizable-element__resizer--tr {
+    /* Resize cursor */
+    cursor: nesw-resize;
+
+    /* Positioned at the top right corner */
+    right: 0px;
+    top: 0px;
+    transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rc {
+    /* Resize cursor */
+    cursor: ew-resize;
+
+    /* Positioned at the middle of right side */
+    right: 0px;
+    top: 50%;
+    transform: translate(50%, -50%);
+}
+
+.resizable-element__resizer--rb {
+    /* Resize cursor */
+    cursor: nwse-resize;
+
+    /* Positioned at the right bottom corner */
+    bottom: 0px;
+    right: 0px;
+    transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bc {
+    /* Resize cursor */
+    cursor: ns-resize;
+
+    /* Positioned at the middle of bottom side */
+    bottom: 0px;
+    right: 50%;
+    transform: translate(50%, 50%);
+}
+
+.resizable-element__resizer--bl {
+    /* Resize cursor */
+    cursor: nesw-resize;
+
+    /* Positioned at the bottom left corner */
+    bottom: 0px;
+    left: 0px;
+    transform: translate(-50%, 50%);
+}
+
+.resizable-element__resizer--lc {
+    /* Resize cursor */
+    cursor: ew-resize;
+
+    /* Positioned at the middle of left side */
+    left: 0px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
\ No newline at end of file