From 2477c19f11fac61782e82dee017c051975cdbd78 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 27 Sep 2021 21:44:55 +0700 Subject: [PATCH] Reorganize pattern pages --- .../Details.tsx => pages/accordion/index.tsx | 0 .../arrow-buttons/index.tsx | 0 .../avatar-list/index.tsx | 0 .../Details.tsx => pages/avatar/index.tsx | 0 .../Details.tsx => pages/badge/index.tsx | 0 .../Details.tsx => pages/breadcrumb/index.tsx | 0 .../button-with-icon/index.tsx | 0 .../card-layout/index.tsx | 0 .../card/Details.tsx => pages/card/index.tsx | 0 .../Details.tsx => pages/centering/index.tsx | 0 pages/chip/InputChip.tsx | 60 +++++++++++++++++ .../chip/Details.tsx => pages/chip/index.tsx | 0 .../circular-navigation/index.tsx | 0 .../close-button/index.tsx | 0 .../color-swatch/index.tsx | 0 pages/concave-corners/concave-corners.css | 66 ++++++++++++++++++ .../concave-corners/index.tsx | 0 .../cookie-banner/index.tsx | 0 .../corner-ribbon/index.tsx | 0 .../curved-background/index.tsx | 0 .../custom-checkbox-button/index.tsx | 0 .../custom-radio-button/index.tsx | 0 .../diagonal-section/index.tsx | 0 .../docked-at-corner/index.tsx | 0 .../Details.tsx => pages/dot-leader/index.tsx | 0 .../dot-navigation/index.tsx | 0 .../Details.tsx => pages/drawer/index.tsx | 0 .../Details.tsx => pages/drop-area/index.tsx | 0 pages/drop-cap/dropcap.css | 14 ++++ .../Details.tsx => pages/drop-cap/index.tsx | 0 pages/dropdown/dropdown.css | 12 ++++ .../Details.tsx => pages/dropdown/index.tsx | 0 .../fading-long-section/index.tsx | 0 .../feature-comparison/index.tsx | 0 .../feature-list/index.tsx | 0 .../fixed-at-corner/index.tsx | 0 .../fixed-at-side/index.tsx | 0 pages/floating-label/floating-label.css | 14 ++++ .../floating-label/index.tsx | 0 pages/folder-structure/folder-structure.css | 54 +++++++++++++++ .../folder-structure/index.tsx | 0 .../full-background/index.tsx | 0 .../full-screen-menu/index.tsx | 0 .../Details.tsx => pages/holy-grail/index.tsx | 0 .../initial-avatar/index.tsx | 0 .../input-addon/index.tsx | 0 .../inverted-corners/index.tsx | 0 pages/inverted-corners/inverted-corners.css | 53 +++++++++++++++ .../keyboard-shortcut/index.tsx | 0 .../layered-card/index.tsx | 0 pages/layered-card/styles.css | 26 +++++++ .../lined-paper/index.tsx | 0 .../masonry-grid/index.tsx | 0 pages/masonry-grid/masonry-grid.css | 20 ++++++ .../media-object/index.tsx | 0 .../Details.tsx => pages/mega-menu/index.tsx | 0 pages/mega-menu/mega-menu.css | 22 ++++++ .../menu/Details.tsx => pages/menu/index.tsx | 0 pages/menu/menu.css | 8 +++ .../Details.tsx => pages/modal/index.tsx | 0 .../nested-dropdowns/index.tsx | 0 pages/nested-dropdowns/nested-dropdowns.css | 43 ++++++++++++ .../notification/index.tsx | 0 .../overlay-play-button/index.tsx | 0 .../Details.tsx => pages/pagination/index.tsx | 0 .../popover-arrow/index.tsx | 0 .../presence-indicator/index.tsx | 0 .../previous-next-buttons/index.tsx | 0 .../Details.tsx => pages/price-tag/index.tsx | 0 pages/price-tag/price-tag.css | 65 ++++++++++++++++++ .../pricing-table/index.tsx | 0 .../progress-bar/index.tsx | 0 .../property-list/index.tsx | 0 .../questions-and-answers/index.tsx | 0 .../radial-progress-bar/index.tsx | 0 .../radio-button-group/index.tsx | 0 .../radio-button-group/radio-button-group.css | 11 +++ .../radio-switch/index.tsx | 0 pages/rating/Star.tsx | 22 ++++++ .../Details.tsx => pages/rating/index.tsx | 0 pages/rating/star.css | 33 +++++++++ .../resizable-element/index.tsx | 0 .../Details.tsx => pages/ribbon/index.tsx | 0 .../same-height-columns/index.tsx | 0 .../Details.tsx => pages/search-box/index.tsx | 0 .../Details.tsx => pages/separator/index.tsx | 0 .../Details.tsx => pages/sidebar/index.tsx | 0 .../simple-grid/index.tsx | 0 .../Details.tsx => pages/slider/index.tsx | 0 .../spin-button/index.tsx | 0 .../split-navigation/index.tsx | 0 .../split-screen/index.tsx | 0 .../stacked-cards/index.tsx | 0 .../stamp-border/index.tsx | 0 .../Details.tsx => pages/statistic/index.tsx | 0 .../status-light/index.tsx | 0 .../stepper-input/index.tsx | 0 .../sticky-footer/index.tsx | 0 .../sticky-header/index.tsx | 0 .../sticky-sections/index.tsx | 0 .../sticky-table-column/index.tsx | 0 .../sticky-table-headers/index.tsx | 0 .../Details.tsx => pages/switch/index.tsx | 0 .../tab/Details.tsx => pages/tab/index.tsx | 0 .../Details.tsx => pages/teardrop/index.tsx | 0 .../three-dimensions-card/index.tsx | 0 pages/three-dimensions-card/styles.css | 46 +++++++++++++ .../Details.tsx => pages/timeline/index.tsx | 0 .../toggle-password-visibility/index.tsx | 0 .../Details.tsx => pages/tooltip/index.tsx | 0 pages/tooltip/tooltip.css | 37 ++++++++++ .../tree-diagram/index.tsx | 0 pages/tree-diagram/tree-diagram.css | 67 +++++++++++++++++++ .../triangle-buttons/index.tsx | 0 .../upload-button/index.tsx | 0 .../validation-icon/index.tsx | 0 .../video-background/index.tsx | 0 .../Details.tsx => pages/voting/index.tsx | 0 .../Details.tsx => pages/watermark/index.tsx | 0 .../Details.tsx => pages/wizard/index.tsx | 0 .../zigzag-timeline/index.tsx | 0 pages/zigzag-timeline/zigzag-timeline.css | 48 +++++++++++++ 122 files changed, 721 insertions(+) rename patterns/accordion/Details.tsx => pages/accordion/index.tsx (100%) rename patterns/arrow-buttons/Details.tsx => pages/arrow-buttons/index.tsx (100%) rename patterns/avatar-list/Details.tsx => pages/avatar-list/index.tsx (100%) rename patterns/avatar/Details.tsx => pages/avatar/index.tsx (100%) rename patterns/badge/Details.tsx => pages/badge/index.tsx (100%) rename patterns/breadcrumb/Details.tsx => pages/breadcrumb/index.tsx (100%) rename patterns/button-with-icon/Details.tsx => pages/button-with-icon/index.tsx (100%) rename patterns/card-layout/Details.tsx => pages/card-layout/index.tsx (100%) rename patterns/card/Details.tsx => pages/card/index.tsx (100%) rename patterns/centering/Details.tsx => pages/centering/index.tsx (100%) create mode 100644 pages/chip/InputChip.tsx rename patterns/chip/Details.tsx => pages/chip/index.tsx (100%) rename patterns/circular-navigation/Details.tsx => pages/circular-navigation/index.tsx (100%) rename patterns/close-button/Details.tsx => pages/close-button/index.tsx (100%) rename patterns/color-swatch/Details.tsx => pages/color-swatch/index.tsx (100%) create mode 100644 pages/concave-corners/concave-corners.css rename patterns/concave-corners/Details.tsx => pages/concave-corners/index.tsx (100%) rename patterns/cookie-banner/Details.tsx => pages/cookie-banner/index.tsx (100%) rename patterns/corner-ribbon/Details.tsx => pages/corner-ribbon/index.tsx (100%) rename patterns/curved-background/Details.tsx => pages/curved-background/index.tsx (100%) rename patterns/custom-checkbox-button/Details.tsx => pages/custom-checkbox-button/index.tsx (100%) rename patterns/custom-radio-button/Details.tsx => pages/custom-radio-button/index.tsx (100%) rename patterns/diagonal-section/Details.tsx => pages/diagonal-section/index.tsx (100%) rename patterns/docked-at-corner/Details.tsx => pages/docked-at-corner/index.tsx (100%) rename patterns/dot-leader/Details.tsx => pages/dot-leader/index.tsx (100%) rename patterns/dot-navigation/Details.tsx => pages/dot-navigation/index.tsx (100%) rename patterns/drawer/Details.tsx => pages/drawer/index.tsx (100%) rename patterns/drop-area/Details.tsx => pages/drop-area/index.tsx (100%) create mode 100644 pages/drop-cap/dropcap.css rename patterns/drop-cap/Details.tsx => pages/drop-cap/index.tsx (100%) create mode 100644 pages/dropdown/dropdown.css rename patterns/dropdown/Details.tsx => pages/dropdown/index.tsx (100%) rename patterns/fading-long-section/Details.tsx => pages/fading-long-section/index.tsx (100%) rename patterns/feature-comparison/Details.tsx => pages/feature-comparison/index.tsx (100%) rename patterns/feature-list/Details.tsx => pages/feature-list/index.tsx (100%) rename patterns/fixed-at-corner/Details.tsx => pages/fixed-at-corner/index.tsx (100%) rename patterns/fixed-at-side/Details.tsx => pages/fixed-at-side/index.tsx (100%) create mode 100644 pages/floating-label/floating-label.css rename patterns/floating-label/Details.tsx => pages/floating-label/index.tsx (100%) create mode 100644 pages/folder-structure/folder-structure.css rename patterns/folder-structure/Details.tsx => pages/folder-structure/index.tsx (100%) rename patterns/full-background/Details.tsx => pages/full-background/index.tsx (100%) rename patterns/full-screen-menu/Details.tsx => pages/full-screen-menu/index.tsx (100%) rename patterns/holy-grail/Details.tsx => pages/holy-grail/index.tsx (100%) rename patterns/initial-avatar/Details.tsx => pages/initial-avatar/index.tsx (100%) rename patterns/input-addon/Details.tsx => pages/input-addon/index.tsx (100%) rename patterns/inverted-corners/Details.tsx => pages/inverted-corners/index.tsx (100%) create mode 100644 pages/inverted-corners/inverted-corners.css rename patterns/keyboard-shortcut/Details.tsx => pages/keyboard-shortcut/index.tsx (100%) rename patterns/layered-card/Details.tsx => pages/layered-card/index.tsx (100%) create mode 100644 pages/layered-card/styles.css rename patterns/lined-paper/Details.tsx => pages/lined-paper/index.tsx (100%) rename patterns/masonry-grid/Details.tsx => pages/masonry-grid/index.tsx (100%) create mode 100644 pages/masonry-grid/masonry-grid.css rename patterns/media-object/Details.tsx => pages/media-object/index.tsx (100%) rename patterns/mega-menu/Details.tsx => pages/mega-menu/index.tsx (100%) create mode 100644 pages/mega-menu/mega-menu.css rename patterns/menu/Details.tsx => pages/menu/index.tsx (100%) create mode 100644 pages/menu/menu.css rename patterns/modal/Details.tsx => pages/modal/index.tsx (100%) rename patterns/nested-dropdowns/Details.tsx => pages/nested-dropdowns/index.tsx (100%) create mode 100644 pages/nested-dropdowns/nested-dropdowns.css rename patterns/notification/Details.tsx => pages/notification/index.tsx (100%) rename patterns/overlay-play-button/Details.tsx => pages/overlay-play-button/index.tsx (100%) rename patterns/pagination/Details.tsx => pages/pagination/index.tsx (100%) rename patterns/popover-arrow/Details.tsx => pages/popover-arrow/index.tsx (100%) rename patterns/presence-indicator/Details.tsx => pages/presence-indicator/index.tsx (100%) rename patterns/previous-next-buttons/Details.tsx => pages/previous-next-buttons/index.tsx (100%) rename patterns/price-tag/Details.tsx => pages/price-tag/index.tsx (100%) create mode 100644 pages/price-tag/price-tag.css rename patterns/pricing-table/Details.tsx => pages/pricing-table/index.tsx (100%) rename patterns/progress-bar/Details.tsx => pages/progress-bar/index.tsx (100%) rename patterns/property-list/Details.tsx => pages/property-list/index.tsx (100%) rename patterns/questions-and-answers/Details.tsx => pages/questions-and-answers/index.tsx (100%) rename patterns/radial-progress-bar/Details.tsx => pages/radial-progress-bar/index.tsx (100%) rename patterns/radio-button-group/Details.tsx => pages/radio-button-group/index.tsx (100%) create mode 100644 pages/radio-button-group/radio-button-group.css rename patterns/radio-switch/Details.tsx => pages/radio-switch/index.tsx (100%) create mode 100644 pages/rating/Star.tsx rename patterns/rating/Details.tsx => pages/rating/index.tsx (100%) create mode 100644 pages/rating/star.css rename patterns/resizable-element/Details.tsx => pages/resizable-element/index.tsx (100%) rename patterns/ribbon/Details.tsx => pages/ribbon/index.tsx (100%) rename patterns/same-height-columns/Details.tsx => pages/same-height-columns/index.tsx (100%) rename patterns/search-box/Details.tsx => pages/search-box/index.tsx (100%) rename patterns/separator/Details.tsx => pages/separator/index.tsx (100%) rename patterns/sidebar/Details.tsx => pages/sidebar/index.tsx (100%) rename patterns/simple-grid/Details.tsx => pages/simple-grid/index.tsx (100%) rename patterns/slider/Details.tsx => pages/slider/index.tsx (100%) rename patterns/spin-button/Details.tsx => pages/spin-button/index.tsx (100%) rename patterns/split-navigation/Details.tsx => pages/split-navigation/index.tsx (100%) rename patterns/split-screen/Details.tsx => pages/split-screen/index.tsx (100%) rename patterns/stacked-cards/Details.tsx => pages/stacked-cards/index.tsx (100%) rename patterns/stamp-border/Details.tsx => pages/stamp-border/index.tsx (100%) rename patterns/statistic/Details.tsx => pages/statistic/index.tsx (100%) rename patterns/status-light/Details.tsx => pages/status-light/index.tsx (100%) rename patterns/stepper-input/Details.tsx => pages/stepper-input/index.tsx (100%) rename patterns/sticky-footer/Details.tsx => pages/sticky-footer/index.tsx (100%) rename patterns/sticky-header/Details.tsx => pages/sticky-header/index.tsx (100%) rename patterns/sticky-sections/Details.tsx => pages/sticky-sections/index.tsx (100%) rename patterns/sticky-table-column/Details.tsx => pages/sticky-table-column/index.tsx (100%) rename patterns/sticky-table-headers/Details.tsx => pages/sticky-table-headers/index.tsx (100%) rename patterns/switch/Details.tsx => pages/switch/index.tsx (100%) rename patterns/tab/Details.tsx => pages/tab/index.tsx (100%) rename patterns/teardrop/Details.tsx => pages/teardrop/index.tsx (100%) rename patterns/three-dimensions-card/Details.tsx => pages/three-dimensions-card/index.tsx (100%) create mode 100644 pages/three-dimensions-card/styles.css rename patterns/timeline/Details.tsx => pages/timeline/index.tsx (100%) rename patterns/toggle-password-visibility/Details.tsx => pages/toggle-password-visibility/index.tsx (100%) rename patterns/tooltip/Details.tsx => pages/tooltip/index.tsx (100%) create mode 100644 pages/tooltip/tooltip.css rename patterns/tree-diagram/Details.tsx => pages/tree-diagram/index.tsx (100%) create mode 100644 pages/tree-diagram/tree-diagram.css rename patterns/triangle-buttons/Details.tsx => pages/triangle-buttons/index.tsx (100%) rename patterns/upload-button/Details.tsx => pages/upload-button/index.tsx (100%) rename patterns/validation-icon/Details.tsx => pages/validation-icon/index.tsx (100%) rename patterns/video-background/Details.tsx => pages/video-background/index.tsx (100%) rename patterns/voting/Details.tsx => pages/voting/index.tsx (100%) rename patterns/watermark/Details.tsx => pages/watermark/index.tsx (100%) rename patterns/wizard/Details.tsx => pages/wizard/index.tsx (100%) rename patterns/zigzag-timeline/Details.tsx => pages/zigzag-timeline/index.tsx (100%) create mode 100644 pages/zigzag-timeline/zigzag-timeline.css diff --git a/patterns/accordion/Details.tsx b/pages/accordion/index.tsx similarity index 100% rename from patterns/accordion/Details.tsx rename to pages/accordion/index.tsx diff --git a/patterns/arrow-buttons/Details.tsx b/pages/arrow-buttons/index.tsx similarity index 100% rename from patterns/arrow-buttons/Details.tsx rename to pages/arrow-buttons/index.tsx diff --git a/patterns/avatar-list/Details.tsx b/pages/avatar-list/index.tsx similarity index 100% rename from patterns/avatar-list/Details.tsx rename to pages/avatar-list/index.tsx diff --git a/patterns/avatar/Details.tsx b/pages/avatar/index.tsx similarity index 100% rename from patterns/avatar/Details.tsx rename to pages/avatar/index.tsx diff --git a/patterns/badge/Details.tsx b/pages/badge/index.tsx similarity index 100% rename from patterns/badge/Details.tsx rename to pages/badge/index.tsx diff --git a/patterns/breadcrumb/Details.tsx b/pages/breadcrumb/index.tsx similarity index 100% rename from patterns/breadcrumb/Details.tsx rename to pages/breadcrumb/index.tsx diff --git a/patterns/button-with-icon/Details.tsx b/pages/button-with-icon/index.tsx similarity index 100% rename from patterns/button-with-icon/Details.tsx rename to pages/button-with-icon/index.tsx diff --git a/patterns/card-layout/Details.tsx b/pages/card-layout/index.tsx similarity index 100% rename from patterns/card-layout/Details.tsx rename to pages/card-layout/index.tsx diff --git a/patterns/card/Details.tsx b/pages/card/index.tsx similarity index 100% rename from patterns/card/Details.tsx rename to pages/card/index.tsx diff --git a/patterns/centering/Details.tsx b/pages/centering/index.tsx similarity index 100% rename from patterns/centering/Details.tsx rename to pages/centering/index.tsx diff --git a/pages/chip/InputChip.tsx b/pages/chip/InputChip.tsx new file mode 100644 index 0000000..ea8748d --- /dev/null +++ b/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 + */ + +import * as React from 'react'; + +const InputChip: React.FC<{}> = ({ children }) => { + return ( +
+
+ {children} +
+ +
+ ); +}; + +export default InputChip; diff --git a/patterns/chip/Details.tsx b/pages/chip/index.tsx similarity index 100% rename from patterns/chip/Details.tsx rename to pages/chip/index.tsx diff --git a/patterns/circular-navigation/Details.tsx b/pages/circular-navigation/index.tsx similarity index 100% rename from patterns/circular-navigation/Details.tsx rename to pages/circular-navigation/index.tsx diff --git a/patterns/close-button/Details.tsx b/pages/close-button/index.tsx similarity index 100% rename from patterns/close-button/Details.tsx rename to pages/close-button/index.tsx diff --git a/patterns/color-swatch/Details.tsx b/pages/color-swatch/index.tsx similarity index 100% rename from patterns/color-swatch/Details.tsx rename to pages/color-swatch/index.tsx diff --git a/pages/concave-corners/concave-corners.css b/pages/concave-corners/concave-corners.css new file mode 100644 index 0000000..c7155ae --- /dev/null +++ b/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 + */ + +: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; +} \ No newline at end of file diff --git a/patterns/concave-corners/Details.tsx b/pages/concave-corners/index.tsx similarity index 100% rename from patterns/concave-corners/Details.tsx rename to pages/concave-corners/index.tsx diff --git a/patterns/cookie-banner/Details.tsx b/pages/cookie-banner/index.tsx similarity index 100% rename from patterns/cookie-banner/Details.tsx rename to pages/cookie-banner/index.tsx diff --git a/patterns/corner-ribbon/Details.tsx b/pages/corner-ribbon/index.tsx similarity index 100% rename from patterns/corner-ribbon/Details.tsx rename to pages/corner-ribbon/index.tsx diff --git a/patterns/curved-background/Details.tsx b/pages/curved-background/index.tsx similarity index 100% rename from patterns/curved-background/Details.tsx rename to pages/curved-background/index.tsx diff --git a/patterns/custom-checkbox-button/Details.tsx b/pages/custom-checkbox-button/index.tsx similarity index 100% rename from patterns/custom-checkbox-button/Details.tsx rename to pages/custom-checkbox-button/index.tsx diff --git a/patterns/custom-radio-button/Details.tsx b/pages/custom-radio-button/index.tsx similarity index 100% rename from patterns/custom-radio-button/Details.tsx rename to pages/custom-radio-button/index.tsx diff --git a/patterns/diagonal-section/Details.tsx b/pages/diagonal-section/index.tsx similarity index 100% rename from patterns/diagonal-section/Details.tsx rename to pages/diagonal-section/index.tsx diff --git a/patterns/docked-at-corner/Details.tsx b/pages/docked-at-corner/index.tsx similarity index 100% rename from patterns/docked-at-corner/Details.tsx rename to pages/docked-at-corner/index.tsx diff --git a/patterns/dot-leader/Details.tsx b/pages/dot-leader/index.tsx similarity index 100% rename from patterns/dot-leader/Details.tsx rename to pages/dot-leader/index.tsx diff --git a/patterns/dot-navigation/Details.tsx b/pages/dot-navigation/index.tsx similarity index 100% rename from patterns/dot-navigation/Details.tsx rename to pages/dot-navigation/index.tsx diff --git a/patterns/drawer/Details.tsx b/pages/drawer/index.tsx similarity index 100% rename from patterns/drawer/Details.tsx rename to pages/drawer/index.tsx diff --git a/patterns/drop-area/Details.tsx b/pages/drop-area/index.tsx similarity index 100% rename from patterns/drop-area/Details.tsx rename to pages/drop-area/index.tsx diff --git a/pages/drop-cap/dropcap.css b/pages/drop-cap/dropcap.css new file mode 100644 index 0000000..b12883d --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/drop-cap/Details.tsx b/pages/drop-cap/index.tsx similarity index 100% rename from patterns/drop-cap/Details.tsx rename to pages/drop-cap/index.tsx diff --git a/pages/dropdown/dropdown.css b/pages/dropdown/dropdown.css new file mode 100644 index 0000000..604ffe8 --- /dev/null +++ b/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 + */ + +.p-dropdown-content { + display: none; +} + +.p-dropdown:hover .p-dropdown-content { + display: block; +} diff --git a/patterns/dropdown/Details.tsx b/pages/dropdown/index.tsx similarity index 100% rename from patterns/dropdown/Details.tsx rename to pages/dropdown/index.tsx diff --git a/patterns/fading-long-section/Details.tsx b/pages/fading-long-section/index.tsx similarity index 100% rename from patterns/fading-long-section/Details.tsx rename to pages/fading-long-section/index.tsx diff --git a/patterns/feature-comparison/Details.tsx b/pages/feature-comparison/index.tsx similarity index 100% rename from patterns/feature-comparison/Details.tsx rename to pages/feature-comparison/index.tsx diff --git a/patterns/feature-list/Details.tsx b/pages/feature-list/index.tsx similarity index 100% rename from patterns/feature-list/Details.tsx rename to pages/feature-list/index.tsx diff --git a/patterns/fixed-at-corner/Details.tsx b/pages/fixed-at-corner/index.tsx similarity index 100% rename from patterns/fixed-at-corner/Details.tsx rename to pages/fixed-at-corner/index.tsx diff --git a/patterns/fixed-at-side/Details.tsx b/pages/fixed-at-side/index.tsx similarity index 100% rename from patterns/fixed-at-side/Details.tsx rename to pages/fixed-at-side/index.tsx diff --git a/pages/floating-label/floating-label.css b/pages/floating-label/floating-label.css new file mode 100644 index 0000000..9fef476 --- /dev/null +++ b/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 + */ + +.p-floating-container label { + opacity: 0; +} + +.p-floating-container input:not(:placeholder-shown) + label { + background: #FFF; + transform: translate(0, -50%); + opacity: 1; +} diff --git a/patterns/floating-label/Details.tsx b/pages/floating-label/index.tsx similarity index 100% rename from patterns/floating-label/Details.tsx rename to pages/floating-label/index.tsx diff --git a/pages/folder-structure/folder-structure.css b/pages/folder-structure/folder-structure.css new file mode 100644 index 0000000..502cec5 --- /dev/null +++ b/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 + */ + +: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); +} diff --git a/patterns/folder-structure/Details.tsx b/pages/folder-structure/index.tsx similarity index 100% rename from patterns/folder-structure/Details.tsx rename to pages/folder-structure/index.tsx diff --git a/patterns/full-background/Details.tsx b/pages/full-background/index.tsx similarity index 100% rename from patterns/full-background/Details.tsx rename to pages/full-background/index.tsx diff --git a/patterns/full-screen-menu/Details.tsx b/pages/full-screen-menu/index.tsx similarity index 100% rename from patterns/full-screen-menu/Details.tsx rename to pages/full-screen-menu/index.tsx diff --git a/patterns/holy-grail/Details.tsx b/pages/holy-grail/index.tsx similarity index 100% rename from patterns/holy-grail/Details.tsx rename to pages/holy-grail/index.tsx diff --git a/patterns/initial-avatar/Details.tsx b/pages/initial-avatar/index.tsx similarity index 100% rename from patterns/initial-avatar/Details.tsx rename to pages/initial-avatar/index.tsx diff --git a/patterns/input-addon/Details.tsx b/pages/input-addon/index.tsx similarity index 100% rename from patterns/input-addon/Details.tsx rename to pages/input-addon/index.tsx diff --git a/patterns/inverted-corners/Details.tsx b/pages/inverted-corners/index.tsx similarity index 100% rename from patterns/inverted-corners/Details.tsx rename to pages/inverted-corners/index.tsx diff --git a/pages/inverted-corners/inverted-corners.css b/pages/inverted-corners/inverted-corners.css new file mode 100644 index 0000000..b9b022b --- /dev/null +++ b/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 + */ + +: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; +} \ No newline at end of file diff --git a/patterns/keyboard-shortcut/Details.tsx b/pages/keyboard-shortcut/index.tsx similarity index 100% rename from patterns/keyboard-shortcut/Details.tsx rename to pages/keyboard-shortcut/index.tsx diff --git a/patterns/layered-card/Details.tsx b/pages/layered-card/index.tsx similarity index 100% rename from patterns/layered-card/Details.tsx rename to pages/layered-card/index.tsx diff --git a/pages/layered-card/styles.css b/pages/layered-card/styles.css new file mode 100644 index 0000000..4295d5a --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/lined-paper/Details.tsx b/pages/lined-paper/index.tsx similarity index 100% rename from patterns/lined-paper/Details.tsx rename to pages/lined-paper/index.tsx diff --git a/patterns/masonry-grid/Details.tsx b/pages/masonry-grid/index.tsx similarity index 100% rename from patterns/masonry-grid/Details.tsx rename to pages/masonry-grid/index.tsx diff --git a/pages/masonry-grid/masonry-grid.css b/pages/masonry-grid/masonry-grid.css new file mode 100644 index 0000000..f26a81b --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/media-object/Details.tsx b/pages/media-object/index.tsx similarity index 100% rename from patterns/media-object/Details.tsx rename to pages/media-object/index.tsx diff --git a/patterns/mega-menu/Details.tsx b/pages/mega-menu/index.tsx similarity index 100% rename from patterns/mega-menu/Details.tsx rename to pages/mega-menu/index.tsx diff --git a/pages/mega-menu/mega-menu.css b/pages/mega-menu/mega-menu.css new file mode 100644 index 0000000..b47f1b4 --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/menu/Details.tsx b/pages/menu/index.tsx similarity index 100% rename from patterns/menu/Details.tsx rename to pages/menu/index.tsx diff --git a/pages/menu/menu.css b/pages/menu/menu.css new file mode 100644 index 0000000..8dc8766 --- /dev/null +++ b/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 + */ + +.p-menu-item:hover { + background-color: rgba(0, 0, 0, 0.1); +} diff --git a/patterns/modal/Details.tsx b/pages/modal/index.tsx similarity index 100% rename from patterns/modal/Details.tsx rename to pages/modal/index.tsx diff --git a/patterns/nested-dropdowns/Details.tsx b/pages/nested-dropdowns/index.tsx similarity index 100% rename from patterns/nested-dropdowns/Details.tsx rename to pages/nested-dropdowns/index.tsx diff --git a/pages/nested-dropdowns/nested-dropdowns.css b/pages/nested-dropdowns/nested-dropdowns.css new file mode 100644 index 0000000..54cabce --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/notification/Details.tsx b/pages/notification/index.tsx similarity index 100% rename from patterns/notification/Details.tsx rename to pages/notification/index.tsx diff --git a/patterns/overlay-play-button/Details.tsx b/pages/overlay-play-button/index.tsx similarity index 100% rename from patterns/overlay-play-button/Details.tsx rename to pages/overlay-play-button/index.tsx diff --git a/patterns/pagination/Details.tsx b/pages/pagination/index.tsx similarity index 100% rename from patterns/pagination/Details.tsx rename to pages/pagination/index.tsx diff --git a/patterns/popover-arrow/Details.tsx b/pages/popover-arrow/index.tsx similarity index 100% rename from patterns/popover-arrow/Details.tsx rename to pages/popover-arrow/index.tsx diff --git a/patterns/presence-indicator/Details.tsx b/pages/presence-indicator/index.tsx similarity index 100% rename from patterns/presence-indicator/Details.tsx rename to pages/presence-indicator/index.tsx diff --git a/patterns/previous-next-buttons/Details.tsx b/pages/previous-next-buttons/index.tsx similarity index 100% rename from patterns/previous-next-buttons/Details.tsx rename to pages/previous-next-buttons/index.tsx diff --git a/patterns/price-tag/Details.tsx b/pages/price-tag/index.tsx similarity index 100% rename from patterns/price-tag/Details.tsx rename to pages/price-tag/index.tsx diff --git a/pages/price-tag/price-tag.css b/pages/price-tag/price-tag.css new file mode 100644 index 0000000..f7be3ec --- /dev/null +++ b/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 + */ + +: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; +} diff --git a/patterns/pricing-table/Details.tsx b/pages/pricing-table/index.tsx similarity index 100% rename from patterns/pricing-table/Details.tsx rename to pages/pricing-table/index.tsx diff --git a/patterns/progress-bar/Details.tsx b/pages/progress-bar/index.tsx similarity index 100% rename from patterns/progress-bar/Details.tsx rename to pages/progress-bar/index.tsx diff --git a/patterns/property-list/Details.tsx b/pages/property-list/index.tsx similarity index 100% rename from patterns/property-list/Details.tsx rename to pages/property-list/index.tsx diff --git a/patterns/questions-and-answers/Details.tsx b/pages/questions-and-answers/index.tsx similarity index 100% rename from patterns/questions-and-answers/Details.tsx rename to pages/questions-and-answers/index.tsx diff --git a/patterns/radial-progress-bar/Details.tsx b/pages/radial-progress-bar/index.tsx similarity index 100% rename from patterns/radial-progress-bar/Details.tsx rename to pages/radial-progress-bar/index.tsx diff --git a/patterns/radio-button-group/Details.tsx b/pages/radio-button-group/index.tsx similarity index 100% rename from patterns/radio-button-group/Details.tsx rename to pages/radio-button-group/index.tsx diff --git a/pages/radio-button-group/radio-button-group.css b/pages/radio-button-group/radio-button-group.css new file mode 100644 index 0000000..39d5284 --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/radio-switch/Details.tsx b/pages/radio-switch/index.tsx similarity index 100% rename from patterns/radio-switch/Details.tsx rename to pages/radio-switch/index.tsx diff --git a/pages/rating/Star.tsx b/pages/rating/Star.tsx new file mode 100644 index 0000000..428d112 --- /dev/null +++ b/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 + */ + +import * as React from 'react'; + +import './star.css'; + +interface StarProps { + isActive: boolean; +} + +const Star: React.FC = ({ isActive }) => { + return ( + + ); +}; + +export default Star; diff --git a/patterns/rating/Details.tsx b/pages/rating/index.tsx similarity index 100% rename from patterns/rating/Details.tsx rename to pages/rating/index.tsx diff --git a/pages/rating/star.css b/pages/rating/star.css new file mode 100644 index 0000000..5494bb6 --- /dev/null +++ b/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 + */ + +.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; +} diff --git a/patterns/resizable-element/Details.tsx b/pages/resizable-element/index.tsx similarity index 100% rename from patterns/resizable-element/Details.tsx rename to pages/resizable-element/index.tsx diff --git a/patterns/ribbon/Details.tsx b/pages/ribbon/index.tsx similarity index 100% rename from patterns/ribbon/Details.tsx rename to pages/ribbon/index.tsx diff --git a/patterns/same-height-columns/Details.tsx b/pages/same-height-columns/index.tsx similarity index 100% rename from patterns/same-height-columns/Details.tsx rename to pages/same-height-columns/index.tsx diff --git a/patterns/search-box/Details.tsx b/pages/search-box/index.tsx similarity index 100% rename from patterns/search-box/Details.tsx rename to pages/search-box/index.tsx diff --git a/patterns/separator/Details.tsx b/pages/separator/index.tsx similarity index 100% rename from patterns/separator/Details.tsx rename to pages/separator/index.tsx diff --git a/patterns/sidebar/Details.tsx b/pages/sidebar/index.tsx similarity index 100% rename from patterns/sidebar/Details.tsx rename to pages/sidebar/index.tsx diff --git a/patterns/simple-grid/Details.tsx b/pages/simple-grid/index.tsx similarity index 100% rename from patterns/simple-grid/Details.tsx rename to pages/simple-grid/index.tsx diff --git a/patterns/slider/Details.tsx b/pages/slider/index.tsx similarity index 100% rename from patterns/slider/Details.tsx rename to pages/slider/index.tsx diff --git a/patterns/spin-button/Details.tsx b/pages/spin-button/index.tsx similarity index 100% rename from patterns/spin-button/Details.tsx rename to pages/spin-button/index.tsx diff --git a/patterns/split-navigation/Details.tsx b/pages/split-navigation/index.tsx similarity index 100% rename from patterns/split-navigation/Details.tsx rename to pages/split-navigation/index.tsx diff --git a/patterns/split-screen/Details.tsx b/pages/split-screen/index.tsx similarity index 100% rename from patterns/split-screen/Details.tsx rename to pages/split-screen/index.tsx diff --git a/patterns/stacked-cards/Details.tsx b/pages/stacked-cards/index.tsx similarity index 100% rename from patterns/stacked-cards/Details.tsx rename to pages/stacked-cards/index.tsx diff --git a/patterns/stamp-border/Details.tsx b/pages/stamp-border/index.tsx similarity index 100% rename from patterns/stamp-border/Details.tsx rename to pages/stamp-border/index.tsx diff --git a/patterns/statistic/Details.tsx b/pages/statistic/index.tsx similarity index 100% rename from patterns/statistic/Details.tsx rename to pages/statistic/index.tsx diff --git a/patterns/status-light/Details.tsx b/pages/status-light/index.tsx similarity index 100% rename from patterns/status-light/Details.tsx rename to pages/status-light/index.tsx diff --git a/patterns/stepper-input/Details.tsx b/pages/stepper-input/index.tsx similarity index 100% rename from patterns/stepper-input/Details.tsx rename to pages/stepper-input/index.tsx diff --git a/patterns/sticky-footer/Details.tsx b/pages/sticky-footer/index.tsx similarity index 100% rename from patterns/sticky-footer/Details.tsx rename to pages/sticky-footer/index.tsx diff --git a/patterns/sticky-header/Details.tsx b/pages/sticky-header/index.tsx similarity index 100% rename from patterns/sticky-header/Details.tsx rename to pages/sticky-header/index.tsx diff --git a/patterns/sticky-sections/Details.tsx b/pages/sticky-sections/index.tsx similarity index 100% rename from patterns/sticky-sections/Details.tsx rename to pages/sticky-sections/index.tsx diff --git a/patterns/sticky-table-column/Details.tsx b/pages/sticky-table-column/index.tsx similarity index 100% rename from patterns/sticky-table-column/Details.tsx rename to pages/sticky-table-column/index.tsx diff --git a/patterns/sticky-table-headers/Details.tsx b/pages/sticky-table-headers/index.tsx similarity index 100% rename from patterns/sticky-table-headers/Details.tsx rename to pages/sticky-table-headers/index.tsx diff --git a/patterns/switch/Details.tsx b/pages/switch/index.tsx similarity index 100% rename from patterns/switch/Details.tsx rename to pages/switch/index.tsx diff --git a/patterns/tab/Details.tsx b/pages/tab/index.tsx similarity index 100% rename from patterns/tab/Details.tsx rename to pages/tab/index.tsx diff --git a/patterns/teardrop/Details.tsx b/pages/teardrop/index.tsx similarity index 100% rename from patterns/teardrop/Details.tsx rename to pages/teardrop/index.tsx diff --git a/patterns/three-dimensions-card/Details.tsx b/pages/three-dimensions-card/index.tsx similarity index 100% rename from patterns/three-dimensions-card/Details.tsx rename to pages/three-dimensions-card/index.tsx diff --git a/pages/three-dimensions-card/styles.css b/pages/three-dimensions-card/styles.css new file mode 100644 index 0000000..41f9ab6 --- /dev/null +++ b/pages/three-dimensions-card/styles.css @@ -0,0 +1,46 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +:root { + --three-dimensions-card-left-side-width: 1rem; +} + +.three-dimensions-card { + position: relative; +} + +/* The left side */ +.three-dimensions-card::before { + background: rgba(0, 0, 0, 0.3); + content: ''; + + /* Position */ + top: var(--three-dimensions-card-left-side-width); + left: 0px; + position: absolute; + transform: translate(-100%, 0) skewY(-45deg); + transform-origin: left top; + + /* Size */ + height: 100%; + width: var(--three-dimensions-card-left-side-width); +} + +/* The bottom side */ +.three-dimensions-card::after { + background: rgba(0, 0, 0, 0.3); + content: ''; + + /* Position */ + bottom: 0px; + left: 0px; + position: absolute; + transform: translate(0, 100%) skewX(-45deg); + transform-origin: left top; + + /* Size */ + height: var(--three-dimensions-card-left-side-width); + width: 100%; +} diff --git a/patterns/timeline/Details.tsx b/pages/timeline/index.tsx similarity index 100% rename from patterns/timeline/Details.tsx rename to pages/timeline/index.tsx diff --git a/patterns/toggle-password-visibility/Details.tsx b/pages/toggle-password-visibility/index.tsx similarity index 100% rename from patterns/toggle-password-visibility/Details.tsx rename to pages/toggle-password-visibility/index.tsx diff --git a/patterns/tooltip/Details.tsx b/pages/tooltip/index.tsx similarity index 100% rename from patterns/tooltip/Details.tsx rename to pages/tooltip/index.tsx diff --git a/pages/tooltip/tooltip.css b/pages/tooltip/tooltip.css new file mode 100644 index 0000000..2447273 --- /dev/null +++ b/pages/tooltip/tooltip.css @@ -0,0 +1,37 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +.p-tooltip { + position: relative; +} +.p-tooltip:hover .p-tooltip-arrow, +.p-tooltip:hover .p-tooltip-content { + opacity: 1; + pointer-events: initial; +} +.p-tooltip-arrow { + border: 8px solid transparent; + border-top-color: #00439e; + bottom: 100%; + height: 0; + left: 50%; + opacity: 0; + pointer-events: none; + position: absolute; + transform: translate(-50%, 8px); + width: 0; + z-index: 10; +} +.p-tooltip-content { + background-color: #00439e; + border-radius: 2px; + bottom: 100%; + left: 50%; + opacity: 0; + pointer-events: none; + position: absolute; + transform: translate(-50%, -8px); + z-index: 10; +} diff --git a/patterns/tree-diagram/Details.tsx b/pages/tree-diagram/index.tsx similarity index 100% rename from patterns/tree-diagram/Details.tsx rename to pages/tree-diagram/index.tsx diff --git a/pages/tree-diagram/tree-diagram.css b/pages/tree-diagram/tree-diagram.css new file mode 100644 index 0000000..306134e --- /dev/null +++ b/pages/tree-diagram/tree-diagram.css @@ -0,0 +1,67 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +.tree-diagram ul { + display: flex; + position: relative; + + /* Reset */ + list-style-type: none; + margin: 0; + padding: 1rem 0.5rem 0rem 0.5rem; +} + +.tree-diagram ul ul::before { + border-right: 1px solid rgba(0, 0, 0, .3); + content: ''; + height: 1rem; + position: absolute; + top: 0; + right: 50%; + width: 50%; +} + +.tree-diagram li { + padding: 1rem 0.5rem 0rem 0.5rem; + position: relative; + + /* Center the content */ + align-items: center; + display: flex; + flex-direction: column; +} + +.tree-diagram li::before { + border-right: 1px solid rgba(0, 0, 0, .3); + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + height: 1rem; + + /* Position */ + position: absolute; + top: 0; + right: 50%; + width: 50%; +} + +.tree-diagram li::after { + border-top: 1px solid rgba(0, 0, 0, .3); + content: ''; + + /* Position */ + position: absolute; + top: 0; + right: 0; + width: 50%; +} + +.tree-diagram li:first-child::before, +.tree-diagram li:last-child::after { + border-top: none; +} + +li.tree-diagram__root::before { + border-right: none; +} diff --git a/patterns/triangle-buttons/Details.tsx b/pages/triangle-buttons/index.tsx similarity index 100% rename from patterns/triangle-buttons/Details.tsx rename to pages/triangle-buttons/index.tsx diff --git a/patterns/upload-button/Details.tsx b/pages/upload-button/index.tsx similarity index 100% rename from patterns/upload-button/Details.tsx rename to pages/upload-button/index.tsx diff --git a/patterns/validation-icon/Details.tsx b/pages/validation-icon/index.tsx similarity index 100% rename from patterns/validation-icon/Details.tsx rename to pages/validation-icon/index.tsx diff --git a/patterns/video-background/Details.tsx b/pages/video-background/index.tsx similarity index 100% rename from patterns/video-background/Details.tsx rename to pages/video-background/index.tsx diff --git a/patterns/voting/Details.tsx b/pages/voting/index.tsx similarity index 100% rename from patterns/voting/Details.tsx rename to pages/voting/index.tsx diff --git a/patterns/watermark/Details.tsx b/pages/watermark/index.tsx similarity index 100% rename from patterns/watermark/Details.tsx rename to pages/watermark/index.tsx diff --git a/patterns/wizard/Details.tsx b/pages/wizard/index.tsx similarity index 100% rename from patterns/wizard/Details.tsx rename to pages/wizard/index.tsx diff --git a/patterns/zigzag-timeline/Details.tsx b/pages/zigzag-timeline/index.tsx similarity index 100% rename from patterns/zigzag-timeline/Details.tsx rename to pages/zigzag-timeline/index.tsx diff --git a/pages/zigzag-timeline/zigzag-timeline.css b/pages/zigzag-timeline/zigzag-timeline.css new file mode 100644 index 0000000..46cbfde --- /dev/null +++ b/pages/zigzag-timeline/zigzag-timeline.css @@ -0,0 +1,48 @@ +/** + * A collection of popular layouts and patterns made with CSS (https://csslayout.io) + * (c) 2019 - 2021 Nguyen Huu Phuoc + */ + +.zigzag-timeline__item { + /* Used to position the milestone */ + position: relative; + + /* Border */ + border-bottom: 1px solid #71717A; + + /* Take full width */ + width: 100%; +} + +.zigzag-timeline__milestone { + /* Absolute position */ + position: absolute; + top: 50%; + + /* Circle it */ + border-radius: 50%; + height: 2rem; + width: 2rem; + + /* Misc */ + background: #71717A; +} + +/* Styles for even items */ +.zigzag-timeline__item:nth-child(2n) { + border-left: 1px solid #71717A; + +} +.zigzag-timeline__item:nth-child(2n) .zigzag-timeline__milestone { + left: 0; + transform: translate(-50%, -50%); +} + +/* Styles for odd items */ +.zigzag-timeline__item:nth-child(2n + 1) { + border-right: 1px solid #71717A; +} +.zigzag-timeline__item:nth-child(2n + 1) .zigzag-timeline__milestone { + right: 0; + transform: translate(50%, -50%); +} \ No newline at end of file