Merge branch 'master' of https://github.com/yldio/joyent-portal into 1406
This commit is contained in:
Fábio Moreira
commit
c1ed981909
|
|
@ -141,12 +141,38 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -539,8 +565,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -835,12 +859,38 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1233,8 +1283,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -1529,12 +1577,38 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1938,8 +2012,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -2223,12 +2295,38 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2632,8 +2730,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
|
|
@ -2917,12 +3013,38 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -3315,8 +3437,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -3611,12 +3731,38 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -4009,8 +4155,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -4355,12 +4499,38 @@ exports[`renders <Item /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -4857,12 +5027,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -5361,12 +5557,38 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -5852,12 +6074,38 @@ exports[`renders <Item mutating /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -572,9 +572,9 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -1629,9 +1629,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
|
|||
|
|
@ -122,12 +122,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -408,8 +434,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -937,12 +961,38 @@ exports[`renders <Item /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c3 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c3 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c3 div[type='checkbox'],
|
||||
.c3 div[type='checkbox'] input,
|
||||
.c3 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1306,12 +1356,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c3 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c3 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c3 div[type='checkbox'],
|
||||
.c3 div[type='checkbox'] input,
|
||||
.c3 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c2 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1876,12 +1952,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2162,8 +2264,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -2665,12 +2765,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2951,8 +3077,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -3454,12 +3578,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -3751,8 +3901,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -4243,12 +4391,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -4540,8 +4714,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(0deg)",
|
||||
|
|
@ -5032,12 +5204,38 @@ Array [
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c5 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c5 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c5 div[type='checkbox'],
|
||||
.c5 div[type='checkbox'] input,
|
||||
.c5 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c4 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -5318,8 +5516,6 @@ Array [
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -315,12 +315,38 @@ exports[`renders <List /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c18 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c18 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c18 div[type='checkbox'],
|
||||
.c18 div[type='checkbox'] input,
|
||||
.c18 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -817,8 +843,6 @@ exports[`renders <List /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -1267,12 +1291,38 @@ exports[`renders <List error /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c25 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c25 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c25 div[type='checkbox'],
|
||||
.c25 div[type='checkbox'] input,
|
||||
.c25 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1794,8 +1844,6 @@ exports[`renders <List error /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -2230,12 +2278,38 @@ exports[`renders <List instances /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c18 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c18 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c18 div[type='checkbox'],
|
||||
.c18 div[type='checkbox'] input,
|
||||
.c18 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2941,8 +3015,6 @@ exports[`renders <List instances /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -4371,12 +4443,38 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c18 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c18 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c18 div[type='checkbox'],
|
||||
.c18 div[type='checkbox'] input,
|
||||
.c18 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -5125,8 +5223,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -6871,12 +6967,38 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c18 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c18 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c18 div[type='checkbox'],
|
||||
.c18 div[type='checkbox'] input,
|
||||
.c18 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -7625,8 +7747,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
@ -9568,12 +9688,38 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c18 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c18 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c18 div[type='checkbox'],
|
||||
.c18 div[type='checkbox'] input,
|
||||
.c18 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c6 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -10322,8 +10468,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
|||
</span>
|
||||
<svg
|
||||
height="6"
|
||||
marginBottom="0.125rem"
|
||||
marginLeft="0.5625rem"
|
||||
style={
|
||||
Object {
|
||||
"transform": "rotate(180deg)",
|
||||
|
|
|
|||
|
|
@ -1129,9 +1129,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
|
|
@ -3647,9 +3647,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
|
|
|
|||
|
|
@ -1202,9 +1202,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
|
|
@ -1214,9 +1214,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1191,9 +1191,9 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c24 {
|
||||
|
|
@ -2921,9 +2921,9 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
|
|
@ -4326,9 +4326,9 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c25 {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -239,9 +239,9 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
|
|
@ -387,12 +387,38 @@ exports[`renders <Network /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -1123,9 +1149,9 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
|
|
@ -1271,12 +1297,38 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2020,9 +2072,9 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
|
|
@ -2168,12 +2220,38 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -2954,9 +3032,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c28 {
|
||||
|
|
@ -2966,9 +3044,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -3115,12 +3193,38 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -4104,9 +4208,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
|
|
@ -4252,12 +4356,38 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
@ -5374,9 +5504,9 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
|
|
@ -5522,12 +5652,38 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c9 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c9 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c9 div[type='checkbox'],
|
||||
.c9 div[type='checkbox'] input,
|
||||
.c9 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
|
|
|||
|
|
@ -60,9 +60,9 @@ exports[`Card Card With Header 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -13,9 +13,9 @@ const BaseHeader = styled(BaseCard)`
|
|||
z-index: 1;
|
||||
line-height: ${remcalc(24)};
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
|
||||
${is('radius')`
|
||||
border-radius: ${remcalc(4)};
|
||||
|
|
|
|||
|
|
@ -126,12 +126,38 @@ exports[`Form Checkbox 1`] = `
|
|||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
display: -webkit-box;
|
||||
display: -webkit-flex;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-align-items: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
-webkit-align-content: center;
|
||||
-ms-flex-line-pack: center;
|
||||
align-content: center;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.c0 label {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.c0 label::after {
|
||||
width: 0.475rem;
|
||||
height: 0.205rem;
|
||||
top: 0.4125rem;
|
||||
left: 0.35rem;
|
||||
}
|
||||
|
||||
.c0 div[type='checkbox'],
|
||||
.c0 div[type='checkbox'] input,
|
||||
.c0 div[type='checkbox'] label {
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
}
|
||||
|
||||
.c7 {
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.125rem;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import styled from 'styled-components';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import BaseInput from './base/input';
|
||||
import BaseToggle from './base/toggle';
|
||||
|
|
@ -12,7 +13,7 @@ const Li = styled.li`
|
|||
display: flex;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
height: 24px;
|
||||
height: ${remcalc(24)};
|
||||
|
||||
label {
|
||||
font-weight: 400;
|
||||
|
|
@ -28,8 +29,8 @@ const Li = styled.li`
|
|||
div[type='checkbox'],
|
||||
div[type='checkbox'] input,
|
||||
div[type='checkbox'] label {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
height: ${remcalc(24)};
|
||||
width: ${remcalc(24)};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
### Baseline & Spacing
|
||||
|
||||
Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
|
||||
|
||||
```jsx noeditor
|
||||
const baseline = require('./baseline.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={baseline} />
|
||||
```
|
||||
|
|
@ -33,3 +33,17 @@ const small = require('./small.svg');
|
|||
marginBottom: 40
|
||||
}} src={small} />
|
||||
```
|
||||
|
||||
### Baseline & Spacing
|
||||
|
||||
Most of the horizontal spacing between different elements and components is derived from 6 px. For example, the most common horizontal distance between elements of a component or components is 18 px. Another, less frequent, measurement is 12 px. The choice between 6, 12 or 18 px is based on visual and functional proximity of objects.
|
||||
|
||||
```jsx noeditor
|
||||
const baseline = require('./baseline.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={baseline} />
|
||||
```
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 112 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 60 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 313 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 298 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 55 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 412 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 150 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 294 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 83 KiB |
|
|
@ -0,0 +1,121 @@
|
|||
### Spacing
|
||||
|
||||
In order to mainitain visual consistency and to make building as painless as possible, Triton employs a series of pre-defined spacing values and a variety of ways to implement those values.
|
||||
|
||||
### Spacing values
|
||||
|
||||
When defining the space necessary between and within components, alway use one of these pre-defined values. By using only 5 preset values, we can minimize inconsistency and ensure meaningful use of whitespace.
|
||||
|
||||
```jsx noeditor
|
||||
const spacing = require('./spacing.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={spacing} />
|
||||
```
|
||||
|
||||
### Stack - Vertical spacing
|
||||
|
||||
Stack, or the vertical spacing between elements, uses all of the values provided above and is the most common form of spacing used in Triton. Stack is used to seperate components from one another, but is not used for internal padding of cards.
|
||||
|
||||
```jsx noeditor
|
||||
const stack = require('./stack.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={stack} />
|
||||
```
|
||||
|
||||
<h4>Stack example</h4>
|
||||
|
||||
```jsx noeditor
|
||||
const stackExample = require('./stack-example.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={stackExample} />
|
||||
```
|
||||
|
||||
### Inline - Horizontal spacing
|
||||
|
||||
Inline, or the horizontal spacing between elements, is used to provide additional horizontal spacing when an element is not attached directly to the grid. Inline uses all the spacing values, except for the ‘Giant’ size, as when inline get’s to that size, designers should aim to attach components to the underlying grid instead of using spacing values.
|
||||
|
||||
```jsx noeditor
|
||||
const inline = require('./inline.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={inline} />
|
||||
```
|
||||
|
||||
<h4>Inline example</h4>
|
||||
|
||||
```jsx noeditor
|
||||
const inlineExample = require('./inline-example.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={inlineExample} />
|
||||
```
|
||||
|
||||
### Uniform Inset — Interior padding
|
||||
|
||||
Uniform Inset, or the equal padding on the interior of a component, takes the place of stack and inline when attempting to correctly space the contents of a card or component. Uniform inset adopts all but the ‘Giant’ spacing value to avoid an overwhelming amount of white-space in the card designs.
|
||||
|
||||
```jsx noeditor
|
||||
const inset = require('./inset.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={inset} />
|
||||
```
|
||||
|
||||
<h4>Uniform Inset example</h4>
|
||||
|
||||
```jsx noeditor
|
||||
const insetExample = require('./inset-example.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={insetExample} />
|
||||
```
|
||||
|
||||
### Squish Inset — Irregular interior padding
|
||||
|
||||
Squish inset, or irregular interior padding, adopts similar patterns of use to the ‘Uniform inset’ except has a different application of the spacing values. The ‘Squish inset’ has less padding on the top and bottom compared to left and right.
|
||||
|
||||
```jsx noeditor
|
||||
const squishInset = require('./squish-inset.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={squishInset} />
|
||||
```
|
||||
|
||||
<h4>Squish Inset example</h4>
|
||||
|
||||
```jsx noeditor
|
||||
const squishInsetExample = require('./squish-inset-example.svg');
|
||||
|
||||
<img style={{
|
||||
maxWidth: '100%',
|
||||
marginTop: 22,
|
||||
marginBottom: 40
|
||||
}} src={squishInsetExample} />
|
||||
```
|
||||
|
|
@ -306,9 +306,9 @@ exports[`renders <KeyValue /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -1104,9 +1104,9 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
|
|
@ -1506,9 +1506,9 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -2451,9 +2451,9 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -3561,9 +3561,9 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -4553,9 +4553,9 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -5559,9 +5559,9 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -6633,9 +6633,9 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
@ -7764,9 +7764,9 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
|
|||
z-index: 1;
|
||||
line-height: 1.5rem;
|
||||
max-width: 100%;
|
||||
border-top: 0px;
|
||||
border-left: 0px;
|
||||
border-right: 0px;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.c8 {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,79 @@
|
|||
import React from 'react';
|
||||
import remcalc from 'remcalc';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const BottomNav = styled.div`
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 36px 0;
|
||||
`;
|
||||
|
||||
const Link = styled.a`
|
||||
color: #3b46cc;
|
||||
font-size: 15px;
|
||||
line-height: 24px;
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
const previousAndNextSections = data => {
|
||||
const items = data.items;
|
||||
const link = data.link;
|
||||
const sectionNames = items.map(item => item.name);
|
||||
const index =
|
||||
data.link === '/' ? 0 : items.findIndex(item => item.name === link);
|
||||
let ret = { prevSection: null, nextSection: null };
|
||||
|
||||
if (index > -1) {
|
||||
ret = {
|
||||
prevSection: index !== 0 ? sectionNames[index - 1] : null,
|
||||
nextSection:
|
||||
index < sectionNames.length - 1 ? sectionNames[index + 1] : null
|
||||
};
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
items.map(section => {
|
||||
if (section.components.length > 0 && section.components[0].slug) {
|
||||
section.components.map(subSection => {
|
||||
if (subSection.slug === link.toLowerCase()) {
|
||||
ret = previousAndNextSections({ items, link: section.name });
|
||||
}
|
||||
return subSection;
|
||||
});
|
||||
}
|
||||
return section;
|
||||
});
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
export default props => {
|
||||
const selectedIndex = previousAndNextSections({
|
||||
items: props.items,
|
||||
link: props.link
|
||||
});
|
||||
|
||||
if (!props.items.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BottomNav>
|
||||
<div>
|
||||
{selectedIndex.prevSection && (
|
||||
<Link href={`/#!/${selectedIndex.prevSection}`}>
|
||||
← {selectedIndex.prevSection}
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{selectedIndex.nextSection && (
|
||||
<Link href={`/#!/${selectedIndex.nextSection}`}>
|
||||
{selectedIndex.nextSection} →
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</BottomNav>
|
||||
);
|
||||
};
|
||||
|
|
@ -53,10 +53,61 @@ const Img = styled.img`
|
|||
const gutterWidth = 47 + 70;
|
||||
const windowWidth = (window || {}).outerWidth + 70;
|
||||
|
||||
let isScrolling;
|
||||
|
||||
const isScrolledOutsideView = () => {
|
||||
const elem = document.getElementById('parallaxWrapper');
|
||||
if (elem) {
|
||||
const eleHeight = elem.clientHeight;
|
||||
const scrollY = window.scrollY;
|
||||
|
||||
return scrollY >= eleHeight;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
export default class extends Component {
|
||||
state = {
|
||||
value: parseInt(windowWidth / gutterWidth, 10),
|
||||
windowWidth
|
||||
windowWidth,
|
||||
show: true
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
if (this.props.hideAfterScroll) {
|
||||
isScrolledOutsideView()
|
||||
? this.setState({ show: false })
|
||||
: window.addEventListener('scroll', this.scrollStopHandler);
|
||||
}
|
||||
}
|
||||
|
||||
scrollStopHandler = () => {
|
||||
window.removeEventListener('scroll', this.scrollStopHandler);
|
||||
window.addEventListener('scroll', this.checkpoint);
|
||||
|
||||
isScrolledOutsideView()
|
||||
? this.setState({ show: false })
|
||||
: this.skipParallax();
|
||||
};
|
||||
|
||||
skipParallax = () => {
|
||||
if (
|
||||
this.state.show &&
|
||||
window.scrollY < document.getElementsByTagName('header')[0].offsetTop
|
||||
) {
|
||||
window.scroll({
|
||||
top: document.getElementsByTagName('header')[0].offsetTop,
|
||||
left: 0,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
checkpoint = () => {
|
||||
if (isScrolledOutsideView()) {
|
||||
window.removeEventListener('scroll', this.checkpoint);
|
||||
this.setState({ show: false });
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
|
|
@ -72,12 +123,16 @@ export default class extends Component {
|
|||
Number
|
||||
);
|
||||
|
||||
if (!this.state.show) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<Wrapper id="parallaxWrapper">
|
||||
{array.map((g, i) => (
|
||||
<Gutter key={g} style={{ left: gutterWidth * i }} />
|
||||
))}
|
||||
<Parallax offsetYMax={50} offsetYMin={-50} slowerScrollRate tag="main">
|
||||
<Parallax offsetYMax={50} offsetYMin={-50} tag="main">
|
||||
<Text>
|
||||
<Img src={Plus} />
|
||||
<Img topRight src={Plus} />
|
||||
|
|
@ -89,6 +144,10 @@ export default class extends Component {
|
|||
elements, components and guidelines, for anyone developing
|
||||
products within the Joyent and Triton ecosystems.
|
||||
</P>
|
||||
</Text>
|
||||
</Parallax>
|
||||
<Parallax offsetYMax={200} offsetYMin={0} slowerScrollRate tag="main">
|
||||
<Text>
|
||||
<P white style={{ marginTop: remcalc(60), position: 'absolute' }}>
|
||||
Scroll down
|
||||
</P>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
|||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
import { Margin } from 'styled-components-spacing';
|
||||
|
||||
const Wrapper = styled.section``;
|
||||
|
||||
|
|
@ -124,14 +125,16 @@ class Playground extends Component {
|
|||
return (
|
||||
<Wrapper>
|
||||
<Tabs>
|
||||
<TabHeader active={tab === 'component'}>
|
||||
<Button
|
||||
active={tab === 'component'}
|
||||
onClick={() => this.changeTab('component')}
|
||||
>
|
||||
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
|
||||
</Button>
|
||||
</TabHeader>
|
||||
<Margin right={5}>
|
||||
<TabHeader active={tab === 'component'}>
|
||||
<Button
|
||||
active={tab === 'component'}
|
||||
onClick={() => this.changeTab('component')}
|
||||
>
|
||||
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
|
||||
</Button>
|
||||
</TabHeader>
|
||||
</Margin>
|
||||
{states.length
|
||||
? states.map((state, i) => (
|
||||
<TabHeader active={tab === state} key={`tabHeader${i}`}>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { ParallaxProvider } from 'react-scroll-parallax';
|
|||
import theme from '../theme';
|
||||
import Header from './header';
|
||||
import Parallax from './parallax';
|
||||
import BottomNav from './bottomNav';
|
||||
|
||||
const Main = styled(Row)`
|
||||
padding-top: ${remcalc(24)};
|
||||
|
|
@ -60,7 +61,7 @@ const StyleGuideRenderer = ({
|
|||
<ThemeProvider theme={fullTheme}>
|
||||
<ParallaxProvider>
|
||||
<Fragment>
|
||||
{link === '/' ? <Parallax /> : null}
|
||||
{link === '/' ? <Parallax hideAfterScroll={true} /> : null}
|
||||
<Header />
|
||||
<Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
|
||||
<Main>
|
||||
|
|
@ -71,6 +72,7 @@ const StyleGuideRenderer = ({
|
|||
)}
|
||||
<Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
|
||||
{children}
|
||||
<BottomNav items={toc.props.sections} link={link} />
|
||||
</Col>
|
||||
</Main>
|
||||
</Grid>
|
||||
|
|
|
|||
|
|
@ -60,7 +60,17 @@ module.exports = {
|
|||
name: 'Grids',
|
||||
content: 'src/grids/Readme.md',
|
||||
description:
|
||||
'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.'
|
||||
'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.',
|
||||
sections: [
|
||||
{
|
||||
name: 'Horizontal',
|
||||
content: 'src/grids/Readme.md'
|
||||
},
|
||||
{
|
||||
name: 'Vertical',
|
||||
content: 'src/grids/vertical.md'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: 'Superscript',
|
||||
|
|
|
|||
Loading…
Reference in New Issue