Added additional examples in spec
parent
6d9f9aa8db
commit
38e9dd314b
|
@ -58,9 +58,7 @@
|
|||
"max-params": [0, 3],
|
||||
"max-statements": [0, 10],
|
||||
"new-parens": [2],
|
||||
"new-cap": [2, {
|
||||
"capIsNewExceptions": ["CSSModules", "ToInteger", "ToObject", "ToPrimitive", "ToUint32"]
|
||||
}],
|
||||
"new-cap": [0],
|
||||
"newline-after-var": [0],
|
||||
"no-alert": [2],
|
||||
"no-array-constructor": [2],
|
||||
|
|
|
@ -184,19 +184,38 @@
|
|||
}
|
||||
|
||||
.neutral:not([disabled]) {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color-contrast;
|
||||
background-color: $button-neutral-color;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color-contrast;
|
||||
&:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
&:not(.inverse) {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color-contrast;
|
||||
background-color: $button-neutral-color;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color-contrast;
|
||||
&:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.inverse {
|
||||
&.raised, &.floating {
|
||||
color: $button-neutral-color;
|
||||
background-color: $button-neutral-color-contrast;
|
||||
}
|
||||
&.flat, &.toggle {
|
||||
color: $button-neutral-color;
|
||||
&:hover {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
&:focus:not(:active) {
|
||||
background: $button-neutral-color-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.mini.floating {
|
||||
|
|
|
@ -14,11 +14,7 @@ const Card = ({
|
|||
}, className);
|
||||
|
||||
return (
|
||||
<div
|
||||
data-react-toolbox="card"
|
||||
className={classes}
|
||||
{...otherProps}
|
||||
>
|
||||
<div className={classes} {...otherProps}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -35,12 +35,12 @@ const CardTitle = (props) => {
|
|||
</div>
|
||||
)}
|
||||
<div>
|
||||
{(title || children) && (
|
||||
<h5 className={style.title}>
|
||||
{title ? title : children}
|
||||
</h5>
|
||||
{title && <h5 className={style.title}>{title}</h5>}
|
||||
{children && typeof children === 'string' && (
|
||||
<h5 className={style.title}>{children}</h5>
|
||||
)}
|
||||
{subtitle && <p className={style.subtitle}>{subtitle}</p>}
|
||||
{children && typeof children !== 'string' && children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
@ -51,8 +51,11 @@ CardTitle.propTypes = {
|
|||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
// children: PropTypes.string,
|
||||
// className: PropTypes.string,
|
||||
children: PropTypes.oneOfType([
|
||||
PropTypes.string,
|
||||
PropTypes.element
|
||||
]),
|
||||
className: PropTypes.string,
|
||||
subtitle: PropTypes.string,
|
||||
title: PropTypes.string
|
||||
};
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
$card-color-white: unquote("rgb(#{$color-white})") !default;
|
||||
$card-text-overlay: unquote("rgba(#{$color-black}, 0.3)");
|
||||
$card-color-white: $color-white !default;
|
||||
$card-text-overlay: rgba($color-black, 0.35) !default;
|
||||
|
||||
$card-background-color: $card-color-white;
|
||||
|
||||
|
|
|
@ -7,6 +7,7 @@
|
|||
flex-direction: column;
|
||||
border-radius: 2px;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
// Fonts
|
||||
font-size: $card-font-size;
|
||||
|
@ -30,13 +31,19 @@
|
|||
background-position: center center;
|
||||
height: 0;
|
||||
|
||||
&.wide {
|
||||
&.wide, &.square {
|
||||
width: 100%;
|
||||
|
||||
.content > iframe, .content > video, .content > img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.wide {
|
||||
padding-top: 56.25%;
|
||||
}
|
||||
|
||||
&.square {
|
||||
width: 100%;
|
||||
padding-top: 100%;
|
||||
}
|
||||
|
||||
|
@ -52,6 +59,7 @@
|
|||
justify-content: flex-end;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.contentOverlay {
|
||||
|
@ -120,7 +128,7 @@
|
|||
justify-content: flex-start;
|
||||
padding: $card-padding-sm $card-padding-sm;
|
||||
|
||||
button[data-react-toolbox="button"] {
|
||||
button {
|
||||
min-width: 0;
|
||||
margin: 0 $card-padding-sm/2;
|
||||
padding: 0 $card-padding-sm;
|
||||
|
@ -134,9 +142,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
.cardMedia & {
|
||||
button[data-react-toolbox="button"] {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -11,21 +11,65 @@ import style from '../style';
|
|||
|
||||
const dummyText = 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.';
|
||||
|
||||
const demos = [
|
||||
const Spacer = () => {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flex: '1 1 auto'
|
||||
}}/>
|
||||
);
|
||||
};
|
||||
|
||||
const DemoList = (props) => <ul className={style.demoList}>{props.children}</ul>;
|
||||
|
||||
const DemoListItem = (props) => (
|
||||
<li className={style.demoListItem}>
|
||||
<div className={style.demo}>
|
||||
{props.component}
|
||||
</div>
|
||||
<div className={style.demoName}>
|
||||
{props.name}
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
|
||||
const basic = [
|
||||
{
|
||||
name: 'Basic Card',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<CardTitle>Basic Card</CardTitle>
|
||||
<CardTitle
|
||||
title="Title goes here"
|
||||
subtitle="Subtitle here"
|
||||
/>
|
||||
<CardText>{dummyText}</CardText>
|
||||
<CardActions>
|
||||
<Button label="Action" />
|
||||
<Button label="More" />
|
||||
<Button label="Action 1" />
|
||||
<Button label="Action 2" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}, {
|
||||
name: 'Card Media Area',
|
||||
name: 'Raised Card',
|
||||
component: (
|
||||
<Card raised className={style.card}>
|
||||
<CardTitle
|
||||
title="Title goes here"
|
||||
subtitle="Subtitle here"
|
||||
/>
|
||||
<CardText>{dummyText}</CardText>
|
||||
<CardActions>
|
||||
<Button label="Action 1" />
|
||||
<Button label="Action 2" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const media = [
|
||||
{
|
||||
name: '16:9 Card Media Area',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<CardMedia
|
||||
|
@ -39,21 +83,45 @@ const demos = [
|
|||
</Card>
|
||||
)
|
||||
}, {
|
||||
name: '16:9 Card Media',
|
||||
name: '16:9 Card Media Image',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<CardMedia
|
||||
aspectRatio="wide"
|
||||
image="https://placeimg.com/800/450/nature"
|
||||
/>
|
||||
<CardTitle
|
||||
title="Basic Card"
|
||||
subtitle="An awesome basic card"
|
||||
/>
|
||||
<CardTitle
|
||||
title="Title goes here"
|
||||
subtitle="Subtitle here"
|
||||
/>
|
||||
<CardText>{dummyText}</CardText>
|
||||
</Card>
|
||||
)
|
||||
}, {
|
||||
name: 'Square Media Card',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<CardMedia
|
||||
contentOverlay
|
||||
aspectRatio="square"
|
||||
image="https://placeimg.com/700/700/nature"
|
||||
>
|
||||
<CardTitle
|
||||
title="Title goes here"
|
||||
subtitle="Subtitle here"
|
||||
/>
|
||||
<CardActions>
|
||||
<Button inverse label="Action 1" />
|
||||
<Button inverse label="Action 2" />
|
||||
</CardActions>
|
||||
</CardMedia>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const avatar = [
|
||||
{
|
||||
name: 'Avatar Card Title',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
|
@ -67,29 +135,72 @@ const demos = [
|
|||
image="https://placeimg.com/800/450/nature"
|
||||
/>
|
||||
<CardActions style={{ justifyContent: 'flex-end' }}>
|
||||
<Button icon="feedback" />
|
||||
<Button icon="favorite" />
|
||||
<Button toggle icon="share" />
|
||||
<Button toggle icon="favorite" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}, {
|
||||
name: 'Square Media Card',
|
||||
name: 'Video in a card',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<CardTitle
|
||||
avatar="https://placeimg.com/80/80/animals"
|
||||
title="Avatar Card"
|
||||
subtitle="An awesome basic card"
|
||||
/>
|
||||
<CardMedia
|
||||
contentOverlay
|
||||
aspectRatio="square"
|
||||
image="https://placeimg.com/800/450/nature"
|
||||
aspectRatio="wide"
|
||||
>
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/sGbxmsDFVnE?rel=0&showinfo=0" frameBorder="0" allowFullScreen></iframe>
|
||||
</CardMedia>
|
||||
<CardActions style={{ justifyContent: 'flex-end' }}>
|
||||
<Button toggle icon="report-problem" />
|
||||
<Spacer/>
|
||||
<Button toggle icon="share" />
|
||||
<Button toggle icon="favorite" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
const small = [
|
||||
{
|
||||
name: 'Small Media Card',
|
||||
component: (
|
||||
<Card>
|
||||
<CardMedia
|
||||
aspectRatio="square"
|
||||
image="https://placeimg.com/400/400/nature"
|
||||
>
|
||||
<CardTitle>Test</CardTitle>
|
||||
</CardMedia>
|
||||
<CardActions style={{justifyContent: 'center'}}>
|
||||
<Button toggle icon="thumb-down" />
|
||||
<Button toggle icon="thumb-up" />
|
||||
<Button toggle icon="turned-in-not" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}, {
|
||||
name: 'Alternative Layout Example',
|
||||
component: (
|
||||
<Card className={style.card}>
|
||||
<div className={style.cardRow}>
|
||||
<CardTitle
|
||||
title="Title goes here"
|
||||
subtitle="Subtitle here"
|
||||
/>
|
||||
<CardActions>
|
||||
<Button label="Action 1" />
|
||||
<Button label="Action 2" />
|
||||
</CardActions>
|
||||
</CardMedia>
|
||||
<CardMedia
|
||||
className={style.media}
|
||||
image="https://placeimg.com/400/400/nature"
|
||||
/>
|
||||
</div>
|
||||
<CardActions>
|
||||
<Button label="Action 1" />
|
||||
<Button label="Action 2" />
|
||||
</CardActions>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
@ -101,18 +212,30 @@ class CardTest extends React.Component {
|
|||
return (
|
||||
<div>
|
||||
<h2>Cards</h2>
|
||||
<ul className={style.demoList}>
|
||||
{demos.map((demo, i) => (
|
||||
<li key={i} className={style.demoListItem}>
|
||||
<div className={style.demo}>
|
||||
{demo.component}
|
||||
</div>
|
||||
<div className={style.demoName}>
|
||||
{demo.name}
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<DemoList>
|
||||
{basic.map((demo, i) => (
|
||||
<DemoListItem key={i} {...demo}/>
|
||||
))}
|
||||
</ul>
|
||||
</DemoList>
|
||||
|
||||
<DemoList>
|
||||
{media.map((demo, i) => (
|
||||
<DemoListItem key={i} {...demo}/>
|
||||
))}
|
||||
</DemoList>
|
||||
|
||||
<DemoList>
|
||||
{avatar.map((demo, i) => (
|
||||
<DemoListItem key={i} {...demo}/>
|
||||
))}
|
||||
</DemoList>
|
||||
|
||||
<DemoList>
|
||||
{small.map((demo, i) => (
|
||||
<DemoListItem key={i} {...demo}/>
|
||||
))}
|
||||
</DemoList>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
@import "../components/base";
|
||||
@import "../components/commons";
|
||||
@import "../components/app_bar/config";
|
||||
@import "../components/button/config";
|
||||
|
||||
|
@ -54,7 +54,7 @@ $offset: 1.8 * $unit;
|
|||
}
|
||||
|
||||
.primary {
|
||||
background-color: unquote("rgb(#{$color-primary})");
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
.demoList {
|
||||
|
@ -92,3 +92,15 @@ $offset: 1.8 * $unit;
|
|||
.card {
|
||||
width: 345px;
|
||||
}
|
||||
|
||||
.cardRow {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
|
||||
.media {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
margin: 16px 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue