Merge pull request #44 from phuoc-ng/docked-corner

Docked corner

client/App.jsx

@@ -16,6 +16,7 @@ const App = () => {
                 <Route exact={true} path='/button-with-icon'><DetailsLoader pattern="Button with icon" /></Route>
                 <Route exact={true} path='/card'><DetailsLoader pattern="Card" /></Route>
                 <Route exact={true} path='/centering'><DetailsLoader pattern="Centering" /></Route>
+                <Route exact={true} path='/docked-at-corner'><DetailsLoader pattern="Docked at corner" /></Route>
                 <Route exact={true} path='/dot-navigation'><DetailsLoader pattern="Dot navigation" /></Route>
                 <Route exact={true} path='/feature-list'><DetailsLoader pattern="Feature list" /></Route>
                 <Route exact={true} path='/fixed-at-corner'><DetailsLoader pattern="Fixed at corner" /></Route>

client/CoverCard.jsx

@@ -12,7 +12,7 @@ const CoverCard = ({ pattern }) => {
                 className="link flex flex-column items-center justify-center tc hover-bg-black-10 br2 pa3"
             >
                 <CoverLoader pattern={pattern} />
-                <h4 className="f5 mv0 pt3">{pattern}</h4>
+                <h4 className="f5 mv0 pt3 fw6">{pattern}</h4>
             </Link>
         </div>
     );

client/Home.jsx

@@ -29,6 +29,10 @@ const Home = () => {
                                 <div>No CSS hacks</div>
                                 <div>🎉</div>
                             </li>
+                            <li className="flex items-center justify-between">
+                                <div>Real use cases</div>
+                                <div>🎉</div>
+                            </li>
                             <li className="flex items-center justify-between">
                                 <div>Good practices</div>
                                 <div className="br-pill ph2 white bg-dark-blue f6">soon</div>
@@ -62,6 +66,7 @@ const Home = () => {
                         <CoverCard pattern="Button with icon" />
                         <CoverCard pattern="Card" />
                         <CoverCard pattern="Centering" />
+                        <CoverCard pattern="Docked at corner" />
                         <CoverCard pattern="Dot navigation" />
                         <CoverCard pattern="Feature list" />
                         <CoverCard pattern="Fixed at corner" />

client/layouts/DetailsLayout.jsx

@@ -15,10 +15,8 @@ const DetailsLayout = ({ title, children }) => {
             <div className="bt br bl b--black-20 relative br4 br--top">
                 <h1 className="absolute bg-white f2 fw6 left-2 lh-copy ma0 ph2 top-0" style={{ left: '50%', transform: 'translate(-50%, -50%)' }}>{title}</h1>
 
-                <div className="pa5">
                 {children}
             </div>
-            </div>
         </Layout>
     );
 };

client/patterns/badge/Details.jsx

@@ -7,6 +7,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Badge">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -40,6 +41,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/breadcrumb/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Breadcrumb">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -44,6 +45,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/button-with-icon/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Button with icon">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -41,6 +42,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/card/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Card">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -52,6 +53,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/centering/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Centering">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -33,6 +34,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/docked-at-corner/Cover.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import Frame from '../../placeholders/Frame';
+
+const Cover = () => {
+    return (
+        <Frame>
+            <div className="h-100 flex flex-column items-center justify-center">
+                <div className="w2 h2 relative ba b--black-30 br2">
+                    <div
+                        className="absolute top-0 right-0 br-pill bg-dark-blue"
+                        style={{ height: '16px', transform: 'translate(50%, -50%)', width: '16px' }}
+                    />
+                </div>
+            </div>
+        </Frame>
+    );
+};
+
+export default Cover;

client/patterns/docked-at-corner/Details.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+
+import DetailsLayout from '../../layouts/DetailsLayout';
+import BrowserFrame from '../../placeholders/BrowserFrame';
+import Rectangle from '../../placeholders/Rectangle';
+import SampleCode from '../../SampleCode';
+
+const Details = () => {
+    return (
+        <DetailsLayout title="Docked at corner">
+            <div className="ph4 pv5">
+                <BrowserFrame
+                    content={
+                        <div className="h-100 flex flex-column items-center justify-center">
+                            <div className="w4 pa3 relative ba b--black-30 br2">
+                                <Rectangle />
+                                <div
+                                    className="absolute top-0 right-0 br-pill bg-dark-blue h2 w2"
+                                    style={{ transform: 'translate(50%, -50%)' }}
+                                />
+                            </div>
+                        </div>
+                    }
+                    source={
+<SampleCode
+lang="html"
+code={`
+<div style="
+    position: relative;
+">
+    <!-- Docked at the top right corner -->
+    <div style="
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(50%, -50%);
+
+        /* Content is centered */
+        align-items: center;
+        display: flex;
+        justify-content: center;
+    ">
+        ...
+    </div>
+
+    ...
+</div>
+`}
+/>
+                    }
+                />
+            </div>
+            <div className="bt b--black-20 relative">
+                <h3 className="absolute bg-white f4 left-2 lh-copy ma0 ph2 top-0" style={{ transform: 'translate(0px, -50%)' }}>Use cases</h3>
+
+                <div className="pa4">
+                    <div className="mb4 w4 pa2 relative ba b--black-30 br2">
+                        Inbox
+                        <div
+                            className="absolute top-0 right-0 br-pill bg-blue white pa1 flex items-center justify-center"
+                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                        >
+                            5
+                        </div>
+                    </div>
+                    <div className="w-40 h4 pa3 relative ba b--black-30 br2">
+                        Modal
+                        <div
+                            className="absolute top-0 right-0 br-pill bg-red white pa1 flex items-center justify-center"
+                            style={{ height: '24px', transform: 'translate(50%, -50%)', width: '24px' }}
+                        >
+                            &times;
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </DetailsLayout>
+    );
+};
+
+export default Details;

client/patterns/dot-navigation/Details.jsx

@@ -24,6 +24,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Dot navigation">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/feature-list/Details.jsx

@@ -11,6 +11,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Feature list">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="flex h-100 items-center justify-center">
@@ -68,6 +69,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/fixed-at-corner/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Fixed at corner">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="relative h-100">
@@ -72,6 +73,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/holy-grail/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Holy grail">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column">
@@ -76,6 +77,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/input-add-on/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Input add-on">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -125,6 +126,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/media-object/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Media object">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex items-start pa3">
@@ -56,6 +57,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/menu/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Menu">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -112,6 +113,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/modal/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Modal">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/notification/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Notification">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -38,6 +39,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/pagination/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Pagination">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -75,6 +76,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/previous-next-buttons/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -44,6 +45,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/pricing-table/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Pricing table">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex items-center justify-center pa3">
@@ -89,6 +90,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/progress-bar/Details.jsx

@@ -13,6 +13,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Progress bar">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -58,6 +59,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/questions-and-answers/Details.jsx

@@ -29,6 +29,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Questions and answers">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -87,6 +88,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/same-height-columns/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Same height columns">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center pa3">
@@ -82,6 +83,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/search-box/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Search box">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -58,6 +59,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/separator/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Separator">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -56,6 +57,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sidebar/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sidebar">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content!</div>
                 <BrowserFrame
                     content={
@@ -47,6 +48,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/simple-grid/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Simple grid">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -114,6 +115,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/slider/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Slider">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -68,6 +69,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/split-navigation/Details.jsx

@@ -8,6 +8,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Split navigation">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -49,6 +50,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/split-screen/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Split screen">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex">
@@ -45,6 +46,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/stepper-input/Details.jsx

@@ -13,6 +13,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Stepper input">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">
                     The content of minus and plus buttons are centered by using the technique in the <Link to="/centering" className="link">Centering</Link> page.
                 </div>
@@ -77,6 +78,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sticky-footer/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sticky footer">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">
                     The footer always sticks to the bottom if the main content is short.
                 </div>
@@ -49,6 +50,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/sticky-header/Details.jsx

@@ -9,6 +9,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Sticky header">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">Try to scroll the main content to see the header sticks to the top of page.</div>
                 <BrowserFrame
                     content={
@@ -42,6 +43,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/switch/Details.jsx

@@ -10,6 +10,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Switch">
+            <div className="ph4 pv5">
                 <div className="lh-copy mb3">The checkbox is placed inside a label. So when clicking on the label, the checkbox will be checked even though it's hidden.</div>
                 <BrowserFrame
                     content={
@@ -65,6 +66,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/tab/Details.jsx

@@ -26,6 +26,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Tab">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -84,6 +85,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/toggle-password-visibility/Details.jsx

@@ -10,6 +10,7 @@ const Details = () => {
 
     return (
         <DetailsLayout title="Toggle password visibility">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -71,6 +72,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/patterns/wizard/Details.jsx

@@ -10,6 +10,7 @@ import SampleCode from '../../SampleCode';
 const Details = () => {
     return (
         <DetailsLayout title="Wizard">
+            <div className="ph4 pv5">
                 <BrowserFrame
                     content={
                         <div className="h-100 flex flex-column items-center justify-center">
@@ -112,6 +113,7 @@ code={`
 />
                     }
                 />
+            </div>
         </DetailsLayout>
     );
 };

client/placeholders/BrowserFrame.jsx

@@ -27,7 +27,7 @@ const BrowserFrame = ({ content, source }) => {
                 }}
             >
                 <div
-                    className="overflow-scroll absolute top-0 left-0 h-100 w-100"
+                    className={`overflow-scroll absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-1' : 'o-0'}`}
                     style={{
                         backfaceVisibility: 'hidden',
                         WebkitBackfaceVisibility: 'hidden',
@@ -35,7 +35,7 @@ const BrowserFrame = ({ content, source }) => {
                     {content}
                 </div>
                 <div
-                    className="absolute top-0 left-0 h-100 w-100"
+                    className={`absolute top-0 left-0 h-100 w-100 ${isContentActive ? 'o-0' : 'o-1'}`}
                     style={{
                         backfaceVisibility: 'hidden',
                         transform: 'rotateY(180deg)',

sitemap.xml

@@ -9,6 +9,7 @@
     <url><loc>https://csslayout.io/button-with-icon</loc></url>
     <url><loc>https://csslayout.io/card</loc></url>
     <url><loc>https://csslayout.io/centering</loc></url>
+    <url><loc>https://csslayout.io/docked-at-corner</loc></url>
     <url><loc>https://csslayout.io/dot-navigation</loc></url>
     <url><loc>https://csslayout.io/feature-list</loc></url>
     <url><loc>https://csslayout.io/fixed-at-corner</loc></url>
@@ -21,6 +22,7 @@
     <url><loc>https://csslayout.io/previous-next-buttons</loc></url>
     <url><loc>https://csslayout.io/pricing-table</loc></url>
     <url><loc>https://csslayout.io/progress-bar</loc></url>
+    <url><loc>https://csslayout.io/questions-and-answers</loc></url>
     <url><loc>https://csslayout.io/same-height-columns</loc></url>
     <url><loc>https://csslayout.io/search-box</loc></url>
     <url><loc>https://csslayout.io/separator</loc></url>