2018 AAD UI updates (#27)

* Update docs to fix some typos

* Update to match new 2018 look

Author: bongiovimatthew-microsoft

centeredUi/README.md

@@ -48,10 +48,6 @@ The JavaScript we provide out-of-the-box does not provide two key features you m
 
 1. The JavaScript works for deployments in most major languages. However, if you wish to have your pages work under other languages, you will need to follow the steps below in ```Supporting Non-English Languages```.
 
-2. The new paginated sign in contains a user avatar image. By default, this image is a standard empty user avatar (shown below). To support user avatar lookup, you will need to follow the steps below in ```Supporting User Avatar Lookup```.
-
-    ![Empty User](./images/empty_user.png)
-
 ## Supporting Non-English Languages
 
 In order to support non-English languages, you will need to add translated text for the new UI items that are created by the JavaScript.
@@ -60,15 +56,9 @@ In the code, you should locate the translation table in the function ```GetLocal
 
 Each translation should be mapped to the correct language code. For a reference on language codes, see the ```ISO 639-1 Code``` column in the table at [this resource](https://www.loc.gov/standards/iso639-2/php/code_list.php).
 
-## Supporting User Avatar Lookup
-
-The Azure AD experience includes a user avatar on the password page, on the right side of the banner. AD FS does not have support for the concept of a user avatar, so it's not possible to include this logic out-of-the-box. If you wish to support this behavior, you will have to build a web API that accepts a username, and returns an image. You will then have to update the ```paginatedOnload.js``` code to make the request for the user avatar image, and handle the response.
-
-If you are interested in working with the AD FS Open Source community to build a user avatar web app, please contact [email protected].
-
 ## Example
 
-![Login Screenshot](./images/screenshot_paginated.png)
+![Login Screenshot](./images/screenshot_paginated2.png)
 
 ## Contributing (Special Note)
 

centeredUi/ThemeCenterBrand.css

@@ -107,7 +107,7 @@ body {
     margin-bottom: 28px;
     margin-left: auto;
     margin-right: auto;
-    min-height: 290px;
+    min-height: 235px;
     min-width: 320px;
     max-width: 412px;
     width: 338px; /*calc(100% - 40px); */
@@ -446,14 +446,13 @@ input[type="radio"], input[type="checkbox"] {
         margin-left: 0px;
         margin-right: 0px;
         margin-top: 0px;
-        max-width: 100%;
-        min-width: 165px;
+        max-width: 100%;        
         overflow-x: hidden;
         overflow-y: hidden;
         padding-bottom: 4px;
         padding-left: 12px;
         padding-right: 12px;
-        padding-top: 4px;
+        padding-top: 3px;
         position: relative;
         text-align: center;
         text-indent: 0px;
@@ -490,15 +489,9 @@ input.text {
     border-image-slice: 100%;
     border-image-source: none;
     border-image-width: 1;
-    border-left-color: rgba(0, 0, 0, 0.6);
-    border-left-style: solid;
-    border-left-width: 1px;
-    border-right-color: rgba(0, 0, 0, 0.6);
-    border-right-style: solid;
-    border-right-width: 1px;
-    border-top-color: rgba(0, 0, 0, 0.6);
-    border-top-style: solid;
-    border-top-width: 1px;
+    border-top: none;
+    border-left: none;
+    border-right: none;
     box-sizing: border-box;
     color: rgb(38, 38, 38);
     cursor: auto;
@@ -544,7 +537,10 @@ input.text {
 }
 
 input.text:focus {
-    border: 1px solid #6B6B6B;
+    border: 1px solid #0067B8;
+    border-top: none;
+    border-left: none;
+    border-right: none;
 }
 
 select {
@@ -638,40 +634,31 @@ h5, .tinyText {
 
 .identityBanner{
     color: black;
-    background: #F2F2F2;
-    text-align: right;
+    text-align: left;
     white-space: nowrap;
     line-height: 28px;
     height: 28px;
-    margin:16px -36px;
-    padding:0px 100px 0px 40px;
     font-family: "Segoe UI Webfont",-apple-system,"Helvetica Neue","Lucida Grande","Roboto","Ebrima","Nirmala UI","Gadugi","Segoe Xbox Symbol","Segoe UI Symbol","Meiryo UI","Khmer UI","Tunga","Lao UI","Raavi","Iskoola Pota","Latha","Leelawadee","Microsoft YaHei UI","Microsoft JhengHei UI","Malgun Gothic","Estrangelo Edessa","Microsoft Himalaya","Microsoft New Tai Lue","Microsoft PhagsPa","Microsoft Tai Le","Microsoft Yi Baiti","Mongolian Baiti","MV Boli","Myanmar Text","Cambria Math";
     font-size: 15px;
     font-weight: 300;
     white-space: nowrap;
     overflow: hidden;
     -o-text-overflow: ellipsis;
     text-overflow: ellipsis;    
-}
-.identityBannerImage {
- height:48px;
- width:48px;
- margin-top:-17px;
- margin-right: -26px;
- overflow:hidden;
- position: relative;
- float: right;
- top: -48px;
- left: -33px;
+    padding-left:20px;
 }
 
 .submit.backButton{
     color: black;
-    width: 165px;
+    width: 108px;
     float: left;
     background: #CCCCCC;
     border-color: #CCCCCC;
     margin-left: -2px;
+    height: 32px;
+    position: relative;
+    left:110px;
+    bottom:17px;
 }
 
     input[type="submit"].backButton:hover, span.submit.backButton:hover {
@@ -681,16 +668,20 @@ h5, .tinyText {
 
 .submit.nextButton{
     margin-left: -2px;
-}
-
-.submitMargin.submitModified {
-    margin-bottom: 60px;
+    left:229px;
+    bottom:-40px;
+    height: 32px;
+    width: 108px;
 }
 
 .submit.modifiedSignIn{
     display: block;
     width: auto;
-    float: right;
+    position: relative;
+    height: 32px;
+    width: 108px;
+    left:229px;
+    bottom:-15px;
 }
 
 #submissionArea{