From ba4eaa93522109605e763a34080590d41a31bdd0 Mon Sep 17 00:00:00 2001
From: Iakovleva Margarita <naruyaoi@yandex.ru>
Date: Tue, 1 Oct 2019 16:01:44 +0300
Subject: [PATCH] feat(docs): fixing color picker in Edge (#273)

---
 .../components/main-layout/main-layout.component.scss  |  1 +
 .../docs/src/app/components/navbar/_navbar-theme.scss  |  6 +++++-
 packages/docs/src/app/components/navbar/navbar.scss    | 10 +++++++++-
 .../src/app/components/navbar/navbar.template.html     |  8 +++++---
 .../shared/example-viewer/_example-viewer-theme.scss   |  6 ++++++
 5 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/packages/docs/src/app/components/main-layout/main-layout.component.scss b/packages/docs/src/app/components/main-layout/main-layout.component.scss
index 23fea64f0..e91b98dcd 100644
--- a/packages/docs/src/app/components/main-layout/main-layout.component.scss
+++ b/packages/docs/src/app/components/main-layout/main-layout.component.scss
@@ -5,6 +5,7 @@
 }
 
 .content {
+    max-width: calc(100% - 720px);
     margin: {
         top: 64px;
         left: 360px;
diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss
index 58ae002af..9cde470a2 100644
--- a/packages/docs/src/app/components/navbar/_navbar-theme.scss
+++ b/packages/docs/src/app/components/navbar/_navbar-theme.scss
@@ -30,7 +30,7 @@
         }
     }
 
-    .color-picker__dropdown-content {
+    .color-picker__dropdown-item {
         &:hover {
             background-color: $hover;
         }
@@ -39,6 +39,10 @@
             background: $selected;
         }
     }
+
+    .color-picker__dropdown {
+        padding: 0;
+    }
 }
 
 @mixin mc-navbar-typography($config) {
diff --git a/packages/docs/src/app/components/navbar/navbar.scss b/packages/docs/src/app/components/navbar/navbar.scss
index 8de84677d..5d6b727be 100644
--- a/packages/docs/src/app/components/navbar/navbar.scss
+++ b/packages/docs/src/app/components/navbar/navbar.scss
@@ -49,7 +49,15 @@ $doc-navbar-padding: 10px;
     }
 
     &__dropdown-content {
-        padding: 7px 5px;
+        overflow: hidden;
+        display:flex;
+    }
+
+    &__dropdown-item {
+        padding: 5px 5px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 }
 
diff --git a/packages/docs/src/app/components/navbar/navbar.template.html b/packages/docs/src/app/components/navbar/navbar.template.html
index bd9e4f06d..a942f4764 100644
--- a/packages/docs/src/app/components/navbar/navbar.template.html
+++ b/packages/docs/src/app/components/navbar/navbar.template.html
@@ -58,9 +58,11 @@
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
         <mc-dropdown #colorDropdown="mcDropdown" class="color-picker__dropdown" [style.margin-top]="0">
-            <span *ngFor="let color of colors; let i = index" [class.color-picker__dropdown-content]="true" [class.mc-selected]="color.selected"  (click)="setColor(i)">
-                <i mc-icon="mc-circle-8_16" [style.color]='color.code' class="color-picker__icon"></i>
-            </span>
+            <div class="color-picker__dropdown-content">
+                <span *ngFor="let color of colors; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected"  (click)="setColor(i)">
+                    <i mc-icon="mc-circle-8_16" [style.color]='color.code' class="color-picker__icon"></i>
+                </span>
+            </div>
         </mc-dropdown>
     </div>
 </header>
diff --git a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
index 77f3e83e1..41b25cdfb 100644
--- a/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
+++ b/packages/docs/src/app/shared/example-viewer/_example-viewer-theme.scss
@@ -9,6 +9,8 @@
     $error-background: mc-color($error, 60);
     $divider: mc-color($foreground, divider);
     $hint-text: mc-color($foreground, hint-text);
+    $text: mc-color($foreground, text);
+    $example-border: if($is-dark, $text, $hint-text);
 
     .docs-example-viewer__lost-example {
         border: 1px solid $error-border;
@@ -21,6 +23,10 @@
 
         &:hover { color: $color_hover; }
     }
+
+    .docs-example-viewer__example {
+        border: 1px solid fade_out($example-border, 0.3);
+    }
 }
 
 @mixin example-viewer-typography($config) {