// see https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/ .fileupload--preview { position: relative; float: left; width: 120px; height: 120px; margin-right: 16px; transition: all 0.5s ease; border: 1px solid $color-gray-lighter; background-repeat: no-repeat; background-position: left top; background-size: contain; p { position: absolute; top: 50%; left: 50%; padding: 8px; transform: translate(-50%, -50%); text-align: center; } video { display: none; } } .fileupload--preview--uploaded { animation: fadePreview 0.6s ease-out; border: 0; p { display: none; } video { display: block; } } @keyframes fadePreview { from { opacity: 0.01; } to { opacity: 1; } } .fileupload--dashboard { float: left; .control-label-wrap { float: left; } } .fileupload input { position: absolute; z-index: -1; overflow: hidden; width: 1px; // .1px didn't work so set minimum to 1px height: 1px; // .1px didn't work so set minimum to 1px opacity: 0; } .fileupload label.control-label { @extend .b-btn; @extend .p; font-weight: 300; margin-right: 20px; margin-bottom: 20px; cursor: pointer; /* "hand" cursor */ * { pointer-events: none; } // &.control-label--focus { // outline: 1px dotted #000; // outline: -webkit-focus-ring-color auto 5px; // } } // Override the real .from-group containing the input .fileupload .form-group { padding: 0; border: 0; } .fileupload--remove-image-btn { float: left; transition: all 0.3s ease; opacity: 1; } .fileupload--remove-image-btn--hidden { pointer-events: none; opacity: 0; } .fileupload--details { float: left; transition: opacity 0.3s ease-out; opacity: 1; } .fileupload--details--hidden { pointer-events: none; opacity: 0; width: 0; // Odd but needed, otherwise it occupies few transparent pixels... display: none; } .standard-form--video .fileupload--dimension { display: none; } .standard-form--image .fileupload--videolink { display: none; }