UI: Fix CSS for IE11

lib/components/src/Loader/Loader.tsx

@@ -1,4 +1,5 @@
 import { EventSource, CONFIG_TYPE } from 'global';
+import { transparentize } from 'polished';
 import React, { ComponentProps, FunctionComponent, useEffect, useState } from 'react';
 import { styled, keyframes } from '@storybook/theming';
 import { Icons } from '../icon/icon';
@@ -44,7 +45,7 @@ const ProgressTrack = styled.div(({ theme }) => ({
   maxWidth: 300,
   height: 5,
   borderRadius: 5,
-  background: `${theme.color.secondary}33`,
+  background: transparentize(0.8, theme.color.secondary),
   overflow: 'hidden',
   cursor: 'progress',
 }));

lib/core/src/server/templates/base-preview-head.html

@@ -17,6 +17,13 @@
     box-sizing: border-box;
   }
 
+  /* Vertical centering fix for IE11 */
+  .sb-show-main.sb-main-centered:after {
+    content: '';
+    min-height: inherit;
+    font-size: 0;
+  }
+
   .sb-show-main.sb-main-fullscreen {
     margin: 0;
     padding: 0;

lib/ui/src/components/sidebar/HighlightStyles.tsx

@@ -1,23 +1,25 @@
+import { transparentize } from 'polished';
 import React, { FunctionComponent } from 'react';
 import { Global } from '@storybook/theming';
 import { Highlight } from './types';
 
 export const HighlightStyles: FunctionComponent<Highlight> = ({ refId, itemId }) => (
   <Global
-    styles={({ color }) => ({
-      [`[data-ref-id="${refId}"][data-item-id="${itemId}"]:not([data-selected="true"])`]: {
-        [`&[data-nodetype="component"], &[data-nodetype="group"]`]: {
-          background: `${color.secondary}22`,
-          '&:hover, &:focus': {
-            background: `${color.secondary}22`,
+    styles={({ color }) => {
+      const background = transparentize(0.85, color.secondary);
+      return {
+        [`[data-ref-id="${refId}"][data-item-id="${itemId}"]:not([data-selected="true"])`]: {
+          [`&[data-nodetype="component"], &[data-nodetype="group"]`]: {
+            background,
+            '&:hover, &:focus': { background },
+          },
+          [`&[data-nodetype="story"], &[data-nodetype="document"]`]: {
+            color: color.defaultText,
+            background,
+            '&:hover, &:focus': { background },
           },
         },
-        [`&[data-nodetype="story"], &[data-nodetype="document"]`]: {
-          color: color.defaultText,
-          background: `${color.secondary}22`,
-          '&:hover, &:focus': { background: `${color.secondary}22` },
-        },
-      },
-    })}
+      };
+    }}
   />
 );

lib/ui/src/components/sidebar/Search.tsx

@@ -5,6 +5,7 @@ import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import Downshift, { DownshiftState, StateChangeOptions } from 'downshift';
 import Fuse, { FuseOptions } from 'fuse.js';
+import { transparentize } from 'polished';
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 
 import { DEFAULT_REF_ID } from './data';
@@ -75,7 +76,7 @@ const Input = styled.input(({ theme }) => ({
   height: 28,
   paddingLeft: 28,
   paddingRight: 28,
-  border: `1px solid ${theme.color.mediumdark}66`,
+  border: `1px solid ${transparentize(0.6, theme.color.mediumdark)}`,
   background: 'transparent',
   borderRadius: 28,
   fontSize: `${theme.typography.size.s1}px`,

lib/ui/src/components/sidebar/SearchResults.tsx

@@ -9,6 +9,7 @@ import React, {
   useEffect,
 } from 'react';
 import { ControllerStateAndHelpers } from 'downshift';
+import { transparentize } from 'polished';
 
 import { ComponentNode, DocumentNode, Path, RootNode, StoryNode } from './TreeNode';
 import {
@@ -33,8 +34,11 @@ const ResultRow = styled.li<{ isHighlighted: boolean }>(({ theme, isHighlighted
   display: 'block',
   margin: 0,
   padding: 0,
-  background: isHighlighted ? `${theme.color.secondary}11` : 'transparent',
+  background: isHighlighted ? transparentize(0.9, theme.color.secondary) : 'transparent',
   cursor: 'pointer',
+  'a:hover, button:hover': {
+    background: 'transparent',
+  },
 }));
 
 const NoResults = styled.div(({ theme }) => ({

lib/ui/src/components/sidebar/TreeNode.tsx

@@ -1,6 +1,7 @@
 import { styled, Color, Theme } from '@storybook/theming';
 import { Icons } from '@storybook/components';
 import { DOCS_MODE } from 'global';
+import { transparentize } from 'polished';
 import React, { FunctionComponent, ComponentProps } from 'react';
 
 export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExpanded }) => ({
@@ -12,7 +13,7 @@ export const CollapseIcon = styled.span<{ isExpanded: boolean }>(({ theme, isExp
   marginRight: 5,
   borderTop: '3px solid transparent',
   borderBottom: '3px solid transparent',
-  borderLeft: `3px solid ${theme.color.mediumdark}99`,
+  borderLeft: `3px solid ${transparentize(0.4, theme.color.mediumdark)}`,
   transform: isExpanded ? 'rotateZ(90deg)' : 'none',
   transition: 'transform .1s ease-out',
 }));