CodeMirror/appwrite
1
0
Fork 0
mirror of synced 2024-06-29 19:50:26 +12:00
Code Issues Projects Releases Wiki Activity

Style fix for upload-box:

Browse source 
- Fixed size width box
- trim text for file name (if long)
- pill falied - fix alignment
- add auto content scroll if there are many files
- color of precent being updated
This commit is contained in:
Elad Shechter 2022-02-21 12:16:17 +00:00
parent 9f60627040
commit f62fa543e4
3 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
public/dist/styles/default-ltr.css vendored
View file

File diff suppressed because one or more lines are too long

2
public/dist/styles/default-rtl.css vendored
View file

File diff suppressed because one or more lines are too long

14
public/styles/comps/upload-box.less
View file

@ -31,21 +31,22 @@
}
&-content {
background-color:var(--p-content-bg-color); color:var(--p-content-text-color);
height:0; overflow:hidden;
height:0; overflow:auto;
transition:var(--transition);
&.is-open {height:200px; /* consider to change to rem */}
}
&-list {}
&-item {
display:flex; padding:13px 20px;
.file-name { @include trim; align-self:center; margin-inline-end:auto; }
display:flex; align-items:center; padding:13px 20px;
.file-name {text-overflow:ellipsis; white-space:nowrap; overflow:hidden; align-self:center; margin-inline-end:auto; line-height:normal; }
.icon-button{ align-self:center; margin-inline-start:16px;}
.pill{margin-inline-start:8px;}
&:not(:last-child) { border-bottom:solid 1px var(--p-border-color); }
}
/* responsive */
@media @phones { inset-inline:16px; inset-block-end:20px; }
@media @tablets, @desktops { inset-inline-end:24px; inset-block-end:24px; }
@media @tablets, @desktops { max-width:285px; inset-inline-end:24px; inset-block-end:24px; }
/* dark theme */
:root .theme-dark &{
@ -58,9 +59,9 @@
@upload-image-size-default: 40px;
--p-upload-image-size:var(--upload-image-size, @upload-image-size-default);
--p-upload-bg-color:var(--config-color-fade-super);
--p-upload-icon-color:var(--config-color-fade-light);
--p-upload-icon-color:var(--config-color-fade);
position:relative; display:grid; place-content:center;
position:relative; display:grid; place-content:center; flex-shrink:0;
width:var(--p-upload-image-size);
height:var(--p-upload-image-size);
background-color:var(--p-upload-bg-color);
@ -86,7 +87,6 @@
hsl(var(--zero-value)) 100%)";
}
&.is-finished {
--p-upload-icon-color:var(--config-color-fade);
.progress{ display:none; }
}
/* dark theme */