cycle_analytics.scss 6.29 KB
Newer Older
1
#cycle-analytics {
2
  max-width: 1000px;
3 4
  margin: 24px auto 0;
  position: relative;
5

6
  .landing {
7
    margin-top: 0;
8 9 10 11 12 13 14 15 16 17

    .inner-content {
      white-space: normal;

      h4,
      p {
        margin: 7px 0 0;
        max-width: 480px;
        padding: 0 $gl-padding;

Clement Ho's avatar
Clement Ho committed
18
        @include media-breakpoint-down(sm) {
19 20 21 22
          margin: 0 auto;
        }
      }
    }
23

24
    .svg-container svg {
25 26 27
      width: 136px;
      height: 136px;
    }
28 29
  }

30 31
  .col-headers {
    ul {
32
      @include clearfix;
33 34 35 36 37 38 39 40 41 42 43 44 45
      margin: 0;
      padding: 0;
    }

    li {
      display: inline-block;
      float: left;
      line-height: 50px;
      width: 20%;
    }

    .fa {
      color: $cycle-analytics-light-gray;
46 47 48 49

      &:hover {
        color: $gl-text-color;
      }
50 51 52
    }

    .stage-header {
53
      width: 18.5%;
54 55 56
    }

    .median-header {
57
      width: 21.5%;
58
    }
59

60 61 62 63 64 65 66 67 68
    .event-header {
      width: 45%;
    }

    .total-time-header {
      width: 15%;
    }
  }

Clement Ho's avatar
Clement Ho committed
69
  .card {
70 71
    .content-block {
      padding: 24px 0;
72
      border-bottom: 0;
73
      position: relative;
74

Clement Ho's avatar
Clement Ho committed
75
      @include media-breakpoint-down(xs) {
76
        padding: 6px 0 24px;
77
      }
78 79 80 81
    }

    .column {
      text-align: center;
82

Clement Ho's avatar
Clement Ho committed
83
      @include media-breakpoint-down(xs) {
84 85
        padding: 15px 0;
      }
86 87 88 89

      .header {
        font-size: 30px;
        line-height: 38px;
90
        font-weight: $gl-font-weight-normal;
91 92 93 94 95
        margin: 0;
      }

      .text {
        color: $layout-link-gray;
96
        margin: 0;
97
      }
98 99

      &:last-child {
Clement Ho's avatar
Clement Ho committed
100
        @include media-breakpoint-down(xs) {
101 102
          text-align: center;
        }
103
      }
104 105 106
    }
  }

107 108 109 110
  .js-ca-dropdown {
    top: $gl-padding-top;
  }

111 112 113 114 115 116
  .fa-spinner {
    font-size: 28px;
    position: relative;
    margin-left: -20px;
    left: 50%;
    margin-top: 36px;
117
  }
118

119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142
  .stage-panel-body {
    display: flex;
    flex-wrap: wrap;
  }

  .stage-nav,
  .stage-entries {
    display: flex;
    vertical-align: top;
    font-size: $gl-font-size;
  }

  .stage-nav {
    width: 40%;
    margin-bottom: 0;

    ul {
      padding: 0;
      margin: 0;
      width: 100%;
    }

    li {
      @include clearfix;
143
      list-style-type: none;
144 145 146 147 148 149
    }

    .stage-nav-item {
      line-height: 65px;

      &.active {
150 151 152
        background: $blue-50;
        border-color: $blue-300;
        box-shadow: inset 4px 0 0 0 $blue-500;
153 154
      }

155 156 157
      &:hover:not(.active) {
        background-color: $gray-lightest;
        box-shadow: inset 2px 0 0 0 $border-color;
158
        cursor: pointer;
159 160
      }

161 162
      .stage-nav-item-cell.stage-name {
        width: 44.5%;
163 164
      }

165 166
      .stage-nav-item-cell.stage-median {
        min-width: 43%;
167
      }
168

169 170
      .stage-empty,
      .not-available {
171
        color: $gl-text-color-secondary;
172
      }
173 174 175
    }
  }

176 177 178 179 180
  .stage-panel-container {
    width: 100%;
    overflow: auto;
  }

