|
|
@@ -114,4 +114,127 @@ input[type=number]::-webkit-inner-spin-button,
|
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
|
-webkit-appearance: none;
|
|
|
margin: 0;
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+.upload-zone {
|
|
|
+ padding: 3px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ left: 33%;
|
|
|
+ top: 60%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ -ms-transform: translate(-50%, -50%);
|
|
|
+ -moz-transform: translate(-50%, -50%);
|
|
|
+ -o-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ -webkit-border-radius: 20%;
|
|
|
+ -ms-border-radius: 20%;
|
|
|
+ -moz-border-radius: 20%;
|
|
|
+ -o-border-radius: 20%;
|
|
|
+ border-radius: 20%;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ -ms-transition: 0.3s;
|
|
|
+ -moz-transition: 0.3s;
|
|
|
+ -o-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+ }
|
|
|
+ .upload-zone:before {
|
|
|
+ display: block;
|
|
|
+ width: 80px;
|
|
|
+ height: 80px;
|
|
|
+ border: 3px dashed $color;
|
|
|
+ position: relative;
|
|
|
+ -webkit-border-radius: 20%;
|
|
|
+ -ms-border-radius: 20%;
|
|
|
+ -moz-border-radius: 20%;
|
|
|
+ -o-border-radius: 20%;
|
|
|
+ border-radius: 20%;
|
|
|
+ content: " ";
|
|
|
+ display: block;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ -ms-transition: 0.3s;
|
|
|
+ -moz-transition: 0.3s;
|
|
|
+ -o-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+ }
|
|
|
+ .upload-zone:hover {
|
|
|
+ background: $color;
|
|
|
+ }
|
|
|
+ .upload-zone:hover:before {
|
|
|
+ border-color: #fff;
|
|
|
+ }
|
|
|
+ .upload-zone:hover i:before, .upload-zone:hover i:after {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .upload-zone i {
|
|
|
+ display: block;
|
|
|
+ width: 20%;
|
|
|
+ height: 20%;
|
|
|
+ -webkit-border-radius: 50%;
|
|
|
+ -ms-border-radius: 50%;
|
|
|
+ -moz-border-radius: 50%;
|
|
|
+ -o-border-radius: 50%;
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ -ms-transform: translate(-50%, -50%);
|
|
|
+ -moz-transform: translate(-50%, -50%);
|
|
|
+ -o-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ -ms-transition: 0.3s;
|
|
|
+ -moz-transition: 0.3s;
|
|
|
+ -o-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+ }
|
|
|
+ .upload-zone i:before, .upload-zone i:after {
|
|
|
+ background: $color;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ content: " ";
|
|
|
+ display: block;
|
|
|
+ -webkit-border-radius: 4px;
|
|
|
+ -ms-border-radius: 4px;
|
|
|
+ -moz-border-radius: 4px;
|
|
|
+ -o-border-radius: 4px;
|
|
|
+ border-radius: 4px;
|
|
|
+ -webkit-transition: 0.3s;
|
|
|
+ -ms-transition: 0.3s;
|
|
|
+ -moz-transition: 0.3s;
|
|
|
+ -o-transition: 0.3s;
|
|
|
+ transition: 0.3s;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ -webkit-transform: translate(-50%, -50%);
|
|
|
+ -ms-transform: translate(-50%, -50%);
|
|
|
+ -moz-transform: translate(-50%, -50%);
|
|
|
+ -o-transform: translate(-50%, -50%);
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ }
|
|
|
+ .upload-zone i:before {
|
|
|
+ width: 100%;
|
|
|
+ height: 3px;
|
|
|
+ }
|
|
|
+ .upload-zone i:after {
|
|
|
+ width: 3px;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ .upload-zone input[type='file'] {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .zone2{
|
|
|
+ left: 43%;
|
|
|
+ top: 60%;
|
|
|
+ }
|
|
|
+ .zone3{
|
|
|
+ left: 53%;
|
|
|
+ top: 60%;
|
|
|
+ }
|
|
|
+ .zone4{
|
|
|
+ left: 63%;
|
|
|
+ top: 60%;
|
|
|
+ }
|
