.UppyStatusBar --> .uppy-StatusBar everywhere for everything

src/scss/_informer.scss

@@ -1,8 +1,3 @@
-// @import '_variables.scss';
-// @import '_utils.scss';
-// @import '_animation.scss';
-// @import '_common.scss';
-
 .UppyInformer {
   position: absolute;
   bottom: 0;
@@ -21,7 +16,7 @@
   transition: all 300ms ease-in;
   z-index: $zIndex-4;
 
-  .UppyDashboard--wide & {
+  .uppy-Dashboard--wide & {
     height: 40px;
     line-height: 40px;
     font-size: 13px;
@@ -40,7 +35,7 @@
   height: 30px;
   line-height: 30px;
 
-  .UppyDashboard--wide & {
+  .uppy-Dashboard--wide & {
     height: 40px;
     line-height: 40px;
   }

src/scss/_progressbar.scss

@@ -3,7 +3,7 @@
 // @import '_animation.scss';
 // @import '_common.scss';
 
-.UppyProgressBar {
+.uppy-ProgressBar {
   position: absolute;
   top: 0;
   left: 0;
@@ -12,7 +12,7 @@
   z-index: 10000;
 }
 
-.UppyProgressBar-inner {
+.uppy-ProgressBar-inner {
   background-color: $color-cornflower-blue;
   box-shadow: 0 0 10px rgba($color-cornflower-blue, 0.7);
   height: 100%;
@@ -20,7 +20,7 @@
   transition: width 0.4s ease;
 }
 
-.UppyProgressBar-percentage {
+.uppy-ProgressBar-percentage {
   display: none;
   text-align: center;
   position: absolute;

src/scss/_provider.scss

@@ -1,9 +1,4 @@
-// @import '_variables.scss';
-// @import '_utils.scss';
-// @import '_animation.scss';
-// @import '_common.scss';
-
-.UppyProvider-auth, .UppyProvider-error, .UppyProvider-loading {
+.uppy-Provider-auth, .uppy-Provider-error, .uppy-Provider-loading {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -11,7 +6,7 @@
   height: 100%;
 }
 
-.UppyProvider-authTitle {
+.uppy-Provider-authTitle {
   font-size: 22px;
   line-height: 1.35;
   font-weight: 300;
@@ -21,12 +16,13 @@
   text-align: center;
 }
 
-.UppyProvider-authBtn {
+.uppy-Provider-authBtn {
   @include reset-button;
   border-radius: 6px;
   background-color: $color-cornflower-blue;
   color: $color-white;
   font-size: 20px;
+  font-weight: 400;
   padding: 12px 46px;
   transition: background-color 0.3s;
   text-decoration: none;
@@ -39,7 +35,7 @@
   }
 }
 
-// .UppyProvider-breadcrumbs {
+// .uppy-Provider-breadcrumbs {
 //   color: $color-black;
 //   font-size: 12px;
 //   line-height: 40px;
@@ -49,41 +45,31 @@
 //   // padding: 15px 0;
 // }
 
-.UppyProvider-breadcrumbs button,
-.UppyGoogleDrive-sidebar button {
+.uppy-Provider-breadcrumbs button {
   @include reset-button;
   cursor: pointer;
   font-size: 14px;
 }
 
-.UppyProvider-breadcrumbs button:hover {
+.uppy-Provider-breadcrumbs button:hover {
   text-decoration: underline;
 }
 
-.UppyGoogleDrive-sidebar button {
-  font-size: 14px;
-  padding: 0;
-}
-
-.UppyProvider-breadcrumbs button:focus,
-.UppyGoogleDrive-sidebar button:focus {
+.uppy-Provider-breadcrumbs button:focus {
   outline: 1px dotted #aaa;
 }
 
-.UppyProvider-breadcrumbs li {
+.uppy-Provider-breadcrumbs li {
   display: inline-block;
   margin: 0;
   margin-right: 6px;
 }
 
-.UppyProvider-breadcrumbs li:not(:last-child):after {
-  content: '/';
+.uppy-Provider-breadcrumbs li:not(:last-child):after {
+  content: ' /';
 }
 
-
-/** NEW PLUGIN BROWSER STYLES */
-
-.Browser {
+.uppy-ProviderBrowser {
   // border: 1px solid #ddd;
   // border-radius: 5px;
   display: flex;
@@ -96,11 +82,11 @@
   // width: 718px;
 }
 
-.Browser-user {
+.uppy-ProviderBrowser-user {
   margin: 16px 0;
 }
 
-.Browser-header {
+.uppy-ProviderBrowser-header {
   z-index: 1000;
   border-bottom: 1px solid #e5e5e5;
   position: relative;
@@ -122,7 +108,7 @@
    color: rgba(119,119,119,0.75);
 }
 
-.Browser-headerBar {
+.uppy-ProviderBrowser-headerBar {
   height: 50px;
   line-height: 50px;
   display: flex;
@@ -132,7 +118,7 @@
   z-index: $zIndex-2;
 }
 
-.Browser-search {
+.uppy-ProviderBrowser-search {
   height: 50px;
   position: absolute;
   top: 0;
@@ -146,11 +132,11 @@
   align-items: center;
 }
 
-  .Browser-search[aria-hidden=false] {
+  .uppy-ProviderBrowser-search:not([aria-hidden=true]) {
     transform: translate(0, 0);
   }
 
-.Browser-search input {
+.uppy-ProviderBrowser-search input {
   flex: 1;
   background-color: transparent;
   outline: 0;
@@ -162,7 +148,7 @@
 }
 
 
-.Browser-searchToggle {
+.uppy-ProviderBrowser-searchToggle {
   @include reset-button();
   width: 15px;
   cursor: pointer;
@@ -174,7 +160,7 @@
   }
 }
 
-.Browser-searchClose {
+.uppy-ProviderBrowser-searchClose {
   @include reset-button();
   cursor: pointer;
   width: 12px;
@@ -188,7 +174,7 @@
   }
 }
 
-.Browser-userLogout {
+.uppy-ProviderBrowser-userLogout {
   @include reset-button();
   margin-right: 16px;
   cursor: pointer;
@@ -198,7 +184,7 @@
   }
 }
 
-.UppyProvider-breadcrumbs {
+.uppy-Provider-breadcrumbs {
   flex: 1;
   color: $color-black;
   font-size: 12px;
@@ -209,18 +195,18 @@
   margin-left: 16px;
 }
 
-.Browser-breadcrumbs span {
+.uppy-ProviderBrowser-breadcrumbs span {
   font-size: 16px;
   margin-left: 32px;
 }
 
-.Browser-breadcrumbs span.active {
+.uppy-ProviderBrowser-breadcrumbs span.active {
   color: #666;
   flex: 1;
   font-weight: 500;
 }
 
-// .Browser-subHeader {
+// .uppy-ProviderBrowser-subHeader {
 //   display: flex;
 //   justify-content: space-between;
 //   align-items: center;
@@ -231,12 +217,12 @@
 //   z-index: 1000;
 // }
 
-.Browser-body {
+.uppy-ProviderBrowser-body {
   flex: 1;
   position: relative;
 }
 
-.BrowserTable {
+.uppy-ProviderBrowserTable {
   display: block;
   width: 100%;
   height: 100%;
@@ -251,30 +237,30 @@
   right: 0;
 }
 
-.Browser-viewType--grid {
-  .BrowserTable tbody {
+.uppy-ProviderBrowser-viewType--grid {
+  .uppy-ProviderBrowserTable tbody {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
   }
 
-  // .BrowserTable tbody:after {
+  // .uppy-ProviderBrowserTable tbody:after {
   //   content: "";
   //   flex: auto;
   // }
 
-  .BrowserTable-row {
+  .uppy-ProviderBrowserTable-row {
     position: relative;
   }
 
-  .BrowserTable-column {
+  .uppy-ProviderBrowserTable-column {
     // width: 100px;
     // padding: 15px 12px;
     padding: 14px 10px;
   }
 
-  .BrowserTable-checkbox {
+  .uppy-ProviderBrowserTable-checkbox {
     position: absolute;
     top: 7px;
     right: 7px;
@@ -282,31 +268,35 @@
   }
 }
 
-.BrowserTable tbody {
+.uppy-ProviderBrowserTable tbody {
   display: block;
 }
 
 
-.BrowserTable-checkbox input {
+.uppy-ProviderBrowserTable-checkbox input {
   opacity: 0;
 }
 
 // https://medium.com/claritydesignsystem/pure-css-accessible-checkboxes-and-radios-buttons-54063e759bb3
-.BrowserTable-checkbox {
+.uppy-ProviderBrowserTable-checkbox {
   position: relative;
   display: inline-block;
   top: -3px;
   margin-right: 25px;
 }
 
-.BrowserTable-checkbox label::before,
-.BrowserTable-checkbox label::after {
+.uppy-ProviderBrowserTable-checkbox label {
+  display: block;
+}
+
+.uppy-ProviderBrowserTable-checkbox label::before,
+.uppy-ProviderBrowserTable-checkbox label::after {
   position: absolute;
   cursor: pointer;
 }
 
 // Outer circle
-.BrowserTable-checkbox label:before {
+.uppy-ProviderBrowserTable-checkbox label:before {
   content: "";
   display: inline-block;
   height: 20px;
@@ -318,7 +308,7 @@
 }
 
 // Inner checkbox
-.BrowserTable-checkbox label:after {
+.uppy-ProviderBrowserTable-checkbox label:after {
   content: "";
   display: inline-block;
   height: 5px;
@@ -331,81 +321,81 @@
 }
 
 // Hide the checkmark by default
-.BrowserTable-checkbox input + label::after {
+.uppy-ProviderBrowserTable-checkbox input + label::after {
   content: none;
 }
 
 // Unhide the checkmark on the checked state
-.BrowserTable-checkbox input:checked + label::after {
+.uppy-ProviderBrowserTable-checkbox input:checked + label::after {
   content: "";
 }
 
-.BrowserTable-checkbox input:checked + label::before {
+.uppy-ProviderBrowserTable-checkbox input:checked + label::before {
   background-color: $color-cornflower-blue;
 }
 
 // Adding focus styles on the outer-box of the fake checkbox*/
-.BrowserTable-checkbox input:focus + label::before {
+.uppy-ProviderBrowserTable-checkbox input:focus + label::before {
   outline: rgb(59, 153, 252) auto 5px;
 }
 
-.BrowserTable-row {
+.uppy-ProviderBrowserTable-row {
   // border-bottom: 1px solid #eee;
   display: block;
   cursor: pointer;
   // height: 50px;
 }
 
-.BrowserTable-header {
+.uppy-ProviderBrowserTable-header {
   display: block;
 }
 
-  .BrowserTable-header:hover {
+  .uppy-ProviderBrowserTable-header:hover {
     background-color: $color-gray;
   }
 
-.BrowserTable-column {
+.uppy-ProviderBrowserTable-column {
   color: $color-asphalt-gray;
   line-height: 1.2;
   font-weight: bold;
   padding: 16px;
 }
 
-.BrowserTable-column img {
+.uppy-ProviderBrowserTable-column img {
   vertical-align: text-top;
   margin-right: 3px;
 }
 
-.BrowserTable-column input {
+.uppy-ProviderBrowserTable-column input {
   margin-top: 0;
   cursor: pointer;
 }
 
-.BrowserTable-item {
+.uppy-ProviderBrowserTable-item {
   @include reset-button();
   cursor: pointer;
   font-weight: 600;
 }
 
-.BrowserTable-headerColumn {
+.uppy-ProviderBrowserTable-headerColumn {
   cursor: pointer;
   text-align: left;
 }
 
-// .BrowserTable-row:hover {
+// .uppy-ProviderBrowserTable-row:hover {
 //   background-color: #eee;
 // }
 
-.BrowserTable-header {
+.uppy-ProviderBrowserTable-header {
   background-color: #fafafa;
 }
 
-// .BrowserTable-rowColumn.BrowserTable-column {
+// .uppy-ProviderBrowserTable-rowColumn.uppy-ProviderBrowserTable-column {
 //   display: block;
 //   // width: 708px;
 // }
 
-.Browser-doneBtn {
+.uppy-ProviderBrowser-doneBtn {
   position: absolute;
   bottom: 16px;
   right: 16px;
@@ -413,13 +403,13 @@
   width: 50px;
   height: 50px;
 
-  .UppyDashboard--wide & {
+  .uppy-Dashboard--wide & {
     width: 60px;
     height: 60px;
   }
 }
 
-.Browser-doneBtn .UppyIcon {
+.uppy-ProviderBrowser-doneBtn .UppyIcon {
   width: 30px;
   height: 30px;
 }

src/scss/_spinner.scss

@@ -1,31 +0,0 @@
-// http://stephanwagner.me/only-css-loading-spinner
-
-@keyframes spinner {
-  to {transform: rotate(360deg);}
-}
-
-.UppySpinner {
-  min-width: 24px;
-  min-height: 24px;
-  margin: 25px auto;
-  position: relative;
-}
-
-.UppySpinner.is-spinning:before {
-  content: 'Loading…';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 16px;
-  height: 16px;
-  margin-top: -10px;
-  margin-left: -10px;
-}
-
-.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;
-}

src/scss/_statusbar.scss

@@ -1,4 +1,4 @@
-.UppyStatusBar {
+.uppy-StatusBar {
   position: relative;
   height: 30px;
   line-height: 30px;
@@ -12,30 +12,30 @@
   transition: height .35s;
 }
 
-.UppyStatusBar[aria-hidden=true] {
+.uppy-StatusBar[aria-hidden=true] {
   height: 0;
 }
 
-.UppyStatusBar.is-complete .UppyStatusBar-progress {
+.uppy-StatusBar.is-complete .uppy-StatusBar-progress {
   background-color: $color-green;
 }
 
-.UppyStatusBar.is-error .UppyStatusBar-progress {
+.uppy-StatusBar.is-error .uppy-StatusBar-progress {
   background-color: $color-red;
 }
 
-.UppyStatusBar.is-complete .UppyStatusBar-content {
+.uppy-StatusBar.is-complete .uppy-StatusBar-content {
   text-align: center;
   padding-left: 0;
 }
 
-.UppyStatusBar[aria-hidden=false].is-waiting {
+.uppy-StatusBar:not([aria-hidden=true]).is-waiting {
   background-color: $color-white;
   height: 65px;
   line-height: 65px;
 }
 
-.UppyStatusBar-progress {
+.uppy-StatusBar-progress {
   background-color: $color-cornflower-blue;
   height: 100%;
   position: absolute;
@@ -50,7 +50,7 @@
   }
 }
 
-.UppyStatusBar.is-waiting .UppyStatusBar-progress {
+.uppy-StatusBar.is-waiting .uppy-StatusBar-progress {
   display: none;
 }
 
@@ -59,8 +59,8 @@
   to { background-position: 0 0; }
 }
 
-.UppyStatusBar-content {
-  font-weight: 600;
+.uppy-StatusBar-content {
+  font-weight: 400;
   position: relative;
   z-index: $zIndex-3;
   padding-left: 15px;
@@ -69,7 +69,7 @@
   color: $color-white;
 }
 
-// .UppyStatusBar-content .UppyIcon {
+// .uppy-StatusBar-content .UppyIcon {
 //   width: 15px;
 //   height: 15px;
 
@@ -80,18 +80,18 @@
 // }
 
 
-.UppyStatusBar-statusIndicator {
+.uppy-StatusBar-statusIndicator {
   color: $color-white;
   margin-right: 8px;
 }
 
-  button.UppyStatusBar-statusIndicator {
+  button.uppy-StatusBar-statusIndicator {
     @include reset-button;
     margin-right: 8px;
     cursor: pointer;
   }
 
-.UppyStatusBar-actions {
+.uppy-StatusBar-actions {
   position: absolute;
   top: 0;
   bottom: 0;
@@ -99,37 +99,37 @@
   z-index: $zIndex-4;
 }
 
-.UppyStatusBar.is-waiting .UppyStatusBar-actions {
+.uppy-StatusBar.is-waiting .uppy-StatusBar-actions {
   left: 20px;
   right: initial;
 }
 
-.UppyStatusBar-actionBtn {
+.uppy-StatusBar-actionBtn {
   @include reset-button;
   font-size: 13px;
   line-height: 1em;
-  font-weight: bold;
+  font-weight: 400;
   padding: 7px 10px;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s;
 }
 
-  .UppyStatusBar-actionBtn:not(:last-child) {
+  .uppy-StatusBar-actionBtn:not(:last-child) {
     margin-right: 5px;
   }
 
-  .UppyStatusBar.is-waiting .UppyStatusBar-actionBtn {
+  .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn {
     padding: 13px 30px;
     font-size: 15px;
   }
 
-  .UppyStatusBar-actionBtn--upload {
+  .uppy-StatusBar-actionBtn--upload {
     background-color: $color-white;
     color: $color-cornflower-blue;
   }
 
-    .UppyStatusBar.is-waiting .UppyStatusBar-actionBtn--upload {
+    .uppy-StatusBar.is-waiting .uppy-StatusBar-actionBtn--upload {
         background-color: $color-cornflower-blue;
         color: $color-white;
 
@@ -138,12 +138,12 @@
         }
       }
 
-  .UppyStatusBar-actionBtn--retry {
+  .uppy-StatusBar-actionBtn--retry {
     background-color: $color-white;
     color: $color-red;
   }
 
-.UppyStatusBar-details {
+.uppy-StatusBar-details {
   line-height: 12px;
   width: 13px;
   height: 13px;
@@ -160,7 +160,7 @@
   text-align: center;
 }
 
-.UppyStatusBar-details:after {
+.uppy-StatusBar-details:after {
   line-height: 1.3;
   word-wrap: break-word;
 }