BigW Consortium Gitlab

sidebar.scss 3.66 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
  li {
    &.separate-item {
      padding-top: 10px;
      margin-top: 10px;
66 67
    }

68 69 70 71 72 73
    .icon-container {
      width: 34px;
      display: inline-block;
      text-align: center;
    }

74
    a {
75
      padding: 7px $gl-sidebar-padding;
76
      font-size: $gl-font-size;
77
      line-height: 24px;
78
      display: block;
79
      text-decoration: none;
80
      font-weight: normal;
81
      outline: none;
82

83 84 85
      &:hover,
      &:active,
      &:focus {
86 87 88 89
        text-decoration: none;
      }

      i {
90
        font-size: 16px;
91 92
      }

93 94 95
      i,
      svg {
        margin-right: 13px;
96
      }
97
    }
98
  }
99 100 101 102

  .count {
    float: right;
    padding: 0 8px;
Clement Ho committed
103
    border-radius: 6px;
104
  }
105 106
}

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

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

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

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

    .fa {
      transition: transform .15s;

132
      .page-sidebar-pinned & {
133 134 135 136
        transform: rotate(90deg);
      }
    }
  }
137 138 139
}

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

147 148 149
  &:hover,
  &:focus {
    color: $white-light;
150 151
    text-decoration: none;
  }
152
}
153

Phil Hughes committed
154 155 156
.page-sidebar-expanded {
  .sidebar-wrapper {
    width: $sidebar_width;
157 158
  }
}
Phil Hughes committed
159

160 161 162
.page-sidebar-pinned {
  .content-wrapper,
  .layout-nav {
163
    @media (min-width: $sidebar-breakpoint) {
164
      padding-left: $sidebar_width;
Phil Hughes committed
165
    }
166 167
  }
}
Phil Hughes committed
168

169
header.header-sidebar-pinned {
170
  @media (min-width: $sidebar-breakpoint) {
171
    padding-left: ($sidebar_width + $gl-padding);
172 173 174 175 176 177 178 179

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

    .header-content {
      padding-left: 0;
    }
Phil Hughes committed
180
  }
181 182
}

Phil Hughes committed
183
.right-sidebar-collapsed {
184
  padding-right: 0;
Phil Hughes committed
185

186
  @media (min-width: $screen-sm-min) {
Phil Hughes committed
187
    padding-right: $sidebar_collapsed_width;
188 189 190 191

    .merge-request-tabs-holder.affix {
      right: $sidebar_collapsed_width;
    }
192
  }
193 194 195

  .sidebar-collapsed-icon {
    cursor: pointer;
196 197 198 199

    .btn {
      background-color: $gray-light;
    }
200
  }
201 202
}

Phil Hughes committed
203 204 205 206
.right-sidebar-expanded {
  padding-right: 0;

  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
Phil Hughes committed
207 208 209
    &:not(.build-sidebar) {
      padding-right: $sidebar_collapsed_width;
    }
Phil Hughes committed
210 211 212 213
  }

  @media (min-width: $screen-md-min) {
    padding-right: $gutter_width;
214 215 216 217

    .merge-request-tabs-holder.affix {
      right: $gutter_width;
    }
Phil Hughes committed
218
  }
219 220 221 222

  &.with-overlay {
    padding-right: $sidebar_collapsed_width;
  }
223
}
224 225 226 227

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