Fix responsive issue in clud header

revert-70aa11f8
kamidu 8 years ago
parent 6e19ec31e3
commit 8a07639d6b

@ -22,7 +22,7 @@
<span class="icon fw-stack fw-lg"> <span class="icon fw-stack fw-lg">
<i class="fw fw-organization fw-stack-1x" title=" {{@user.domain}}"></i> <i class="fw fw-organization fw-stack-1x" title=" {{@user.domain}}"></i>
</span> </span>
<span class="hidden-xs"> <span class="hidden-xs username">
{{@user.domain}} {{@user.domain}}
</span> </span>
@ -175,7 +175,7 @@
<i class="fw fw-circle-outline fw-stack-2x" title="User"></i> <i class="fw fw-circle-outline fw-stack-2x" title="User"></i>
<i class="fw fw-user fw-stack-1x" title="User"></i> <i class="fw fw-user fw-stack-1x" title="User"></i>
</span> </span>
<span class="hidden-xs"> <span class="hidden-xs username">
{{@user.username}}</span><span class="caret"></span> {{@user.username}}</span><span class="caret"></span>
</a> </a>
<ul class="dropdown-menu dropdown-menu-right float-remove-xs position-static-xs text-center-xs remove-margin-xs slideInDown" <ul class="dropdown-menu dropdown-menu-right float-remove-xs position-static-xs text-center-xs remove-margin-xs slideInDown"

@ -42,7 +42,7 @@
<div class="modal-header"> <div class="modal-header">
<h4 class="pull-left modal-title"> <h4 class="pull-left modal-title">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-user fw-stack-2x"></i> <i class="fw fw-user fw-stack-2x user-icon-black"></i>
<span class="fw-stack fw-move-right fw-move-bottom"> <span class="fw-stack fw-move-right fw-move-bottom">
<i class="fw fw-circle-outline fw-stack-2x"></i> <i class="fw fw-circle-outline fw-stack-2x"></i>
<i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i> <i class="fw fw-circle fw-stack-2x fw-stroke text-info"></i>

@ -16,12 +16,10 @@
* under the License. * under the License.
*/ */
.wr-input-control .helper { .wr-input-control .helper {
font-weight: 100; font-weight: 100;
} }
.wr-input-control .cus-col-25 { .wr-input-control .cus-col-25 {
float: left; float: left;
width: 25%; width: 25%;
@ -53,6 +51,12 @@
/*padding-left:20px;*/ /*padding-left:20px;*/
/*}*/ /*}*/
.user-icon-black {
color: black !important;
}
/**/
/* wizard */ /* wizard */
.wr-wizard { .wr-wizard {
@ -99,6 +103,9 @@
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
header .username {
max-width: calc(100% - 100px);
}
body > .page-content-wrapper > .container, body > .page-content-wrapper > .container,
body > .page-content-wrapper > .container-fluid { body > .page-content-wrapper > .container-fluid {
margin: 1% 1% 1%; margin: 1% 1% 1%;
@ -110,6 +117,15 @@ header .brand h1 {
text-transform: none !important; text-transform: none !important;
} }
header .username {
display: inline-block;
max-width: 180px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
vertical-align: middle;
}
.visible-inline-block { .visible-inline-block {
display: inline-block !important; display: inline-block !important;
} }
@ -121,18 +137,22 @@ header .brand h1 {
max-width: 32em; max-width: 32em;
background-color: #006690 background-color: #006690
} }
.cloud-menu .popover-title,.navbar-header .popover-title {
.cloud-menu .popover-title, .navbar-header .popover-title {
background-color: #006690; background-color: #006690;
font-size: 16px; font-size: 16px;
border-bottom: none; border-bottom: none;
font-weight: 400; font-weight: 400;
} }
.cloud-menu .popover.bottom>.arrow{
margin-left:-2px; .cloud-menu .popover.bottom > .arrow {
margin-left: -2px;
} }
.cloud-menu .popover.bottom>.arrow:after,.navbar-header .popover.bottom>.arrow:after{
.cloud-menu .popover.bottom > .arrow:after, .navbar-header .popover.bottom > .arrow:after {
border-bottom-color: #006690; border-bottom-color: #006690;
} }
.cloud-block { .cloud-block {
float: left; float: left;
width: 8.2em; width: 8.2em;
@ -142,11 +162,13 @@ header .brand h1 {
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.cloud-name { .cloud-name {
font-size:14px; font-size: 14px;
margin-top: .5em; margin-top: .5em;
font-weight: 400; font-weight: 400;
} }
.cloud-menu-popover { .cloud-menu-popover {
position: relative; position: relative;
float: right; float: right;
@ -158,42 +180,50 @@ header .brand h1 {
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
} }
#cloud-menu-popover-xs { #cloud-menu-popover-xs {
color: #fff; color: #fff;
line-height:24px; line-height: 24px;
border: none; border: none;
margin-right: 15px!important; margin-right: 15px !important;
} }
.navbar-toggle{
border:none; .navbar-toggle {
border: none;
border-radius: 0px; border-radius: 0px;
} }
.navbar-header .popover { .navbar-header .popover {
border-radius: 0px; border-radius: 0px;
width: 21em; width: 21em;
max-width:32em; max-width: 32em;
background-color: #006690; background-color: #006690;
} }
.navbar-header .popover .popover-content{
padding:0px; .navbar-header .popover .popover-content {
padding: 0px;
} }
.cloud-menu .popover-content { .cloud-menu .popover-content {
padding: 0px; padding: 0px;
} }
.cloud-actions { .cloud-actions {
background-color: #005578; background-color: #005578;
float: left; float: left;
position: absolute; position: absolute;
width: 100%; width: 100%;
left: 0px; left: 0px;
overflow:hidden; overflow: hidden;
} }
.cloud-actions h3 { .cloud-actions h3 {
font-size: 16px; font-size: 16px;
font-weight: 400; font-weight: 400;
padding-left: 14px; padding-left: 14px;
margin-top: 10px; margin-top: 10px;
} }
.cloud-block-invert { .cloud-block-invert {
color: #fff; color: #fff;
float: left; float: left;
@ -210,21 +240,25 @@ header .brand h1 {
background-color: #fff; background-color: #fff;
cursor: pointer; cursor: pointer;
} }
.cloud-actions a:hover { .cloud-actions a:hover {
color: #d7d5d5; color: #d7d5d5;
background-color: #3d3d3d; background-color: #3d3d3d;
text-decoration: none text-decoration: none
} }
.cloud-apps a { .cloud-apps a {
text-decoration: none; text-decoration: none;
color: #006690 !important; color: #006690 !important;
cursor: pointer cursor: pointer
} }
.cloud-apps a:hover { .cloud-apps a:hover {
text-decoration: none; text-decoration: none;
color: #006690; color: #006690;
background-color: #c5c5c5; background-color: #c5c5c5;
} }
.cloud-apps .cloud-actions a { .cloud-apps .cloud-actions a {
color: #fff color: #fff
} }

Loading…
Cancel
Save