gitlab-org--gitlab-foss/app/assets/stylesheets/framework/header.scss
Annabel Dunstone Gray f87774a662 Speed up animation transition; add hover state to top right icons
Remove subscribe text from button
2017-01-24 11:54:05 -06:00

285 lines
5.1 KiB
SCSS

/*
* Application Header
*
*/
header {
transition: padding $sidebar-transition-duration;
&.navbar-empty {
height: $header-height;
background: $white-light;
border-bottom: 1px solid $white-normal;
.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: $gray-light;
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-text-color-secondary;
font-size: 18px;
padding: 0;
margin: ($header-height - 28) / 2 0;
margin-left: 8px;
height: 28px;
min-width: 28px;
line-height: 28px;
text-align: center;
&.header-user-dropdown-toggle {
margin-left: 14px;
&:hover,
&:focus,
&:active {
.header-user-avatar {
border-color: rgba($avatar-border, .2);
}
}
}
&:hover,
&:focus,
&:active {
background-color: $gray-light;
color: $gl-text-color;
.todos-pending-count {
background: darken($todo-alert-blue, 10%);
}
}
.fa-caret-down {
font-size: 14px;
}
}
.navbar-toggle {
color: $nav-toggle-gray;
margin: 6px 0;
border-radius: 0;
position: absolute;
right: -10px;
padding: 6px 10px;
&:hover {
background-color: $white-normal;
}
&.active {
color: $gl-text-color-secondary;
}
}
}
.side-nav-toggle {
position: absolute;
left: -10px;
margin: 7px 0;
font-size: 18px;
padding: 6px 10px;
border: none;
background-color: $gray-light;
&:hover {
background-color: $white-normal;
color: $gl-header-nav-hover-color;
}
}
}
.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: 18px;
max-width: 385px;
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;
color: $gl-header-nav-hover-color;
}
}
.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;
&:hover {
color: $gl-header-nav-hover-color;
}
}
.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;
}
}
.page-sidebar-pinned.right-sidebar-expanded {
@media (max-width: $screen-md-max) {
.header-content .title {
width: 300px;
}
}
}
@media (max-width: $screen-xs-max) {
header .container-fluid {
font-size: 18px;
.navbar-nav {
margin: 0;
float: none !important;
.visible-xs,
.visible-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%;
border: 1px solid $avatar-border;
}