홍길동 / onos

Go to a project
Toggle navigation Toggle navigation pinning
Bri Prebilic Cole
Committed by Gerrit Code Review
0e35b822 1 parent c0fe09a4

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

Change-Id: Ia80a742ea1d002b4524fa85f8194231dd108de90
Inline Side-by-side
Showing 7 changed files with 119 additions and 18 deletions
......@@ -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 {
......
......@@ -16,10 +16,10 @@
<div class="foot">
<div class="left">
Sample copyright notice here
</div>
<div class="right">
Some other text here
</div>
</div>
......
......@@ -17,7 +17,7 @@
div.mast {
width: 100%;
height: 50px;
background-color: gray;
background-color: rgb(122, 188, 229);
position: relative;
}
......
......@@ -27,6 +27,10 @@ p, a, li, th, td {
font-family: "Lucida Grande", "Droid Sans", Arial, Helvetica, sans-serif;
}
body {
background-color: #efefef;
}
div.container {
width: 75%;
margin: 0 auto;
......
......@@ -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;
}
......
<!-- Login page partial html -->
<div id="login-header">
<h2>Subscriber Portal</h2>
</div>
<div class="container">
<div id="login-image"></div>
<div id="login" class="container">
<div id="login-wrapper">
<div id="login-logo">
<icon size="125" id="bird"></icon>
</div>
<div id="login-form">
<h2>Subscriber Portal</h2>
<form>
<input type="text" placeholder="email">
<br>
<input type="password" placeholder="password">
<br>
<a href="#/home"><input type="submit" value="Login"></a>
<a href="#/home"><input type="button" value="Log In"></a>
</form>
</div>
</div>
</div>
\ No newline at end of file
......
......@@ -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
......