162 lines
2.6 KiB
SCSS
162 lines
2.6 KiB
SCSS
div.file-upload-widget {
|
||
div.file-button {
|
||
background-position: center center;
|
||
background-repeat: no-repeat;
|
||
background-size: 0;
|
||
div.widget-message::after,
|
||
div.widget-message::before {
|
||
color: #7f7f7f;
|
||
}
|
||
}
|
||
&.has-file div.file-button {
|
||
background-image: linear-gradient(rgba(250, 250, 250, 0.8), rgba(250, 250, 250, 0.8)), var(--image-preview-url);
|
||
background-size: contain;
|
||
}
|
||
div.file-button.file-image {
|
||
div.widget-message {
|
||
&::after {
|
||
content: none;
|
||
}
|
||
&::before {
|
||
content: "";
|
||
background: url(img/photo-add.png) 50% 0px no-repeat;
|
||
height: 70px;
|
||
}
|
||
&.upload-done {
|
||
background-color: transparent;
|
||
padding-top: 30px;
|
||
}
|
||
}
|
||
}
|
||
&.has-file div.file-button.file-image {
|
||
div.widget-message::before {
|
||
background-image: url(img/photo-done.png);
|
||
}
|
||
}
|
||
div.fileinfo a.remove::before {
|
||
color: $red;
|
||
}
|
||
div.fileprogress {
|
||
.bar {
|
||
background: $red;
|
||
}
|
||
}
|
||
}
|
||
div.xtemplate-photo {
|
||
div.hint {
|
||
display: none;
|
||
}
|
||
div.content {
|
||
border: 1px dashed #7f7f7f;
|
||
height: 200px;
|
||
position: relative;
|
||
text-align: center;
|
||
background: url(img/photo-add.png) 50% 50px no-repeat;
|
||
input {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
opacity: 0.001;
|
||
margin: 0;
|
||
cursor: pointer;
|
||
}
|
||
div.fileprogress {
|
||
position: absolute;
|
||
border: none;
|
||
overflow: hidden;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
}
|
||
}
|
||
.widget-message {
|
||
position: absolute;
|
||
width: 100%;
|
||
top: 130px;
|
||
}
|
||
.upload-done {
|
||
display: none;
|
||
}
|
||
&.has-file {
|
||
div.content {
|
||
background-image: url(img/photo-done.png);
|
||
padding-bottom: 0;
|
||
border-bottom: 5px solid $red;
|
||
}
|
||
.click-to-upload {
|
||
display: none;
|
||
}
|
||
.upload-done {
|
||
display: block;
|
||
}
|
||
}
|
||
&.has-no-file {
|
||
.click-to-upload {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
div.fileinfo {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
height: 100%;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
.filename {
|
||
display: none;
|
||
}
|
||
text-align: center;
|
||
img {
|
||
height: 100%;
|
||
}
|
||
a.remove {
|
||
display: block;
|
||
text-indent: -10000px;
|
||
top: 0;
|
||
right: 0;
|
||
position: absolute;
|
||
&::before {
|
||
content: "×";
|
||
text-indent: 0;
|
||
display: block;
|
||
}
|
||
}
|
||
}
|
||
&.widget-readonly.has-file {
|
||
.widget-message {
|
||
display: none;
|
||
}
|
||
}
|
||
&.widget-readonly.has-no-file {
|
||
display: none;
|
||
}
|
||
|
||
}
|
||
|
||
input[readonly], select[readonly], textarea[readonly] {
|
||
background: white;
|
||
border: $widget-border;
|
||
border-top-width: 0;
|
||
border-left-width: 0;
|
||
border-right-width: 0;
|
||
}
|
||
|
||
div.buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
.cancel-button {
|
||
}
|
||
.previous-button {
|
||
order: 0;
|
||
}
|
||
.submit-button {
|
||
order: 1;
|
||
button {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
}
|