Reorganize pattern pages

pages/chip/InputChip.tsx

@@ -0,0 +1,60 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+const InputChip: React.FC<{}> = ({ children }) => {
+    return (
+        <div
+            style={{
+                alignItems: 'center',
+                backgroundColor: 'rgba(0, 0, 0, 0.1)',
+                borderRadius: '9999px',
+                display: 'inline-flex',
+                justifyContent: 'center',
+                padding: '4px 8px',
+            }}
+        >
+            <div style={{ flex: 1, marginRight: '4px' }}>
+                {children}
+            </div>
+            <button
+                style={{
+                    backgroundColor: 'transparent',
+                    borderColor: 'transparent',
+                    cursor: 'pointer',
+                    height: '16px',
+                    position: 'relative',
+                    width: '16px',
+                }}
+            >
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '1px',
+                        left: 0,
+                        position: 'absolute',
+                        top: '50%',
+                        transform: 'translate(0%, -50%) rotate(45deg)',
+                        width: '100%',
+                    }}
+                />
+                <div
+                    style={{
+                        backgroundColor: 'rgba(0, 0, 0, 0.3)',
+                        height: '100%',
+                        left: '50%',
+                        position: 'absolute',
+                        top: 0,
+                        transform: 'translate(-50%, 0%) rotate(45deg)',
+                        width: '1px',
+                    }}
+                />
+            </button>
+        </div>
+    );
+};
+
+export default InputChip;

pages/concave-corners/concave-corners.css

@@ -0,0 +1,66 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --concave-corners-background: rgba(0, 0, 0, .3);
+    --concave-corners-size: 1rem;
+}
+
+.concave-corners {
+    background-color: var(--concave-corners-background);
+    
+    /* Used to position the corners */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.concave-corners__corner {
+    /* Absolute position */
+    position: absolute;
+
+    /* Size */
+    height: var(--concave-corners-size);    
+    width: var(--concave-corners-size);
+
+    background: #FFF;
+}
+
+.concave-corners__corner--tl {
+    /* Position */
+    left: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 var(--concave-corners-size) 0;
+}
+
+.concave-corners__corner--tr {
+    /* Position */ 
+    right: 0;
+    top: 0;
+
+    /* Border radius */
+    border-radius: 0 0 0 var(--concave-corners-size);
+}
+
+.concave-corners__corner--bl {
+    /* Position */
+    bottom: 0;
+    left: 0;
+
+    /* Border radius */
+    border-radius: 0 var(--concave-corners-size) 0 0;
+}
+
+.concave-corners__corner--br {
+    /* Position */
+    bottom: 0;
+    right: 0;
+
+    /* Border radius */
+    border-radius: var(--concave-corners-size) 0 0 0;
+}

pages/drop-cap/dropcap.css

@@ -0,0 +1,14 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-drop-cap:first-letter {
+    border: 2px solid rgba(0, 0, 0, 0.3);
+    float: left;
+    font-size: 64px;
+    font-weight: 700;
+    line-height: 1;
+    margin: 0 8px 0 0;
+    padding: 0 8px; 
+}

pages/dropdown/dropdown.css

@@ -0,0 +1,12 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-dropdown-content {
+    display: none;
+}
+
+.p-dropdown:hover .p-dropdown-content {
+    display: block;
+}

pages/floating-label/floating-label.css

@@ -0,0 +1,14 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-floating-container label {
+    opacity: 0;
+}
+
+.p-floating-container input:not(:placeholder-shown) + label {
+    background: #FFF;
+    transform: translate(0, -50%);
+    opacity: 1;
+}

pages/folder-structure/folder-structure.css

@@ -0,0 +1,54 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --folder-structure-item-height: 1rem;
+    --folder-structure-item-margin-left: 2rem;
+    --folder-structure-item-padding-top: 1rem;
+}
+
+.folder-structure ul {
+    /* Reset */
+    list-style-type: none;
+    margin: 0;
+}
+
+.folder-structure li {
+    padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
+    position: relative;
+}
+
+.folder-structure li::before {
+    border-left: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 0;
+    transform: translate(calc(-1 * var(--folder-structure-item-margin-left)), 0);
+
+    /* Size */
+    height: 100%;
+}
+
+.folder-structure li::after {
+    border-bottom: 1px solid rgba(0, 0, 0, .3);
+    content: '';
+
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+    transform: translate(-100%, 0);
+
+    /* Size */
+    width: var(--folder-structure-item-margin-left);
+}
+
+/* Remove the border from the last item */
+.folder-structure li:last-child::before {
+    height: calc(var(--folder-structure-item-padding-top) + var(--folder-structure-item-height) / 2);
+}

pages/inverted-corners/inverted-corners.css

@@ -0,0 +1,53 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --inverted-corners-background: #52525B;
+    --inverted-corners-size: 2rem;
+}
+
+.inverted-corners {
+    background-color: var(--inverted-corners-background);
+    
+    /* Used to position the corner */
+    position: relative;
+
+    /* Misc */
+    height: 100%;
+}
+
+.inverted-corners::before {
+    content: '';
+
+    /* Absolute position */
+    bottom: calc(-2 * var(--inverted-corners-size));
+    left: 0;
+    position: absolute;
+
+    /* Size */
+    height: calc(2 * var(--inverted-corners-size));
+    width: var(--inverted-corners-size);
+
+    /* Border */
+    background-color: transparent;
+    border-top-left-radius: var(--inverted-corners-size);
+    box-shadow: var(--inverted-corners-background) 0px calc(-1 * var(--inverted-corners-size)) 0px 0px;
+}
+
+/* Use case */
+.inverted-corners--speech {
+    /* Border radius */
+    border-bottom-right-radius: var(--inverted-corners-size);
+    border-top-left-radius: var(--inverted-corners-size);
+    border-top-right-radius: var(--inverted-corners-size);
+
+    /* Center the content */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Misc */
+    color: #FFF;
+}

