fix(grids): fix IE sizing issue by adding max-width

salesforce-ux · Jul 20, 2017 · 00a0e35 · 00a0e35
1 parent e6d50b2
commit 00a0e35
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 15 deletions.
diff --git a/design-tokens/console-base/spacing.yml b/design-tokens/console-base/spacing.yml
@@ -19,6 +19,16 @@ global:
 imports:
 - ../force-base/aliases/spacing.yml
 props:
+  ## Globals
+  COMPONENT_SPACING_MARGIN:
+    value: '{!SPACING_SMALL}'
+  COMPONENT_SPACING_PADDING:
+    value: '{!SPACING_SMALL}'
+  TEMPLATE_GUTTERS:
+    value: '{!SPACING_SMALL}'
+  TEMPLATE_PROFILE_GUTTERS:
+    value: '4rem {!SPACING_SMALL} {!SPACING_SMALL}'
+  ## Old
   CARD_SPACING_MEDIUM:
     value: '{!SPACING_SMALL}'
   CARD_SPACING_LARGE:

diff --git a/design-tokens/salesforce-skin/border-color.yml b/design-tokens/salesforce-skin/border-color.yml
@@ -24,7 +24,7 @@ props:
   COLOR_BORDER_BRAND_PRIMARY_ACTIVE:
     value: '{!BLUE_BORDER_SECONDARY}'
   PAGE_HEADER_COLOR_BORDER:
-    value: '{!PALETTE_GRAY_2}'
+    value: '{!PALETTE_GRAY_6}'
   CARD_COLOR_BORDER:
     value: '{!PALETTE_GRAY_6}'
   CARD_FOOTER_COLOR_BORDER:

diff --git a/ui/components/cards/tokens/border-color.yml b/ui/components/cards/tokens/border-color.yml
@@ -8,8 +8,6 @@ global:
   - 'border*'
   - box-shadow
 imports:
-- "../../../../design-tokens/force-base/aliases/color.yml"
-- "../../../../design-tokens/salesforce-skin/aliases/color.yml"
 - "../../../../design-tokens/color-palettes.yml"
 props:
   CARD_COLOR_BORDER:

diff --git a/ui/components/page-headers/base/_blame.scss b/ui/components/page-headers/base/_blame.scss
@@ -16,20 +16,9 @@
   box-shadow: none;
 }
 
-/**
- * @summary
- *
- * @selector .slds-has-full-bleed
- * @restrict .slds-page-header
- * @modifier
- */
-.slds-page-header_bleed,
-.slds-page-header.slds-has-full-bleed {
-  margin: 0;
-}
-
 // Overrides when inside a card
 .slds-tabs_card .slds-page-header,
 .slds-card .slds-page-header {
+  border: 0;
   box-shadow: none;
 }
diff --git a/ui/dependencies/_layout.scss b/ui/dependencies/_layout.scss
@@ -107,6 +107,7 @@
       .slds-#{$breakpoint-string}size--#{$i}-of-#{$denominator} {
         width: ($i / $denominator) * 100%;
         flex: 0 0 ($i / $denominator) * 100%;
+        max-width: ($i / $denominator) * 100%; // IE fix
       }
     }
   }

diff --git a/ui/utilities/sizing/_index.scss b/ui/utilities/sizing/_index.scss
@@ -63,6 +63,8 @@ $_sizes: (
       .slds-#{$size}-size_#{$name},
       .slds-#{$size}-size--#{$name} {
         width: $width;
+        flex: 0 0 $width;
+        max-width: $width; // IE fix
       }
     }
 
@@ -90,6 +92,8 @@ $_sizes: (
       .slds-max-#{$size}-size_#{$name},
       .slds-max-#{$size}-size--#{$name} {
         width: $width;
+        flex: 0 0 $width;
+        max-width: $width; // IE fix
       }
     }