181
  .stage-panel {
182 183
    min-width: 968px;

184
    .card-header {
185 186 187 188 189 190
      padding: 0;
      background-color: transparent;
    }

    .events-description {
      line-height: 65px;
191
      padding: 0 $gl-padding;
192
    }
193

194 195
    .events-info {
      color: $gl-text-color-secondary;
196 197 198 199 200 201 202 203 204 205 206 207 208 209 210
    }
  }

  .stage-events {
    width: 60%;
    overflow: scroll;
    height: 467px;
  }

  .stage-event-list {
    margin: 0;
    padding: 0;
  }

  .stage-event-item {
211
    @include clearfix;
212 213
    list-style-type: none;
    padding: 0 0 $gl-padding;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
214
    margin: 0 $gl-padding $gl-padding;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
215
    border-bottom: 1px solid $gray-darker;
216 217

    &:last-child {
218
      border-bottom: 0;
219 220 221
      margin-bottom: 0;
    }

Alfredo Sumaran's avatar
Alfredo Sumaran committed
222 223
    .item-details,
    .item-time {
224 225 226 227 228 229 230 231
      float: left;
    }

    .item-details {
      width: 75%;
    }

    .item-title {
Alfredo Sumaran's avatar
Alfredo Sumaran committed
232
      margin: 0 0 2px;
233

Alfredo Sumaran's avatar
Alfredo Sumaran committed
234 235 236
      &.issue-title,
      &.commit-title,
      &.merge-merquest-title {
Clement Ho's avatar
Clement Ho committed
237 238 239
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
240 241
        max-width: 100%;
        display: block;
242 243

        a {
244
          color: $gl-text-color;
245
        }
246 247 248 249 250 251
      }
    }

    .item-time {
      width: 25%;
      text-align: right;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
252 253 254
    }

    .total-time {
255
      font-size: $cycle-analytics-big-font;
256
      color: $gl-text-color;
257

Alfredo Sumaran's avatar
Alfredo Sumaran committed
258
      span {
259
        color: $gl-text-color;
Alfredo Sumaran's avatar
Alfredo Sumaran committed
260
        font-size: $gl-font-size;
261 262
      }
    }
263

Alfredo Sumaran's avatar
Alfredo Sumaran committed
264 265
    .issue-date,
    .build-date {
266 267
      color: $gl-text-color;
    }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
268

269 270 271
    .issue-link,
    .commit-author-link,
    .issue-author-link {
272
      color: $gl-text-color;
273 274 275 276 277 278
    }

    // Custom CSS for components
    .item-conmmit-component {
      .commit-icon {
        svg {
279 280 281 282
          display: inline-block;
          width: 20px;
          height: 20px;
          vertical-align: bottom;
283
        }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
284
      }
285
    }
286 287 288 289 290 291 292 293 294 295 296

    .merge-request-branch {
      a {
        max-width: 180px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        vertical-align: bottom;
      }
    }
297
  }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
298

299 300 301 302 303 304
  // Custom Styles for stage items
  .item-build-component {
    .item-title {
      .icon-build-status {
        float: left;
        margin-right: 5px;
305 306
        position: relative;
        top: 2px;
307 308 309
      }

      .item-build-name {
310
        color: $gl-text-color;
311 312 313
      }

      .pipeline-id {
314
        color: $gl-text-color;
315 316 317
        padding: 0 3px 0 0;
      }

318
      .ref-name {
319 320 321 322 323 324 325 326 327
        color: $black;
        display: inline-block;
        max-width: 180px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        line-height: 1.3;
        vertical-align: top;
      }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
328

329
      .commit-sha {
330
        color: $blue-600;
331 332
        line-height: 1.3;
        vertical-align: top;
333
        font-weight: $gl-font-weight-normal;
334 335 336
      }

      .fa {
337
        color: $gl-text-color-secondary;
338
        font-size: $code-font-size;
339 340 341
      }
    }
  }
342

343 344
  .empty-stage,
  .no-access-stage {
345 346 347 348
    text-align: center;
    width: 75%;
    margin: 0 auto;
    padding-top: 130px;
349
    color: $gl-text-color-secondary;
350

351 352 353 354 355 356
    h4 {
      color: $gl-text-color;
    }
  }

  .empty-stage {
357 358 359 360 361 362
    .icon-no-data {
      height: 36px;
      width: 78px;
      display: inline-block;
      margin-bottom: 20px;
    }
363
  }
364

365 366 367 368 369 370
  .no-access-stage {
    .icon-lock {
      height: 36px;
      width: 78px;
      display: inline-block;
      margin-bottom: 20px;
371 372
    }
  }
373
}
374 375 376 377 378 379 380 381 382 383 384 385

.cycle-analytics-overview {
  padding-top: 100px;

  .overview-details {
    display: flex;
    align-items: center;
  }

  .overview-image {
    text-align: right;
  }
Alfredo Sumaran's avatar
Alfredo Sumaran committed
386

387 388 389 390 391 392 393
  .overview-icon {
    svg {
      width: 365px;
      height: 227px;
    }
  }
}