mirror of
https://github.com/phuoc-ng/csslayout.git
synced 2025-08-08 07:07:15 +02:00
Cleanup
This commit is contained in:
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import { random } from '../../utils/random';
|
import { random } from '../../utils/random';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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);
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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);
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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;
|
|
@@ -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;
|
|
||||||
}
|
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Circle from '../../placeholders/Circle';
|
import Circle from '../../placeholders/Circle';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
@@ -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 * as React from 'react';
|
||||||
|
|
||||||
import Frame from '../../placeholders/Frame';
|
import Frame from '../../placeholders/Frame';
|
||||||
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user