mirror of
https://github.com/tusen-ai/naive-ui.git
synced 2025-03-13 13:59:04 +08:00
style(upload): split theme vars
This commit is contained in:
07akioni
parent
eeb0a66ba8
commit
e002a97c47
@ -2,64 +2,68 @@
|
||||
|
||||
@include themes-mixin {
|
||||
@include b(upload) {
|
||||
@include m(dragger-inside) {
|
||||
@include e(activator) {
|
||||
@include once {
|
||||
@include e(file-input) {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@include m(disabled) {
|
||||
opacity: .4;
|
||||
@include e(activator) {
|
||||
cursor: not-allowed;
|
||||
display: inline-block;
|
||||
}
|
||||
@include b(upload-file-list) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
@include m(drag-over) {
|
||||
@include b(upload-dragger) {
|
||||
border-color: $--n-primary-color;
|
||||
@include m(dragger-inside) {
|
||||
@include e(activator) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include b(upload-dragger) {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
background-color: $--n-action-background-color;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
border: 1px dashed $--n-border-color;
|
||||
padding: 24px;
|
||||
transition: border-color .3s $--n-ease-in-out-cubic-bezier, background-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
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: $--n-primary-color;
|
||||
border-color: map-get($--upload-dragger-border-color, 'hover');
|
||||
}
|
||||
}
|
||||
@include e(file-input) {
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
@include e(activator) {
|
||||
display: inline-block;
|
||||
}
|
||||
@include b(upload-file-list) {
|
||||
margin-top: 8px;
|
||||
line-height: 1.5;
|
||||
@include once {
|
||||
margin-top: 8px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
@include b(upload-file) {
|
||||
@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: 6px;
|
||||
@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: 6px;
|
||||
@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 b(upload-file-info) {
|
||||
@include e(action) {
|
||||
opacity: 1;
|
||||
@include once {
|
||||
@include b(upload-file-info) {
|
||||
@include e(action) {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -69,80 +73,100 @@
|
||||
}
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
color: $--n-error-color;
|
||||
color: map-get($--upload-info-text-color, 'error');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(success-status) {
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
color: $--n-success-color;
|
||||
color: map-get($--upload-info-text-color, 'success');
|
||||
}
|
||||
}
|
||||
}
|
||||
@include m(with-url) {
|
||||
cursor: pointer;
|
||||
@include once {
|
||||
cursor: pointer;
|
||||
}
|
||||
@include b(upload-file-info) {
|
||||
@include e(name) {
|
||||
color: $--n-success-color;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: $--n-success-color;
|
||||
@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) {
|
||||
position: relative;
|
||||
padding-top: 6px;
|
||||
padding-bottom: 6px;
|
||||
@include e(name) {
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
text-decoration: underline;
|
||||
text-decoration-color: transparent;
|
||||
@include b(icon) {
|
||||
font-size: 18px;
|
||||
margin-right: 2px;
|
||||
fill: $--n-tertiary-text-color;
|
||||
stroke: $--n-tertiary-text-color;
|
||||
vertical-align: middle;
|
||||
}
|
||||
font-size: 14px;
|
||||
color: $--n-secondary-text-color;
|
||||
transition:
|
||||
color .3s $--n-ease-in-out-cubic-bezier,
|
||||
text-decoration-color .3s $--n-ease-in-out-cubic-bezier;
|
||||
}
|
||||
@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 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 b(progress) {
|
||||
@include fade-in-height-expand-transition($fold-padding: true);
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
}
|
||||
@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');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,6 +1,22 @@
|
||||
@mixin setup-dark-upload {
|
||||
$--uploadd-file-item-background-color: (
|
||||
$--upload-file-item-background-color: (
|
||||
'hover': change-color($--n-primary-color, $alpha: .15),
|
||||
'error-hover': change-color($--n-error-color, $alpha: .15)
|
||||
) !global;
|
||||
$--upload-dragger-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'hover': $--n-primary-color
|
||||
) !global;
|
||||
$--upload-dragger-background-color: (
|
||||
'default': $--n-action-background-color
|
||||
) !global;
|
||||
$--upload-info-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'error': $--n-error-color,
|
||||
'success': $--n-success-color
|
||||
) !global;
|
||||
$--upload-info-icon-color: (
|
||||
'default': $--n-icon-color
|
||||
) !global;
|
||||
$--upload-disabled-opacity: $--n-disabled-opacity !global;
|
||||
}
|
||||
@ -3,4 +3,20 @@
|
||||
'hover': change-color($--n-primary-color, $alpha: .1),
|
||||
'error-hover': change-color($--n-error-color, $alpha: .1)
|
||||
) !global;
|
||||
$--upload-dragger-border-color: (
|
||||
'default': $--n-border-color,
|
||||
'hover': $--n-primary-color
|
||||
) !global;
|
||||
$--upload-dragger-background-color: (
|
||||
'default': $--n-action-background-color
|
||||
) !global;
|
||||
$--upload-info-text-color: (
|
||||
'default': $--n-secondary-text-color,
|
||||
'error': $--n-error-color,
|
||||
'success': $--n-success-color
|
||||
) !global;
|
||||
$--upload-info-icon-color: (
|
||||
'default': $--n-icon-color
|
||||
) !global;
|
||||
$--upload-disabled-opacity: $--n-disabled-opacity !global;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user