sidebar.scss 4.33 KB
Newer Older
1
.page-with-sidebar {
2 3
  padding-top: $header-height;

4 5 6
  .sidebar-wrapper {
    position: fixed;
    top: 0;
7
    bottom: 0;
8 9
    overflow-y: auto;
    overflow-x: hidden;
10 11
    left: 0;
    height: 100%;
12
    transition-duration: .3s;
13
  }
14 15 16
}

.sidebar-wrapper {
17
  z-index: 99;
18
  background: $background-color;
19
  transition-duration: .3s;
20 21 22 23
}

.content-wrapper {
  width: 100%;
24
  padding: 20px;
25 26 27

  .container-fluid {
    background: #FFF;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
28
    padding: $gl-padding;
29 30 31 32 33 34

    &.container-blank {
      background: none;
      padding: 0;
      border: none;
    }
35
  }
36 37 38
}

.nav-sidebar {
39
  margin-top: 14 + $header-height;
40
  margin-bottom: 100px;
41
  transition-duration: .3s;
42
  list-style: none;
43
  overflow: hidden;
44 45 46 47

  &.navbar-collapse {
    padding: 0px !important;
  }
48

49 50
  li {
    width: $sidebar_width;
51

52 53 54
    &.separate-item {
      padding-top: 10px;
      margin-top: 10px;
55 56
    }

57
    a {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
58 59
      padding: 7px 15px;
      font-size: $gl-font-size;
60
      line-height: 24px;
61 62
      color: $gray;
      display: block;
63
      text-decoration: none;
64 65
      padding-left: 22px;
      font-weight: normal;
66
      outline: none;
67 68 69 70

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

72 73 74 75 76
      &:active, &:focus {
        text-decoration: none;
      }

      i {
77
        width: 16px;
78
        color: $gray-light;
79
        margin-right: 13px;
80 81 82 83 84 85 86 87
      }

      .count {
        float: right;
        background: #eee;
        padding: 0px 8px;
        @include border-radius(6px);
      }
88
    }
89 90 91
  }
}

92
.sidebar-subnav {
93 94 95 96 97 98 99 100
  margin-left: 0px;
  padding-left: 0px;

  li {
    list-style: none;
  }
}

101
@mixin expanded-sidebar {
102
  padding-left: $sidebar_width;
103
  transition-duration: .3s;
104 105

  .sidebar-wrapper {
106
    width: $sidebar_width;
107 108

    .nav-sidebar {
109
      width: $sidebar_width;
110
    }
111 112 113

    .nav-sidebar li a{
      width: 230px;
114 115 116 117 118 119

      &.back-link {
        i {
          visibility: hidden;
        }
      }
120
    }
121 122
  }
}
123

124
@mixin folded-sidebar {
125
  padding-left: 60px;
126
  transition-duration: .3s;
127 128

  .sidebar-wrapper {
129
    width: $sidebar_collapsed_width;
130

131 132 133 134
    .header-logo {
      width: $sidebar_collapsed_width;

      a {
135
        padding-left: 12px;
136 137 138 139 140

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

143
    .nav-sidebar {
144
      width: $sidebar_collapsed_width;
145

146 147 148 149
      li a {
        span {
          display: none;
        }
150 151
      }
    }
152 153

    .collapse-nav a {
154
      width: $sidebar_collapsed_width;
155
    }
156 157

    .sidebar-user {
158
      padding-left: 12px;
159
      width: $sidebar_collapsed_width;
160 161 162 163

      .username {
        display: none;
      }
164
    }
165 166
  }
}
167

168
.collapse-nav a {
169
  width: $sidebar_width;
170
  position: fixed;
171
  bottom: 0;
172
  left: 0;
173
  font-size: 13px;
174
  background: transparent;
175
  height: 40px;
176
  text-align: center;
177
  line-height: 40px;
178
  transition-duration: .3s;
179
  outline: none;
Sabba Petri's avatar
Sabba Petri committed
180 181 182 183
}

.collapse-nav a:hover {
  text-decoration: none;
184
  background: #f2f6f7;
185 186
}

187 188 189
@media (max-width: $screen-md-max) {
  .page-sidebar-collapsed {
    @include folded-sidebar;
190 191
  }

192 193
  .page-sidebar-expanded {
    @include folded-sidebar;
194 195
  }

196 197 198
  .collapse-nav {
    display: none;
  }
199 200
}

201
@media(min-width: $screen-md-max) {
202 203 204
  .page-sidebar-collapsed {
    @include folded-sidebar;
  }
205

206 207
  .page-sidebar-expanded {
    @include expanded-sidebar;
208 209
  }
}
210 211

.sidebar-user {
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
212
  padding: 9px 22px;
213
  position: fixed;
214
  bottom: 40px;
215
  width: $sidebar_width;
216
  overflow: hidden;
217
  transition-duration: .3s;
218

219
  .username {
220
    margin-left: 10px;
221
    width: $sidebar_width - 2 * 10px;
222
    font-size: 16px;
223
    line-height: 34px;
224 225
  }
}
226 227 228 229 230 231 232 233 234 235 236 237 238 239

.sidebar-wrapper {
  .header-logo {
    border-bottom: 1px solid transparent;
    float: left;
    height: $header-height;
    width: $sidebar_width;
    overflow: hidden;
    transition-duration: .3s;

    a {
      float: left;
      height: $header-height;
      width: 100%;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
240
      padding: 10px 22px;
241
      overflow: hidden;
242
      outline: none;
243

244 245 246 247 248 249
      img {
        width: 36px;
        height: 36px;
      }

      #tanuki-logo, img {
250 251 252 253 254 255 256 257 258 259 260
        float: left;
      }

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

        h3 {
          width: 158px;
          float: left;
          margin: 0;
          margin-left: 14px;
Dmitriy Zaporozhets's avatar
Dmitriy Zaporozhets committed
261
          font-size: 19px;
262
          line-height: 41px;
263 264 265 266 267 268 269 270 271 272
          font-weight: normal;
        }
      }
    }

    &:hover {
      background-color: #EEE;
    }
  }
}
273 274 275 276 277 278 279 280 281 282


.tanuki-shape {
  transition: all 0.8s;

  &:hover {
    fill: rgb(255, 255, 255);
    transition: all 0.1s;
  }
}