TrizTech/ohif-viewer
15
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

clean up to merge initial code into base branch

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-02-25 19:00:33 -03:00 committed by James A. Petts
parent b53d4528fb
commit 3110978d03
20 changed files with 42 additions and 60676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
platform/ui/gatsby-config.js
View File

@ -1,3 +1,3 @@
module.exports = {
plugins: ['gatsby-plugin-sass'],
plugins: ['gatsby-plugin-sass', `gatsby-plugin-postcss`],
};

13
platform/ui/package.json
View File

@ -19,18 +19,15 @@
],
"scripts": {
"start": "yarn run dev",
"dev": "concurrently \"npm run watch:css\" \"docz dev\"",
"build": "concurrently \"npm run build:css\" \"docz build\"",
"serve": "docz serve",
"build:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css",
"watch:css": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css -w"
"build:styles": "postcss src/styles/tailwind.css -o src/gatsby-theme-docz/app.css",
"dev": "docz dev",
"build": "docz build",
"serve": "docz serve"
},
"dependencies": {
"@emotion/core": "^10.0.27",
"@emotion/styled": "^10.0.27",
"classnames": "^2.2.6",
"concurrently": "^5.1.0",
"docz": "^2.2.0",
"gatsby-plugin-postcss": "^2.1.20",
"gatsby-plugin-sass": "^2.1.28",
"node-sass": "^4.13.1",
"prop-types": "^15.7.2",

9
platform/ui/postcss.config.js
View File

@ -1,7 +1,10 @@
const tailwindcss = require('tailwindcss');
const configs = require('../../postcss.config.js');
const commonConfigs = require('../../postcss.config.js');
module.exports = {
...configs,
plugins: [tailwindcss('./tailwind.js'), require('autoprefixer')],
...commonConfigs,
plugins: [
tailwindcss('./src/gatsby-theme-docz/tailwind.js'),
require('autoprefixer'),
],
};

34
platform/ui/src/components/Alert.jsx
View File

@ -1,34 +0,0 @@
import React from 'react';
import t from 'prop-types';
const kinds = {
info: '#5352ED',
positive: '#2ED573',
negative: '#FF4757',
warning: '#FFA502',
};
export const Alert = ({ children, kind, ...rest }) => (
<div
style={{
padding: 20,
borderRadius: 3,
color: 'white',
background: kinds[kind],
}}
{...rest}
>
{children}
</div>
);
Alert.propTypes = {
/**
* The kind prop is used to set the alert's background color
*/
kind: t.oneOf(['info', 'positive', 'negative', 'warning']),
};
Alert.defaultProps = {
kind: 'info',
};

28
platform/ui/src/components/Alert.mdx
View File

@ -1,28 +0,0 @@
---
name: Alert
menu: Components
---
import { Playground, Props } from 'docz'
import { Alert } from './Alert'
# Alert
## Properties
<Props of={Alert} />
## Basic usage
<Playground>
<Alert>Some message</Alert>
</Playground>
## Using different kinds
<Playground>
<Alert kind="info">Some message</Alert>
<Alert kind="positive">Some message</Alert>
<Alert kind="negative">Some message</Alert>
<Alert kind="warning">Some message</Alert>
</Playground>

40
platform/ui/src/components/Button/Button.mdx
View File

@ -19,13 +19,13 @@ Buttons are used to execute actions when users interacts with them.
<Playground>
<>
<Button variant="contained" style={{ margin: 5 }}>
<Button variant="contained" className="m-1">
Default
</Button>
<Button variant="contained" color="primary" style={{ margin: 5 }}>
<Button variant="contained" color="primary" className="m-1">
Primary
</Button>
<Button variant="contained" color="secondary" style={{ margin: 5 }}>
<Button variant="contained" color="secondary" className="m-1">
Secondary
</Button>
</>
@ -35,13 +35,13 @@ Buttons are used to execute actions when users interacts with them.
<Playground>
<>
<Button variant="outlined" style={{ margin: 5 }}>
<Button variant="outlined" className="m-1">
Default
</Button>
<Button variant="outlined" color="primary" style={{ margin: 5 }}>
<Button variant="outlined" color="primary" className="m-1">
Primary
</Button>
<Button variant="outlined" color="secondary" style={{ margin: 5 }}>
<Button variant="outlined" color="secondary" className="m-1">
Secondary
</Button>
</>
@ -51,13 +51,13 @@ Buttons are used to execute actions when users interacts with them.
<Playground>
<>
<Button variant="text" style={{ margin: 5 }}>
<Button variant="text" className="m-1">
Default
</Button>
<Button variant="text" color="primary" style={{ margin: 5 }}>
<Button variant="text" color="primary" className="m-1">
Primary
</Button>
<Button variant="text" color="secondary" style={{ margin: 5 }}>
<Button variant="text" color="secondary" className="m-1">
Secondary
</Button>
</>
@ -68,13 +68,13 @@ Buttons are used to execute actions when users interacts with them.
<Playground>
<>
<div>
<Button variant="text" size="small" style={{ margin: 5 }}>
<Button variant="text" size="small" className="m-1">
Small
</Button>
<Button variant="contained" size="medium" style={{ margin: 5 }}>
<Button variant="contained" size="medium" className="m-1">
Medium
</Button>
<Button variant="outlined" size="large" style={{ margin: 5 }}>
<Button variant="outlined" size="large" className="m-1">
Large
</Button>
</div>
@ -83,7 +83,7 @@ Buttons are used to execute actions when users interacts with them.
variant="text"
size="small"
color="primary"
style={{ margin: 5 }}
className="m-1"
>
Small
</Button>
@ -91,7 +91,7 @@ Buttons are used to execute actions when users interacts with them.
variant="contained"
size="medium"
color="primary"
style={{ margin: 5 }}
className="m-1"
>
Medium
</Button>
@ -99,7 +99,7 @@ Buttons are used to execute actions when users interacts with them.
variant="outlined"
size="large"
color="primary"
style={{ margin: 5 }}
className="m-1"
>
large
</Button>
@ -109,7 +109,7 @@ Buttons are used to execute actions when users interacts with them.
variant="text"
size="small"
color="secondary"
style={{ margin: 5 }}
className="m-1"
>
Small
</Button>
@ -117,7 +117,7 @@ Buttons are used to execute actions when users interacts with them.
variant="contained"
size="medium"
color="secondary"
style={{ margin: 5 }}
className="m-1"
>
Medium
</Button>
@ -125,7 +125,7 @@ Buttons are used to execute actions when users interacts with them.
variant="outlined"
size="large"
color="secondary"
style={{ margin: 5 }}
className="m-1"
>
Large
</Button>
@ -144,7 +144,7 @@ Buttons are used to execute actions when users interacts with them.
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
className="m-1"
startIcon={
<svg
class="fill-current w-4 h-4"
@ -160,7 +160,7 @@ Buttons are used to execute actions when users interacts with them.
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
className="m-1"
endIcon={
<svg
class="fill-current w-4 h-4"

318
platform/ui/src/components/ButtonEmotion/ButtonEmotion.jsx
View File

@ -1,318 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import styled from '@emotion/styled';
import { fade } from '../../utils/colorManipulator';
import capitalize from '../../utils/capitalize';
import theme from '../../styles/theme';
const styles = {
base: {
'box-sizing': 'border-box',
'min-width': '64px',
padding: '6px 16px',
'border-radius': '20px',
color: theme.palette.primary.main,
transition: 'all 300ms ease',
'&:hover': {
'text-decoration': 'none',
'background-color': fade(
theme.palette.default.main,
theme.palette.action.hoverOpacity
),
},
'&:active': {
outline: 'none',
},
'&:focus': {
outline: 'none',
},
'&:disabled': {
color: theme.palette.action.disabled,
cursor: 'not-allowed',
},
},
/* Styles applied to the root element if `variant="text"`. */
text: {
padding: '6px 8px',
},
/* Styles applied to the root element if `variant="text"` and `color="primary"`. */
textPrimary: {
color: theme.palette.primary.main,
'&:hover': {
'background-color': fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity
),
},
},
/* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
textSecondary: {
color: theme.palette.secondary.main,
'&:hover': {
'background-color': fade(
theme.palette.secondary.light,
theme.palette.action.hoverOpacity
),
},
},
/* Styles applied to the root element if `variant="outlined"`. */
outlined: {
padding: '5px 15px',
border: `1px solid ${
theme.palette.type === 'light'
? 'rgba(0, 0, 0, 0.23)'
: 'rgba(255, 255, 255, 0.23)'
}`,
'&:disabled': {
border: `1px solid ${theme.palette.default.main}`,
},
},
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
outlinedPrimary: {
color: theme.palette.primary.main,
border: `1px solid ${fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity
)}`,
'&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
'background-color': fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity
),
},
},
/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
outlinedSecondary: {
color: theme.palette.secondary.main,
border: `1px solid ${fade(
theme.palette.secondary.main,
theme.palette.action.hoverOpacity
)}`,
'&:hover': {
border: `1px solid ${theme.palette.secondary.main}`,
'background-color': fade(
theme.palette.secondary.light,
theme.palette.action.hoverOpacity
),
},
'&$disabled': {
border: `1px solid ${theme.palette.action.disabled}`,
},
},
/* Styles applied to the root element if `variant="contained"`. */
contained: {
color: '#000',
'background-color': theme.palette.default.light,
// 'box-shadow': theme.shadows[2],
'&:hover': {
'background-color': theme.palette.default.light,
// 'box-shadow': theme.shadows[4],
'&$disabled': {
'background-color': theme.palette.action.disabledBackground,
},
},
'&:active': {
// 'box-shadow': typographyows[8],
},
'&$disabled': {
color: theme.palette.action.disabled,
// 'box-shadow': theme.shadows[0],
'background-color': theme.palette.action.disabledBackground,
},
},
/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
containedPrimary: {
color: 'white',
'background-color': theme.palette.primary.main,
'&:hover': {
'background-color': fade(
theme.palette.primary.light,
theme.palette.action.hoverOpacity
),
},
},
/* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
containedSecondary: {
color: 'white',
'background-color': theme.palette.secondary.main,
'&:hover': {
'background-color': fade(
theme.palette.secondary.light,
theme.palette.action.hoverOpacity
),
},
},
/* Styles applied to the root element if `size="small"` and `variant="text"`. */
textSizeSmall: {
padding: '4px 5px',
fontSize: '13px',
},
/* Styles applied to the root element if `size="medium"` and `variant="text"`. */
textSizeMedium: {
padding: '6px 9px',
fontSize: '14px',
},
/* Styles applied to the root element if `size="large"` and `variant="text"`. */
textSizeLarge: {
padding: '8px 11px',
fontSize: '15px',
},
/* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
outlinedSizeSmall: {
padding: '3px 9px',
fontSize: '13px',
},
/* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
outlinedSizeMedium: {
padding: '5px 15px',
fontSize: '14px',
},
/* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
outlinedSizeLarge: {
padding: '7px 21px',
fontSize: '15px',
},
/* Styles applied to the root element if `size="small"` and `variant="contained"`. */
containedSizeSmall: {
padding: '4px 10px',
fontSize: '13px',
},
/* Styles applied to the root element if `size="medium"` and `variant="contained"`. */
containedSizeMedium: {
padding: '6px 16px',
fontSize: '13px',
},
/* Styles applied to the root element if `size="large"` and `variant="contained"`. */
containedSizeLarge: {
padding: '8px 22px',
fontSize: '15px',
},
/* Styles applied to the startIcon element if supplied. */
startIcon: {
display: 'inherit',
'margin-right': '8px',
'margin-left': '-4px',
},
/* Styles applied to the endIcon element if supplied. */
endIcon: {
display: 'inherit',
'margin-right': '-4px',
'margin-left': '8px',
},
};
const BaseButton = styled.button`
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
border-radius: 0;
padding: 0;
cursor: pointer;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
appearance: none;
text-decoration: none;
color: inherit;
`;
const ButtonIcon = styled.div`
${props => ({
...styles[`${props.icon}`],
})}
`;
const ButtonComponent = styled(BaseButton)`
/* base styles */
${props => ({
...styles.base,
})}
/* variant styles */
${props => ({
...styles[`${props.variant}`],
})}
/* color */
${props => ({
...styles[`${props.variant}${capitalize(props.color)}`],
})}
/* size styles */
${props => ({
...styles[`${props.variant}Size${capitalize(props.size)}`],
})}
`;
const Button = props => {
const {
children,
variant = defaults.variant,
color = defaults.color,
size = defaults.size,
radius = defaults.radius,
disabled = defaults.disabled,
elevation,
type = defaults.type,
startIcon: startIconProp,
endIcon: endIconProp,
className,
...rest
} = props;
const startIcon = startIconProp && (
<ButtonIcon icon="startIcon">{startIconProp}</ButtonIcon>
);
const endIcon = endIconProp && (
<ButtonIcon icon="endIcon">{endIconProp}</ButtonIcon>
);
return (
<ButtonComponent
variant={variant}
color={color}
size={size}
radius={radius}
disabled={disabled}
type={type}
{...rest}
>
{startIcon}
{children}
{endIcon}
</ButtonComponent>
);
};
const defaults = {
variant: 'outlined',
color: 'default',
size: 'large',
radius: 'medium',
disabled: false,
elevation: true,
type: 'button',
};
Button.propTypes = {
children: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium', 'large']),
radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
disabled: PropTypes.bool,
elevation: PropTypes.bool,
type: PropTypes.string,
startIcon: PropTypes.node,
endIcon: PropTypes.node,
className: PropTypes.node,
};
export default Button;

