ONOS-1933 - CORD-GUI -- CSS for demo login page created. WIP.

Change-Id: Ia80a742ea1d002b4524fa85f8194231dd108de90

@@ -16,20 +16,25 @@
 
 
 div.foot {
 div.foot {
     width: 960px;
     width: 960px;
-    height: 20px;
-    background-color: gray;
+    height: 30px;
+    background-color: rgb(122, 188, 229);
     position: absolute;
     position: absolute;
     left: 0;
     left: 0;
     right: 0;
     right: 0;
     bottom: 0;
     bottom: 0;
     margin-left: auto;
     margin-left: auto;
     margin-right: auto;
     margin-right: auto;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
 }
 }
 
 
 .foot div {
 .foot div {
     position: absolute;
     position: absolute;
     top: 50%;
     top: 50%;
     transform: translate(0, -50%);
     transform: translate(0, -50%);
+    font-style: italic;
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
 }
 }
 
 
 .foot div.left {
 .foot div.left {

@@ -16,10 +16,10 @@
 
 
 <div class="foot">
 <div class="foot">
     <div class="left">
     <div class="left">
-
+        Sample copyright notice here
     </div>
     </div>
 
 
     <div class="right">
     <div class="right">
-
+        Some other text here
     </div>
     </div>
 </div>
 </div>

@@ -17,7 +17,7 @@
 div.mast {
 div.mast {
     width: 100%;
     width: 100%;
     height: 50px;
     height: 50px;
-    background-color: gray;
+    background-color: rgb(122, 188, 229);
     position: relative;
     position: relative;
 }
 }
 
 

@@ -27,6 +27,10 @@ p, a, li, th, td {
     font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
     font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
 }
 }
 
 
+body {
+    background-color: #efefef;
+}
+
 div.container {
 div.container {
     width: 75%;
     width: 75%;
     margin: 0 auto;
     margin: 0 auto;

@@ -14,15 +14,94 @@
  * limitations under the License.
  * limitations under the License.
  */
  */
 
 
-#login-header h2 {
+div#login-wrapper {
+    text-align: center;
+}
+
+#login h2 {
     margin: 1%;
     margin: 1%;
+    color: rgb(115, 115, 115);
+    font-size: 100%;
+    font-style: italic;
+    text-align: left;
+    position: absolute;
+    top: -140px;
+}
+
+div#login-logo {
+    margin-top: 7%;
+    width: 217px;
+}
+div#login-logo, div#login-form {
+    display: inline-block;
+}
+
+#login-logo use.glyph.bird {
+    fill: #800;
+}
+#login-logo circle {
+    fill: none;
 }
 }
 
 
 div#login-form {
 div#login-form {
-    width: 135px;
-    margin: 0 auto;
+    margin-left: 2.5%;
+    position: relative;
+    width: 240px;
 }
 }
 
 
 #login-form form {
 #login-form form {
-    line-height: 150%;
+    line-height: 250%;
+
+}
+#login-form input {
+    display: block;
+    height: 40px;
+    width: 230px;
+    font-size: 19px;
+    padding: 0 5px;
+    margin-bottom: 3.5%;
+    border-radius: 3px;
+    position: absolute;
+}
+#login-form input[type="text"] {
+    top: -110px;
+}
+#login-form input[type="password"] {
+    top: -60px;
+}
+
+#login-form input[type="text"],
+#login-form input[type="password"] {
+    box-shadow: none;
+    border: none;
+    transition: border 0.1s;
+}
+#login-form input[type="text"]:focus,
+#login-form input[type="password"]:focus,
+#login-form input[type="button"]:focus {
+    outline: none;
+    border: solid 2px rgba(122, 188, 229, 0.5);
+}
+
+#login-form a {
+    text-decoration: none;
+}
+
+#login-form input[type="button"] {
+    top: -5px;
+    width: 240px;
+    height: 30px;
+    box-shadow: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    letter-spacing: 0.02em;
+    font-size: 14px;
+    background-color: lightgray;
+    transition: background-color 0.4s;
+}
+
+#login-form input[type="button"]:hover {
+    color: white;
+    background-color: #CE5650;
 }
 }

 <!-- Login page partial html -->
 <!-- Login page partial html -->
-<div id="login-header">
-    <h2>Subscriber Portal</h2>
-</div>
+<div id="login" class="container">
+    <div id="login-wrapper">
+        <div id="login-logo">
+            <icon size="125" id="bird"></icon>
+        </div>
 
 
-<div class="container">
-    <div id="login-image"></div>
-
-    <div id="login-form">
-        <form>
-            <input type="text" placeholder="email">
-            <br>
-            <input type="password" placeholder="password">
-            <br>
-            <a href="#/home"><input type="submit" value="Login"></a>
-        </form>
+        <div id="login-form">
+            <h2>Subscriber Portal</h2>
+            <form>
+                <input type="text" placeholder="email">
+                <input type="password" placeholder="password">
+                <a href="#/home"><input type="button" value="Log In"></a>
+            </form>
+        </div>
     </div>
     </div>
 </div>
 </div>
\ No newline at end of file

@@ -61,6 +61,20 @@
 
 
 <svg id="icon-defs">
 <svg id="icon-defs">
     <defs>
     <defs>
+        <symbol id="bird" viewBox="352 224 113 112">
+            <path d="M427.7,300.4 c-6.9,0.6-13.1,5-19.2,7.1c-18.1,6.2-33.9,
+            9.1-56.5,4.7c24.6,17.2,36.6,13,63.7,0.1c-0.5,0.6-0.7,1.3-1.3,
+            1.9c1.4-0.4,2.4-1.7,3.4-2.2c-0.4,0.7-0.9,1.5-1.4,1.9c2.2-0.6,
+            3.7-2.3,5.9-3.9c-2.4,2.1-4.2,5-6,8c-1.5,2.5-3.1,4.8-5.1,6.9c-1,
+            1-1.9,1.9-2.9,2.9c-1.4,1.3-2.9,2.5-5.1,2.9c1.7,0.1,3.6-0.3,6.5
+            -1.9c-1.6,2.4-7.1,6.2-9.9,7.2c10.5-2.6,19.2-15.9,25.7-18c18.3
+            -5.9,13.8-3.4,27-14.2c1.6-1.3,3-1,5.1-0.8c1.1,0.1,2.1,0.3,3.2,
+            0.5c0.8,0.2,1.4,0.4,2.2,0.8l1.8,0.9c-1.9-4.5-2.3-4.1-5.9-6c-2.3
+            -1.3-3.3-3.8-6.2-4.9c-7.1-2.6-11.9,11.7-11.7-5c0.1-8,4.2-14.4,
+            6.4-22c1.1-3.8,2.3-7.6,2.4-11.5c0.1-2.3,0-4.7-0.4-7c-2-11.2-8.4
+            -21.5-19.7-24.8c-1-0.3-1.1-0.3-0.9,0c9.6,17.1,7.2,38.3,3.1,54.2
+            C429.9,285.5,426.7,293.2,427.7,300.4z"></path>
+        </symbol>
         <symbol id="checkMark" viewBox="0 0 10 10">
         <symbol id="checkMark" viewBox="0 0 10 10">
             <path d="M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0,1.8c0,0,2.7-5.4,2.8-5.7c
             <path d="M2.6,4.5c0,0,0.7-0.4,1.2,0.3l1.0,1.8c0,0,2.7-5.4,2.8-5.7c
             0,0,0.5-0.9,1.4-0.1c0,0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4,0.5
             0,0,0.5-0.9,1.4-0.1c0,0,0.5,0.5,0,1.3S6.8,7.3,5.6,9.2c0,0-0.4,0.5