header.scss 2.78 KB
Newer Older
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
1 2 3 4
/*
 *  Application Header
 *
 */
5
header {
6 7
  transition-duration: .3s;

8 9
  &.navbar-empty {
    background: #FFF;
10
    border-bottom: 1px solid #EEE;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
11 12 13 14

    .center-logo {
      margin: 8px 0;
      text-align: center;
15 16 17 18

      img {
        height: 32px;
      }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
19
    }
20 21
  }

22
  &.navbar-gitlab {
23
    padding: 0 20px;
24
    z-index: 100;
25
    margin-bottom: 0;
26
    min-height: $header-height;
27
    background-color: #fff;
28
    border: none;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
29

30
    .container-fluid {
31
      width: 100% !important;
32
      filter: none;
33
      padding: 0;
34 35

      .nav > li > a {
36 37
        color: #7f8fa4;
        font-size: 18px;
38
        padding: 0;
39
        margin: ($header-height - 28) / 2 0;
40
        margin-left: 10px;
41 42 43
        height: 28px;
        width: 28px;
        line-height: 28px;
44
        text-align: center;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
45

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
46
        &:hover, &:focus, &:active {
47
          background-color: #FFF;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
48
        }
49 50
      }

51
      .navbar-toggle {
52
        color: #666;
kingcody's avatar
kingcody committed
53
        margin: 0;
54
        border-radius: 0;
55 56
        position: absolute;
        right: 2px;
57
        top: 15px;
58 59 60 61 62 63

        &:hover {
          background-color: #EEE;
        }
      }
    }
64 65
  }

66 67 68 69 70
  .header-content {
    height: $header-height;

    .title {
      margin: 0;
71
      overflow: hidden;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
72
      font-size: 19px;
73
      line-height: $header-height;
74 75
      font-weight: normal;
      color: #4c4e54;
76 77 78
      text-overflow: ellipsis;
      vertical-align: top;
      white-space: nowrap;
79 80

      a {
81
        color: #4c4e54;
82 83 84 85 86
        &:hover {
          text-decoration: underline;
        }
      }
    }
87 88 89 90

    .navbar-collapse {
      float: right;
    }
91 92
  }

93
  .search {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
94
    margin-right: 10px;
95
    margin-left: 10px;
96
    margin-top: ($header-height - 36) / 2;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
97 98 99

    form {
      margin: 0;
100
      padding: 0;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
101
    }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
102

Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
103
    .search-input {
104
      width: 220px;
105
      background-image: image-url("icon-search.png");
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
106
      background-repeat: no-repeat;
107 108
      background-position: 195px;
      @include input-big;
109 110 111 112 113 114 115

      &:focus {
        @include box-shadow(none);
        outline: none;
        border-color: #DDD;
        background-color: #FFF;
      }
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
116 117 118 119
    }
  }
}

120
@mixin collapsed-header {
121
  margin-left: $sidebar_collapsed_width;
122 123
}

124
@media (max-width: $screen-md-max) {
125
  .header-collapsed, .header-expanded {
126
    @include collapsed-header;
127 128 129 130 131
  }
}

@media(min-width: $screen-md-max) {
  .header-collapsed {
132
    @include collapsed-header;
133 134 135
  }

  .header-expanded {
136
    margin-left: $sidebar_width;
137 138
  }
}
139 140

@media (max-width: $screen-xs-max) {
141
  header .container-fluid {
142 143 144
    font-size: 18px;

    .navbar-nav {
145 146
      margin: 0px;
      float: none !important;
147 148 149 150 151 152

      .visible-xs, .visable-sm {
        display: table-cell !important;
      }
    }

153 154 155 156 157 158 159 160 161 162 163
    .navbar-collapse {
      padding-left: 5px;

      li {
        display: table-cell;
        width: 1%;

        a {
          margin-left: 8px !important;
        }
      }
164 165 166
    }
  }
}