180
platform/ui/src/components/ButtonEmotion/ButtonEmotion.mdx
View File

@ -1,180 +0,0 @@
---
name: ButtonEmotion
menu: Components
route: components/button-emotion
---
import { Playground, Props } from 'docz';
import Button from './';
# ButtonEmotion
Buttons are used to execute actions when users interacts with them.
## Properties
<Props of={Button} />
## Contained Buttons
<Playground>
<>
<Button variant="contained" style={{ margin: 5 }}>
Default
</Button>
<Button variant="contained" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="contained" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Outlined Buttons
<Playground>
<>
<Button variant="outlined" style={{ margin: 5 }}>
Default
</Button>
<Button variant="outlined" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="outlined" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Text Buttons
<Playground>
<>
<Button variant="text" style={{ margin: 5 }}>
Default
</Button>
<Button variant="text" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="text" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Sizes
<Playground>
<>
<div>
<Button variant="text" size="small" style={{ margin: 5 }}>
Small
</Button>
<Button variant="contained" size="medium" style={{ margin: 5 }}>
Medium
</Button>
<Button variant="outlined" size="large" style={{ margin: 5 }}>
Large
</Button>
</div>
<div>
<Button
variant="text"
size="small"
color="primary"
style={{ margin: 5 }}
>
Small
</Button>
<Button
variant="contained"
size="medium"
color="primary"
style={{ margin: 5 }}
>
Medium
</Button>
<Button
variant="outlined"
size="large"
color="primary"
style={{ margin: 5 }}
>
large
</Button>
</div>
<div>
<Button
variant="text"
size="small"
color="secondary"
style={{ margin: 5 }}
>
Small
</Button>
<Button
variant="contained"
size="medium"
color="secondary"
style={{ margin: 5 }}
>
Medium
</Button>
<Button
variant="outlined"
size="large"
color="secondary"
style={{ margin: 5 }}
>
Large
</Button>
</div>
</>
</Playground>
## Buttons with icons
<Playground>
{() => {
return (
<div className="flex">
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
startIcon={
<svg
class="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
>
Download
</Button>
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
endIcon={
<svg
class="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
>
Download
</Button>
</div>
)
}}
</Playground>

2
platform/ui/src/components/ButtonEmotion/index.js
View File

@ -1,2 +0,0 @@
import ButtonEmotion from './ButtonEmotion';
export default ButtonEmotion;

68
platform/ui/src/components/ButtonModules/ButtonModules.jsx
View File

@ -1,68 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import capitalize from '../../utils/capitalize';
import styles from './ButtonModules.module.scss';
const Button = props => {
const {
children,
variant = defaults.variant,
color = defaults.color,
size = defaults.size,
type = defaults.type,
startIcon: startIconProp,
endIcon: endIconProp,
className,
...rest
} = props;
const startIcon = startIconProp && (
<div className={styles.startIcon}>{startIconProp}</div>
);
const endIcon = endIconProp && (
<div className={styles.endIcon}>{endIconProp}</div>
);
return (
<button
className={classnames(
styles.baseButton,
styles[variant],
styles[`${variant}${capitalize(color)}`],
styles[`${variant}Size${capitalize(size)}`],
className
)}
type={type}
{...rest}
>
{startIcon}
{children}
{endIcon}
</button>
);
};
const defaults = {
variant: 'outlined',
color: 'default',
size: 'large',
radius: 'medium',
disabled: false,
type: 'button',
};
Button.propTypes = {
children: PropTypes.node,
size: PropTypes.oneOf(['small', 'medium', 'large']),
radius: PropTypes.oneOf(['small', 'medium', 'large', 'full']),
variant: PropTypes.oneOf(['text', 'outlined', 'contained']),
color: PropTypes.oneOf(['default', 'primary', 'secondary']),
disabled: PropTypes.bool,
type: PropTypes.string,
startIcon: PropTypes.node,
endIcon: PropTypes.node,
className: PropTypes.node,
};
export default Button;

180
platform/ui/src/components/ButtonModules/ButtonModules.mdx
View File

@ -1,180 +0,0 @@
---
name: ButtonModules
menu: Components
route: components/button-modules
---
import { Playground, Props } from 'docz';
import Button from './';
# ButtonModules
Buttons are used to execute actions when users interacts with them.
## Properties
<Props of={Button} />
## Contained Buttons
<Playground>
<>
<Button variant="contained" style={{ margin: 5 }}>
Default
</Button>
<Button variant="contained" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="contained" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Outlined Buttons
<Playground>
<>
<Button variant="outlined" style={{ margin: 5 }}>
Default
</Button>
<Button variant="outlined" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="outlined" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Text Buttons
<Playground>
<>
<Button variant="text" style={{ margin: 5 }}>
Default
</Button>
<Button variant="text" color="primary" style={{ margin: 5 }}>
Primary
</Button>
<Button variant="text" color="secondary" style={{ margin: 5 }}>
Secondary
</Button>
</>
</Playground>
## Sizes
<Playground>
<>
<div>
<Button variant="text" size="small" style={{ margin: 5 }}>
Small
</Button>
<Button variant="contained" size="medium" style={{ margin: 5 }}>
Medium
</Button>
<Button variant="outlined" size="large" style={{ margin: 5 }}>
Large
</Button>
</div>
<div>
<Button
variant="text"
size="small"
color="primary"
style={{ margin: 5 }}
>
Small
</Button>
<Button
variant="contained"
size="medium"
color="primary"
style={{ margin: 5 }}
>
Medium
</Button>
<Button
variant="outlined"
size="large"
color="primary"
style={{ margin: 5 }}
>
large
</Button>
</div>
<div>
<Button
variant="text"
size="small"
color="secondary"
style={{ margin: 5 }}
>
Small
</Button>
<Button
variant="contained"
size="medium"
color="secondary"
style={{ margin: 5 }}
>
Medium
</Button>
<Button
variant="outlined"
size="large"
color="secondary"
style={{ margin: 5 }}
>
Large
</Button>
</div>
</>
</Playground>
## Buttons with icons
<Playground>
{() => {
return (
<div className="flex">
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
startIcon={
<svg
className="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
>
Download
</Button>
<Button
variant="contained"
color="primary"
style={{ margin: 5 }}
endIcon={
<svg
className="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
>
Download
</Button>
</div>
)
}}
</Playground>

213
platform/ui/src/components/ButtonModules/ButtonModules.module.scss
View File

@ -1,213 +0,0 @@
$default: #aaa;
$primary: #00a;
$secondary: #a00;
$hoverOpacity: 40%;
.baseButton {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
background-color: transparent;
outline: 0;
border: 0;
margin: 0;
cursor: pointer;
user-select: none;
vertical-align: middle;
-moz-appearance: none;
appearance: none;
text-decoration: none;
box-sizing: border-box;
min-width: 64px;
padding: 6px 16px;
border-radius: 20px;
color: inherit;
transition: all 300ms ease;
&:hover {
text-decoration: none;
background-color: lighten($default, $hoverOpacity / 2);
}
&:active,
&:focus {
outline: none;
}
&:disabled {
color: $default;
cursor: not-allowed;
}
}
/* Styles applied to the root element if `variant="text"`. */
.text {
padding: 6px 8px;
&:hover {
background-color: lighten($default, $hoverOpacity / 2);
}
}
/* Styles applied to the root element if `variant="text"` and `color="primary"`. */
.textPrimary {
color: $primary;
&:hover {
background-color: lighten($primary, $hoverOpacity);
}
}
/* Styles applied to the root element if `variant="text"` and `color="secondary"`. */
.textSecondary {
color: $secondary;
&:hover {
background-color: lighten($secondary, $hoverOpacity);
}
}
/* Styles applied to the root element if `variant="outlined"`. */
.outlined {
padding: 5px 15px;
border: 1px solid $default;
&:disabled {
border: 1px solid $default;
}
}
/* Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
.outlinedPrimary {
color: $primary;
border: 1px solid lighten($primary, $hoverOpacity);
&:hover {
border: 1px solid $primary;
background-color: lighten($primary, $hoverOpacity);
}
}
/* Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
.outlinedSecondary {
color: $secondary;
border: 1px solid lighten($secondary, $hoverOpacity);
&:hover {
border: 1px solid $secondary;
background-color: lighten($secondary, $hoverOpacity);
}
&:disabled {
border: 1px solid $default;
}
}
/* Styles applied to the root element if `variant="contained"`. */
.contained {
color: #fff;
background-color: $default;
&:disabled {
color: lighten($default, $hoverOpacity);
background-color: $default;
}
&:hover {
background-color: darken($default, $hoverOpacity / 2);
&:disabled {
color: lighten($default, $hoverOpacity);
background-color: $default;
}
}
}
/* Styles applied to the root element if `variant="contained"` and `color="primary"`. */
.containedPrimary {
color: white;
background-color: $primary;
&:hover {
background-color: darken($primary, $hoverOpacity / 2);
}
}
/* Styles applied to the root element if `variant="contained"` and `color="secondary"`. */
.containedSecondary {
color: white;
background-color: $secondary;
&:hover {
background-color: darken($secondary, $hoverOpacity / 2);
}
}
/* Styles applied to the root element if `size="small"` and `variant="text"`. */
.textSizeSmall {
padding: 4px 5px;
font-size: 13px;
}
/* Styles applied to the root element if `size="medium"` and `variant="text"`. */
.textSizeMedium {
padding: 6px 9px;
font-size: 14px;
}
/* Styles applied to the root element if `size="large"` and `variant="text"`. */
.textSizeLarge {
padding: 8px 11px;
font-size: 15px;
}
/* Styles applied to the root element if `size="small"` and `variant="outlined"`. */
.outlinedSizeSmall {
padding: 3px 9px;
font-size: 13px;
}
/* Styles applied to the root element if `size="medium"` and `variant="outlined"`. */
.outlinedSizeMedium {
padding: 5px 15px;
font-size: 14px;
}
/* Styles applied to the root element if `size="large"` and `variant="outlined"`. */
.outlinedSizeLarge {
padding: 7px 21px;
font-size: 15px;
}
/* Styles applied to the root element if `size="small"` and `variant="contained"`. */
.containedSizeSmall {
padding: 4px 10px;
font-size: 13px;
}
/* Styles applied to the root element if `size="medium"` and `variant="contained"`. */
.containedSizeMedium {
padding: 6px 16px;
font-size: 13px;
}
/* Styles applied to the root element if `size="large"` and `variant="contained"`. */
.containedSizeLarge {
padding: 8px 22px;
font-size: 15px;
}
/* Styles applied to the startIcon element if supplied. */
.startIcon {
display: inherit;
margin-right: 8px;
margin-left: -4px;
}
/* Styles applied to the endIcon element if supplied. */
.endIcon {
display: inherit;
margin-right: -4px;
margin-left: 8px;
}

2
platform/ui/src/components/ButtonModules/index.js
View File

@ -1,2 +0,0 @@
import ButtonModules from './ButtonModules';
export default ButtonModules;

2
platform/ui/src/components/Input/Input.mdx
View File

@ -19,7 +19,7 @@ import Input from './';
{() => {
const [inputValue, setInputValue] = React.useState('');
return (
<div className="m-5 bg-black">
<div>
<Input
transparent
containerClassName="mb-3"

59614
platform/ui/src/gatsby-theme-docz/app.css
View File

File diff suppressed because it is too large Load Diff

0
platform/ui/src/styles/tailwind.css → platform/ui/src/gatsby-theme-docz/tailwind.css
View File

0
platform/ui/tailwind.js → platform/ui/src/gatsby-theme-docz/tailwind.js
View File

7
platform/ui/src/gatsby-theme-docz/theme.css Normal file
View File

@ -0,0 +1,7 @@
/**
OVERRIDE DOCZ THEME
*/
[data-testid='live-preview'] {
padding: 10px;
}

3
platform/ui/src/gatsby-theme-docz/wrapper.js
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import './app.css';
import './tailwind.css';
import './theme.css';
const Wrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;
export default Wrapper;

3
platform/ui/src/styles/app.css
View File

@ -1,3 +0,0 @@
@tailwind base;
@tailwind components;
@tailwind utilities;