BigW Consortium Gitlab

sidebar.scss 3.92 KB
Newer Older
1
.page-with-sidebar {
2
  padding: $header-height 0 25px;
3
  transition: padding $sidebar-transition-duration;
4

5 6
  &.page-sidebar-pinned {
    .sidebar-wrapper {
Clement Ho committed
7
      box-shadow: none;
8 9 10
    }
  }

11 12 13
  .sidebar-wrapper {
    position: fixed;
    top: 0;
14
    bottom: 0;
15 16
    left: 0;
    height: 100%;
17
    width: 0;
18 19
    overflow: hidden;
    transition: width $sidebar-transition-duration;
Clement Ho committed
20
    box-shadow: 2px 0 16px 0 $black-transparent;
21
  }
22 23 24
}

.sidebar-wrapper {
25
  z-index: 1000;
26
  background: $background-color;
27 28 29 30 31

  .nicescroll-rails-hr {
    // TODO: Figure out why nicescroll doesn't hide horizontal bar
    display: none!important;
  }
32 33 34 35
}

.content-wrapper {
  width: 100%;
36
  transition: padding $sidebar-transition-duration;
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
}

.nav-sidebar {
51 52
  position: absolute;
  top: 50px;
53
  bottom: 0;
54
  width: $sidebar_width;
55 56
  overflow-y: auto;
  overflow-x: hidden;
57 58

  &.navbar-collapse {
59
    padding: 0 !important;
60
  }
61

62 63 64 65 66
  .sidebar-header {
    padding: 11px 22px 12px;
    font-size: 20px;
  }

67 68 69 70
  li {
    &.separate-item {
      padding-top: 10px;
      margin-top: 10px;
71 72
    }

73 74 75 76 77 78
    .icon-container {
      width: 34px;
      display: inline-block;
      text-align: center;
    }

79
    a {
80
      padding: 7px $gl-sidebar-padding;
81
      font-size: $gl-font-size;
82
      line-height: 24px;
83
      display: block;
84
      text-decoration: none;
85
      font-weight: normal;
86

87 88 89
      &:hover,
      &:active,
      &:focus {
90 91 92 93
        text-decoration: none;
      }

      i {
94
        font-size: 16px;
95 96
      }

97 98 99
      i,
      svg {
        margin-right: 13px;
100
      }
101
    }
102
  }
103 104 105 106

  .count {
    float: right;
    padding: 0 8px;
Clement Ho committed
107
    border-radius: 6px;
108
  }
109 110
}

111
.sidebar-action-buttons {
112
  width: $sidebar_width;
113
  position: absolute;
114
  top: 0;
Phil Hughes committed
115
  left: 0;
116
  min-height: 50px;
117 118
  padding: 5px 0;
  font-size: 18px;
119
  line-height: 30px;
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135

  .toggle-nav-collapse {
    left: 0;
  }

  .pin-nav-btn {
    right: 0;
    display: none;

    @media (min-width: $sidebar-breakpoint) {
      display: block;
    }

    .fa {
      transition: transform .15s;

136
      .page-sidebar-pinned & {
137 138 139 140
        transform: rotate(90deg);
      }
    }
  }
141 142 143
}

.nav-header-btn {
144
  padding: 10px $gl-sidebar-padding;
145
  color: inherit;
Phil Hughes committed
146
  transition-duration: .3s;
147 148
  position: absolute;
  top: 0;
Fatih Acet committed
149
  cursor: pointer;
150

151 152 153
  &:hover,
  &:focus {
    color: $white-light;
154 155
    text-decoration: none;
  }
156
}
157

Phil Hughes committed
158 159 160
.page-sidebar-expanded {
  .sidebar-wrapper {
    width: $sidebar_width;
161 162
  }
}
Phil Hughes committed
163

164 165 166
.page-sidebar-pinned {
  .content-wrapper,
  .layout-nav {
167
    @media (min-width: $sidebar-breakpoint) {
168
      padding-left: $sidebar_width;
Phil Hughes committed
169
    }
170
  }
171 172 173 174 175 176 177 178 179 180 181 182

  .merge-request-tabs-holder.affix {
    @media (min-width: $sidebar-breakpoint) {
      left: $sidebar_width;
    }
  }

  &.right-sidebar-expanded {
    .line-resolve-all-container {
      display: none;
    }
  }
183
}
Phil Hughes committed
184

185
header.header-sidebar-pinned {
186
  @media (min-width: $sidebar-breakpoint) {
187
    padding-left: ($sidebar_width + $gl-padding);
188 189 190 191 192 193 194 195

    .side-nav-toggle {
      display: none;
    }

    .header-content {
      padding-left: 0;
    }
Phil Hughes committed
196
  }
197 198
}

Phil Hughes committed
199
.right-sidebar-collapsed {
200
  padding-right: 0;
Phil Hughes committed
201

202
  @media (min-width: $screen-sm-min) {
Phil Hughes committed
203
    padding-right: $sidebar_collapsed_width;
204 205 206 207

    .merge-request-tabs-holder.affix {
      right: $sidebar_collapsed_width;
    }
208
  }
209 210 211

  .sidebar-collapsed-icon {
    cursor: pointer;
212 213 214 215

    .btn {
      background-color: $gray-light;
    }
216
  }
217 218
}

Phil Hughes committed
219 220 221 222
.right-sidebar-expanded {
  padding-right: 0;

  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
Phil Hughes committed
223 224 225
    &:not(.build-sidebar) {
      padding-right: $sidebar_collapsed_width;
    }
Phil Hughes committed
226 227 228 229
  }

  @media (min-width: $screen-md-min) {
    padding-right: $gutter_width;
230 231 232 233

    .merge-request-tabs-holder.affix {
      right: $gutter_width;
    }
Phil Hughes committed
234
  }
235 236 237 238

  &.with-overlay {
    padding-right: $sidebar_collapsed_width;
  }
239
}
240 241 242 243

.right-sidebar {
  border-left: 1px solid $border-color;
}