evo/evoleasing-account
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update for files list icon extension

Browse Source
This commit is contained in:
merelendor 2023-04-24 09:08:26 +03:00
parent c0ca0c0897
commit fdc9f4ae3c
3 changed files with 130 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/questionnaire/forms/FilesList.js
View File

@ -99,8 +99,9 @@ export default class FilesList extends React.Component
_renderFileType = (file) =>
{
return file.name.split(".").pop();
return file.name?.split(".")?.pop()?.toString()?.substr(0, 3);
}
render()
{
const { files, checking, title, maxFiles = 5, } = this.props;

65
css/var.css
View File

@ -426,9 +426,6 @@ div {
.extension[data-format] {
background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
position: relative;
min-height: 50px!important;
background-size: 50px!important;
padding-left: 58px!important;
}
.extension[data-format]:before {
content: attr(data-format);
@ -440,20 +437,18 @@ div {
bottom: 1px;
top: 0;
font-size: 10px;
width: 48px!important;
width: 35px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-transform: uppercase;
word-break: break-all;
text-align: center;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
.extension[data-format] {
padding-left: 56px;
background-size: 42px;
height: 50px!important;
}
.extension[data-format]:before {
width: 27px;
@ -466,12 +461,11 @@ div {
padding-left: 42px;
background-size: 32px;
background-position: 0 5px;
min-height: 58px!important;
}
.extension[data-format]:before {
font-size: 7px;
width: 24px;
height: 60px !important;
height: 42px;
line-height: 11px;
text-align: center;
left: 4px;
@ -576,3 +570,58 @@ div {
-webkit-user-select: none;
-ms-user-select: none;
}
.uploaded_extension[data-format] {
background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
position: relative;
min-height: 50px!important;
background-size: 50px!important;
padding-left: 58px!important;
}
.uploaded_extension[data-format]:before {
content: attr(data-format);
color: #fff;
font-weight: 700;
position: absolute;
left: 10px;
right: 1px;
bottom: 1px;
top: 0;
font-size: 10px;
width: 48px!important;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-transform: uppercase;
word-break: break-all;
text-align: center;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
.uploaded_extension[data-format] {
padding-left: 56px;
background-size: 42px;
height: 50px!important;
}
.uploaded_extension[data-format]:before {
width: 27px;
font-size: 8px;
left: 8px;
}
}
@media all and (max-width: 960px) {
.uploaded_extension[data-format] {
padding-left: 42px;
background-size: 32px;
background-position: 0 5px;
min-height: 58px!important;
}
.uploaded_extension[data-format]:before {
font-size: 7px;
width: 24px;
height: 60px !important;
line-height: 11px;
text-align: center;
left: 4px;
right: 5px;
}
}

87
css/var.less
View File

@ -453,9 +453,6 @@ div {
{
background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
position: relative;
min-height: 50px!important;
background-size: 50px!important;
padding-left: 58px!important;
&:before {
content: attr(data-format);
@ -467,20 +464,18 @@ div {
bottom: 1px;
top: 0;
font-size: 10px;
width: 48px!important;
width: 35px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-transform: uppercase;
word-break: break-all;
text-align: center;
word-break: break-all;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
padding-left: 56px;
background-size: 42px;
height: 50px!important;
&:before {
width: 27px;
@ -488,21 +483,20 @@ div {
left: 8px;
}
}
@media all and (max-width: 960px) {
padding-left: 42px;
background-size: 32px;
background-position: 0 5px;
min-height: 58px!important;
&:before {
font-size: 7px;
width: 24px;
height: 60px !important;
line-height: 11px;
text-align: center;
left: 4px;
right: 5px;
font-size: 7px;
width: 24px;
height: 42px;
line-height: 11px;
text-align: center;
left: 4px;
right: 5px;
}
}
}
@ -612,4 +606,65 @@ div {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}
.uploaded_extension
{
&[data-format]
{
background: url("/assets/images/icons/icon-file.svg") no-repeat left center;
position: relative;
min-height: 50px!important;
background-size: 50px!important;
padding-left: 58px!important;
&:before {
content: attr(data-format);
color: #fff;
font-weight: 700;
position: absolute;
left: 10px;
right: 1px;
bottom: 1px;
top: 0;
font-size: 10px;
width: 48px!important;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
text-transform: uppercase;
word-break: break-all;
text-align: center;
}
@media all and (max-width: 1600px) and (min-width: 1280px) {
padding-left: 56px;
background-size: 42px;
height: 50px!important;
&:before {
width: 27px;
font-size: 8px;
left: 8px;
}
}
@media all and (max-width: 960px) {
padding-left: 42px;
background-size: 32px;
background-position: 0 5px;
min-height: 58px!important;
&:before {
font-size: 7px;
width: 24px;
height: 60px !important;
line-height: 11px;
text-align: center;
left: 4px;
right: 5px;
}
}
}
}