mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-15 04:42:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(transfer): light theme

Browse Source
This commit is contained in:
07akioni 2019-11-08 16:07:20 +08:00
parent a7a9c1ca87
commit 8062a4db2a
9 changed files with 200 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/common/Checkbox/src/main.vue
View File

@ -14,9 +14,6 @@
>
<div
class="n-checkbox-box"
:class="{
'simulate-hollow-out-fill': !disabled
}"
@click="handleClick"
>
<check-mark class="n-checkbox-box__check-mark" />
@ -35,7 +32,6 @@
<script>
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
import hollowoutable from '../../../mixins/hollowoutable'
import asformitem from '../../../mixins/asformitem'
import CheckMark from './CheckMark'
import LineMark from './LineMark'
@ -55,7 +51,6 @@ export default {
mixins: [
withapp,
themeable,
hollowoutable,
asformitem(),
collectable('NCheckboxGroup', 'collectedCheckboxValues')
],

2
packages/common/Transfer/src/TransferListItem.vue
View File

@ -15,7 +15,7 @@
<div class="n-transfer-list-item__checkbox">
<n-checkbox
:disabled="disabled"
:value="checked"
:checked="checked"
@input="handleInput"
/>
</div>

16
packages/common/Transfer/src/main.vue
View File

@ -1,5 +1,10 @@
<template>
<div class="n-transfer">
<div
class="n-transfer"
:class="{
[`n-${synthesizedTheme}-theme`]: synthesizedTheme
}"
>
<div class="n-transfer-list">
<div class="n-transfer-list-header">
<div class="n-transfer-list-header__checkbox">
@ -135,6 +140,9 @@ import NTransferButton from './TransferButton'
import cloneDeep from 'lodash/cloneDeep'
import withlightbar from '../../../mixins/withlightbar'
import withsecondlightbar from '../../../mixins/withsecondlightbar'
import asformitem from '../../../mixins/asformitem'
import withapp from '../../../mixins/withapp'
import themeable from '../../../mixins/themeable'
export default {
name: 'NTransfer',
@ -144,7 +152,7 @@ export default {
NTransferListItem,
NTransferButton
},
mixins: [withlightbar, withsecondlightbar],
mixins: [withapp, themeable, asformitem(), withlightbar, withsecondlightbar],
props: {
value: {
type: Array,
@ -244,6 +252,9 @@ export default {
}).then(() => {
this.init = false
})
},
value (value, oldValue) {
this.$emit('change', value, oldValue)
}
},
mounted () {
@ -259,7 +270,6 @@ export default {
emitInputEvent (value) {
const newValue = this.cleanValue(value)
this.$emit('input', newValue)
this.$emit('change', newValue)
},
cleanValue (value) {
if (Array.isArray(value)) {

237
styles/Transfer.scss
View File

@ -1,133 +1,138 @@
@import './mixins/mixins.scss';
@import './themes/vars.scss';
@include b(transfer) {
display: flex;
@include b(transfer-list) {
width: 182px;
height: 312px;
background-color: rgba(75,81,106,1);
border-radius: 6px;
@include b(transfer-list-header) {
background:rgba(255,255,255,0.2);
display: flex;
border-radius: 6px 6px 0 0;
align-items: center;
height: 40px;
@include e(checkbox) {
position: relative;
padding: 0 8px 0 14px;
@include b(checkbox) {
display: block;
}
}
@include e(header) {
flex: 1;
line-height: 1;
font-size: 16px;
font-weight: 700;
color: rgba(255, 255, 255, 1);
@include m(disabled) {
color: rgba(255, 255, 255, 0.25);
}
}
@include e(label) {
font-size: 12px;
justify-self: flex-end;
margin-right: 14px;
}
}
@include b(transfer-list-body) {
overflow: hidden;
position: relative;
height: 272px;
@include b(scrollbar-content) {
width: 100%;
}
@include b(transfer-list-body-content) {
padding: 0;
margin: 0;
position: relative;
@include b(transfer-list-light-bar) {
@include fade-in-transition(transfer-list-light-bar);
height: 34px;
transition: top .15s $default-cubic-bezier;
background-color: rgba(96, 220, 178, 0.3);
width: 100%;
position: absolute;
}
@include b(transfer-list-item) {
@include slide-right-transition(transfer-list-item-source);
@include slide-left-transition(transfer-list-item-target);
@include themes-mixin {
@include b(transfer) {
display: flex;
@include b(transfer-list) {
width: 182px;
height: 312px;
transition: background-color .3s $default-cubic-bezier, border-color .3s $default-cubic-bezier;
background-color: map-get($--transfer-panel-background-color, 'default');
border-radius: 6px;
border: 1px solid $--transfer-panel-border-color;
@include b(transfer-list-header) {
background-color: map-get($--transfer-panel-header-background-color, 'default');
transition: background-color .3s $default-cubic-bezier;
display: flex;
border-radius: 6px 6px 0 0;
align-items: center;
height: 40px;
@include e(checkbox) {
position: relative;
cursor: pointer;
max-height: 34px;
display: flex;
align-items: center;
font-size: 14px;
height: 34px;
color: rgba(255, 255, 255, 1);
@include e(label) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 4px;
padding: 0 8px 0 14px;
@include b(checkbox) {
display: block;
}
@include e(checkbox) {
}
@include e(header) {
flex: 1;
line-height: 1;
font-size: 16px;
font-weight: 700;
color: map-get($--transfer-panel-header-text-color, 'default');
transition: color .3s $default-cubic-bezier;
@include m(disabled) {
color: map-get($--transfer-panel-header-text-color, 'disabled');
}
}
@include e(label) {
transition: color .3s $default-cubic-bezier;
color: map-get($--transfer-panel-header-label-text-color, 'default');
font-size: 12px;
justify-self: flex-end;
margin-right: 14px;
}
}
@include b(transfer-list-body) {
overflow: hidden;
position: relative;
height: 272px;
@include b(scrollbar-content) {
width: 100%;
}
@include b(transfer-list-body-content) {
padding: 0;
margin: 0;
position: relative;
@include b(transfer-list-light-bar) {
@include fade-in-transition(transfer-list-light-bar);
height: 34px;
transition: top .15s $default-cubic-bezier;
background-color: map-get($--tranfer-item-lightbar-background-color, 'default');
width: 100%;
position: absolute;
}
@include b(transfer-list-item) {
@include slide-right-transition(transfer-list-item-source);
@include slide-left-transition(transfer-list-item-target);
transition: color .3s $default-cubic-bezier;
position: relative;
padding: 0 8px 0 14px;
@include b(checkbox) {
display: block;
cursor: pointer;
max-height: 34px;
display: flex;
align-items: center;
font-size: 14px;
height: 34px;
color: map-get($--transfer-item-text-color, 'default');
@include e(label) {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
padding-right: 4px;
}
@include e(checkbox) {
position: relative;
padding: 0 8px 0 14px;
@include b(checkbox) {
display: block;
}
}
@include m(disabled) {
color: map-get($--transfer-item-text-color, 'disabled');
cursor: not-allowed;
}
}
@include m(disabled) {
color: rgba(255, 255, 255, 0.25);
cursor: not-allowed;
}
@include m(selected) {
color: rgba(99, 226, 183, 1);
}
}
}
}
}
@include b(transfer-gap) {
width: 96px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@include b(transfer-button) {
width: 36px;
height: 36px;
border-radius: 18px;
cursor: pointer;
&:first-child {
margin-bottom: 12px;
}
@include e(icon) {
pointer-events: none;
fill: rgba(255, 255, 255, 0.3);
transition: fill .3s $default-cubic-bezier;
}
&:hover {
@include e(icon) {
fill: rgba(99, 226, 183, 1);
@include b(transfer-gap) {
width: 96px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
@include b(transfer-button) {
width: 36px;
height: 36px;
border-radius: 18px;
cursor: pointer;
&:first-child {
margin-bottom: 12px;
}
}
&:active {
@include e(icon) {
fill: rgba(77, 177, 153, 1);
pointer-events: none;
fill: map-get($--transfer-gap-button-background-color, 'default');
transition: fill .3s $default-cubic-bezier;
}
}
@include m(to) {
transform: rotate(180deg);
}
@include m(disabled) {
cursor: not-allowed;
@include e(icon) {
fill: rgba(255, 255, 255, .15)!important;
&:hover {
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'hover');
}
}
&:active {
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'active');
}
}
@include m(to) {
transform: rotate(180deg);
}
@include m(disabled) {
cursor: not-allowed;
@include e(icon) {
fill: map-get($--transfer-gap-button-background-color, 'disabled') !important;
}
}
}
}

2
styles/themes/dark/components/CheckBox.scss
View File

@ -6,5 +6,5 @@
$--checkbox-indeterminate-color: $--neutral-10 !global;
$--checkbox-disabled: $border-color !global;
$--checkbox-disabled-bg-color: rgba(255, 255, 255, 0.16) !global;
$--checkbox-icon-fill: black !global;
$--checkbox-icon-fill: $--n-background-color !global;
}

29
styles/themes/dark/components/Transfer.scss Normal file
View File

@ -0,0 +1,29 @@
@mixin setup-dark-transfer {
$--transfer-panel-background-color: (
'default': rgba(255, 255, 255, .1)
) !global;
$--transfer-panel-header-background-color: (
'default': rgba(255, 255, 255, .1)
) !global;
$--transfer-panel-header-text-color: (
'default': $--n-text-color
) !global;
$--transfer-panel-header-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--transfer-gap-button-background-color: (
'default': rgba(255, 255, 255, 0.3),
'disabled': rgba(255, 255, 255, .15),
'hover': $--primary-6,
'active': $--primary-7
) !global;
$--transfer-item-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--tranfer-item-lightbar-background-color: (
'default': change-color($--n-primary-color, $alpha: .3)
) !global;
$--transfer-panel-border-color: transparent !global;
}

2
styles/themes/dark/index.scss
View File

@ -38,6 +38,7 @@
@import "components/Tabs.scss";
@import "components/Statistic.scss";
@import "components/Breadcrumb.scss";
@import "components/Transfer.scss";
@mixin setup-dark-theme() {
@include setup-dark-colors();
@ -103,4 +104,5 @@
@include setup-dark-tabs;
@include setup-dark-statistic;
@include setup-dark-breadcrumb;
@include setup-dark-transfer;
}

30
styles/themes/light/components/Transfer.scss Normal file
View File

@ -0,0 +1,30 @@
@mixin setup-light-transfer {
$--transfer-panel-background-color: (
'default': $--n-background-color
) !global;
$--transfer-panel-header-background-color: (
'default': $--n-table-header-color
) !global;
$--transfer-panel-header-text-color: (
'default': $--n-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--transfer-panel-header-label-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--transfer-gap-button-background-color: (
'default': rgba(0, 0, 0, .2),
'disabled': rgba(0, 0, 0, .1),
'hover': $--primary-6,
'active': $--primary-7
) !global;
$--transfer-item-text-color: (
'default': $--n-secondary-text-color,
'disabled': $--n-disabled-text-color
) !global;
$--tranfer-item-lightbar-background-color: (
'default': change-color($--n-primary-color, $alpha: .2)
) !global;
$--transfer-panel-border-color: $--n-border-color !global;
}

3
styles/themes/light/index.scss
View File

@ -38,6 +38,7 @@
@import "components/Tabs.scss";
@import "components/Statistic.scss";
@import "components/Breadcrumb.scss";
@import "components/Transfer.scss";
@mixin setup-light-theme() {
@include setup-light-colors();
@ -53,6 +54,7 @@
$--n-divider-color: $--neutral-7 !global;
$--n-border-color: $--neutral-6 !global;
$--n-table-header-color: $--neutral-8 !global;
$--n-secondary-text-color: $--neutral-3 !global;
$--n-text-color: $--neutral-2 !global;
$--n-disabled-text-color: $--neutral-5 !global;
@ -99,4 +101,5 @@
@include setup-light-tabs;
@include setup-light-statistic;
@include setup-light-breadcrumb;
@include setup-light-transfer;
}