Merge pull request #64 from smiclea/CORWEB-91

Wizard style refactoring fixing FF issues on windows CORWEB-91

src/components/AddCloudConnection/AddCloudConnection.scss

@@ -51,9 +51,6 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       text-transform: uppercase;
       margin-bottom: 2px;
     }
-    &:global(.switch-radio) {
-      width: 100%;
-    }
   }
   input[type="text"], input[type="password"] {
     width: 100%;
@@ -128,7 +125,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 }
 .cloudList {
   height: 324px;
-  overflow-y: scroll;
+  overflow-y: auto;
   padding: 8px;
   .cloudImage {
     width: 128px;

src/components/CloudItem/CloudItem.scss

@@ -18,19 +18,9 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 @import '../variables.scss';
 
 .root {
-  width: 255px;
-  float: left;
-  margin-bottom: 48px;
   height: 200px;
-  &:nth-child(3n+1) {
-
-  }
-  &:nth-child(3n+2) {
-    text-align: center;
-  }
-  &:nth-child(3n) {
-    text-align: right;
-  }
+  margin-left: 96px;
+  margin-top: 96px;
   &.selected {
     :global(.Dropdown-control) {
       background-color: $blue;

src/components/MigrationWizard/MigrationWizard.scss

@@ -33,24 +33,13 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     width: $wizard-content-width;
     margin: 0 auto 60px;
   }
-  :global {
-    .cloudCount_1 {
-      margin: 0 auto;
-      width: 33.3%;
-      padding-left: 64px;
-    }
-    .cloudCount_2 {
-      margin: 0 auto;
-      width: 66.6%;
-      padding-left: 32px;
-    }
-  }
 }
 .container {
   flex: 1;
   margin: 0 auto;
   padding: 0px 0px 70px 32px;
   overflow-y: auto;
+  overflow-x: hidden;
   width: $wizard-content-width;
 
 }

src/components/Switch/Switch.scss

@@ -32,6 +32,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       width: 32px;
       height: 16px;
       cursor: pointer;
+      top: 1px;
     }
 
     input[type="checkbox"]:global(.tinyswitch.ios-switch) + div {

src/components/WizardSource/WizardSource.js

@@ -147,7 +147,7 @@ class WizardSource extends Reflux.Component {
     return (
       <div className={s.root}>
         <div className={s.container}>
-          <div className={s.cloudList + " cloudCount_" + cloudCount}>
+          <div className={s.cloudList + (cloudCount < 3 ? ' ' + s.centered : '')}>
             {cloudList}
           </div>
         </div>

src/components/WizardSource/WizardSource.scss

@@ -27,6 +27,15 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   max-width: $max-content-width;
 }
 .cloudList {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -96px;
+  margin-top: -96px;
+
+  &.centered {
+    justify-content: center;
+  }
+  
   &:after {
     content: " ";
     display: block;

src/components/WizardTarget/WizardTarget.js

@@ -148,7 +148,7 @@ class WizardTarget extends Component {
     return (
       <div className={s.root}>
         <div className={s.container}>
-          <div className={s.cloudList + " cloudCount_" + cloudCount}>
+          <div className={s.cloudList + (cloudCount < 3 ? ' ' + s.centered : '')}>
             {cloudList}
           </div>
         </div>

src/components/WizardTarget/WizardTarget.scss

@@ -26,9 +26,17 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
   padding: 0 0 40px;
   max-width: $max-content-width;
   width: $max-content-width;
-
+  
 }
 .cloudList {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -96px;
+  margin-top: -96px;
+
+  &.centered {
+    justify-content: center;
+  }
 
   &:after {
     content: " ";

src/components/variables.scss

@@ -42,7 +42,7 @@ $header-text-color: $blue;
 
 $max-content-width:     100%;
 $narrow-content-width: 928px;
-$wizard-content-width: 770px;
+$wizard-content-width: 800px;
 
 $border-radius: 4px;