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
without throwing 1`] = `
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
without throwing 1`] = `
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
without throwing 1`] = `
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
without throwing 1`] = `
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
without throwing 1`] = `
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
without throwing
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
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 {
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
index 8472ea75..d6f0c596 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/networks.spec.js.snap
@@ -1202,9 +1202,9 @@ exports[`renders
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
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;
}
diff --git a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
index 230e270a..82177a76 100644
--- a/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
+++ b/consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
@@ -1191,9 +1191,9 @@ exports[`renders
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
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
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 {
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
index c61da9f4..6de8eca6 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
@@ -4945,35 +4945,52 @@ Array [
`;
exports[`renders
without throwing 1`] = `
-.c4 {
+.c10 {
+ margin-right: 0.75rem;
margin-left: 0.75rem;
}
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+.c5 {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
}
-.c3 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+.c5[type='search'] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ -moz-appearance: button;
+ appearance: button;
+ font: inherit;
+}
+
+.c9 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@@ -4983,7 +5000,124 @@ exports[`renders
without throwing 1`] = `
text-align: left;
}
-.c0 {
+.c4 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ display: none;
+}
+
+.c4:checked + label::after {
+ opacity: 1;
+}
+
+.c4:selected + label::after {
+ opacity: 1;
+}
+
+.c4:checked + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+ background-color: rgb(249,249,249);
+ cursor: not-allowed;
+}
+
+.c6 {
+ color: rgb(100,100,100);
+ position: absolute;
+ width: 1.125rem;
+ height: 1.125rem;
+ box-sizing: border-box;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ background-color: rgb(255,255,255);
+ box-shadow: none;
+ border: 0.0625rem solid rgb(216,216,216);
+ cursor: pointer;
+ border-radius: 0.25rem;
+ width: 1.125rem;
+ height: 1.125rem;
+}
+
+.c6::after {
+ opacity: 0;
+ content: '';
+ position: absolute;
+ width: 0.375rem;
+ height: 0.125rem;
+ background: transparent;
+ top: 0.3125rem;
+ left: 0.25rem;
+ border: 0.125rem solid rgb(45,45,45);
+ border-top: none;
+ border-right: none;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.c3 {
+ display: inline-block;
+ vertical-align: text-bottom;
+ width: 1.125rem;
+ height: 1.125rem;
+ position: relative;
+ cursor: pointer;
+}
+
+.c7 label {
+ font-weight: normal;
+ font-size: 0.9375rem;
+}
+
+.c2 {
+ list-style-type: none;
+ 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;
+ 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;
+}
+
+.c2 label {
+ font-weight: 400;
+}
+
+.c2 label::after {
+ width: 0.475rem;
+ height: 0.205rem;
+ top: 0.4125rem;
+ left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+.c1 {
display: inline-block;
padding: 0;
border: none;
@@ -4995,202 +5129,122 @@ exports[`renders
without throwing 1`] = `
-webkit-padding-after: 0;
}
-.c2 {
- font-weight: 600;
- white-space: pre;
- font-size: 0.8125rem;
- font-size: 0.9375rem;
-}
-
.c8 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
-}
-
-.c5 {
- position: relative;
- vertical-align: text-bottom;
- 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;
-}
-
-.c6 {
- display: none;
-}
-
-.c6:checked + label {
- background: #3B46CC;
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c6:checked + label:after {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c6:checked + label:active {
- box-shadow: none;
-}
-
-.c7 {
- outline: 0;
- display: block;
- width: 2.875rem;
- height: 1.5rem;
- position: relative;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-sizing: border-box;
- background: rgb(250,250,250);
- border-radius: 1.4375rem;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease;
- border: 0.0625rem solid rgb(216,216,216);
}
-.c7::selection {
- background: none;
-}
-
-.c7:active {
- box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c7:hover {
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c7:hover:after {
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c7:after,
-.c7:before {
- position: relative;
- display: block;
- content: '';
- width: 50%;
- height: 100%;
-}
-
-.c7:after {
- -webkit-transform: translateX(0%);
- -ms-transform: translateX(0%);
- transform: translateX(0%);
- border-radius: 50%;
- background: rgb(255,255,255);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7:active {
- box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c7:before {
- display: none;
+.c0 {
+ margin-bottom: 0 !important;
}
`;
exports[`renders
without throwing 1`] = `
-.c4 {
+.c10 {
+ margin-right: 0.75rem;
margin-left: 0.75rem;
}
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+.c5 {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
}
-.c3 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+.c5[type='search'] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ -moz-appearance: button;
+ appearance: button;
+ font: inherit;
+}
+
+.c9 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@@ -5200,7 +5254,124 @@ exports[`renders
without throwing 1`] = `
text-align: left;
}
-.c0 {
+.c4 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ display: none;
+}
+
+.c4:checked + label::after {
+ opacity: 1;
+}
+
+.c4:selected + label::after {
+ opacity: 1;
+}
+
+.c4:checked + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+ background-color: rgb(249,249,249);
+ cursor: not-allowed;
+}
+
+.c6 {
+ color: rgb(100,100,100);
+ position: absolute;
+ width: 1.125rem;
+ height: 1.125rem;
+ box-sizing: border-box;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ background-color: rgb(255,255,255);
+ box-shadow: none;
+ border: 0.0625rem solid rgb(216,216,216);
+ cursor: pointer;
+ border-radius: 0.25rem;
+ width: 1.125rem;
+ height: 1.125rem;
+}
+
+.c6::after {
+ opacity: 0;
+ content: '';
+ position: absolute;
+ width: 0.375rem;
+ height: 0.125rem;
+ background: transparent;
+ top: 0.3125rem;
+ left: 0.25rem;
+ border: 0.125rem solid rgb(45,45,45);
+ border-top: none;
+ border-right: none;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.c3 {
+ display: inline-block;
+ vertical-align: text-bottom;
+ width: 1.125rem;
+ height: 1.125rem;
+ position: relative;
+ cursor: pointer;
+}
+
+.c7 label {
+ font-weight: normal;
+ font-size: 0.9375rem;
+}
+
+.c2 {
+ list-style-type: none;
+ 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;
+ 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;
+}
+
+.c2 label {
+ font-weight: 400;
+}
+
+.c2 label::after {
+ width: 0.475rem;
+ height: 0.205rem;
+ top: 0.4125rem;
+ left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+.c1 {
display: inline-block;
padding: 0;
border: none;
@@ -5212,238 +5383,122 @@ exports[`renders
without throwing 1`] = `
-webkit-padding-after: 0;
}
-.c2 {
- font-weight: 600;
- white-space: pre;
- font-size: 0.8125rem;
- font-size: 0.9375rem;
-}
-
.c8 {
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
- color: rgb(216,216,216);
-}
-
-.c5 {
- position: relative;
- vertical-align: text-bottom;
- 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;
-}
-
-.c6 {
- display: none;
-}
-
-.c6:checked + label {
- background: #3B46CC;
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c6:checked + label:after {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c6:checked + label:active {
- box-shadow: none;
-}
-
-.c6:checked + label {
- background: rgb(250,250,250);
- border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c6:checked + label:after {
- box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7 {
- outline: 0;
- display: block;
- width: 2.875rem;
- height: 1.5rem;
- position: relative;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-sizing: border-box;
- background: rgb(250,250,250);
- border-radius: 1.4375rem;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease;
- border: 0.0625rem solid rgb(216,216,216);
- cursor: not-allowed;
}
-.c7::selection {
- background: none;
-}
-
-.c7:active {
- box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c7:hover {
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c7:hover:after {
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c7:after,
-.c7:before {
- position: relative;
- display: block;
- content: '';
- width: 50%;
- height: 100%;
-}
-
-.c7:after {
- -webkit-transform: translateX(0%);
- -ms-transform: translateX(0%);
- transform: translateX(0%);
- border-radius: 50%;
- background: rgb(255,255,255);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c7:active {
- box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c7:before {
- display: none;
-}
-
-.c7:active {
- box-shadow: none;
-}
-
-.c7:active:after {
- padding-right: 0;
-}
-
-.c7:before {
- cursor: not-allowed;
-}
-
-.c7:after {
- cursor: not-allowed;
- background: rgb(230,230,230);
-}
-
-.c7:hover {
- border: 0.0625rem solid rgb(216,216,216);
-}
-
-.c7:hover:after {
- box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
+.c0 {
+ margin-bottom: 0 !important;
}
`;
exports[`renders
without throwing 1`] = `
-.c2 {
+.c10 {
margin-right: 0.75rem;
+ margin-left: 0.75rem;
}
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: row;
- -ms-flex-direction: row;
- flex-direction: row;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- -webkit-align-content: stretch;
- -ms-flex-line-pack: stretch;
- align-content: stretch;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
+.c5 {
+ font-family: sans-serif;
+ font-size: 100%;
+ line-height: 1.15;
+ margin: 0;
+ overflow: visible;
}
-.c7 {
+.c5[type='checkbox'],
+.c5[type='radio'] {
+ box-sizing: border-box;
+ padding: 0;
+}
+
+.c5[type='number']::-webkit-inner-spin-button,
+.c5[type='number']::-webkit-outer-spin-button {
+ height: auto;
+}
+
+.c5[type='search'] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+ outline-offset: -0.125rem;
+}
+
+.c5[type='search']::-webkit-search-cancel-button,
+.c5[type='search']::-webkit-search-decoration {
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+}
+
+.c5::-webkit-file-upload-button {
+ -webkit-appearance: button;
+ -moz-appearance: button;
+ appearance: button;
+ font: inherit;
+}
+
+.c9 {
font-size: 0.9375rem;
line-height: 1.125rem;
font-style: normal;
@@ -5453,7 +5508,124 @@ exports[`renders
without throwing 1`] = `
text-align: left;
}
-.c0 {
+.c4 {
+ font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif;
+ display: none;
+}
+
+.c4:checked + label::after {
+ opacity: 1;
+}
+
+.c4:selected + label::after {
+ opacity: 1;
+}
+
+.c4:checked + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:selected + label {
+ border-color: rgb(59,70,204);
+}
+
+.c4:disabled + label {
+ background-color: rgb(249,249,249);
+ cursor: not-allowed;
+}
+
+.c6 {
+ color: rgb(100,100,100);
+ position: absolute;
+ width: 1.125rem;
+ height: 1.125rem;
+ box-sizing: border-box;
+ top: 0;
+ right: 0;
+ cursor: pointer;
+ background-color: rgb(255,255,255);
+ box-shadow: none;
+ border: 0.0625rem solid rgb(216,216,216);
+ cursor: pointer;
+ border-radius: 0.25rem;
+ width: 1.125rem;
+ height: 1.125rem;
+}
+
+.c6::after {
+ opacity: 0;
+ content: '';
+ position: absolute;
+ width: 0.375rem;
+ height: 0.125rem;
+ background: transparent;
+ top: 0.3125rem;
+ left: 0.25rem;
+ border: 0.125rem solid rgb(45,45,45);
+ border-top: none;
+ border-right: none;
+ -webkit-transform: rotate(-45deg);
+ -ms-transform: rotate(-45deg);
+ transform: rotate(-45deg);
+}
+
+.c3 {
+ display: inline-block;
+ vertical-align: text-bottom;
+ width: 1.125rem;
+ height: 1.125rem;
+ position: relative;
+ cursor: pointer;
+}
+
+.c7 label {
+ font-weight: normal;
+ font-size: 0.9375rem;
+}
+
+.c2 {
+ list-style-type: none;
+ 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;
+ 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;
+}
+
+.c2 label {
+ font-weight: 400;
+}
+
+.c2 label::after {
+ width: 0.475rem;
+ height: 0.205rem;
+ top: 0.4125rem;
+ left: 0.35rem;
+}
+
+.c2 div[type='checkbox'],
+.c2 div[type='checkbox'] input,
+.c2 div[type='checkbox'] label {
+ height: 1.5rem;
+ width: 1.5rem;
+}
+
+.c1 {
display: inline-block;
padding: 0;
border: none;
@@ -5469,159 +5641,66 @@ exports[`renders
without throwing 1`] = `
font-weight: 600;
white-space: pre;
font-size: 0.8125rem;
- font-size: 0.9375rem;
-}
-
-.c6 {
- font-weight: 600;
- white-space: pre;
- font-size: 0.8125rem;
-}
-
-.c3 {
- position: relative;
- vertical-align: text-bottom;
- 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;
-}
-
-.c4 {
- display: none;
-}
-
-.c4:checked + label {
- background: #3B46CC;
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c4:checked + label:after {
- -webkit-transform: translateX(100%);
- -ms-transform: translateX(100%);
- transform: translateX(100%);
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c4:checked + label:active {
- box-shadow: none;
-}
-
-.c5 {
- outline: 0;
- display: block;
- width: 2.875rem;
- height: 1.5rem;
- position: relative;
cursor: pointer;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- box-sizing: border-box;
- background: rgb(250,250,250);
- border-radius: 1.4375rem;
- -webkit-transition: all 0.3s ease;
- transition: all 0.3s ease;
- border: 0.0625rem solid rgb(216,216,216);
}
-.c5::selection {
- background: none;
+.c0 {
+ margin-bottom: 0 !important;
}
-.c5:active {
- box-shadow: inset 0 0 0 1.5rem rgb(216,216,216);
-}
-
-.c5:hover {
- border: 0.0625rem solid rgb(59,70,204);
-}
-
-.c5:hover:after {
- box-shadow: 0 0 0 0.0625rem rgb(59,70,204);
-}
-
-.c5:after,
-.c5:before {
- position: relative;
- display: block;
- content: '';
- width: 50%;
- height: 100%;
-}
-
-.c5:after {
- -webkit-transform: translateX(0%);
- -ms-transform: translateX(0%);
- transform: translateX(0%);
- border-radius: 50%;
- background: rgb(255,255,255);
- -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- -webkit-transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
- box-shadow: 0 0 0 0.0625rem rgb(216,216,216);
-}
-
-.c5:active {
- box-shadow: inset 0 0 0 2em rgb(216,216,216);
-}
-
-.c5:before {
- display: none;
-}
-
-
`;
diff --git a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
index 032a4532..0fae32ec 100644
--- a/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
+++ b/packages/resource-widgets/src/__tests__/__snapshots__/network.spec.js.snap
@@ -239,9 +239,9 @@ exports[`renders
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
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
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
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
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
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
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
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
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
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
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
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
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;
diff --git a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
index f27aa88e..340cf040 100644
--- a/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
+++ b/packages/ui-toolkit/src/card/__tests___/__snapshots__/card.spec.js.snap
@@ -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;
}
-```
diff --git a/packages/ui-toolkit/src/grids/Readme.md b/packages/ui-toolkit/src/grids/Readme.md
index f4fa968a..8eb55a8f 100644
--- a/packages/ui-toolkit/src/grids/Readme.md
+++ b/packages/ui-toolkit/src/grids/Readme.md
@@ -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');
+
+
+```
diff --git a/packages/ui-toolkit/src/grids/inline-example.svg b/packages/ui-toolkit/src/grids/inline-example.svg
new file mode 100644
index 00000000..a0db7540
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/inline-example.svg
@@ -0,0 +1,89 @@
+
diff --git a/packages/ui-toolkit/src/grids/inline.svg b/packages/ui-toolkit/src/grids/inline.svg
new file mode 100644
index 00000000..0d950869
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/inline.svg
@@ -0,0 +1,20 @@
+
diff --git a/packages/ui-toolkit/src/grids/inset-example.svg b/packages/ui-toolkit/src/grids/inset-example.svg
new file mode 100644
index 00000000..e6c7d9ba
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/inset-example.svg
@@ -0,0 +1,168 @@
+
diff --git a/packages/ui-toolkit/src/grids/inset.svg b/packages/ui-toolkit/src/grids/inset.svg
new file mode 100644
index 00000000..43ad179d
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/inset.svg
@@ -0,0 +1,74 @@
+
diff --git a/packages/ui-toolkit/src/grids/spacing.svg b/packages/ui-toolkit/src/grids/spacing.svg
new file mode 100644
index 00000000..496ade33
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/spacing.svg
@@ -0,0 +1,14 @@
+
diff --git a/packages/ui-toolkit/src/grids/squish-inset-example.svg b/packages/ui-toolkit/src/grids/squish-inset-example.svg
new file mode 100644
index 00000000..d1ba06e2
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/squish-inset-example.svg
@@ -0,0 +1,416 @@
+
diff --git a/packages/ui-toolkit/src/grids/squish-inset.svg b/packages/ui-toolkit/src/grids/squish-inset.svg
new file mode 100644
index 00000000..83e68171
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/squish-inset.svg
@@ -0,0 +1,90 @@
+
diff --git a/packages/ui-toolkit/src/grids/stack-example.svg b/packages/ui-toolkit/src/grids/stack-example.svg
new file mode 100644
index 00000000..d77b8bdb
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/stack-example.svg
@@ -0,0 +1,103 @@
+
diff --git a/packages/ui-toolkit/src/grids/stack.svg b/packages/ui-toolkit/src/grids/stack.svg
new file mode 100644
index 00000000..18ab1073
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/stack.svg
@@ -0,0 +1,24 @@
+
diff --git a/packages/ui-toolkit/src/grids/vertical.md b/packages/ui-toolkit/src/grids/vertical.md
new file mode 100644
index 00000000..7054e8ff
--- /dev/null
+++ b/packages/ui-toolkit/src/grids/vertical.md
@@ -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');
+
+
+```
+
+### 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');
+
+
+```
+
+
Stack example
+
+```jsx noeditor
+const stackExample = require('./stack-example.svg');
+
+
+```
+
+### 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');
+
+
+```
+
+
Inline example
+
+```jsx noeditor
+const inlineExample = require('./inline-example.svg');
+
+
+```
+
+### 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');
+
+
+```
+
+
Uniform Inset example
+
+```jsx noeditor
+const insetExample = require('./inset-example.svg');
+
+
+```
+
+### 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');
+
+
+```
+
+
Squish Inset example
+
+```jsx noeditor
+const squishInsetExample = require('./squish-inset-example.svg');
+
+
+```
diff --git a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
index 91f0e1d8..ca9be177 100644
--- a/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
+++ b/packages/ui-toolkit/src/key-value/__tests__/__snapshots__/key-value.spec.js.snap
@@ -306,9 +306,9 @@ exports[`renders
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
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
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
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
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
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
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
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
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 {
diff --git a/packages/ui-toolkit/src/styleguide/bottomNav.js b/packages/ui-toolkit/src/styleguide/bottomNav.js
new file mode 100644
index 00000000..1133d335
--- /dev/null
+++ b/packages/ui-toolkit/src/styleguide/bottomNav.js
@@ -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 (
+
+
+ {selectedIndex.prevSection && (
+
+ ← {selectedIndex.prevSection}
+
+ )}
+
+
+ {selectedIndex.nextSection && (
+
+ {selectedIndex.nextSection} →
+
+ )}
+
+
+ );
+};
diff --git a/packages/ui-toolkit/src/styleguide/parallax.js b/packages/ui-toolkit/src/styleguide/parallax.js
index 54850055..14c8c638 100644
--- a/packages/ui-toolkit/src/styleguide/parallax.js
+++ b/packages/ui-toolkit/src/styleguide/parallax.js
@@ -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 (
-
+
{array.map((g, i) => (
))}
-
+
@@ -89,6 +144,10 @@ export default class extends Component {
elements, components and guidelines, for anyone developing
products within the Joyent and Triton ecosystems.
+
+
+
+
Scroll down
diff --git a/packages/ui-toolkit/src/styleguide/playground.js b/packages/ui-toolkit/src/styleguide/playground.js
index cfab188a..45fff648 100644
--- a/packages/ui-toolkit/src/styleguide/playground.js
+++ b/packages/ui-toolkit/src/styleguide/playground.js
@@ -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 (
-
-
-
+
+
+
+
+
{states.length
? states.map((state, i) => (
diff --git a/packages/ui-toolkit/src/styleguide/renderer.js b/packages/ui-toolkit/src/styleguide/renderer.js
index ebebb0d5..4e417420 100644
--- a/packages/ui-toolkit/src/styleguide/renderer.js
+++ b/packages/ui-toolkit/src/styleguide/renderer.js
@@ -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 = ({
- {link === '/' ? : null}
+ {link === '/' ? : null}
@@ -71,6 +72,7 @@ const StyleGuideRenderer = ({
)}
{children}
+
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index ea6e9905..096a5eb2 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -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',