Merge pull request #283 from maxceem/issue-1608-connect-app

Issue 1608 connect app - setup topcoder-react-utils as a dependency of Connect App

Author: gondzo

components/Avatar/Avatar.scss

@@ -1,14 +1,17 @@
 $avatar-diameter: 35px;
 
-.Avatar {
-  width           : $avatar-diameter;
-  height          : $avatar-diameter;
-  border-radius   : 50%;
-  background-color: #eee;
-  overflow        : hidden;
-
-  img {
-    width : 100%;
-    height: 100%;
+:global {
+  .Avatar {
+    width           : $avatar-diameter;
+    height          : $avatar-diameter;
+    border-radius   : 50%;
+    background-color: #eee;
+    overflow        : hidden;
+  
+    img {
+      width : 100%;
+      height: 100%;
+    }
   }
 }
+  

components/Carousel/Carousel.scss

@@ -1,45 +1,48 @@
-@import 'tc-includes';
+@import '~tc-ui/src/styles/tc-includes';
 
 $pager-bg-color: #737380;
 
-.Carousel {
-  display: flex;
-  flex-direction: row;
-
-  .page-down {
-    width: 20px;
-    margin-right: 15px;
-    background-color: $pager-bg-color;
+:global {
+  .Carousel {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    &.hidden {
-      display: none;
+    flex-direction: row;
+  
+    .page-down {
+      width: 20px;
+      margin-right: 15px;
+      background-color: $pager-bg-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+  
+      &.hidden {
+        display: none;
+      }
     }
-  }
-
-  .page-up {
-    width: 20px;
-    background-color: $pager-bg-color;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-
-    &.hidden {
-      display: none;
+  
+    .page-up {
+      width: 20px;
+      background-color: $pager-bg-color;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: pointer;
+  
+      &.hidden {
+        display: none;
+      }
     }
-  }
-
-  .visible-area {
-    display: flex;
-    flex-direction: row;
-    overflow: hidden;
-
-    .carousel-item:not(:first-child) {
-      margin-left: 30px;
+  
+    .visible-area {
+      display: flex;
+      flex-direction: row;
+      overflow: hidden;
+  
+      .carousel-item:not(:first-child) {
+        margin-left: 30px;
+      }
     }
   }
-}
+}
+  

components/Carousel/CarouselExamples.scss

@@ -1,17 +1,20 @@
-@import 'tc-includes';
+@import '~tc-ui/src/styles/tc-includes';
 
-.Carousel {
-  .StandardListItem {
-    padding: 0px;
+:global {
+  .Carousel {
+    .StandardListItem {
+      padding: 0px;
+    }
   }
-}
-
-.CarouselExamples {
-  > p {
-    border: 1px solid $tc-gray-40;
-    margin: 20px 0px;
+  
+  .CarouselExamples {
+    > p {
+      border: 1px solid $tc-gray-40;
+      margin: 20px 0px;
+    }
+    .limited-width {
+      width: 200px;
+    }
   }
-  .limited-width {
-    width: 200px;
-  }
-}
+}
+  

components/Checkbox/Checkbox.scss

@@ -1,14 +1,16 @@
 
-.Checkbox {
-  label {
-    margin-left: 10px;
+:global {
+  .Checkbox {
+    label {
+      margin-left: 10px;
+    }
+  
+    .icon, button {
+      width   : 24px;
+      height  : 24px;
+      /* fixing jumping issues on webkit */
+      outline : none;
+      overflow: hidden;
+    }
   }
-
-  .icon, button {
-    width   : 24px;
-    height  : 24px;
-    /* fixing jumping issues on webkit */
-    outline : none;
-    overflow: hidden;
-  }
-}
+}