Breadcrumb Design Guidelines Alignment (#1023)

* Breadcrumbs design guidance alignment. * added change file. * renamed chevron small size variable.
microsoft · Feb 19, 2017 · 85b6613 · 85b6613
1 parent 5c7bb7a
commit 85b6613
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 5 deletions.
diff --git a/common/changes/wdo3650-Breadcrumb-guidelines-alignment_2017-02-16-23-09.json b/common/changes/wdo3650-Breadcrumb-guidelines-alignment_2017-02-16-23-09.json
@@ -0,0 +1,20 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Aligning Breadcrumb to design guidance and fix for chevron position at smaller breakpoints",
+      "type": "patch"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/utilities",
+      "type": "none"
+    },
+    {
+      "comment": "",
+      "packageName": "@uifabric/example-app-base",
+      "type": "none"
+    }
+  ],
+  "email": "willdo@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.scss
@@ -12,6 +12,7 @@ $Breadcrumb-overflowButtonSize: 16px;
 $Breadcrumb-buttonHoverColor: $ms-color-themeDark;
 $Breadcrumb-itemMaxWidth: 160px;
 $Breadcrumb-itemMaxWidth-sm: 116px;
+$Breadcrumb-chevron-sm: 8px;
 
 :global {
 
@@ -30,7 +31,7 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     font-size: $ms-font-size-s;
     color: $ms-color-neutralSecondary;
     vertical-align: top;
-    margin: 11px 7px;
+    margin: 11px 0px;
     line-height: 1;
   }
 
@@ -71,9 +72,10 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     font-size: $Breadcrumb-overflowButtonSize;
     display: inline-block;
     color: $Breadcrumb-overflowButtonColor;
-    padding: 8px;
+    padding: 9px 8px;
     cursor: pointer;
     vertical-align: top;
+    line-height: 1;
   }
 
   .ms-Breadcrumb-item {
@@ -115,12 +117,13 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
 
     .ms-Breadcrumb-chevron {
       font-size: $ms-font-size-mi;
-      margin: 8px 5px;
+      margin: 8px 0;
     }
 
     .ms-Breadcrumb-overflowButton {
       font-size: $ms-font-size-m-plus;
-      padding: 5px 4px;
+      padding: 6px 8px;
+      line-height: 1;
     }
   }
 
@@ -131,11 +134,13 @@ $Breadcrumb-itemMaxWidth-sm: 116px;
     }
 
     .ms-Breadcrumb-chevron {
+      font-size: $Breadcrumb-chevron-sm;
       margin: 5px 4px;
+      margin: 7px 0;
     }
 
     .ms-Breadcrumb-overflowButton {
-      padding: 2px 4px;
+      padding: 4px 6px;
     }
   }