Final design adjustments

This commit is contained in:
Gabriel Cardoso 2013-10-18 18:34:14 -03:00
parent 07107220ae
commit 0dc9036a4c
22 changed files with 5121 additions and 4883 deletions

View file

@ -11,77 +11,148 @@ body {
/* Header */ /* Header */
.header.rcue .navbar.primary .navbar-inner { .header.rcue .navbar.primary .navbar-inner {
min-height: 42px; min-height: 42px;
}
.header.rcue .navbar.primary .nav > li {
/*
.dropdown {
display: inline-block;
margin-left: 0.53846153846154em;
margin-top: 0.46153846153846em;
min-width: 15.3846153846154em;
width: auto;
.dropdown-toggle {
font-size: 0.84615384615385em;
color: #fff;
display: inline-block;
line-height: 2.36363636363636em;
border: 1px solid #676c6e;
border-radius: 2px;
padding: 0 0.54545454545455em;
background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
display: block;
&:hover,
&:focus {
text-decoration: none;
}
&:hover {
border-color: #7e8385;
}
}
.dropdown-menu {
left: 0;
min-width: 0;
width: 100%;
overflow: hidden;
li,
li.selected {
width: auto;
a {
width: auto;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
&:hover {
background-color: #D5ECF9;
background-image: none;
border-bottom: 1px solid #A7D7F1;
border-top: 1px solid #A7D7F1;
color: #4D5258;
}
}
}
li.selected a {
background-color: #2B99C0;
background-image: linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
background-image: -o-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
background-image: -moz-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
background-image: -webkit-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
background-image: -ms-linear-gradient(top, #2EA1CA 0%, #2792B6 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, #2EA1CA),
color-stop(1,0, #2792B6)
);
background-repeat: repeat-x;
color: #FFFFFF;
}
}
&.open .dropdown-toggle {
text-decoration: none;
box-shadow: inset 0px 2px 5px rgba(0,0,0,0.2);
border-color: #7e8385;
}
}
*/
} }
.header.rcue .navbar.primary .nav > li .dropdown-label { .header.rcue .navbar.primary .nav > li .dropdown-label {
font-size: 0.84615384615385em; font-size: 0.84615384615385em;
color: #dbdada; color: #dbdada;
margin-left: 1.36363636363636em; margin-left: 1.36363636363636em;
display: inline-block; float: left;
} margin-top: 0.63636363636364em;
.header.rcue .navbar.primary .nav > li .dropdown {
display: inline-block;
margin-left: 0.53846153846154em;
margin-top: 0.46153846153846em;
min-width: 15.3846153846154em;
width: auto;
}
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle {
font-size: 0.84615384615385em;
color: #fff;
display: inline-block;
line-height: 2.36363636363636em; line-height: 2.36363636363636em;
}
.header.rcue .navbar.primary .nav > li .select-rcue {
font-size: 0.76923076923077em;
margin-left: 1em;
margin-top: 0.7em;
display: inline-block;
vertical-align: middle;
background-color: #555a5e;
background-image: none;
background-image: url(img/sprite-arrow-down.svg);
background-repeat: no-repeat;
background-position: right -26px;
border: 1px solid #676c6e; border: 1px solid #676c6e;
border-radius: 2px; border-radius: 2px;
padding: 0 0.54545454545455em; padding-left: 0;
background: #555a5e url(img/sprite-arrow-down.svg) no-repeat right -26px;
display: block;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:hover, .header.rcue .navbar.primary .nav > li .select-rcue:hover {
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:focus {
text-decoration: none;
}
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-toggle:hover {
border-color: #7e8385; border-color: #7e8385;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu { .header.rcue .navbar.primary .nav > li .select-rcue select {
left: 0; color: #fff;
min-width: 0;
width: 100%;
overflow: hidden;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li, .header.rcue .navbar.primary .nav > li .select-rcue select:-moz-focusring {
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected { color: transparent;
width: auto; text-shadow: 0 0 0 #fff;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li a, .header.rcue .navbar.primary .nav > li .select-rcue select option {
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a { background-color: #fff;
width: auto; color: black;
border-top: 1px solid transparent; padding: 4px 10px;
border-bottom: 1px solid transparent;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li a:hover, .header.rcue .navbar.primary .nav > li a#refresh {
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a:hover { border: none;
background-color: #D5ECF9; margin: 0;
background-image: none; padding: 0;
border-bottom: 1px solid #A7D7F1; float: right;
border-top: 1px solid #A7D7F1; font-size: 0.76923076923077em;
color: #4D5258; margin-left: 1em;
margin-top: 1.4em;
} }
.header.rcue .navbar.primary .nav > li .dropdown .dropdown-menu li.selected a { .header.rcue .navbar.primary .nav > li a#refresh:hover {
background-color: #2B99C0; background: none;
background-image: linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
background-image: -o-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
background-image: -moz-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
background-image: -webkit-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
background-image: -ms-linear-gradient(top, #2ea1ca 0%, #2792b6 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2ea1ca), color-stop(1, 0, #2792b6));
background-repeat: repeat-x;
color: #FFFFFF;
} }
.header.rcue .navbar.primary .nav > li .dropdown.open .dropdown-toggle { .header.rcue .navbar.primary .nav > li a#refresh .icon-spinner6 {
text-decoration: none; margin-right: 0;
box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.2); background-image: url('img/sprites-gray.png');
border-color: #7e8385; }
.header.rcue .navbar.primary .nav > li a#refresh .icon-spinner6:hover {
background-image: url('img/sprites-white.png');
background-color: transparent;
} }
.header.rcue .navbar.primary .button { .header.rcue .navbar.primary .button {
font-size: 0.84615384615385em; font-size: 0.84615384615385em;

View file

@ -34,9 +34,71 @@ body {
font-size: 0.84615384615385em; font-size: 0.84615384615385em;
color: #dbdada; color: #dbdada;
margin-left: 1.36363636363636em; margin-left: 1.36363636363636em;
display: inline-block; float: left;
margin-top: 0.63636363636364em;
line-height: 2.36363636363636em
} }
.select-rcue {
font-size: 0.76923076923077em;
margin-left: 1em;
margin-top: 0.7em;
display: inline-block;
vertical-align: middle;
background-color: #555a5e;
background-image: none;
background-image: url(img/sprite-arrow-down.svg);
background-repeat: no-repeat;
background-position: right -26px;
border: 1px solid #676c6e;
border-radius: 2px;
padding-left: 0;
&:hover {
border-color: #7e8385;
}
select {
color: #fff;
&:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #fff;
}
option {
background-color: #fff;
color: black;
padding: 4px 10px;
}
}
}
a#refresh {
border: none;
margin: 0;
padding: 0;
float: right;
font-size: 0.76923076923077em;
margin-left: 1em;
margin-top: 1.4em;
&:hover {
background: none;
}
.icon-spinner6 {
margin-right: 0;
background-image: url('img/sprites-gray.png');
&:hover {
background-image: url('img/sprites-white.png');
background-color: transparent;
}
}
}
/*
.dropdown { .dropdown {
display: inline-block; display: inline-block;
margin-left: 0.53846153846154em; margin-left: 0.53846153846154em;
@ -116,6 +178,7 @@ body {
border-color: #7e8385; border-color: #7e8385;
} }
} }
*/
} }
.button { .button {

View file

@ -6,9 +6,14 @@ fieldset {
color: #838383; color: #838383;
font-style: italic; font-style: italic;
} }
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #333;
}
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"] { input[type="email"],
textarea {
font-size: 1.1em; font-size: 1.1em;
padding: 0 0.545454545454545em; padding: 0 0.545454545454545em;
min-width: 18.1818181818182em; min-width: 18.1818181818182em;
@ -20,18 +25,21 @@ input[type="email"] {
} }
input[type="text"]:hover, input[type="text"]:hover,
input[type="password"]:hover, input[type="password"]:hover,
input[type="email"]:hover { input[type="email"]:hover,
textarea:hover {
border-color: #62afdb; border-color: #62afdb;
} }
input[type="text"]:focus, input[type="text"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="email"]:focus { input[type="email"]:focus,
textarea:focus {
border-color: #62afdb; border-color: #62afdb;
box-shadow: #62afdb 0 0 5px; box-shadow: #62afdb 0 0 5px;
} }
input[type="text"].error, input[type="text"].error,
input[type="password"].error, input[type="password"].error,
input[type="email"].error { input[type="email"].error,
textarea.error {
border-color: #ba1212; border-color: #ba1212;
transition: all 0.33s ease-in-out; transition: all 0.33s ease-in-out;
-moz-transition: all 0.33s ease-in-out; -moz-transition: all 0.33s ease-in-out;
@ -39,9 +47,14 @@ input[type="email"].error {
} }
input[type="text"].error:focus, input[type="text"].error:focus,
input[type="password"].error:focus, input[type="password"].error:focus,
input[type="email"].error:focus { input[type="email"].error:focus,
textarea.error:focus {
box-shadow: 0 0 5px #ba1212; box-shadow: 0 0 5px #ba1212;
} }
textarea {
padding: 0.45em 0.545454545454545em;
height: auto;
}
input[type="button"], input[type="button"],
button, button,
a.button { a.button {
@ -164,6 +177,23 @@ button.primary:enabled:active,
background-color: #0099d4; background-color: #0099d4;
box-shadow: inset 0 0 5px 3px #0074ae; box-shadow: inset 0 0 5px 3px #0074ae;
} }
.destructive {
background-image: linear-gradient(top, #d90000 0%, #ad0101 100%);
background-image: -o-linear-gradient(top, #d90000 0%, #ad0101 100%);
background-image: -moz-linear-gradient(top, #d90000 0%, #ad0101 100%);
background-image: -webkit-linear-gradient(top, #d90000 0%, #ad0101 100%);
background-image: -ms-linear-gradient(top, #d90000 0%, #ad0101 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d90000), color-stop(1, 0, #ad0101));
border-color: #350000;
color: #FFFFFF;
}
.destructive:hover {
background-color: #AD0101;
}
.destructive:enabled:active {
background-color: #AD0101;
box-shadow: 0 0 5px 3px #750101 inset;
}
/* Code from Gabriel */ /* Code from Gabriel */
button.primary, button.primary,
.button.primary { .button.primary {
@ -278,6 +308,24 @@ button.primary:focus,
background-image: url(img/feedback-warning-sign.svg); background-image: url(img/feedback-warning-sign.svg);
background-color: #fef1e9; background-color: #fef1e9;
} }
.feedback.info p {
border-color: #5994b2;
background-image: url(img/feedback-info-sign.svg);
background-color: #e4f3fa;
}
.feedback.inline {
opacity: 1;
position: relative;
margin-bottom: 20px;
}
.feedback.inline p {
border-width: 1px;
}
.feedback .button {
display: inline-block;
font-size: 0.90909090909091em;
margin-left: 0.90909090909091em;
}
button, button,
a.button { a.button {
background-color: #eeeeee; background-color: #eeeeee;

View file

@ -11,10 +11,16 @@ fieldset {
font-style: italic; font-style: italic;
} }
select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #333;
}
input[type="text"], input[type="text"],
input[type="password"], input[type="password"],
input[type="email"], input[type="email"],
{ textarea {
font-size: 1.1em; font-size: 1.1em;
padding: 0 0.545454545454545em; padding: 0 0.545454545454545em;
min-width: 18.1818181818182em; min-width: 18.1818181818182em;
@ -45,6 +51,11 @@ input[type="email"],
} }
} }
textarea {
padding: 0.45em 0.545454545454545em;
height: auto;
}
input[type="button"], input[type="button"],
button, button,
a.button { a.button {
@ -180,6 +191,32 @@ button.primary:enabled:active,
box-shadow: inset 0 0 5px 3px #0074ae; box-shadow: inset 0 0 5px 3px #0074ae;
} }
.destructive {
background-image: linear-gradient(top, #D90000 0%, #AD0101 100%);
background-image: -o-linear-gradient(top, #D90000 0%, #AD0101 100%);
background-image: -moz-linear-gradient(top, #D90000 0%, #AD0101 100%);
background-image: -webkit-linear-gradient(top, #D90000 0%, #AD0101 100%);
background-image: -ms-linear-gradient(top, #D90000 0%, #AD0101 100%);
background-image: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0.0, #D90000),
color-stop(1,0, #AD0101)
);
border-color: #350000;
color: #FFFFFF;
&:hover {
background-color: #AD0101;
}
&:enabled:active {
background-color: #AD0101;
box-shadow: 0 0 5px 3px #750101 inset;
}
}
/* Code from Gabriel */ /* Code from Gabriel */
@ -320,6 +357,32 @@ button.primary,
} }
} }
&.info {
p {
border-color: #5994b2;
background-image: url(img/feedback-info-sign.svg);
background-color: #e4f3fa;
}
}
&.inline {
opacity: 1;
position: relative;
margin-bottom: 20px;
p {
border-width: 1px;
}
}
.button {
display: inline-block;
font-size: 0.90909090909091em;
margin-left: 0.90909090909091em;
}
} }
button, button,

Binary file not shown.

After

Width:  |  Height:  |  Size: 402 B

View file

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" id="svg7384" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="17px" height="17px" viewBox="0 0 17 17" enable-background="new 0 0 17 17" xml:space="preserve">
<g>
<g>
<g>
<path fill="#418093" d="M8.24,12.734c-0.544,0.018-1.048-0.486-1.031-1.031V7.766c-0.007-0.527,0.473-1.014,1-1.014
c0.528,0,1.008,0.486,1,1.014v3.938c0.008,0.467-0.354,0.914-0.813,1C8.345,12.719,8.292,12.729,8.24,12.734L8.24,12.734z"/>
</g>
<g>
<rect x="7.208" y="3.766" fill="#418093" width="2" height="2"/>
</g>
</g>
<g id="path3869_3_">
<path fill="#418093" d="M8.209,16.418C3.683,16.418,0,12.736,0,8.209C0,3.683,3.683,0,8.209,0s8.208,3.683,8.208,8.209
C16.418,12.736,12.736,16.418,8.209,16.418z M8.209,1.5C4.51,1.5,1.5,4.51,1.5,8.209s3.01,6.709,6.709,6.709
c3.699,0,6.708-3.01,6.708-6.709S11.908,1.5,8.209,1.5z"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 79 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 62 KiB

After

Width:  |  Height:  |  Size: 64 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 250 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 76 KiB

After

Width:  |  Height:  |  Size: 80 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 270 KiB

After

Width:  |  Height:  |  Size: 250 KiB

File diff suppressed because one or more lines are too long

View file

@ -86,7 +86,7 @@
</button> </button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button> </button>
<button type="submit" data-ng-click="remove()" class="danger"> <button type="submit" data-ng-click="remove()" class="destructive">
Delete Delete
</button> </button>
</div> </div>

View file

@ -58,6 +58,9 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="feedback warning inline">
<p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
</div>
</div> </div>
</div> </div>
<div id="container-right-bg"></div> <div id="container-right-bg"></div>

View file

@ -64,7 +64,7 @@
</button> </button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button> </button>
<button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed"> <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
Delete Delete
</button> </button>
</div> </div>

View file

@ -23,9 +23,11 @@
<ul class="nav pull-left"> <ul class="nav pull-left">
<li> <li>
<span class="dropdown-label" data-ng-show="showNav()">Realm:</span> <span class="dropdown-label" data-ng-show="showNav()">Realm:</span>
<div class="dropdown" data-ng-show="showNav()"> <div class="select-rcue" data-ng-show="showNav()">
<select ng-change="changeRealm()" ng-model="current.realm" ng-options="r.realm for r in current.realms"></select> <select ng-change="changeRealm()" ng-model="current.realm" ng-options="r.realm for r in current.realms"></select>
</div> </div>
<a href="#/realms/{{realm.id}}" id="refresh"><span class="icon-spinner6">Icon: spinner</span></a>
</li> </li>
</ul> </ul>
<div class="pull-right" data-ng-show="auth.loggedIn"> <div class="pull-right" data-ng-show="auth.loggedIn">

View file

@ -24,21 +24,21 @@
<label for="user" class="control-label">Required User Credentials</label> <label for="user" class="control-label">Required User Credentials</label>
<div class="controls"> <div class="controls">
<input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" class="form-control tokenfield" placeholder="Type a role and enter"> <input id="user" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredCredentials" placeholder="Type a role and enter">
</div> </div>
</div> </div>
<div class="form-group clearfix"> <div class="form-group clearfix">
<label for="application" class="control-label">Required Application Credentials</label> <label for="application" class="control-label">Required Application Credentials</label>
<div class="controls"> <div class="controls">
<input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" class="form-control tokenfield" placeholder="Type a role and enter"> <input id="application" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredApplicationCredentials" placeholder="Type a role and enter">
</div> </div>
</div> </div>
<div class="form-group clearfix"> <div class="form-group clearfix">
<label for="oauth" class="control-label">Required OAuth Credentials</label> <label for="oauth" class="control-label">Required OAuth Credentials</label>
<div class="controls"> <div class="controls">
<input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" class="form-control tokenfield" placeholder="Type a role and enter"> <input id="oauth" type="text" ui-select2="userCredentialOptions" ng-model="realm.requiredOAuthClientCredentials" placeholder="Type a role and enter">
</div> </div>
</div> </div>
</fieldset> </fieldset>

View file

@ -115,7 +115,7 @@
</button> </button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button> </button>
<button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed"> <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
Delete Delete
</button> </button>
</div> </div>

View file

@ -59,7 +59,7 @@
</button> </button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button> </button>
<button type="submit" data-ng-click="remove()" class="danger" data-ng-hide="changed"> <button type="submit" data-ng-click="remove()" class="destructive" data-ng-hide="changed">
Delete Delete
</button> </button>
</div> </div>

View file

@ -79,7 +79,7 @@
</button> </button>
<button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes <button type="submit" data-ng-click="reset()" data-ng-show="changed">Clear changes
</button> </button>
<button type="submit" data-ng-click="remove()" class="danger"> <button type="submit" data-ng-click="remove()" class="destructive">
Delete Delete
</button> </button>
</div> </div>

View file

@ -61,6 +61,9 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="feedback warning inline">
<p><strong>Your search returned no results.</strong><br>Try modifying the query and try again.</p>
</div>
</div> </div>
</div> </div>
<div id="container-right-bg"></div> <div id="container-right-bg"></div>