fix(docs): fixing dropdown trigger icon (#301)

positive-js · Oct 25, 2019 · 39173e5 · 39173e5
1 parent abdbc2f
commit 39173e5
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 38 deletions.
diff --git a/packages/docs/src/app/components/navbar/_navbar-theme.scss b/packages/docs/src/app/components/navbar/_navbar-theme.scss
@@ -15,7 +15,7 @@
         box-shadow: 0 1px $divider;
         background: $background-color;
 
-        .docs-navbar-dropdown__trigger { color: $text; }
+        .docs-navbar-dropdown { color: $text; }
     }
 
     .docs-navbar-logo {
@@ -25,8 +25,8 @@
     .docs-navbar-version {
         &__date { color: $less-contrast-text; }
 
-        &__trigger.mc-icon-button,
-        &__trigger .docs-navbar-version__icon.mc-icon {
+        & .mc-icon-button,
+        & .docs-navbar-version__icon.mc-icon {
             color: if($is-dark, $text, $hint-text);
         }
     }
@@ -47,11 +47,8 @@
 }
 
 @mixin mc-navbar-typography($config) {
-    .docs-navbar-dropdown__trigger {
-        @include mc-typography-level-to-styles($config, body);
-    }
 
-    .docs-navbar-version__trigger.mc-icon-button {
+    .docs-navbar-version .mc-icon-button {
         @include mc-typography-level-to-styles($config, title);
     }
 

diff --git a/packages/docs/src/app/components/navbar/navbar.scss b/packages/docs/src/app/components/navbar/navbar.scss
@@ -32,13 +32,6 @@ $doc-navbar-padding: 10px;
     .docs-navbar-dropdown {
         min-width: 140px;
 
-        &__trigger {
-            padding: {
-                left: $doc-navbar-padding;
-                right: $doc-navbar-padding;
-            };
-        }
-
         &_hidden {
             visibility: hidden;
         }
@@ -95,8 +88,5 @@ $doc-navbar-padding: 10px;
 }
 
 .color-picker .mc.mc-icon {
-    margin: {
-        left: 0;
-        right: 0;
-    }
+    margin-right: 0;
 }
diff --git a/packages/docs/src/app/components/navbar/navbar.template.html b/packages/docs/src/app/components/navbar/navbar.template.html
@@ -1,23 +1,22 @@
 <header role="header" class="docs-navbar-header docs-navbar-header_fixed">
     <div class="docs-navbar-logo">
-        <img _ngcontent-cyq-c2="" alt="positive_js_logo" class="docs-navbar-logo__img" src="./assets/images/Mosaic.svg">
+        <img alt="positive_js_logo" class="docs-navbar-logo__img" src="./assets/images/Mosaic.svg">
         <span class="docs-navbar-logo__title">Mosaic</span>
     </div>
 
     <div class="docs-navbar-version">
-        <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-version__trigger"
-                [mcDropdownTriggerFor]="versionDropdown">
-            <span>Версия</span>
-            <span class="docs-navbar-version__number" id="versionNumber">{{versionSwitch.currentValue.number}}</span>
+        <button mc-button class="mc-button mc-button_transparent" [mcDropdownTriggerFor]="versionDropdown">
+            Версия {{versionSwitch.currentValue.number}}
             <i mc-icon="mc-angle-down-L_16" class="docs-navbar-version__icon"></i>
         </button>
-        <mc-dropdown #versionDropdown="mcDropdown" xPosition="after" class="docs-navbar-version__dropdown">
+
+        <mc-dropdown #versionDropdown="mcDropdown" class="docs-navbar-version__dropdown">
             <button mc-dropdown-item *ngFor="let version of versionSwitch.data; let i = index"
                     [class.mc-selected]="version.selected" (click)="versionSwitch.setValue(i)"
                     [class.docs-navbar-version_bold]="version.number.length < 4">
-                <span class="docs-navbar-version__item" >
-                    <span class="docs-navbar-version__num" >{{version.number}}</span>
-                    <span class="docs-navbar-version__date" >{{version.date}}</span>
+                <span class="docs-navbar-version__item">
+                    <span class="docs-navbar-version__num">{{version.number}}</span>
+                    <span class="docs-navbar-version__date">{{version.date}}</span>
                 </span>
             </button>
         </mc-dropdown>
@@ -26,42 +25,44 @@
     <div class="flex-spacer"></div>
 
     <div class="docs-navbar-dropdown docs-navbar-dropdown_hidden">
-        <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
-                [mcDropdownTriggerFor]="languageDropdown">
-            <span>{{languageSwitch.currentValue}}</span>
+        <button mc-button class="mc-button mc-button_transparent" [mcDropdownTriggerFor]="languageDropdown">
+           {{languageSwitch.currentValue}}
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
 
         <mc-dropdown #languageDropdown="mcDropdown">
-            <button mc-dropdown-item *ngFor="let language of languageSwitch.data; let i = index" (click)="languageSwitch.setValue(i)">
+            <button mc-dropdown-item *ngFor="let language of languageSwitch.data; let i = index"
+                    (click)="languageSwitch.setValue(i)">
                 {{language}}
             </button>
         </mc-dropdown>
     </div>
 
     <div class="docs-navbar-dropdown">
-        <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
-                [mcDropdownTriggerFor]="themeDropdown">
-            <span >{{themeSwitch.currentValue.name}}</span>
+        <button mc-button class="mc-button mc-button_transparent" [mcDropdownTriggerFor]="themeDropdown">
+            {{themeSwitch.currentValue.name}}
             <i mc-icon="mc-angle-down-M_16" class="docs-navbar-dropdown__icon"></i>
         </button>
 
         <mc-dropdown #themeDropdown="mcDropdown">
-            <button mc-dropdown-item *ngFor="let theme of themeSwitch.data; let i = index" [class.mc-selected]="theme.selected" (click)="themeSwitch.setValue(i)">
+            <button mc-dropdown-item *ngFor="let theme of themeSwitch.data; let i = index"
+                    [class.mc-selected]="theme.selected" (click)="themeSwitch.setValue(i)">
                 {{theme.name}}
             </button>
         </mc-dropdown>
     </div>
 
     <div class="color-picker">
-        <button mc-button color="second" class="mc-button mc-button_transparent docs-navbar-dropdown__trigger"
-                [mcDropdownTriggerFor]="colorDropdown">
+        <button mc-button class="mc-button mc-button_transparent" [mcDropdownTriggerFor]="colorDropdown">
             <i mc-icon="mc-circle-8_16" [style.color]='colorSwitch.currentValue.code' class="color-picker__icon"></i>
             <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">
             <div class="color-picker__dropdown-content">
-                <span *ngFor="let color of colorSwitch.data; let i = index" [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected"  (click)="colorSwitch.setValue(i)">
+                <span *ngFor="let color of colorSwitch.data; let i = index"
+                      [class.color-picker__dropdown-item]="true" [class.mc-selected]="color.selected"
+                      (click)="colorSwitch.setValue(i)">
                     <i mc-icon="mc-circle-8_16" [style.color]='color.code' class="color-picker__icon"></i>
                 </span>
             </div>