sidebar.scss 5.11 KB
Newer Older
Phil Hughes's avatar
Phil Hughes committed
1 2 3 4 5 6 7
#logo {
  z-index: 2;
  position: absolute;
  width: 58px;
  cursor: pointer;
}

8
.page-with-sidebar {
9 10 11
  padding-top: $header-height;
  transition-duration: .3s;

12 13 14
  .sidebar-wrapper {
    position: fixed;
    top: 0;
15
    bottom: 0;
16 17
    overflow-y: auto;
    overflow-x: hidden;
18 19
    left: 0;
    height: 100%;
20
    transition-duration: .3s;
21
  }
22

23
  .gitlab-text-container-link {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
24 25
    z-index: 1;
    position: absolute;
26
    left: 0;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
27
  }
28 29 30
}

.sidebar-wrapper {
31
  z-index: 1000;
32
  background: $background-color;
33 34 35 36
}

.content-wrapper {
  width: 100%;
37 38

  .container-fluid {
39
    background: #fff;
40
    padding: 0 $gl-padding;
41 42 43 44 45 46

    &.container-blank {
      background: none;
      padding: 0;
      border: none;
    }
47
  }
48 49
}

50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
.sidebar-wrapper {
  .header-logo {
    border-bottom: 1px solid transparent;
    float: left;
    height: $header-height;
    width: $sidebar_width;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    transition-duration: .3s;

    a {
      float: left;
      height: $header-height;
      width: 100%;
      padding: 11px 0 11px 22px;
      overflow: hidden;
      outline: none;
      transition-duration: .3s;

      img {
        width: 36px;
        height: 36px;
      }

      #tanuki-logo, img {
        float: left;
      }

      .gitlab-text-container {
        width: 230px;

        h3 {
          width: 158px;
          float: left;
          margin: 0;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
86
          margin-left: 50px;
87 88 89 90 91 92 93 94
          font-size: 19px;
          line-height: 41px;
          font-weight: normal;
        }
      }
    }

    &:hover {
95
      background-color: #eee;
96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119
    }
  }

  .sidebar-user {
    padding: 9px 22px;
    position: fixed;
    bottom: 40px;
    width: $sidebar_width;
    overflow: hidden;
    transition-duration: .3s;

    .username {
      margin-left: 10px;
      width: $sidebar_width - 2 * 10px;
      font-size: 16px;
      line-height: 34px;
    }
  }
}


.tanuki-shape {
  transition: all 0.8s;

120
  &:hover, &.highlight {
121 122 123 124 125 126
    fill: rgb(255, 255, 255);
    transition: all 0.1s;
  }
}


127
.nav-sidebar {
128
  margin-top: 14 + $header-height;
129
  margin-bottom: 100px;
130
  transition-duration: .3s;
131
  list-style: none;
132
  overflow: hidden;
133 134

  &.navbar-collapse {
135
    padding: 0 !important;
136
  }
137

138 139
  li {
    width: $sidebar_width;
140

141 142 143
    &.separate-item {
      padding-top: 10px;
      margin-top: 10px;
144 145
    }

146
    a {
147
      padding: 7px 12px;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
148
      font-size: $gl-font-size;
149
      line-height: 24px;
150 151
      color: $gray;
      display: block;
152
      text-decoration: none;
153
      padding-left: 23px;
154
      font-weight: normal;
155
      outline: none;
156 157 158 159

      &:hover {
        text-decoration: none;
      }
160

161 162 163 164 165
      &:active, &:focus {
        text-decoration: none;
      }

      i {
166
        width: 16px;
167
        color: $gray-light;
168
        margin-right: 13px;
169 170 171
      }

      .count {
172 173 174 175 176 177
        &:before {
          content: '(';
        }
        &:after {
          content: ')';
        }
178
      }
179 180 181 182

      &.back-link i {
        transition-duration: .3s;
      }
183
    }
184 185 186
  }
}

187
.sidebar-subnav {
188 189
  margin-left: 0;
  padding-left: 0;
190 191 192 193 194 195

  li {
    list-style: none;
  }
}

196 197 198 199 200 201 202
.expand-nav a {
  color: $gl-icon-color;
  width: 60px;
  position: fixed;
  top: 0;
  left: 0;
  font-size: 20px;
203
  background: #fff;
204 205 206 207 208 209 210 211 212 213 214 215 216
  height: 59px;
  text-align: center;
  line-height: 59px;
  border-bottom: 1px solid #eee;
  transition-duration: .3s;
  outline: none;
  z-index: 100;

  &:hover {
    text-decoration: none;
  }
}

Phil Hughes's avatar
Phil Hughes committed
217 218 219 220 221 222 223 224 225 226 227 228
.collapse-nav a {
  width: $sidebar_width;
  position: fixed;
  bottom: 0;
  left: 0;
  font-size: 13px;
  background: transparent;
  height: 40px;
  text-align: center;
  line-height: 40px;
  transition-duration: .3s;
  outline: none;
229

230 231 232
  &:hover {
    text-decoration: none;
  }
233
}
234

Phil Hughes's avatar
Phil Hughes committed
235
.page-sidebar-collapsed {
236
  .sidebar-wrapper {
237
    display: none;
238 239
  }
}
240

Phil Hughes's avatar
Phil Hughes committed
241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262
.page-sidebar-expanded {
  @media (min-width: $screen-md-min) {
    padding-left: $sidebar_width;
  }

  .sidebar-wrapper {
    width: $sidebar_width;

    .nav-sidebar {
      width: $sidebar_width;
    }

    .nav-sidebar li a {
      width: 230px;

      &.back-link {
        i {
          opacity: 0;
        }
      }
    }
  }
263 264
}

Phil Hughes's avatar
Phil Hughes committed
265
.right-sidebar-collapsed {
266
  padding-right: 0;
Phil Hughes's avatar
Phil Hughes committed
267

268
  @media (min-width: $screen-sm-min) {
Phil Hughes's avatar
Phil Hughes committed
269
    padding-right: $sidebar_collapsed_width;
270
  }
271 272 273 274

  .sidebar-collapsed-icon {
    cursor: pointer;
  }
275 276
}

Phil Hughes's avatar
Phil Hughes committed
277 278 279 280 281 282 283 284 285 286
.right-sidebar-expanded {
  padding-right: 0;

  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    padding-right: $sidebar_collapsed_width;
  }

  @media (min-width: $screen-md-min) {
    padding-right: $gutter_width;
  }
287 288 289 290

  &.with-overlay {
    padding-right: $sidebar_collapsed_width;
  }
291
}
292

293 294
.complex-sidebar {
  display: inline-block;
295

296 297 298 299
  .nav-primary {
    width: 61px;
    float: left;
    height: 100vh;
300

301
    .nav-sidebar {
302 303
      width: 60px;

304
      li a {
305 306
        width: 60px;

307 308
        span {
          display: none;
309 310 311
        }
      }
    }
312
  }
313

314
  .nav-secondary {
315 316
    $nav-secondary-width: 168px;

317
    float: left;
318
    width: $nav-secondary-width;
319 320

    .nav-sidebar {
321
      width: $nav-secondary-width;
322

323 324
      li {
        width: $nav-secondary-width;
325

326 327 328 329 330 331
        a {
          width: $nav-secondary-width;

          i {
            display: none;
          }
332 333 334 335 336
        }
      }
    }
  }
}