Merge branch 'master' of https://github.com/abouolia/Ratteb

client/src/components/Details/index.js

@@ -1,5 +1,8 @@
 import React from 'react';
-import className from 'classname';
+import classNames from 'classnames';
+import { Col, Row } from 'components';
+
+import 'style/components/Details.scss';
 
 /**
  * Details menu.
@@ -7,7 +10,7 @@ import className from 'classname';
 export function DetailsMenu({ children, vertical = false }) {
   return (
     <div
-      className={className('details-menu', {
+      className={classNames('details-menu', {
         'is-vertical': vertical,
       })}
     >
@@ -17,9 +20,9 @@ export function DetailsMenu({ children, vertical = false }) {
 }
 
 /**
- * Detail item.
+ * Detail item vertical .
  */
-export function DetailItem({ label, children }) {
+export function DetailItemVER({ label, children }) {
   return (
     <div class="detail-item">
       <div class="detail-item__label">{label}</div>
@@ -27,3 +30,17 @@ export function DetailItem({ label, children }) {
     </div>
   );
 }
+
+/**
+ * Detail item horizontal .
+ */
+export function DetailItemHOR({ label, children }) {
+  return (
+    <Row>
+      <Col className="label" xs={3}>
+        {label}
+      </Col>
+      <Col xs={3}>{children}</Col>
+    </Row>
+  );
+}

client/src/style/components/Details.scss

@@ -1,21 +1,42 @@
 .details-menu {
+  margin: 15px;
+  border: 1px solid #d2dce2;
+
+  &--vertical {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start;
+    padding: 10px;
+    margin-bottom: 15px;
+    // border-bottom: 1px solid #d2dce2;
+  }
 
-    &.is-vertical {}
+  &--horizontal {
+    display: flex;
+    flex-direction: column;
+    line-height: 30px;
+    padding: 10px;
 
-    .detail-item {
+    .label {
-
+      color: #666666;
-
+      font-weight: 500;
-        &__label {
-            color: #666666;
-            font-weight: 500;
-        }
-
-        &__content {
-            text-transform: capitalize;
-            margin: 5px 0;
-        }
     }
-}
+  }
+
+  &.is-vertical {
+  }
+
+  .detail-item {
+    flex: 1;
+    line-height: 1.3rem;
+    &__label {
+      color: #666666;
+      font-weight: 500;
+    }
+
+    &__content {
+      text-transform: capitalize;
+      margin: 5px 0;
+    }
+  }
+}