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