fix(ui-toolkit): update styyles
This commit is contained in:
Sara Vieira
Sérgio Ramos
parent
401eb18e2b
commit
e8f3f8c09d
|
|
@ -1,34 +1,34 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Breadcrumb Default Breadcrumb 1`] = `
|
||||
.c5 {
|
||||
.c4 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
color: rgb(59,70,204);
|
||||
font-weight: normal;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.c5 + p,
|
||||
.c5 + small,
|
||||
.c5 + h1,
|
||||
.c5 + h2,
|
||||
.c5 + label,
|
||||
.c5 + h3,
|
||||
.c5 + h4,
|
||||
.c5 + h5,
|
||||
.c5 + div,
|
||||
.c5 + span {
|
||||
margin-top: 1.5rem;
|
||||
.c4 + p,
|
||||
.c4 + small,
|
||||
.c4 + h1,
|
||||
.c4 + h2,
|
||||
.c4 + label,
|
||||
.c4 + h3,
|
||||
.c4 + h4,
|
||||
.c4 + h5,
|
||||
.c4 + div,
|
||||
.c4 + span {
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
.c5 {
|
||||
margin: 0.1875rem 0.625rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c3 {
|
||||
display: -webkit-inline-box;
|
||||
display: -webkit-inline-flex;
|
||||
display: -ms-inline-flexbox;
|
||||
|
|
@ -39,6 +39,10 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.c3:last-child svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
|
|
@ -48,18 +52,9 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
width: 100%;
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
border-bottom: 0.0625rem solid rgb(216,216,216);
|
||||
}
|
||||
|
||||
.c1 {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 62.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
|
|
@ -78,7 +73,7 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
margin-left: -0.625rem;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
.c2 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
|
|
@ -88,33 +83,8 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
display: block;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
width: 46rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
width: 56rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:75em) {
|
||||
.c1 {
|
||||
width: 59rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width:47.9375rem) {
|
||||
.c1 {
|
||||
padding-left: 0.375rem;
|
||||
padding-right: 0.375rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:0em) {
|
||||
.c3 {
|
||||
.c2 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
|
|
@ -127,126 +97,122 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
>
|
||||
<div
|
||||
className="c1"
|
||||
name="breadcrum"
|
||||
>
|
||||
<div
|
||||
className="c2"
|
||||
name="breadcrum"
|
||||
>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<div
|
||||
<h4
|
||||
className="c4"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Home
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
Home
|
||||
</h4>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<h4
|
||||
className="c4"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Warp Records Blog
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
Warp Records Blog
|
||||
</h4>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<h4
|
||||
className="c4"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Services
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
Services
|
||||
</h4>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div
|
||||
className="c3"
|
||||
>
|
||||
<h4
|
||||
className="c4"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
<h2
|
||||
className="c5"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Nginx
|
||||
</h2>
|
||||
<svg
|
||||
className="c6 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
Nginx
|
||||
</h4>
|
||||
<svg
|
||||
className="c5 "
|
||||
height="6"
|
||||
innerRef={undefined}
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(-90deg)",
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
}
|
||||
viewBox="0 0 9.6 6"
|
||||
width="9.6"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M9.6,1.12,8.24,0,4.8,3.5,1.36,0,0,1.12,4.8,6Z"
|
||||
fill="rgb(151, 151, 151)"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -256,11 +222,11 @@ exports[`Breadcrumb Default Breadcrumb 1`] = `
|
|||
exports[`Breadcrumb Default Item 1`] = `
|
||||
.c1 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: normal;
|
||||
line-height: 1.875rem;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
margin: 0;
|
||||
color: rgb(59,70,204);
|
||||
font-weight: normal;
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
|
|
@ -274,7 +240,7 @@ exports[`Breadcrumb Default Item 1`] = `
|
|||
.c1 + h5,
|
||||
.c1 + div,
|
||||
.c1 + span {
|
||||
margin-top: 1.5rem;
|
||||
margin-top: 0.75rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
|
|
@ -292,15 +258,19 @@ exports[`Breadcrumb Default Item 1`] = `
|
|||
align-items: center;
|
||||
}
|
||||
|
||||
.c0:last-child svg {
|
||||
display: none;
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<h2
|
||||
<h4
|
||||
className="c1"
|
||||
name="breadcrum-item"
|
||||
>
|
||||
Home
|
||||
</h2>
|
||||
</h4>
|
||||
<svg
|
||||
className="c2 "
|
||||
height="6"
|
||||
|
|
|
|||
|
|
@ -1,24 +1,17 @@
|
|||
import React from 'react';
|
||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Container from '../layout/view-container';
|
||||
|
||||
const Root = Container.extend`
|
||||
border-bottom: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
export default ({ children, ...rest }) => (
|
||||
<Root {...rest} fluid>
|
||||
<Container>
|
||||
<Row name="breadcrum">
|
||||
<Col xs={12}>{children}</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
</Root>
|
||||
<Container {...rest} fluid>
|
||||
<Row name="breadcrum">
|
||||
<Col xs={12}>{children}</Col>
|
||||
</Row>
|
||||
</Container>
|
||||
);
|
||||
|
||||
export { default as Item } from './item';
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@ import React from 'react';
|
|||
import styled, { withTheme } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { H2 } from '../text/headings';
|
||||
import { H4 } from '../text/headings';
|
||||
import { Arrow as BaseArrow } from '../icons';
|
||||
|
||||
const Name = H2.extend`
|
||||
color: ${props => props.theme.primary};
|
||||
const Name = H4.extend`
|
||||
font-weight: normal;
|
||||
margin: ${remcalc(12)} 0;
|
||||
`;
|
||||
|
||||
|
|
@ -17,6 +17,12 @@ const Arrow = styled(BaseArrow)`
|
|||
const Container = styled.div`
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&:last-child {
|
||||
svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const BaseLink = styled(({ component, children, ...rest }) =>
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
```
|
||||
```jsx
|
||||
|
||||
// Name: Active
|
||||
const React = require('react');
|
||||
const { default: Anchor } = require('../anchor/index.js');
|
||||
const { default: Breadcrumb } = require('./index.js');
|
||||
const { default: BreadcrumbItem } = require('./item.js');
|
||||
|
||||
<Breadcrumb>
|
||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||
<BreadcrumbItem>Warp Records Blog</BreadcrumbItem>
|
||||
<BreadcrumbItem>Services</BreadcrumbItem>
|
||||
<BreadcrumbItem>Nginx</BreadcrumbItem>
|
||||
<BreadcrumbItem><Anchor href="https://joyent.com">Warp Records Blog</Anchor></BreadcrumbItem>
|
||||
<BreadcrumbItem><Anchor href="https://joyent.com">Services</Anchor></BreadcrumbItem>
|
||||
<BreadcrumbItem><Anchor href="https://joyent.com">Ngnix</Anchor></BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -143,6 +143,7 @@ exports[`Form Checkbox 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
|
|
@ -223,6 +224,7 @@ exports[`Form FormLabel 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
|
|
@ -246,6 +248,7 @@ exports[`Form FormMeta 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
float: right;
|
||||
color: rgb(210,67,58);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
|
|
@ -263,6 +266,7 @@ exports[`Form FormMeta 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
float: right;
|
||||
color: rgb(227,130,0);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
|
|
@ -280,6 +284,7 @@ exports[`Form FormMeta 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
float: right;
|
||||
color: rgb(0,152,88);
|
||||
-webkit-text-fill-color: currentcolor;
|
||||
|
|
@ -523,6 +528,7 @@ exports[`Form Radio 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
|
|
@ -814,6 +820,7 @@ exports[`Form Toggle 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
margin-right: 0.75rem;
|
||||
font-weight: 600;
|
||||
white-space: pre;
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ exports[`label label 1`] = `
|
|||
display: block;
|
||||
color: rgb(70,70,70);
|
||||
text-align: left;
|
||||
margin-bottom: 0.1875rem;
|
||||
}
|
||||
|
||||
<label
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ const Label = styled.label`
|
|||
display: block;
|
||||
color: ${props => props.theme.secondary};
|
||||
text-align: left;
|
||||
margin-bottom: ${remcalc(3)};
|
||||
`;
|
||||
|
||||
export default Baseline(Label);
|
||||
|
|
|
|||
|
|
@ -18,7 +18,36 @@ exports[`Message Description 1`] = `
|
|||
`;
|
||||
|
||||
exports[`Message Message 1`] = `
|
||||
.c3 {
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.625rem;
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.625rem;
|
||||
padding-left: 0.625rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -26,7 +55,7 @@ exports[`Message Message 1`] = `
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -39,7 +68,30 @@ exports[`Message Message 1`] = `
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c2:before,
|
||||
.c2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.c2:before {
|
||||
top: -0.4375rem;
|
||||
right: 1.0625rem;
|
||||
border-width: 0 0.34375rem 0.4375rem 0.34375rem;
|
||||
border-color: transparent transparent rgb(216,216,216) transparent;
|
||||
}
|
||||
|
||||
.c2:after {
|
||||
top: -0.375rem;
|
||||
right: 1.125rem;
|
||||
border-width: 0 0.28125rem 0.375rem 0.28125rem;
|
||||
border-color: transparent transparent rgb(255,255,255) transparent;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
|
||||
min-width: 0.75rem;
|
||||
|
|
@ -47,11 +99,11 @@ exports[`Message Message 1`] = `
|
|||
background-color: rgb(0,152,88);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
padding: 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
|
|
@ -60,31 +112,86 @@ exports[`Message Message 1`] = `
|
|||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 58.333333333333336%;
|
||||
-ms-flex-preferred-size: 58.333333333333336%;
|
||||
flex-basis: 58.333333333333336%;
|
||||
max-width: 58.333333333333336%;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
<div
|
||||
className="c3"
|
||||
/>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h4
|
||||
className="c5"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c6"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Message Message Error 1`] = `
|
||||
.c3 {
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.625rem;
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.625rem;
|
||||
padding-left: 0.625rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -92,7 +199,7 @@ exports[`Message Message Error 1`] = `
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -105,7 +212,30 @@ exports[`Message Message Error 1`] = `
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c2:before,
|
||||
.c2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.c2:before {
|
||||
top: -0.4375rem;
|
||||
right: 1.0625rem;
|
||||
border-width: 0 0.34375rem 0.4375rem 0.34375rem;
|
||||
border-color: transparent transparent rgb(216,216,216) transparent;
|
||||
}
|
||||
|
||||
.c2:after {
|
||||
top: -0.375rem;
|
||||
right: 1.125rem;
|
||||
border-width: 0 0.28125rem 0.375rem 0.28125rem;
|
||||
border-color: transparent transparent rgb(255,255,255) transparent;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
|
||||
min-width: 0.75rem;
|
||||
|
|
@ -114,11 +244,11 @@ exports[`Message Message Error 1`] = `
|
|||
background-color: rgb(210,67,58);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
padding: 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
|
|
@ -127,31 +257,86 @@ exports[`Message Message Error 1`] = `
|
|||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 58.333333333333336%;
|
||||
-ms-flex-preferred-size: 58.333333333333336%;
|
||||
flex-basis: 58.333333333333336%;
|
||||
max-width: 58.333333333333336%;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
<div
|
||||
className="c3"
|
||||
/>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h4
|
||||
className="c5"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c6"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`Message Message Warning 1`] = `
|
||||
.c3 {
|
||||
.c0 {
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-flex: 1 1 auto;
|
||||
-ms-flex: 1 1 auto;
|
||||
flex: 1 1 auto;
|
||||
-webkit-flex-direction: row;
|
||||
-ms-flex-direction: row;
|
||||
flex-direction: row;
|
||||
-webkit-flex-wrap: wrap;
|
||||
-ms-flex-wrap: wrap;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.625rem;
|
||||
margin-left: -0.625rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
box-sizing: border-box;
|
||||
-webkit-flex: 0 0 auto;
|
||||
-ms-flex: 0 0 auto;
|
||||
flex: 0 0 auto;
|
||||
padding-right: 0.625rem;
|
||||
padding-left: 0.625rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
color: rgba(73,73,73,1);
|
||||
font-weight: 600;
|
||||
line-height: 1.5rem;
|
||||
|
|
@ -159,7 +344,7 @@ exports[`Message Message Warning 1`] = `
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
.c2 {
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
|
|
@ -172,7 +357,30 @@ exports[`Message Message Warning 1`] = `
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
.c2:before,
|
||||
.c2:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
.c2:before {
|
||||
top: -0.4375rem;
|
||||
right: 1.0625rem;
|
||||
border-width: 0 0.34375rem 0.4375rem 0.34375rem;
|
||||
border-color: transparent transparent rgb(216,216,216) transparent;
|
||||
}
|
||||
|
||||
.c2:after {
|
||||
top: -0.375rem;
|
||||
right: 1.125rem;
|
||||
border-width: 0 0.28125rem 0.375rem 0.28125rem;
|
||||
border-color: transparent transparent rgb(255,255,255) transparent;
|
||||
}
|
||||
|
||||
.c3 {
|
||||
border-radius: 0.1875rem 0 0 0.1875rem;
|
||||
margin: -0.0625rem 0 -0.0625rem -0.0625rem;
|
||||
min-width: 0.75rem;
|
||||
|
|
@ -181,11 +389,11 @@ exports[`Message Message Warning 1`] = `
|
|||
background-color: rgb(227,130,0);
|
||||
}
|
||||
|
||||
.c2 {
|
||||
.c4 {
|
||||
padding: 1.125rem 1.125rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
.c6 {
|
||||
color: rgba(73,73,73,1);
|
||||
line-height: 1.5rem;
|
||||
font-size: 0.9375rem;
|
||||
|
|
@ -194,25 +402,51 @@ exports[`Message Message Warning 1`] = `
|
|||
font-size: 0.8125rem;
|
||||
}
|
||||
|
||||
@media only screen and (min-width:48em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 100%;
|
||||
-ms-flex-preferred-size: 100%;
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width:64em) {
|
||||
.c1 {
|
||||
-webkit-flex-basis: 58.333333333333336%;
|
||||
-ms-flex-preferred-size: 58.333333333333336%;
|
||||
flex-basis: 58.333333333333336%;
|
||||
max-width: 58.333333333333336%;
|
||||
}
|
||||
}
|
||||
|
||||
<div
|
||||
className="c0"
|
||||
>
|
||||
<div
|
||||
className="c1"
|
||||
/>
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
<h4
|
||||
className="c3"
|
||||
<div
|
||||
className="c2"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c4"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
<div
|
||||
className="c3"
|
||||
/>
|
||||
<div
|
||||
className="c4"
|
||||
>
|
||||
<h4
|
||||
className="c5"
|
||||
>
|
||||
Choosing deployment data center
|
||||
</h4>
|
||||
<p
|
||||
className="c6"
|
||||
>
|
||||
Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -23,11 +23,24 @@ exports[`SectionList Anchor 1`] = `
|
|||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.375rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c0.active:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
<a
|
||||
|
|
@ -60,13 +73,36 @@ exports[`SectionList Anchor 2`] = `
|
|||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
padding: 0 0.375rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c0.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c0.active:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c0:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
<a
|
||||
|
|
@ -95,10 +131,15 @@ exports[`SectionList Item 1`] = `
|
|||
}
|
||||
|
||||
.c0 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c0:not(:last-child) {
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
|
||||
.c1 {
|
||||
|
|
@ -106,11 +147,24 @@ exports[`SectionList Item 1`] = `
|
|||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.375rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c1.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c1.active:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
<li
|
||||
|
|
@ -143,10 +197,15 @@ exports[`SectionList SectionList 1`] = `
|
|||
}
|
||||
|
||||
.c1 {
|
||||
display: inline-block;
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.6;
|
||||
margin-right: 1.4375rem;
|
||||
-webkit-flex-shrink: 0;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.c1:not(:last-child) {
|
||||
margin-right: 1.875rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
|
|
@ -154,13 +213,36 @@ exports[`SectionList SectionList 1`] = `
|
|||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
padding: 0 0.375rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c2.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c2.active:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c2:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c5 {
|
||||
|
|
@ -168,17 +250,51 @@ exports[`SectionList SectionList 1`] = `
|
|||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0 0.375rem;
|
||||
padding-bottom: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c5.active {
|
||||
color: rgb(59,70,204);
|
||||
cursor: default;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.c5.active:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(70,70,70);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.c0 {
|
||||
background: rgb(250,250,250);
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
padding: 0.8125rem 0.75rem;
|
||||
margin: 1.125rem 0 0 0;
|
||||
min-width: 100%;
|
||||
max-height: 50px;
|
||||
overflow-x: scroll;
|
||||
box-sizing: border-box;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.c0:after {
|
||||
width: 100%;
|
||||
height: 0.0625rem;
|
||||
background: rgb(216,216,216);
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
<ul
|
||||
|
|
|
|||
|
|
@ -68,6 +68,6 @@ describe('SectionList', () => {
|
|||
.toJSON();
|
||||
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect(tree).toHaveStyleRule('color', theme.primary.replace(/ /g, ''));
|
||||
expect(tree).toHaveStyleRule('color', theme.secondary.replace(/ /g, ''));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -5,16 +5,36 @@ import remcalc from 'remcalc';
|
|||
import Baseline from '../baseline';
|
||||
|
||||
const UnorderedList = styled.ul`
|
||||
background: ${props => props.theme.disabled};
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
padding: ${remcalc(13)} ${remcalc(12)};
|
||||
margin: ${remcalc(18)} 0 0 0;
|
||||
min-width: 100%;
|
||||
max-height: 50px;
|
||||
overflow-x: scroll;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
width: 100%;
|
||||
height: ${remcalc(1)};
|
||||
background: ${props => props.theme.grey};
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* @example ./usage.md
|
||||
*/
|
||||
const SectionList = ({ children, ...rest }) => (
|
||||
<UnorderedList {...rest}>{children}</UnorderedList>
|
||||
const SectionList = ({ children, mode, ...rest }) => (
|
||||
<UnorderedList {...rest}>
|
||||
{children}
|
||||
</UnorderedList>
|
||||
);
|
||||
|
||||
export default Baseline(SectionList);
|
||||
|
|
|
|||
|
|
@ -1,29 +1,52 @@
|
|||
import styled from 'styled-components';
|
||||
import styled, { css } from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
import BaseAnchor from '../anchor';
|
||||
import Baseline from '../baseline';
|
||||
|
||||
const border = css`
|
||||
width: 100%;
|
||||
height: ${remcalc(1)};
|
||||
background: ${props => props.theme.secondary};
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
export default Baseline(styled.li`
|
||||
display: inline-block;
|
||||
font-size: ${remcalc(15)};
|
||||
line-height: 1.6;
|
||||
margin-right: ${remcalc(23)};
|
||||
flex-shrink: 0;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: ${remcalc(30)};
|
||||
}
|
||||
`);
|
||||
|
||||
export const Anchor = Baseline(styled(BaseAnchor)`
|
||||
color: ${props => props.theme.secondary};
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
padding: 0 ${remcalc(6)};
|
||||
padding-bottom: ${remcalc(16)};
|
||||
position: relative;
|
||||
|
||||
&.active {
|
||||
color: ${props => props.theme.primary};
|
||||
cursor: default;
|
||||
font-weight: ${props => props.theme.font.weight.semibold};
|
||||
|
||||
&:after {
|
||||
${border}
|
||||
}
|
||||
}
|
||||
|
||||
${is('active')`
|
||||
color: ${props => props.theme.primary};
|
||||
cursor: default;
|
||||
font-weight: ${props => props.theme.font.weight.semibold};
|
||||
|
||||
&:after {
|
||||
${border}
|
||||
}
|
||||
`};
|
||||
`);
|
||||
|
|
|
|||
|
|
@ -1,26 +1,36 @@
|
|||
```jsx
|
||||
// Name: Example
|
||||
const React = require('react');
|
||||
const { default: SectionListItem, Anchor } = require('./item');
|
||||
const { default: SectionList } = require('./');
|
||||
|
||||
<SectionList>
|
||||
<SectionListItem>
|
||||
<Anchor active>Overview</Anchor>
|
||||
<Anchor active>Summary</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Services</Anchor>
|
||||
<Anchor>Package</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Instances</Anchor>
|
||||
<Anchor>Tags</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Versions</Anchor>
|
||||
<Anchor>Metadata</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Manifest</Anchor>
|
||||
<Anchor>User Scripts</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Settings</Anchor>
|
||||
<Anchor>Networks</Anchor>
|
||||
</SectionListItem>
|
||||
</SectionList>;
|
||||
<SectionListItem>
|
||||
<Anchor>Firewall</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Affinity</Anchor>
|
||||
</SectionListItem>
|
||||
<SectionListItem>
|
||||
<Anchor>Snapshots</Anchor>
|
||||
</SectionListItem>
|
||||
</SectionList>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import React, { Component } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
import ForEach from 'apr-for-each';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
const Wrapper = styled.section`
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
#### Header
|
||||
#### Table Header
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
|
|
@ -29,7 +29,7 @@ const { default: Table, Thead, Tr, Th, Tbody } = require('./');
|
|||
</Table>;
|
||||
```
|
||||
|
||||
#### Footer
|
||||
#### Table Footer
|
||||
|
||||
```jsx
|
||||
const React = require('react');
|
||||
|
|
@ -39,21 +39,21 @@ const { default: Table, Tfoot, Tr, Th } = require('./');
|
|||
<Table>
|
||||
<Tfoot>
|
||||
<Tr>
|
||||
<Th xs="32" padding="0" paddingLeft="12" middle left>
|
||||
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="32" padding="0" paddingLeft="12" middle left>
|
||||
<FormGroup style={{ display: 'flex', alignItems: 'center' }}>
|
||||
<Checkbox noMargin />
|
||||
</FormGroup>
|
||||
</Th>
|
||||
<Th sortOrder="asc" showSort left middle selected actionable>
|
||||
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} sortOrder="asc" showSort left middle selected actionable>
|
||||
<span>Name </span>
|
||||
</Th>
|
||||
<Th xs="150" left middle actionable>
|
||||
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="150" left middle actionable>
|
||||
<span>Status </span>
|
||||
</Th>
|
||||
<Th xs="0" sm="160" left middle actionable>
|
||||
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="0" sm="160" left middle actionable>
|
||||
<span>Created </span>
|
||||
</Th>
|
||||
<Th xs="60" padding="0" />
|
||||
<Th style={{borderTop: '1px solid rgb(216,216,216)'}} xs="60" padding="0" />
|
||||
</Tr>
|
||||
</Tfoot>
|
||||
</Table>;
|
||||
|
|
@ -100,9 +100,8 @@ const { Dot, Actions } = require('../icons');
|
|||
<Td middle left>
|
||||
<span>
|
||||
<Dot
|
||||
width={(11)}
|
||||
height={(11)}
|
||||
borderRadius={(11)}
|
||||
size="11px"
|
||||
borderRadius={11}
|
||||
color="primary"
|
||||
/>{' '}
|
||||
Provisioning
|
||||
|
|
@ -127,9 +126,8 @@ const { Dot, Actions } = require('../icons');
|
|||
<Td middle left>
|
||||
<span>
|
||||
<Dot
|
||||
width={(11)}
|
||||
height={(11)}
|
||||
borderRadius={(11)}
|
||||
size="11px"
|
||||
borderRadius={11}
|
||||
color="green"
|
||||
/>{' '}
|
||||
Running
|
||||
|
|
@ -182,9 +180,8 @@ const { Dot } = require('../icons');
|
|||
<Td middle left selected>
|
||||
<span>
|
||||
<Dot
|
||||
width={(11)}
|
||||
height={(11)}
|
||||
borderRadius={(11)}
|
||||
size="11px"
|
||||
borderRadius={11}
|
||||
color="primary"
|
||||
/>{' '}
|
||||
Provisioning
|
||||
|
|
@ -206,9 +203,8 @@ const { Dot } = require('../icons');
|
|||
<Td middle left>
|
||||
<span>
|
||||
<Dot
|
||||
width={(11)}
|
||||
height={(11)}
|
||||
borderRadius={(11)}
|
||||
size="11px"
|
||||
borderRadius={11}
|
||||
color="green"
|
||||
/>{' '}
|
||||
Running
|
||||
|
|
|
|||
|
|
@ -562,7 +562,7 @@ apr-filter@^3.0.2:
|
|||
apr-engine-sum "^3.0.3"
|
||||
apr-map "^3.0.3"
|
||||
|
||||
apr-for-each@^3.0.3:
|
||||
apr-for-each@^3.0.2, apr-for-each@^3.0.3:
|
||||
version "3.0.3"
|
||||
resolved "https://registry.yarnpkg.com/apr-for-each/-/apr-for-each-3.0.3.tgz#2efa6834bcac3ac8a7ecda4642edd318b7708580"
|
||||
dependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue