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

Merge pull request #75 from phuoc-ng/popover-arrow

Browse Source 
Add popover arrow
This commit is contained in:
phuoc-ng
2019-12-03 22:27:35 +07:00
committed by GitHub
parent 9ab29042b6 5757fe5208
commit 5b50ff5f2a
5 changed files with 478 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
client/constants/Pattern.ts
View File

@@ -28,6 +28,7 @@ enum Pattern {
Notification = 'Notification', Notification = 'Notification',
OverlayPlayButton = 'Overlay play button', OverlayPlayButton = 'Overlay play button',
Pagination = 'Pagination', Pagination = 'Pagination',
PopoverArrow = 'Popover arrow',
PresenceIndicator = 'Presence indicator', PresenceIndicator = 'Presence indicator',
PreviousNextButtons = 'Previous next buttons', PreviousNextButtons = 'Previous next buttons',
PricingTable = 'Pricing table', PricingTable = 'Pricing table',

1
client/pages/ExplorePage.tsx
View File

@@ -116,6 +116,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Notification} /> <CoverCard pattern={Pattern.Notification} />
<CoverCard pattern={Pattern.OverlayPlayButton} /> <CoverCard pattern={Pattern.OverlayPlayButton} />
<CoverCard pattern={Pattern.Pagination} /> <CoverCard pattern={Pattern.Pagination} />
<CoverCard pattern={Pattern.PopoverArrow} />
<CoverCard pattern={Pattern.PresenceIndicator} /> <CoverCard pattern={Pattern.PresenceIndicator} />
<CoverCard pattern={Pattern.PreviousNextButtons} /> <CoverCard pattern={Pattern.PreviousNextButtons} />
<CoverCard pattern={Pattern.PricingTable} /> <CoverCard pattern={Pattern.PricingTable} />

47
client/patterns/popover-arrow/Cover.tsx Normal file
View File

@@ -0,0 +1,47 @@
import React from 'react';
import Frame from '../../placeholders/Frame';
const Cover: React.FC<{}> = () => {
return (
<Frame>
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '60%',
position: 'relative',
width: '100%',
}}
>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
height: '10px',
left: '10px',
position: 'absolute',
top: 0,
transform: 'translate(50%, -50%) rotate(225deg)',
width: '10px',
zIndex: 0,
}}
/>
</div>
</div>
</Frame>
);
};
export default Cover;

428
client/patterns/popover-arrow/Details.tsx Normal file
View File

@@ -0,0 +1,428 @@
import React from 'react';
import DetailsLayout from '../../layouts/DetailsLayout';
import BrowserFrame from '../../placeholders/BrowserFrame';
const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Popover arrow">
<div style={{ padding: '64px 32px' }}>
<BrowserFrame
content={(
<div
style={{
alignItems: 'center',
display: 'flex',
flexDirection: 'column',
height: '100%',
justifyContent: 'center',
padding: '8px',
}}
>
<div
style={{
border: '1px solid rgba(0, 0, 0, 0.3)',
borderRadius: '4px',
height: '300px',
marginBottom: '16px',
position: 'relative',
width: '300px',
}}
>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '32px',
position: 'absolute',
top: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: '50%',
position: 'absolute',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: '32px',
top: 0,
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '32px',
transform: 'translate(50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
position: 'absolute',
right: 0,
top: '50%',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
borderTop: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
position: 'absolute',
right: 0,
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '32px',
position: 'absolute',
transform: 'translate(50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
left: '50%',
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderRight: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '-16px',
height: '16px',
position: 'absolute',
right: '32px',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '32px',
transform: 'translate(-50%, 50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
height: '16px',
left: 0,
position: 'absolute',
top: '50%',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
<div
style={{
backgroundColor: '#FFF',
borderBottom: '1px solid rgba(0, 0, 0, 0.3)',
borderLeft: '1px solid rgba(0, 0, 0, 0.3)',
bottom: '32px',
height: '16px',
left: 0,
position: 'absolute',
transform: 'translate(-50%, -50%) rotate(45deg)',
width: '16px',
}}
/>
</div>
</div>
)}
source={`
<div style="
/* Border */
border: 1px solid rgba(0, 0, 0, 0.3);
/* Used to position the arrow */
position: relative;
">
<!-- The content -->
...
<!-- Top left arrow -->
<div style="
/* Position at the top left corner */
left: 32px;
position: absolute;
top: 0px;
/* Border */
background-color: #FFF;
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Top center arrow -->
<div style="
/* Position at the top center */
left: 50%;
position: absolute;
top: 0px;
/* Border */
background-color: #FFF;
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Top right arrow -->
<div style="
/* Position at the top right corner */
position: absolute;
right: 32px;
top: 0px;
/* Border */
background-color: #FFF;
border-left: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Right top arrow -->
<div style="
/* Position at the right top corner */
position: absolute;
right: 0;
top: 32px;
/* Border */
background-color: #FFF;
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, 50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Right center arrow -->
<div style="
/* Position at the right center */
position: absolute;
right: 0;
top: 50%;
/* Border */
background-color: #FFF;
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Right bottom arrow -->
<div style="
/* Position at the right bottom corner */
bottom: 32px;
position: absolute;
right: 0;
/* Border */
background-color: #FFF;
border-right: 1px solid rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Bottom left arrow -->
<div style="
/* Position at the bottom left corner */
bottom: -16px;
position: absolute;
left: 32px;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Bottom center arrow -->
<div style="
/* Position at the bottom center */
bottom: -16px;
position: absolute;
left: 50%;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Bottom right arrow -->
<div style="
/* Position at the bottom right corner */
bottom: -16px;
position: absolute;
right: 32px;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-right: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Left top arrow -->
<div style="
/* Position at the left top corner */
left: 0;
position: absolute;
top: 32px;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, 50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Left center arrow -->
<div style="
/* Position at the left center */
left: 0;
position: absolute;
top: 50%;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
<!-- Left bottom arrow -->
<div style="
/* Position at the left bottom corner */
bottom: 32px;
left: 0;
position: absolute;
/* Border */
background-color: #FFF;
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
border-left: 1px solid rgba(0, 0, 0, 0.3);
transform: translate(-50%, -50%) rotate(45deg);
/* Size */
height: 16px;
width: 16px;
" />
</div>
`}
/>
</div>
</DetailsLayout>
);
};
export default Details;

1
public/sitemap.xml
View File

@@ -33,6 +33,7 @@
<url><loc>https://csslayout.io/patterns/notification</loc></url> <url><loc>https://csslayout.io/patterns/notification</loc></url>
<url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url> <url><loc>https://csslayout.io/patterns/overlay-play-button</loc></url>
<url><loc>https://csslayout.io/patterns/pagination</loc></url> <url><loc>https://csslayout.io/patterns/pagination</loc></url>
<url><loc>https://csslayout.io/patterns/popover-arrow</loc></url>
<url><loc>https://csslayout.io/patterns/presence-indicator</loc></url> <url><loc>https://csslayout.io/patterns/presence-indicator</loc></url>
<url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url> <url><loc>https://csslayout.io/patterns/previous-next-buttons</loc></url>
<url><loc>https://csslayout.io/patterns/pricing-table</loc></url> <url><loc>https://csslayout.io/patterns/pricing-table</loc></url>