Refactor Styles: oneauth designs (#225)

lazy-god · vdvibhu20 · commit b42aa98a3ba4 · 2018-07-12T20:02:40.000+05:30
* Refactor: object layer o-arragement

* Move: row styling to o-arrangement

* Remove hardcoded string

* Change image card to card
diff --git a/examples/views/add-address.hbs b/examples/views/add-address.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-add-address">
     <div class="card">
@@ -70,7 +70,7 @@
               <input class="input-text col-md-8 col-sm-8" value="Office Address" />
             </div>
           </div>
-          <div class="row justify-content-end button-row">
+          <div class="row justify-content-end">
             <div class="grey reset-button">
               <button>RESET</button>
             </div>
diff --git a/examples/views/add-client.hbs b/examples/views/add-client.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-client-add">
     <div class="card">
@@ -18,7 +18,7 @@
           <div class="label-input col-md-4 col-sm-3">CallBack Url</div>
           <input class="input-text col-md-8 col-sm-8" value="" />
         </div>
-        <div class="row justify-content-end button-row">
+        <div class="row justify-content-end">
           <div class="button-solid">
             <button>ADD CLIENT</button>
           </div>
diff --git a/examples/views/address-page.hbs b/examples/views/address-page.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-address-page">
     <div class="card">
diff --git a/examples/views/app-page.hbs b/examples/views/app-page.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-app-page">
     <div class="card">
diff --git a/examples/views/client-page.hbs b/examples/views/client-page.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-client-page">
     <div class="card">
diff --git a/examples/views/profile-page-edit.hbs b/examples/views/profile-page-edit.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
     <div class="col-md-8 o-profile-edit">
       <div class="card">
diff --git a/examples/views/profile-page.hbs b/examples/views/profile-page.hbs
@@ -1,4 +1,4 @@
-<div class="row e-arrangement">
+<div class="row o-arrangement">
   {{>side-nav}}
   <div class="col-md-8 o-profile">
     <div class="card">
diff --git a/sass/styles/_elements.scss b/sass/styles/_elements.scss
@@ -30,7 +30,6 @@
 @import "elements/elements.divider";
 @import "elements/elements.form-input";
 @import "elements/elements.pagination";
-@import "elements/element.arrangement";
 @import "elements/element.border-card";
 @import "elements/elements.background";
 @import "elements/html/elements.heading";
diff --git a/sass/styles/_objects.scss b/sass/styles/_objects.scss
@@ -8,9 +8,6 @@
 @import "objects/o-classroom-layout/o-classroom-layout";
 @import "objects/o-accordian-layout/o-accordian-layout";
 @import "objects/o-announcement/o-announcement";
-@import "objects/o-profile-page/o-profile-page";
-@import "objects/o-profile-page-edit/o-profile-page-edit";
-@import "objects/o-edit-profile/o-edit-profile";
 @import "objects/o-content/o-content";
 @import "objects/o-content/o-timeline";
 @import "objects/o-overview-recent/o-overview-recent";
@@ -44,7 +41,10 @@
 @import "objects/form-input/form-input";
 @import "objects/o-login/o-login";
 @import "objects/o-course-card/o-course-card";
-@import "objects/o-side-nav/o-side-nav";
+@import "objects/arrangement/o-arrangement";
+@import "objects/o-profile-page/o-profile-page";
+@import "objects/o-profile-page-edit/o-profile-page-edit";
+@import "objects/o-edit-profile/o-edit-profile";
 @import "objects/o-app-page/o-app-page";
 @import "objects/o-add-address/o-add-address";
 @import "objects/o-address-page/o-address-page";
@@ -53,3 +53,4 @@
 @import "objects/o-signup/o-signup";
 @import "objects/tab-nav/tab-nav";
 @import "objects/o-changedp/o-changedp";
+@import "objects/o-side-nav/o-side-nav";
diff --git a/sass/styles/elements/element.arrangement.scss b/sass/styles/elements/element.arrangement.scss
diff --git a/sass/styles/elements/elements.form-input.scss b/sass/styles/elements/elements.form-input.scss
@@ -22,6 +22,10 @@
   }
 }
 
