.form__group { width: 100%; padding: 0px; } .form__file { position: relative; display: block; font-size: 1em; font-family: 'Open Sans', Helvetica, Arial, sans-serif; background-color: #fff; color: #000; width: 100%; border: 1px solid #ccc; border-bottom-color: #b3b3b3; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.15); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15); box-shadow: 0 2px 4px rgba(0,0,0,0.15); cursor: pointer; transition: all 0.3s; } .form__file:hover { -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.075); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.075); box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 1px rgba(0,0,0,0.075); } .form__file:active { border-color: #4776e6; } .form__file:after { display: block; position: absolute; top: 0; right: 47px; bottom: 0; color: #fff; text-align: center; content: ' '; border-left: 1px solid #ddd; } .form__file-filename { display: block; color: inherit; opacity: 0.7; width: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; height: 48px; line-height: 48px; padding: 0 15px; } .form__file-filename.form__file--attached { opacity: 1; } .form__file-browse { position: absolute; top: 14px; right: 14px; z-index: 10; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='%2333383e'%3E%3Cpath d='M140.8,396.8C64,396.8,0,332.8,0,256S64,115.2,140.8,115.2H409.6c56.32,0,102.4,46.08,102.4,102.4S465.92,320,409.6,320H192c-35.84,0-64-28.16-64-64s28.16-64,64-64H384v38.4H192c-15.36,0-25.6,10.24-25.6,25.6s10.24,25.6,25.6,25.6H409.6c35.84,0,64-28.16,64-64s-28.16-64-64-64H140.8C84.48,153.6,38.4,199.68,38.4,256S84.48,358.4,140.8,358.4H384v38.4Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 0; text-indent: -999em; overflow: hidden; white-space: nowrap; text-align: center; cursor: pointer; width: 20px; height: 20px; opacity: 0.7; transition: opacity 0.2s; } .form__file-browse:hover { opacity: 1; } .form__file-input { position: absolute; left: -9999px; } .form__files { position: relative; display: none; list-style: none; border: 1px solid #ccc; border-bottom-color: #b3b3b3; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0 2px 4px rgba(0,0,0,0.15); -webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.15); box-shadow: 0 2px 4px rgba(0,0,0,0.15); overflow: hidden; margin: 15px 0 0; } .form__files.form__files--show { display: block; transform-origin: bottom center; -webkit-animation: show-files 0.3s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95); -moz-animation: show-files 0.3s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95); -o-animation: show-files 0.3s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95); animation: show-files 0.3s forwards cubic-bezier(0.45, 0.05, 0.55, 0.95); } .form__files.form__files--hide { display: block; transform-origin: bottom center; -webkit-animation: hide-files 0.3s forwards linear; -moz-animation: hide-files 0.3s forwards linear; -o-animation: hide-files 0.3s forwards linear; animation: hide-files 0.3s forwards linear; } .form__files-item { position: relative; display: block; max-height: 50px; -webkit-animation: show-file 0.2s forwards linear; -moz-animation: show-file 0.2s forwards linear; -o-animation: show-file 0.2s forwards linear; animation: show-file 0.2s forwards linear; white-space: nowrap; padding: 0; } .form__files-item--done .form__files-item-remove { opacity: 0.7; visibility: visible; } .form__files-item--done .form__files-item-progress { height: 0; } .form__files-item--loading .form__files-item-progress { height: 2px; } .form__files-item--hide { display: block; transform-origin: bottom center; -webkit-animation: hide-file 0.2s forwards linear; -moz-animation: hide-file 0.2s forwards linear; -o-animation: hide-file 0.2s forwards linear; animation: hide-file 0.2s forwards linear; } .form__files-item-progress { display: inline-block; position: absolute; left: -1px; right: -1px; bottom: -1px; background: #4b21ff; background: -moz-linear-gradient(left, #4b21ff 0%, #bd21ff 100%); background: -webkit-linear-gradient(left, #4b21ff 0%, #bd21ff 100%); background: linear-gradient(to right, #4b21ff 0%, #bd21ff 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4b21ff', endColorstr='#bd21ff',GradientType=1); width: 20%; height: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; -ms-border-radius: 2px; -o-border-radius: 2px; border-radius: 2px; overflow: hidden; } .form__files-item-progress:after { content: ''; background-color: #b3b3b3; height: 2px; width: 100%; } .form__files-item-link { display: inline-block; font-size: 13px; line-height: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-decoration: none; padding: 0 60px 0 15px; } .form__files-item-remove { position: absolute; right: 0; bottom: 0; display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' height='16' fill='#33383e'%3E%3Cpath d='M459.51,68.69H358.4V40.46A40.5,40.5,0,0,0,317.94,0H194.06A40.5,40.5,0,0,0,153.6,40.46V68.7H52.49A10.55,10.55,0,0,0,41.94,79.25v29.47a10.55,10.55,0,0,0,10.55,10.55h38V466.49A45.56,45.56,0,0,0,136.08,512H375.91a45.56,45.56,0,0,0,45.52-45.51V119.37h38.08a10.54,10.54,0,0,0,10.55-10.53V79.24A10.55,10.55,0,0,0,459.51,68.69ZM194.06,40.46H317.94V68.7H194.06Z'/%3E%3Cpolygon points='141.14 461.42 370.86 461.42 370.86 127.69 141.14 127.68 141.14 461.42' fill='%23fff'/%3E%3Cpath d='M195.12,405.14h19.35A10.55,10.55,0,0,0,225,394.6V194.52A10.55,10.55,0,0,0,214.47,184H195.12a10.55,10.55,0,0,0-10.55,10.55h0V394.61a10.54,10.54,0,0,0,10.55,10.53Z'/%3E%3Cpath d='M297.52,405.14h19.35a10.55,10.55,0,0,0,10.55-10.55V194.52A10.55,10.55,0,0,0,316.87,184H297.52A10.55,10.55,0,0,0,287,194.52V394.61A10.55,10.55,0,0,0,297.52,405.14Z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; width: 50px; height: 50px; text-indent: -999em; overflow: hidden; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s; margin: 0; } .form__files-item-remove:hover { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='16' height='16' fill='#33383e'%3E%3Cpath d='M459.51,68.69H358.4V40.46A40.5,40.5,0,0,0,317.94,0H194.06A40.5,40.5,0,0,0,153.6,40.46V68.7H52.49A10.55,10.55,0,0,0,41.94,79.25v29.47a10.55,10.55,0,0,0,10.55,10.55h38V466.49A45.56,45.56,0,0,0,136.08,512H375.91a45.56,45.56,0,0,0,45.52-45.51V119.37h38.08a10.54,10.54,0,0,0,10.55-10.53V79.24A10.55,10.55,0,0,0,459.51,68.69ZM194.06,40.46H317.94V68.7H194.06Z'/%3E%3Cpolygon points='141.14 461.42 370.86 461.42 370.86 127.69 141.14 127.68 141.14 461.42' fill='%23fff'/%3E%3Cpath d='M195.12,405.14h19.35A10.55,10.55,0,0,0,225,394.6V194.52A10.55,10.55,0,0,0,214.47,184H195.12a10.55,10.55,0,0,0-10.55,10.55h0V394.61a10.54,10.54,0,0,0,10.55,10.53Z'/%3E%3Cpath d='M297.52,405.14h19.35a10.55,10.55,0,0,0,10.55-10.55V194.52A10.55,10.55,0,0,0,316.87,184H297.52A10.55,10.55,0,0,0,287,194.52V394.61A10.55,10.55,0,0,0,297.52,405.14Z'/%3E%3C/svg%3E"); opacity: 1; } .form__group ul {padding: 0px} .form__group ul li a {color: #0b0a0a} .form__group ul li a:hover {color: #000} .form__group dt {font-weight: unset} /* animations ===================================================== */ /* show files */ @-webkit-keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } /* hide files */ @-webkit-keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } @-o-keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } /* show file */ @-webkit-keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } @-o-keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } /* hide file */ @-webkit-keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } } @-o-keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } } @-moz-keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-o-keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @keyframes show-files { 0% { opacity: 0; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); transform: scale(0.9); } 50% { opacity: 1; } 100%, 70% { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-moz-keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } @-webkit-keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } @-o-keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } @keyframes hide-files { 0% { opacity: 1; } 100% { display: none; opacity: 0; } } @-moz-keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } @-webkit-keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } @-o-keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } @keyframes show-file { 0% { opacity: 0; max-height: 0; } 100% { opacity: 1; max-height: 50px; } } @-moz-keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } } @-webkit-keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } } @-o-keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } } @keyframes hide-file { 0% { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); max-height: 50px; } 100% { display: none; opacity: 0; -webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%); max-height: 0; } }