debian-mirror-gitlab/app/assets/stylesheets/framework/header.scss

253 lines
4.4 KiB
SCSS
Raw Normal View History

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