joyent-portal/packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

12704 lines
320 KiB
Plaintext
Raw Normal View History

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`renders <Summary /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c19 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c23 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c21 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c20 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c20:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c20:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c20[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c20:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c20:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c20:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c20:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c20:active,
.c20:active:hover,
.c20:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c20 svg + span {
margin-left: 0.75rem;
}
.c20 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c22 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c26 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c26::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c26::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c26:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c26:invalid {
box-shadow: none;
}
.c26:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c26:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c26:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c26:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c26:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c28 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c28::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c28::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c28:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c28:invalid {
box-shadow: none;
}
.c28:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c28:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c28:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c28:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c28:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c24 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c25 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c25 input {
padding-right: 1.875rem;
}
.c25 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c27 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c19 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c23 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c23 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
/>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Custom Image
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color={undefined}
height="0.6875rem"
width="0.6875rem"
/>
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c19"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c20 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c20 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c21"
>
<div
className="c22 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c23"
>
<label
className="c24"
htmlFor=""
>
Short ID
</label>
<div
className="c25"
>
<input
className="c26"
disabled={false}
id=""
value=""
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c27 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c23"
>
<label
className="c24"
htmlFor=""
>
ID
</label>
<div
className="c25"
>
<input
className="c26"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c27 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c23"
>
<label
className="c24"
htmlFor=""
>
CN UUID
</label>
<div
className="c25"
>
<input
className="c26"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c27 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c23"
>
<label
className="c24"
htmlFor=""
>
Login
</label>
<div
className="c25"
>
<input
className="c28"
disabled={false}
id=""
value="ssh root@undefined"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c27 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary instance /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c22 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c19 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c19:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c19:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c19:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c19 svg + span {
margin-left: 0.75rem;
}
.c19 svg {
max-height: 1.125rem;
}
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c23 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(0,152,88);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c27 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c27::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:invalid {
box-shadow: none;
}
.c27:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c27:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c25 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c26 input {
padding-right: 1.875rem;
}
.c26 div {
position: relative;
left: -1.625rem;
}
.c29 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0rem;
}
.c29 input {
padding-right: 1.875rem;
}
.c29 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c28 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c20 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c24 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
>
g4-highcpu-128M
</h2>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Alpine 3
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color="green"
height="0.6875rem"
width="0.6875rem"
/>
Running
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c20"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c22"
>
<div
className="c23 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Short ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="2252839a"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="2252839a-e698-ceec-afac-9549ad0c6624"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
CN UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Image UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Login
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="ssh root@72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
IP address 1
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
IP address 2
</label>
<div
className="c29"
>
<input
className="c27"
disabled={false}
id=""
value="10.112.5.63"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary instance /> without throwing 2`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c22 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c19 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c19:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c19:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c19:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c19 svg + span {
margin-left: 0.75rem;
}
.c19 svg {
max-height: 1.125rem;
}
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c23 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(0,152,88);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c27 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c27::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:invalid {
box-shadow: none;
}
.c27:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c27:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c25 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c26 input {
padding-right: 1.875rem;
}
.c26 div {
position: relative;
left: -1.625rem;
}
.c29 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom: 0rem;
}
.c29 input {
padding-right: 1.875rem;
}
.c29 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c28 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c20 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c24 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
>
g4-highcpu-128M
</h2>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
</label>
<div
className="c10"
/>
<label
className="c9"
>
Infrastructure Container
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color="green"
height="0.6875rem"
width="0.6875rem"
/>
Running
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c20"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c22"
>
<div
className="c23 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Short ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="2252839a"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="2252839a-e698-ceec-afac-9549ad0c6624"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
CN UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="70bb1cee-dba3-11e3-a799-002590e4f2b0"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Image UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="19aa3328-0025-11e7-a19a-c39077bfd4cf"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Login
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="ssh root@72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
IP address 1
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value="72.2.119.146"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
IP address 2
</label>
<div
className="c29"
>
<input
className="c27"
disabled={false}
id=""
value="10.112.5.63"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary starting stopping rebooting deleting /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c23 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c27 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c25 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c20 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
}
.c21 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 0.5s;
animation-delay: 0.5s;
}
.c22 {
fill: rgb(59,70,204);
stroke: rgb(59,70,204);
-webkit-animation: iCqDak 1.5s ease-out 0s infinite;
animation: iCqDak 1.5s ease-out 0s infinite;
-webkit-animation-delay: 1s;
animation-delay: 1s;
}
.c19 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: center;
-ms-flex-line-pack: center;
align-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 1.25rem;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c24 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c24:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c24:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c24[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c24:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c24:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c24:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c24:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c24:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c24:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c24:active,
.c24:active:hover,
.c24:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c24 svg + span {
margin-left: 0.75rem;
}
.c24 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c26 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c30 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c30::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:invalid {
box-shadow: none;
}
.c30:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c30:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c30:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c32 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c32::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:invalid {
box-shadow: none;
}
.c32:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c32:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c32:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c28 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c29 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c29 input {
padding-right: 1.875rem;
}
.c29 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c31 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c23 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c27 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c27 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
/>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Custom Image
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color={undefined}
height="0.6875rem"
width="0.6875rem"
/>
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
</div>
<div
className="c23"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c24 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c24 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<div
className="c19"
>
<svg
height="10"
width="28"
>
<rect
className="c20"
height="6"
width="6"
x="2"
y="2"
/>
<rect
className="c21"
height="6"
width="6"
x="11"
y="2"
/>
<rect
className="c22"
height="6"
width="6"
x="20"
y="2"
/>
</svg>
</div>
</button>
</span>
</div>
</div>
<div
className="c25"
>
<div
className="c26 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c27"
>
<label
className="c28"
htmlFor=""
>
Short ID
</label>
<div
className="c29"
>
<input
className="c30"
disabled={false}
id=""
value=""
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c31 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c27"
>
<label
className="c28"
htmlFor=""
>
ID
</label>
<div
className="c29"
>
<input
className="c30"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c31 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c27"
>
<label
className="c28"
htmlFor=""
>
CN UUID
</label>
<div
className="c29"
>
<input
className="c30"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c31 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c27"
>
<label
className="c28"
htmlFor=""
>
Login
</label>
<div
className="c29"
>
<input
className="c32"
disabled={false}
id=""
value="ssh root@undefined"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c31 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary state /> without throwing 1`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c22 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c19 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c19:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c19:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c19:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c19 svg + span {
margin-left: 0.75rem;
}
.c19 svg {
max-height: 1.125rem;
}
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c23 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(0,152,88);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c27 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c27::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:invalid {
box-shadow: none;
}
.c27:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c27:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c29 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c29::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:invalid {
box-shadow: none;
}
.c29:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c29:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c25 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c26 input {
padding-right: 1.875rem;
}
.c26 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c28 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c20 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c24 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
/>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Custom Image
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color="green"
height="0.6875rem"
width="0.6875rem"
/>
Running
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgb(216, 216, 216)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgb(216, 216, 216)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c20"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c22"
>
<div
className="c23 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Short ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value=""
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
CN UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Login
</label>
<div
className="c26"
>
<input
className="c29"
disabled={false}
id=""
value="ssh root@undefined"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary state /> without throwing 2`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c22 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c19 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c19:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c19:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c19:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c19:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c19 svg + span {
margin-left: 0.75rem;
}
.c19 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c23 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(216,216,216);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c27 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c27::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:invalid {
box-shadow: none;
}
.c27:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c27:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c29 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c29::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:invalid {
box-shadow: none;
}
.c29:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c29:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c25 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c26 input {
padding-right: 1.875rem;
}
.c26 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c28 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c20 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c24 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
/>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Custom Image
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color="grey"
height="0.6875rem"
width="0.6875rem"
/>
Stopped
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgb(216, 216, 216)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgb(216, 216, 216)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgba(73, 73, 73, 1)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c20"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c22"
>
<div
className="c23 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Short ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value=""
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
CN UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Login
</label>
<div
className="c26"
>
<input
className="c29"
disabled={false}
id=""
value="ssh root@undefined"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders <Summary state /> without throwing 3`] = `
.c0 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c4 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c14 {
box-sizing: border-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 0 1 auto;
-ms-flex: 0 1 auto;
flex: 0 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.5rem;
margin-left: -0.5rem;
}
.c1 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c5 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c15 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c20 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c24 {
box-sizing: border-box;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
padding-right: 0.5rem;
padding-left: 0.5rem;
}
.c7 {
margin-top: 0.5rem;
margin-bottom: 1rem;
}
.c12 {
margin-top: 0.25rem;
}
.c22 {
margin-top: 2rem;
margin-bottom: 4rem;
}
.c18 {
font-family: sans-serif;
font-size: 100%;
line-height: 1.15;
margin: 0;
overflow: visible;
text-transform: none;
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
min-width: 7.5rem;
}
.c18::-moz-focus-inner,
.c18[type='button']::-moz-focus-inner,
.c18[type='reset']::-moz-focus-inner,
.c18[type='submit']::-moz-focus-inner {
border-style: none;
padding: 0;
}
.c18:-moz-focusring,
.c18[type='button']:-moz-focusring,
.c18[type='reset']:-moz-focusring,
.c18[type='submit']:-moz-focusring {
outline: 0.0625rem dotted ButtonText;
}
.c18 + button {
margin-left: 0.375rem;
}
.c17 {
display: inline-block;
}
.c16 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c16:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c16:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c16[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c16:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c16:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c16:active,
.c16:active:hover,
.c16:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c16 svg + span {
margin-left: 0.75rem;
}
.c16 svg {
max-height: 1.125rem;
}
.c19 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
}
.c19:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c19:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c19[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c19:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c19:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c19:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c19:active,
.c19:active:hover,
.c19:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c19 svg + span {
margin-left: 0.75rem;
}
.c19 svg {
max-height: 1.125rem;
}
.c21 {
box-sizing: border-box;
display: inline-block;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 3rem;
height: 3rem;
min-width: 7.5rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.9375rem 1.125rem;
position: relative;
font-size: 0.9375rem;
text-align: center;
font-style: normal;
font-stretch: normal;
line-height: normal;
-webkit-letter-spacing: normal;
-moz-letter-spacing: normal;
-ms-letter-spacing: normal;
letter-spacing: normal;
text-decoration: none;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
color: rgb(255,255,255);
-webkit-text-fill-color: currentcolor;
background-image: none;
background-color: rgb(59,70,204);
border-radius: 0.25rem;
border: solid 0.0625rem rgb(45,56,132);
color: rgb(70,70,70);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
color: rgb(210,67,58);
-webkit-text-fill-color: currentcolor;
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
font-weight: 600;
cursor: not-allowed;
pointer-events: none;
color: rgb(216,216,216);
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 500;
float: right;
}
.c21:focus {
outline: 0;
text-decoration: none;
background-color: rgb(59,70,204);
border-color: rgb(45,56,132);
}
.c21:hover {
background-color: rgb(72,83,217);
border: solid 0.0625rem rgb(45,56,132);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-image: none;
outline: 0;
background-color: rgb(45,56,132);
border-color: rgb(45,56,132);
}
.c21[disabled] {
cursor: not-allowed;
pointer-events: none;
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(216,216,216);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(216,216,216);
}
.c21:focus {
background-color: rgb(255,255,255);
border-color: rgb(210,67,58);
}
.c21:hover {
background-color: rgb(247,247,247);
border-color: rgb(210,67,58);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(230,230,230);
border-color: rgb(210,67,58);
}
.c21:focus {
background-color: rgb(250,250,250);
border-color: rgb(216,216,216);
}
.c21:hover {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21:active,
.c21:active:hover,
.c21:active:focus {
background-color: rgb(250,250,250);
border-color: rgb(250,250,250);
}
.c21 svg + span {
margin-left: 0.75rem;
}
.c21 svg {
max-height: 1.125rem;
}
.c9 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
}
.c6 {
color: rgba(73,73,73,1);
line-height: 1.875rem;
font-size: 1.5rem;
margin: 0;
}
.c6 + p,
.c6 + small,
.c6 + h1,
.c6 + h2,
.c6 + label,
.c6 + h3,
.c6 + h4,
.c6 + h5,
.c6 + div,
.c6 + span {
margin-top: 1.5rem;
}
.c23 {
background-color: rgb(216,216,216);
margin: 0;
height: 0.0625rem;
}
.c11 {
width: 0.375rem;
height: 0.375rem;
border-radius: 0.1875rem;
background-color: rgb(59,70,204);
display: inline-block;
margin-top: 0.0625rem;
margin-right: 0.375rem;
height: 0.6875rem;
width: 0.6875rem;
border-radius: 50%;
}
.c2 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
}
.c3 {
box-sizing: content-box;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex: 1 0 auto;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
height: auto;
min-height: 7.8125rem;
position: relative;
border-width: 0.0625rem;
border-style: solid;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
color: rgba(73,73,73,1);
background-color: rgb(255,255,255);
border-color: rgb(216,216,216);
box-sizing: border-box;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-flex: 1 1 auto;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
border-width: 0;
padding: 0.75rem;
margin-bottom: 0;
padding: 1.5rem;
background-color: transparent;
}
.c3 > [name='card']:not(:last-child) {
margin-bottom: 0.8125rem;
}
.c3 > [name='card']:last-child {
margin-bottom: 0.4375rem;
}
.c27 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
text-overflow: ellipsis;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c27::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:invalid {
box-shadow: none;
}
.c27:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c27:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c27:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c29 {
box-sizing: border-box;
width: 100%;
height: 3rem;
min-height: 3rem;
margin-bottom: 0.5rem;
margin-top: 0.5rem;
padding: 0.8125rem 1.125rem;
border-radius: 0.25rem;
background-color: rgb(255,255,255);
border: 0.0625rem solid rgb(216,216,216);
color: rgba(73,73,73,1);
max-width: 100%;
font-size: 0.9375rem;
line-height: normal !important;
font-style: normal;
font-stretch: normal;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: 0;
}
.c29::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:invalid {
box-shadow: none;
}
.c29:disabled {
background-color: rgb(250,250,250);
color: rgb(216,216,216);
}
.c29:disabled::-webkit-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled::-moz-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:disabled:-ms-input-placeholder {
color: rgba(73,73,73,0.5);
}
.c29:focus {
border-color: rgb(59,70,204);
outline: 0;
}
.c25 {
font-size: 0.9375rem;
font-style: normal;
font-stretch: normal;
display: block;
color: rgb(70,70,70);
text-align: left;
margin-right: 0.75rem;
font-weight: bold;
white-space: pre;
font-size: 0.8125rem;
}
.c13 {
opacity: 0.5;
padding-right: 0.1875rem;
}
.c8 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.c26 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
margin-bottom: 0.625rem;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.c26 input {
padding-right: 1.875rem;
}
.c26 div {
position: relative;
left: -1.625rem;
}
.c10 {
width: 0.0625rem;
background: rgb(216,216,216);
height: 1.5rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-self: flex-end;
-ms-flex-item-align: end;
align-self: flex-end;
margin: 0 1.125rem;
}
.c28 {
cursor: pointer;
}
@media only screen and (min-width:0em) {
.c4 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
}
@media only screen and (min-width:0em) {
.c14 {
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
}
@media only screen and (min-width:0em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:48em) {
.c1 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c1 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c5 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c15 {
-webkit-flex-basis: 75%;
-ms-flex-preferred-size: 75%;
flex-basis: 75%;
max-width: 75%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c20 {
-webkit-flex-basis: 25%;
-ms-flex-preferred-size: 25%;
flex-basis: 25%;
max-width: 25%;
display: block;
}
}
@media only screen and (min-width:0em) {
.c24 {
-webkit-flex-basis: 100%;
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
max-width: 100%;
display: block;
}
}
@media only screen and (min-width:64em) {
.c24 {
-webkit-flex-basis: 58.333333333333336%;
-ms-flex-preferred-size: 58.333333333333336%;
flex-basis: 58.333333333333336%;
max-width: 58.333333333333336%;
display: block;
}
}
@media (max-width:47.9375rem) {
.c8 {
display: block;
}
}
@media (max-width:47.9375rem) {
.c10 {
display: none;
}
}
<div
className="c0"
>
<div
className="c1"
>
<div
className="c2"
disabled={false}
name="card"
>
<div
className="c3"
name="card-outlet"
>
<div
className="c4"
>
<div
className="c5"
>
<h2
className="c6"
/>
</div>
</div>
<div
className="c7"
>
<div
className="c8"
>
<label
className="c9"
>
Custom Image
</label>
<div
className="c10"
/>
<label
className="c9"
>
Hardware Virtual Machine
</label>
<div
className="c10"
/>
<div
className="c8"
>
<span
className="c11"
color="primary"
height="0.6875rem"
width="0.6875rem"
/>
Provisioning
</div>
</div>
<div
className="c12"
>
<div
className="c8"
>
<div
className="c8"
>
<label
className="c13 c9"
>
Created:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
<div
className="c10"
/>
<div
className="c8"
>
<label
className="c13 c9"
>
Updated:
</label>
<label
className="c9"
>
almost NaN years
ago
</label>
</div>
</div>
</div>
</div>
<div
className="c14"
>
<div
className="c15"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="15"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 15 15"
width="15"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
2017-12-22 18:01:35 +02:00
transform="translate(18292 -19563)"
>
<g>
2017-12-22 18:01:35 +02:00
<mask
id="L"
>
<path
d="M-1-1h15v15H-1z"
fill="rgba(73, 73, 73, 1)"
transform="rotate(90 -18921 643)"
/>
<use
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#M"
/>
</mask>
<g
mask="url(#L)"
>
<use
fill="rgba(73, 73, 73, 1)"
2017-12-22 18:01:35 +02:00
transform="rotate(90 -18921 643)"
xlinkHref="#N"
/>
</g>
</g>
</g>
<defs>
<path
2017-12-22 18:01:35 +02:00
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
id="M"
/>
<path
2017-12-22 18:01:35 +02:00
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
id="N"
/>
</defs>
</svg>
<span>
Start
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c16 c17 c18"
disabled={false}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="14"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 14 14"
width="14"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(18113 -18582)"
>
<g>
<mask
id="O"
>
<use
fill="white"
transform="translate(-18113 18582)"
xlinkHref="#P"
/>
</mask>
<g
mask="url(#O)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(-18113 18582)"
xlinkHref="#Q"
/>
</g>
</g>
</g>
<defs>
<path
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
id="P"
/>
<path
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
id="Q"
/>
</defs>
</svg>
<span>
Stop
</span>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c19 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgb(216, 216, 216)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c19 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="21"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 20 21"
width="20"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17997 -18577)"
>
<g>
<use
fill="rgb(216, 216, 216)"
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
xlinkHref="#K"
/>
</g>
</g>
<defs>
<path
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
fillRule="evenodd"
id="K"
/>
</defs>
</svg>
<span>
Reboot
</span>
</button>
</span>
</div>
<div
className="c20"
>
<span
name="react-responsive-mock"
query="only screen and (max-width: 47.9375rem)"
>
<button
className="c21 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
</button>
</span>
<span
name="react-responsive-mock"
query="only screen and (min-width: 48rem)"
>
<button
className="c21 c17 c18"
disabled={true}
href=""
icon={true}
onClick={[Function]}
type="button"
>
<svg
className=""
height="12"
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
viewBox="0 0 9 12"
width="9"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(17403 -18583)"
>
<g>
<use
fill="rgb(210, 67, 58)"
transform="translate(-17403 18583)"
xlinkHref="#j"
/>
</g>
</g>
<defs>
<path
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
fillRule="evenodd"
id="j"
/>
</defs>
</svg>
<span>
Remove
</span>
</button>
</span>
</div>
</div>
<div
className="c22"
>
<div
className="c23 c0"
height="0.0625rem"
/>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Short ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value=""
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
ID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
CN UUID
</label>
<div
className="c26"
>
<input
className="c27"
disabled={false}
id=""
value={undefined}
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
<div
className="c0"
>
<div
className="c24"
>
<label
className="c25"
htmlFor=""
>
Login
</label>
<div
className="c26"
>
<input
className="c29"
disabled={false}
id=""
value="ssh root@undefined"
/>
<div
onClick={undefined}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
tag={false}
>
<svg
className="c28 "
height="16"
onClick={[Function]}
style={
Object {
"transform": "rotate(0deg)",
}
}
version="1.1"
width="13"
xmlnsXlink="http://www.w3.org/1999/xlink"
>
<g
transform="translate(-2367 443)"
>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2370 -437)"
xlinkHref="#e"
/>
<use
fill="rgba(73, 73, 73, 1)"
transform="translate(2367 -443)"
xlinkHref="#f"
/>
</g>
<defs>
<path
d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z"
id="e"
/>
<path
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
id="f"
/>
</defs>
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;