Implement responsive designs for CI: Networks (#1438)
* feat(instances): network section responive behaviour * feat(instances): adjust network info container width * test(instances): update network step snapshot * test(instances): update network step snapshots
This commit is contained in:
Fábio Moreira
GitHub
parent
5cb02d709c
commit
6736caaf45
@ -1048,7 +1048,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c17 {
|
.c17 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c6 {
|
||||||
@ -1403,6 +1403,12 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c17 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:48em) {
|
@media only screen and (min-width:48em) {
|
||||||
.c1 {
|
.c1 {
|
||||||
width: 46rem;
|
width: 46rem;
|
||||||
@ -1655,139 +1661,285 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<span
|
||||||
className="c19"
|
name="react-responsive-mock"
|
||||||
|
query="only screen and (min-width: 37.5rem)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c20"
|
className="c19"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c21"
|
className="c20"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c20"
|
className="c21"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c22"
|
className="c20"
|
||||||
>
|
>
|
||||||
<svg
|
<div
|
||||||
height="17"
|
className="c22"
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
>
|
||||||
<g
|
<svg
|
||||||
transform="translate(-1105 974)"
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
>
|
>
|
||||||
<g>
|
<g
|
||||||
<g>
|
transform="translate(-1105 974)"
|
||||||
<use
|
>
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -968)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
<g>
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgb(73, 73, 73)"
|
fill="rgb(73, 73, 73)"
|
||||||
transform="translate(1111 -968)"
|
transform="translate(1105 -974)"
|
||||||
xlinkHref="#d"
|
xlinkHref="#c"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgb(73, 73, 73)"
|
fill="rgb(73, 73, 73)"
|
||||||
transform="translate(1117 -968)"
|
transform="translate(1111 -974)"
|
||||||
xlinkHref="#d"
|
xlinkHref="#c"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgb(73, 73, 73)"
|
fill="rgb(73, 73, 73)"
|
||||||
transform="translate(1105 -962)"
|
transform="translate(1117 -974)"
|
||||||
xlinkHref="#d"
|
xlinkHref="#c"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<use
|
<use
|
||||||
fill="rgb(73, 73, 73)"
|
fill="rgb(73, 73, 73)"
|
||||||
transform="translate(1111 -962)"
|
transform="translate(1105 -968)"
|
||||||
xlinkHref="#d"
|
xlinkHref="#c"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
<g>
|
||||||
<use
|
<g>
|
||||||
fill="rgb(73, 73, 73)"
|
<use
|
||||||
transform="translate(1117 -962)"
|
fill="rgb(73, 73, 73)"
|
||||||
xlinkHref="#d"
|
transform="translate(1111 -968)"
|
||||||
/>
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1117 -968)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1105 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1111 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1117 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
<defs>
|
||||||
<defs>
|
<path
|
||||||
<path
|
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
||||||
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
id="c"
|
||||||
id="c"
|
/>
|
||||||
/>
|
<path
|
||||||
<path
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
id="d"
|
||||||
id="d"
|
/>
|
||||||
/>
|
</defs>
|
||||||
</defs>
|
</svg>
|
||||||
</svg>
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="c20"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="c6"
|
||||||
|
>
|
||||||
|
2 instances
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
name="react-responsive-mock"
|
||||||
|
query="only screen and (max-width: 37.4375rem)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="c18"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="c19"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="c20"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
className="c20"
|
className="c21"
|
||||||
>
|
>
|
||||||
<p
|
<div
|
||||||
className="c6"
|
className="c20"
|
||||||
>
|
>
|
||||||
2 instances
|
<div
|
||||||
</p>
|
className="c22"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
height="17"
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"transform": "rotate(0deg)",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 17 17"
|
||||||
|
width="17"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlnsXlink="http://www.w3.org/1999/xlink"
|
||||||
|
>
|
||||||
|
<g
|
||||||
|
transform="translate(-1105 974)"
|
||||||
|
>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1105 -974)"
|
||||||
|
xlinkHref="#c"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1111 -974)"
|
||||||
|
xlinkHref="#c"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1117 -974)"
|
||||||
|
xlinkHref="#c"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1105 -968)"
|
||||||
|
xlinkHref="#c"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1111 -968)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1117 -968)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1105 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1111 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g>
|
||||||
|
<g>
|
||||||
|
<use
|
||||||
|
fill="rgb(73, 73, 73)"
|
||||||
|
transform="translate(1117 -962)"
|
||||||
|
xlinkHref="#d"
|
||||||
|
/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<defs>
|
||||||
|
<path
|
||||||
|
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
||||||
|
id="c"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
||||||
|
id="d"
|
||||||
|
/>
|
||||||
|
</defs>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="c20"
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="c6"
|
||||||
|
>
|
||||||
|
2 instances
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</span>
|
||||||
<div
|
<div
|
||||||
className="c23"
|
className="c23"
|
||||||
>
|
>
|
||||||
@ -2042,7 +2194,15 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<span
|
||||||
|
name="react-responsive-mock"
|
||||||
|
query="only screen and (min-width: 37.5rem)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<span
|
||||||
|
name="react-responsive-mock"
|
||||||
|
query="only screen and (max-width: 37.4375rem)"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -48,7 +48,7 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c19 {
|
.c19 {
|
||||||
@ -452,6 +452,12 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
@ -958,7 +964,7 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c21 {
|
||||||
@ -1362,6 +1368,12 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
@ -1881,7 +1893,7 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c21 {
|
||||||
@ -2285,6 +2297,12 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
@ -2808,7 +2826,7 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
@ -3258,6 +3276,12 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
@ -3437,138 +3461,6 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className="c22"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c24"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c25"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
transform="translate(-1105 974)"
|
|
||||||
>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -968)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -968)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -968)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<path
|
|
||||||
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
|
||||||
id="c"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
|
||||||
id="d"
|
|
||||||
/>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
className="c20"
|
|
||||||
>
|
|
||||||
0 instances
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="c26"
|
className="c26"
|
||||||
@ -3965,7 +3857,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
margin-bottom: 0.75rem;
|
margin-bottom: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c33 {
|
.c34 {
|
||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -3975,7 +3867,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c27 {
|
.c27 {
|
||||||
@ -4118,7 +4010,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c32 {
|
.c33 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -4399,7 +4291,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34 {
|
.c35 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
@ -4423,62 +4315,62 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:focus {
|
.c35:focus {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34::-webkit-input-placeholder {
|
.c35::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34::-moz-placeholder {
|
.c35::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:-ms-input-placeholder {
|
.c35:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:invalid {
|
.c35:invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled {
|
.c35:disabled {
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled::-webkit-input-placeholder {
|
.c35:disabled::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled::-moz-placeholder {
|
.c35:disabled::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled:-ms-input-placeholder {
|
.c35:disabled:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled {
|
.c35:disabled {
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled::-webkit-input-placeholder {
|
.c35:disabled::-webkit-input-placeholder {
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled::-moz-placeholder {
|
.c35:disabled::-moz-placeholder {
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c34:disabled:-ms-input-placeholder {
|
.c35:disabled:-ms-input-placeholder {
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c31 {
|
.c32 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
@ -4488,6 +4380,10 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
background-color: #f7f7f7;
|
background-color: #f7f7f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c31 {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@media only screen and (min-width:0em) {
|
@media only screen and (min-width:0em) {
|
||||||
.c1 {
|
.c1 {
|
||||||
-webkit-flex-basis: 100%;
|
-webkit-flex-basis: 100%;
|
||||||
@ -4506,6 +4402,12 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
@ -4685,138 +4587,6 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
className="c22"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c24"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c25"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
height="17"
|
|
||||||
style={
|
|
||||||
Object {
|
|
||||||
"transform": "rotate(0deg)",
|
|
||||||
}
|
|
||||||
}
|
|
||||||
version="1.1"
|
|
||||||
viewBox="0 0 17 17"
|
|
||||||
width="17"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlnsXlink="http://www.w3.org/1999/xlink"
|
|
||||||
>
|
|
||||||
<g
|
|
||||||
transform="translate(-1105 974)"
|
|
||||||
>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -974)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -968)"
|
|
||||||
xlinkHref="#c"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -968)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -968)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1105 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1111 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<g>
|
|
||||||
<g>
|
|
||||||
<use
|
|
||||||
fill="rgb(73, 73, 73)"
|
|
||||||
transform="translate(1117 -962)"
|
|
||||||
xlinkHref="#d"
|
|
||||||
/>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
</g>
|
|
||||||
<defs>
|
|
||||||
<path
|
|
||||||
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
|
|
||||||
id="c"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
|
|
||||||
id="d"
|
|
||||||
/>
|
|
||||||
</defs>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="c23"
|
|
||||||
>
|
|
||||||
<p
|
|
||||||
className="c20"
|
|
||||||
>
|
|
||||||
0 instances
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="c26"
|
className="c26"
|
||||||
@ -4888,22 +4658,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
className="c30"
|
className="c30"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c31 c8"
|
||||||
name="id"
|
name="id"
|
||||||
role="group"
|
role="group"
|
||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c31 c32"
|
className="c32 c33"
|
||||||
htmlFor="x"
|
htmlFor="x"
|
||||||
>
|
>
|
||||||
ID
|
ID
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c33"
|
className="c34"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c34"
|
className="c35"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="x"
|
id="x"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -4917,22 +4687,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
className="c23"
|
className="c23"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c31 c8"
|
||||||
name="subnet"
|
name="subnet"
|
||||||
role="group"
|
role="group"
|
||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c31 c32"
|
className="c32 c33"
|
||||||
htmlFor="y"
|
htmlFor="y"
|
||||||
>
|
>
|
||||||
Subnet
|
Subnet
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c33"
|
className="c34"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c34"
|
className="c35"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="y"
|
id="y"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -4945,22 +4715,22 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
className="c23"
|
className="c23"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c31 c8"
|
||||||
name="ip-range"
|
name="ip-range"
|
||||||
role="group"
|
role="group"
|
||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c31 c32"
|
className="c32 c33"
|
||||||
htmlFor="z"
|
htmlFor="z"
|
||||||
>
|
>
|
||||||
IP range
|
IP range
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c33"
|
className="c34"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c34"
|
className="c35"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="z"
|
id="z"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -5313,7 +5083,7 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
|
|
||||||
.c18 {
|
.c18 {
|
||||||
padding: 1.875rem;
|
padding: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c21 {
|
.c21 {
|
||||||
@ -5717,6 +5487,12 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (min-width:46.0625em) {
|
||||||
|
.c18 {
|
||||||
|
padding: 1.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -29,9 +29,12 @@ import {
|
|||||||
DataCenterIcon,
|
DataCenterIcon,
|
||||||
PublicIcon,
|
PublicIcon,
|
||||||
PrivateIcon,
|
PrivateIcon,
|
||||||
ArrowIcon
|
ArrowIcon,
|
||||||
|
QueryBreakpoints
|
||||||
} from 'joyent-ui-toolkit';
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
const { SmallOnly, Medium } = QueryBreakpoints;
|
||||||
|
|
||||||
const Box = styled.div`
|
const Box = styled.div`
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: ${props => props.theme.white};
|
background-color: ${props => props.theme.white};
|
||||||
@ -46,6 +49,10 @@ const CardHeader = styled(BaseCardHeader)`
|
|||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
const ResponsiveFormGroup = styled(FormGroup)`
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
export const Collapsed = ({ name, fabric, ...network }) => (
|
export const Collapsed = ({ name, fabric, ...network }) => (
|
||||||
<Margin inline right={3} top={3}>
|
<Margin inline right={3} top={3}>
|
||||||
<Box>
|
<Box>
|
||||||
@ -138,7 +145,7 @@ export const Expanded = ({
|
|||||||
</CardHeaderMeta>
|
</CardHeaderMeta>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardOutlet>
|
<CardOutlet>
|
||||||
<Padding all={5}>
|
<Padding all={{ mobile: 3, tablet: 5 }}>
|
||||||
{description && (
|
{description && (
|
||||||
<Margin bottom={3}>
|
<Margin bottom={3}>
|
||||||
<P>{description}</P>
|
<P>{description}</P>
|
||||||
@ -175,25 +182,49 @@ export const Expanded = ({
|
|||||||
</Flex>
|
</Flex>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Margin>
|
</Margin>
|
||||||
{fabric ? (
|
<Medium>
|
||||||
<Margin right={5}>
|
{fabric ? (
|
||||||
<FlexItem>
|
<Margin right={5}>
|
||||||
<Flex alignCenter>
|
<FlexItem>
|
||||||
<FlexItem>
|
<Flex alignCenter>
|
||||||
<Margin right={1}>
|
<FlexItem>
|
||||||
<InstanceCountIcon />
|
<Margin right={1}>
|
||||||
</Margin>
|
<InstanceCountIcon />
|
||||||
</FlexItem>
|
</Margin>
|
||||||
<FlexItem>
|
</FlexItem>
|
||||||
<P>{`${machines.length} instance${
|
<FlexItem>
|
||||||
machines.length === 1 ? '' : 's'
|
<P>{`${machines.length} instance${
|
||||||
}`}</P>
|
machines.length === 1 ? '' : 's'
|
||||||
</FlexItem>
|
}`}</P>
|
||||||
</Flex>
|
</FlexItem>
|
||||||
</FlexItem>
|
</Flex>
|
||||||
</Margin>
|
</FlexItem>
|
||||||
) : null}
|
</Margin>
|
||||||
|
) : null}
|
||||||
|
</Medium>
|
||||||
</Flex>
|
</Flex>
|
||||||
|
<SmallOnly>
|
||||||
|
{fabric ? (
|
||||||
|
<Flex>
|
||||||
|
<Margin right={5}>
|
||||||
|
<FlexItem>
|
||||||
|
<Flex alignCenter>
|
||||||
|
<FlexItem>
|
||||||
|
<Margin right={1}>
|
||||||
|
<InstanceCountIcon />
|
||||||
|
</Margin>
|
||||||
|
</FlexItem>
|
||||||
|
<FlexItem>
|
||||||
|
<P>{`${machines.length} instance${
|
||||||
|
machines.length === 1 ? '' : 's'
|
||||||
|
}`}</P>
|
||||||
|
</FlexItem>
|
||||||
|
</Flex>
|
||||||
|
</FlexItem>
|
||||||
|
</Margin>
|
||||||
|
</Flex>
|
||||||
|
) : null}
|
||||||
|
</SmallOnly>
|
||||||
{fabric ? (
|
{fabric ? (
|
||||||
<Fragment>
|
<Fragment>
|
||||||
<Margin top={3}>
|
<Margin top={3}>
|
||||||
@ -235,7 +266,7 @@ export const Expanded = ({
|
|||||||
) : null}
|
) : null}
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Margin bottom={2}>
|
<Margin bottom={2}>
|
||||||
<FormGroup name="id">
|
<ResponsiveFormGroup name="id">
|
||||||
<FormLabel>ID</FormLabel>
|
<FormLabel>ID</FormLabel>
|
||||||
<Margin top={0.5}>
|
<Margin top={0.5}>
|
||||||
<Input
|
<Input
|
||||||
@ -246,11 +277,11 @@ export const Expanded = ({
|
|||||||
value={id}
|
value={id}
|
||||||
/>
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</ResponsiveFormGroup>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<FormGroup name="subnet">
|
<ResponsiveFormGroup name="subnet">
|
||||||
<FormLabel>Subnet</FormLabel>
|
<FormLabel>Subnet</FormLabel>
|
||||||
<Margin top={0.5}>
|
<Margin top={0.5}>
|
||||||
<Input
|
<Input
|
||||||
@ -261,10 +292,10 @@ export const Expanded = ({
|
|||||||
value={subnet}
|
value={subnet}
|
||||||
/>
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</ResponsiveFormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<FormGroup name="ip-range">
|
<ResponsiveFormGroup name="ip-range">
|
||||||
<FormLabel>IP range</FormLabel>
|
<FormLabel>IP range</FormLabel>
|
||||||
<Margin top={0.5}>
|
<Margin top={0.5}>
|
||||||
<Input
|
<Input
|
||||||
@ -275,7 +306,7 @@ export const Expanded = ({
|
|||||||
value={`${provision_start_ip} - ${provision_end_ip}`}
|
value={`${provision_start_ip} - ${provision_end_ip}`}
|
||||||
/>
|
/>
|
||||||
</Margin>
|
</Margin>
|
||||||
</FormGroup>
|
</ResponsiveFormGroup>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Padding>
|
</Padding>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user