app/assets/stylesheets/pages_core/admin/components/attachments.css
.attachments {
margin-bottom: 40px;
& .drop-target {
position: relative;
width: 100%;
text-align: center;
line-height: 1.6;
margin-top: 20px;
&:first-child {
margin-top: 0px;
}
& .upload-button {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 150px;
background: var(--background-disabled-color);
}
}
& .attachment {
border-bottom: 1px solid var(--border-color);
padding: 16px 0px 16px 40px;
cursor: pointer;
background: #fff;
transition:
padding-left 50ms ease-in-out,
background 150ms ease-in-out;
& .attachment-info {
transition: all 50ms ease-in-out;
}
&.drop-placeholder {
font-size: 14px;
margin-top: -1px;
border-top: 1px solid var(--border-color);
background: var(--background-disabled-color);
text-align: center;
color: var(--text-light-color);
padding: 24px 0px;
}
&.uploading,
&.placeholder {
padding-left: 56px;
background: var(--background-disabled-color);
& .attachment-info {
opacity: 0.5;
}
& .actions {
display: none;
}
}
&:last-child {
margin-bottom: 0px;
}
& .actions {
float: right;
}
& h3 {
margin: 0px 0px 12px 0px;
& .icon {
display: block;
float: left;
margin-left: -40px;
font-size: 24px;
}
}
& p {
&:last-child {
margin-bottom: 0px;
}
}
& button {
cursor: pointer;
border: 1px solid var(--border-color);
border-radius: 3px;
background: var(--button-color);
padding: 5px 20px;
font-size: 12px;
color: var(--text-color);
&:hover,
&:focus {
background: #fff;
}
}
}
}
.attachment-editor {
width: 60vw;
min-height: 450px;
@media (--mobile) {
width: 100%;
height: 100%;
}
& form {
width: 100%;
& .buttons {
margin-top: 24px;
}
& .embed-code {
& input[type="text"] {
width: 50%;
max-width: 100px;
margin-right: 8px;
}
}
& textarea,
& input[type="text"] {
max-width: 100%;
&.description {
height: 100px;
}
}
}
}