fontdue-js 2.0.0-alpha7 → 2.0.0-alpha9

package/dist/fontdue.css

@@ -414,7 +414,7 @@ div[data-component=TypeTesters] {
   margin: 0;
   appearance: none;
   text-transform: inherit;
-  margin-right: 20px;
+  white-space: nowrap;
 }
 .type-tester__edit-all:active, .type-tester__edit-all:focus {
   outline: none;
@@ -422,6 +422,9 @@ div[data-component=TypeTesters] {
 .type-tester__edit-all:not(:disabled) {
   cursor: pointer;
 }
+.type-tester__edit-all:not(:last-child) {
+  margin-right: 20px;
+}
 @media (max-width: 899px) {
   .type-tester__edit-all {
     display: none;
@@ -430,11 +433,14 @@ div[data-component=TypeTesters] {
 .type-tester__name {
   margin-right: 1em;
 }
+.type-tester__toolbar .type-tester__variable-axes {
+  margin-right: 20px;
+}
 .type-tester__toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-bottom: 20px;
+  margin-bottom: 10px;
   position: relative;
   z-index: 2;
   margin-top: 10px;
@@ -449,6 +455,9 @@ div[data-component=TypeTesters] {
   justify-content: space-between;
   flex: 1;
 }
+.type-tester__toolbar__tools:not(:last-child) {
+  margin-right: 20px;
+}
 .type-tester[data-shy=hover] .type-tester__toolbar__tools, .type-tester[data-shy=focus] .type-tester__toolbar__tools {
   opacity: 0;
   pointer-events: none;
@@ -544,7 +553,7 @@ div[data-component=TypeTesters] {
 .type-tester__slider__handle:hover {
   background-color: currentcolor;
 }
-.type-tester__features-select {
+.type-tester__features-select:not(:last-child) {
   margin-right: 20px;
 }
 @media (max-width: 899px) {
@@ -553,9 +562,11 @@ div[data-component=TypeTesters] {
   }
 }
 .type-tester__features-button {
-  margin-right: 20px;
   white-space: nowrap;
 }
+.type-tester__features-button:not(:last-child) {
+  margin-right: 20px;
+}
 @media (max-width: 899px) {
   .type-tester__features-button {
     display: none;
@@ -584,6 +595,9 @@ div[data-component=TypeTesters] {
   font-size: 18px;
   vertical-align: middle;
 }
+.type-tester__features-container .type-tester__variable-axes {
+  padding-bottom: 10px;
+}
 .type-tester__features {
   position: relative;
   z-index: 1;
@@ -627,11 +641,13 @@ div[data-component=TypeTesters] {
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
 }
+.type-tester > .type-tester__variable-axes:first-child {
+  margin-top: 10px;
+}
 .type-tester__variable-axes {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   grid-gap: 10px 20px;
-  padding-bottom: 10px;
 }
 .type-tester__variable-axes__axis {
   width: 100%;
@@ -647,7 +663,6 @@ div[data-component=TypeTesters] {
 }
 .type-tester__variable-axes__slider {
   flex: 1;
-  margin-right: 20px;
 }
 .type-tester__variable-axes .type-tester__slider__track {
   max-width: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.0.0-alpha7",
+  "version": "2.0.0-alpha9",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts-declarations",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",