diff --git a/.eslintrc b/.eslintrc
index 5b38b7a8..62ff84a8 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -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],
diff --git a/components/button/style.scss b/components/button/style.scss
index 8368d328..dde24b62 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -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 {
diff --git a/components/card/Card.jsx b/components/card/Card.jsx
index 2ee1bc6a..89c7d5fc 100644
--- a/components/card/Card.jsx
+++ b/components/card/Card.jsx
@@ -14,11 +14,7 @@ const Card = ({
}, className);
return (
-
+
{children}
);
diff --git a/components/card/CardTitle.jsx b/components/card/CardTitle.jsx
index b76e19bc..1fd4c917 100644
--- a/components/card/CardTitle.jsx
+++ b/components/card/CardTitle.jsx
@@ -35,12 +35,12 @@ const CardTitle = (props) => {
)}
- {(title || children) && (
-
- {title ? title : children}
-
+ {title &&
{title}
}
+ {children && typeof children === 'string' && (
+
{children}
)}
{subtitle &&
{subtitle}
}
+ {children && typeof children !== 'string' && children}
);
@@ -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
};
diff --git a/components/card/_config.scss b/components/card/_config.scss
index 7aa635d3..b301bf00 100644
--- a/components/card/_config.scss
+++ b/components/card/_config.scss
@@ -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;
diff --git a/components/card/style.scss b/components/card/style.scss
index 26554060..5a1e1f04 100644
--- a/components/card/style.scss
+++ b/components/card/style.scss
@@ -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"] {
-
- }
- }
}
diff --git a/spec/components/card.jsx b/spec/components/card.jsx
index 7ec0146a..e620ab64 100644
--- a/spec/components/card.jsx
+++ b/spec/components/card.jsx
@@ -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 (
+
+ );
+};
+
+const DemoList = (props) => ;
+
+const DemoListItem = (props) => (
+
+
+ {props.component}
+
+
+ {props.name}
+
+
+);
+
+const basic = [
{
name: 'Basic Card',
component: (
- Basic Card
+
{dummyText}
-
-
+
+
)
}, {
- name: 'Card Media Area',
+ name: 'Raised Card',
+ component: (
+
+
+ {dummyText}
+
+
+
+
+
+ )
+ }
+];
+
+const media = [
+ {
+ name: '16:9 Card Media Area',
component: (
)
}, {
- name: '16:9 Card Media',
+ name: '16:9 Card Media Image',
component: (
-
+
{dummyText}
)
}, {
+ name: 'Square Media Card',
+ component: (
+
+
+
+
+
+
+
+
+
+ )
+ }
+];
+
+const avatar = [
+ {
name: 'Avatar Card Title',
component: (
@@ -67,29 +135,72 @@ const demos = [
image="https://placeimg.com/800/450/nature"
/>
-
-
+
+
)
}, {
- name: 'Square Media Card',
+ name: 'Video in a card',
component: (
+
+
+
+
+
+
+
+
+
+
+ )
+ }
+];
+
+const small = [
+ {
+ name: 'Small Media Card',
+ component: (
+
+
+ Test
+
+
+
+
+
+
+
+ )
+ }, {
+ name: 'Alternative Layout Example',
+ component: (
+
+
-
-
-
-
-
+
+
+
+
+
+
)
}
@@ -101,18 +212,30 @@ class CardTest extends React.Component {
return (
Cards
-
- {demos.map((demo, i) => (
- -
-
- {demo.component}
-
-
- {demo.name}
-
-
+
+
+ {basic.map((demo, i) => (
+
))}
-
+
+
+
+ {media.map((demo, i) => (
+
+ ))}
+
+
+
+ {avatar.map((demo, i) => (
+
+ ))}
+
+
+
+ {small.map((demo, i) => (
+
+ ))}
+
);
}
diff --git a/spec/style.scss b/spec/style.scss
index efcd4b7f..0374f323 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -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;
+ }
+}