mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'develop' of ***REMOVED*** into develop

Browse Source
This commit is contained in:
07akioni 2019-08-01 15:56:03 +08:00
commit ad3840ddda
5 changed files with 85 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/common/Cascader/src/Cascader.vue → packages/common/Cascader/src/MutipleCascader.vue
View File

@ -52,7 +52,6 @@
</div>
<div
v-if="active"
ref="contentWrapper"
class="n-cascader-menu__content-wrapper"
>
@ -65,6 +64,7 @@
>
<transition name="n-select-menu--transition">
<CasPanel
v-if="active"
:data="items"
:selected-items="selectedItems"
:selected="selected"
@ -85,7 +85,7 @@ import toggleable from '../../../mixins/toggleable'
import CasPanel from './CasPanel'
export default {
name: 'Cascader',
name: 'MutipleCascader',
components: {
NIcon,
CasPanel

4
packages/common/Cascader/src/main.vue
View File

@ -2,7 +2,7 @@
/**
* Warning: There are some potential problems if there are too many items!
*/
import Cascader from './Cascader'
import MutipleCascader from './MutipleCascader'
export default {
name: 'NCascader',
@ -70,7 +70,7 @@ export default {
change: this.handleChange.bind(this),
setactive: this.handleSetActive.bind(this)
}
return h(Cascader, {
return h(MutipleCascader, {
props: { ...this.$props, active: this.active, placement: 'bottom-start', widthMode: 'activator' },
on
})

157
styles/Cascader.scss
View File

@ -2,90 +2,91 @@
@import './mixins/mixins.scss';
@import './theme/default.scss';
@include b(cascader) {
font-family: $default-font-family;
.n-cascader-menu__content-wrapper {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
overflow: visible;
transform: translateZ(0);
.n-cascader-menu__item {
height: $default-height;
line-height: $default-height;
min-width: 100px;
.n-cascader-menu__content-wrapper {
position: fixed;
left: 0;
top: 0;
width: 0;
height: 0;
overflow: visible;
transform: translateZ(0);
.n-cascader-menu__item {
height: $default-height;
line-height: $default-height;
min-width: 100px;
cursor: pointer;
&:hover {
background: $select-item-background-color--active;
}
.n-cascader-menu__item-next::after {
content: "\f3d1";
font-family: "n-Ionicons";
position: absolute;
right: 8px;
}
.n-cascader-menu__item-next--selected::after {
content: "\f3d1";
font-family: "n-Ionicons";
position: absolute;
right: 10px;
color: red;
}
.n-cascader-menu__item--selected::after {
content: "\f3ff";
font-family: "n-Ionicons";
position: absolute;
right: 8px;
color: #63E2B7FF;
font-size: 18px;
}
.n-cascader-menu__content {
margin-top: 4px;
.n-cascader-menu {
display: inline-block;
height: 185px;
overflow-y: auto;
z-index: 0;
}
.n-cascader-menu__item-next::after {
content: "\f3d1";
font-family: "n-Ionicons";
position: absolute;
right: 8px;
}
.n-cascader-menu__item-next--selected::after {
content: "\f3d1";
font-family: "n-Ionicons";
position: absolute;
right: 10px;
color: red;
}
.n-cascader-menu__item--selected::after {
content: "\f3ff";
font-family: "n-Ionicons";
position: absolute;
right: 8px;
color: #63E2B7FF;
font-size: 18px;
}
.n-cascader-menu__content {
margin-top: 4px;
.n-cascader-menu {
display: inline-block;
height: 185px;
overflow-y: auto;
z-index: 0;
position: relative;
border-radius: 9px;
background-color: #4b516a;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
.n-cascader-menu__item {
display: flex;
padding: 0px 20px;
white-space: nowrap;
position: relative;
border-radius: 9px;
background-color: #4b516a;
box-shadow: 0px 2px 20px 0px rgba(0, 0, 0, 0.16);
.n-cascader-menu__item {
display: flex;
padding: 0px 20px;
white-space: nowrap;
position: relative;
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
span {
display: flex
}
.n-cascader-menu__item-select {
margin-right: 8px;
}
.n-cascader-menu_item-icon {
margin-left: auto;
align-items: center;
}
transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
span {
display: flex
}
.n-cascader-menu__item--active.n-cascader-menu__item-next::after {
color: #63E2B7FF;
.n-cascader-menu__item-select {
margin-right: 8px;
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
table thead tr th:last-of-type {
padding-left: 32px;
.n-cascader-menu_item-icon {
margin-left: auto;
align-items: center;
}
}
.n-cascader-menu__item--active.n-cascader-menu__item-next::after {
color: #63E2B7FF;
}
&::-webkit-scrollbar {
width: 5px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.2);
border-radius: 2.5px;
}
&::-webkit-scrollbar-thumb:hover {
background: rgba(255,255,255,0.3);
}
table thead tr th:last-of-type {
padding-left: 32px;
}
}
}
}

2
styles/Select.scss
View File

@ -288,7 +288,7 @@
.n-select-menu__light-bar {
position: absolute;
width:100%;
background-color: rgba(96, 220, 178, 0.3);
background-color: $select-item-background-color--active;
top: 0;
left: 0;
transition: top .15s $default-cubic-bezier;

1
styles/theme/default.scss
View File

@ -63,6 +63,7 @@ $select-text-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color--disabled: rgba(255, 255, 255, .2);
$select-placeholder-color: rgba(255, 255, 255, .4);
$select-background-color--active: rgba(99, 226, 183, 0.1);
$select-item-background-color--active: rgba(96, 220, 178, 0.3);
$select-border-radius: 8px;
$select-border-color--active: $main-color;