Merge pull request #732 from plotly/traceselector-styling

Traceselector styling

Author: dmt0

scripts/postcss.js

@@ -27,7 +27,7 @@ const internetExplorerPostCSS = () => {
     combineSelectors,
     customProperties,
     removeRoot,
-    autoprefixer({browsers: ['ie 11']}),
+    autoprefixer({browsers: ['ie 11'], grid: true}),
     cssnano,
   ];
   fs.readFile(`${BUILD_ENV}/${fileName}.ie.css`, (err, css) => {
@@ -37,16 +37,12 @@ const internetExplorerPostCSS = () => {
         to: `${BUILD_ENV}/${fileName}.ie.min.css`,
       })
       .then(result => {
-        fs.writeFile(
-          `${BUILD_ENV}/${fileName}.ie.min.css`,
-          result.css,
-          error => {
-            if (error) {
-              /* eslint-disable no-console */
-              console.log(error);
-            }
+        fs.writeFile(`${BUILD_ENV}/${fileName}.ie.min.css`, result.css, error => {
+          if (error) {
+            /* eslint-disable no-console */
+            console.log(error);
           }
-        );
+        });
       });
   });
 };

src/styles/components/sidebar/_main.scss

@@ -7,10 +7,12 @@
   text-align: center;
   background: var(--sidebar-background);
   overflow-y: auto;
+  overflow-x: hidden;
   float: left;
   border-right: var(--border-default);
   flex-grow: 1;
   @include scrollbar(0px);
+  -ms-overflow-style: none;
 
   &__group {
     background-color: var(--sidebar-group-background-base);

src/styles/components/widgets/_trace-type-selector.scss

@@ -16,6 +16,52 @@ $image-size: 60px;
     flex-shrink: 0;
     flex-grow: 0;
 
+    &:nth-of-type(4n + 3) {
+      -ms-grid-column: 1;
+    }
+    &:nth-of-type(4n) {
+      -ms-grid-column: 2;
+    }
+    &:nth-of-type(4n + 1) {
+      -ms-grid-column: 3;
+    }
+    &:nth-of-type(4n + 2) {
+      -ms-grid-column: 4;
+    }
+    &:nth-of-type(3),
+    &:nth-of-type(4),
+    &:nth-of-type(5),
+    &:nth-of-type(6) {
+      -ms-grid-row: 2;
+    }
+    &:nth-of-type(7),
+    &:nth-of-type(8),
+    &:nth-of-type(9),
+    &:nth-of-type(10) {
+      -ms-grid-row: 3;
+    }
+
+    .trace-item {
+      &:nth-of-type(2n + 1) {
+        -ms-grid-column: 1;
+      }
+      &:nth-of-type(2n + 2) {
+        -ms-grid-column: 2;
+      }
+      &:nth-of-type(3),
+      &:nth-of-type(4) {
+        -ms-grid-row: 2;
+      }
+      &:nth-of-type(5),
+      &:nth-of-type(6) {
+        -ms-grid-row: 3;
+      }
+      &:nth-of-type(7),
+      &:nth-of-type(8) {
+        -ms-grid-row: 4;
+      }
+    }
+
     &:not(:first-of-type) {
       position: relative;
       &::before {
@@ -37,6 +83,53 @@ $image-size: 60px;
     &--double {
       grid-column: span 2;
       flex-grow: 0;
+
+      &:nth-of-type(2n + 1) {
+        -ms-grid-column: 1;
+      }
+      &:nth-of-type(2n + 2) {
+        -ms-grid-column: 3;
+      }
+      &:nth-of-type(5),
+      &:nth-of-type(6) {
+        -ms-grid-row: 2;
+      }
+      &:nth-of-type(7),
+      &:nth-of-type(8) {
+        -ms-grid-row: 3;
+      }
+
+      .trace-item {
+        &:nth-of-type(4n + 1) {
+          -ms-grid-column: 1;
+        }
+        &:nth-of-type(4n + 2) {
+          -ms-grid-column: 2;
+        }
+        &:nth-of-type(4n + 3) {
+          -ms-grid-column: 3;
+        }
+        &:nth-of-type(4n) {
+          -ms-grid-column: 4;
+        }
+        &:nth-of-type(3),
+        &:nth-of-type(4) {
+          -ms-grid-row: 1;
+        }
+        &:nth-of-type(5),
+        &:nth-of-type(6),
+        &:nth-of-type(7),
+        &:nth-of-type(8) {
+          -ms-grid-row: 2;
+        }
+        &:nth-of-type(9),
+        &:nth-of-type(10),
+        &:nth-of-type(11),
+        &:nth-of-type(12) {
+          -ms-grid-row: 3;
+        }
+      }
+
       .trace-grid__column__items {
         display: grid;
         grid-gap: 0;
@@ -50,7 +143,7 @@ $image-size: 60px;
       grid-template-columns: repeat(2, $item-size);
       flex-grow: 1;
       width: 100%;
-      padding: 0 var(--spacing-half-unit) var(--spacing-base-unit);
+      padding: 0 var(--spacing-half-unit) var(--spacing-half-unit);
     }
 
     &__header {
@@ -63,7 +156,7 @@ $image-size: 60px;
       justify-content: flex-start;
       border-top: var(--border-light);
       width: 100%;
-      padding: var(--spacing-base-unit) var(--spacing-base-unit) 0;
+      padding: var(--spacing-half-unit) var(--spacing-base-unit) 0;
       box-sizing: border-box;
     }
   }
@@ -76,7 +169,7 @@ $image-size: 60px;
   align-items: center;
   justify-content: flex-start;
   flex-grow: 0;
-  margin-top: var(--spacing-base-unit);
+  margin-top: var(--spacing-half-unit);
   color: var(--color-text-base);
   @include trans;
   position: relative;
@@ -175,7 +268,7 @@ $image-size: 60px;
     font-weight: var(--font-weight-semibold);
     width: $item-size * 0.8;
     height: 34px;
-    margin-top: var(--spacing-half-unit);
+    margin-top: var(--spacing-quarter-unit);
     color: var(--color-text-base);
     text-transform: capitalize;
     font-size: var(--font-size-small);