From 9c3c79cdd4380a5f0827054cb2777107092cde6b Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Sat, 29 Feb 2020 17:39:27 +0800
Subject: [PATCH] style: dropdown menu & select menu option padding fix

---
 src/Dropdown/src/DropdownMenu.vue |  13 +--
 src/Popover/src/main.js           |   4 +
 src/Popselect/src/Popselect.vue   |   7 +-
 styles/BaseSelectMenu.scss        |  51 +++++----
 styles/Button.scss                | 178 ++++++++++++++++++++++++------
 styles/Dropdown.scss              |  16 ++-
 styles/themes/common.scss         |   2 +-
 7 files changed, 204 insertions(+), 67 deletions(-)

diff --git a/src/Dropdown/src/DropdownMenu.vue b/src/Dropdown/src/DropdownMenu.vue
index 0dc9a89be..64d6a3a35 100644
--- a/src/Dropdown/src/DropdownMenu.vue
+++ b/src/Dropdown/src/DropdownMenu.vue
@@ -88,17 +88,7 @@ export default {
       }
     }
   },
-  // created () {
-  //   console.log('dropdown menu created')
-  // },
-  // beforeDestroy () {
-  //   console.log('dropdown menu beforeDestroy')
-  // },
-  // destroyed () {
-  //   console.log('dropdown menu destroyed')
-  // },
   mounted () {
-    // console.log('dropdown menu mounted')
     if (this.defaultFocus && this.focusable) {
       this.$el.focus()
     }
@@ -194,6 +184,9 @@ export default {
   render (h) {
     return h('div', {
       staticClass: 'n-dropdown-menu',
+      class: {
+        [`n-dropdown-menu--${this.size}-size`]: true
+      },
       on: {
         keydown: this.handleKeyDown,
         mouseenter: this.handleMouseEnter,
diff --git a/src/Popover/src/main.js b/src/Popover/src/main.js
index 8fe419db8..41cc92c79 100644
--- a/src/Popover/src/main.js
+++ b/src/Popover/src/main.js
@@ -105,6 +105,10 @@ export default {
     displayDirective: {
       type: String,
       default: 'if'
+    },
+    zIndex: {
+      type: String,
+      default: undefined
     }
   },
   render (h, context) {
diff --git a/src/Popselect/src/Popselect.vue b/src/Popselect/src/Popselect.vue
index 4a13b6247..ce1c787f6 100644
--- a/src/Popselect/src/Popselect.vue
+++ b/src/Popselect/src/Popselect.vue
@@ -47,7 +47,7 @@ export default {
     },
     showArrow: {
       type: Boolean,
-      default: true
+      default: false
     },
     show: {
       type: Boolean,
@@ -56,6 +56,10 @@ export default {
     trigger: {
       type: String,
       default: 'click'
+    },
+    zIndex: {
+      type: Number,
+      default: undefined
     }
   },
   methods: {
@@ -74,6 +78,7 @@ export default {
         trigger: context.props.trigger,
         containerClass: 'n-popselect',
         showArrow: context.props.showArrow,
+        zIndex: context.props.zIndex,
         controller
       },
       on: {
diff --git a/styles/BaseSelectMenu.scss b/styles/BaseSelectMenu.scss
index 2d60fb7ac..23bba999a 100644
--- a/styles/BaseSelectMenu.scss
+++ b/styles/BaseSelectMenu.scss
@@ -55,50 +55,57 @@
     background-color: $--base-select-menu-background-color;
     box-shadow: $--base-select-menu-box-shadow;
     @include b(base-select-group-header) {
-      cursor: default;
+      @include once {
+        cursor: default;
+        padding: 0 14px;
+      }
       color: map-get($--base-select-menu-group-header-text-color, 'default');
-      padding: 0 14px;
     }
     @include b(base-select-option) {
-      cursor: pointer;
-      position: relative;
-      padding: 0 14px;
-      white-space: nowrap;
-      transition: color .3s $--n-ease-in-out-cubic-bezier;
-      color: map-get($--base-select-menu-option-color, "default");
-      text-overflow: ellipsis;
-      overflow: hidden;
-      @include m(grouped) {
-        padding: 0 21px;
+      @include once {
+        cursor: pointer;
+        position: relative;
+        padding: 0 14px;
+        white-space: nowrap;
+        transition: color .3s $--n-ease-in-out-cubic-bezier;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        @include m(grouped) {
+          padding: 0 21px;
+        }
       }
+      color: map-get($--base-select-menu-option-color, "default");
       @include m(selected) {
         color: map-get($--base-select-menu-option-color, "selected");
       }
       @include m(disabled) {
         color: map-get($--base-select-menu-option-color, "disabled");
-        &::after {
-          display: none;
+        @include once {
+          &::after {
+            display: none;
+          }
         }
         @include m(selected) {
           color: map-get($--base-select-menu-option-color, "disabled-selected");
           &::after {
             border-right: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
             border-bottom: 1px solid map-get($--base-select-menu-option-color, "disabled-selected");
-            display: block;
+            @include once {
+              display: block;
+            }
           }
         }
-        cursor: not-allowed;
-      }
-      @include m(loading) {
-        color: map-get($--base-select-menu-option-color, "disabled");
-        text-align: center;
-        pointer-events: none;
+        @include once {
+          cursor: not-allowed;
+        }
       }
     }
     @include e(action) {
-      transition:
+      @include once {
+        transition:
         color .3s $--n-ease-in-out-cubic-bezier,
         border-color .3s $--n-ease-in-out-cubic-bezier;
+      }
       border-top: 1px solid $--base-select-menu-action-divider-color;
       color: $--base-select-menu-action-text-color;
     }
diff --git a/styles/Button.scss b/styles/Button.scss
index d483e5e5e..22d7700ab 100644
--- a/styles/Button.scss
+++ b/styles/Button.scss
@@ -8,7 +8,7 @@
     font-size: $font-size;
     @include not-m(text) {
       height: $height;
-      line-height: $height;
+      line-height: $height - 2px;
       padding: map-get($--n-button-padding, $size);
     }
     white-space: nowrap;
@@ -29,8 +29,8 @@
       display: inline-block;
       position: relative;
       $icon-size: map-get($--n-button-icon-size, $size);
-      line-height: $height;
-      height: $height;
+      line-height: $height - 2px;
+      height: $height - 2px;
       width: $icon-size;
       max-width: $icon-size;
       vertical-align: bottom;
@@ -69,7 +69,6 @@
     }
     @include m(text) {
       padding: 0;
-      font-weight: $--n-strong-weight;
       border-radius: 0;
     }
   }
@@ -79,9 +78,12 @@
   @include m($type + '-type') {
     color: map-get($--button-text-color, $type);
     background-color: map-get($--button-background-color, $type);
-    box-shadow: map-get($--button-box-shadow, $type);
+    border: 1px solid map-get($--button-border-color, $type);
     @include m(text) {
-      box-shadow: none !important;
+      @include e(border-mask) {
+        box-shadow: none !important;
+      }
+      border: none;
       background-color: transparent;
       color: map-get($--button-text-typed-text-color, $type);
       @include not-m(disabled) {
@@ -115,12 +117,14 @@
     @include m(ghost) {
       background-color: map-get($--button-ghost-typed-background-color, $type);
       color: map-get($--button-ghost-typed-text-color, $type);
-      box-shadow: map-get($--button-ghost-typed-box-shadow, $type);
+      border: 1px solid map-get($--button-ghost-typed-border-color, $type);
       @include not-m(disabled) {
         @include m(enter-pressed) {
           background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
           color: map-get($--button-ghost-typed-text-color, $type + '-active');
-          box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-active');
+          @include e(border-mask) {
+            box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
+          }
           @include e(icon) {
             @include b(icon) {
               fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
@@ -136,7 +140,9 @@
           @include not-m(enter-pressed) {
             color: map-get($--button-ghost-typed-text-color, $type + '-focus');
             background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
-            box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-focus');
+            @include e(border-mask) {
+              box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-focus');
+            }
             @include e(icon) {
               @include b(icon) {
                 fill: map-get($--button-ghost-typed-text-color, $type + '-focus') !important;
@@ -153,7 +159,9 @@
           &:hover {
             background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
             color: map-get($--button-ghost-typed-text-color, $type + '-hover');
-            box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-hover');
+            @include e(border-mask) {
+              box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
+            }
             @include e(icon) {
               @include b(icon) {
                 fill: map-get($--button-ghost-typed-text-color, $type + '-hover') !important;
@@ -168,7 +176,9 @@
           &:active {
             background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
             color: map-get($--button-ghost-typed-text-color, $type + '-active');
-            box-shadow: map-get($--button-ghost-typed-box-shadow, $type + '-active');
+            @include e(border-mask) {
+              box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
+            }
             @include e(icon) {
               @include b(icon) {
                 fill: map-get($--button-ghost-typed-text-color, $type + '-active') !important;
@@ -207,7 +217,9 @@
       @include m(enter-pressed) {
         background-color: map-get($--button-background-color, $type + '-active');
         color: map-get($--button-text-color, $type + '-active');
-        box-shadow: map-get($--button-box-shadow, $type + '-active');
+        @include e(border-mask) {
+          box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
+        }
         @include e(icon) {
           @include b(icon) {
             fill: map-get($--button-text-color, $type + '-active') !important;
@@ -231,7 +243,9 @@
         @include not-m(enter-pressed) {
           background-color: map-get($--button-background-color, $type + '-focus');
           color: map-get($--button-text-color, $type + '-focus');
-          box-shadow: map-get($--button-box-shadow, $type + '-focus');
+          @include e(border-mask) {
+            box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
+          }
           @include e(icon) {
             @include b(icon) {
               fill: map-get($--button-text-color, $type + '-focus') !important;
@@ -248,7 +262,9 @@
         &:hover {
           background-color: map-get($--button-background-color, $type + '-hover');
           color: map-get($--button-text-color, $type + '-hover');
-          box-shadow: map-get($--button-box-shadow, $type + '-hover');
+          @include e(border-mask) {
+            box-shadow: map-get($--button-border-mask-box-shadow, $type + '-hover');
+          }
           @include e(icon) {
             @include b(icon) {
               fill: map-get($--button-text-color, $type + '-hover') !important;
@@ -263,7 +279,9 @@
         &:active {
           background-color: map-get($--button-background-color, $type + '-active');
           color: map-get($--button-text-color, $type + '-active');
-          box-shadow: map-get($--button-box-shadow, $type + '-active');
+          @include e(border-mask) {
+            box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
+          }
           @include e(icon) {
             @include b(icon) {
               fill: map-get($--button-text-color, $type + '-active') !important;
@@ -308,8 +326,10 @@
   @include button-ripple-mixin('info');
   @include b(button) {
     @include once {
+      box-sizing: border-box;
       outline: none;
       position: relative;
+      z-index: auto;
       border: none;
       font-family: inherit;
       display: inline-block;
@@ -320,30 +340,31 @@
       transition:
         background-color .3s $--n-ease-in-out-cubic-bezier,
         opacity .3s $--n-ease-in-out-cubic-bezier,
-        box-shadow .3s $--n-ease-in-out-cubic-bezier;
+        border-color .3s $--n-ease-in-out-cubic-bezier;
       cursor: pointer;
       &::after {
         content: "";
         border-radius: inherit;
         position: absolute;
-        left: 0;
-        top: 0;
-        right: 0;
-        bottom: 0;
+        left: -1px;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+      }
+      @include e(border-mask) {
+        position: absolute;
+        left: -1px;
+        top: -1px;
+        right: -1px;
+        bottom: -1px;
+        border-radius: inherit;
+        box-shadow: inset 0 0 0 1px transparent;
+        transition: box-shadow .3s $--n-ease-in-out-cubic-bezier;
       }
       @include e(icon) {
         @include fade-in-width-expand-transition();
         transition: color .3s $--n-ease-in-out-cubic-bezier;
       }
-      @include e(content-aligner) {
-        display: inline-block;
-        line-height: inherit;
-        height: 100%;
-        font-size: inherit;
-        white-space: nowrap;
-        visibility: hidden;
-        width: 0;
-      }
       @include e(content) {
         white-space: nowrap;
         transition: color .3s $--n-ease-in-out-cubic-bezier;
@@ -418,13 +439,52 @@
         border-radius: 0!important;
       }
       /**
-       * Not an elegant implementation
+       * Not an perfect implementation,
+       * since their border is not really "shared"
        */
       @include m(default-type) {
         & + {
           @include b(button) {
             @include m(default-type) {
-              margin-left: -1px!important;
+              border-left-width: 0px;
+            }
+          }
+        }
+      }
+      @include m(ghost) {
+        @include m(primary-type) {
+          & + {
+            @include b(button) {
+              @include m(primary-type) {
+                border-left-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(success-type) {
+          & + {
+            @include b(button) {
+              @include m(success-type) {
+                border-left-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(error-type) {
+          & + {
+            @include b(button) {
+              @include m(error-type) {
+                border-left-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(info-type) {
+          & + {
+            @include b(button) {
+              @include m(info-type) {
+                border-left-width: 0px;
+              }
             }
           }
         }
@@ -453,6 +513,62 @@
         margin: 0!important;
         border-radius: 0!important;
       }
+      @include m(default-type) {
+        & + {
+          @include b(button) {
+            @include m(default-type) {
+              border-top-width: 0px;
+            }
+          }
+        }
+      }
+      @include m(ghost) {
+        @include m(info-type) {
+          & + {
+            @include b(button) {
+              @include m(info-type) {
+                border-top-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(success-type) {
+          & + {
+            @include b(button) {
+              @include m(success-type) {
+                border-top-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(warning-type) {
+          & + {
+            @include b(button) {
+              @include m(warning-type) {
+                border-top-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(error-type) {
+          & + {
+            @include b(button) {
+              @include m(error-type) {
+                border-top-width: 0px;
+              }
+            }
+          }
+        }
+        @include m(primary-type) {
+          & + {
+            @include b(button) {
+              @include m(primary-type) {
+                border-top-width: 0px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }
\ No newline at end of file
diff --git a/styles/Dropdown.scss b/styles/Dropdown.scss
index 4ede19c51..8503c5b16 100644
--- a/styles/Dropdown.scss
+++ b/styles/Dropdown.scss
@@ -27,6 +27,9 @@
           @include m(small-size) {
             padding-top: 4px;
             padding-bottom: 4px;
+            @include b(base-select-option) {
+              padding: 0 16px;
+            }
             @include b(dropdown-divider) {
               margin: 0 0;
             }
@@ -38,8 +41,11 @@
             }
           }
           @include m(medium-size) {
-            padding-top: 4px;
-            padding-bottom: 4px;
+            padding-top: 6px;
+            padding-bottom: 6px;
+            @include b(base-select-option) {
+              padding: 0 20px;
+            }
             @include b(dropdown-divider) {
               margin: 0 0;
             }
@@ -53,6 +59,9 @@
           @include m(large-size) {
             padding-top: 6px;
             padding-bottom: 6px;
+            @include b(base-select-option) {
+              padding: 0 24px;
+            }
             @include b(dropdown-divider) {
               margin: 2px 0;
             }
@@ -66,6 +75,9 @@
           @include m(huge-size) {
             padding-top: 8px;
             padding-bottom: 8px;
+            @include b(base-select-option) {
+              padding: 0 24px;
+            }
             @include b(dropdown-submenu-activator) {
               @include e(arrow) {
                 font-size: 16px;
diff --git a/styles/themes/common.scss b/styles/themes/common.scss
index ab17a27ae..7990aab06 100644
--- a/styles/themes/common.scss
+++ b/styles/themes/common.scss
@@ -64,7 +64,7 @@ $--n-button-round-padding: (
   "large": 0 22px
 ) !global;
 $--n-button-icon-size: (
-  "tiny": 16px,
+  "tiny": 15px,
   "small": 18px,
   "medium": 18px,
   "large": 20px