From 829d57c1bf7bcc8ef1adba178af06a8b47fc65a0 Mon Sep 17 00:00:00 2001 From: Phuoc Nguyen Date: Mon, 27 Sep 2021 23:33:13 +0700 Subject: [PATCH] Cleanup --- patterns/accordion/Cover.tsx | 5 -- patterns/arrow-buttons/Cover.tsx | 5 -- patterns/avatar-list/Cover.tsx | 5 -- patterns/avatar/Cover.tsx | 5 -- patterns/badge/Cover.tsx | 5 -- patterns/button-with-icon/Cover.tsx | 5 -- patterns/card-layout/Cover.tsx | 5 -- patterns/card/Cover.tsx | 5 -- patterns/chip/Cover.tsx | 5 -- patterns/chip/InputChip.tsx | 58 ---------------- patterns/circular-navigation/Cover.tsx | 5 -- patterns/close-button/Cover.tsx | 5 -- patterns/color-swatch/Cover.tsx | 5 -- patterns/concave-corners/Cover.tsx | 4 -- patterns/concave-corners/concave-corners.css | 66 ------------------ patterns/cookie-banner/Cover.tsx | 5 -- patterns/corner-ribbon/Cover.tsx | 5 -- patterns/curved-background/Cover.tsx | 5 -- patterns/custom-checkbox-button/Cover.tsx | 5 -- patterns/custom-radio-button/Cover.tsx | 5 -- patterns/diagonal-section/Cover.tsx | 5 -- patterns/docked-at-corner/Cover.tsx | 5 -- patterns/dot-leader/Cover.tsx | 5 -- patterns/dot-navigation/Cover.tsx | 5 -- patterns/drawer/Cover.tsx | 5 -- patterns/drop-area/Cover.tsx | 5 -- patterns/drop-cap/Cover.tsx | 5 -- patterns/drop-cap/dropcap.css | 14 ---- patterns/dropdown/Cover.tsx | 5 -- patterns/dropdown/dropdown.css | 12 ---- patterns/fading-long-section/Cover.tsx | 5 -- patterns/feature-comparison/Cover.tsx | 5 -- patterns/feature-list/Cover.tsx | 5 -- patterns/fixed-at-corner/Cover.tsx | 5 -- patterns/fixed-at-side/Cover.tsx | 5 -- patterns/floating-label/Cover.tsx | 5 -- patterns/floating-label/floating-label.css | 14 ---- patterns/folder-structure/Cover.tsx | 5 -- .../folder-structure/folder-structure.css | 54 --------------- patterns/full-background/Cover.tsx | 5 -- patterns/full-screen-menu/Cover.tsx | 5 -- patterns/holy-grail/Cover.tsx | 5 -- patterns/initial-avatar/Cover.tsx | 5 -- patterns/input-addon/Cover.tsx | 5 -- patterns/inverted-corners/Cover.tsx | 4 -- .../inverted-corners/inverted-corners.css | 53 --------------- patterns/keyboard-shortcut/Cover.tsx | 5 -- patterns/layered-card/Cover.tsx | 5 -- patterns/layered-card/styles.css | 26 ------- patterns/lined-paper/Cover.tsx | 5 -- patterns/masonry-grid/Cover.tsx | 5 -- patterns/masonry-grid/masonry-grid.css | 20 ------ patterns/media-object/Cover.tsx | 5 -- patterns/mega-menu/Cover.tsx | 5 -- patterns/mega-menu/mega-menu.css | 22 ------ patterns/menu/Cover.tsx | 5 -- patterns/menu/menu.css | 8 --- patterns/modal/Cover.tsx | 5 -- patterns/nested-dropdowns/Cover.tsx | 5 -- .../nested-dropdowns/nested-dropdowns.css | 43 ------------ patterns/notification/Cover.tsx | 5 -- patterns/overlay-play-button/Cover.tsx | 5 -- patterns/pagination/Cover.tsx | 5 -- patterns/popover-arrow/Cover.tsx | 5 -- patterns/presence-indicator/Cover.tsx | 5 -- patterns/previous-next-buttons/Cover.tsx | 5 -- patterns/price-tag/Cover.tsx | 5 -- patterns/price-tag/price-tag.css | 63 ----------------- patterns/pricing-table/Cover.tsx | 5 -- patterns/progress-bar/Cover.tsx | 5 -- patterns/property-list/Cover.tsx | 5 -- patterns/questions-and-answers/Cover.tsx | 5 -- patterns/radial-progress-bar/Cover.tsx | 5 -- patterns/radio-button-group/Cover.tsx | 5 -- .../radio-button-group/radio-button-group.css | 11 --- patterns/radio-switch/Cover.tsx | 5 -- patterns/rating/Cover.tsx | 5 -- patterns/rating/Star.tsx | 18 ----- patterns/rating/star.css | 33 --------- patterns/resizable-element/Cover.tsx | 5 -- patterns/ribbon/Cover.tsx | 5 -- patterns/same-height-columns/Cover.tsx | 5 -- patterns/search-box/Cover.tsx | 5 -- patterns/separator/Cover.tsx | 5 -- patterns/sidebar/Cover.tsx | 5 -- patterns/simple-grid/Cover.tsx | 5 -- patterns/slider/Cover.tsx | 5 -- patterns/spin-button/Cover.tsx | 5 -- patterns/split-navigation/Cover.tsx | 5 -- patterns/split-screen/Cover.tsx | 5 -- patterns/stacked-cards/Cover.tsx | 5 -- patterns/stamp-border/Cover.tsx | 5 -- patterns/statistic/Cover.tsx | 5 -- patterns/status-light/Cover.tsx | 5 -- patterns/stepper-input/Cover.tsx | 5 -- patterns/sticky-footer/Cover.tsx | 5 -- patterns/sticky-header/Cover.tsx | 5 -- patterns/sticky-sections/Cover.tsx | 5 -- patterns/sticky-table-column/Cover.tsx | 5 -- patterns/sticky-table-headers/Cover.tsx | 5 -- patterns/switch/Cover.tsx | 5 -- patterns/tab/Cover.tsx | 5 -- patterns/teardrop/Cover.tsx | 5 -- patterns/three-dimensions-card/Cover.tsx | 5 -- patterns/three-dimensions-card/styles.css | 46 ------------- patterns/timeline/Cover.tsx | 5 -- patterns/toggle-password-visibility/Cover.tsx | 5 -- patterns/tooltip/Cover.tsx | 5 -- patterns/tooltip/tooltip.css | 37 ---------- patterns/tree-diagram/Cover.tsx | 5 -- patterns/tree-diagram/tree-diagram.css | 67 ------------------- patterns/triangle-buttons/Cover.tsx | 5 -- patterns/upload-button/Cover.tsx | 5 -- patterns/validation-icon/Cover.tsx | 5 -- patterns/video-background/Cover.tsx | 5 -- patterns/voting/Cover.tsx | 5 -- patterns/watermark/Cover.tsx | 5 -- patterns/wizard/Cover.tsx | 5 -- patterns/zigzag-timeline/Cover.tsx | 5 -- patterns/zigzag-timeline/zigzag-timeline.css | 47 ------------- placeholders/Block.tsx | 5 -- placeholders/BrowserFrame.tsx | 5 -- placeholders/Circle.tsx | 5 -- placeholders/Frame.tsx | 5 -- placeholders/Line.tsx | 5 -- placeholders/Rectangle.tsx | 5 -- placeholders/Square.tsx | 5 -- placeholders/Triangle.tsx | 5 -- placeholders/VerticalLine.tsx | 5 -- styles/blocks/_browser-frame.scss | 5 -- styles/patterns/_concave-corners.scss | 5 -- styles/patterns/_dropcap.scss | 5 -- styles/patterns/_dropdown.scss | 5 -- styles/patterns/_floating-label.scss | 5 -- styles/patterns/_folder-structure.scss | 5 -- styles/patterns/_inverted-corners.scss | 5 -- styles/patterns/_layered-card.scss | 5 -- styles/patterns/_masonry-grid.scss | 5 -- styles/patterns/_mega-menu.scss | 5 -- styles/patterns/_menu.scss | 5 -- styles/patterns/_nested-dropdowns.scss | 5 -- styles/patterns/_price-tag.scss | 5 -- styles/patterns/_radio-button-group.scss | 5 -- styles/patterns/_star.scss | 5 -- styles/patterns/_three-dimensions-card.scss | 5 -- styles/patterns/_tooltip.scss | 5 -- styles/patterns/_tree-diagram.scss | 5 -- styles/patterns/_zigzag-timeline.scss | 5 -- 148 files changed, 1350 deletions(-) delete mode 100644 patterns/chip/InputChip.tsx delete mode 100644 patterns/concave-corners/concave-corners.css delete mode 100644 patterns/drop-cap/dropcap.css delete mode 100644 patterns/dropdown/dropdown.css delete mode 100644 patterns/floating-label/floating-label.css delete mode 100644 patterns/folder-structure/folder-structure.css delete mode 100644 patterns/inverted-corners/inverted-corners.css delete mode 100644 patterns/layered-card/styles.css delete mode 100644 patterns/masonry-grid/masonry-grid.css delete mode 100644 patterns/mega-menu/mega-menu.css delete mode 100644 patterns/menu/menu.css delete mode 100644 patterns/nested-dropdowns/nested-dropdowns.css delete mode 100644 patterns/price-tag/price-tag.css delete mode 100644 patterns/radio-button-group/radio-button-group.css delete mode 100644 patterns/rating/Star.tsx delete mode 100644 patterns/rating/star.css delete mode 100644 patterns/three-dimensions-card/styles.css delete mode 100644 patterns/tooltip/tooltip.css delete mode 100644 patterns/tree-diagram/tree-diagram.css delete mode 100644 patterns/zigzag-timeline/zigzag-timeline.css diff --git a/patterns/accordion/Cover.tsx b/patterns/accordion/Cover.tsx index 83336b3..a9f281f 100644 --- a/patterns/accordion/Cover.tsx +++ b/patterns/accordion/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/arrow-buttons/Cover.tsx b/patterns/arrow-buttons/Cover.tsx index ab61a6e..c8720d9 100644 --- a/patterns/arrow-buttons/Cover.tsx +++ b/patterns/arrow-buttons/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/avatar-list/Cover.tsx b/patterns/avatar-list/Cover.tsx index 7b2f244..9f7f5b5 100644 --- a/patterns/avatar-list/Cover.tsx +++ b/patterns/avatar-list/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/avatar/Cover.tsx b/patterns/avatar/Cover.tsx index a2fe4c4..ef07cb4 100644 --- a/patterns/avatar/Cover.tsx +++ b/patterns/avatar/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/badge/Cover.tsx b/patterns/badge/Cover.tsx index 12ba360..b01d350 100644 --- a/patterns/badge/Cover.tsx +++ b/patterns/badge/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/button-with-icon/Cover.tsx b/patterns/button-with-icon/Cover.tsx index 5a7bdc5..f584881 100644 --- a/patterns/button-with-icon/Cover.tsx +++ b/patterns/button-with-icon/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/card-layout/Cover.tsx b/patterns/card-layout/Cover.tsx index 74f946d..440d488 100644 --- a/patterns/card-layout/Cover.tsx +++ b/patterns/card-layout/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/card/Cover.tsx b/patterns/card/Cover.tsx index 89fff53..f29a4f3 100644 --- a/patterns/card/Cover.tsx +++ b/patterns/card/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/chip/Cover.tsx b/patterns/chip/Cover.tsx index 6bea894..b76a35e 100644 --- a/patterns/chip/Cover.tsx +++ b/patterns/chip/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/chip/InputChip.tsx b/patterns/chip/InputChip.tsx deleted file mode 100644 index f197878..0000000 --- a/patterns/chip/InputChip.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/** - * 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/circular-navigation/Cover.tsx b/patterns/circular-navigation/Cover.tsx index cbca4a2..abba688 100644 --- a/patterns/circular-navigation/Cover.tsx +++ b/patterns/circular-navigation/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/close-button/Cover.tsx b/patterns/close-button/Cover.tsx index 04d173a..43c148a 100644 --- a/patterns/close-button/Cover.tsx +++ b/patterns/close-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/color-swatch/Cover.tsx b/patterns/color-swatch/Cover.tsx index 11ab0f9..f220bb4 100644 --- a/patterns/color-swatch/Cover.tsx +++ b/patterns/color-swatch/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/concave-corners/Cover.tsx b/patterns/concave-corners/Cover.tsx index 6adaa32..643fce0 100644 --- a/patterns/concave-corners/Cover.tsx +++ b/patterns/concave-corners/Cover.tsx @@ -1,7 +1,3 @@ -/** * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/concave-corners/concave-corners.css b/patterns/concave-corners/concave-corners.css deleted file mode 100644 index 0c6b66e..0000000 --- a/patterns/concave-corners/concave-corners.css +++ /dev/null @@ -1,66 +0,0 @@ -/** - * 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, 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; -} diff --git a/patterns/cookie-banner/Cover.tsx b/patterns/cookie-banner/Cover.tsx index 2f1d6a4..3f5180a 100644 --- a/patterns/cookie-banner/Cover.tsx +++ b/patterns/cookie-banner/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/corner-ribbon/Cover.tsx b/patterns/corner-ribbon/Cover.tsx index 2d7faa3..6a7793b 100644 --- a/patterns/corner-ribbon/Cover.tsx +++ b/patterns/corner-ribbon/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/curved-background/Cover.tsx b/patterns/curved-background/Cover.tsx index faaae13..5680c8b 100644 --- a/patterns/curved-background/Cover.tsx +++ b/patterns/curved-background/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/custom-checkbox-button/Cover.tsx b/patterns/custom-checkbox-button/Cover.tsx index f99e943..148d034 100644 --- a/patterns/custom-checkbox-button/Cover.tsx +++ b/patterns/custom-checkbox-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/custom-radio-button/Cover.tsx b/patterns/custom-radio-button/Cover.tsx index 7b90bf5..2b3f1d4 100644 --- a/patterns/custom-radio-button/Cover.tsx +++ b/patterns/custom-radio-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/diagonal-section/Cover.tsx b/patterns/diagonal-section/Cover.tsx index dbf6703..175fb3c 100644 --- a/patterns/diagonal-section/Cover.tsx +++ b/patterns/diagonal-section/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/docked-at-corner/Cover.tsx b/patterns/docked-at-corner/Cover.tsx index 414b895..ae78e79 100644 --- a/patterns/docked-at-corner/Cover.tsx +++ b/patterns/docked-at-corner/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/dot-leader/Cover.tsx b/patterns/dot-leader/Cover.tsx index 38dd9bd..84a808e 100644 --- a/patterns/dot-leader/Cover.tsx +++ b/patterns/dot-leader/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/dot-navigation/Cover.tsx b/patterns/dot-navigation/Cover.tsx index b4b111e..f7ffa50 100644 --- a/patterns/dot-navigation/Cover.tsx +++ b/patterns/dot-navigation/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/drawer/Cover.tsx b/patterns/drawer/Cover.tsx index 31097e6..9a02405 100644 --- a/patterns/drawer/Cover.tsx +++ b/patterns/drawer/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/drop-area/Cover.tsx b/patterns/drop-area/Cover.tsx index 5117f9c..561a74d 100644 --- a/patterns/drop-area/Cover.tsx +++ b/patterns/drop-area/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/drop-cap/Cover.tsx b/patterns/drop-cap/Cover.tsx index b7373ee..38f453d 100644 --- a/patterns/drop-cap/Cover.tsx +++ b/patterns/drop-cap/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/drop-cap/dropcap.css b/patterns/drop-cap/dropcap.css deleted file mode 100644 index c59c774..0000000 --- a/patterns/drop-cap/dropcap.css +++ /dev/null @@ -1,14 +0,0 @@ -/** - * 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/dropdown/Cover.tsx b/patterns/dropdown/Cover.tsx index e36476b..53c37f1 100644 --- a/patterns/dropdown/Cover.tsx +++ b/patterns/dropdown/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/dropdown/dropdown.css b/patterns/dropdown/dropdown.css deleted file mode 100644 index 604ffe8..0000000 --- a/patterns/dropdown/dropdown.css +++ /dev/null @@ -1,12 +0,0 @@ -/** - * 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/fading-long-section/Cover.tsx b/patterns/fading-long-section/Cover.tsx index 87fcaba..e60ad35 100644 --- a/patterns/fading-long-section/Cover.tsx +++ b/patterns/fading-long-section/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 { random } from '../../utils/random'; diff --git a/patterns/feature-comparison/Cover.tsx b/patterns/feature-comparison/Cover.tsx index 9b8b059..11492be 100644 --- a/patterns/feature-comparison/Cover.tsx +++ b/patterns/feature-comparison/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/feature-list/Cover.tsx b/patterns/feature-list/Cover.tsx index d5f9d97..b53918c 100644 --- a/patterns/feature-list/Cover.tsx +++ b/patterns/feature-list/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/fixed-at-corner/Cover.tsx b/patterns/fixed-at-corner/Cover.tsx index 1985bd2..d4b0887 100644 --- a/patterns/fixed-at-corner/Cover.tsx +++ b/patterns/fixed-at-corner/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/fixed-at-side/Cover.tsx b/patterns/fixed-at-side/Cover.tsx index ef9935c..6480892 100644 --- a/patterns/fixed-at-side/Cover.tsx +++ b/patterns/fixed-at-side/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/floating-label/Cover.tsx b/patterns/floating-label/Cover.tsx index ef5a5ef..7e50c7e 100644 --- a/patterns/floating-label/Cover.tsx +++ b/patterns/floating-label/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/floating-label/floating-label.css b/patterns/floating-label/floating-label.css deleted file mode 100644 index 98e4193..0000000 --- a/patterns/floating-label/floating-label.css +++ /dev/null @@ -1,14 +0,0 @@ -/** - * 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/folder-structure/Cover.tsx b/patterns/folder-structure/Cover.tsx index bbeb693..9514022 100644 --- a/patterns/folder-structure/Cover.tsx +++ b/patterns/folder-structure/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/folder-structure/folder-structure.css b/patterns/folder-structure/folder-structure.css deleted file mode 100644 index 9117cdc..0000000 --- a/patterns/folder-structure/folder-structure.css +++ /dev/null @@ -1,54 +0,0 @@ -/** - * 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, 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, 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/full-background/Cover.tsx b/patterns/full-background/Cover.tsx index 0962f64..259197f 100644 --- a/patterns/full-background/Cover.tsx +++ b/patterns/full-background/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/full-screen-menu/Cover.tsx b/patterns/full-screen-menu/Cover.tsx index 71b2d9c..f7aeec6 100644 --- a/patterns/full-screen-menu/Cover.tsx +++ b/patterns/full-screen-menu/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/holy-grail/Cover.tsx b/patterns/holy-grail/Cover.tsx index eee4907..a86d2d1 100644 --- a/patterns/holy-grail/Cover.tsx +++ b/patterns/holy-grail/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/initial-avatar/Cover.tsx b/patterns/initial-avatar/Cover.tsx index 440e11c..1838daf 100644 --- a/patterns/initial-avatar/Cover.tsx +++ b/patterns/initial-avatar/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/input-addon/Cover.tsx b/patterns/input-addon/Cover.tsx index 5ee68a1..b5c87a9 100644 --- a/patterns/input-addon/Cover.tsx +++ b/patterns/input-addon/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/inverted-corners/Cover.tsx b/patterns/inverted-corners/Cover.tsx index 83b319a..10acf14 100644 --- a/patterns/inverted-corners/Cover.tsx +++ b/patterns/inverted-corners/Cover.tsx @@ -1,7 +1,3 @@ -/** * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/inverted-corners/inverted-corners.css b/patterns/inverted-corners/inverted-corners.css deleted file mode 100644 index 7a64565..0000000 --- a/patterns/inverted-corners/inverted-corners.css +++ /dev/null @@ -1,53 +0,0 @@ -/** - * 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; -} diff --git a/patterns/keyboard-shortcut/Cover.tsx b/patterns/keyboard-shortcut/Cover.tsx index de641ef..75479b8 100644 --- a/patterns/keyboard-shortcut/Cover.tsx +++ b/patterns/keyboard-shortcut/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/layered-card/Cover.tsx b/patterns/layered-card/Cover.tsx index fad822f..25423dd 100644 --- a/patterns/layered-card/Cover.tsx +++ b/patterns/layered-card/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/layered-card/styles.css b/patterns/layered-card/styles.css deleted file mode 100644 index 04d7913..0000000 --- a/patterns/layered-card/styles.css +++ /dev/null @@ -1,26 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/lined-paper/Cover.tsx index f5f4e08..5db9f6d 100644 --- a/patterns/lined-paper/Cover.tsx +++ b/patterns/lined-paper/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/masonry-grid/Cover.tsx b/patterns/masonry-grid/Cover.tsx index 2bfe9f9..8eab9c2 100644 --- a/patterns/masonry-grid/Cover.tsx +++ b/patterns/masonry-grid/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/masonry-grid/masonry-grid.css b/patterns/masonry-grid/masonry-grid.css deleted file mode 100644 index f26a81b..0000000 --- a/patterns/masonry-grid/masonry-grid.css +++ /dev/null @@ -1,20 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/media-object/Cover.tsx index c77259d..51bf507 100644 --- a/patterns/media-object/Cover.tsx +++ b/patterns/media-object/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/mega-menu/Cover.tsx b/patterns/mega-menu/Cover.tsx index 3aed34a..ca0c292 100644 --- a/patterns/mega-menu/Cover.tsx +++ b/patterns/mega-menu/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/mega-menu/mega-menu.css b/patterns/mega-menu/mega-menu.css deleted file mode 100644 index b47f1b4..0000000 --- a/patterns/mega-menu/mega-menu.css +++ /dev/null @@ -1,22 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/menu/Cover.tsx index 5a8f097..8f1a3bc 100644 --- a/patterns/menu/Cover.tsx +++ b/patterns/menu/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/menu/menu.css b/patterns/menu/menu.css deleted file mode 100644 index 8dc8766..0000000 --- a/patterns/menu/menu.css +++ /dev/null @@ -1,8 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/modal/Cover.tsx index 9f643d1..762fd60 100644 --- a/patterns/modal/Cover.tsx +++ b/patterns/modal/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/nested-dropdowns/Cover.tsx b/patterns/nested-dropdowns/Cover.tsx index 55fd9d1..3632047 100644 --- a/patterns/nested-dropdowns/Cover.tsx +++ b/patterns/nested-dropdowns/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/nested-dropdowns/nested-dropdowns.css b/patterns/nested-dropdowns/nested-dropdowns.css deleted file mode 100644 index 54cabce..0000000 --- a/patterns/nested-dropdowns/nested-dropdowns.css +++ /dev/null @@ -1,43 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/notification/Cover.tsx index 391da72..f8ec777 100644 --- a/patterns/notification/Cover.tsx +++ b/patterns/notification/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/overlay-play-button/Cover.tsx b/patterns/overlay-play-button/Cover.tsx index de24313..bb9fb99 100644 --- a/patterns/overlay-play-button/Cover.tsx +++ b/patterns/overlay-play-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/pagination/Cover.tsx b/patterns/pagination/Cover.tsx index fb35ebe..3cca9b8 100644 --- a/patterns/pagination/Cover.tsx +++ b/patterns/pagination/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/popover-arrow/Cover.tsx b/patterns/popover-arrow/Cover.tsx index 8defcec..d25dd23 100644 --- a/patterns/popover-arrow/Cover.tsx +++ b/patterns/popover-arrow/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/presence-indicator/Cover.tsx b/patterns/presence-indicator/Cover.tsx index 1dfb5a2..56f1cc4 100644 --- a/patterns/presence-indicator/Cover.tsx +++ b/patterns/presence-indicator/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/previous-next-buttons/Cover.tsx b/patterns/previous-next-buttons/Cover.tsx index 19911bb..68732ec 100644 --- a/patterns/previous-next-buttons/Cover.tsx +++ b/patterns/previous-next-buttons/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/price-tag/Cover.tsx b/patterns/price-tag/Cover.tsx index a71b8bc..449767d 100644 --- a/patterns/price-tag/Cover.tsx +++ b/patterns/price-tag/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/price-tag/price-tag.css b/patterns/price-tag/price-tag.css deleted file mode 100644 index 4972c76..0000000 --- a/patterns/price-tag/price-tag.css +++ /dev/null @@ -1,63 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/pricing-table/Cover.tsx index 71400e6..f15bc9e 100644 --- a/patterns/pricing-table/Cover.tsx +++ b/patterns/pricing-table/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/progress-bar/Cover.tsx b/patterns/progress-bar/Cover.tsx index 9f5d4ed..8413d96 100644 --- a/patterns/progress-bar/Cover.tsx +++ b/patterns/progress-bar/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/property-list/Cover.tsx b/patterns/property-list/Cover.tsx index e3532e2..845b210 100644 --- a/patterns/property-list/Cover.tsx +++ b/patterns/property-list/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/questions-and-answers/Cover.tsx b/patterns/questions-and-answers/Cover.tsx index 48f34da..0b7b099 100644 --- a/patterns/questions-and-answers/Cover.tsx +++ b/patterns/questions-and-answers/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/radial-progress-bar/Cover.tsx b/patterns/radial-progress-bar/Cover.tsx index 42f6d26..cb20d3a 100644 --- a/patterns/radial-progress-bar/Cover.tsx +++ b/patterns/radial-progress-bar/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/radio-button-group/Cover.tsx b/patterns/radio-button-group/Cover.tsx index 691f508..0d6fb22 100644 --- a/patterns/radio-button-group/Cover.tsx +++ b/patterns/radio-button-group/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/radio-button-group/radio-button-group.css b/patterns/radio-button-group/radio-button-group.css deleted file mode 100644 index 39d5284..0000000 --- a/patterns/radio-button-group/radio-button-group.css +++ /dev/null @@ -1,11 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/radio-switch/Cover.tsx index e49bc52..3b71288 100644 --- a/patterns/radio-switch/Cover.tsx +++ b/patterns/radio-switch/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/rating/Cover.tsx b/patterns/rating/Cover.tsx index 43b0d2a..1138012 100644 --- a/patterns/rating/Cover.tsx +++ b/patterns/rating/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/rating/Star.tsx b/patterns/rating/Star.tsx deleted file mode 100644 index c2546b5..0000000 --- a/patterns/rating/Star.tsx +++ /dev/null @@ -1,18 +0,0 @@ -/** - * 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/star.css b/patterns/rating/star.css deleted file mode 100644 index 5494bb6..0000000 --- a/patterns/rating/star.css +++ /dev/null @@ -1,33 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/resizable-element/Cover.tsx index 9020af2..7945733 100644 --- a/patterns/resizable-element/Cover.tsx +++ b/patterns/resizable-element/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/ribbon/Cover.tsx b/patterns/ribbon/Cover.tsx index cb082d4..002c25e 100644 --- a/patterns/ribbon/Cover.tsx +++ b/patterns/ribbon/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/same-height-columns/Cover.tsx b/patterns/same-height-columns/Cover.tsx index 54fc4db..441f7d1 100644 --- a/patterns/same-height-columns/Cover.tsx +++ b/patterns/same-height-columns/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/search-box/Cover.tsx b/patterns/search-box/Cover.tsx index 43a1875..237f412 100644 --- a/patterns/search-box/Cover.tsx +++ b/patterns/search-box/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/separator/Cover.tsx b/patterns/separator/Cover.tsx index 2b36c8f..17786e1 100644 --- a/patterns/separator/Cover.tsx +++ b/patterns/separator/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sidebar/Cover.tsx b/patterns/sidebar/Cover.tsx index c8b78f8..f49b190 100644 --- a/patterns/sidebar/Cover.tsx +++ b/patterns/sidebar/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/simple-grid/Cover.tsx b/patterns/simple-grid/Cover.tsx index 315fd9e..45e055f 100644 --- a/patterns/simple-grid/Cover.tsx +++ b/patterns/simple-grid/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/slider/Cover.tsx b/patterns/slider/Cover.tsx index 99c0fd7..38e9c8d 100644 --- a/patterns/slider/Cover.tsx +++ b/patterns/slider/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/spin-button/Cover.tsx b/patterns/spin-button/Cover.tsx index 5505591..9e22e83 100644 --- a/patterns/spin-button/Cover.tsx +++ b/patterns/spin-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/split-navigation/Cover.tsx b/patterns/split-navigation/Cover.tsx index 8e12eaa..1f14756 100644 --- a/patterns/split-navigation/Cover.tsx +++ b/patterns/split-navigation/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/split-screen/Cover.tsx b/patterns/split-screen/Cover.tsx index 5e07615..39a6bda 100644 --- a/patterns/split-screen/Cover.tsx +++ b/patterns/split-screen/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/stacked-cards/Cover.tsx b/patterns/stacked-cards/Cover.tsx index a8dadd7..1a17b33 100644 --- a/patterns/stacked-cards/Cover.tsx +++ b/patterns/stacked-cards/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/stamp-border/Cover.tsx b/patterns/stamp-border/Cover.tsx index e183cb5..535b2cb 100644 --- a/patterns/stamp-border/Cover.tsx +++ b/patterns/stamp-border/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/statistic/Cover.tsx b/patterns/statistic/Cover.tsx index 785dcfa..edf3994 100644 --- a/patterns/statistic/Cover.tsx +++ b/patterns/statistic/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/status-light/Cover.tsx b/patterns/status-light/Cover.tsx index ff4c6f7..397ebe6 100644 --- a/patterns/status-light/Cover.tsx +++ b/patterns/status-light/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/stepper-input/Cover.tsx b/patterns/stepper-input/Cover.tsx index 4d3ed5f..99a5101 100644 --- a/patterns/stepper-input/Cover.tsx +++ b/patterns/stepper-input/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sticky-footer/Cover.tsx b/patterns/sticky-footer/Cover.tsx index cb3f870..e63edc4 100644 --- a/patterns/sticky-footer/Cover.tsx +++ b/patterns/sticky-footer/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sticky-header/Cover.tsx b/patterns/sticky-header/Cover.tsx index f5355c2..8da811a 100644 --- a/patterns/sticky-header/Cover.tsx +++ b/patterns/sticky-header/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sticky-sections/Cover.tsx b/patterns/sticky-sections/Cover.tsx index 1ad4f16..d0278a7 100644 --- a/patterns/sticky-sections/Cover.tsx +++ b/patterns/sticky-sections/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sticky-table-column/Cover.tsx b/patterns/sticky-table-column/Cover.tsx index 9116e14..ec0ecd0 100644 --- a/patterns/sticky-table-column/Cover.tsx +++ b/patterns/sticky-table-column/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/sticky-table-headers/Cover.tsx b/patterns/sticky-table-headers/Cover.tsx index 2424ca0..acaad3a 100644 --- a/patterns/sticky-table-headers/Cover.tsx +++ b/patterns/sticky-table-headers/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/switch/Cover.tsx b/patterns/switch/Cover.tsx index 3c622e1..7b1540c 100644 --- a/patterns/switch/Cover.tsx +++ b/patterns/switch/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/tab/Cover.tsx b/patterns/tab/Cover.tsx index a2c1917..f4dbf95 100644 --- a/patterns/tab/Cover.tsx +++ b/patterns/tab/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/teardrop/Cover.tsx b/patterns/teardrop/Cover.tsx index e9d471a..802569b 100644 --- a/patterns/teardrop/Cover.tsx +++ b/patterns/teardrop/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/three-dimensions-card/Cover.tsx b/patterns/three-dimensions-card/Cover.tsx index 7abdf58..456be97 100644 --- a/patterns/three-dimensions-card/Cover.tsx +++ b/patterns/three-dimensions-card/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/three-dimensions-card/styles.css b/patterns/three-dimensions-card/styles.css deleted file mode 100644 index 6fcd4a8..0000000 --- a/patterns/three-dimensions-card/styles.css +++ /dev/null @@ -1,46 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/timeline/Cover.tsx index bb0cdcf..19ef016 100644 --- a/patterns/timeline/Cover.tsx +++ b/patterns/timeline/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/toggle-password-visibility/Cover.tsx b/patterns/toggle-password-visibility/Cover.tsx index 63673cd..d10385f 100644 --- a/patterns/toggle-password-visibility/Cover.tsx +++ b/patterns/toggle-password-visibility/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Circle from '../../placeholders/Circle'; diff --git a/patterns/tooltip/Cover.tsx b/patterns/tooltip/Cover.tsx index cc5bf68..ebd46e1 100644 --- a/patterns/tooltip/Cover.tsx +++ b/patterns/tooltip/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/tooltip/tooltip.css b/patterns/tooltip/tooltip.css deleted file mode 100644 index 2447273..0000000 --- a/patterns/tooltip/tooltip.css +++ /dev/null @@ -1,37 +0,0 @@ -/** - * 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/Cover.tsx b/patterns/tree-diagram/Cover.tsx index 2eed0a9..b1e8725 100644 --- a/patterns/tree-diagram/Cover.tsx +++ b/patterns/tree-diagram/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/tree-diagram/tree-diagram.css b/patterns/tree-diagram/tree-diagram.css deleted file mode 100644 index 5c5656f..0000000 --- a/patterns/tree-diagram/tree-diagram.css +++ /dev/null @@ -1,67 +0,0 @@ -/** - * 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, 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, 0.3); - border-top: 1px solid rgba(0, 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, 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/Cover.tsx b/patterns/triangle-buttons/Cover.tsx index 70161e4..db023ef 100644 --- a/patterns/triangle-buttons/Cover.tsx +++ b/patterns/triangle-buttons/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/upload-button/Cover.tsx b/patterns/upload-button/Cover.tsx index 581115c..0637cd0 100644 --- a/patterns/upload-button/Cover.tsx +++ b/patterns/upload-button/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/validation-icon/Cover.tsx b/patterns/validation-icon/Cover.tsx index b14f0bd..41dd6b3 100644 --- a/patterns/validation-icon/Cover.tsx +++ b/patterns/validation-icon/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/video-background/Cover.tsx b/patterns/video-background/Cover.tsx index 0962f64..259197f 100644 --- a/patterns/video-background/Cover.tsx +++ b/patterns/video-background/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/voting/Cover.tsx b/patterns/voting/Cover.tsx index 3a9ac4c..f98ac56 100644 --- a/patterns/voting/Cover.tsx +++ b/patterns/voting/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/watermark/Cover.tsx b/patterns/watermark/Cover.tsx index 28c2733..e306570 100644 --- a/patterns/watermark/Cover.tsx +++ b/patterns/watermark/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/wizard/Cover.tsx b/patterns/wizard/Cover.tsx index a90e379..5361cad 100644 --- a/patterns/wizard/Cover.tsx +++ b/patterns/wizard/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/zigzag-timeline/Cover.tsx b/patterns/zigzag-timeline/Cover.tsx index 540dc6f..8659a2b 100644 --- a/patterns/zigzag-timeline/Cover.tsx +++ b/patterns/zigzag-timeline/Cover.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame from '../../placeholders/Frame'; diff --git a/patterns/zigzag-timeline/zigzag-timeline.css b/patterns/zigzag-timeline/zigzag-timeline.css deleted file mode 100644 index 5e45f4f..0000000 --- a/patterns/zigzag-timeline/zigzag-timeline.css +++ /dev/null @@ -1,47 +0,0 @@ -/** - * 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%); -} diff --git a/placeholders/Block.tsx b/placeholders/Block.tsx index 35680ab..5e6c6c1 100644 --- a/placeholders/Block.tsx +++ b/placeholders/Block.tsx @@ -1,8 +1,3 @@ -/** - * 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 { random } from '../utils/random'; diff --git a/placeholders/BrowserFrame.tsx b/placeholders/BrowserFrame.tsx index a406012..3007b31 100644 --- a/placeholders/BrowserFrame.tsx +++ b/placeholders/BrowserFrame.tsx @@ -1,8 +1,3 @@ -/** - * 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 { Window } from '@1milligram/design'; diff --git a/placeholders/Circle.tsx b/placeholders/Circle.tsx index 8e1f71c..ace592e 100644 --- a/placeholders/Circle.tsx +++ b/placeholders/Circle.tsx @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - import * as React from 'react'; interface CircleProps { diff --git a/placeholders/Frame.tsx b/placeholders/Frame.tsx index abf77ad..6868118 100644 --- a/placeholders/Frame.tsx +++ b/placeholders/Frame.tsx @@ -1,8 +1,3 @@ -/** - * 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 Frame: React.FC<{}> = ({ children }) => { diff --git a/placeholders/Line.tsx b/placeholders/Line.tsx index 5ce76a4..f5c7a22 100644 --- a/placeholders/Line.tsx +++ b/placeholders/Line.tsx @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - import * as React from 'react'; interface LineProps { diff --git a/placeholders/Rectangle.tsx b/placeholders/Rectangle.tsx index 10e4555..eb73e00 100644 --- a/placeholders/Rectangle.tsx +++ b/placeholders/Rectangle.tsx @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - import * as React from 'react'; interface RectangleProps { diff --git a/placeholders/Square.tsx b/placeholders/Square.tsx index 4025134..75a8e2d 100644 --- a/placeholders/Square.tsx +++ b/placeholders/Square.tsx @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - import * as React from 'react'; interface SquareProps { diff --git a/placeholders/Triangle.tsx b/placeholders/Triangle.tsx index 43e311a..00d83dc 100644 --- a/placeholders/Triangle.tsx +++ b/placeholders/Triangle.tsx @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - import * as React from 'react'; interface TriangleProps { diff --git a/placeholders/VerticalLine.tsx b/placeholders/VerticalLine.tsx index 2f8865a..d931e93 100644 --- a/placeholders/VerticalLine.tsx +++ b/placeholders/VerticalLine.tsx @@ -1,8 +1,3 @@ -/** - * 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 VerticalLine: React.FC<{}> = () => { diff --git a/styles/blocks/_browser-frame.scss b/styles/blocks/_browser-frame.scss index 997741f..476f78c 100644 --- a/styles/blocks/_browser-frame.scss +++ b/styles/blocks/_browser-frame.scss @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - .demo__live { height: 32rem; overflow: auto; diff --git a/styles/patterns/_concave-corners.scss b/styles/patterns/_concave-corners.scss index 0c6b66e..36aa876 100644 --- a/styles/patterns/_concave-corners.scss +++ b/styles/patterns/_concave-corners.scss @@ -1,8 +1,3 @@ -/** - * 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, 0.3); --concave-corners-size: 1rem; diff --git a/styles/patterns/_dropcap.scss b/styles/patterns/_dropcap.scss index c59c774..979928a 100644 --- a/styles/patterns/_dropcap.scss +++ b/styles/patterns/_dropcap.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_dropdown.scss b/styles/patterns/_dropdown.scss index 604ffe8..955fb6d 100644 --- a/styles/patterns/_dropdown.scss +++ b/styles/patterns/_dropdown.scss @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - .p-dropdown-content { display: none; } diff --git a/styles/patterns/_floating-label.scss b/styles/patterns/_floating-label.scss index 98e4193..b9bf8e4 100644 --- a/styles/patterns/_floating-label.scss +++ b/styles/patterns/_floating-label.scss @@ -1,8 +1,3 @@ -/** - * 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; } diff --git a/styles/patterns/_folder-structure.scss b/styles/patterns/_folder-structure.scss index 9117cdc..ef217f3 100644 --- a/styles/patterns/_folder-structure.scss +++ b/styles/patterns/_folder-structure.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_inverted-corners.scss b/styles/patterns/_inverted-corners.scss index 7a64565..830d8c2 100644 --- a/styles/patterns/_inverted-corners.scss +++ b/styles/patterns/_inverted-corners.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_layered-card.scss b/styles/patterns/_layered-card.scss index 04d7913..1dd83e4 100644 --- a/styles/patterns/_layered-card.scss +++ b/styles/patterns/_layered-card.scss @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - .layered-card { position: relative; } diff --git a/styles/patterns/_masonry-grid.scss b/styles/patterns/_masonry-grid.scss index f26a81b..ced6020 100644 --- a/styles/patterns/_masonry-grid.scss +++ b/styles/patterns/_masonry-grid.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_mega-menu.scss b/styles/patterns/_mega-menu.scss index b47f1b4..f7f4c56 100644 --- a/styles/patterns/_mega-menu.scss +++ b/styles/patterns/_mega-menu.scss @@ -1,8 +1,3 @@ -/** - * 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; } diff --git a/styles/patterns/_menu.scss b/styles/patterns/_menu.scss index 8dc8766..188aa84 100644 --- a/styles/patterns/_menu.scss +++ b/styles/patterns/_menu.scss @@ -1,8 +1,3 @@ -/** - * 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/styles/patterns/_nested-dropdowns.scss b/styles/patterns/_nested-dropdowns.scss index 54cabce..7e43fbd 100644 --- a/styles/patterns/_nested-dropdowns.scss +++ b/styles/patterns/_nested-dropdowns.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_price-tag.scss b/styles/patterns/_price-tag.scss index 4972c76..7416226 100644 --- a/styles/patterns/_price-tag.scss +++ b/styles/patterns/_price-tag.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_radio-button-group.scss b/styles/patterns/_radio-button-group.scss index 39d5284..a617574 100644 --- a/styles/patterns/_radio-button-group.scss +++ b/styles/patterns/_radio-button-group.scss @@ -1,8 +1,3 @@ -/** - * 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); } diff --git a/styles/patterns/_star.scss b/styles/patterns/_star.scss index 5494bb6..049148d 100644 --- a/styles/patterns/_star.scss +++ b/styles/patterns/_star.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_three-dimensions-card.scss b/styles/patterns/_three-dimensions-card.scss index 6fcd4a8..914c135 100644 --- a/styles/patterns/_three-dimensions-card.scss +++ b/styles/patterns/_three-dimensions-card.scss @@ -1,8 +1,3 @@ -/** - * 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; } diff --git a/styles/patterns/_tooltip.scss b/styles/patterns/_tooltip.scss index 2447273..aca9649 100644 --- a/styles/patterns/_tooltip.scss +++ b/styles/patterns/_tooltip.scss @@ -1,8 +1,3 @@ -/** - * A collection of popular layouts and patterns made with CSS (https://csslayout.io) - * (c) 2019 - 2021 Nguyen Huu Phuoc - */ - .p-tooltip { position: relative; } diff --git a/styles/patterns/_tree-diagram.scss b/styles/patterns/_tree-diagram.scss index 5c5656f..9aadbae 100644 --- a/styles/patterns/_tree-diagram.scss +++ b/styles/patterns/_tree-diagram.scss @@ -1,8 +1,3 @@ -/** - * 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; diff --git a/styles/patterns/_zigzag-timeline.scss b/styles/patterns/_zigzag-timeline.scss index 5e45f4f..60d979f 100644 --- a/styles/patterns/_zigzag-timeline.scss +++ b/styles/patterns/_zigzag-timeline.scss @@ -1,8 +1,3 @@ -/** - * 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;