Merge branch 'development' into feature/instant/account-state-change

* development:
  [instant] Viewport specific errors (#1228)
  Added more comments
  Include wholeNumberSchema in sra-spec schemas
  chore(instant): fix linter
  Fix isNode
  fix(instant): update buy quote at start up in the case of default amount
  fix: apply css reset to overlay as well
  fix(website): turn off production flag when building locally
  chore: linter
  fix: progress bar
  fix: use fontSize prop in button
  feat: make instant resistant to external styles
  feat: add faux externall css file
  Add upstream issue
  Use const require instead of import
  Fix tslint issues
  Use detect-node
  Set curstom inspect printer in BigNumber

1 files changed, 39 insertions, 36 deletions

diff --git a/packages/instant/src/components/ui/container.tsx b/packages/instant/src/components/ui/container.tsx
index 403751210..c42082ed5 100644
--- a/packages/instant/src/components/ui/container.tsx
+++ b/packages/instant/src/components/ui/container.tsx
@@ -41,42 +41,45 @@ export const Container =
     styled.div <
     ContainerProps >
     `
-    box-sizing: border-box;
-    ${props => cssRuleIfExists(props, 'flex-grow')}
-    ${props => cssRuleIfExists(props, 'position')}
-    ${props => cssRuleIfExists(props, 'top')}
-    ${props => cssRuleIfExists(props, 'right')}
-    ${props => cssRuleIfExists(props, 'bottom')}
-    ${props => cssRuleIfExists(props, 'left')}
-    ${props => cssRuleIfExists(props, 'max-width')}
-    ${props => cssRuleIfExists(props, 'margin')}
-    ${props => cssRuleIfExists(props, 'margin-top')}
-    ${props => cssRuleIfExists(props, 'margin-right')}
-    ${props => cssRuleIfExists(props, 'margin-bottom')}
-    ${props => cssRuleIfExists(props, 'margin-left')}
-    ${props => cssRuleIfExists(props, 'padding')}
-    ${props => cssRuleIfExists(props, 'border-radius')}
-    ${props => cssRuleIfExists(props, 'border')}
-    ${props => cssRuleIfExists(props, 'border-top')}
-    ${props => cssRuleIfExists(props, 'border-bottom')}
-    ${props => cssRuleIfExists(props, 'z-index')}
-    ${props => cssRuleIfExists(props, 'white-space')}
-    ${props => cssRuleIfExists(props, 'opacity')}
-    ${props => cssRuleIfExists(props, 'cursor')}
-    ${props => cssRuleIfExists(props, 'overflow')}
-    ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
-    ${props => props.display && stylesForMedia('display', props.display)}
-    ${props => stylesForMedia('width', props.width || 'auto')}
-    ${props => stylesForMedia('height', props.height || 'auto')}
-    background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
-    border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
-    &:hover {
-        ${props =>
-            props.darkenOnHover
-                ? `background-color: ${
-                      props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
-                  }`
-                : ''};
+    && {
+        all: initial;
+        box-sizing: border-box;
+        ${props => cssRuleIfExists(props, 'flex-grow')}
+        ${props => cssRuleIfExists(props, 'position')}
+        ${props => cssRuleIfExists(props, 'top')}
+        ${props => cssRuleIfExists(props, 'right')}
+        ${props => cssRuleIfExists(props, 'bottom')}
+        ${props => cssRuleIfExists(props, 'left')}
+        ${props => cssRuleIfExists(props, 'max-width')}
+        ${props => cssRuleIfExists(props, 'margin')}
+        ${props => cssRuleIfExists(props, 'margin-top')}
+        ${props => cssRuleIfExists(props, 'margin-right')}
+        ${props => cssRuleIfExists(props, 'margin-bottom')}
+        ${props => cssRuleIfExists(props, 'margin-left')}
+        ${props => cssRuleIfExists(props, 'padding')}
+        ${props => cssRuleIfExists(props, 'border-radius')}
+        ${props => cssRuleIfExists(props, 'border')}
+        ${props => cssRuleIfExists(props, 'border-top')}
+        ${props => cssRuleIfExists(props, 'border-bottom')}
+        ${props => cssRuleIfExists(props, 'z-index')}
+        ${props => cssRuleIfExists(props, 'white-space')}
+        ${props => cssRuleIfExists(props, 'opacity')}
+        ${props => cssRuleIfExists(props, 'cursor')}
+        ${props => cssRuleIfExists(props, 'overflow')}
+        ${props => (props.hasBoxShadow ? `box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1)` : '')};
+        ${props => props.display && stylesForMedia<string>('display', props.display)}
+        ${props => props.width && stylesForMedia<string>('width', props.width)}
+        ${props => props.height && stylesForMedia<string>('height', props.height)}
+        background-color: ${props => (props.backgroundColor ? props.theme[props.backgroundColor] : 'none')};
+        border-color: ${props => (props.borderColor ? props.theme[props.borderColor] : 'none')};
+        &:hover {
+            ${props =>
+                props.darkenOnHover
+                    ? `background-color: ${
+                          props.backgroundColor ? darken(0.05, props.theme[props.backgroundColor]) : 'none'
+                      }`
+                    : ''};
+        }
     }
 `;