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

Link to close button page from modal and notification patterns

Browse Source
This commit is contained in:
Phuoc Nguyen
2019-12-11 20:00:58 +07:00
parent 28597802bf
commit 885e706294
3 changed files with 12 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
client/pages/ExplorePage.tsx
View File

@@ -62,7 +62,7 @@ const ExplorePage = () => {
textAlign: 'center',
}}
>
Here is the collection of patterns
Here is the collection of 63 patterns
</h2>
<div style={{ marginBottom: '32px', textAlign: 'center' }}>
All covers you see in this page are made with CSS only. Inspect them! 🎉
@@ -108,7 +108,6 @@ const ExplorePage = () => {
<div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', padding: '32px' }}>
<CoverCard pattern={Pattern.ButtonWithIcon} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.CustomCheckboxButton} />
<CoverCard pattern={Pattern.CustomRadioButton} />
<CoverCard pattern={Pattern.FloatingLabel} />
@@ -136,6 +135,7 @@ const ExplorePage = () => {
<CoverCard pattern={Pattern.Badge} />
<CoverCard pattern={Pattern.Card} />
<CoverCard pattern={Pattern.Centering} />
<CoverCard pattern={Pattern.CloseButton} />
<CoverCard pattern={Pattern.CookieBanner} />
<CoverCard pattern={Pattern.CornerRibbon} />
<CoverCard pattern={Pattern.DockedAtCorner} />

5
client/patterns/modal/Details.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
@@ -10,6 +11,10 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Modal">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use the <Link to='/patterns/close-button'>close button</Link> to
represent the button for closing the modal.
</div>
<BrowserFrame
content={(
<div

5
client/patterns/notification/Details.tsx
View File

@@ -1,4 +1,5 @@
import React from 'react';
import { Link } from 'react-router-dom';
import DetailsLayout from '../../layouts/DetailsLayout';
import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ const Details: React.FC<{}> = () => {
return (
<DetailsLayout title="Notification">
<div style={{ padding: '64px 32px' }}>
<div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
You can use the <Link to='/patterns/close-button'>close button</Link> to
represent the button for closing the notification.
</div>
<BrowserFrame
content={(
<div