BigW Consortium Gitlab

sidebar.scss 4.92 KB
Newer Older
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 {
24 25
    z-index: 1;
    position: absolute;
26
    left: 0;
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;
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 15px;
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
        float: right;
        background: #eee;
        padding: 0 8px;
        @include border-radius(6px);
176
      }
177 178 179 180

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

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

  li {
    list-style: none;
  }
}

Phil Hughes committed
194 195 196 197 198 199 200 201 202 203 204 205
.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;
206

207 208 209
  &:hover {
    text-decoration: none;
  }
210
}
211

Phil Hughes committed
212
.page-sidebar-collapsed {
213 214
  padding-left: $sidebar_collapsed_width;

215
  .sidebar-wrapper {
216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255
    width: $sidebar_collapsed_width;

    .header-logo {
      width: $sidebar_collapsed_width;

      a {
        padding-left: ($sidebar_collapsed_width - 36) / 2;

        .gitlab-text-container {
          display: none;
        }
      }
    }

    .nav-sidebar {
      width: $sidebar_collapsed_width;

      li {
        width: auto;

        a {
          span {
            display: none;
          }
        }
      }
    }

    .collapse-nav a {
      width: $sidebar_collapsed_width;
    }

    .sidebar-user {
      padding-left: ($sidebar_collapsed_width - 36) / 2;
      width: $sidebar_collapsed_width;

      .username {
        display: none;
      }
    }
256 257
  }
}
258

Phil Hughes committed
259
.page-sidebar-expanded {
260 261
  padding-left: $sidebar_collapsed_width;

Phil Hughes committed
262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282
  @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;
        }
      }
    }
  }
283 284
}

Phil Hughes committed
285
.right-sidebar-collapsed {
286
  padding-right: 0;
Phil Hughes committed
287

288
  @media (min-width: $screen-sm-min) {
Phil Hughes committed
289
    padding-right: $sidebar_collapsed_width;
290
  }
291 292 293 294

  .sidebar-collapsed-icon {
    cursor: pointer;
  }
295 296
}

Phil Hughes committed
297 298 299 300 301 302 303 304 305 306
.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;
  }
307 308 309 310

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