mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
base styles based on bootstrap and normalize
This commit is contained in:
parent
410f5a93e5
commit
6df1d14049
@ -1,5 +1,26 @@
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
const styles = require('./style.css');
|
||||
|
||||
module.exports = () => {
|
||||
return null;
|
||||
const Base = module.exports = ({
|
||||
className,
|
||||
style,
|
||||
children
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles.base
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Base.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
@ -1 +1,2 @@
|
||||
# `<Base>`
|
||||
|
||||
|
596
ui/src/components/base/style.css
Normal file
596
ui/src/components/base/style.css
Normal file
@ -0,0 +1,596 @@
|
||||
/* from:
|
||||
*
|
||||
* reboot.css v4.0.0-alpha.5
|
||||
* MIT License
|
||||
* github.com/twbs/bootstrap
|
||||
*
|
||||
* normalize.css v4.2.0
|
||||
* MIT License
|
||||
* github.com/necolas/normalize.css
|
||||
*/
|
||||
|
||||
@value cursor-disabled from "../../constants/forms.css";
|
||||
@value link-color, link-decoration, link-hover-color, link-hover-decoration from "../../constants/links.css";
|
||||
@value table-bg, table-cell-padding from "../../constants/tables.css";
|
||||
@value dt-font-weight, text-muted, abbr-border-color from "../../constants/typography.css";
|
||||
|
||||
:root {
|
||||
--cursor-disabled: cursor-disabled;
|
||||
--link-color: link-color;
|
||||
--link-decoration: link-decoration;
|
||||
--link-hover-color: link-hover-color;
|
||||
--link-hover-decoration: link-hover-decoration;
|
||||
--table-bg: table-bg;
|
||||
--table-cell-padding: table-cell-padding;
|
||||
--dt-font-weight: dt-font-weight;
|
||||
--text-muted: text-muted;
|
||||
--abbr-border-color: abbr-border-color;
|
||||
}
|
||||
|
||||
.base {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||
font-size: 1rem;
|
||||
line-height: 1.5;
|
||||
color: #373a3c;
|
||||
background-color: #fff;
|
||||
|
||||
& :global {
|
||||
|
||||
/**************************************************************************
|
||||
* 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 {
|
||||
font-size: 2em;
|
||||
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 40px;
|
||||
}
|
||||
|
||||
& 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;
|
||||
}
|
||||
|
||||
/*
|
||||
* Suppress the focus outline on elements that cannot be accessed via keyboard.
|
||||
* This prevents an unwanted focus outline from appearing around elements that
|
||||
* might still respond to pointer events.
|
||||
*
|
||||
* Credit: https://github.com/suitcss/base
|
||||
*/
|
||||
& [tabindex="-1"]:focus {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Typography
|
||||
*/
|
||||
|
||||
/* Remove top margins from headings
|
||||
*
|
||||
* By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||
* margin for easier control within type scales as it avoids margin collapsing.
|
||||
*/
|
||||
& h1,
|
||||
& h2,
|
||||
& h3,
|
||||
& h4,
|
||||
& h5,
|
||||
& h6 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* Reset margins on paragraphs
|
||||
*
|
||||
* Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||
* bottom margin to use `rem` units instead of `em`.
|
||||
*/
|
||||
& p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Abbreviations and acronyms */
|
||||
& abbr[title],
|
||||
/* Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257 */
|
||||
& abbr[data-original-title] {
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted var(--abbr-border-color);
|
||||
}
|
||||
|
||||
& 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: var(--dt-font-weight);
|
||||
}
|
||||
|
||||
& dd {
|
||||
margin-bottom: .5rem;
|
||||
margin-left: 0; /* Undo browser default */
|
||||
}
|
||||
|
||||
& blockquote {
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Links
|
||||
*/
|
||||
|
||||
& a {
|
||||
color: var(--link-color);
|
||||
text-decoration: var(--link-decoration);
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: var(--link-hover-decoration);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* And undo these styles for placeholder links/named anchors (without href)
|
||||
* which have not been made explicitly keyboard-focusable (without tabindex).
|
||||
* It would be more straightforward to just use a[href] in previous block, but that
|
||||
* causes specificity issues in many other styles that are too complex to fix.
|
||||
* See https://github.com/twbs/bootstrap/issues/19402
|
||||
*/
|
||||
|
||||
& a:not([href]):not([tabindex]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: var(--link-hover-color);
|
||||
text-decoration: var(--link-hover-decoration);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Code
|
||||
*/
|
||||
|
||||
& pre {
|
||||
/* Remove browser default top margin */
|
||||
margin-top: 0;
|
||||
/* Reset browser default of `1em` to use `rem`s */
|
||||
margin-bottom: 1rem;
|
||||
/* Normalize v4 removed this property, causing `<pre>` content to break out of wrapping code snippets */
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* Figures
|
||||
*/
|
||||
|
||||
& figure {
|
||||
/* Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||
* We reset that to create a better flow in-page.
|
||||
*/
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
/**
|
||||
* Images
|
||||
*/
|
||||
|
||||
& img {
|
||||
/* By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||
* centers them. This won't apply should you reset them to `block` level.
|
||||
*/
|
||||
vertical-align: middle;
|
||||
/* Note: `<img>`s are deliberately not made responsive by default.
|
||||
* For the rationale behind this, see the comments on the `.img-fluid` class.
|
||||
*/
|
||||
}
|
||||
|
||||
/* iOS "clickable elements" fix for role="button"
|
||||
*
|
||||
* Fixes "clickability" issue (and more generally, the firing of events such as focus as well)
|
||||
* for traditionally non-focusable elements with role="button"
|
||||
* see https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
|
||||
*/
|
||||
|
||||
& [role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
|
||||
*
|
||||
* In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
|
||||
* DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
|
||||
* However, they DO support removing the click delay via `touch-action: manipulation`.
|
||||
* See:
|
||||
* * https://v4-alpha.getbootstrap.com/content/reboot/#click-delay-optimization-for-touch
|
||||
* * http://caniuse.com/#feat=css-touch-action
|
||||
* * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay
|
||||
*/
|
||||
|
||||
& a,
|
||||
& area,
|
||||
& button,
|
||||
& [role="button"],
|
||||
& input,
|
||||
& label,
|
||||
& select,
|
||||
& summary,
|
||||
& textarea {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/**
|
||||
* Tables
|
||||
*/
|
||||
|
||||
& table {
|
||||
/* No longer part of Normalize since v4 */
|
||||
border-collapse: collapse;
|
||||
/* Reset for nesting within parents with `background-color`. */
|
||||
background-color: var(--table-bg);
|
||||
}
|
||||
|
||||
& caption {
|
||||
padding-top: var(--table-cell-padding);
|
||||
padding-bottom: var(--table-cell-padding);
|
||||
color: var(--text-muted);
|
||||
text-align: left;
|
||||
caption-side: bottom;
|
||||
}
|
||||
|
||||
& th {
|
||||
/* Centered by default, but left-align-ed to match the `td`s below. */
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
/**
|
||||
* Forms
|
||||
*/
|
||||
|
||||
& label {
|
||||
/* Allow labels to use `margin` for spacing. */
|
||||
display: inline-block;
|
||||
margin-bottom: .5rem;
|
||||
}
|
||||
|
||||
/* Work around a Firefox/IE bug where the transparent `button` background
|
||||
* results in a loss of the default `button` focus styles.
|
||||
*
|
||||
* Credit: https://github.com/suitcss/base/
|
||||
*/
|
||||
& button:focus {
|
||||
outline: 1px dotted;
|
||||
outline: 5px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
& input,
|
||||
& button,
|
||||
& select,
|
||||
& textarea {
|
||||
/* Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are */
|
||||
/* properly inherited. However, `line-height` isn't inherited there. */
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
& input[type="radio"],
|
||||
& input[type="checkbox"] {
|
||||
/* Apply a disabled cursor for radios and checkboxes.
|
||||
*
|
||||
* Note: Neither radios nor checkboxes can be readonly.
|
||||
*/
|
||||
&:disabled {
|
||||
cursor: var(--cursor-disabled);
|
||||
}
|
||||
}
|
||||
|
||||
& input[type="date"],
|
||||
& input[type="time"],
|
||||
& input[type="datetime-local"],
|
||||
& input[type="month"] {
|
||||
/* Remove the default appearance of temporal inputs to avoid a Mobile Safari
|
||||
* bug where setting a custom line-height prevents text from being vertically
|
||||
* centered within the input.
|
||||
*
|
||||
* Bug report: https://github.com/twbs/bootstrap/issues/11266
|
||||
*/
|
||||
-webkit-appearance: listbox;
|
||||
}
|
||||
|
||||
& textarea {
|
||||
/* Textareas should really only resize vertically so they don't break their (horizontal) containers. */
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
& fieldset {
|
||||
/* Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
||||
* so we reset that to ensure it behaves more like a standard block element.
|
||||
* See https://github.com/twbs/bootstrap/issues/12359.
|
||||
*/
|
||||
min-width: 0;
|
||||
/* Reset the default outline behavior of fieldsets so they don't affect page layout. */
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
& legend {
|
||||
/* Reset the entire legend element to match the `fieldset` */
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-bottom: .5rem;
|
||||
font-size: 1.5rem;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
& input[type="search"] {
|
||||
/* This overrides the extra rounded corners on search inputs in iOS so that our
|
||||
* `.form-control` class can properly style them. Note that this cannot simply
|
||||
* be added to `.form-control` as it's not specific enough. For details, see
|
||||
* https://github.com/twbs/bootstrap/issues/11586.
|
||||
*/
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* todo: needed? */
|
||||
& output {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Always hide an element with the `hidden` HTML attribute (from PureCSS). */
|
||||
& [hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5,12 +5,13 @@
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Grid = require('../grid');
|
||||
const Base = require('../base');
|
||||
const Container = require('../container');
|
||||
const Row = require('../row');
|
||||
const Column = require('./index');
|
||||
|
||||
const styles = {
|
||||
grid: {
|
||||
container: {
|
||||
backgroundColor: '#FFEBEE'
|
||||
},
|
||||
row: {
|
||||
@ -18,27 +19,19 @@ const styles = {
|
||||
},
|
||||
column: {
|
||||
backgroundColor: '#B71C1C',
|
||||
textAlign: 'center'
|
||||
},
|
||||
p: {
|
||||
textAlign: 'center',
|
||||
color: 'white'
|
||||
}
|
||||
};
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid style={styles.grid}>
|
||||
<Container style={styles.container}>
|
||||
<Row style={styles.row} around>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>1</p>
|
||||
</Column>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>2</p>
|
||||
</Column>
|
||||
<Column style={styles.column} xs={2}>
|
||||
<p style={styles.p}>3</p>
|
||||
</Column>
|
||||
<Column style={styles.column} xs={2}>1</Column>
|
||||
<Column style={styles.column} xs={2}>2</Column>
|
||||
<Column style={styles.column} xs={2}>3</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
```
|
||||
|
||||
@ -46,19 +39,19 @@ nmodule.exports = ReactDOM.renderToString(
|
||||
|
||||
```js
|
||||
const React = require('react');
|
||||
const Grid = require('ui/grid');
|
||||
const Container = require('ui/container');
|
||||
const Row = require('ui/row');
|
||||
const Column = require('ui/index');
|
||||
|
||||
module.exports = () => {
|
||||
return (
|
||||
<Grid>
|
||||
<Container>
|
||||
<Row around>
|
||||
<Column xs={2}>1</Column>
|
||||
<Column xs={2}>2</Column>
|
||||
<Column xs={2}>3</Column>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
};
|
||||
```
|
@ -1,5 +1,33 @@
|
||||
const React = require('react');
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
|
||||
*/
|
||||
|
||||
module.exports = () => {
|
||||
return null;
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Container = module.exports = ({
|
||||
fluid = false,
|
||||
className,
|
||||
children,
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles[fluid ? 'container-fluid' : 'container']
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Container.propTypes = {
|
||||
fluid: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node
|
||||
};
|
||||
|
@ -1 +1,16 @@
|
||||
# `<Container>`
|
||||
# `<Grid>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Container = require('./index.js');
|
||||
const Button = require('../button');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid><Button>Hello World</Button></Grid>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
||||
|
@ -1,33 +0,0 @@
|
||||
/*
|
||||
* based on
|
||||
* https://github.com/roylee0704/react-flexbox-grid/blob/master/src/components/Grid.js
|
||||
*/
|
||||
|
||||
const React = require('react');
|
||||
const classNames = require('classnames');
|
||||
const styles = require('./style.css');
|
||||
|
||||
const Grid = module.exports = ({
|
||||
fluid = false,
|
||||
className,
|
||||
children,
|
||||
style
|
||||
}) => {
|
||||
const cn = classNames(
|
||||
className,
|
||||
styles[fluid ? 'container-fluid' : 'container']
|
||||
);
|
||||
|
||||
return (
|
||||
<div style={style} className={cn}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Grid.propTypes = {
|
||||
fluid: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
style: React.PropTypes.object,
|
||||
children: React.PropTypes.node
|
||||
};
|
@ -1,16 +0,0 @@
|
||||
# `<Grid>`
|
||||
|
||||
## demo
|
||||
|
||||
```embed
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Grid = require('./index.js');
|
||||
const Button = require('../button');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid><Button>Hello World</Button></Grid>
|
||||
);
|
||||
```
|
||||
|
||||
## usage
|
@ -6,16 +6,16 @@
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom/server');
|
||||
const Row = require('./index.js');
|
||||
const Grid = require('../grid');
|
||||
const Container = require('../container');
|
||||
const Button = require('../button');
|
||||
|
||||
nmodule.exports = ReactDOM.renderToString(
|
||||
<Grid>
|
||||
<Container>
|
||||
<Row center='xs' start='sm'>
|
||||
<Button>1</Button>
|
||||
<Button>2</Button>
|
||||
</Row>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
```
|
||||
|
||||
|
@ -3,6 +3,6 @@
|
||||
* https://github.com/kristoferjoseph/flexboxgrid/blob/master/dist/flexboxgrid.css
|
||||
*/
|
||||
|
||||
@value sm-viewport: only screen and (min-width: 48em);
|
||||
@value md-viewport: only screen and (min-width: 64em);
|
||||
@value lg-viewport: only screen and (min-width: 75em);
|
||||
@value sm-viewport: only screen and (min-width: 48em); /* 768px */
|
||||
@value md-viewport: only screen and (min-width: 64em); /* 1024px */
|
||||
@value lg-viewport: only screen and (min-width: 75em); /* 1200px */
|
||||
|
9
ui/src/constants/colors.css
Normal file
9
ui/src/constants/colors.css
Normal file
@ -0,0 +1,9 @@
|
||||
@value brand-primary from "./colors.css";
|
||||
|
||||
:root {
|
||||
--brand-primary: #0275d8;
|
||||
--gray-light: #818a91;
|
||||
}
|
||||
|
||||
@value brand-primary: var(--brand-primary);
|
||||
@value gray-light: var(--gray-light);
|
5
ui/src/constants/forms.css
Normal file
5
ui/src/constants/forms.css
Normal file
@ -0,0 +1,5 @@
|
||||
:root {
|
||||
--cursor-disabled: not-allowed;
|
||||
}
|
||||
|
||||
@value cursor-disabled: var(--cursor-disabled);
|
13
ui/src/constants/links.css
Normal file
13
ui/src/constants/links.css
Normal file
@ -0,0 +1,13 @@
|
||||
@value brand-primary from "./colors.css";
|
||||
|
||||
:root {
|
||||
--link-color: brand-primary;
|
||||
--link-decoration: none;
|
||||
--link-hover-color: darken(var(--link-color), 15%);
|
||||
--link-hover-decoration: underline;
|
||||
}
|
||||
|
||||
@value link-color: var(--link-color);
|
||||
@value link-decoration: var(--link-decoration);
|
||||
@value link-hover-color: var(--link-hover-color);
|
||||
@value link-hover-decoration: var(--link-hover-decoration);
|
7
ui/src/constants/tables.css
Normal file
7
ui/src/constants/tables.css
Normal file
@ -0,0 +1,7 @@
|
||||
:root {
|
||||
--table-bg: transparent;
|
||||
--table-cell-padding: .75rem;
|
||||
}
|
||||
|
||||
@value table-bg: var(--table-bg);
|
||||
@value table-cell-padding: var(--table-cell-padding);
|
11
ui/src/constants/typography.css
Normal file
11
ui/src/constants/typography.css
Normal file
@ -0,0 +1,11 @@
|
||||
@value gray-light from "./colors.css";
|
||||
|
||||
:root {
|
||||
--dt-font-weight: bold;
|
||||
--text-muted: gray-light;
|
||||
--abbr-border-color: gray-light;
|
||||
}
|
||||
|
||||
@value dt-font-weight: var(--dt-font-weight);
|
||||
@value text-muted: var(--text-muted);
|
||||
@value abbr-border-color: var(--abbr-border-color);
|
@ -1,10 +1,15 @@
|
||||
module.exports = {
|
||||
components: {
|
||||
'Getting Started': require('./getting-started.md'),
|
||||
Layout: require('./layout.md'),
|
||||
Guidelines: {
|
||||
Overview: require('./guidelines/overview.md')
|
||||
},
|
||||
Components: {
|
||||
Base: require('./components/base/readme.md'),
|
||||
Container: require('./components/container/readme.md'),
|
||||
Row: require('./components/row/readme.md'),
|
||||
Column: require('./components/column/readme.md'),
|
||||
Button: require('./components/button/readme.md')
|
||||
},
|
||||
guidelines: {
|
||||
Overview: require('./guidelines/overview.md')
|
||||
}
|
||||
FAQ: require('./faq.md')
|
||||
};
|
||||
|
@ -1,5 +1,7 @@
|
||||
module.exports = {
|
||||
Base: require('./components/base'),
|
||||
Button: require('./components/button'),
|
||||
Column: require('./components/column'),
|
||||
Container: require('./components/container'),
|
||||
Base: require('./components/base')
|
||||
Row: require('./components/row')
|
||||
};
|
||||
|
0
ui/src/layout.md
Normal file
0
ui/src/layout.md
Normal file
2
ui/static/.gitignore
vendored
2
ui/static/.gitignore
vendored
@ -2,3 +2,5 @@
|
||||
!.gitignore
|
||||
!theme.css
|
||||
!index.html
|
||||
!reboot.css
|
||||
|
||||
|
@ -2,8 +2,8 @@
|
||||
<html lang='en-US'>
|
||||
<head>
|
||||
<title>Joyent UI Framework</title>
|
||||
<link href="https://necolas.github.io/normalize.css/5.0.0/normalize.css" rel="stylesheet" type="text/css">
|
||||
<link href="/static/theme.css" rel="stylesheet" type="text/css">
|
||||
<link href="/static/reboot.css" rel="stylesheet" type="text/css">
|
||||
<link href="/static/docs.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
<body>
|
||||
|
4
ui/static/reboot.css
Normal file
4
ui/static/reboot.css
Normal file
@ -0,0 +1,4 @@
|
||||
html, body {
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
}
|
Loading…
Reference in New Issue
Block a user