Browse Source

Spinner and DragDrop styles

Artur Paikin 9 years ago
parent
commit
234a4114d1
2 changed files with 27 additions and 36 deletions
  1. 3 13
      src/scss/_dragdrop.scss
  2. 24 23
      src/scss/_spinner.scss

+ 3 - 13
src/scss/_dragdrop.scss

@@ -2,10 +2,11 @@
 * Drag & Drop CSS to style the plugin
 */
 .UppyDragDrop {
-  min-height: 300px;
+  min-height: 100px;
   display: flex;
   align-items: center;
   justify-content: center;
+  border-radius: 15px;
 }
 
   .UppyDragDrop.is-dragdrop-supported {
@@ -43,6 +44,7 @@
 .UppyDragDrop-label {
   display: block;
   cursor: pointer;
+  font-size: 1.15em;
 }
 
 .UppyDragDrop-dragText {
@@ -67,15 +69,3 @@
     background: #ccc;
   }
 }
-
-.UppyDragDrop-progress {
-  width: 80%;
-  height: 3px;
-  margin: 15px auto;
-}
-
-.UppyProgressBar {
-  background-color: $color-pink;
-  height: 100%;
-  width: 0;
-}

+ 24 - 23
src/scss/_spinner.scss

@@ -1,30 +1,31 @@
-.UppySpinner {
-  width: 40px;
-  height: 40px;
-  margin: 100px auto;
+// http://stephanwagner.me/only-css-loading-spinner
+
+@keyframes spinner {
+  to {transform: rotate(360deg);}
 }
 
-.UppySpinner.is-spinning {
-  background-color: $color-pink;
-  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
-  animation: sk-rotateplane 1.2s infinite ease-in-out;
+.UppySpinner {
+  min-width: 24px;
+  min-height: 24px;
+  margin: 25px auto;
+  position: relative;
 }
 
-@-webkit-keyframes sk-rotateplane {
-  0% { -webkit-transform: perspective(120px) }
-  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
-  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
+.UppySpinner.is-spinning:before {
+  content: 'Loading…';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 16px;
+  height: 16px;
+  margin-top: -10px;
+  margin-left: -10px;
 }
 
-@keyframes sk-rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
-  } 50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
-  } 100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
+.UppySpinner.is-spinning:not(:required):before {
+  content: '';
+  border-radius: 50%;
+  border: 2px solid rgba(0, 0, 0, .3);
+  border-top-color: rgba(0, 0, 0, .6);
+  animation: spinner .6s linear infinite;
 }