debian-mirror-gitlab/app/assets/stylesheets/framework/header.scss
2016-11-03 12:29:30 +05:30

252 lines
4.4 KiB
SCSS

/*
* Application Header
*
*/
header {
transition: padding $sidebar-transition-duration;
&.navbar-empty {
height: $header-height;
background: #fff;
border-bottom: 1px solid $btn-gray-hover;
.center-logo {
margin: 8px 0;
text-align: center;
.tanuki-logo, img {
height: 36px;
}
}
}
&.navbar-gitlab {
padding: 0 16px;
z-index: 100;
margin-bottom: 0;
height: $header-height;
background-color: $background-color;
border: none;
border-bottom: 1px solid $border-color;
@media (max-width: $screen-xs-min) {
padding: 0 16px;
}
&.with-horizontal-nav {
border-bottom: none;
}
.container-fluid {
width: 100% !important;
filter: none;
padding: 0;
.nav > li > a {
color: $gl-icon-color;
font-size: 18px;
padding: 0;
margin: ($header-height - 28) / 2 0;
margin-left: 10px;
height: 28px;
min-width: 28px;
line-height: 28px;
text-align: center;
&:hover, &:focus, &:active {
background-color: $background-color;
}
.fa-caret-down {
font-size: 15px;
}
}
.navbar-toggle {
color: #666;
margin: 6px 0;
border-radius: 0;
position: absolute;
right: -10px;
padding: 6px 10px;
&:hover {
background-color: $btn-gray-hover;
}
&.active {
color: $gl-icon-color;
}
}
}
.side-nav-toggle {
position: absolute;
left: -10px;
margin: 7px 0;
font-size: 18px;
padding: 6px 10px;
border: none;
background-color: $background-color;
&:hover {
background-color: $btn-gray-hover;
}
&:focus {
outline: none;
}
}
}
.header-content {
position: relative;
height: $header-height;
padding-left: 30px;
@media (min-width: $screen-sm-min) {
padding-right: 0;
}
.dropdown-menu {
margin-top: -5px;
}
.header-logo {
position: absolute;
left: 50%;
top: 7px;
transition-duration: .3s;
z-index: 999;
#logo {
position: relative;
left: -50%;
}
svg, img {
height: 36px;
}
&:hover {
cursor: pointer;
}
@media (max-width: $screen-xs-max) {
right: 20px;
left: auto;
#logo {
left: auto;
}
}
}
.title {
position: relative;
padding-right: 20px;
margin: 0;
font-size: 19px;
max-width: 400px;
display: inline-block;
line-height: $header-height;
font-weight: normal;
color: $gl-text-color;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: top;
white-space: nowrap;
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
max-width: 300px;
}
@media (max-width: $screen-xs-max) {
max-width: 190px;
}
a {
color: $gl-text-color;
&:hover {
text-decoration: underline;
}
}
.dropdown-toggle-caret {
color: $gl-text-color;
border: transparent;
background: transparent;
position: absolute;
right: 3px;
width: 12px;
line-height: 19px;
margin-top: (($header-height - 19) / 2);
padding: 0;
font-size: 10px;
text-align: center;
cursor: pointer;
}
.project-item-select {
right: auto;
left: 0;
}
}
.navbar-collapse {
float: right;
border-top: none;
@media (max-width: $screen-xs-max) {
float: none;
}
}
}
.project-item-select-holder {
display: inline;
}
.impersonation i {
color: $red-normal;
}
}
@media (max-width: $screen-xs-max) {
header .container-fluid {
font-size: 18px;
.navbar-nav {
margin: 0;
float: none !important;
.visible-xs, .visable-sm {
display: table-cell !important;
}
}
.navbar-collapse {
padding-left: 5px;
.nav > li {
display: table-cell;
width: 1%;
}
}
}
}
.header-user {
.dropdown-menu-nav {
width: 140px;
margin-top: -5px;
}
}
.header-user-avatar {
float: left;
margin-right: 5px;
border-radius: 50%;
}