mirror_css/csslayout
1
0
Fork 0
mirror of https://github.com/phuoc-ng/csslayout.git synced 2025-08-06 06:07:33 +02:00
Code Issues Releases Wiki Activity

Cleanup

Browse Source
This commit is contained in:
Phuoc Nguyen
2021-09-27 23:33:13 +07:00
parent bd87028ce8
commit 829d57c1bf
148 changed files with 0 additions and 1350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
patterns/accordion/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/arrow-buttons/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/avatar-list/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/avatar/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/badge/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/button-with-icon/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/card-layout/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/card/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/chip/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

58
patterns/chip/InputChip.tsx
View File

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

5
patterns/circular-navigation/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/close-button/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/color-swatch/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
patterns/concave-corners/Cover.tsx
View File

@@ -1,7 +1,3 @@
/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

66
patterns/concave-corners/concave-corners.css
View File

@@ -1,66 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
:root {
--concave-corners-background: rgba(0, 0, 0, 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;
}

5
patterns/cookie-banner/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/corner-ribbon/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/curved-background/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/custom-checkbox-button/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/custom-radio-button/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/diagonal-section/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/docked-at-corner/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/dot-leader/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/dot-navigation/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/drawer/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/drop-area/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/drop-cap/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

14
patterns/drop-cap/dropcap.css
View File

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

5
patterns/dropdown/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

12
patterns/dropdown/dropdown.css
View File

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

5
patterns/fading-long-section/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import { random } from '../../utils/random';

5
patterns/feature-comparison/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/feature-list/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/fixed-at-corner/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/fixed-at-side/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/floating-label/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

14
patterns/floating-label/floating-label.css
View File

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

5
patterns/folder-structure/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

54
patterns/folder-structure/folder-structure.css
View File

@@ -1,54 +0,0 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
:root {
--folder-structure-item-height: 1rem;
--folder-structure-item-margin-left: 2rem;
--folder-structure-item-padding-top: 1rem;
}
.folder-structure ul {
/* Reset */
list-style-type: none;
margin: 0;
}
.folder-structure li {
padding: var(--folder-structure-item-padding-top) 0rem 0rem 0rem;
position: relative;
}
.folder-structure li::before {
border-left: 1px solid rgba(0, 0, 0, 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);
}

5
patterns/full-background/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/full-screen-menu/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/holy-grail/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/initial-avatar/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/input-addon/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

4
patterns/inverted-corners/Cover.tsx
View File

@@ -1,7 +1,3 @@
/** * A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

53
patterns/inverted-corners/inverted-corners.css
View File

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

5
patterns/keyboard-shortcut/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/layered-card/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

26
patterns/layered-card/styles.css
View File

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

5
patterns/lined-paper/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/masonry-grid/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

20
patterns/masonry-grid/masonry-grid.css
View File

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

5
patterns/media-object/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/mega-menu/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

22
patterns/mega-menu/mega-menu.css
View File

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

5
patterns/menu/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

8
patterns/menu/menu.css
View File

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

5
patterns/modal/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/nested-dropdowns/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

43
patterns/nested-dropdowns/nested-dropdowns.css
View File

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

5
patterns/notification/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/overlay-play-button/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/pagination/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/popover-arrow/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/presence-indicator/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/previous-next-buttons/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/price-tag/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

63
patterns/price-tag/price-tag.css
View File

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

5
patterns/pricing-table/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/progress-bar/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/property-list/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/questions-and-answers/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/radial-progress-bar/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/radio-button-group/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

11
patterns/radio-button-group/radio-button-group.css
View File

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

5
patterns/radio-switch/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/rating/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

18
patterns/rating/Star.tsx
View File

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

33
patterns/rating/star.css
View File

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

5
patterns/resizable-element/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/ribbon/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/same-height-columns/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/search-box/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/separator/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sidebar/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/simple-grid/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/slider/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/spin-button/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/split-navigation/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/split-screen/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Circle from '../../placeholders/Circle';

5
patterns/stacked-cards/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/stamp-border/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/statistic/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/status-light/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/stepper-input/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sticky-footer/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sticky-header/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sticky-sections/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sticky-table-column/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

5
patterns/sticky-table-headers/Cover.tsx
View File

@@ -1,8 +1,3 @@
/**
* A collection of popular layouts and patterns made with CSS (https://csslayout.io)
* (c) 2019 - 2021 Nguyen Huu Phuoc <https://twitter.com/nghuuphuoc>
*/
import * as React from 'react';
import Frame from '../../placeholders/Frame';

Some files were not shown because too many files have changed in this diff Show More