Card: new outline styles

Author: nolimits4web

src/core/components/card/card-ios.less

@@ -10,6 +10,10 @@
     box-shadow: 0px 1px 2px rgba(0,0,0,0.3);
     margin: 10px;
   }
+  .card-outline {
+    box-shadow: none;
+    border: 1px solid rgba(0,0,0,0.12);
+  }
   .card-header, .card-footer {
     a.link {
       line-height: 44px;
@@ -64,6 +68,9 @@
       .card {
         background-color: @blockBgDark;
       }
+      .card-outline {
+        border-color: #282829;
+      }
       .card-header {
         .hairline-color(bottom, @blockBorderColorDark);
       }

src/core/components/card/card-md.less

@@ -10,6 +10,10 @@
     margin: 8px;
     .elevation(1);
   }
+  .card-outline {
+    box-shadow: none;
+    border: 1px solid rgba(0,0,0,0.12);
+  }
   .card-header, .card-footer {
     a.link {
       .button;
@@ -61,6 +65,9 @@
       .card {
         background-color: @blockBgDark;
       }
+      .card-outline {
+        border-color: #282829;
+      }
       .card-header {
         .hairline-color(bottom, @blockBorderColorDark);
       }

src/phenome/components/card.jsx

@@ -14,6 +14,7 @@ export default {
     title: [String, Number],
     content: [String, Number],
     footer: [String, Number],
+    outline: Boolean,
     padding: {
       type: Boolean,
       default: true,
@@ -31,6 +32,7 @@ export default {
       content,
       footer,
       padding,
+      outline,
     } = props;
 
     let headerEl;
@@ -40,6 +42,9 @@ export default {
     const classes = Utils.classNames(
       className,
       'card',
+      {
+        'card-outline': outline,
+      },
       Mixins.colorClasses(props),
     );