OHIF-195: Migrate styles from PIM back to OHIF for user preferences

OHIFViewer/client/components/userPreferences/dialog.html

@@ -1,13 +1,15 @@
 <template name="userPreferencesDialog">
     {{#dialogSimple (extend this class='themed' dialogClass='dialog-user-preferences modal-lg' title='User Preferences')}}
-        <ul class="nav nav-tabs">
-            <li role="presentation" class="{{tabClasses 'hotkeys'}}">
-                <a href="#" data-id="hotkeys">Keyboard Shortcuts</a>
-            </li>
-            <li role="presentation" class="{{tabClasses 'wwwc'}}">
-                <a href="#" data-id="wwwc">Window W/L</a>
-            </li>
-        </ul>
+        <div class="dialog-separator-after">
+            <ul class="nav nav-tabs">
+                <li role="presentation" class="{{tabClasses 'hotkeys'}}">
+                    <a href="#" data-id="hotkeys">Keyboard Shortcuts</a>
+                </li>
+                <li role="presentation" class="{{tabClasses 'wwwc'}}">
+                    <a href="#" data-id="wwwc">Window/Levels</a>
+                </li>
+            </ul>
+        </div>
         <div class="{{#unless eq instance.activeTab.get 'hotkeys'}}hidden{{/unless}}">
             {{>hotkeysForm (extend contextName='viewer')}}
         </div>

OHIFViewer/client/components/userPreferences/dialog.styl

@@ -3,6 +3,7 @@
 .dialog-user-preferences
 
   .form-content
+    theme('border-bottom', '1px solid $uiBorderColor')
     margin-bottom: 10px
     margin-left: -15px
     margin-right: -15px
@@ -12,3 +13,64 @@
 
   .popover
     width: 300px
+
+  .nav-tabs
+    border-bottom: 0
+    margin-bottom: 3px
+    position: relative
+    z-index: 1
+
+    &>li
+      font-size: 14px
+      font-weight: normal
+      height: 40px
+      line-height: 40px
+      margin-bottom: 0
+
+      &>a
+        display: block
+        width: 100%
+        line-height: inherit
+        margin: 0
+        height: inherit
+        padding: 0 10px 0 10px
+
+        &:after
+          background-color: transparent
+          bottom: -3px
+          content: ' '
+          display: block
+          height: 3px
+          transition(background-color 0.3s ease)
+          width: 100%
+
+      &>a, &.active>a
+        &, &:hover, &:active, &:focus
+          theme('color', '$activeColor')
+          background-color: transparent
+          border: 0
+
+      &.active>a
+        font-weight: bold
+
+        &:after
+          theme('background-color', '$activeColor')
+
+  .form-themed
+
+    table
+      color: #fff
+
+      th, td
+        font-size: 14px
+        font-weight: 300
+
+      th
+        line-height: 60px
+
+      td
+        line-height: 20px
+
+
+    input[type=text]
+      font-weight: 300