feat(instances): adds cli-details UI
This commit is contained in:
johnytiago
Sérgio Ramos
parent
a1ff036db1
commit
078513f603
@ -21,11 +21,9 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
|||||||
.c6 {
|
.c6 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c6:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
@ -57,10 +55,10 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5.active:after {
|
.c5:after {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 0.0625rem;
|
height: 0.0625rem;
|
||||||
background: rgb(73,73,73);
|
background: rgb(216,216,216);
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -68,6 +66,14 @@ exports[`renders <Menu links /> without throwing 1`] = `
|
|||||||
z-index: 2;
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.c5.active:after {
|
||||||
|
background: rgb(73,73,73);
|
||||||
|
}
|
||||||
|
|
||||||
|
.c5.active {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.c3 {
|
.c3 {
|
||||||
background: rgb(250,250,250);
|
background: rgb(250,250,250);
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
|
|||||||
@ -54,11 +54,9 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c11 {
|
||||||
@ -798,11 +796,9 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c11 {
|
||||||
@ -1542,11 +1538,9 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c12 {
|
||||||
@ -2286,11 +2280,9 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c12 {
|
||||||
@ -3030,11 +3022,9 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c11 {
|
||||||
@ -3774,11 +3764,9 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
|||||||
.c21 {
|
.c21 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c21:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c11 {
|
||||||
@ -4512,11 +4500,9 @@ exports[`renders <Item /> without throwing 1`] = `
|
|||||||
.c11 {
|
.c11 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c11:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c12 {
|
||||||
@ -5039,11 +5025,9 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
|||||||
.c11 {
|
.c11 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c11:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c12 {
|
||||||
@ -5568,11 +5552,9 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
|
|||||||
.c11 {
|
.c11 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c11:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c12 {
|
||||||
@ -6095,11 +6077,9 @@ exports[`renders <Item mutating /> without throwing 1`] = `
|
|||||||
.c11 {
|
.c11 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c11:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c13 {
|
.c13 {
|
||||||
|
|||||||
@ -691,8 +691,8 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
.c23 {
|
.c23 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
@ -706,6 +706,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -1760,8 +1761,8 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
.c23 {
|
.c23 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
@ -1775,6 +1776,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@ -497,7 +497,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -2401,7 +2401,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -3289,7 +3289,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -4177,7 +4177,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -5065,7 +5065,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -5953,7 +5953,7 @@ Array [
|
|||||||
.c6 {
|
.c6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -231,15 +231,13 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
.c36 {
|
.c36 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c36:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -885,7 +883,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -952,6 +950,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -1031,6 +1030,7 @@ exports[`renders <Summary /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -2087,15 +2087,13 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
|||||||
.c35 {
|
.c35 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c35:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -2580,7 +2578,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -2647,6 +2645,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -4020,15 +4019,13 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
|||||||
.c35 {
|
.c35 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c35:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -4513,7 +4510,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -4580,6 +4577,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -5949,15 +5947,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c39 {
|
.c39 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c39:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c32 {
|
.c32 {
|
||||||
fill: rgb(59,70,204);
|
fill: rgb(59,70,204);
|
||||||
stroke: rgb(59,70,204);
|
stroke: rgb(59,70,204);
|
||||||
@ -6648,7 +6644,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -6715,6 +6711,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -6794,6 +6791,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -7874,15 +7872,13 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
.c35 {
|
.c35 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c35:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -8367,7 +8363,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -8434,6 +8430,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -8513,6 +8510,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -9569,15 +9567,13 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
.c35 {
|
.c35 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c35:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -10062,7 +10058,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -10129,6 +10125,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -10208,6 +10205,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -11264,15 +11262,13 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
.c36 {
|
.c36 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c36:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c29 {
|
.c29 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -11919,7 +11915,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
.c9 {
|
.c9 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -11986,6 +11982,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -12065,6 +12062,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@ -24,7 +24,7 @@ export default ({
|
|||||||
onReboot,
|
onReboot,
|
||||||
onRemove
|
onRemove
|
||||||
}) => (
|
}) => (
|
||||||
<StickyFooter fill="#FAFAFA" fixed bottom>
|
<StickyFooter fill="disabled" fixed bottom>
|
||||||
<Row between="xs" middle="xs">
|
<Row between="xs" middle="xs">
|
||||||
<Col xs="7">
|
<Col xs="7">
|
||||||
<Flex>
|
<Flex>
|
||||||
|
|||||||
@ -18,6 +18,7 @@ export const Forms = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Values = {
|
export const Values = {
|
||||||
|
IC_SHOW_CLI: 'INSTANCE_CREATION_SHOW_CLI',
|
||||||
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
|
IC_AFF_V_ADD_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_ADD_OPEN',
|
||||||
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
|
IC_AFF_V_EDIT_OPEN: 'INSTANCE_CREATION_AFFINITY_VALUE_EDIT_OPEN',
|
||||||
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',
|
IC_AFF_V_AFF: 'INSTANCE_CREATION_AFFINITY_VALUE_AFFINITY',
|
||||||
|
|||||||
@ -1,15 +1,14 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component, Fragment } from 'react';
|
||||||
import { Margin, Padding } from 'styled-components-spacing';
|
import { Margin, Padding } from 'styled-components-spacing';
|
||||||
import { graphql, compose } from 'react-apollo';
|
import { graphql, compose } from 'react-apollo';
|
||||||
import ReduxForm from 'declarative-redux-form';
|
import ReduxForm from 'declarative-redux-form';
|
||||||
import { connect } from 'react-redux';
|
import { connect } from 'react-redux';
|
||||||
import { SubmissionError, destroy } from 'redux-form';
|
import { SubmissionError, destroy } from 'redux-form';
|
||||||
import { set, destroyAll } from 'react-redux-values';
|
import { set, destroyAll } from 'react-redux-values';
|
||||||
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import intercept from 'apr-intercept';
|
import intercept from 'apr-intercept';
|
||||||
import get from 'lodash.get';
|
import get from 'lodash.get';
|
||||||
|
import styled from 'styled-components';
|
||||||
import { H3, ViewContainer, Button } from 'joyent-ui-toolkit';
|
|
||||||
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Name,
|
Name,
|
||||||
@ -22,14 +21,20 @@ import {
|
|||||||
Firewall,
|
Firewall,
|
||||||
CNS,
|
CNS,
|
||||||
Affinity,
|
Affinity,
|
||||||
generatePayload
|
generatePayload,
|
||||||
|
Footer
|
||||||
} from 'joyent-ui-instance-steps';
|
} from 'joyent-ui-instance-steps';
|
||||||
|
|
||||||
import { Forms } from '@root/constants';
|
import { Provider as ResourceSteps } from 'joyent-ui-resource-step';
|
||||||
|
import { Anchor, H3, ViewContainer, Button } from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
import { Forms, Values } from '@root/constants';
|
||||||
import parseError from '@state/parse-error';
|
import parseError from '@state/parse-error';
|
||||||
import CreateInstanceMutation from '@graphql/create-instance.gql';
|
import CreateInstanceMutation from '@graphql/create-instance.gql';
|
||||||
|
|
||||||
const { IC_F } = Forms;
|
const { IC_F } = Forms;
|
||||||
|
const { IC_SHOW_CLI } = Values;
|
||||||
|
|
||||||
const names = {
|
const names = {
|
||||||
name: 'IC_NAME',
|
name: 'IC_NAME',
|
||||||
image: 'IC_IMAGE',
|
image: 'IC_IMAGE',
|
||||||
@ -86,7 +91,16 @@ class CreateInstance extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { match, steps, handleDefocus, handleSubmit, disabled } = this.props;
|
const {
|
||||||
|
match,
|
||||||
|
steps,
|
||||||
|
showCli = false,
|
||||||
|
handleDefocus,
|
||||||
|
handleToggleShowCli,
|
||||||
|
handleSubmit,
|
||||||
|
disabled
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
const { params } = match;
|
const { params } = match;
|
||||||
const { step } = params;
|
const { step } = params;
|
||||||
|
|
||||||
@ -102,6 +116,16 @@ class CreateInstance extends Component {
|
|||||||
affinity
|
affinity
|
||||||
} = steps;
|
} = steps;
|
||||||
|
|
||||||
|
const Mask = styled.div`
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
position: absolute;
|
||||||
|
display: ${showCli ? 'block' : 'none'};
|
||||||
|
`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewContainer main>
|
<ViewContainer main>
|
||||||
<Margin top="5">
|
<Margin top="5">
|
||||||
@ -218,6 +242,8 @@ class CreateInstance extends Component {
|
|||||||
</Margin>
|
</Margin>
|
||||||
</ResourceSteps>
|
</ResourceSteps>
|
||||||
<Margin bottom="5">
|
<Margin bottom="5">
|
||||||
|
<Flex alignCenter>
|
||||||
|
<FlexItem>
|
||||||
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
<ReduxForm form={IC_F} onSubmit={handleSubmit}>
|
||||||
{({ handleSubmit, submitting }) => (
|
{({ handleSubmit, submitting }) => (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
@ -230,8 +256,29 @@ class CreateInstance extends Component {
|
|||||||
</form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</ReduxForm>
|
</ReduxForm>
|
||||||
|
</FlexItem>
|
||||||
|
<FlexItem>
|
||||||
|
<Margin left={3}>
|
||||||
|
<Anchor
|
||||||
|
disabled={disabled || !this.isFormValid()}
|
||||||
|
onClick={() => handleToggleShowCli(!showCli)}
|
||||||
|
>
|
||||||
|
View CLI Details
|
||||||
|
</Anchor>
|
||||||
|
</Margin>
|
||||||
|
</FlexItem>
|
||||||
|
</Flex>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Padding>
|
</Padding>
|
||||||
|
{showCli ? (
|
||||||
|
<Fragment>
|
||||||
|
<Footer
|
||||||
|
getData={() => generatePayload(steps)}
|
||||||
|
onCloseCli={() => handleToggleShowCli(!showCli)}
|
||||||
|
/>
|
||||||
|
<Mask onClick={() => handleToggleShowCli(!showCli)} />
|
||||||
|
</Fragment>
|
||||||
|
) : null}
|
||||||
</ViewContainer>
|
</ViewContainer>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -254,6 +301,7 @@ export default compose(
|
|||||||
};
|
};
|
||||||
|
|
||||||
const error = get(form, `${IC_F}.error`, null);
|
const error = get(form, `${IC_F}.error`, null);
|
||||||
|
const showCli = Boolean(values[IC_SHOW_CLI]);
|
||||||
|
|
||||||
// Maybe re-use saved to only write the rule once
|
// Maybe re-use saved to only write the rule once
|
||||||
const disabled = !(
|
const disabled = !(
|
||||||
@ -270,6 +318,7 @@ export default compose(
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
disabled,
|
disabled,
|
||||||
|
showCli,
|
||||||
forms: Object.keys(form), // improve this
|
forms: Object.keys(form), // improve this
|
||||||
error,
|
error,
|
||||||
steps
|
steps
|
||||||
@ -277,10 +326,12 @@ export default compose(
|
|||||||
}),
|
}),
|
||||||
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
|
connect(null, (dispatch, { steps = {}, forms, history, createInstance }) => {
|
||||||
return {
|
return {
|
||||||
|
handleToggleShowCli: value => {
|
||||||
|
return dispatch(set({ name: IC_SHOW_CLI, value }));
|
||||||
|
},
|
||||||
handleDefocus: name => value => {
|
handleDefocus: name => value => {
|
||||||
return dispatch(set({ name: names[name], value }));
|
return dispatch(set({ name: names[name], value }));
|
||||||
},
|
},
|
||||||
|
|
||||||
handleSubmit: async () => {
|
handleSubmit: async () => {
|
||||||
const [err, res] = await intercept(
|
const [err, res] = await intercept(
|
||||||
createInstance({
|
createInstance({
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -172,7 +172,7 @@ exports[`renders <List /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -1153,7 +1153,7 @@ exports[`renders <List error /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -2090,11 +2090,9 @@ exports[`renders <List instances /> without throwing 1`] = `
|
|||||||
.c33 {
|
.c33 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c33:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c13 {
|
.c13 {
|
||||||
@ -2230,7 +2228,7 @@ exports[`renders <List instances /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -3669,11 +3667,9 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||||||
.c33 {
|
.c33 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c33:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c58 {
|
.c58 {
|
||||||
@ -4384,7 +4380,7 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -4425,12 +4421,10 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||||||
-webkit-box-align: stretch;
|
-webkit-box-align: stretch;
|
||||||
-ms-flex-align: stretch;
|
-ms-flex-align: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
background-color: rgb(250,250,250);
|
||||||
border-top: 0.0625rem solid rgb(216,216,216);
|
border-top: 0.0625rem solid rgb(216,216,216);
|
||||||
max-height: 3.3125rem;
|
|
||||||
min-height: 3.3125rem;
|
|
||||||
line-height: 1.5625rem;
|
line-height: 1.5625rem;
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
max-height: 4.375rem;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -5843,10 +5837,11 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
className="c51"
|
className="c51"
|
||||||
fill="#FAFAFA"
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c52 c53 c1"
|
className="c52 c53 c1"
|
||||||
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c54"
|
className="c54"
|
||||||
@ -6294,11 +6289,9 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||||||
.c33 {
|
.c33 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c33:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c58 {
|
.c58 {
|
||||||
@ -7009,7 +7002,7 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -7050,12 +7043,10 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||||||
-webkit-box-align: stretch;
|
-webkit-box-align: stretch;
|
||||||
-ms-flex-align: stretch;
|
-ms-flex-align: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
background-color: rgb(250,250,250);
|
||||||
border-top: 0.0625rem solid rgb(216,216,216);
|
border-top: 0.0625rem solid rgb(216,216,216);
|
||||||
max-height: 3.3125rem;
|
|
||||||
min-height: 3.3125rem;
|
|
||||||
line-height: 1.5625rem;
|
line-height: 1.5625rem;
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
max-height: 4.375rem;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -8468,10 +8459,11 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
className="c51"
|
className="c51"
|
||||||
fill="#FAFAFA"
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c52 c53 c1"
|
className="c52 c53 c1"
|
||||||
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c54"
|
className="c54"
|
||||||
@ -8919,11 +8911,9 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||||||
.c33 {
|
.c33 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c33:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c58 {
|
.c58 {
|
||||||
@ -9829,7 +9819,7 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -9870,12 +9860,10 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||||||
-webkit-box-align: stretch;
|
-webkit-box-align: stretch;
|
||||||
-ms-flex-align: stretch;
|
-ms-flex-align: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
|
background-color: rgb(250,250,250);
|
||||||
border-top: 0.0625rem solid rgb(216,216,216);
|
border-top: 0.0625rem solid rgb(216,216,216);
|
||||||
max-height: 3.3125rem;
|
|
||||||
min-height: 3.3125rem;
|
|
||||||
line-height: 1.5625rem;
|
line-height: 1.5625rem;
|
||||||
height: 4.375rem;
|
height: 4.375rem;
|
||||||
max-height: 4.375rem;
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -11288,10 +11276,11 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||||||
</form>
|
</form>
|
||||||
<div
|
<div
|
||||||
className="c51"
|
className="c51"
|
||||||
fill="#FAFAFA"
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c52 c53 c1"
|
className="c52 c53 c1"
|
||||||
|
fill="disabled"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c54"
|
className="c54"
|
||||||
@ -11831,7 +11820,7 @@ exports[`renders <List loading /> without throwing 1`] = `
|
|||||||
.c3 {
|
.c3 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -169,7 +169,7 @@ exports[`renders <Metadata /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -977,7 +977,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -1309,8 +1309,8 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
.c39 {
|
.c39 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
@ -1324,6 +1324,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -1986,7 +1987,7 @@ exports[`renders <Metadata error /> without throwing 1`] = `
|
|||||||
.c25 {
|
.c25 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -3578,7 +3579,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -3904,8 +3905,8 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
.c39 {
|
.c39 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
@ -3919,6 +3920,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@ -65,7 +65,7 @@ exports[`renders <Networks /> without throwing 1`] = `
|
|||||||
.c7 {
|
.c7 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -608,7 +608,7 @@ exports[`renders <Networks error /> without throwing 1`] = `
|
|||||||
.c7 {
|
.c7 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -888,7 +888,7 @@ exports[`renders <Networks loading /> without throwing 1`] = `
|
|||||||
.c7 {
|
.c7 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -1121,7 +1121,7 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||||||
.c7 {
|
.c7 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -985,15 +985,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c37 {
|
.c37 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c37:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c31 {
|
.c31 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -1597,7 +1595,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c11 {
|
.c11 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -1701,6 +1699,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -2973,15 +2972,13 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c37 {
|
.c37 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c37:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c31 {
|
.c31 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
@ -3585,7 +3582,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
.c11 {
|
.c11 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -3689,6 +3686,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@ -169,7 +169,7 @@ exports[`renders <Tags /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -998,7 +998,7 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
|||||||
.c47 {
|
.c47 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -1995,7 +1995,7 @@ exports[`renders <Tags editable /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -2846,7 +2846,7 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
|||||||
.c49 {
|
.c49 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -4354,7 +4354,7 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
|||||||
.c52 {
|
.c52 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -5407,7 +5407,7 @@ exports[`renders <Tags error /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -6368,7 +6368,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
|
|||||||
.c19 {
|
.c19 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -26,6 +26,7 @@
|
|||||||
"apr-reduce": "^3.0.3",
|
"apr-reduce": "^3.0.3",
|
||||||
"constant-case": "^2.0.0",
|
"constant-case": "^2.0.0",
|
||||||
"declarative-redux-form": "^2.0.8",
|
"declarative-redux-form": "^2.0.8",
|
||||||
|
"force-array": "^3.1.0",
|
||||||
"joyent-ui-resource-step": "^1.0.0",
|
"joyent-ui-resource-step": "^1.0.0",
|
||||||
"joyent-ui-resource-widgets": "^1.0.0",
|
"joyent-ui-resource-widgets": "^1.0.0",
|
||||||
"joyent-ui-toolkit": "^6.0.0",
|
"joyent-ui-toolkit": "^6.0.0",
|
||||||
|
|||||||
131
packages/instance-steps/src/footer/cli-details.js
Normal file
131
packages/instance-steps/src/footer/cli-details.js
Normal file
@ -0,0 +1,131 @@
|
|||||||
|
const ForceArray = require('force-array');
|
||||||
|
|
||||||
|
export const generateTerraform = data => {
|
||||||
|
const {
|
||||||
|
name,
|
||||||
|
package: pkg,
|
||||||
|
image,
|
||||||
|
affinity,
|
||||||
|
metadata: _metadata,
|
||||||
|
tags: _tags,
|
||||||
|
firewall_enabled,
|
||||||
|
networks
|
||||||
|
} = formatData(data);
|
||||||
|
|
||||||
|
const cns = ForceArray(
|
||||||
|
(_tags.filter(({ name }) => name === 'triton.cns.services').pop() || {})
|
||||||
|
.value
|
||||||
|
);
|
||||||
|
const userScript = (
|
||||||
|
_metadata.filter(({ name }) => name === 'user-script').pop() || {}
|
||||||
|
).value;
|
||||||
|
|
||||||
|
const tags = _tags.filter(({ name }) => !/^triton./.test(name));
|
||||||
|
const metadata = _metadata.filter(({ name }) => name !== 'user-script');
|
||||||
|
|
||||||
|
return (
|
||||||
|
`resource "triton_machine" ${name} {
|
||||||
|
name = "${name}"
|
||||||
|
package = "${pkg}"
|
||||||
|
image = "${image}"
|
||||||
|
networks = ["${networks.join('","')}"]
|
||||||
|
firewall_enabled = ${Boolean(firewall_enabled)}` +
|
||||||
|
`${
|
||||||
|
affinity
|
||||||
|
? `
|
||||||
|
affinity = ["${affinity}"]`
|
||||||
|
: ''
|
||||||
|
}` +
|
||||||
|
`${
|
||||||
|
userScript && userScript.length
|
||||||
|
? `\n
|
||||||
|
user_script = "${userScript}"`
|
||||||
|
: ''
|
||||||
|
}` +
|
||||||
|
`${
|
||||||
|
cns.length
|
||||||
|
? `\n
|
||||||
|
cns {
|
||||||
|
services = ["${cns.join('", "')}"]
|
||||||
|
}`
|
||||||
|
: ''
|
||||||
|
}` +
|
||||||
|
`${
|
||||||
|
tags.length
|
||||||
|
? `\n
|
||||||
|
tags {
|
||||||
|
${tags.map(e => `${e.name} = "${e.value}"`).join('\n ')}
|
||||||
|
}`
|
||||||
|
: ''
|
||||||
|
}` +
|
||||||
|
`${
|
||||||
|
metadata.length
|
||||||
|
? `\n
|
||||||
|
metadata {
|
||||||
|
${metadata.map(e => `${e.name} = "${e.value}"`).join('\n ')}
|
||||||
|
}`
|
||||||
|
: ''
|
||||||
|
}` +
|
||||||
|
`\n}`
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const generateCLI = data => {
|
||||||
|
const {
|
||||||
|
metadata,
|
||||||
|
tags,
|
||||||
|
firewall_enabled,
|
||||||
|
networks,
|
||||||
|
name,
|
||||||
|
package: pkg,
|
||||||
|
image
|
||||||
|
} = data;
|
||||||
|
|
||||||
|
const { affinity } = formatData(data);
|
||||||
|
|
||||||
|
const _networks = `--network="${networks.join('","')}"`;
|
||||||
|
const _affinity = affinity ? `--affinity="${affinity}"` : '';
|
||||||
|
|
||||||
|
const _tags = tags.length
|
||||||
|
? `--tag=${JSON.stringify(
|
||||||
|
tags.reduce((acc, t) => Object.assign(acc, { [t.name]: t.value }))
|
||||||
|
)}`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const _metadata = metadata.length
|
||||||
|
? `--metadata=${JSON.stringify(
|
||||||
|
metadata.reduce(
|
||||||
|
(acc, m) => Object.assign(acc, { [m.name]: m.value }),
|
||||||
|
{}
|
||||||
|
)
|
||||||
|
)}`
|
||||||
|
: '';
|
||||||
|
|
||||||
|
const _firewall = firewall_enabled ? `--firewall` : '';
|
||||||
|
return `triton instance create -w --name=${name} ${_networks} ${_affinity} ${_tags} ${_metadata} ${_firewall} ${image} ${pkg}`;
|
||||||
|
};
|
||||||
|
|
||||||
|
const formatData = ({ affinity, metadata = [], tags = [], ...rest }) => ({
|
||||||
|
affinity:
|
||||||
|
affinity &&
|
||||||
|
affinity.length &&
|
||||||
|
`${affinity[0].key}${getAffinityOp(affinity[0].type)}${affinity[0].value}`,
|
||||||
|
tags: tags.filter(
|
||||||
|
e => e.name !== 'triton.cns.services' || e.name !== 'triton.cns.disable'
|
||||||
|
),
|
||||||
|
metadata: metadata.filter(e => e.name !== 'user-script'),
|
||||||
|
...rest
|
||||||
|
});
|
||||||
|
|
||||||
|
const getAffinityOp = type => {
|
||||||
|
switch (type.toUpperCase()) {
|
||||||
|
case 'MUST_EQUAL':
|
||||||
|
return '==';
|
||||||
|
case 'MUST_NOT_EQUAL':
|
||||||
|
return '!=';
|
||||||
|
case 'SHOULD_EQUAL':
|
||||||
|
return '==~';
|
||||||
|
case 'SHOULD_NOT_EQUAL':
|
||||||
|
return '!=~';
|
||||||
|
}
|
||||||
|
};
|
||||||
141
packages/instance-steps/src/footer/index.js
Normal file
141
packages/instance-steps/src/footer/index.js
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||||
|
import { Margin, Padding } from 'styled-components-spacing';
|
||||||
|
import Flex from 'styled-flex-component';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
|
import {
|
||||||
|
Anchor,
|
||||||
|
CloseIcon as Close,
|
||||||
|
H3,
|
||||||
|
Textarea,
|
||||||
|
Input,
|
||||||
|
P,
|
||||||
|
SectionList,
|
||||||
|
SectionListAnchor,
|
||||||
|
SectionListItem,
|
||||||
|
StickyFooter,
|
||||||
|
ViewContainer
|
||||||
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
|
import { generateTerraform, generateCLI } from './cli-details';
|
||||||
|
|
||||||
|
export default class CLIFooter extends React.Component {
|
||||||
|
state = {
|
||||||
|
active: 'triton'
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { active } = this.state;
|
||||||
|
const { getData, onCloseCli } = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<StickyFooter borderless auto fixed bottom fill="#494949">
|
||||||
|
<div>
|
||||||
|
<Padding vertical="8">
|
||||||
|
<CloseIcon onClick={onCloseCli} />
|
||||||
|
<Row>
|
||||||
|
<Col xs="12" sm="8">
|
||||||
|
<Margin bottom="2">
|
||||||
|
<Flex>
|
||||||
|
<H3 white>CLI details</H3>
|
||||||
|
</Flex>
|
||||||
|
</Margin>
|
||||||
|
<Margin bottom="5">
|
||||||
|
<P white>
|
||||||
|
Below you can find the command line instructions to deploy
|
||||||
|
this exact instance, or a copy of it, directly from either
|
||||||
|
the Triton CLI or Terraform.
|
||||||
|
</P>
|
||||||
|
</Margin>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Row>
|
||||||
|
<Col sm="12">
|
||||||
|
<ViewContainer plain>
|
||||||
|
<Margin bottom="3">
|
||||||
|
<SectionList clear>
|
||||||
|
<SectionListItem>
|
||||||
|
<SectionListAnchor
|
||||||
|
white
|
||||||
|
active={active === 'triton'}
|
||||||
|
onClick={() => this.setState({ active: 'triton' })}
|
||||||
|
>
|
||||||
|
Triton CLI
|
||||||
|
</SectionListAnchor>
|
||||||
|
</SectionListItem>
|
||||||
|
<SectionListItem>
|
||||||
|
<SectionListAnchor
|
||||||
|
white
|
||||||
|
active={active === 'terraform'}
|
||||||
|
onClick={() => this.setState({ active: 'terraform' })}
|
||||||
|
>
|
||||||
|
Terraform
|
||||||
|
</SectionListAnchor>
|
||||||
|
</SectionListItem>
|
||||||
|
</SectionList>
|
||||||
|
</Margin>
|
||||||
|
</ViewContainer>
|
||||||
|
<Margin bottom="3">
|
||||||
|
{active === 'triton' ? (
|
||||||
|
<Input
|
||||||
|
readOnly
|
||||||
|
borderless
|
||||||
|
monospace
|
||||||
|
fluid
|
||||||
|
white
|
||||||
|
dark
|
||||||
|
resize
|
||||||
|
rows="15"
|
||||||
|
value={generateCLI(getData())}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Textarea
|
||||||
|
readOnly
|
||||||
|
borderless
|
||||||
|
monospace
|
||||||
|
fluid
|
||||||
|
white
|
||||||
|
dark
|
||||||
|
resize
|
||||||
|
value={generateTerraform(getData())}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</Margin>
|
||||||
|
<Margin>
|
||||||
|
<Anchor white>{`Learn how to configure ${
|
||||||
|
active === 'triton' ? 'Triton CLI' : 'Terraform'
|
||||||
|
}`}</Anchor>
|
||||||
|
</Margin>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Padding>
|
||||||
|
</div>
|
||||||
|
</StickyFooter>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const Frame = styled.div`
|
||||||
|
border-radius: 50%;
|
||||||
|
border: ${remcalc(1)} solid ${props => props.theme.white};
|
||||||
|
height: ${remcalc(30)};
|
||||||
|
width: ${remcalc(30)};
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
float: right;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CloseIcon = props => (
|
||||||
|
<Frame {...props}>
|
||||||
|
<Margin all="1">
|
||||||
|
<Close fill="white" />
|
||||||
|
</Margin>
|
||||||
|
</Frame>
|
||||||
|
);
|
||||||
@ -66,7 +66,7 @@ export const generatePayload = steps => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
if (cns.serviceNames.length) {
|
if (cns.serviceNames.length) {
|
||||||
metadata.push({
|
tags.push({
|
||||||
name: 'triton.cns.services',
|
name: 'triton.cns.services',
|
||||||
value: cns.serviceNames.join(',')
|
value: cns.serviceNames.join(',')
|
||||||
});
|
});
|
||||||
@ -94,3 +94,4 @@ export { default as UserScript } from './user-script';
|
|||||||
export { default as Firewall, Preview as FirewallPreview } from './firewall';
|
export { default as Firewall, Preview as FirewallPreview } from './firewall';
|
||||||
export { default as CNS, Preview as CnsPreview } from './cns';
|
export { default as CNS, Preview as CnsPreview } from './cns';
|
||||||
export { default as Affinity } from './affinity';
|
export { default as Affinity } from './affinity';
|
||||||
|
export { default as Footer } from './footer';
|
||||||
|
|||||||
@ -45,10 +45,6 @@ const RandomizeIcon = styled(BaseRandomizeIcon)`
|
|||||||
width: ${remcalc(16)};
|
width: ${remcalc(16)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Form = styled.form`
|
|
||||||
margin-bottom: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const NameContainer = ({
|
const NameContainer = ({
|
||||||
history,
|
history,
|
||||||
randomizable = false,
|
randomizable = false,
|
||||||
@ -86,7 +82,7 @@ const NameContainer = ({
|
|||||||
keepDirtyOnReinitialize
|
keepDirtyOnReinitialize
|
||||||
>
|
>
|
||||||
{({ invalid }) => (
|
{({ invalid }) => (
|
||||||
<Form onSubmit={() => history.push(next)}>
|
<form onSubmit={() => history.push(next)}>
|
||||||
<FormGroup id="input-name" name="name" fluid field={Field}>
|
<FormGroup id="input-name" name="name" fluid field={Field}>
|
||||||
<FormLabel>Instance name</FormLabel>
|
<FormLabel>Instance name</FormLabel>
|
||||||
<Margin top="0.5">
|
<Margin top="0.5">
|
||||||
@ -159,7 +155,7 @@ const NameContainer = ({
|
|||||||
Next
|
Next
|
||||||
</Button>
|
</Button>
|
||||||
</Margin>
|
</Margin>
|
||||||
</Form>
|
</form>
|
||||||
)}
|
)}
|
||||||
</ReduxForm>
|
</ReduxForm>
|
||||||
</Margin>
|
</Margin>
|
||||||
|
|||||||
@ -9,8 +9,7 @@ import get from 'lodash.get';
|
|||||||
import forceArray from 'force-array';
|
import forceArray from 'force-array';
|
||||||
import includes from 'lodash.includes';
|
import includes from 'lodash.includes';
|
||||||
import find from 'lodash.find';
|
import find from 'lodash.find';
|
||||||
import styled, { withTheme } from 'styled-components';
|
import { withTheme } from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
|
||||||
|
|
||||||
import Step, {
|
import Step, {
|
||||||
Header as StepHeader,
|
Header as StepHeader,
|
||||||
|
|||||||
@ -223,4 +223,4 @@ export default compose(
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
}))
|
}))
|
||||||
)(withTheme(({ ...rest }) => <Metadata {...rest} />));
|
)(withTheme(({ ...rest }) => <TagsContainer {...rest} />));
|
||||||
|
|||||||
@ -58,13 +58,13 @@ export const Saved = ({ inverted, children }) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export const Error = ({ inverted = false, noLabel = false, children }) => {
|
export const Error = ({ inverted = false, noLabel = false, children }) => {
|
||||||
const fill = inverted ? 'red' : 'white';
|
const statusFill = inverted ? 'red' : 'white';
|
||||||
const iconFill = inverted ? 'white' : 'redDark';
|
const iconFill = inverted ? 'white' : 'redDark';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StatusIcon
|
<StatusIcon
|
||||||
border="redDark"
|
border={'redDark'}
|
||||||
fill={fill}
|
fill={statusFill}
|
||||||
Icon={() => <CloseIcon fill={iconFill} />}
|
Icon={() => <CloseIcon fill={iconFill} />}
|
||||||
>
|
>
|
||||||
{noLabel ? null : (
|
{noLabel ? null : (
|
||||||
|
|||||||
@ -5,15 +5,15 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
margin-bottom: 1.125rem;
|
margin-bottom: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c7 {
|
||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c10 {
|
.c9 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c1 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -40,7 +40,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c3 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -60,7 +60,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
align-content: stretch;
|
align-content: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
-webkit-order: 0;
|
-webkit-order: 0;
|
||||||
-ms-flex-order: 0;
|
-ms-flex-order: 0;
|
||||||
order: 0;
|
order: 0;
|
||||||
@ -77,7 +77,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14 {
|
.c13 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -89,30 +89,30 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
appearance: button;
|
appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14::-moz-focus-inner,
|
.c13::-moz-focus-inner,
|
||||||
.c14[type='button']::-moz-focus-inner,
|
.c13[type='button']::-moz-focus-inner,
|
||||||
.c14[type='reset']::-moz-focus-inner,
|
.c13[type='reset']::-moz-focus-inner,
|
||||||
.c14[type='submit']::-moz-focus-inner {
|
.c13[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14:-moz-focusring,
|
.c13:-moz-focusring,
|
||||||
.c14[type='button']:-moz-focusring,
|
.c13[type='button']:-moz-focusring,
|
||||||
.c14[type='reset']:-moz-focusring,
|
.c13[type='reset']:-moz-focusring,
|
||||||
.c14[type='submit']:-moz-focusring {
|
.c13[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c13 {
|
.c12 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c11 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c10 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -151,7 +151,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
border: solid 0.0625rem rgb(45,56,132);
|
border: solid 0.0625rem rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:focus {
|
.c10:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
-webkit-text-decoration: none;
|
-webkit-text-decoration: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -159,26 +159,26 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:hover {
|
.c10:hover {
|
||||||
background-color: rgb(72,83,217);
|
background-color: rgb(72,83,217);
|
||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:active,
|
.c10:active,
|
||||||
.c11:active:hover,
|
.c10:active:hover,
|
||||||
.c11:active:focus {
|
.c10:active:focus {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background-color: rgb(45,56,132);
|
background-color: rgb(45,56,132);
|
||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11[disabled] {
|
.c10[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c6 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -188,7 +188,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
@ -200,7 +200,7 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c8 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
@ -222,89 +222,84 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:focus {
|
.c8:focus {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9::-webkit-input-placeholder {
|
.c8::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9::-moz-placeholder {
|
.c8::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:-ms-input-placeholder {
|
.c8:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:invalid {
|
.c8:invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled {
|
.c8:disabled {
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled::-webkit-input-placeholder {
|
.c8:disabled::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled::-moz-placeholder {
|
.c8:disabled::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled:-ms-input-placeholder {
|
.c8:disabled:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c5 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<form
|
<form
|
||||||
className="c1"
|
|
||||||
onSubmit={undefined}
|
onSubmit={undefined}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c2"
|
className="c1"
|
||||||
wrap={true}
|
wrap={true}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c3"
|
className="c3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c4"
|
className="c4"
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c5"
|
|
||||||
name="name"
|
name="name"
|
||||||
role="group"
|
role="group"
|
||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c6 c7"
|
className="c5 c6"
|
||||||
htmlFor="k"
|
htmlFor="k"
|
||||||
>
|
>
|
||||||
Attach to new CNS service name
|
Attach to new CNS service name
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c7"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c9"
|
className="c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="k"
|
id="k"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -315,13 +310,13 @@ exports[`renders <AddServiceForm /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="c3"
|
className="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c9"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="c11 c12 c13 c14"
|
className="c10 c11 c12 c13"
|
||||||
data-ui-button="true"
|
data-ui-button="true"
|
||||||
disabled={undefined}
|
disabled={undefined}
|
||||||
href=""
|
href=""
|
||||||
@ -341,15 +336,15 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
margin-bottom: 1.125rem;
|
margin-bottom: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c7 {
|
||||||
margin-top: 0.1875rem;
|
margin-top: 0.1875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c10 {
|
.c9 {
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c1 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -376,7 +371,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
align-items: flex-end;
|
align-items: flex-end;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c3 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
display: -ms-flexbox;
|
display: -ms-flexbox;
|
||||||
@ -396,7 +391,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
align-content: stretch;
|
align-content: stretch;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
-webkit-order: 0;
|
-webkit-order: 0;
|
||||||
-ms-flex-order: 0;
|
-ms-flex-order: 0;
|
||||||
order: 0;
|
order: 0;
|
||||||
@ -413,7 +408,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14 {
|
.c13 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -425,30 +420,30 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
appearance: button;
|
appearance: button;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14::-moz-focus-inner,
|
.c13::-moz-focus-inner,
|
||||||
.c14[type='button']::-moz-focus-inner,
|
.c13[type='button']::-moz-focus-inner,
|
||||||
.c14[type='reset']::-moz-focus-inner,
|
.c13[type='reset']::-moz-focus-inner,
|
||||||
.c14[type='submit']::-moz-focus-inner {
|
.c13[type='submit']::-moz-focus-inner {
|
||||||
border-style: none;
|
border-style: none;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c14:-moz-focusring,
|
.c13:-moz-focusring,
|
||||||
.c14[type='button']:-moz-focusring,
|
.c13[type='button']:-moz-focusring,
|
||||||
.c14[type='reset']:-moz-focusring,
|
.c13[type='reset']:-moz-focusring,
|
||||||
.c14[type='submit']:-moz-focusring {
|
.c13[type='submit']:-moz-focusring {
|
||||||
outline: 0.0625rem dotted ButtonText;
|
outline: 0.0625rem dotted ButtonText;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c13 {
|
.c12 {
|
||||||
min-width: 7.5rem;
|
min-width: 7.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c12 {
|
.c11 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11 {
|
.c10 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
-webkit-box-pack: center;
|
-webkit-box-pack: center;
|
||||||
@ -487,7 +482,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
border: solid 0.0625rem rgb(45,56,132);
|
border: solid 0.0625rem rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:focus {
|
.c10:focus {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
-webkit-text-decoration: none;
|
-webkit-text-decoration: none;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@ -495,26 +490,26 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:hover {
|
.c10:hover {
|
||||||
background-color: rgb(72,83,217);
|
background-color: rgb(72,83,217);
|
||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11:active,
|
.c10:active,
|
||||||
.c11:active:hover,
|
.c10:active:hover,
|
||||||
.c11:active:focus {
|
.c10:active:focus {
|
||||||
background-image: none;
|
background-image: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
background-color: rgb(45,56,132);
|
background-color: rgb(45,56,132);
|
||||||
border-color: rgb(45,56,132);
|
border-color: rgb(45,56,132);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c11[disabled] {
|
.c10[disabled] {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c6 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -524,7 +519,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
@ -536,7 +531,7 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c8 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 3rem;
|
height: 3rem;
|
||||||
@ -558,89 +553,84 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:focus {
|
.c8:focus {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9::-webkit-input-placeholder {
|
.c8::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9::-moz-placeholder {
|
.c8::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:-ms-input-placeholder {
|
.c8:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:invalid {
|
.c8:invalid {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled {
|
.c8:disabled {
|
||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled::-webkit-input-placeholder {
|
.c8:disabled::-webkit-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled::-moz-placeholder {
|
.c8:disabled::-moz-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9:disabled:-ms-input-placeholder {
|
.c8:disabled:-ms-input-placeholder {
|
||||||
color: rgba(73,73,73,0.5);
|
color: rgba(73,73,73,0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c5 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
<div
|
<div
|
||||||
className="c0"
|
className="c0"
|
||||||
>
|
>
|
||||||
<form
|
<form
|
||||||
className="c1"
|
|
||||||
onSubmit={undefined}
|
onSubmit={undefined}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c2"
|
className="c1"
|
||||||
wrap={true}
|
wrap={true}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c3"
|
className="c3"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c4"
|
className="c4"
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="c5"
|
|
||||||
name="name"
|
name="name"
|
||||||
role="group"
|
role="group"
|
||||||
style={undefined}
|
style={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c6 c7"
|
className="c5 c6"
|
||||||
htmlFor="l"
|
htmlFor="l"
|
||||||
>
|
>
|
||||||
Attach to new CNS service name
|
Attach to new CNS service name
|
||||||
</label>
|
</label>
|
||||||
<div
|
<div
|
||||||
className="c8"
|
className="c7"
|
||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
className="c9"
|
className="c8"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="l"
|
id="l"
|
||||||
onBlur={null}
|
onBlur={null}
|
||||||
@ -651,13 +641,13 @@ exports[`renders <AddServiceForm pristine /> without throwing 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="c3"
|
className="c2"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c9"
|
||||||
>
|
>
|
||||||
<button
|
<button
|
||||||
className="c11 c12 c13 c14"
|
className="c10 c11 c12 c13"
|
||||||
data-ui-button="true"
|
data-ui-button="true"
|
||||||
disabled={undefined}
|
disabled={undefined}
|
||||||
href=""
|
href=""
|
||||||
@ -692,7 +682,7 @@ exports[`renders <Header/> without throwing 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -944,6 +934,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
|
|||||||
background-color: rgb(250,250,250);
|
background-color: rgb(250,250,250);
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
@ -1116,7 +1107,7 @@ exports[`renders <HostnamesHeader /> without throwing 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -5,7 +5,7 @@ Array [
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -30,7 +30,7 @@ Array [
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -351,7 +351,7 @@ Array [
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -376,7 +376,7 @@ Array [
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
@ -499,12 +499,12 @@ Array [
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
||||||
.c10 {
|
.c9 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c4 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -512,39 +512,39 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='checkbox'],
|
.c4[type='checkbox'],
|
||||||
.c5[type='radio'] {
|
.c4[type='radio'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='number']::-webkit-inner-spin-button,
|
.c4[type='number']::-webkit-inner-spin-button,
|
||||||
.c5[type='number']::-webkit-outer-spin-button {
|
.c4[type='number']::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search'] {
|
.c4[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
outline-offset: -0.125rem;
|
outline-offset: -0.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search']::-webkit-search-cancel-button,
|
.c4[type='search']::-webkit-search-cancel-button,
|
||||||
.c5[type='search']::-webkit-search-decoration {
|
.c4[type='search']::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5::-webkit-file-upload-button {
|
.c4::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
-moz-appearance: button;
|
-moz-appearance: button;
|
||||||
appearance: button;
|
appearance: button;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c8 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -554,33 +554,33 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c3 {
|
||||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label::after {
|
.c3:checked + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label::after {
|
.c3:selected + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label {
|
.c3:checked + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label {
|
.c3:selected + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:disabled + label {
|
.c3:disabled + label {
|
||||||
background-color: rgb(249,249,249);
|
background-color: rgb(249,249,249);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c5 {
|
||||||
color: rgb(100,100,100);
|
color: rgb(100,100,100);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -597,7 +597,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
height: 1.125rem;
|
height: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6::after {
|
.c5::after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -614,7 +614,7 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -623,12 +623,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 label {
|
.c6 label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c1 {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -652,25 +652,25 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label {
|
.c1 label {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label::after {
|
.c1 label::after {
|
||||||
width: 0.475rem;
|
width: 0.475rem;
|
||||||
height: 0.205rem;
|
height: 0.205rem;
|
||||||
top: 0.4125rem;
|
top: 0.4125rem;
|
||||||
left: 0.35rem;
|
left: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 div[type='checkbox'],
|
.c1 div[type='checkbox'],
|
||||||
.c2 div[type='checkbox'] input,
|
.c1 div[type='checkbox'] input,
|
||||||
.c2 div[type='checkbox'] label {
|
.c1 div[type='checkbox'] label {
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c0 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
@ -682,23 +682,18 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c7 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c0 {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
<form
|
<form
|
||||||
className="c0"
|
|
||||||
onChange={undefined}
|
onChange={undefined}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c0"
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
name="enabled"
|
name="enabled"
|
||||||
role="group"
|
role="group"
|
||||||
@ -706,11 +701,11 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
className="c2"
|
className="c1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c3"
|
className="c2"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
@ -718,30 +713,30 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c4 c5"
|
className="c3 c4"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="l"
|
id="l"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="c6"
|
className="c5"
|
||||||
htmlFor="l"
|
htmlFor="l"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c7"
|
className="c6"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c8 c9"
|
className="c7 c8"
|
||||||
htmlFor="l"
|
htmlFor="l"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c9"
|
||||||
>
|
>
|
||||||
Enable Firewall
|
Enable Firewall
|
||||||
</div>
|
</div>
|
||||||
@ -753,12 +748,12 @@ exports[`renders <ToggleFirewallForm /> without throwing 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
||||||
.c10 {
|
.c9 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c4 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -766,39 +761,39 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='checkbox'],
|
.c4[type='checkbox'],
|
||||||
.c5[type='radio'] {
|
.c4[type='radio'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='number']::-webkit-inner-spin-button,
|
.c4[type='number']::-webkit-inner-spin-button,
|
||||||
.c5[type='number']::-webkit-outer-spin-button {
|
.c4[type='number']::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search'] {
|
.c4[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
outline-offset: -0.125rem;
|
outline-offset: -0.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search']::-webkit-search-cancel-button,
|
.c4[type='search']::-webkit-search-cancel-button,
|
||||||
.c5[type='search']::-webkit-search-decoration {
|
.c4[type='search']::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5::-webkit-file-upload-button {
|
.c4::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
-moz-appearance: button;
|
-moz-appearance: button;
|
||||||
appearance: button;
|
appearance: button;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c8 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -808,33 +803,33 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c3 {
|
||||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label::after {
|
.c3:checked + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label::after {
|
.c3:selected + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label {
|
.c3:checked + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label {
|
.c3:selected + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:disabled + label {
|
.c3:disabled + label {
|
||||||
background-color: rgb(249,249,249);
|
background-color: rgb(249,249,249);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c5 {
|
||||||
color: rgb(100,100,100);
|
color: rgb(100,100,100);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -851,7 +846,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
height: 1.125rem;
|
height: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6::after {
|
.c5::after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -868,7 +863,7 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -877,12 +872,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 label {
|
.c6 label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c1 {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -906,25 +901,25 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label {
|
.c1 label {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label::after {
|
.c1 label::after {
|
||||||
width: 0.475rem;
|
width: 0.475rem;
|
||||||
height: 0.205rem;
|
height: 0.205rem;
|
||||||
top: 0.4125rem;
|
top: 0.4125rem;
|
||||||
left: 0.35rem;
|
left: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 div[type='checkbox'],
|
.c1 div[type='checkbox'],
|
||||||
.c2 div[type='checkbox'] input,
|
.c1 div[type='checkbox'] input,
|
||||||
.c2 div[type='checkbox'] label {
|
.c1 div[type='checkbox'] label {
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c0 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
@ -936,23 +931,18 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c7 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c0 {
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
<form
|
<form
|
||||||
className="c0"
|
|
||||||
onChange={undefined}
|
onChange={undefined}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c0"
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
name="enabled"
|
name="enabled"
|
||||||
role="group"
|
role="group"
|
||||||
@ -960,11 +950,11 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
className="c2"
|
className="c1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c3"
|
className="c2"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
@ -972,30 +962,30 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c4 c5"
|
className="c3 c4"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
id="n"
|
id="n"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="c6"
|
className="c5"
|
||||||
htmlFor="n"
|
htmlFor="n"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c7"
|
className="c6"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c8 c9"
|
className="c7 c8"
|
||||||
htmlFor="n"
|
htmlFor="n"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c9"
|
||||||
>
|
>
|
||||||
Enable Firewall
|
Enable Firewall
|
||||||
</div>
|
</div>
|
||||||
@ -1007,12 +997,12 @@ exports[`renders <ToggleFirewallForm submitting /> without throwing 1`] = `
|
|||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
||||||
.c10 {
|
.c9 {
|
||||||
margin-right: 0.75rem;
|
margin-right: 0.75rem;
|
||||||
margin-left: 0.75rem;
|
margin-left: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5 {
|
.c4 {
|
||||||
font-family: sans-serif;
|
font-family: sans-serif;
|
||||||
font-size: 100%;
|
font-size: 100%;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -1020,39 +1010,39 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
overflow: visible;
|
overflow: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='checkbox'],
|
.c4[type='checkbox'],
|
||||||
.c5[type='radio'] {
|
.c4[type='radio'] {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='number']::-webkit-inner-spin-button,
|
.c4[type='number']::-webkit-inner-spin-button,
|
||||||
.c5[type='number']::-webkit-outer-spin-button {
|
.c4[type='number']::-webkit-outer-spin-button {
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search'] {
|
.c4[type='search'] {
|
||||||
-webkit-appearance: textfield;
|
-webkit-appearance: textfield;
|
||||||
-moz-appearance: textfield;
|
-moz-appearance: textfield;
|
||||||
appearance: textfield;
|
appearance: textfield;
|
||||||
outline-offset: -0.125rem;
|
outline-offset: -0.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5[type='search']::-webkit-search-cancel-button,
|
.c4[type='search']::-webkit-search-cancel-button,
|
||||||
.c5[type='search']::-webkit-search-decoration {
|
.c4[type='search']::-webkit-search-decoration {
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c5::-webkit-file-upload-button {
|
.c4::-webkit-file-upload-button {
|
||||||
-webkit-appearance: button;
|
-webkit-appearance: button;
|
||||||
-moz-appearance: button;
|
-moz-appearance: button;
|
||||||
appearance: button;
|
appearance: button;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c9 {
|
.c8 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -1062,33 +1052,33 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4 {
|
.c3 {
|
||||||
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label::after {
|
.c3:checked + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label::after {
|
.c3:selected + label::after {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:checked + label {
|
.c3:checked + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:selected + label {
|
.c3:selected + label {
|
||||||
border-color: rgb(59,70,204);
|
border-color: rgb(59,70,204);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c4:disabled + label {
|
.c3:disabled + label {
|
||||||
background-color: rgb(249,249,249);
|
background-color: rgb(249,249,249);
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6 {
|
.c5 {
|
||||||
color: rgb(100,100,100);
|
color: rgb(100,100,100);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -1105,7 +1095,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
height: 1.125rem;
|
height: 1.125rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c6::after {
|
.c5::after {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -1122,7 +1112,7 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
transform: rotate(-45deg);
|
transform: rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.c3 {
|
.c2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
vertical-align: text-bottom;
|
vertical-align: text-bottom;
|
||||||
width: 1.125rem;
|
width: 1.125rem;
|
||||||
@ -1131,12 +1121,12 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 label {
|
.c6 label {
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 {
|
.c1 {
|
||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
display: -webkit-flex;
|
display: -webkit-flex;
|
||||||
@ -1160,25 +1150,25 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label {
|
.c1 label {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 label::after {
|
.c1 label::after {
|
||||||
width: 0.475rem;
|
width: 0.475rem;
|
||||||
height: 0.205rem;
|
height: 0.205rem;
|
||||||
top: 0.4125rem;
|
top: 0.4125rem;
|
||||||
left: 0.35rem;
|
left: 0.35rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2 div[type='checkbox'],
|
.c1 div[type='checkbox'],
|
||||||
.c2 div[type='checkbox'] input,
|
.c1 div[type='checkbox'] input,
|
||||||
.c2 div[type='checkbox'] label {
|
.c1 div[type='checkbox'] label {
|
||||||
height: 1.5rem;
|
height: 1.5rem;
|
||||||
width: 1.5rem;
|
width: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c0 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
border: none;
|
border: none;
|
||||||
@ -1190,22 +1180,16 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
-webkit-padding-after: 0;
|
-webkit-padding-after: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c7 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
font-size: 0.8125rem;
|
font-size: 0.8125rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c0 {
|
<form>
|
||||||
margin-bottom: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
<form
|
|
||||||
className="c0"
|
|
||||||
>
|
|
||||||
<div
|
<div
|
||||||
className="c1"
|
className="c0"
|
||||||
id="fw-toggle-inactive"
|
id="fw-toggle-inactive"
|
||||||
name="inactive"
|
name="inactive"
|
||||||
role="group"
|
role="group"
|
||||||
@ -1213,11 +1197,11 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
type="checkbox"
|
type="checkbox"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
className="c2"
|
className="c1"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c3"
|
className="c2"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="fw-toggle-inactive"
|
id="fw-toggle-inactive"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
@ -1225,30 +1209,30 @@ exports[`renders <ToggleInactiveForm /> without throwing 1`] = `
|
|||||||
>
|
>
|
||||||
<input
|
<input
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c4 c5"
|
className="c3 c4"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="p"
|
id="p"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
className="c6"
|
className="c5"
|
||||||
htmlFor="p"
|
htmlFor="p"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
checked={false}
|
checked={false}
|
||||||
className="c7"
|
className="c6"
|
||||||
disabled={false}
|
disabled={false}
|
||||||
id="fw-toggle-inactive"
|
id="fw-toggle-inactive"
|
||||||
onBlur={undefined}
|
onBlur={undefined}
|
||||||
>
|
>
|
||||||
<label
|
<label
|
||||||
className="c8 c9"
|
className="c7 c8"
|
||||||
htmlFor="p"
|
htmlFor="p"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="c10"
|
className="c9"
|
||||||
>
|
>
|
||||||
Show inactive rules
|
Show inactive rules
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4362,6 +4362,7 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
max-width: 22.1875rem;
|
max-width: 22.1875rem;
|
||||||
width: 22.1875rem;
|
width: 22.1875rem;
|
||||||
|
|||||||
@ -50,10 +50,6 @@ const ShortDivider = styled(Divider)`
|
|||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Form = styled.form`
|
|
||||||
margin-bottom: 0;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const Header = () => (
|
export const Header = () => (
|
||||||
<Margin bottom="5">
|
<Margin bottom="5">
|
||||||
<H3>CNS Default Hostnames</H3>
|
<H3>CNS Default Hostnames</H3>
|
||||||
@ -104,7 +100,7 @@ export const AddServiceForm = ({
|
|||||||
invalid
|
invalid
|
||||||
}) => (
|
}) => (
|
||||||
<Margin bottom="3">
|
<Margin bottom="3">
|
||||||
<Form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
|
<Flex wrap alignCenter={invalid} alignEnd={!invalid}>
|
||||||
<FlexItem>
|
<FlexItem>
|
||||||
<Flex collumn>
|
<Flex collumn>
|
||||||
@ -135,7 +131,7 @@ export const AddServiceForm = ({
|
|||||||
</Margin>
|
</Margin>
|
||||||
</FlexItem>
|
</FlexItem>
|
||||||
</Flex>
|
</Flex>
|
||||||
</Form>
|
</form>
|
||||||
</Margin>
|
</Margin>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@ -3,13 +3,11 @@ import { Field } from 'redux-form';
|
|||||||
import { Margin, Padding } from 'styled-components-spacing';
|
import { Margin, Padding } from 'styled-components-spacing';
|
||||||
import Flex, { FlexItem } from 'styled-flex-component';
|
import Flex, { FlexItem } from 'styled-flex-component';
|
||||||
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
|
||||||
import styled from 'styled-components';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
H3,
|
H3,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormLabel,
|
FormLabel,
|
||||||
Toggle,
|
|
||||||
TagList,
|
TagList,
|
||||||
TagItem,
|
TagItem,
|
||||||
P,
|
P,
|
||||||
@ -21,10 +19,6 @@ import {
|
|||||||
|
|
||||||
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
|
const { SmallOnly, MediumDown, Medium, Large } = QueryBreakpoints;
|
||||||
|
|
||||||
const Form = styled.form`
|
|
||||||
margin-bottom: 0 !important;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const capitalizeFirstLetter = string =>
|
const capitalizeFirstLetter = string =>
|
||||||
string.charAt(0).toUpperCase() + string.slice(1);
|
string.charAt(0).toUpperCase() + string.slice(1);
|
||||||
|
|
||||||
@ -250,7 +244,7 @@ export const ToggleFirewallForm = ({
|
|||||||
: undefined;
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form onChange={onChange}>
|
<form onChange={onChange}>
|
||||||
<FormGroup
|
<FormGroup
|
||||||
id="fw-toggle-firewall"
|
id="fw-toggle-firewall"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -265,12 +259,12 @@ export const ToggleFirewallForm = ({
|
|||||||
</FormLabel>
|
</FormLabel>
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</form>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ToggleInactiveForm = () => (
|
export const ToggleInactiveForm = () => (
|
||||||
<Form>
|
<form>
|
||||||
<FormGroup
|
<FormGroup
|
||||||
id="fw-toggle-inactive"
|
id="fw-toggle-inactive"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
@ -285,5 +279,5 @@ export const ToggleInactiveForm = () => (
|
|||||||
</FormLabel>
|
</FormLabel>
|
||||||
</Checkbox>
|
</Checkbox>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</form>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -2931,8 +2931,8 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
|||||||
.c23 {
|
.c23 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
@ -2946,6 +2946,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
|||||||
-moz-appearance: none;
|
-moz-appearance: none;
|
||||||
appearance: none;
|
appearance: none;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: "Roboto Mono",monospace;
|
font-family: "Roboto Mono",monospace;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
|
|||||||
@ -14,11 +14,9 @@ exports[`Anchor Default Anchor 1`] = `
|
|||||||
.c0 {
|
.c0 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c0:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
<a
|
<a
|
||||||
@ -43,21 +41,14 @@ exports[`Anchor Disabled Anchor 1`] = `
|
|||||||
.c0 {
|
.c0 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c0:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c0:hover {
|
|
||||||
-webkit-text-decoration: underline;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
className="c0 c1 c2"
|
className="c0 c1 c2"
|
||||||
disabled={true}
|
disabled={true}
|
||||||
@ -81,15 +72,13 @@ exports[`Anchor Reversed Anchor 1`] = `
|
|||||||
.c0 {
|
.c0 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c0:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
<a
|
<a
|
||||||
className="c0 c1 c2"
|
className="c0 c1 c2"
|
||||||
href="https://joyent.com"
|
href="https://joyent.com"
|
||||||
|
|||||||
@ -13,12 +13,10 @@ const BaseLink = styled(({ component, children, ...rest }) =>
|
|||||||
)`
|
)`
|
||||||
color: ${props => props.theme.primary};
|
color: ${props => props.theme.primary};
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
text-decoration: underline;
|
||||||
|
|
||||||
&:hover {
|
${isOr('secondary', 'reversed', 'white')`
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
${isOr('secondary', 'reversed')`
|
|
||||||
color: ${props => props.theme.white};
|
color: ${props => props.theme.white};
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
`};
|
`};
|
||||||
@ -32,10 +30,6 @@ const BaseLink = styled(({ component, children, ...rest }) =>
|
|||||||
color: ${props => props.theme.grey};
|
color: ${props => props.theme.grey};
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
|||||||
@ -44,6 +44,10 @@ export default ({ theme }) => css`
|
|||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.CodeMirror {
|
.CodeMirror {
|
||||||
border: solid ${remcalc(1)} ${theme.grey};
|
border: solid ${remcalc(1)} ${theme.grey};
|
||||||
margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
|
margin: ${remcalc(8)} 0 ${remcalc(8)} 0;
|
||||||
|
|||||||
@ -14,11 +14,9 @@ exports[`Button Default Button 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c2:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
@ -114,21 +112,14 @@ exports[`Button Disabled Button 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c2:hover {
|
|
||||||
-webkit-text-decoration: underline;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -245,11 +236,9 @@ exports[`Button Error Button 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
.c2:hover {
|
text-decoration: underline;
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
@ -368,21 +357,14 @@ exports[`Button Loading Button 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(216,216,216);
|
color: rgb(216,216,216);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c2:hover {
|
|
||||||
-webkit-text-decoration: underline;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
@ -499,15 +481,13 @@ exports[`Button Secondary Button 1`] = `
|
|||||||
.c2 {
|
.c2 {
|
||||||
color: rgb(59,70,204);
|
color: rgb(59,70,204);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-text-decoration: underline;
|
||||||
|
text-decoration: underline;
|
||||||
color: rgb(255,255,255);
|
color: rgb(255,255,255);
|
||||||
-webkit-text-fill-color: currentcolor;
|
-webkit-text-fill-color: currentcolor;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c2:hover {
|
|
||||||
-webkit-text-decoration: none;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c1 {
|
.c1 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,5 @@
|
|||||||
export { default } from './card';
|
export { default } from './card';
|
||||||
export { default as Outlet } from './outlet';
|
export { default as Outlet } from './outlet';
|
||||||
|
|
||||||
export {
|
export {
|
||||||
default as Header,
|
default as Header,
|
||||||
Meta as HeaderMeta,
|
Meta as HeaderMeta,
|
||||||
|
|||||||
@ -10,7 +10,10 @@ const Container = styled(ViewContainer)`
|
|||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
align-content: stretch;
|
align-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background: ${props => props.theme.background};
|
background: ${props =>
|
||||||
|
props.fill
|
||||||
|
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
|
||||||
|
: props.theme.background};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Footer = styled.div`
|
const Footer = styled.div`
|
||||||
@ -20,15 +23,22 @@ const Footer = styled.div`
|
|||||||
align-content: stretch;
|
align-content: stretch;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
background-color: ${props =>
|
background-color: ${props =>
|
||||||
props.fill ? props.theme[props.fill] : 'rgba(241, 241, 241, 1)'};
|
props.fill
|
||||||
|
? props.theme[props.fill] ? props.theme[props.fill] : props.fill
|
||||||
|
: 'rgba(241, 241, 241, 1)'};
|
||||||
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
|
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||||
max-height: ${remcalc(53)};
|
|
||||||
min-height: ${remcalc(53)};
|
|
||||||
line-height: ${remcalc(25)};
|
line-height: ${remcalc(25)};
|
||||||
height: ${remcalc(70)};
|
height: ${remcalc(70)};
|
||||||
max-height: ${remcalc(70)};
|
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
|
|
||||||
|
${is('auto')`
|
||||||
|
height: auto;
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('borderless')`
|
||||||
|
border: none;
|
||||||
|
`};
|
||||||
|
|
||||||
${is('fixed')`
|
${is('fixed')`
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -38,10 +48,16 @@ const Footer = styled.div`
|
|||||||
${is('bottom', 'fixed')`
|
${is('bottom', 'fixed')`
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('top', 'fixed')`
|
||||||
|
top: 0;
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default ({ children, fluid, ...rest }) => (
|
export default ({ children, fluid, innerFill, ...rest }) => (
|
||||||
<Footer {...rest}>
|
<Footer {...rest}>
|
||||||
<Container fluid={fluid}>{children}</Container>
|
<Container fill={innerFill || rest.fill} fluid={fluid}>
|
||||||
|
{children}
|
||||||
|
</Container>
|
||||||
</Footer>
|
</Footer>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -726,8 +726,8 @@ exports[`Form Textarea 1`] = `
|
|||||||
.c1 {
|
.c1 {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 18.75rem;
|
width: 18.75rem;
|
||||||
height: 6rem;
|
height: 12rem;
|
||||||
min-height: 6rem;
|
min-height: 12rem;
|
||||||
padding: 0.8125rem 0.75rem;
|
padding: 0.8125rem 0.75rem;
|
||||||
border-radius: 0.25rem;
|
border-radius: 0.25rem;
|
||||||
background-color: rgb(255,255,255);
|
background-color: rgb(255,255,255);
|
||||||
|
|||||||
@ -17,7 +17,7 @@ const color = props =>
|
|||||||
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
|
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
|
||||||
|
|
||||||
const height = props =>
|
const height = props =>
|
||||||
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
|
props.multiple ? 'auto' : props.textarea ? remcalc(192) : remcalc(48);
|
||||||
|
|
||||||
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
|
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
|
||||||
|
|
||||||
@ -106,6 +106,7 @@ const style = css`
|
|||||||
`};
|
`};
|
||||||
|
|
||||||
${is('monospace')`
|
${is('monospace')`
|
||||||
|
white-space: pre-wrap;
|
||||||
font-family: ${props => props.theme.monoFont.families};
|
font-family: ${props => props.theme.monoFont.families};
|
||||||
|
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@ -164,6 +165,10 @@ const style = css`
|
|||||||
width: ${remcalc(120)};
|
width: ${remcalc(120)};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('borderless')`
|
||||||
|
border: none;
|
||||||
|
`};
|
||||||
|
|
||||||
${is('success')`
|
${is('success')`
|
||||||
border-color: ${props => props.theme.greenDark}
|
border-color: ${props => props.theme.greenDark}
|
||||||
`};
|
`};
|
||||||
@ -199,6 +204,14 @@ const style = css`
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
|
${is('white')`
|
||||||
|
color: ${props => props.theme.white};
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('dark')`
|
||||||
|
background: ${props => props.theme.greyDarker};
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
|
const BaseInput = Component => ({ resize, onBlur, type, ...props }) => {
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
import is from 'styled-is';
|
||||||
|
|
||||||
const UnorderedList = styled.ul`
|
const UnorderedList = styled.ul`
|
||||||
background: ${props => props.theme.disabled};
|
background: ${props => props.theme.disabled};
|
||||||
@ -24,6 +25,10 @@ const UnorderedList = styled.ul`
|
|||||||
left: 0;
|
left: 0;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
${is('clear')`
|
||||||
|
background: none !important;
|
||||||
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@ -1,20 +1,9 @@
|
|||||||
import styled, { css } from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import is from 'styled-is';
|
import is, { isNot } from 'styled-is';
|
||||||
|
|
||||||
import BaseAnchor from '../anchor';
|
import BaseAnchor from '../anchor';
|
||||||
|
|
||||||
const border = css`
|
|
||||||
width: 100%;
|
|
||||||
height: ${remcalc(1)};
|
|
||||||
background: ${props => props.theme.text};
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 2;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default styled.li`
|
export default styled.li`
|
||||||
font-size: ${remcalc(15)};
|
font-size: ${remcalc(15)};
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
@ -23,25 +12,53 @@ export default styled.li`
|
|||||||
|
|
||||||
export const Anchor = styled(BaseAnchor)`
|
export const Anchor = styled(BaseAnchor)`
|
||||||
color: ${props => props.theme.text};
|
color: ${props => props.theme.text};
|
||||||
|
font-weight: ${props => props.theme.font.weight.text};
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0 ${remcalc(12)};
|
padding: 0 ${remcalc(12)};
|
||||||
padding-bottom: ${remcalc(15)};
|
padding-bottom: ${remcalc(15)};
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
&.active {
|
|
||||||
font-weight: ${props => props.theme.font.weight.text};
|
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
${border};
|
width: 100%;
|
||||||
|
height: ${remcalc(1)};
|
||||||
|
background: ${props => props.theme.grey};
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 2;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
&:after {
|
||||||
|
background: ${props => props.theme.font.regular};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
font-weight: ${props => props.theme.font.weight.semibold};
|
||||||
}
|
}
|
||||||
|
|
||||||
${is('active')`
|
${is('active')`
|
||||||
font-weight: ${props => props.theme.font.weight.text};
|
font-weight: ${props => props.theme.font.weight.semibold}
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('white')`
|
||||||
|
color: ${props => props.theme.white};
|
||||||
|
|
||||||
|
${isNot('active')`
|
||||||
|
color: ${props => props.theme.greyDark};
|
||||||
|
`};
|
||||||
|
|
||||||
&:after {
|
&:after {
|
||||||
${border}
|
background: ${props => props.theme.greyDarker};
|
||||||
|
};
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('white', 'active')`
|
||||||
|
&:after {
|
||||||
|
background: ${props => props.theme.white};
|
||||||
}
|
}
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|||||||
@ -14,7 +14,7 @@ exports[`Button H1 1`] = `
|
|||||||
line-height: 2.8125rem;
|
line-height: 2.8125rem;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -29,7 +29,7 @@ exports[`Button H2 1`] = `
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.875rem;
|
line-height: 1.875rem;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -45,7 +45,7 @@ exports[`Button H3 1`] = `
|
|||||||
.c0 {
|
.c0 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: rgb(73,73,73);
|
color: rgb(73,73,73);
|
||||||
font-weight: normal;
|
font-weight: 400;
|
||||||
line-height: 1.625rem;
|
line-height: 1.625rem;
|
||||||
font-size: 1.3125rem;
|
font-size: 1.3125rem;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,7 +12,7 @@ export const H1 = styled(NH1)`
|
|||||||
line-height: ${remcalc(45)};
|
line-height: ${remcalc(45)};
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
font-stretch: normal;
|
font-stretch: normal;
|
||||||
font-weight: normal;
|
font-weight: ${props => props.theme.font.weight.normal};
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
${is('inline')`
|
${is('inline')`
|
||||||
@ -36,7 +36,7 @@ export const H1 = styled(NH1)`
|
|||||||
export const H2 = styled.h2`
|
export const H2 = styled.h2`
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: ${props => props.theme.text};
|
color: ${props => props.theme.text};
|
||||||
font-weight: normal;
|
font-weight: ${props => props.theme.font.weight.normal};
|
||||||
line-height: ${remcalc(30)};
|
line-height: ${remcalc(30)};
|
||||||
font-size: ${remcalc(24)};
|
font-size: ${remcalc(24)};
|
||||||
|
|
||||||
@ -61,7 +61,7 @@ export const H2 = styled.h2`
|
|||||||
export const H3 = styled.h3`
|
export const H3 = styled.h3`
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: ${props => props.theme.text};
|
color: ${props => props.theme.text};
|
||||||
font-weight: normal;
|
font-weight: ${props => props.theme.font.weight.normal};
|
||||||
line-height: ${remcalc(26)};
|
line-height: ${remcalc(26)};
|
||||||
font-size: ${remcalc(21)};
|
font-size: ${remcalc(21)};
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user