new_sidebar.scss 3.71 KB
Newer Older
1 2 3 4
@import "framework/variables";
@import 'framework/tw_bootstrap_variables';
@import "bootstrap/variables";

5
$active-background: rgba(0, 0, 0, .04);
6 7 8 9
$active-border: $indigo-500;
$active-color: $indigo-700;
$active-hover-background: $active-background;
$active-hover-color: $gl-text-color;
10
$inactive-badge-background: rgba(0, 0, 0, .08);
11 12 13
$hover-background: $indigo-700;
$hover-color: $white-light;
$inactive-color: $gl-text-color-secondary;
14 15 16 17 18 19 20
$new-sidebar-width: 220px;

.page-with-new-sidebar {
  @media (min-width: $screen-sm-min) {
    padding-left: $new-sidebar-width;
  }

21
  // Override position: absolute
22 23 24 25 26 27
  .right-sidebar {
    position: fixed;
    height: 100%;
  }
}

28 29
.context-header {
  border-bottom: 1px solid $border-color;
30
  font-weight: 600;
31 32
  display: flex;
  align-items: center;
33 34
  padding: 10px 16px 10px 10px;
  color: $gl-text-color;
35 36 37 38

  .avatar-container {
    flex: 0 0 40px;
  }
39 40

  &:hover {
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55
    background-color: $hover-background;
    color: $hover-color;
    border-color: $hover-background;

    .avatar-container {
      border-color: transparent;
    }

    .settings-avatar {
      background-color: $indigo-500;

      i {
        color: $hover-color;
      }
    }
56
  }
57 58 59 60 61 62

  .project-title,
  .group-title {
    overflow: hidden;
    text-overflow: ellipsis;
  }
63 64 65 66
}

.settings-avatar {
  background-color: $white-light;
67
  transition: background-color 100ms linear;
68

Annabel Dunstone Gray's avatar
Annabel Dunstone Gray committed
69
  i {
70 71
    font-size: 20px;
    width: 100%;
72
    color: $gl-text-color-secondary;
73 74
    text-align: center;
    align-self: center;
75
    transition: color 100ms linear;
76 77 78
  }
}

79 80 81 82
.nav-sidebar {
  position: fixed;
  z-index: 400;
  width: $new-sidebar-width;
83
  transition: width $sidebar-transition-duration;
84 85 86 87
  top: 50px;
  bottom: 0;
  left: 0;
  overflow: auto;
88 89 90 91 92 93
  background-color: $gray-normal;
  box-shadow: inset -2px 0 0 $border-color;

  a {
    text-decoration: none;
  }
94 95

  ul {
96
    padding-left: 0;
97 98 99 100
    list-style: none;
  }

  li {
101 102
    white-space: nowrap;

103 104
    a {
      display: block;
105 106
      padding: 12px 16px;
      color: $inactive-color;
107 108 109
    }
  }

110 111 112 113 114 115 116
  li.active {
    box-shadow: inset 4px 0 0 $active-border;

    > a {
      color: $active-color;
      font-weight: 700;
    }
117
  }
118 119 120 121

  @media (max-width: $screen-xs-max) {
    width: 0;
  }
122 123 124 125
}

.sidebar-sub-level-items {
  display: none;
126
  padding-bottom: 8px;
127 128 129

  > li {
    a {
130 131
      font-size: 12px;
      padding: 8px 16px 8px 24px;
132

133 134 135 136
      &:hover,
      &:focus {
        background: $active-hover-background;
        color: $active-hover-color;
137 138 139 140
      }
    }

    &.active {
141 142 143 144 145 146 147
      a {
        &,
        &:hover,
        &:focus {
          background: $active-background;
          color: $active-color;
        }
148 149 150 151 152 153 154 155 156
      }
    }
  }
}

.sidebar-top-level-items {
  > li {
    .badge {
      float: right;
157 158
      background-color: $inactive-badge-background;
      color: $inactive-color;
159 160 161
    }

    &.active {
162
      background: $active-background;
163 164

      .badge {
165 166
        color: $active-color;
        font-weight: 600;
167 168 169 170 171 172 173
      }

      .sidebar-sub-level-items {
        display: block;
      }
    }

174 175 176
    > a:hover {
      background-color: $hover-background;
      color: $hover-color;
177 178

      .badge {
179 180 181
        transition: background-color 100ms linear, color 100ms linear;
        background-color: $indigo-500;
        color: $hover-color;
182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199
      }
    }
  }
}


// Make issue boards full-height now that sub-nav is gone

.boards-list {
  height: calc(100vh - 50px);

  @media (min-width: $screen-sm-min) {
    height: 475px; // Needed for PhantomJS
    // scss-lint:disable DuplicateProperty
    height: calc(100vh - 120px);
    // scss-lint:enable DuplicateProperty
  }
}
200 201 202 203 204 205 206 207 208 209


// Change color of all horizontal tabs to match the new indigo color
.nav-links li.active a {
  border-bottom-color: $active-border;

  .badge {
    font-weight: 600;
  }
}