+.input-text[disabled]{
+  background: $disabled-input;
+}
+
 
 /*--------------------------INPUT CHECKBOX---------------------------*/
 .input-checkbox{
diff --git a/sass/styles/objects/arrangement/o-arrangement.scss b/sass/styles/objects/arrangement/o-arrangement.scss
@@ -0,0 +1,76 @@
+.o-arrangement {
+    justify-content: space-evenly;
+    font-size: $font-sm;
+
+    .card {
+        @include dimensions(100%, auto);
+        @include margin(0, 0, 30px, 0);
+        @include padding-mixin(40px, 60px, 40px, 60px);
+    }
+
+    .heading-u-red {
+        @include padding-mixin(0, 160px, 33px, 0);
+        @include margin(0, 0, 30px, 0);
+        font-size: $font-mds;
+    }
+
+    .button-solid {
+        font-size: $font-xs;
+        font-weight: $font-medium;
+    }
+
+    .row {
+        @include padding-mixin(0, 0, 0, 0);
+    }    
+
+    .attributes {
+        @include margin(0, 0, 10px, 0);
+        height: auto;
+        justify-content: space-between;
+        font-weight: $font-normal;
+        
+        .flex-row {
+          @include padding-mixin(40px, 0, 20px, 0);
+          justify-content: space-between;
+        }
+        
+        .detail-row {
+            @include margin(0, 0, 20px, 0);
+        }
+    }
+
+    .input-text {
+        @include padding-mixin(0, 20px, 0, 20px);
+        height: 70px;
+        color: $navLink;
+    }
+
+    .dropdown-ul {
+        box-shadow: unset;
+    }
+
+    .border-card {
+        @include padding-mixin(30px, 30px, 120px, 30px);
+        @include margin(0, 0, 30px, 0);
+        position: relative;
+    }
+
+    .button-dashed {
+        @include margin(0, 0, 0, 0);
+        max-width: 136px;
+        min-width: 90px;
+        width: 40%;
+        font-size: $font-xs;
+        font-weight: $font-medium;
+    }
+
+    .button-row {
+        width: 100%;
+        bottom: 40px;
+        position: absolute;
+    }
+
+    .heading {
+        font-size: $font-sm;
+    }
+}
diff --git a/sass/styles/objects/o-add-address/o-add-address.scss b/sass/styles/objects/o-add-address/o-add-address.scss
@@ -1,44 +1,9 @@
 .o-add-address {
-  font-size: $font-sm;
-
-  .card {
-    @include dimensions(100%, auto);
-    @include margin(0, 0, 30px, 0);
-    @include padding-mixin(70px, 45px, 40px, 45px);
-  }
-
-  .input-text {
-    @include padding-mixin(0, 20px, 0, 20px);
-    height: 60px;
-    color: $navLink;
-  }
-
-  .dropdown-ul {
-    box-shadow: unset;
-  }
-
-  .input-text[disabled]{
-    background: $disabled-input;
-  }
-
   .button-row {
     @include margin(20px, 0, 0, 0);
   }
 
-  .heading-u-red {
-    @include padding-mixin(0, 380px, 33px, 0);
-    @include margin(0,0,30px,0);
-    font-size: $font-mds;
-  }
-
-  .row {
-    @include padding-mixin(0, 0, 0, 0);
-  }
-
   .attributes {
-    @include margin(0, 0, 10px, 0);
-    height: auto;
-    font-weight: $font-normal;
     .detail-row {
       @include margin(20px, 0, 20px, 0);
       width: 48%;
@@ -48,8 +13,6 @@
   .button-solid {
     width: 30%;
     max-width: 162px;
-    font-size: $font-xs;
-    font-weight: $font-medium;
   }
 
   .reset-button {
diff --git a/sass/styles/objects/o-address-page/o-address-page.scss b/sass/styles/objects/o-address-page/o-address-page.scss
@@ -1,78 +1,26 @@
 .o-address-page {
-  font-size: $font-xs;
-
-  .card {
-    @include dimensions(100%, auto);
-    @include margin(0, 0, 30px, 0);
-    @include padding-mixin(70px, 60px, 40px, 60px);
-  }
-
-  .border-card {
-    @include padding-mixin(30px, 30px, 120px, 30px);
-    @include margin(0, 0, 30px, 0);
-    position: relative;
-  }
-
   .address-row {
     @include padding-mixin(10px, 0, 10px, 0);
     overflow: hidden;
   }
 
-  .heading-u-red {
-    @include padding-mixin(0, 200px, 33px, 0);
-    @include margin(0, 0, 0, 0);
-    font-size: $font-mds;
-  }
-
-  .heading {
-    font-size: $font-xs;
-  }
-
-  .row {
-    @include padding-mixin(0, 0, 0, 0);
-  }
-
   .attributes {
-    @include margin(0, 0, 10px, 0);
-    height: auto;
-    font-weight: $font-normal;
-
     .flex-row {
       @include padding-mixin(20px, 0, 20px, 0);
     }
   }
 
-  .button-row {
-    @include padding-mixin(20px, 60px, 0, 0);
-    width: 100%;
-    bottom: 40px;
-    position: absolute;
-  }
-
   button {
     @include margin(0, 0, 20px, 0);
   }
 
-  .button-dashed {
-    @include margin(0, 0, 0, 0);
-    max-width: 136px;
-    min-width: 90px;
-    width: 40%;
-    font-size: $font-xs;
-    font-weight: $font-medium;
+  .button-row {
+    @include padding-mixin(20px, 60px, 0, 0);
   }
 
   .button-solid {
     width: 30%;
     max-width: 180px;
-    font-size: $font-xs;
-    font-weight: $font-medium;
-  }
-
-  .flex-row {
-    @include margin(0, 0, 30px, 0);
-    width: 100%;
-    font-weight: $font-medium;
   }
 
 }
diff --git a/sass/styles/objects/o-app-page/o-app-page.scss b/sass/styles/objects/o-app-page/o-app-page.scss
@@ -1,61 +1,15 @@
 .o-app-page {
-  font-size: $font-xs;
-
-  .card {
-    @include dimensions(100%, auto);
-    @include margin(0, 0, 30px, 0);
-    @include padding-mixin(40px, 60px, 40px, 60px);
-    border: none;
-  }
-
-  .border-card {
-    @include padding-mixin(30px, 30px, 120px, 30px);
-    @include margin(0, 0, 30px, 0);
-    position: relative;
-  }
-
   .app-row {
     @include padding-mixin(10px, 0, 10px, 0);
     overflow: hidden;
   }
 
-  .heading-u-red {
-    @include padding-mixin(0, 380px, 33px, 0);
-    @include margin(0, 0, 30px, 0);
-    font-size: $font-mds;
-  }
-
-  .heading {
-    font-size: $font-sm;
-  }
-
-  .row {
-    @include padding-mixin(0, 0, 0, 0);
-  }
-
-  .attributes {
-    @include margin(0, 0, 10px, 0);
-    height: auto;
-    font-weight: $font-normal;
+  button {
+    @include margin(0, 0, 20px, 0);
   }
-
+  
   .button-row {
     @include padding-mixin(20px, 60px, 0, 0);
-    width: 100%;
-    bottom: 40px;
-    position: absolute;
   }
 
-  button {
-    @include margin(0, 0, 20px, 0);
-  }
-
-  .button-dashed {
-    @include margin(0, 0, 0, 0);
-    max-width: 136px;
-    min-width: 90px;
-    width: 40%;
-    font-size: $font-xs;
-    font-weight: $font-medium;
-  }
 }
diff --git a/sass/styles/objects/o-client-add/o-client-add.scss b/sass/styles/objects/o-client-add/o-client-add.scss
diff --git a/sass/styles/objects/o-client-page/o-client-page.scss b/sass/styles/objects/o-client-page/o-client-page.scss
diff --git a/sass/styles/objects/o-profile-page-edit/o-profile-page-edit.scss b/sass/styles/objects/o-profile-page-edit/o-profile-page-edit.scss
diff --git a/sass/styles/objects/o-profile-page/o-profile-page.scss b/sass/styles/objects/o-profile-page/o-profile-page.scss
diff --git a/sass/styles/objects/o-side-nav/o-side-nav.scss b/sass/styles/objects/o-side-nav/o-side-nav.scss

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="row e-arrangement">`
	`1`	`+<div class="row o-arrangement">`
`2`	`2`	`{{>side-nav}}`
`3`	`3`	`<div class="col-md-8 o-address-page">`
`4`	`4`	`<div class="card">`