feat(docs): fixing color picker in Edge (#273)

positive-js · Oct 1, 2019 · ba4eaa9 · ba4eaa9
1 parent d5c22f3
commit ba4eaa9
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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) {