diff --git a/scripts/postcss.js b/scripts/postcss.js index ab949a409..a3746eee8 100644 --- a/scripts/postcss.js +++ b/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); } - ); + }); }); }); }; diff --git a/src/styles/components/sidebar/_main.scss b/src/styles/components/sidebar/_main.scss index ab5df8109..b7b2ec987 100644 --- a/src/styles/components/sidebar/_main.scss +++ b/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); diff --git a/src/styles/components/widgets/_trace-type-selector.scss b/src/styles/components/widgets/_trace-type-selector.scss index 668f58fdc..b70764c3c 100644 --- a/src/styles/components/widgets/_trace-type-selector.scss +++ b/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);