pages/layered-card/styles.css

@@ -0,0 +1,26 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.layered-card {
+    position: relative;
+}
+
+.layered-card::before {
+    background: rgba(0, 0, 0, 0.3);
+    content: '';
+    
+    /* Position */
+    top: 0;
+    left: 0;
+    position: absolute;
+    transform: translate(1rem, 1rem);
+
+    /* Size */
+    height: 100%;
+    width: 100%;
+
+    /* Display under the main content */
+    z-index: -1;
+}

pages/masonry-grid/masonry-grid.css

@@ -0,0 +1,20 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.masonry-grid {
+    column-count: 3;
+    column-gap: 1rem;
+
+    /* Misc */
+    width: 100%;
+}
+
+.masonry-grid__item {
+    /* Prevent a column from breaking into multiple columns */
+    break-inside: avoid;
+
+    /* Misc */
+    margin-bottom: 1rem;
+}

pages/mega-menu/mega-menu.css

@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-mega-menu-container {
+    position: relative;
+}
+.p-mega-menu-content {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0px;
+    margin-top: -1px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    z-index: 9999;
+}
+.p-mega-menu-trigger:hover .p-mega-menu-content {
+    display: block;
+}

pages/menu/menu.css

@@ -0,0 +1,8 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-menu-item:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}

pages/nested-dropdowns/nested-dropdowns.css

@@ -0,0 +1,43 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-nested-dropdowns {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: flex;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.p-nested-dropdowns li {
+    padding: 8px;
+    position: relative;
+}
+
+.p-nested-dropdowns ul {
+    border: 1px solid rgba(0, 0, 0, 0.3);
+    display: none;
+    left: 0;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    position: absolute;
+    top: 100%;
+    width: 200px;
+}
+
+.p-nested-dropdowns ul ul {
+    left: 100%;
+    position: absolute;
+    top: 0;
+}
+
+.p-nested-dropdowns li:hover {
+    background-color: rgba(0, 0, 0, 0.1);
+}
+
+.p-nested-dropdowns li:hover > ul {
+    display: block;
+}

pages/price-tag/price-tag.css

@@ -0,0 +1,65 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+:root {
+    --price-tag-background: rgba(0, 0, 0, 0.3);
+    --price-tag-height: 2rem;
+}
+
+.price-tag {
+    background: var(--price-tag-background);
+    color: #FFF;
+
+    /* Center the price */
+    align-items: center;
+    display: flex;
+    justify-content: center;
+
+    /* Used to position the triangle */
+    position: relative;
+
+    /* Size */
+    height: var(--price-tag-height);
+
+    /* Spacing */
+    padding: 0.25rem 0.5rem;
+}
+
+/* The triangle */
+.price-tag::before {
+    content: '';
+
+    border-color: transparent var(--price-tag-background) transparent transparent;
+    border-style: solid;
+    border-width: calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  calc(var(--price-tag-height) / 2)
+                  0rem;
+    
+    /* Position */
+    left: 0px;
+    position: absolute;
+    top: 0px;
+    transform: translate(-100%, 0px);
+}
+
+/* The dot */
+.price-tag::after {
+    content: '';
+
+    /* Make it like a cirle */ 
+    background: #FFF;
+    border-radius: 9999rem;
+    
+    /* Position */
+    left: 0;
+    position: absolute;
+    top: 50%;
+    transform: translate(-0.5rem, -50%);
+
+    /* Size */
+    height: 0.5rem;
+    width: 0.5rem;
+}

pages/radio-button-group/radio-button-group.css

@@ -0,0 +1,11 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-radio-button-group label {
+    border-right: 1px solid rgba(0, 0, 0, 0.3);
+}
+.p-radio-button-group label:last-child {
+    border-right-color: transparent;
+}

pages/rating/Star.tsx

@@ -0,0 +1,22 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+import * as React from 'react';
+
+import './star.css';
+
+interface StarProps {
+    isActive: boolean;
+}
+
+const Star: React.FC<StarProps> = ({ isActive }) => {
+    return (
+        <button className="p-rating-star">
+            {isActive ? '★' : '☆'}
+        </button>
+    );
+};
+
+export default Star;

pages/rating/star.css

@@ -0,0 +1,33 @@
+/**
+ * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
+ * (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
+ */
+
+.p-rating {
+    align-items: center;
+    display: flex;
+    font-size: 32px;
+    justify-content: center;
+    flex-direction: row-reverse;
+}
+
+.p-rating .p-rating-star:hover,
+.p-rating .p-rating-star:hover ~ .p-rating-star {
+    color: transparent;
+}
+
+.p-rating .p-rating-star:hover:before,
+.p-rating .p-rating-star:hover ~ .p-rating-star:before {
+    color: #00449e;
+    content: '\2605';
+    left: 0;
+    position: absolute;
+}
+
+.p-rating-star {
+    background-color: transparent;
+    border: transparent;
+    margin: 0 2px;
+    padding: 0;
+    position: relative;
+}