mirror of
https://github.com/yldio/copilot.git
synced 2024-12-01 07:30:07 +02:00
Resolving conflict
This commit is contained in:
JUDIT GRESKOVITS
commit
390adddd30
@ -21,6 +21,7 @@
|
||||
"dependencies": {
|
||||
"@tomgco/joyent-portal-ui": "alpha",
|
||||
"constant-case": "^2.0.0",
|
||||
"css-loader": "^0.26.1",
|
||||
"force-array": "^3.1.0",
|
||||
"hapi": "^16.1.0",
|
||||
"inert": "^4.1.0",
|
||||
|
||||
100
frontend/src/components/breadcrumb/index.js
Normal file
100
frontend/src/components/breadcrumb/index.js
Normal file
@ -0,0 +1,100 @@
|
||||
const Container = require('@ui/components/container');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const React = require('react');
|
||||
const ReactRouter = require('react-router');
|
||||
const Styled = require('styled-components');
|
||||
const flatten = require('lodash.flatten');
|
||||
const fns = require('@ui/shared/functions');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
// Main Contonent Wrapper Styles
|
||||
const StyledDiv = styled.div`
|
||||
background-color: #FAFAFA;
|
||||
height: ${remcalc(91)};
|
||||
border-bottom: solid ${remcalc(1)} #d8d8d8;
|
||||
`;
|
||||
|
||||
const BreadcrumbA = styled.a`
|
||||
text-decoration: none !important;
|
||||
`;
|
||||
|
||||
const BreadcrumbSpan = styled.span`
|
||||
color: #646464;
|
||||
`;
|
||||
|
||||
const H1 = styled.h1`
|
||||
margin: 0 0 0 0;
|
||||
padding-top: ${remcalc(31)};
|
||||
padding-bottom: ${remcalc(31)};
|
||||
`;
|
||||
|
||||
const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
function getNameLink(name) {
|
||||
return flatten(name.map((part, i) => {
|
||||
if (!part.name) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const link = (
|
||||
<Link key={part.pathname} to={part.pathname}>
|
||||
{
|
||||
({
|
||||
href,
|
||||
onClick,
|
||||
}) =>
|
||||
<BreadcrumbA href={href} onClick={onClick}>
|
||||
{part.name}
|
||||
</BreadcrumbA>
|
||||
}
|
||||
</Link>
|
||||
);
|
||||
|
||||
const key = `${part.pathname}${i}`;
|
||||
const slash = (
|
||||
<BreadcrumbSpan key={key}> / </BreadcrumbSpan>
|
||||
);
|
||||
|
||||
return (i === 0) ? link : [
|
||||
slash,
|
||||
link
|
||||
];
|
||||
}));
|
||||
}
|
||||
|
||||
const Breadcrumb = ({
|
||||
children,
|
||||
links = [],
|
||||
name = []
|
||||
}) => {
|
||||
return (
|
||||
<Container>
|
||||
<StyledDiv>
|
||||
<H1
|
||||
style={{
|
||||
fontSize: remcalc(24)
|
||||
}}
|
||||
>
|
||||
{getNameLink(name)}
|
||||
</H1>
|
||||
</StyledDiv>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
|
||||
Breadcrumb.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
links: React.PropTypes.arrayOf(PropTypes.link),
|
||||
name: React.PropTypes.arrayOf(PropTypes.link)
|
||||
};
|
||||
|
||||
module.exports = Breadcrumb;
|
||||
@ -66,6 +66,8 @@ const StyledTooltipWrapper = styled.div`
|
||||
`;
|
||||
|
||||
const StyledName = styled.span`
|
||||
color: #646464;
|
||||
font-size: ${remcalc(16)}
|
||||
position: relative;
|
||||
top: ${remcalc(-12)};
|
||||
`;
|
||||
|
||||
@ -42,6 +42,7 @@ const StyledNav = styled.div`
|
||||
|
||||
// TODO: refactor colours into constants in UI
|
||||
const NavigationLinkContainer = styled.div`
|
||||
position: relative;
|
||||
padding: ${remcalc(11)} ${remcalc(12)} ${remcalc(12)};
|
||||
color: #646464;
|
||||
border: solid ${remcalc(1)} #d8d8d8;
|
||||
@ -77,6 +78,17 @@ const NavLi = styled.li`
|
||||
}
|
||||
`;
|
||||
|
||||
const Shadow = styled.div`
|
||||
z-index: 1;
|
||||
position: absolute;
|
||||
height: ${remcalc(5)};
|
||||
width: 100%;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.06));
|
||||
`;
|
||||
|
||||
const OrgNavigation = ({
|
||||
orgs = []
|
||||
}) => {
|
||||
@ -98,6 +110,7 @@ const OrgNavigation = ({
|
||||
}) =>
|
||||
<a href={href} onClick={onClick}>
|
||||
<NavigationLinkContainer className={isActive ? 'active' : ''}>
|
||||
{ !isActive && <Shadow />}
|
||||
<OrgImage>
|
||||
<OrgAvatar
|
||||
height={remcalc(26)}
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
const React = require('react');
|
||||
|
||||
const PropTypes = require('@root/prop-types');
|
||||
// const List = require('@ui/components/list');
|
||||
|
||||
// const {
|
||||
// ListItem,
|
||||
// ListItemView,
|
||||
// ListItemMeta,
|
||||
// ListItemTitle,
|
||||
// ListItemOptions
|
||||
// } = List;
|
||||
|
||||
const PersonItem = ({
|
||||
person = {},
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<tr>
|
||||
<td>{person.uuid}</td>
|
||||
<td>{person.uuid}</td>
|
||||
<td>{person.uuid}</td>
|
||||
</tr>
|
||||
);
|
||||
};
|
||||
|
||||
PersonItem.propTypes = {
|
||||
person: PropTypes.person,
|
||||
};
|
||||
|
||||
module.exports = PersonItem;
|
||||
@ -1,39 +1,53 @@
|
||||
const React = require('react');
|
||||
|
||||
const PersonItem = require('@components/people-item');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Row = require('@ui/components/row');
|
||||
const Column = require('@ui/components/column');
|
||||
const Button = require('@ui/components/button');
|
||||
|
||||
const PeopleList = ({
|
||||
people = []
|
||||
}) => {
|
||||
const PeopleTable = require('./table');
|
||||
|
||||
const peopleList = people.map((person) => (
|
||||
<PersonItem
|
||||
key={person.uuid}
|
||||
person={person}
|
||||
/>
|
||||
));
|
||||
const buttonStyle = {
|
||||
float: 'right'
|
||||
};
|
||||
|
||||
const People = (props) => {
|
||||
|
||||
const {
|
||||
people = [],
|
||||
orgUI = {},
|
||||
handleToggle
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Member</th>
|
||||
<th>Status</th>
|
||||
<th>Role</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{peopleList}
|
||||
</tbody>
|
||||
</table>
|
||||
<Row>
|
||||
<Column smOffset={9} xs={2}>
|
||||
<Button
|
||||
disabled={orgUI.invite_toggled}
|
||||
onClick={handleToggle}
|
||||
style={buttonStyle}
|
||||
>
|
||||
Invite
|
||||
</Button>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column xs={12}>
|
||||
<PeopleTable
|
||||
people={people}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
PeopleList.propTypes = {
|
||||
People.propTypes = {
|
||||
handleToggle: React.PropTypes.func,
|
||||
orgUI: React.PropTypes.obj,
|
||||
people: React.PropTypes.arrayOf(PropTypes.person),
|
||||
};
|
||||
|
||||
module.exports = PeopleList;
|
||||
module.exports = People;
|
||||
47
frontend/src/components/people-list/table.js
Normal file
47
frontend/src/components/people-list/table.js
Normal file
@ -0,0 +1,47 @@
|
||||
const React = require('react');
|
||||
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Table = require('@ui/components/table-data-table');
|
||||
const Checkbox = require('@ui/components/checkbox');
|
||||
|
||||
const PeopleTable = ({
|
||||
people = []
|
||||
}) => {
|
||||
const columns = [{
|
||||
title: <Checkbox />,
|
||||
width: '5%'
|
||||
}, {
|
||||
title: 'Member',
|
||||
width: '35%'
|
||||
}, {
|
||||
title: 'Status',
|
||||
width: '25%'
|
||||
}, {
|
||||
title: 'Role',
|
||||
width: '25%'
|
||||
}, {
|
||||
title: '',
|
||||
width: '10%' // Empty title for delete
|
||||
}];
|
||||
|
||||
const data = people.map( (person) => ({
|
||||
checkbox: <Checkbox />,
|
||||
name: person.name,
|
||||
status: person.status,
|
||||
role: person.role,
|
||||
bin: ''
|
||||
}));
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
PeopleTable.propTypes = {
|
||||
people: React.PropTypes.arrayOf(PropTypes.person)
|
||||
};
|
||||
|
||||
module.exports = PeopleTable;
|
||||
@ -1,30 +1,11 @@
|
||||
const flatten = require('lodash.flatten');
|
||||
const React = require('react');
|
||||
const ReactIntl = require('react-intl');
|
||||
const Styled = require('styled-components');
|
||||
const ReactRouter = require('react-router');
|
||||
|
||||
const H1 = require('@ui/components/base-elements').H1;
|
||||
const Li = require('@ui/components/horizontal-list/li');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const Ul = require('@ui/components/horizontal-list/ul');
|
||||
const fns = require('@ui/shared/functions');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const BreadcrumbA = styled.a`
|
||||
text-decoration: none !important;
|
||||
`;
|
||||
|
||||
const BreadcrumbSpan = styled.span`
|
||||
color: #646464;
|
||||
`;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
const Breadcrumb = require('@components/breadcrumb');
|
||||
|
||||
const {
|
||||
FormattedMessage
|
||||
@ -34,11 +15,12 @@ const {
|
||||
Link
|
||||
} = ReactRouter;
|
||||
|
||||
const Section = ({
|
||||
children,
|
||||
links = [],
|
||||
name = []
|
||||
}) => {
|
||||
const Section = (props) => {
|
||||
const {
|
||||
children,
|
||||
links = [],
|
||||
} = props;
|
||||
|
||||
const navLinks = links.map((link) => (
|
||||
<Li key={link.name}>
|
||||
<Link activeClassName='active' to={link.pathname}>
|
||||
@ -47,44 +29,9 @@ const Section = ({
|
||||
</Li>
|
||||
));
|
||||
|
||||
const nameLinks = flatten(name.map((part, i) => {
|
||||
if (!part.name) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const link = (
|
||||
<Link key={part.pathname} to={part.pathname}>
|
||||
{
|
||||
({
|
||||
href,
|
||||
onClick,
|
||||
}) =>
|
||||
<BreadcrumbA href={href} onClick={onClick}>
|
||||
{part.name}
|
||||
</BreadcrumbA>
|
||||
}
|
||||
</Link>
|
||||
);
|
||||
|
||||
const slash = (
|
||||
<BreadcrumbSpan key={`${part.pathname}${i}`}> / </BreadcrumbSpan>
|
||||
);
|
||||
|
||||
return (i === 0) ? link : [
|
||||
slash,
|
||||
link
|
||||
];
|
||||
}));
|
||||
|
||||
return (
|
||||
<div>
|
||||
<H1
|
||||
style={{
|
||||
fontSize: remcalc(24)
|
||||
}}
|
||||
>
|
||||
{nameLinks}
|
||||
</H1>
|
||||
<Breadcrumb {...props} />
|
||||
<Ul>
|
||||
{navLinks}
|
||||
</Ul>
|
||||
@ -95,8 +42,7 @@ const Section = ({
|
||||
|
||||
Section.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
links: React.PropTypes.arrayOf(PropTypes.link),
|
||||
name: React.PropTypes.arrayOf(PropTypes.link)
|
||||
links: React.PropTypes.arrayOf(PropTypes.link)
|
||||
};
|
||||
|
||||
module.exports = Section;
|
||||
|
||||
@ -1,70 +1,42 @@
|
||||
const React = require('react');
|
||||
// const ReactIntl = require('react-intl');
|
||||
const ReactRedux = require('react-redux');
|
||||
// const ReactRouter = require('react-router');
|
||||
|
||||
const Row = require('@ui/components/row');
|
||||
const Column= require('@ui/components/column');
|
||||
const Button= require('@ui/components/button');
|
||||
const PropTypes = require('@root/prop-types');
|
||||
const PeopleList = require('@components/people-list');
|
||||
const PeopleSection = require('@components/people-list');
|
||||
const selectors = require('@state/selectors');
|
||||
|
||||
const Section = require('./section');
|
||||
|
||||
// const {
|
||||
// FormattedMessage
|
||||
// } = ReactIntl;
|
||||
const actions = require('@state/actions');
|
||||
|
||||
const {
|
||||
connect
|
||||
} = ReactRedux;
|
||||
|
||||
const {
|
||||
peopleByOrgIdSelector
|
||||
peopleByOrgIdSelector,
|
||||
orgUISelector
|
||||
} = selectors;
|
||||
|
||||
const buttonStyle = {
|
||||
float: 'right'
|
||||
};
|
||||
const {
|
||||
handleInviteToggle
|
||||
} = actions;
|
||||
|
||||
const People = (props) => {
|
||||
|
||||
const {
|
||||
people = []
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<Section {...props}>
|
||||
<Row>
|
||||
<Column smOffset={9} xs={2}>
|
||||
<Button style={buttonStyle}>Invite</Button>
|
||||
</Column>
|
||||
</Row>
|
||||
|
||||
<Row>
|
||||
<Column>
|
||||
<PeopleList
|
||||
people={people}
|
||||
/>
|
||||
</Column>
|
||||
</Row>
|
||||
<PeopleSection {...props} />
|
||||
</Section>
|
||||
);
|
||||
};
|
||||
|
||||
People.propTypes = {
|
||||
people: React.PropTypes.arrayOf(PropTypes.person)
|
||||
// toggleCollapsed: React.PropTypes.func
|
||||
};
|
||||
|
||||
const mapStateToProps = (state, {
|
||||
params = {}
|
||||
}) => ({
|
||||
people: peopleByOrgIdSelector(params.org)(state)
|
||||
people: peopleByOrgIdSelector(params.org)(state),
|
||||
orgUI: orgUISelector(state)
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({});
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
handleToggle: () => dispatch(handleInviteToggle())
|
||||
});
|
||||
|
||||
module.exports = connect(
|
||||
mapStateToProps,
|
||||
|
||||
@ -203,6 +203,7 @@
|
||||
},
|
||||
"orgs": {
|
||||
"ui": {
|
||||
"invite_toggled": false,
|
||||
"sections": [
|
||||
"projects",
|
||||
"people",
|
||||
@ -223,9 +224,18 @@
|
||||
"uuid": "e12ad7db-91b2-4154-83dd-40dcfc700dcc",
|
||||
"id": "biz-tech",
|
||||
"name": "BizTech",
|
||||
"members": [{
|
||||
"uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f"
|
||||
}]
|
||||
"members": [
|
||||
{
|
||||
"uuid": "fd853d8f-e1dd-49b5-b7b3-ae9adfea1e2f",
|
||||
"role": "Owner",
|
||||
"status": "Active"
|
||||
},
|
||||
{
|
||||
"uuid": "6deddbaa-3b94-4373-8cf7-97129507a872",
|
||||
"role": "Unassigned",
|
||||
"status": "Sent invitation"
|
||||
}
|
||||
]
|
||||
}, {
|
||||
"owner": "b94033c1-3665-4c36-afab-d9c3d0b51c01",
|
||||
"uuid": "551f316d-e414-480f-9787-b4c408db3edd",
|
||||
|
||||
@ -61,10 +61,6 @@ const Sections = React.PropTypes.arrayOf(
|
||||
React.PropTypes.string
|
||||
);
|
||||
|
||||
const Person = React.PropTypes.shape({
|
||||
...BaseObject
|
||||
});
|
||||
|
||||
module.exports = {
|
||||
account: Account,
|
||||
link: Link,
|
||||
@ -75,6 +71,5 @@ module.exports = {
|
||||
instance: Instance,
|
||||
metric: Metric,
|
||||
metricType: MetricType,
|
||||
dataset: Dataset,
|
||||
person: Person
|
||||
dataset: Dataset
|
||||
};
|
||||
|
||||
@ -15,5 +15,6 @@ module.exports = {
|
||||
addMetric: createAction(`${APP}/ADD_METRIC`),
|
||||
toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
|
||||
toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
|
||||
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`)
|
||||
switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
|
||||
handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
|
||||
};
|
||||
|
||||
@ -14,6 +14,7 @@ module.exports = () => {
|
||||
monitors: require('@state/reducers/monitors'),
|
||||
orgs: require('@state/reducers/orgs'),
|
||||
projects: require('@state/reducers/projects'),
|
||||
services: require('@state/reducers/services')
|
||||
services: require('@state/reducers/services'),
|
||||
members: require('@state/reducers/members'),
|
||||
});
|
||||
};
|
||||
|
||||
9
frontend/src/state/reducers/members.js
Normal file
9
frontend/src/state/reducers/members.js
Normal file
@ -0,0 +1,9 @@
|
||||
const ReduxActions = require('redux-actions');
|
||||
|
||||
const {
|
||||
handleActions
|
||||
} = ReduxActions;
|
||||
|
||||
module.exports = handleActions({
|
||||
'x': (state) => state // somehow handleActions needs at least one reducer
|
||||
}, {});
|
||||
@ -13,6 +13,7 @@ const orgUiSections = (state) => get(state, 'orgs.ui.sections', []);
|
||||
const projectUiSections = (state) => get(state, 'projects.ui.sections', []);
|
||||
const serviceUiSections = (state) => get(state, 'services.ui.sections', []);
|
||||
const orgs = (state) => get(state, 'orgs.data', []);
|
||||
const orgUI = (state) => get(state, 'orgs.ui', []);
|
||||
const projects = (state) => get(state, 'projects.data', []);
|
||||
const services = (state) => get(state, 'services.data', []);
|
||||
const collapsedServices = (state) => get(state, 'services.ui.collapsed', []);
|
||||
@ -114,9 +115,16 @@ const instancesByProjectId = (projectId) => createSelector(
|
||||
);
|
||||
|
||||
const peopleByOrgId = (orgId) => createSelector(
|
||||
// [members, orgById(orgId)], (members, org) => org.members
|
||||
|
||||
[members, orgById(orgId)], (members, org) => org.members
|
||||
[members, orgById(orgId)], (members, org) => {
|
||||
const matched = [];
|
||||
org.members.filter((m) => {
|
||||
matched.push({
|
||||
...find(members, ['uuid', m.uuid]),
|
||||
...m
|
||||
});
|
||||
});
|
||||
return matched;
|
||||
}
|
||||
);
|
||||
|
||||
module.exports = {
|
||||
@ -124,6 +132,7 @@ module.exports = {
|
||||
accountUISelector: accountUi,
|
||||
orgByIdSelector: orgById,
|
||||
orgsSelector: orgs,
|
||||
orgUISelector: orgUI,
|
||||
servicesSelector: services,
|
||||
serviceByIdSelector: serviceById,
|
||||
orgSectionsSelector: orgSections,
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>Joyent Frontend</title>
|
||||
<link rel="stylesheet" href="../../ui/src/vendor/normalize.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id='root'></div>
|
||||
|
||||
@ -50,7 +50,7 @@ module.exports = {
|
||||
],
|
||||
loaders: [
|
||||
'babel-loader'
|
||||
],
|
||||
]
|
||||
}, {
|
||||
test: /\.json?$/,
|
||||
exclude: /node_modules/,
|
||||
@ -60,7 +60,7 @@ module.exports = {
|
||||
],
|
||||
loaders: [
|
||||
'json-loader'
|
||||
],
|
||||
]
|
||||
}, {
|
||||
test: /\.png/,
|
||||
exclude: /node_modules/,
|
||||
@ -68,19 +68,30 @@ module.exports = {
|
||||
FRONTEND,
|
||||
UI
|
||||
],
|
||||
loaders: [
|
||||
loader: [
|
||||
'url-loader'
|
||||
],
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(eot|svg|ttf|woff|woff2)$/,
|
||||
loader: 'file-loader',
|
||||
// XXX: By commenting this out, production "BUILD=production make compile"
|
||||
// will break.
|
||||
//
|
||||
// exclude: /node_modules/,
|
||||
include: [
|
||||
FRONTEND,
|
||||
UI
|
||||
],
|
||||
loaders: [
|
||||
'file-loader'
|
||||
],
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
exclude: /node_modules/,
|
||||
loaders: [ 'style-loader', 'css-loader' ],
|
||||
include: [
|
||||
FRONTEND,
|
||||
UI
|
||||
]
|
||||
}]
|
||||
}
|
||||
};
|
||||
|
||||
1609
frontend/yarn.lock
1609
frontend/yarn.lock
File diff suppressed because it is too large
Load Diff
@ -1 +1 @@
|
||||
<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,600" rel="stylesheet">
|
||||
<link href="./normalize.css" rel="stylesheet">
|
||||
@ -11,7 +11,7 @@
|
||||
"lint": "make lint",
|
||||
"test": "make test",
|
||||
"build": "make compile",
|
||||
"storybook": "start-storybook -s ./src/shared/assets -p 6006",
|
||||
"storybook": "start-storybook -s ./src/assets,./src/vendor -p 6006",
|
||||
"build-storybook": "build-storybook"
|
||||
},
|
||||
"dependencies": {
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
@ -1,12 +1,8 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fncs = require('../../shared/functions');
|
||||
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
forms,
|
||||
tables,
|
||||
typography,
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
@ -14,469 +10,12 @@ const {
|
||||
default: styled,
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fncs;
|
||||
|
||||
module.exports = styled.div`
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: ${colors.fonts.regular};
|
||||
background-color: #FFFFFF;
|
||||
|
||||
/**************************************************************************
|
||||
* NORMALIZE.CSS *
|
||||
**************************************************************************/
|
||||
|
||||
& article,
|
||||
& aside,
|
||||
& details,
|
||||
& figcaption,
|
||||
& figure,
|
||||
& footer,
|
||||
& header,
|
||||
& main,
|
||||
& menu,
|
||||
& nav,
|
||||
& section,
|
||||
& summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& audio,
|
||||
& canvas,
|
||||
& progress,
|
||||
& video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
& audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
& progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
& template,
|
||||
& [hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
& a:active,
|
||||
& a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
& abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
& b,
|
||||
& strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
& b,
|
||||
& strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
& dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
& h1 {
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
& mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
& small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
& sub,
|
||||
& sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
& sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
& sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
& img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
& svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
& code,
|
||||
& kbd,
|
||||
& pre,
|
||||
& samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
& figure {
|
||||
margin: 1em ${remcalc(40)};
|
||||
}
|
||||
|
||||
& hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
& button,
|
||||
& input,
|
||||
& optgroup,
|
||||
& select,
|
||||
& textarea {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& button,
|
||||
& input {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
& button,
|
||||
& select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
& button,
|
||||
& [type="button"],
|
||||
& [type="reset"],
|
||||
& [type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
& button::-moz-focus-inner,
|
||||
& [type="button"]::-moz-focus-inner,
|
||||
& [type="reset"]::-moz-focus-inner,
|
||||
& [type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& button:-moz-focusring,
|
||||
& [type="button"]:-moz-focusring,
|
||||
& [type="reset"]:-moz-focusring,
|
||||
& [type="submit"]:-moz-focusring {
|
||||
outline: ${remcalc(1)} dotted ButtonText;
|
||||
}
|
||||
|
||||
& fieldset {
|
||||
border: ${remcalc(1)} solid #c0c0c0;
|
||||
margin: 0 ${remcalc(2)};
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
& legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
& [type="checkbox"],
|
||||
& [type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
& [type="number"]::-webkit-inner-spin-button,
|
||||
& [type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
& [type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: ${remcalc(-2)};
|
||||
}
|
||||
|
||||
& [type="search"]::-webkit-search-cancel-button,
|
||||
& [type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
& ::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
& ::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/**************************************************************************
|
||||
* BOOTSTRAP REBOOT *
|
||||
**************************************************************************/
|
||||
|
||||
& *,
|
||||
& *::before,
|
||||
& *::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
& @-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
& [tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
& abbr[title],
|
||||
& abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor};
|
||||
}
|
||||
|
||||
& address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
& ol,
|
||||
& ul,
|
||||
& dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
& ol ol,
|
||||
& ul ul,
|
||||
& ol ul,
|
||||
& ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& dt {
|
||||
font-weight: ${typography.dtFontWeight};
|
||||
}
|
||||
|
||||
& dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; /* Undo browser default */
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
|
||||
& a {
|
||||
color: ${colors.brandPrimaryLink};
|
||||
text-decoration: underline;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: ${remcalc(5)} auto -webkit-focus-ring-color;
|
||||
outline-offset: ${remcalc(-2)};
|
||||
}
|
||||
}
|
||||
|
||||
& a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
& pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
|
||||
& figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
|
||||
& img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& [role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
& a,
|
||||
& area,
|
||||
& button,
|
||||
& [role="button"],
|
||||
& input,
|
||||
& label,
|
||||
& select,
|
||||
& summary,
|
||||
& textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tables
|
||||
*/
|
||||
|
||||
& table {
|
||||
border-collapse: collapse;
|
||||
background-color: ${tables.bg};
|
||||
}
|
||||
|
||||
& caption {
|
||||
padding-top: ${tables.cellPadding};
|
||||
padding-bottom: ${tables.cellPadding};
|
||||
color: ${typography.textMuted};
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
& th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
|
||||
& label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
& button:focus {
|
||||
outline: ${remcalc(1)} dotted;
|
||||
outline: ${remcalc(5)} auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
& input,
|
||||
& button,
|
||||
& select,
|
||||
& textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
& input[type="radio"],
|
||||
& input[type="checkbox"] {
|
||||
&:disabled {
|
||||
cursor: ${forms.cursorDisabled};
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="date"],
|
||||
& input[type="time"],
|
||||
& input[type="datetime-local"],
|
||||
& input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
& fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
& input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
`;
|
||||
|
||||
module.exports.global = require('./global');
|
||||
|
||||
@ -69,14 +69,6 @@ const style = css`
|
||||
padding: ${remcalc('14 16')};
|
||||
position: relative;
|
||||
|
||||
font-family: -apple-system,
|
||||
BlinkMacSystemFont,
|
||||
"Segoe UI",
|
||||
Roboto,
|
||||
"Helvetica Neue",
|
||||
Arial,
|
||||
sans-serif;
|
||||
|
||||
font-size: ${remcalc(16)};
|
||||
font-weight: 400;
|
||||
text-align: center;
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
const constants = require('../../shared/constants');
|
||||
const fns = require('../../shared/functions');
|
||||
const Item = require('./item');
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
colors
|
||||
} = constants;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
@ -19,8 +14,9 @@ const {
|
||||
const StyledItem = styled(Item)`
|
||||
position: absolute;
|
||||
|
||||
background-color: ${colors.brandPrimary};
|
||||
border: solid ${remcalc(1)} ${colors.borderPrimary};
|
||||
background-color: #3B4AAF;
|
||||
|
||||
border: solid ${remcalc(1)} #2D3884;
|
||||
box-shadow: none;
|
||||
|
||||
width: calc(100% + ${remcalc(2)});
|
||||
|
||||
55
ui/src/components/mini-metric/story.js
Normal file
55
ui/src/components/mini-metric/story.js
Normal file
@ -0,0 +1,55 @@
|
||||
const React = require('react');
|
||||
const Base = require('../base');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
|
||||
const {
|
||||
storiesOf,
|
||||
// action,
|
||||
// linkTo
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const {
|
||||
MiniMetricGraph,
|
||||
MiniMetricMeta,
|
||||
MiniMetricTitle,
|
||||
MiniMetricSubtitle,
|
||||
MiniMetricView
|
||||
} = require('./');
|
||||
|
||||
const MiniMetricData = require('../list/mini-metric-data');
|
||||
|
||||
storiesOf('Metric (Mini)', module)
|
||||
.add('Mini Metric', () => (
|
||||
<Base>
|
||||
<Row around>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={MiniMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={MiniMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
<Column xs={3}>
|
||||
<MiniMetricView>
|
||||
<MiniMetricMeta>
|
||||
<MiniMetricTitle>Memory: 54%</MiniMetricTitle>
|
||||
<MiniMetricSubtitle>(1280/3000 MB)</MiniMetricSubtitle>
|
||||
</MiniMetricMeta>
|
||||
<MiniMetricGraph data={MiniMetricData} />
|
||||
</MiniMetricView>
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
));
|
||||
46
ui/src/components/table-data-table/index.js
Normal file
46
ui/src/components/table-data-table/index.js
Normal file
@ -0,0 +1,46 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const TableContent = require('./table-content');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTitle = styled.h3`
|
||||
text-align: center
|
||||
`;
|
||||
|
||||
const StyledTableWrapper = styled.section`
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
const Table = ({
|
||||
children,
|
||||
columns = [],
|
||||
data = [],
|
||||
title,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
|
||||
<StyledTableWrapper>
|
||||
<StyledTitle>{title}</StyledTitle>
|
||||
|
||||
<TableContent
|
||||
columns={columns}
|
||||
data={data}
|
||||
/>
|
||||
</StyledTableWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Table.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
columns: React.PropTypes.array,
|
||||
data: React.PropTypes.array,
|
||||
title: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = Table;
|
||||
76
ui/src/components/table-data-table/readme.md
Normal file
76
ui/src/components/table-data-table/readme.md
Normal file
@ -0,0 +1,76 @@
|
||||
# `<Avatar>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Base = require('../base');
|
||||
const Container = require('../container');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
const Table = require('./index.js');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Avatar = require('ui/table');
|
||||
|
||||
const columns = [{
|
||||
title: 'Memeber',
|
||||
dataID: 'member',
|
||||
dataKey: 'member',
|
||||
width: ''
|
||||
}, {
|
||||
title: 'Status',
|
||||
dataID: 'status',
|
||||
dataKey: 'status',
|
||||
width: ''
|
||||
}, {
|
||||
title: 'Role',
|
||||
dataID: 'role',
|
||||
dataKey: 'role',
|
||||
width: ''
|
||||
}, {
|
||||
title: '',
|
||||
dataID: 'delete',
|
||||
dataKey: 'delete',
|
||||
width: ''
|
||||
}];
|
||||
|
||||
const data = [{
|
||||
name: 'Nicola',
|
||||
status: 'Active',
|
||||
role: 'Owner',
|
||||
key: 1
|
||||
}, {
|
||||
name: 'Alex',
|
||||
status: 'Inactive',
|
||||
role: 'Read Only',
|
||||
key: 2
|
||||
}];
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
);
|
||||
}
|
||||
```
|
||||
54
ui/src/components/table-data-table/story.js
Normal file
54
ui/src/components/table-data-table/story.js
Normal file
@ -0,0 +1,54 @@
|
||||
const React = require('react');
|
||||
const Base = require('../base');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const Table = require('./');
|
||||
|
||||
const memberDetail = (name) => {
|
||||
return (
|
||||
<div>
|
||||
<h4>{name}</h4>
|
||||
<small>{name}@biztech.com</small>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const columns = [{
|
||||
title: 'Memeber',
|
||||
width: '50%'
|
||||
}, {
|
||||
title: 'Status',
|
||||
width: '10%'
|
||||
}, {
|
||||
title: 'Role',
|
||||
width: '20%'
|
||||
}, {
|
||||
title: '',
|
||||
width: '20%'
|
||||
}];
|
||||
|
||||
const data = [{
|
||||
name: memberDetail('Nicola'),
|
||||
status: 'Active',
|
||||
role: 'Owner',
|
||||
key: 1
|
||||
}, {
|
||||
name: memberDetail('Alex'),
|
||||
status: 'Inactive',
|
||||
role: 'Read Only',
|
||||
key: 2
|
||||
}];
|
||||
|
||||
storiesOf('Table - Data Table', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
title="This is the table title"
|
||||
/>
|
||||
</Base>
|
||||
));
|
||||
25
ui/src/components/table-data-table/table-body.js
Normal file
25
ui/src/components/table-data-table/table-body.js
Normal file
@ -0,0 +1,25 @@
|
||||
const React = require('react');
|
||||
|
||||
const Row = require('./table-row');
|
||||
|
||||
const TableBody = ({
|
||||
columns,
|
||||
data
|
||||
}) => {
|
||||
const rows = columns.map( (column, index) => {
|
||||
return <Row dataItem={data[index]} key={index} />;
|
||||
});
|
||||
|
||||
return (
|
||||
<tbody>
|
||||
{rows}
|
||||
</tbody>
|
||||
);
|
||||
};
|
||||
|
||||
TableBody.propTypes = {
|
||||
columns: React.PropTypes.array,
|
||||
data: React.PropTypes.array
|
||||
};
|
||||
|
||||
module.exports = TableBody;
|
||||
39
ui/src/components/table-data-table/table-content.js
Normal file
39
ui/src/components/table-data-table/table-content.js
Normal file
@ -0,0 +1,39 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const TableBody = require('./table-body');
|
||||
const TableHeader = require('./table-head');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTable = styled.table`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TableContent = ({
|
||||
columns,
|
||||
data,
|
||||
hasHeader = columns.length >= 1,
|
||||
hasBody = data.length >= 1,
|
||||
width = '100%'
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<StyledTable>
|
||||
{hasHeader ? <TableHeader columns={columns} /> : null}
|
||||
{hasBody ? <TableBody columns={columns} data={data} /> : null}
|
||||
</StyledTable>
|
||||
);
|
||||
};
|
||||
|
||||
TableContent.propTypes = {
|
||||
columns: React.PropTypes.array,
|
||||
data: React.PropTypes.array,
|
||||
hasBody: React.PropTypes.bool,
|
||||
hasHeader: React.PropTypes.bool,
|
||||
width: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = TableContent;
|
||||
57
ui/src/components/table-data-table/table-head.js
Normal file
57
ui/src/components/table-data-table/table-head.js
Normal file
@ -0,0 +1,57 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const fns = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTableHeadItem = styled.td`
|
||||
${props => `width: ${props.width}`}
|
||||
border-bottom: none;
|
||||
padding: ${remcalc(24)};
|
||||
`;
|
||||
|
||||
const StyledTableHead = styled.thead`
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
border: solid ${remcalc(1)} #d8d8d8;
|
||||
`;
|
||||
|
||||
const TableHeader = ({
|
||||
columns
|
||||
}) => {
|
||||
|
||||
const fallBackWidth = `${100 / parseInt(columns.length)}%`;
|
||||
|
||||
const titles = columns.map( (column, i) => {
|
||||
|
||||
return (
|
||||
<StyledTableHeadItem
|
||||
key={i}
|
||||
width={column.width || fallBackWidth}
|
||||
>
|
||||
{column.title}
|
||||
</StyledTableHeadItem>
|
||||
);
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledTableHead>
|
||||
<tr>
|
||||
{titles}
|
||||
</tr>
|
||||
</StyledTableHead>
|
||||
);
|
||||
};
|
||||
|
||||
TableHeader.propTypes = {
|
||||
columns: React.PropTypes.array
|
||||
};
|
||||
|
||||
module.exports = TableHeader;
|
||||
44
ui/src/components/table-data-table/table-row.js
Normal file
44
ui/src/components/table-data-table/table-row.js
Normal file
@ -0,0 +1,44 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const fns = require('../../shared/functions');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledRow = styled.tr`
|
||||
border: solid ${remcalc(1)} #d8d8d8;
|
||||
`;
|
||||
|
||||
const StyledTableItem = styled.td`
|
||||
padding: ${remcalc(24)};
|
||||
`;
|
||||
|
||||
const Row = ({
|
||||
dataItem = {}
|
||||
}) => {
|
||||
const _dataItem = dataItem;
|
||||
|
||||
const rowItems = Object.keys(_dataItem).map( (item, i) => {
|
||||
const value = _dataItem[item];
|
||||
|
||||
return <StyledTableItem key={i}>{value}</StyledTableItem>;
|
||||
});
|
||||
|
||||
return (
|
||||
<StyledRow>
|
||||
{rowItems}
|
||||
</StyledRow>
|
||||
);
|
||||
};
|
||||
|
||||
Row.propTypes = {
|
||||
dataItem: React.PropTypes.object
|
||||
};
|
||||
|
||||
module.exports = Row;
|
||||
8
ui/src/components/table-simple-table/index.js
Normal file
8
ui/src/components/table-simple-table/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
Table: require('./table'),
|
||||
TableHead: require('./table-head'),
|
||||
TableBody: require('./table-body'),
|
||||
TableCell: require('./table-cell'),
|
||||
TableRow: require('./table-row'),
|
||||
TableItem: require('./table-item'),
|
||||
};
|
||||
41
ui/src/components/table-simple-table/readme.md
Normal file
41
ui/src/components/table-simple-table/readme.md
Normal file
@ -0,0 +1,41 @@
|
||||
# `<Avatar>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Base = require('../base');
|
||||
const Container = require('../container');
|
||||
const Row = require('../row');
|
||||
const Column = require('../column');
|
||||
const Avatar = require('./index.js');
|
||||
const styles = require('./style.css');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Base>
|
||||
<Row>
|
||||
<Column>
|
||||
<Avatar color='#35a8c0' name='Alex' />
|
||||
</Column>
|
||||
<Column>
|
||||
<Avatar color='#ef6176' name='Alex' src='https://openclipart.org/image/2400px/svg_to_png/177482/ProfilePlaceholderSuit.png' />
|
||||
</Column>
|
||||
</Row>
|
||||
</Base>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Avatar = require('ui/avatar');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Avatar color='#35a8c0' name='Alex' />
|
||||
<Avatar color='#ef6176' name='Alex' src='path/to/image.png' />
|
||||
);
|
||||
}
|
||||
```
|
||||
51
ui/src/components/table-simple-table/story.js
Normal file
51
ui/src/components/table-simple-table/story.js
Normal file
@ -0,0 +1,51 @@
|
||||
const React = require('react');
|
||||
const Base = require('../base');
|
||||
|
||||
const {
|
||||
storiesOf
|
||||
} = require('@kadira/storybook');
|
||||
|
||||
const _table = require('./');
|
||||
|
||||
const {
|
||||
Table,
|
||||
TableHead,
|
||||
TableItem,
|
||||
TableBody,
|
||||
TableRow
|
||||
} = _table;
|
||||
|
||||
storiesOf('Table - Simple', module)
|
||||
.add('Default', () => (
|
||||
<Base>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<TableItem>Member</TableItem>
|
||||
<TableItem>Status</TableItem>
|
||||
<TableItem>Role</TableItem>
|
||||
<TableItem>{/*Empty last Column*/}</TableItem>
|
||||
</TableHead>
|
||||
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableItem>
|
||||
<h4>Nicola (You)</h4>
|
||||
<p>nicola@biztech.com</p>
|
||||
</TableItem>
|
||||
<TableItem>Active</TableItem>
|
||||
<TableItem>Owner</TableItem>
|
||||
<TableItem>🗑️</TableItem>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableItem>
|
||||
<h4>Nicola (You)</h4>
|
||||
<p>nicola@biztech.com</p>
|
||||
</TableItem>
|
||||
<TableItem>Active</TableItem>
|
||||
<TableItem>Owner</TableItem>
|
||||
<TableItem>🗑️</TableItem>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Base>
|
||||
));
|
||||
39
ui/src/components/table-simple-table/table-body.js
Normal file
39
ui/src/components/table-simple-table/table-body.js
Normal file
@ -0,0 +1,39 @@
|
||||
const composers = require('../../shared/composers');
|
||||
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
clearfix
|
||||
} = composers;
|
||||
|
||||
const StyledTableBody = styled.article`
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
|
||||
${clearfix}
|
||||
`;
|
||||
|
||||
const TableBody = ({
|
||||
children
|
||||
}) => {
|
||||
|
||||
const itemCount = children.length;
|
||||
|
||||
if (itemCount <= 1) return;
|
||||
|
||||
return (
|
||||
<StyledTableBody itemCount={itemCount}>
|
||||
{children}
|
||||
</StyledTableBody>
|
||||
);
|
||||
};
|
||||
|
||||
TableBody.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = StyledTableBody;
|
||||
0
ui/src/components/table-simple-table/table-cell.js
Normal file
0
ui/src/components/table-simple-table/table-cell.js
Normal file
58
ui/src/components/table-simple-table/table-head.js
Normal file
58
ui/src/components/table-simple-table/table-head.js
Normal file
@ -0,0 +1,58 @@
|
||||
const fns = require('../../shared/functions');
|
||||
const composers = require('../../shared/composers');
|
||||
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
clearfix
|
||||
} = composers;
|
||||
|
||||
const StyledTableHead = styled.header`
|
||||
background: #fafafa;
|
||||
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
|
||||
padding: ${remcalc(24)} 0;
|
||||
|
||||
${clearfix}
|
||||
|
||||
& > .table-item {
|
||||
text-align: center;
|
||||
|
||||
${props => {
|
||||
const width = 100 / props.itemCount;
|
||||
return css`
|
||||
width: ${width}%;
|
||||
`;
|
||||
}}
|
||||
}
|
||||
`;
|
||||
|
||||
const TableHead = ({
|
||||
children
|
||||
}) => {
|
||||
|
||||
const itemCount = children.length;
|
||||
|
||||
if (itemCount <= 1) return;
|
||||
|
||||
return (
|
||||
<StyledTableHead itemCount={itemCount}>
|
||||
{children}
|
||||
</StyledTableHead>
|
||||
);
|
||||
};
|
||||
|
||||
TableHead.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = TableHead;
|
||||
28
ui/src/components/table-simple-table/table-item.js
Normal file
28
ui/src/components/table-simple-table/table-item.js
Normal file
@ -0,0 +1,28 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const Item = styled.div`
|
||||
display: inline-block;
|
||||
float: left;
|
||||
`;
|
||||
|
||||
const TableItem = ({
|
||||
children
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<Item className="table-item">
|
||||
{children}
|
||||
</Item>
|
||||
);
|
||||
};
|
||||
|
||||
TableItem.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = TableItem;
|
||||
54
ui/src/components/table-simple-table/table-row.js
Normal file
54
ui/src/components/table-simple-table/table-row.js
Normal file
@ -0,0 +1,54 @@
|
||||
const fns = require('../../shared/functions');
|
||||
const composers = require('../../shared/composers');
|
||||
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled,
|
||||
css
|
||||
} = Styled;
|
||||
|
||||
const {
|
||||
clearfix
|
||||
} = composers;
|
||||
|
||||
const {
|
||||
remcalc
|
||||
} = fns;
|
||||
|
||||
const StyledTableRow = styled.div`
|
||||
${clearfix}
|
||||
|
||||
padding: ${remcalc(24)} 0;
|
||||
border-bottom: solid 1px #d8d8d8;
|
||||
|
||||
& > .table-item {
|
||||
text-align: center;
|
||||
|
||||
${props => {
|
||||
const width = 100 / props.itemCount;
|
||||
return css`
|
||||
width: ${width}%;
|
||||
`;
|
||||
}}
|
||||
}
|
||||
`;
|
||||
|
||||
const TableRow = ({
|
||||
children
|
||||
}) => {
|
||||
const itemCount = children.length;
|
||||
|
||||
return (
|
||||
<StyledTableRow itemCount={itemCount}>
|
||||
{children}
|
||||
</StyledTableRow>
|
||||
);
|
||||
};
|
||||
|
||||
TableRow.propTypes = {
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
||||
module.exports = TableRow;
|
||||
49
ui/src/components/table-simple-table/table.js
Normal file
49
ui/src/components/table-simple-table/table.js
Normal file
@ -0,0 +1,49 @@
|
||||
const React = require('react');
|
||||
const Styled = require('styled-components');
|
||||
|
||||
const {
|
||||
default: styled
|
||||
} = Styled;
|
||||
|
||||
const StyledTableWrapper = styled.section`
|
||||
border: solid 1px #d8d8d8
|
||||
font-family: 'LibreFranklin', sans-serif;
|
||||
font-style: normal;
|
||||
`;
|
||||
|
||||
// const StyledTableHead = styled.thead``;
|
||||
// const StyledTableBody = styled.tbody``;
|
||||
|
||||
// const renderTable = ({
|
||||
// hasHeader = false,
|
||||
// hasBody = true,
|
||||
// width = '100%'
|
||||
// }) => {
|
||||
//
|
||||
// const tableBody = () => {
|
||||
//
|
||||
// return (
|
||||
// <StyledTableBody />
|
||||
// )
|
||||
// }
|
||||
//
|
||||
// }
|
||||
|
||||
const Table = ({
|
||||
children,
|
||||
title,
|
||||
}) => {
|
||||
|
||||
return (
|
||||
<StyledTableWrapper>
|
||||
{children}
|
||||
</StyledTableWrapper>
|
||||
);
|
||||
};
|
||||
|
||||
Table.propTypes = {
|
||||
children: React.PropTypes.node,
|
||||
title: React.PropTypes.string,
|
||||
};
|
||||
|
||||
module.exports = Table;
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 345 B |
@ -47,5 +47,16 @@ module.exports = {
|
||||
right: ${positions.right || 'auto'};
|
||||
bottom: ${positions.bottom || 'auto'};
|
||||
left: ${positions.left || 'auto'};
|
||||
`
|
||||
`,
|
||||
clearfix: css`
|
||||
&:before,
|
||||
&:after {
|
||||
content:"";
|
||||
display:table;
|
||||
}
|
||||
|
||||
&:after {
|
||||
clear:both;
|
||||
}
|
||||
`,
|
||||
};
|
||||
|
||||
454
ui/src/vendor/normalize.css
vendored
Normal file
454
ui/src/vendor/normalize.css
vendored
Normal file
@ -0,0 +1,454 @@
|
||||
/**************************************************************************
|
||||
* NORMALIZE.CSS *
|
||||
**************************************************************************/
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
main,
|
||||
menu,
|
||||
nav,
|
||||
section,
|
||||
summary {
|
||||
display: block;
|
||||
}
|
||||
|
||||
audio,
|
||||
canvas,
|
||||
progress,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
template,
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
a {
|
||||
background-color: transparent;
|
||||
-webkit-text-decoration-skip: objects;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline-width: 0;
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none;
|
||||
text-decoration: underline;
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
code,
|
||||
kbd,
|
||||
pre,
|
||||
samp {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 1em calc( (40 / 16) * 1rem);
|
||||
}
|
||||
|
||||
hr {
|
||||
-webkit-box-sizing: content-box;
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
optgroup {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
button,
|
||||
input {
|
||||
overflow: visible ;
|
||||
}
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
button,
|
||||
[type="button"],
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button;
|
||||
}
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: 1px solid #c0c0c0;
|
||||
margin: 0 2px;
|
||||
padding: 0.35em 0.625em 0.75em;
|
||||
}
|
||||
|
||||
legend {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
color: inherit;
|
||||
display: table;
|
||||
max-width: 100%;
|
||||
padding: 0;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
color: inherit;
|
||||
opacity: 0.54;
|
||||
}
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button;
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/**************************************************************************
|
||||
* BOOTSTRAP REBOOT *
|
||||
**************************************************************************/
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
@-ms-viewport {
|
||||
width: device-width;
|
||||
}
|
||||
|
||||
[tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
abbr[title],
|
||||
abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted #FFFFFF;
|
||||
}
|
||||
|
||||
address {
|
||||
margin-bottom: 1rem;
|
||||
font-style: normal;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
dl {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ul ul,
|
||||
ol ul,
|
||||
ul ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; /* Undo browser default */
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
|
||||
a {
|
||||
color: #364ACD;
|
||||
text-decoration: underline;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a,
|
||||
area,
|
||||
button,
|
||||
[role="button"],
|
||||
input,
|
||||
label,
|
||||
select,
|
||||
summary,
|
||||
textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tables
|
||||
*/
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
caption {
|
||||
padding-top: .75rem;
|
||||
padding-bottom: .75rem;
|
||||
color: #FFFFFF;
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
th {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
select,
|
||||
textarea {
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="radio"],
|
||||
input[type="checkbox"] {
|
||||
|
||||
&:disabled {
|
||||
cursor: disabled;
|
||||
}
|
||||
}
|
||||
|
||||
input[type="date"],
|
||||
input[type="time"],
|
||||
input[type="datetime-local"],
|
||||
input[type="month"] {
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
input[type="search"] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
1194
ui/yarn.lock
1194
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user