ONOS-1933 - CORD-GUI -- CSS for demo login page created. WIP.
Change-Id: Ia80a742ea1d002b4524fa85f8194231dd108de90
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
index 8e55b9a..f5165b2 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.css
@@ -16,20 +16,25 @@
div.foot {
width: 960px;
- height: 20px;
- background-color: gray;
+ height: 30px;
+ background-color: rgb(122, 188, 229);
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-left: auto;
margin-right: auto;
+ border-top-left-radius: 3px;
+ border-top-right-radius: 3px;
}
.foot div {
position: absolute;
top: 50%;
transform: translate(0, -50%);
+ font-style: italic;
+ font-size: 12px;
+ color: rgba(255, 255, 255, 0.7);
}
.foot div.left {
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
index 4c09fd9..5e2f1e8 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/foot/foot.html
@@ -16,10 +16,10 @@
<div class="foot">
<div class="left">
-
+ Sample copyright notice here
</div>
<div class="right">
-
+ Some other text here
</div>
</div>
diff --git a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
index a0d8d59..e89f218 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/fw/mast/mast.css
@@ -17,7 +17,7 @@
div.mast {
width: 100%;
height: 50px;
- background-color: gray;
+ background-color: rgb(122, 188, 229);
position: relative;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
index 195740a..34f16bc 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/common/common.css
@@ -27,6 +27,10 @@
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
}
+body {
+ background-color: #efefef;
+}
+
div.container {
width: 75%;
margin: 0 auto;
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
index a23c612..05d2fee 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.css
@@ -14,15 +14,94 @@
* limitations under the License.
*/
-#login-header h2 {
+div#login-wrapper {
+ text-align: center;
+}
+
+#login h2 {
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 {
- width: 135px;
- margin: 0 auto;
+ margin-left: 2.5%;
+ position: relative;
+ width: 240px;
}
#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;
}
diff --git a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
index 15c06e7..9835fd4 100644
--- a/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
+++ b/apps/demo/cord-gui/src/main/webapp/app/view/login/login.html
@@ -1,18 +1,17 @@
<!-- 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>
\ No newline at end of file
diff --git a/apps/demo/cord-gui/src/main/webapp/index.html b/apps/demo/cord-gui/src/main/webapp/index.html
index 1c09563..ee927ab 100644
--- a/apps/demo/cord-gui/src/main/webapp/index.html
+++ b/apps/demo/cord-gui/src/main/webapp/index.html
@@ -61,6 +61,20 @@
<svg id="icon-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">
<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