on Refactor... #3

browser/styles/shared/modal.styl

@@ -32,7 +32,7 @@
       .modal-control
         float right
 
-  .EditProfileModal
+  .tabModal
     height 500px
     .leftPane
       absolute top bottom left
@@ -56,54 +56,103 @@
       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()
+
+  .EditProfileModal, .PlanetSettingModal
+    .userInfoTab, .paswordTab, .planetProfileTab
+      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
+      .formRadioField
+        margin-bottom 15px
+        input
+          margin-left 25px
+      .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()
+    .planetDeleteTab
+      padding-top 65px
+      p
+        margin-bottom 25px
+        strong
+          color brandColor
+          font-size 1.1em
+      input
+        borderInput()
+        margin-right 5px
+        height 33px
+        font-size 1em
+        border-radius 10px
+      .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
@@ -171,6 +220,27 @@
     border-radius 5px
     marked()
 
+  .AboutModal
+    width 320px
+    .about1
+      margin-bottom 25px
+      .logo
+        display block
+        margin 0 auto
+      .appInfo
+        font-size 1.5em
+        text-align center
+    .about2
+      width 200px
+      margin 0 auto
+      .externalLabel
+        font-size 1.2em
+        margin-bottom 15px
+      .externalList
+        li
+          margin-bottom 15px
+
+
   .PlanetCreateModal.modal, .TeamCreateModal.modal
     padding 60px 0
     .nameInput
@@ -203,162 +273,3 @@
       height 55px
       circle()
       btnPrimary()
-  .PlanetSettingModal.modal, .PersonalSettingModal.modal
-    width 720px
-    height 500px
-    .settingNav
-      absolute top bottom left
-      width 200px
-      box-sizing border-box
-      padding 10px
-      border-right solid 1px borderColor
-      h1
-        margin 40px auto
-        font-size 1.5em
-        color brandColor
-        text-align center
-      nav
-        button
-          font-size 1em
-          display block
-          box-sizing border-box
-          padding 15px 15px
-          margin 10px 0
-          border none
-          border-radius 10px
-          width 100%
-          text-align left
-          background-color transparent
-          color textColor
-          cursor pointer
-          transition 0.1s
-          &:hover, &.hover
-            background-color hoverBackgroundColor
-          &:active, &.active
-            color brandColor
-    .settingBody
-      absolute top bottom right
-      left 200px
-      padding 15px
-  .PreferencesModal.modal
-    .settingBody
-      .profile
-        height 500px
-        padding-top 50px
-        .profileTop
-          box-sizing border-box
-          height 200px
-          border-bottom solid 1px borderColor
-        .profileBottom
-          margin-top 25px
-          height 200px
-        .profileFormRow
-          clearfix()
-          margin-bottom 15px
-          label
-            display block
-            float left
-            width 150px
-            line-height 33px
-            text-align left
-          input
-            float left
-            width 250px
-          .alertSuccess, .alertError, .alertInfo
-            float right
-            transition 0.1s
-            overflow hidden
-            white-space nowrap
-            width 200px
-            text-align center
-            &.hide
-              width 0
-          .alertSuccess
-            alertSuccess()
-          .alertError
-            alertError()
-          .alertInfo
-            alertInfo()
-          .saveButton
-            float right
-      .contact
-        height 500px
-        padding-top 50px
-        p
-          text-align left
-          margin-bottom 15px
-          line-height 140%
-        input
-          margin-bottom 15px
-        textarea
-          margin-bottom 15px
-          max-height 250px
-        .contactFormRow
-          clearfix()
-          .saveButton
-            float right
-          .alertSuccess, .alertError, .alertInfo
-            float right
-            transition 0.1s
-            overflow hidden
-            white-space nowrap
-            width 200px
-            text-align center
-            &.hide
-              width 0
-          .alertSuccess
-            alertSuccess()
-          .alertError
-            alertError()
-          .alertInfo
-            alertInfo()
-      .info
-        text-align left
-        .infoLabel
-          margin 75px 0 25px
-        .externalList
-          padding-left 10px
-          li
-            margin 15px
-      .logout
-        text-align center
-        .logoutLabel
-          margin 100px 0 25px
-          font-size 1.4em
-        .userPhoto
-          margin-bottom 25px
-          circle()
-          box-shadow 1px 1px 4px 0px #C5C5C5
-
-  .PlanetSettingModal.modal
-    .settingBody
-      .planetProfile
-        height 500px
-        padding-top 50px
-        .planetProfileForm
-          height 275px
-          box-sizing border-box
-          border-bottom solid 1px borderColor
-        .planetDeleteForm
-          height 225px
-          .planetDeleteControl
-            margin-top 15px
-            clearfix()
-            .toggle
-              float left
-              transition width 0.3s, color 0.1s, border-color 0.1s
-              overflow hidden
-              white-space nowrap
-              width 345px
-              height 44px
-              &.hide
-                width 0
-              .planetDeleteLabel
-                display inline-block
-                line-height 44px
-              .cancelButton
-                display inline-block
-                margin-left 15px
-                margin-right 0
-            .deleteButton
-              float left