mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-03-13 13:59:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

style: dropdown menu & select menu option padding fix

Browse Source
This commit is contained in:
07akioni 2020-02-29 17:39:27 +08:00
parent 2902855a61
commit 9c3c79cdd4
7 changed files with 204 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/Dropdown/src/DropdownMenu.vue
View File

@ -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,

4
src/Popover/src/main.js
View File

@ -105,6 +105,10 @@ export default {
displayDirective: {
type: String,
default: 'if'
},
zIndex: {
type: String,
default: undefined
}
},
render (h, context) {

7
src/Popselect/src/Popselect.vue
View File

@ -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: {

51
styles/BaseSelectMenu.scss
View File

@ -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;
}

178
styles/Button.scss
View File

@ -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;
}
}
}
}
}
}
}
}

16
styles/Dropdown.scss
View File

@ -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;

2
styles/themes/common.scss
View File

@ -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