on Refactoring...

browser/styles/shared/modal.styl

@@ -1,40 +1,114 @@
 .ModalBase
-  fixed top left right bottom
-  z-index 1000
-  overflow-y auto
-  overflow-x auto
-  background-color modalBaseColor
-  line-height 100%
+  fixed top left bottom right
+  z-index modalZIndex
   &.hide
     display none
+  .modalBack
+    absolute top left bottom right
+    background-color modalBackColor
+    z-index modalZIndex + 1
   .modal
-    width 600px
+    position relative
+    width 650px
     margin 50px auto 0
-    absolute top left right
+    z-index modalZIndex + 2
+    box-shadow popupShadow
     background-color white
     border-radius 10px
     padding 15px
-    box-shadow popupShadow
     .modal-header
       border-bottom solid 1px borderColor
-      margin-bottom 15px
+      margin-bottom 10px
       h1
-        padding: 10px 0 15px;
-        font-size: 1.5em;
+        padding 10px 0 15px
+        font-size 1.5em
     .modal-body
       p
-        margin-bottom 15px
+        margin-bottom 10px
     .modal-footer
       clearfix()
       border-top solid 1px borderColor
-      padding-top 15px
+      padding-top 10px
       .modal-control
         float right
 
+  .EditProfileModal
+    height 500px
+    .leftPane
+      absolute top bottom left
+      width 175px
+      padding 20px
+      border-right solid 1px borderColor
+      .tabLabel
+        font-size 1.5em
+        margin-top 25px
+        margin-bottom 35px
+        color brandColor
+      .tabList button
+        btnStripDefault()
+        display block
+        width 100%
+        font-size 1.1em
+        padding 10px 5px
+        margin-bottom 15px
+        text-align left
+    .rightPane
+      absolute top bottom right
+      left 175px
+      padding 15px
+      .userInfoTab, .paswordTab
+        padding-top 45px
+        .formField
+          position relative
+          clearfix()
+          margin-bottom 15px
+          label
+            width 30%
+            display block
+            line-height 33px
+            float left
+          input
+            width 70%
+            display block
+            borderInput()
+            height 33px
+            font-size 1em
+            border-radius 10px
+            float left
+        .formConfirm
+          position relative
+          clearfix()
+          margin-bottom 15px
+          button
+            float right
+            btnDefault()
+            padding 10px 15px
+            border-radius 5px
+            font-size 1em
+            margin-left 5px
+          .alertInfo, .alertSuccess, .alertError
+            float right
+            padding 12px 10px
+            border-radius 5px
+            width 200px
+            font-size 1em
+            overflow-x hidden
+            white-space nowrap
+            transition 0.1s
+            &.hide
+              width 0
+              padding 12px 0
+          .alertInfo
+            alertInfo()
+          .alertSuccess
+            alertSuccess()
+          .alertError
+            alertError()
+
   .LaunchModal
     .modal-tab
       text-align center
-      margin-bottom 15px
+      margin-bottom 10px
       .btn-primary, .btn-default
         margin 0
         border-radius 0
@@ -49,9 +123,6 @@
           border-left none
           border-top-right-radius 5px
           border-bottom-right-radius 5px
-  textarea.snippetDescription
-    height 75px
-    font-size 0.9em
   .Select
     .Select-control
       border-color borderColor
@@ -63,23 +134,30 @@
   .ace_editor
     border-radius 5px
     border solid 1px borderColor
-  .SnippetForm
+  .CodeForm, .NoteForm
+    .form-group
+      margin-bottom 10px
+  .CodeForm
+    textarea.codeDescription
+      height 75px
+      font-size 0.9em
+      margin-bottom 10px
     .modeSelect.Select
       display inline-block
       width 200px
-      margin-top -15px
-      top 14px
       height 37px
+      .Select-control
+        height 37px
     .ace_editor
       height 258px
-  .BlueprintForm
+  .NoteForm
     .ace_editor
       height 358px
     .previewMode
       absolute top right
       font-size 0.8em
       line-height 24px
-      padding 0 10px
+      padding 5 15px
       background-color transparentify(invBackgroundColor, 0.2)
       color invTextColor
       border-top-right-radius 5px
@@ -98,13 +176,25 @@
     .nameInput
       width 80%
       font-size 1.3em
-      margin 35px auto
+      margin 25px auto 15px
       text-align center
     .userNameSelect
       width 80%
       font-size 1.3em
       margin 35px auto
       text-align center
+    .formField
+      text-align center
+      margin 0 auto 25px
+      select
+        display inline-block
+        width 150px
+        height 33px
+        border solid 1px borderColor
+        background-color white
+        padding 0 10px
+        margin 0 15px
+
     .submitButton
       display block
       margin 0 auto
@@ -150,7 +240,7 @@
       absolute top bottom right
       left 200px
       padding 15px
-  .PersonalSettingModal.modal
+  .PreferencesModal.modal
     .settingBody
       .profile
         height 500px
@@ -272,48 +362,3 @@
                 margin-right 0
             .deleteButton
               float left
-      .members
-        height 500px
-        box-sizing border-box
-        padding-top 50px
-        .userList
-          height 275px
-          box-sizing border-box
-          border-bottom solid 1px borderColor
-          li
-            clearfix()
-            margin-bottom 10px
-            img.userPhoto
-              float left
-              width 44px
-              height 44px
-              circle()
-              box-shadow 1px 1px 4px 0px #C5C5C5
-            .userName
-              float left
-              height 44px
-              font-size 1.3em
-              line-height 44px
-              margin-left 15px
-            .userControl
-              float right
-              height 44px
-              .ownerLabel
-                height 44px
-                padding 0 15px
-                line-height 44px
-        .addUserForm
-          height 225px
-          .addUserLabel
-            margin-top 15px
-            font-size 1.3em
-          .addUserControl
-            clearfix()
-            margin-top 15px
-            .addUserSelect
-              float left
-              height 44px
-              width 350px
-              margin-top 5px
-            .addUserSubmit
-              float right