Añadir plantilla

Base para front

2 files changed, 218 insertions, 0 deletions

diff --git a/front/odiparpack/app/components/Divider/divider-jss.js b/front/odiparpack/app/components/Divider/divider-jss.js
new file mode 100644
index 0000000..e813b8d
--- /dev/null
+++ b/front/odiparpack/app/components/Divider/divider-jss.js
@@ -0,0 +1,70 @@
+const space = {
+  margin: '40px 0'
+};
+const styles = theme => ({
+  gradient: {
+    extend: space,
+    border: 0,
+    height: 1,
+    background: '#333',
+    backgroundImage: 'linear-gradient(to right, #fff, #8c8c8c, #fff)'
+  },
+  colorDash: {
+    border: 0,
+    extend: space,
+    borderBottom: `1px dashed ${theme.palette.grey[100]}`,
+    background: '#999'
+  },
+  shadow: {
+    height: 12,
+    extend: space,
+    border: 0,
+    boxShadow: 'inset 0 12px 12px -12px rgba(0, 0, 0, 0.5)'
+  },
+  inset: {
+    border: 0,
+    extend: space,
+    height: 0,
+    borderTop: '1px solid rgba(0, 0, 0, 0.1)',
+    borderBottom: '1px solid rgba(255, 255, 255, 0.3)'
+  },
+  flairedEdges: {
+    overflow: 'visible', /* For IE */
+    extend: space,
+    height: 30,
+    borderStyle: 'solid',
+    borderColor: theme.palette.grey[400],
+    borderWidth: '1px 0 0 0',
+    borderRadius: 20,
+    '&:before': {
+      display: 'block',
+      content: '""',
+      height: 30,
+      marginTop: -31,
+      borderStyle: 'solid',
+      borderColor: theme.palette.grey[400],
+      borderWidth: '0 0 1px 0',
+      borderRadius: 20
+    }
+  },
+  content: {
+    overflow: 'visible', /* For IE */
+    extend: space,
+    padding: 0,
+    border: 'none',
+    borderTop: `1px solid ${theme.palette.grey[400]}`,
+    color: '#333',
+    textAlign: 'center',
+    '&:after': {
+      content: 'attr(data-content)',
+      display: 'inline-block',
+      position: 'relative',
+      top: -15,
+      fontSize: 14,
+      padding: '0 0.25em',
+      background: '#FFF'
+    }
+  }
+});
+
+export default styles;
diff --git a/front/odiparpack/app/components/Divider/index.js b/front/odiparpack/app/components/Divider/index.js
new file mode 100644
index 0000000..8e5c010
--- /dev/null
+++ b/front/odiparpack/app/components/Divider/index.js
@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import styles from './divider-jss';
+
+/* Gradient Divider */
+const Gradient = props => {
+  const {
+    thin,
+    classes,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.gradient} style={{ height: `${thin}` }} {...rest} />
+  );
+};
+
+Gradient.propTypes = {
+  thin: PropTypes.number,
+  classes: PropTypes.object.isRequired,
+};
+
+Gradient.defaultProps = {
+  thin: 1
+};
+
+export const GradientDivider = withStyles(styles)(Gradient);
+
+/* Dash Divider */
+
+const Dash = props => {
+  const {
+    thin,
+    classes,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.colorDash} style={{ height: `${thin}` }} {...rest} />
+  );
+};
+
+Dash.propTypes = {
+  classes: PropTypes.object.isRequired,
+  thin: PropTypes.number,
+};
+
+Dash.defaultProps = {
+  thin: 1
+};
+
+export const DashDivider = withStyles(styles)(Dash);
+
+/* Shadow Divider */
+
+const Shadow = props => {
+  const {
+    classes,
+    thin,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.shadow} style={{ height: `${thin}` }} {...rest} />
+  );
+};
+
+Shadow.propTypes = {
+  classes: PropTypes.object.isRequired,
+  thin: PropTypes.number,
+};
+
+Shadow.defaultProps = {
+  thin: 1
+};
+
+export const ShadowDivider = withStyles(styles)(Shadow);
+
+/* Shadow Inset */
+
+const Inset = props => {
+  const {
+    classes,
+    thin,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.inset} style={{ height: `${thin}` }} {...rest} />
+  );
+};
+
+Inset.propTypes = {
+  classes: PropTypes.object.isRequired,
+  thin: PropTypes.number,
+};
+
+Inset.defaultProps = {
+  thin: 1
+};
+
+export const InsetDivider = withStyles(styles)(Inset);
+
+/* Shadow FlairedEdges */
+
+export const FlairedEdges = props => {
+  const {
+    classes,
+    thin,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.flairedEdges} style={{ height: `${thin}` }} {...rest} />
+  );
+};
+
+FlairedEdges.propTypes = {
+  classes: PropTypes.object.isRequired,
+  thin: PropTypes.number,
+};
+
+FlairedEdges.defaultProps = {
+  thin: 1
+};
+
+export const FlairedEdgesDivider = withStyles(styles)(FlairedEdges);
+
+
+export const Content = props => {
+  const {
+    classes,
+    thin,
+    content,
+    ...rest
+  } = props;
+  return (
+    <hr className={classes.content} style={{ height: `${thin}` }} data-content={content} {...rest} />
+  );
+};
+
+Content.propTypes = {
+  classes: PropTypes.object.isRequired,
+  thin: PropTypes.number,
+  content: PropTypes.string.isRequired,
+};
+
+Content.defaultProps = {
+  thin: 1
+};
+
+export const ContentDivider = withStyles(styles)(Content);