Merge branch 'master' of https://github.com/yldio/joyent-portal into 1406
|
@ -141,12 +141,38 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -539,8 +565,6 @@ exports[`renders <InstanceList /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -835,12 +859,38 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1233,8 +1283,6 @@ exports[`renders <InstanceList allSelected /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -1529,12 +1577,38 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1938,8 +2012,6 @@ exports[`renders <InstanceList sortBy /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -2223,12 +2295,38 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2632,8 +2730,6 @@ exports[`renders <InstanceList sortBy sortOrder /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(0deg)",
|
"transform": "rotate(0deg)",
|
||||||
|
@ -2917,12 +3013,38 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -3315,8 +3437,6 @@ exports[`renders <InstanceList submitting /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -3611,12 +3731,38 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -4009,8 +4155,6 @@ exports[`renders <InstanceList>{children}</InstanceList> without throwing 1`] =
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -4355,12 +4499,38 @@ exports[`renders <Item /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -4857,12 +5027,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5361,12 +5557,38 @@ exports[`renders <Item allowedActions /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5852,12 +6074,38 @@ exports[`renders <Item mutating /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -572,9 +572,9 @@ exports[`renders <AddForm /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -1629,9 +1629,9 @@ exports[`renders <EditForm /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
|
|
@ -122,12 +122,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -408,8 +434,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -937,12 +961,38 @@ exports[`renders <Item /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c3 label {
|
||||||
font-weight: 400;
|
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 {
|
.c2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1306,12 +1356,38 @@ exports[`renders <Item {...item} /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c3 label {
|
||||||
font-weight: 400;
|
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 {
|
.c2 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1876,12 +1952,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2162,8 +2264,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -2665,12 +2765,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2951,8 +3077,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -3454,12 +3578,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -3751,8 +3901,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -4243,12 +4391,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -4540,8 +4714,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(0deg)",
|
"transform": "rotate(0deg)",
|
||||||
|
@ -5032,12 +5204,38 @@ Array [
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c5 label {
|
||||||
font-weight: 400;
|
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 {
|
.c4 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5318,8 +5516,6 @@ Array [
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
|
|
@ -315,12 +315,38 @@ exports[`renders <List /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c18 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -817,8 +843,6 @@ exports[`renders <List /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -1267,12 +1291,38 @@ exports[`renders <List error /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c25 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1794,8 +1844,6 @@ exports[`renders <List error /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -2230,12 +2278,38 @@ exports[`renders <List instances /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c18 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2941,8 +3015,6 @@ exports[`renders <List instances /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -4371,12 +4443,38 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c18 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5125,8 +5223,6 @@ exports[`renders <List instances selected /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -6871,12 +6967,38 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c18 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -7625,8 +7747,6 @@ exports[`renders <List instances selected=all /> without throwing 1`] = `
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
@ -9568,12 +9688,38 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c18 label {
|
||||||
font-weight: 400;
|
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 {
|
.c6 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -10322,8 +10468,6 @@ exports[`renders <List instances selected=all allowedActions /> without throwing
|
||||||
</span>
|
</span>
|
||||||
<svg
|
<svg
|
||||||
height="6"
|
height="6"
|
||||||
marginBottom="0.125rem"
|
|
||||||
marginLeft="0.5625rem"
|
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"transform": "rotate(180deg)",
|
"transform": "rotate(180deg)",
|
||||||
|
|
|
@ -1129,9 +1129,9 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c28 {
|
.c28 {
|
||||||
|
@ -3647,9 +3647,9 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c28 {
|
.c28 {
|
||||||
|
|
|
@ -1202,9 +1202,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 {
|
.c25 {
|
||||||
|
@ -1214,9 +1214,9 @@ exports[`renders <Networks networks /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1191,9 +1191,9 @@ exports[`renders <Tags addOpen /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c24 {
|
.c24 {
|
||||||
|
@ -2921,9 +2921,9 @@ exports[`renders <Tags editing /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 {
|
.c25 {
|
||||||
|
@ -4326,9 +4326,9 @@ exports[`renders <Tags editing.removing /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c25 {
|
.c25 {
|
||||||
|
|
|
@ -239,9 +239,9 @@ exports[`renders <Network /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c7 {
|
||||||
|
@ -387,12 +387,38 @@ exports[`renders <Network /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -1123,9 +1149,9 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c7 {
|
||||||
|
@ -1271,12 +1297,38 @@ exports[`renders <Network {...network} /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2020,9 +2072,9 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c7 {
|
||||||
|
@ -2168,12 +2220,38 @@ exports[`renders <Network {...network} /> without throwing 3`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -2954,9 +3032,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c28 {
|
.c28 {
|
||||||
|
@ -2966,9 +3044,9 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -3115,12 +3193,38 @@ exports[`renders <Network {...network} fabric /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -4104,9 +4208,9 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c7 {
|
||||||
|
@ -4252,12 +4356,38 @@ exports[`renders <Network {...network} infoExpanded /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -5374,9 +5504,9 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c7 {
|
.c7 {
|
||||||
|
@ -5522,12 +5652,38 @@ exports[`renders <Network {...network} public /> without throwing 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c9 label {
|
||||||
font-weight: 400;
|
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 {
|
.c8 {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
|
@ -60,9 +60,9 @@ exports[`Card Card With Header 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
|
@ -13,9 +13,9 @@ const BaseHeader = styled(BaseCard)`
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: ${remcalc(24)};
|
line-height: ${remcalc(24)};
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
|
|
||||||
${is('radius')`
|
${is('radius')`
|
||||||
border-radius: ${remcalc(4)};
|
border-radius: ${remcalc(4)};
|
||||||
|
|
|
@ -126,12 +126,38 @@ exports[`Form Checkbox 1`] = `
|
||||||
-webkit-box-align: center;
|
-webkit-box-align: center;
|
||||||
-ms-flex-align: center;
|
-ms-flex-align: center;
|
||||||
align-items: 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 {
|
.c0 label {
|
||||||
font-weight: 400;
|
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 {
|
.c7 {
|
||||||
font-size: 0.9375rem;
|
font-size: 0.9375rem;
|
||||||
line-height: 1.125rem;
|
line-height: 1.125rem;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
import BaseInput from './base/input';
|
import BaseInput from './base/input';
|
||||||
import BaseToggle from './base/toggle';
|
import BaseToggle from './base/toggle';
|
||||||
|
@ -12,7 +13,7 @@ const Li = styled.li`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
height: 24px;
|
height: ${remcalc(24)};
|
||||||
|
|
||||||
label {
|
label {
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -28,8 +29,8 @@ const Li = styled.li`
|
||||||
div[type='checkbox'],
|
div[type='checkbox'],
|
||||||
div[type='checkbox'] input,
|
div[type='checkbox'] input,
|
||||||
div[type='checkbox'] label {
|
div[type='checkbox'] label {
|
||||||
height: 24px;
|
height: ${remcalc(24)};
|
||||||
width: 24px;
|
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
|
marginBottom: 40
|
||||||
}} src={small} />
|
}} 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} />
|
||||||
|
```
|
||||||
|
|
After Width: | Height: | Size: 112 KiB |
After Width: | Height: | Size: 60 KiB |
After Width: | Height: | Size: 313 KiB |
After Width: | Height: | Size: 298 KiB |
After Width: | Height: | Size: 55 KiB |
After Width: | Height: | Size: 412 KiB |
After Width: | Height: | Size: 150 KiB |
After Width: | Height: | Size: 294 KiB |
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;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -1104,9 +1104,9 @@ exports[`renders <KeyValue expanded={false} /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1506,9 +1506,9 @@ exports[`renders <KeyValue input="input" /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -2451,9 +2451,9 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -3561,9 +3561,9 @@ exports[`renders <KeyValue method="add" /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -4553,9 +4553,9 @@ exports[`renders <KeyValue method="edit" /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -5559,9 +5559,9 @@ exports[`renders <KeyValue removing /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -6633,9 +6633,9 @@ exports[`renders <KeyValue submitting /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.c8 {
|
||||||
|
@ -7764,9 +7764,9 @@ exports[`renders <KeyValue type="tag" /> without throwing 1`] = `
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
border-top: 0px;
|
border-top: 0;
|
||||||
border-left: 0px;
|
border-left: 0;
|
||||||
border-right: 0px;
|
border-right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.c8 {
|
.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 gutterWidth = 47 + 70;
|
||||||
const windowWidth = (window || {}).outerWidth + 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 {
|
export default class extends Component {
|
||||||
state = {
|
state = {
|
||||||
value: parseInt(windowWidth / gutterWidth, 10),
|
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() {
|
render() {
|
||||||
|
@ -72,12 +123,16 @@ export default class extends Component {
|
||||||
Number
|
Number
|
||||||
);
|
);
|
||||||
|
|
||||||
|
if (!this.state.show) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper id="parallaxWrapper">
|
||||||
{array.map((g, i) => (
|
{array.map((g, i) => (
|
||||||
<Gutter key={g} style={{ left: gutterWidth * i }} />
|
<Gutter key={g} style={{ left: gutterWidth * i }} />
|
||||||
))}
|
))}
|
||||||
<Parallax offsetYMax={50} offsetYMin={-50} slowerScrollRate tag="main">
|
<Parallax offsetYMax={50} offsetYMin={-50} tag="main">
|
||||||
<Text>
|
<Text>
|
||||||
<Img src={Plus} />
|
<Img src={Plus} />
|
||||||
<Img topRight src={Plus} />
|
<Img topRight src={Plus} />
|
||||||
|
@ -89,6 +144,10 @@ export default class extends Component {
|
||||||
elements, components and guidelines, for anyone developing
|
elements, components and guidelines, for anyone developing
|
||||||
products within the Joyent and Triton ecosystems.
|
products within the Joyent and Triton ecosystems.
|
||||||
</P>
|
</P>
|
||||||
|
</Text>
|
||||||
|
</Parallax>
|
||||||
|
<Parallax offsetYMax={200} offsetYMin={0} slowerScrollRate tag="main">
|
||||||
|
<Text>
|
||||||
<P white style={{ marginTop: remcalc(60), position: 'absolute' }}>
|
<P white style={{ marginTop: remcalc(60), position: 'absolute' }}>
|
||||||
Scroll down
|
Scroll down
|
||||||
</P>
|
</P>
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React, { Component } from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import is from 'styled-is';
|
import is from 'styled-is';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
import { Margin } from 'styled-components-spacing';
|
||||||
|
|
||||||
const Wrapper = styled.section``;
|
const Wrapper = styled.section``;
|
||||||
|
|
||||||
|
@ -124,14 +125,16 @@ class Playground extends Component {
|
||||||
return (
|
return (
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Tabs>
|
<Tabs>
|
||||||
<TabHeader active={tab === 'component'}>
|
<Margin right={5}>
|
||||||
<Button
|
<TabHeader active={tab === 'component'}>
|
||||||
active={tab === 'component'}
|
<Button
|
||||||
onClick={() => this.changeTab('component')}
|
active={tab === 'component'}
|
||||||
>
|
onClick={() => this.changeTab('component')}
|
||||||
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
|
>
|
||||||
</Button>
|
{(propCode.split(nameRegex)[1] || 'Component').split(/\s/g)[0]}
|
||||||
</TabHeader>
|
</Button>
|
||||||
|
</TabHeader>
|
||||||
|
</Margin>
|
||||||
{states.length
|
{states.length
|
||||||
? states.map((state, i) => (
|
? states.map((state, i) => (
|
||||||
<TabHeader active={tab === state} key={`tabHeader${i}`}>
|
<TabHeader active={tab === state} key={`tabHeader${i}`}>
|
||||||
|
|
|
@ -7,6 +7,7 @@ import { ParallaxProvider } from 'react-scroll-parallax';
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
import Header from './header';
|
import Header from './header';
|
||||||
import Parallax from './parallax';
|
import Parallax from './parallax';
|
||||||
|
import BottomNav from './bottomNav';
|
||||||
|
|
||||||
const Main = styled(Row)`
|
const Main = styled(Row)`
|
||||||
padding-top: ${remcalc(24)};
|
padding-top: ${remcalc(24)};
|
||||||
|
@ -60,7 +61,7 @@ const StyleGuideRenderer = ({
|
||||||
<ThemeProvider theme={fullTheme}>
|
<ThemeProvider theme={fullTheme}>
|
||||||
<ParallaxProvider>
|
<ParallaxProvider>
|
||||||
<Fragment>
|
<Fragment>
|
||||||
{link === '/' ? <Parallax /> : null}
|
{link === '/' ? <Parallax hideAfterScroll={true} /> : null}
|
||||||
<Header />
|
<Header />
|
||||||
<Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
|
<Grid style={{ marginLeft: 0, zIndex: 2, position: 'relative' }}>
|
||||||
<Main>
|
<Main>
|
||||||
|
@ -71,6 +72,7 @@ const StyleGuideRenderer = ({
|
||||||
)}
|
)}
|
||||||
<Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
|
<Col xs={hasSidebar ? 9 : 12} lg={hasSidebar ? 8 : 12}>
|
||||||
{children}
|
{children}
|
||||||
|
<BottomNav items={toc.props.sections} link={link} />
|
||||||
</Col>
|
</Col>
|
||||||
</Main>
|
</Main>
|
||||||
</Grid>
|
</Grid>
|
||||||
|
|
|
@ -60,7 +60,17 @@ module.exports = {
|
||||||
name: 'Grids',
|
name: 'Grids',
|
||||||
content: 'src/grids/Readme.md',
|
content: 'src/grids/Readme.md',
|
||||||
description:
|
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',
|
name: 'Superscript',
|
||||||
|
|