Viewing File: /home/maglabs/it/app/design/adminhtml/Magento/backend/web/css/source/components/_file-uploader.less
// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
//
// Components -> Single File Uploader
// _____________________________________________
//
// Variables
// ---------------------------------------------
@file-uploader-preview__border-color: @color-lighter-grayish;
@file-uploader-preview__background-color: @color-white;
@file-uploader-preview-focus__color: @color-blue2;
@file-uploader-document-icon__color: @color-gray80;
@file-uploader-document-icon__size: 7rem;
@file-uploader-document-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
@file-uploader-video-icon__color: @color-gray80;
@file-uploader-video-icon__size: 4rem;
@file-uploader-video-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
@file-uploader-placeholder-icon__color: @color-gray80;
@file-uploader-placeholder-icon__z-index: @data-grid-file-uploader-image__z-index + 1;
@file-uploader-delete-icon__color: @color-brownie;
@file-uploader-delete-icon__hover__color: @color-brownie-vanilla;
@file-uploader-delete-icon__font-size: 2rem;
@file-uploader-muted-text__color: @color-gray62;
@file-uploader-preview__width: 150px;
@file-uploader-preview__height: @file-uploader-preview__width;
@file-uploader-preview__opacity: .7;
@file-uploader-spinner-dimensions: 15px;
@file-uploader-dragover__background: @color-gray83;
@file-uploader-dragover-focus__color: @color-blue2;
// Grid uploader
@data-grid-file-uploader-image__size: 5rem;
@data-grid-file-uploader-image__z-index: 1;
@data-grid-file-uploader-menu-button__width: 2rem;
@data-grid-file-uploader-upload-icon__color: @color-darker-gray;
@data-grid-file-uploader-upload-icon__hover__color: @color-very-dark-gray;
@data-grid-file-uploader-upload-icon__line-height: 48px;
@data-grid-file-uploader-wrapper__size: @data-grid-file-uploader-image__size + 2rem;
//
// Single file uploader
// ---------------------------------------------
.file-uploader-area {
position: relative;
input[type='file'] {
cursor: pointer;
opacity: 0;
overflow: hidden;
position: absolute;
visibility: hidden;
width: 0;
&:focus {
+ .file-uploader-button {
box-shadow: 0 0 0 1px @file-uploader-preview-focus__color;
}
}
&:disabled {
+ .file-uploader-button {
cursor: default;
opacity: .5;
pointer-events: none;
}
}
}
}
.file-uploader-summary {
display: inline-block;
vertical-align: top;
}
.file-uploader-button {
cursor: pointer;
display: inline-block;
&._is-dragover {
background: @file-uploader-dragover__background;
border: 1px solid @file-uploader-preview-focus__color;
}
}
.file-uploader-spinner {
background-image: url('@{baseDir}images/loader-1.gif');
background-position: 50%;
background-repeat: no-repeat;
background-size: @file-uploader-spinner-dimensions;
display: none;
height: 30px;
margin-left: @indent__s;
vertical-align: top;
width: @file-uploader-spinner-dimensions;
}
.file-uploader-preview {
.action-remove {
&:extend(.abs-action-reset all);
.lib-icon-font (
@icon-delete__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: @file-uploader-delete-icon__font-size,
@_icon-font-color: @file-uploader-delete-icon__color,
@_icon-font-color-hover: @file-uploader-delete-icon__hover__color,
@_icon-font-text-hide: true,
@_icon-font-display: block
);
bottom: 4px;
cursor: pointer;
display: block;
height: 27px;
left: 6px;
position: absolute;
text-decoration: none;
width: 25px;
z-index: 2;
}
&:hover {
.preview-image img,
.preview-link:before {
opacity: @file-uploader-preview__opacity;
}
}
.preview-link {
display: block;
height: 100%;
}
.preview-image img {
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.preview-video {
.lib-icon-font(
@icon-video__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: @file-uploader-video-icon__size,
@_icon-font-color: @file-uploader-video-icon__color,
@_icon-font-color-hover: @file-uploader-video-icon__color
);
&:before {
left: 0;
margin-top: (-@file-uploader-video-icon__size / 2);
position: absolute;
right: 0;
top: 50%;
z-index: @file-uploader-video-icon__z-index;
}
}
.preview-document {
.lib-icon-font(
@icon-document__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: @file-uploader-document-icon__size,
@_icon-font-color: @file-uploader-document-icon__color,
@_icon-font-color-hover: @file-uploader-document-icon__color
);
&:before {
left: 0;
margin-top: (-@file-uploader-document-icon__size / 2);
position: absolute;
right: 0;
top: 50%;
z-index: @file-uploader-document-icon__z-index;
}
}
}
.file-uploader-preview,
.file-uploader-placeholder {
background: @file-uploader-preview__background-color;
border: 1px solid @file-uploader-preview__border-color;
box-sizing: border-box;
cursor: pointer;
display: block;
height: @file-uploader-preview__height;
line-height: 1;
margin: @indent__s @indent__m @indent__s 0;
overflow: hidden;
position: relative;
width: @file-uploader-preview__width;
}
.file-uploader {
&._loading {
.file-uploader-spinner {
display: inline-block;
}
}
.admin__field-note,
.admin__field-error {
margin-bottom: @indent__s;
}
.file-uploader-filename {
.lib-text-overflow();
max-width: @file-uploader-preview__width;
word-break: break-all;
&:first-child {
margin-bottom: @indent__s;
}
}
.file-uploader-meta {
color: @file-uploader-muted-text__color;
}
.admin__field-fallback-reset {
margin-left: @indent__s;
}
._keyfocus & .action-remove {
&:focus {
box-shadow: 0 0 0 1px @file-uploader-preview-focus__color;
}
}
}
// Placeholder for multiple uploader
.file-uploader-placeholder {
&.placeholder-document {
.lib-icon-font(
@icon-document__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: 5rem,
@_icon-font-color: @file-uploader-placeholder-icon__color,
@_icon-font-color-hover: @file-uploader-placeholder-icon__color
);
&:before {
left: 0;
position: absolute;
right: 0;
top: 20px;
z-index: @file-uploader-placeholder-icon__z-index;
}
}
&.placeholder-image {
.lib-icon-font(
@icon-camera__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: 5rem,
@_icon-font-color: @file-uploader-placeholder-icon__color,
@_icon-font-color-hover: @file-uploader-placeholder-icon__color
);
&:before {
left: 0;
position: absolute;
right: 0;
top: 20px;
z-index: @file-uploader-placeholder-icon__z-index;
}
}
&.placeholder-video {
.lib-icon-font(
@icon-video__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: 3rem,
@_icon-font-color: @file-uploader-placeholder-icon__color,
@_icon-font-color-hover: @file-uploader-placeholder-icon__color
);
&:before {
left: 0;
position: absolute;
right: 0;
top: 30px;
z-index: @file-uploader-placeholder-icon__z-index;
}
}
}
.file-uploader-placeholder-text {
bottom: 0;
color: @color-blue-dodger;
font-size: 1.1rem;
left: 0;
line-height: @line-height__base;
margin-bottom: 15%;
padding: 0 @indent__base;
position: absolute;
right: 0;
text-align: center;
}
//
// Grid image uploader
// ---------------------------------------------
.data-grid-file-uploader {
min-width: @data-grid-file-uploader-wrapper__size;
&._loading {
.file-uploader-spinner {
display: block;
}
.file-uploader-button {
&:before {
display: none;
}
}
}
.file-uploader-image {
background: transparent;
bottom: 0;
left: 0;
margin: auto;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
z-index: @data-grid-file-uploader-image__z-index;
+ .file-uploader-area {
.file-uploader-button {
&:before {
display: none;
}
}
}
}
.file-uploader-area {
z-index: @data-grid-file-uploader-image__z-index + 1;
}
.file-uploader-spinner {
height: 100%;
margin: 0;
position: absolute;
top: 0;
width: 100%;
}
.file-uploader-button {
display: block;
height: @data-grid-file-uploader-upload-icon__line-height;
text-align: center;
.lib-icon-font (
@icon-plus__content,
@_icon-font: @icons-admin__font-name,
@_icon-font-size: 1.3rem,
@_icon-font-line-height: @data-grid-file-uploader-upload-icon__line-height,
@_icon-font-color: @data-grid-file-uploader-upload-icon__color,
@_icon-font-color-hover: @data-grid-file-uploader-upload-icon__hover__color,
@_icon-font-text-hide: true,
@_icon-font-display: block
);
}
.action-select-wrap {
float: left;
.action-select {
border: 1px solid @file-uploader-preview__border-color;
display: block;
height: @data-grid-file-uploader-image__size;
margin-left: -1px;
padding: 0;
width: @data-grid-file-uploader-menu-button__width;
&:after {
border-color: @data-grid-file-uploader-upload-icon__color transparent transparent transparent;
left: 50%;
margin: 0 0 0 -5px;
}
&:hover {
&:after {
border-color: @data-grid-file-uploader-upload-icon__hover__color transparent transparent transparent;
}
}
> span {
display: none;
}
}
.action-menu {
left: 4rem;
right: auto;
z-index: @data-grid-file-uploader-image__z-index + 1;
}
}
}
.data-grid-file-uploader-inner {
border: 1px solid @file-uploader-preview__border-color;
float: left;
height: @data-grid-file-uploader-image__size;
position: relative;
width: @data-grid-file-uploader-image__size;
}
Back to Directory
File Manager