mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-01-18 12:34:25 +08:00
feat(upload): css in js (#308)
This commit is contained in:
Jiwen Bai
07akioni
parent
a296a34144
commit
02c4d519e8
@ -1,9 +0,0 @@
|
||||
import Upload from './src/Upload.vue'
|
||||
import UploadDragger from './src/UploadDragger.vue'
|
||||
|
||||
Upload.install = function (app, naive) {
|
||||
app.component(Upload.name + naive.componentPrefix, Upload)
|
||||
app.component(UploadDragger.name + naive.componentPrefix, UploadDragger)
|
||||
}
|
||||
|
||||
export default Upload
|
||||
@ -1,173 +1,181 @@
|
||||
@import 'mixins/mixins.scss';
|
||||
// @import 'mixins/mixins.scss';
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(upload) {
|
||||
@include once {
|
||||
@include e(file-input) {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
@include e(activator) {
|
||||
display: inline-block;
|
||||
}
|
||||
@include m(dragger-inside) {
|
||||
@include e(activator) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(upload-dragger) {
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: $--n-upload-border-radius;
|
||||
padding: 24px;
|
||||
transition:
|
||||
border-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
background-color: map-get($--upload-dragger-background-color, 'default');
|
||||
border: 1px dashed map-get($--upload-dragger-border-color, 'default');
|
||||
&:hover {
|
||||
border-color: map-get($--upload-dragger-border-color, 'hover');
|
||||
}
|
||||
}
|
||||
@include b(upload-file-list) {
|
||||
@include once {
|
||||
margin-top: 8px;
|
||||
line-height: 1.75;
|
||||
}
|
||||
@include b(upload-file) {
|
||||
@include once {
|
||||
@include fade-in-height-expand-transition;
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
padding: 0px 12px 0 6px;
|
||||
transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
border-radius: $--n-upload-border-radius;
|
||||
@include b(progress) {
|
||||
@include fade-in-height-expand-transition($fold-padding: true);
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: map-get($--upload-file-item-background-color, 'hover');
|
||||
@include once {
|
||||
@include b(upload-file-info) {
|
||||
@include e(action) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(error-status) {
|
||||
&:hover {
|
||||
background-color: map-get($--upload-file-item-background-color, 'error-hover');
|
||||
}
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
color: map-get($--upload-info-text-color, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(success-status) {
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
color: map-get($--upload-info-text-color, 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(with-url) {
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
@include once {
|
||||
text-decoration: underline;
|
||||
}
|
||||
color: map-get($--upload-info-text-color, 'success');
|
||||
text-decoration-color: map-get($--upload-info-text-color, 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(upload-file-info) {
|
||||
@include once {
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
@include e(action) {
|
||||
padding-top: inherit;
|
||||
padding-bottom: inherit;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s $--n-ease-in-out-cubic-bezier;
|
||||
flex-direction: row-reverse;
|
||||
opacity: 0;
|
||||
@include b(button) {
|
||||
&:not(:first-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
@include b(icon) {
|
||||
svg {
|
||||
@include icon-switch-transition;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include e(name) {
|
||||
@include once {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
font-size: 14px;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
@include b(icon) {
|
||||
@include once {
|
||||
font-size: 18px;
|
||||
margin-right: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
fill: map-get($--upload-info-icon-color, 'default');
|
||||
stroke: map-get($--upload-info-icon-color, 'default');
|
||||
}
|
||||
color: map-get($--upload-info-text-color, 'default');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
opacity: $--upload-disabled-opacity;
|
||||
@include once {
|
||||
@include e(activator) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@include b(upload-file-list) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(drag-over) {
|
||||
@include b(upload-dragger) {
|
||||
border-color: map-get($--upload-dragger-border-color, 'hover');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// @include themes-mixin {
|
||||
// @include b(upload) {
|
||||
// @include once {
|
||||
// @include e(file-input) {
|
||||
// display: block;
|
||||
// width: 0;
|
||||
// height: 0;
|
||||
// opacity: 0;
|
||||
// }
|
||||
// @include e(activator) {
|
||||
// display: inline-block;
|
||||
// }
|
||||
// @include m(dragger-inside) {
|
||||
// @include e(activator) {
|
||||
// display: block;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(upload-dragger) {
|
||||
// @include once {
|
||||
// cursor: pointer;
|
||||
// box-sizing: border-box;
|
||||
// width: 100%;
|
||||
// text-align: center;
|
||||
// border-radius: $--n-upload-border-radius;
|
||||
// padding: 24px;
|
||||
// transition:
|
||||
// border-color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// // ?
|
||||
// background-color: map-get($--upload-dragger-background-color, 'default');
|
||||
// border: 1px dashed map-get($--upload-dragger-border-color, 'default');
|
||||
// &:hover {
|
||||
// border-color: map-get($--upload-dragger-border-color, 'hover');
|
||||
// }
|
||||
// // ?
|
||||
// }
|
||||
// @include b(upload-file-list) {
|
||||
// @include once {
|
||||
// margin-top: 8px;
|
||||
// line-height: 1.75;
|
||||
// }
|
||||
// @include b(upload-file) {
|
||||
// @include once {
|
||||
// // ?
|
||||
// @include fade-in-height-expand-transition;
|
||||
// display: block;
|
||||
// box-sizing: border-box;
|
||||
// cursor: default;
|
||||
// padding: 0px 12px 0 6px;
|
||||
// transition: background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// border-radius: $--n-upload-border-radius;
|
||||
// @include b(progress) {
|
||||
// // ?
|
||||
// @include fade-in-height-expand-transition($fold-padding: true);
|
||||
// box-sizing: border-box;
|
||||
// padding-bottom: 6px;
|
||||
// margin-bottom: 6px;
|
||||
// }
|
||||
// }
|
||||
// &:hover {
|
||||
// // ?
|
||||
// background-color: map-get($--upload-file-item-background-color, 'hover');
|
||||
// @include once {
|
||||
// @include b(upload-file-info) {
|
||||
// @include e(action) {
|
||||
// opacity: 1;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// // ?
|
||||
// @include m(error-status) {
|
||||
// &:hover {
|
||||
// background-color: map-get($--upload-file-item-background-color, 'error-hover');
|
||||
// }
|
||||
// @include b(upload-file-info) {
|
||||
// @include e(name) {
|
||||
// color: map-get($--upload-info-text-color, 'error');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(success-status) {
|
||||
// @include b(upload-file-info) {
|
||||
// @include e(name) {
|
||||
// color: map-get($--upload-info-text-color, 'success');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// // ?
|
||||
// @include m(with-url) {
|
||||
// @include once {
|
||||
// cursor: pointer;
|
||||
// }
|
||||
// @include b(upload-file-info) {
|
||||
// @include e(name) {
|
||||
// @include once {
|
||||
// text-decoration: underline;
|
||||
// }
|
||||
// color: map-get($--upload-info-text-color, 'success');
|
||||
// text-decoration-color: map-get($--upload-info-text-color, 'success');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include b(upload-file-info) {
|
||||
// @include once {
|
||||
// position: relative;
|
||||
// padding-top: 6px;
|
||||
// padding-bottom: 6px;
|
||||
// @include e(action) {
|
||||
// padding-top: inherit;
|
||||
// padding-bottom: inherit;
|
||||
// position: absolute;
|
||||
// right: 0;
|
||||
// top: 0;
|
||||
// bottom: 0;
|
||||
// width: 80px;
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// transition: opacity .2s $--n-ease-in-out-cubic-bezier;
|
||||
// flex-direction: row-reverse;
|
||||
// opacity: 0;
|
||||
// @include b(button) {
|
||||
// // ?
|
||||
// &:not(:first-child) {
|
||||
// margin-right: 8px;
|
||||
// }
|
||||
// @include b(icon) {
|
||||
// svg {
|
||||
// @include icon-switch-transition;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include e(name) {
|
||||
// @include once {
|
||||
// text-overflow: ellipsis;
|
||||
// overflow: hidden;
|
||||
// text-decoration: underline;
|
||||
// text-decoration-color: transparent;
|
||||
// font-size: 14px;
|
||||
// transition:
|
||||
// color .3s $--n-ease-in-out-cubic-bezier,
|
||||
// text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
// }
|
||||
// @include b(icon) {
|
||||
// @include once {
|
||||
// font-size: 18px;
|
||||
// margin-right: 2px;
|
||||
// vertical-align: middle;
|
||||
// }
|
||||
// fill: map-get($--upload-info-icon-color, 'default');
|
||||
// stroke: map-get($--upload-info-icon-color, 'default');
|
||||
// }
|
||||
// color: map-get($--upload-info-text-color, 'default');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(disabled) {
|
||||
// opacity: $--upload-disabled-opacity;
|
||||
// @include once {
|
||||
// @include e(activator) {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// @include b(upload-file-list) {
|
||||
// cursor: not-allowed;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// @include m(drag-over) {
|
||||
// @include b(upload-dragger) {
|
||||
// border-color: map-get($--upload-dragger-border-color, 'hover');
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
@ -67,7 +67,7 @@ import Tooltip from './tooltip'
|
||||
import Transfer from './transfer'
|
||||
import Tree from './tree'
|
||||
import Typography from './typography'
|
||||
import Upload from './Upload'
|
||||
import Upload from './upload'
|
||||
import zhCN from './locale/zhCN'
|
||||
import enUS from './locale/enUS'
|
||||
|
||||
@ -192,6 +192,8 @@ import tableLightStyle from './table/styles/light'
|
||||
import tableDarkStyle from './table/styles/dark'
|
||||
import popoverLightStyle from './popover/styles/light'
|
||||
import popoverDarkStyle from './popover/styles/dark'
|
||||
import uploadLightStyle from './upload/styles/light'
|
||||
import uploadDarkStyle from './upload/styles/dark'
|
||||
import descriptionsLightStyle from './descriptions/styles/light'
|
||||
import descriptionsDarkStyle from './descriptions/styles/dark'
|
||||
|
||||
@ -415,6 +417,8 @@ export default create({
|
||||
tableDarkStyle,
|
||||
popoverLightStyle,
|
||||
popoverDarkStyle,
|
||||
uploadLightStyle,
|
||||
uploadDarkStyle,
|
||||
descriptionsLightStyle,
|
||||
descriptionsDarkStyle,
|
||||
// Can be remove after refactoring
|
||||
|
||||
9
src/upload/index.js
Normal file
9
src/upload/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import Upload from './src/Upload.vue'
|
||||
import UploadDragger from './src/UploadDragger.vue'
|
||||
|
||||
Upload.install = function (Vue, naive) {
|
||||
Vue.component(naive.componentPrefix + Upload.name, Upload)
|
||||
Vue.component(naive.componentPrefix + UploadDragger.name, UploadDragger)
|
||||
}
|
||||
|
||||
export default Upload
|
||||
@ -41,6 +41,8 @@
|
||||
import withapp from '../../_mixins/withapp'
|
||||
import themeable from '../../_mixins/themeable'
|
||||
import NUploadFile from './UploadFile'
|
||||
import usecssr from '../../_mixins/usecssr'
|
||||
import styles from './styles'
|
||||
|
||||
function createId () {
|
||||
return Math.random()
|
||||
@ -167,7 +169,7 @@ export default {
|
||||
NUpload: this
|
||||
}
|
||||
},
|
||||
mixins: [ withapp, themeable ],
|
||||
mixins: [ withapp, themeable, usecssr(styles) ],
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
@ -302,8 +304,8 @@ export default {
|
||||
this.dragOver = false
|
||||
},
|
||||
handleActivatorDrop (e) {
|
||||
if (!this.draggerInside || this.disabled) return
|
||||
e.preventDefault()
|
||||
if (!this.draggerInside || this.disabled) return
|
||||
const dataTransfer = e.dataTransfer
|
||||
const files = dataTransfer.files || []
|
||||
this.handleFileAddition(files)
|
||||
9
src/upload/src/styles/index.js
Normal file
9
src/upload/src/styles/index.js
Normal file
@ -0,0 +1,9 @@
|
||||
import baseStyle from './themed-base.cssr.js'
|
||||
|
||||
export default [
|
||||
{
|
||||
key: 'syntheticTheme',
|
||||
watch: ['syntheticTheme'],
|
||||
CNode: baseStyle
|
||||
}
|
||||
]
|
||||
222
src/upload/src/styles/themed-base.cssr.js
Normal file
222
src/upload/src/styles/themed-base.cssr.js
Normal file
@ -0,0 +1,222 @@
|
||||
import { c, cM, cTB, cB, cE } from '../../../_utils/cssr'
|
||||
import fadeInHeightExpand from '../../../styles/_transitions/fade-in-height-expand'
|
||||
import createIconSwitchTransition from '../../../styles/_transitions/icon-switch'
|
||||
|
||||
export default c([
|
||||
({ props }) => {
|
||||
const {
|
||||
easeInOutCubicBezier,
|
||||
borderRadius
|
||||
} = props.$base
|
||||
const {
|
||||
uploadDraggerBackgroundColor,
|
||||
uploadDraggerBorderColorHover,
|
||||
uploadFileItemBackgroundColorHover,
|
||||
uploadFileItemBackgroundColorErrorHover,
|
||||
uploadInfoTextColorError,
|
||||
uploadInfoTextColorSuccess,
|
||||
uploadInfoTextColor,
|
||||
uploadInfoIconColor,
|
||||
uploadDisabledOpacity,
|
||||
uploadDraggerBorderColor
|
||||
} = props.$local
|
||||
const iconSwitchTransition = createIconSwitchTransition()
|
||||
|
||||
return cTB('upload', [
|
||||
cE('file-input', {
|
||||
raw: `
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
`
|
||||
}),
|
||||
cE('activator', {
|
||||
raw: `
|
||||
display: inline-block;
|
||||
`
|
||||
}),
|
||||
cM('dragger-inside', [
|
||||
cE('activator', {
|
||||
raw: `
|
||||
display: block;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('upload-dragger', {
|
||||
raw: `
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: ${borderRadius};
|
||||
padding: 24px;
|
||||
transition:
|
||||
border-color .3s ${easeInOutCubicBezier},
|
||||
background-color .3s ${easeInOutCubicBezier};
|
||||
background-color: ${uploadDraggerBackgroundColor};
|
||||
border: 1px dashed ${uploadDraggerBorderColor};
|
||||
`
|
||||
}, [
|
||||
c('&:hover', {
|
||||
raw: `
|
||||
border-color:${uploadDraggerBorderColorHover};
|
||||
`
|
||||
})
|
||||
]),
|
||||
cB('upload-file-list', {
|
||||
raw: `
|
||||
margin-top: 8px;
|
||||
line-height: 1.75;
|
||||
`
|
||||
}, [
|
||||
cB('upload-file', {
|
||||
raw: `
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
padding: 0px 12px 0 6px;
|
||||
transition: background-color .3s ${easeInOutCubicBezier};
|
||||
border-radius: ${borderRadius};
|
||||
`
|
||||
}, [
|
||||
fadeInHeightExpand(),
|
||||
cB('progress', {
|
||||
raw: `
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
`
|
||||
}, [
|
||||
fadeInHeightExpand({
|
||||
foldPadding: true
|
||||
})
|
||||
]),
|
||||
c('&:hover', {
|
||||
raw: `
|
||||
background-color: ${uploadFileItemBackgroundColorHover};
|
||||
`
|
||||
}, [
|
||||
cB('upload-file-info', [
|
||||
cE('action', {
|
||||
raw: `
|
||||
opacity: 1;
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('error-status', [
|
||||
c('&:hover', {
|
||||
raw: `
|
||||
background-color: ${uploadFileItemBackgroundColorErrorHover};
|
||||
`
|
||||
}),
|
||||
cB('upload-file-info', [
|
||||
cE('name', {
|
||||
raw: `color: ${uploadInfoTextColorError}`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cM('with-url', {
|
||||
raw: `
|
||||
cursor: pointer;
|
||||
`
|
||||
}, [
|
||||
cB('upload-file-info', [
|
||||
cE('name', {
|
||||
raw: `
|
||||
text-decoration: underline;
|
||||
color: ${uploadInfoTextColorSuccess};
|
||||
text-decoration-color: ${uploadInfoTextColorSuccess};
|
||||
`
|
||||
})
|
||||
])
|
||||
]),
|
||||
cB('upload-file-info', {
|
||||
raw: `
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
`
|
||||
}, [
|
||||
cE('action', {
|
||||
raw: `
|
||||
padding-top: inherit;
|
||||
padding-bottom: inherit;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 80px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition: opacity .2s ${easeInOutCubicBezier};
|
||||
flex-direction: row-reverse;
|
||||
opacity: 0;
|
||||
`
|
||||
}, [
|
||||
cB('button', [
|
||||
cB('icon', [
|
||||
c('svg', [
|
||||
iconSwitchTransition
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cE('name', {
|
||||
raw: `
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
font-size: 14px;
|
||||
transition:
|
||||
color .3s ${easeInOutCubicBezier},
|
||||
text-decoration-color .3s ${easeInOutCubicBezier};
|
||||
color: ${uploadInfoTextColor};
|
||||
`
|
||||
}, [
|
||||
cB('icon', {
|
||||
raw: `
|
||||
font-size: 18px;
|
||||
margin-right: 2px;
|
||||
vertical-align: middle;
|
||||
fill: ${uploadInfoIconColor};
|
||||
stroke: ${uploadInfoIconColor};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
])
|
||||
]),
|
||||
cM('disabled', {
|
||||
raw: `
|
||||
opacity: ${uploadDisabledOpacity}
|
||||
`
|
||||
}, [
|
||||
cE('activator', {
|
||||
raw: `
|
||||
cursor: not-allowed;
|
||||
`
|
||||
}),
|
||||
cB('upload-file-list', {
|
||||
raw: `
|
||||
cursor: not-allowed;
|
||||
`
|
||||
}),
|
||||
cB('upload-dragger', {
|
||||
raw: `
|
||||
cursor: not-allowed;
|
||||
`
|
||||
})
|
||||
]),
|
||||
cM('drag-over', [
|
||||
cB('upload-dragger', {
|
||||
raw: `
|
||||
border-color: ${uploadDraggerBorderColorHover};
|
||||
`
|
||||
})
|
||||
])
|
||||
])
|
||||
}
|
||||
])
|
||||
36
src/upload/styles/dark.js
Normal file
36
src/upload/styles/dark.js
Normal file
@ -0,0 +1,36 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
name: 'Upload',
|
||||
theme: 'dark',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
iconOverlayColor,
|
||||
primaryColor,
|
||||
errorColor,
|
||||
secondaryTextColor,
|
||||
successColor,
|
||||
disabledOpacity,
|
||||
actionBackgroundOverlayColor,
|
||||
borderColor
|
||||
} = derived
|
||||
|
||||
return {
|
||||
uploadDraggerBackgroundColor: actionBackgroundOverlayColor,
|
||||
uploadDraggerBorderColor: borderColor,
|
||||
uploadDraggerBorderColorHover: primaryColor,
|
||||
uploadFileItemBackgroundColorHover: changeColor(primaryColor, {
|
||||
alpha: 0.15
|
||||
}),
|
||||
uploadFileItemBackgroundColorErrorHover: changeColor(errorColor, {
|
||||
alpha: 0.15
|
||||
}),
|
||||
uploadInfoTextColor: secondaryTextColor,
|
||||
uploadInfoTextColorError: errorColor,
|
||||
uploadInfoTextColorSuccess: successColor,
|
||||
uploadInfoIconColor: iconOverlayColor,
|
||||
uploadDisabledOpacity: disabledOpacity
|
||||
}
|
||||
}
|
||||
})
|
||||
36
src/upload/styles/light.js
Normal file
36
src/upload/styles/light.js
Normal file
@ -0,0 +1,36 @@
|
||||
import create from '../../styles/_utils/create-component-base'
|
||||
import { changeColor } from '../../_utils/color'
|
||||
|
||||
export default create({
|
||||
name: 'Upload',
|
||||
theme: 'light',
|
||||
getDerivedVariables ({ base, derived }) {
|
||||
const {
|
||||
iconOverlayColor,
|
||||
primaryColor,
|
||||
errorColor,
|
||||
secondaryTextColor,
|
||||
successColor,
|
||||
disabledOpacity,
|
||||
actionBackgroundOverlayColor,
|
||||
borderColor
|
||||
} = derived
|
||||
|
||||
return {
|
||||
uploadDraggerBackgroundColor: actionBackgroundOverlayColor,
|
||||
uploadDraggerBorderColor: borderColor,
|
||||
uploadDraggerBorderColorHover: primaryColor,
|
||||
uploadFileItemBackgroundColorHover: changeColor(primaryColor, {
|
||||
alpha: 0.1
|
||||
}),
|
||||
uploadFileItemBackgroundColorErrorHover: changeColor(errorColor, {
|
||||
alpha: 0.1
|
||||
}),
|
||||
uploadInfoTextColor: secondaryTextColor,
|
||||
uploadInfoTextColorError: errorColor,
|
||||
uploadInfoTextColorSuccess: successColor,
|
||||
uploadInfoIconColor: iconOverlayColor,
|
||||
uploadDisabledOpacity: disabledOpacity
|
||||
}
|
||||
}
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user