Merge pull request #166 from phuoc-ng/css-panel

Add CSS panel for feedback patterns

client/patterns/modal/Details.tsx

@@ -28,18 +28,9 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Border */
-    border: 1px solid rgba(0, 0, 0.3);
-    border-radius: 4px;
-">
     <!-- Header -->
-    <div style="
+    <div class="container__header">
-        display: flex;
-        justify-content: space-between;
-        /* Border */
-        border-bottom: 1px solid rgba(0, 0, 0.3);
-    ">
         <!-- Title -->
         ...
         <!-- Close icon sticks to the right -->
@@ -50,18 +41,33 @@ html={`
     ...
 
     <!-- Footer -->
-    <div style="
+    <div class="container__footer">
-        display: flex;
-        /* Push the buttons to the right */
-        justify-content: flex-end;
-        /* Border */
-        border-top: 1px solid rgba(0, 0, 0.3);
-    ">
         ...
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0.3);
+    border-radius: 4px;
+}
+
+.container__header {
+    display: flex;
+    justify-content: space-between;
+    /* Border */
+    border-bottom: 1px solid rgba(0, 0, 0.3);
+}
+
+.container__footer {
+    display: flex;
+    /* Push the buttons to the right */
+    justify-content: flex-end;
+    /* Border */
+    border-top: 1px solid rgba(0, 0, 0.3);
+}
+`}
                 >
                     <div
                         style={{

client/patterns/notification/Details.tsx

@@ -27,10 +27,7 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    display: flex;
-    justify-content: space-between;
-">
     <!-- Content -->
     ...
 
@@ -38,7 +35,12 @@ html={`
     ...
 </div>
 `}
-css={``}
+css={`
+.container {
+    display: flex;
+    justify-content: space-between;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/popover-arrow/Details.tsx

@@ -21,234 +21,197 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
+    <!-- The content -->
+    ...
+
+    <!-- Top left arrow -->
+    <div class="container__arrow container__arrow--tl"></div>
+
+    <!-- Top center arrow -->
+    <div class="container__arrow container__arrow--tc"></div>
+
+    <!-- Top right arrow -->
+    <div class="container__arrow container__arrow--tr"></div>
+
+    <!-- Right top arrow -->
+    <div class="container__arrow container__arrow--rt"></div>
+
+    <!-- Right center arrow -->
+    <div class="container__arrow container__arrow--rc"></div>
+
+    <!-- Right bottom arrow -->
+    <div class="container__arrow container__arrow--rb"></div>
+
+    <!-- Bottom left arrow -->
+    <div class="container__arrow container__arrow--bl"></div>
+
+    <!-- Bottom center arrow -->
+    <div class="container__arrow container__arrow--bc"></div>
+
+    <!-- Bottom right arrow -->
+    <div class="container__arrow container__arrow--br"></div>
+
+    <!-- Left top arrow -->
+    <div class="container__arrow container__arrow--lt"></div>
+
+    <!-- Left center arrow -->
+    <div class="container__arrow container__arrow--lc"></div>
+
+    <!-- Left bottom arrow -->
+    <div class="container__arrow container__arrow--lb"></div>
+</div>
+`}
+css={`
+.container {
     /* Border */
     border: 1px solid rgba(0, 0, 0, 0.3);
 
     /* Used to position the arrow */
     position: relative;
-">
+}
-    <!-- The content -->
-    ...
 
-    <!-- Top left arrow -->
+.container__arrow {
-    <div style="
+    /* Size */
-        /* Position at the top left corner */
+    height: 16px;
-        left: 32px;
+    width: 16px;
-        position: absolute;
-        top: 0px;
 
-        /* Border */
+    background-color: #FFF;
-        background-color: #FFF;
+    position: absolute;
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
+}
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translate(50%, -50%) rotate(45deg);
 
-        /* Size */
+.container__arrow--tl {
-        height: 16px;
+    /* Position at the top left corner */
-        width: 16px;
+    left: 32px;
-    " />
+    top: 0px;
 
-    <!-- Top center arrow -->
+    /* Border */
-    <div style="
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-        /* Position at the top center */
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-        left: 50%;
+    transform: translate(50%, -50%) rotate(45deg);
-        position: absolute;
+}
-        top: 0px;
 
-        /* Border */
+.container__arrow--tc {
-        background-color: #FFF;
+    /* Position at the top center */
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
+    left: 50%;
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
+    top: 0px;
-        transform: translate(-50%, -50%) rotate(45deg);
 
-        /* Size */
+    /* Border */
-        height: 16px;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-        width: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    " />
+    transform: translate(-50%, -50%) rotate(45deg);
+}
 
-    <!-- Top right arrow -->
+.container__arrow--tr {
-    <div style="
+    /* Position at the top right corner */
-        /* Position at the top right corner */
+    right: 32px;
-        position: absolute;
+    top: 0px;
-        right: 32px;
-        top: 0px;
 
-        /* Border */
+    /* Border */
-        background-color: #FFF;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%) rotate(45deg);
-        transform: translate(-50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--rt {
-        height: 16px;
+    /* Position at the right top corner */
-        width: 16px;
+    right: 0;
-    " />
+    top: 32px;
 
-    <!-- Right top arrow -->
+    /* Border */
-    <div style="
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        /* Position at the right top corner */
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-        position: absolute;
+    transform: translate(50%, 50%) rotate(45deg);
-        right: 0;
+}
-        top: 32px;
 
-        /* Border */
+.container__arrow--rc {
-        background-color: #FFF;
+    /* Position at the right center */
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    right: 0;
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
+    top: 50%;
-        transform: translate(50%, 50%) rotate(45deg);
 
-        /* Size */
+    /* Border */
-        height: 16px;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        width: 16px;
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-    " />
+    transform: translate(50%, -50%) rotate(45deg);
+}
 
-    <!-- Right center arrow -->
+.container__arrow--rb {
-    <div style="
+    /* Position at the right bottom corner */
-        /* Position at the right center */
+    bottom: 32px;
-        position: absolute;
+    right: 0;
-        right: 0;
-        top: 50%;
 
-        /* Border */
+    /* Border */
-        background-color: #FFF;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.3);
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translate(50%, -50%) rotate(45deg);
-        transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--bl {
-        height: 16px;
+    /* Position at the bottom left corner */
-        width: 16px;
+    bottom: -16px;
-    " />
+    left: 32px;
 
-    <!-- Right bottom arrow -->
+    /* Border */
-    <div style="
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        /* Position at the right bottom corner */
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        bottom: 32px;
+    transform: translate(50%, -50%) rotate(45deg);
-        position: absolute;
+}
-        right: 0;
 
-        /* Border */
+.container__arrow--bc {
-        background-color: #FFF;
+    /* Position at the bottom center */
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    bottom: -16px;
-        border-top: 1px solid rgba(0, 0, 0, 0.3);
+    left: 50%;
-        transform: translate(50%, -50%) rotate(45deg);
 
-        /* Size */
+    /* Border */
-        height: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        width: 16px;
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-    " />
+    transform: translate(-50%, -50%) rotate(45deg);
+}
 
-    <!-- Bottom left arrow -->
+.container__arrow--br {
-    <div style="
+    /* Position at the bottom right corner */
-        /* Position at the bottom left corner */
+    bottom: -16px;
-        bottom: -16px;
+    right: 32px;
-        position: absolute;
-        left: 32px;
 
-        /* Border */
+    /* Border */
-        background-color: #FFF;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%) rotate(45deg);
-        transform: translate(50%, -50%) rotate(45deg);
+}
 
-        /* Size */
+.container__arrow--lt {
-        height: 16px;
+    /* Position at the left top corner */
-        width: 16px;
+    left: 0;
-    " />
+    top: 32px;
 
-    <!-- Bottom center arrow -->
+    /* Border */
-    <div style="
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        /* Position at the bottom center */
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-        bottom: -16px;
+    transform: translate(-50%, 50%) rotate(45deg);
-        position: absolute;
+}
-        left: 50%;
 
-        /* Border */
+.container__arrow--lc {
-        background-color: #FFF;
+    /* Position at the left center */
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    left: 0;
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    top: 50%;
-        transform: translate(-50%, -50%) rotate(45deg);
 
-        /* Size */
+    /* Border */
-        height: 16px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        width: 16px;
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-    " />
+    transform: translate(-50%, -50%) rotate(45deg);
+}
 
-    <!-- Bottom right arrow -->
+.container__arrow--lb {
-    <div style="
+    /* Position at the left bottom corner */
-        /* Position at the bottom right corner */
+    bottom: 32px;
-        bottom: -16px;
+    left: 0;
-        position: absolute;
-        right: 32px;
 
-        /* Border */
+    /* Border */
-        background-color: #FFF;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+    border-left: 1px solid rgba(0, 0, 0, 0.3);
-        border-right: 1px solid rgba(0, 0, 0, 0.3);
+    transform: translate(-50%, -50%) rotate(45deg);
-        transform: translate(-50%, -50%) rotate(45deg);
+}
-
-        /* Size */
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left top arrow -->
-    <div style="
-        /* Position at the left top corner */
-        left: 0;
-        position: absolute;
-        top: 32px;
-
-        /* Border */
-        background-color: #FFF;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translate(-50%, 50%) rotate(45deg);
-
-        /* Size */
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left center arrow -->
-    <div style="
-        /* Position at the left center */
-        left: 0;
-        position: absolute;
-        top: 50%;
-
-        /* Border */
-        background-color: #FFF;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translate(-50%, -50%) rotate(45deg);
-
-        /* Size */
-        height: 16px;
-        width: 16px;
-    " />
-
-    <!-- Left bottom arrow -->
-    <div style="
-        /* Position at the left bottom corner */
-        bottom: 32px;
-        left: 0;
-        position: absolute;
-
-        /* Border */
-        background-color: #FFF;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.3);
-        border-left: 1px solid rgba(0, 0, 0, 0.3);
-        transform: translate(-50%, -50%) rotate(45deg);
-
-        /* Size */
-        height: 16px;
-        width: 16px;
-    " />
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/presence-indicator/Details.tsx

@@ -22,31 +22,35 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- Other element such as avatar -->
     ...
 
     <!-- The presence indicator -->
-    <div style="
+    <div class="container__indicator"></div>
-        /* Shown at the bottom right corner */
-        bottom: 0,
-        position: absolute;
-        right: 0;
-        transform: translate(50%, 50%);
-
-        /* Rounded border */
-        border-radius: 9999px;
-        height: 16px;
-        width: 16px;
-
-        /* Background color */
-        background-color: #FF4136;
-    " />
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+
+.container__indicator {
+    /* Shown at the bottom right corner */
+    bottom: 0,
+    position: absolute;
+    right: 0;
+    transform: translate(50%, 50%);
+
+    /* Rounded border */
+    border-radius: 9999px;
+    height: 16px;
+    width: 16px;
+
+    /* Background color */
+    background-color: #FF4136;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/progress-bar/Details.tsx

@@ -26,26 +26,8 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Colors */
+    <div class="container__progress" style="
-    background-color: rgba(0, 0, 0, .1);
-
-    /* Rounded border */
-    border-radius: 9999px;
-">
-    <div style="
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        /* Colors */
-        background-color: #357edd;
-        color: #fff;
-
-        /* Rounded border */
-        border-radius: 9999px;
-
         /* Width based on the number of percentages */
         width: 40%;
     ">
@@ -54,7 +36,29 @@ html={`
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Colors */
+    background-color: rgba(0, 0, 0, .1);
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+
+.container__progress {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Colors */
+    background-color: #357edd;
+    color: #fff;
+
+    /* Rounded border */
+    border-radius: 9999px;
+}
+`}
                 >
                     <div
                         style={{

client/patterns/radial-progress-bar/Details.tsx

@@ -81,90 +81,90 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    position: relative;
-">
     <!-- Show number of percentages -->
-    <div style="
+    <div class="container__percentages">
-        /* Center the content */
-        align-items: center;
-        display: flex;
-        justify-content: center;
-
-        /* Rounded border */
-        border: 12px solid rgba(0, 0, 0, 0.3);
-        border-radius: 9999px;
-
-        /* Size */
-        height: 128px;
-        width: 128px;
-    ">
         ...
     </div>
 
     <!-- The curve -->
-    <div style="
+    <div class="container__curve">
-        /* Position */
-        left: 0;
-        position: absolute;
-        top: 0;
-
-        /* Take full size */
-        height: 100%;
-        width: 100%;
-
-        /* If percentages is less than 50 */
-        clip: rect(0px, 128px, 128px, 64px);
-
-        /* If percentages is greater than or equals to 50 */
-        clip: rect(auto, auto, auto, auto);
-    ">
         <!-- The first half -->
-        <div style="
+        <div class="container__half container__half--first"></div>
-            /* Take full size */
-            height: 100%;
-            position: absolute;
-            width: 100%;
-
-            /*
-            Background color of curve.
-            The border width should be the same as the area showing the percentages
-            */
-            border: 12px solid rgb(0, 68, 158);
-            border-radius: 9999px;
-
-            /* Position */
-            clip: rect(0px, 64px, 128px, 0px);
-            transform: rotate(162deg); /* Number of percentages * 360 / 100 */
-        " />
 
         <!-- The second half -->
-        <div style="
+        <div class="container__half container__half--second"></div>
-            /* Take full size */
-            height: 100%;
-            position: absolute;
-            width: 100%;
-
-            /*
-            Background color of curve.
-            The border width should be the same as the area showing the percentages
-            */
-            border: 12px solid rgb(0, 68, 158);
-            border-radius: 9999px;
-
-            /* Position */
-            clip: rect(0px, 64px, 128px, 0px);
-
-            /* If percentages is less than 50 */
-            transform: rotate(0deg);
-
-            /* If percentages is greater than or equals to 50 */
-            transform: rotate(180deg);
-        " />
     </div>
 </div>
 `}
-css={``}
+css={`
+.container {
+    position: relative;
+}
+
+.container__percentages {
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Rounded border */
+    border: 12px solid rgba(0, 0, 0, 0.3);
+    border-radius: 9999px;
+
+    /* Size */
+    height: 128px;
+    width: 128px;
+}
+
+.container__curve {
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+
+    /* Take full size */
+    height: 100%;
+    width: 100%;
+
+    /* If percentages is less than 50 */
+    clip: rect(0px, 128px, 128px, 64px);
+
+    /* If percentages is greater than or equals to 50 */
+    clip: rect(auto, auto, auto, auto);
+}
+
+.container__half {
+    /* Take full size */
+    height: 100%;
+    position: absolute;
+    width: 100%;
+
+    /*
+    Background color of curve.
+    The border width should be the same as the area showing the percentages
+    */
+    border: 12px solid rgb(0, 68, 158);
+    border-radius: 9999px;
+}
+
+.container__half--first {    
+    /* Position */
+    clip: rect(0px, 64px, 128px, 0px);
+    transform: rotate(162deg); /* Number of percentages * 360 / 100 */
+}
+
+.container__half--second {
+    /* Position */
+    clip: rect(0px, 64px, 128px, 0px);
+
+    /* If percentages is less than 50 */
+    transform: rotate(0deg);
+
+    /* If percentages is greater than or equals to 50 */
+    transform: rotate(180deg);
+}
+`}
                 >
                     <div
                         style={{

client/patterns/resizable-element/Details.tsx

@@ -24,170 +24,134 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<div style="
+<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;
-">
+}
-    <!-- The content -->
-    ...
 
-    <!-- The top left square -->
+.container__resizer {
-    <div style="
+    /* Border */
-        /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
-        border: 1px solid rgba(0, 0, 0, 0.3);
+    position: absolute;
 
-        /* Resize cursor */
+    /* Size */
-        cursor: nwse-resize;
+    height: 12px;
+    width: 12px;
+}
 
-        /* Positioned at the top left corner */
+.container__resizer--tl {
-        left: 0px;
+    /* Resize cursor */
-        position: absolute;
+    cursor: nwse-resize;
-        top: 0px;
-        transform: translate(-50%, -50%);
 
-        /* Size */
+    /* Positioned at the top left corner */
-        height: 12px;
+    left: 0px;
-        width: 12px;
+    top: 0px;
-    "/>
+    transform: translate(-50%, -50%);
+}
 
-    <!-- The top square -->
+.container__resizer--tc {
-    <div style="
+    /* Resize cursor */
-        /* Border */
+    cursor: ns-resize;
-        border: 1px solid rgba(0, 0, 0, 0.3);
 
-        /* Resize cursor */
+    /* Positioned at the middle of top side */
-        cursor: ns-resize;
+    left: 50%;
+    top: 0px;
+    transform: translate(-50%, -50%);
+}
 
-        /* Positioned at the middle of top side */
+.container__resizer--tr {
-        left: 50%;
+    /* Resize cursor */
-        position: absolute;
+    cursor: nesw-resize;
-        top: 0px;
-        transform: translate(-50%, -50%);
 
-        /* Size */
+    /* Positioned at the top right corner */
-        height: 12px;
+    right: 0px;
-        width: 12px;
+    top: 0px;
-    "/>
+    transform: translate(50%, -50%);
+}
 
-    <!-- The top right square -->
+.container__resizer--rc {
-    <div style="
+    /* Resize cursor */
-        /* Border */
+    cursor: ew-resize;
-        border: 1px solid rgba(0, 0, 0, 0.3);
 
-        /* Resize cursor */
+    /* Positioned at the middle of right side */
-        cursor: nesw-resize;
+    right: 0px;
+    top: 50%;
+    transform: translate(50%, -50%);
+}
 
-        /* Positioned at the top right corner */
+.container__resizer--rb {
-        position: absolute;
+    /* Resize cursor */
-        right: 0px;
+    cursor: nwse-resize;
-        top: 0px;
-        transform: translate(50%, -50%);
 
-        /* Size */
+    /* Positioned at the right bottom corner */
-        height: 12px;
+    bottom: 0px;
-        width: 12px;
+    right: 0px;
-    "/>
+    transform: translate(50%, 50%);
+}
 
-    <!-- The right square -->
+.container__resizer--bc {
-    <div style="
+    /* Resize cursor */
-        /* Border */
+    cursor: ns-resize;
-        border: 1px solid rgba(0, 0, 0, 0.3);
 
-        /* Resize cursor */
+    /* Positioned at the middle of bottom side */
-        cursor: ew-resize;
+    bottom: 0px;
+    right: 50%;
+    transform: translate(50%, 50%);
+}
 
-        /* Positioned at the middle of right side */
+.container__resizer--bl {
-        position: absolute;
+    /* Resize cursor */
-        right: 0px;
+    cursor: nesw-resize;
-        top: 50%;
-        transform: translate(50%, -50%);
 
-        /* Size */
+    /* Positioned at the bottom left corner */
-        height: 12px;
+    bottom: 0px;
-        width: 12px;
+    left: 0px;
-    "/>
+    transform: translate(-50%, 50%);
+}
 
-    <!-- The right bottom square -->
+.container__resizer--lc {
-    <div style="
+    /* Resize cursor */
-        /* Border */
+    cursor: ew-resize;
-        border: 1px solid rgba(0, 0, 0, 0.3);
 
-        /* Resize cursor */
+    /* Positioned at the middle of left side */
-        cursor: nwse-resize;
+    left: 0px;
-
+    top: 50%;
-        /* Positioned at the right bottom corner */
+    transform: translate(-50%, -50%);
-        bottom: 0px;
+}
-        position: absolute;
-        right: 0px;
-        transform: translate(50%, 50%);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The bottom square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
-        /* Resize cursor */
-        cursor: ns-resize;
-
-        /* Positioned at the middle of bottom side */
-        bottom: 0px;
-        position: absolute;
-        right: 50%;
-        transform: translate(50%, 50%);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The bottom left square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
-        /* Resize cursor */
-        cursor: nesw-resize;
-
-        /* Positioned at the bottom left corner */
-        bottom: 0px;
-        left: 0px;
-        position: absolute;
-        transform: translate(-50%, 50%);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "/>
-
-    <!-- The left square -->
-    <div style="
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-
-        /* Resize cursor */
-        cursor: ew-resize;
-
-        /* Positioned at the middle of left side */
-        left: 0px;
-        position: absolute;
-        top: 50%;
-        transform: translate(-50%, -50%);
-
-        /* Size */
-        height: 12px;
-        width: 12px;
-    "/>
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/tooltip/Details.tsx

@@ -28,19 +28,32 @@ const Details: React.FC<{}> = () => {
                 </div>
                 <BrowserFrame
 html={`
-<style>
+<div class="container">
-.p-tooltip {
+    <!-- The tooltip content -->
+    <div class="container__content">
+        ...
+    </div>
+
+    <!-- The tooltip arrow -->
+    <div class="container__arrow" />
+
+    <!-- The trigger element -->
+    ...
+</div>
+`}
+css={`
+.container {
     /* Used to position the arrow */
     position: relative;
 }
 
 /* Show the arrow and content when hovering the trigger element */
-.p-tooltip:hover .p-tooltip-arrow,
+.container:hover .container__arrow,
-.p-tooltip:hover .p-tooltip-content {
+.container:hover .container__content {
     opacity: 1;
 }
 
-.p-tooltip-arrow {
+.container__arrow {
     /* Invisible by default */
     opacity: 0;
 
@@ -62,7 +75,7 @@ html={`
     z-index: 10;
 }
 
-.p-tooltip-content {
+.container__content {
     /* Invisible by default */
     opacity: 0;
 
@@ -79,22 +92,7 @@ html={`
     /* Displayed on top of other element */
     z-index: 10;
 }
-</style>
-
-<div class="p-tooltip">
-    <!-- The tooltip content -->
-    <div class="p-tooltip-content">
-        ...
-    </div>
-
-    <!-- The tooltip arrow -->
-    <div class="p-tooltip-arrow" />
-
-    <!-- The trigger element -->
-    ...
-</div>
 `}
-css={``}
                 >
                     <div
                         style={{

client/patterns/validation-icon/Details.tsx

@@ -20,39 +20,45 @@ const Details: React.FC<{}> = () => {
             <div className='p-8 pb-20'>
                 <BrowserFrame
 html={`
-<div style="
+<div class="container">
-    /* Used to position the validation icon */
-    position: relative;
-">
     <!-- The input -->
-    <input style="
+    <input class="container__input" />
-        /* Border */
-        border: 1px solid rgba(0, 0, 0, 0.3);
-        border-radius: 4px;
-
-        /* Take the full width */
-        width: 100%;
-
-        /* Don't overlap the icon */
-        padding-right: 24px;
-    " />
 
     <!-- The icon container -->
-    <i style="
+    <span class="container__icon">
-        /* Positioned at the right side */
-        position: absolute;
-        right: 8px;
-        top: 50%;
-        transform: translate(0, -50%);
-
-        z-index: 10;
-    ">
         <!-- The SVG icon represents any state such as valid, invalid, loading, etc. -->
         ...
-    </i>
+    </span>
 </div>
 `}
-css={``}
+css={`
+.container {
+    /* Used to position the validation icon */
+    position: relative;
+}
+
+.container__input {
+    /* Border */
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+
+    /* Take the full width */
+    width: 100%;
+
+    /* Don't overlap the icon */
+    padding-right: 24px;
+}
+
+.container__icon {
+    /* Positioned at the right side */
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translate(0, -50%);
+
+    z-index: 10;
+}
+`}
                 >
                     <div
                         style={{