environments.scss 7.17 KB
Newer Older
Clement Ho's avatar
Clement Ho committed
1
@include media-breakpoint-down(md) {
2 3 4 5
  .deployments-container {
    width: 100%;
    overflow: auto;
  }
6 7
}

8
.environments-folder-name {
9
  font-weight: $gl-font-weight-normal;
10 11 12
  padding-top: 20px;
}

13
.environments-container {
14
  .ci-table {
15 16 17 18 19 20 21 22
    .deployment-column {
      > span {
        word-break: break-all;
      }

      .avatar {
        float: none;
      }
23 24
    }

25
    .btn-group {
26
      > .btn:not(.btn-danger) {
27 28
        color: $gl-text-color-secondary;
      }
Annabel Dunstone's avatar
Annabel Dunstone committed
29

30 31 32
      svg path {
        fill: $gl-text-color-secondary;
      }
33

34 35 36 37
      .dropdown {
        outline: none;
      }
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
38

39 40 41 42
    .btn .text-center {
      display: inline;
    }

43 44 45
    .commit-title {
      margin: 0;
    }
Annabel Dunstone's avatar
Annabel Dunstone committed
46

47 48 49 50
    .external-url,
    .dropdown-new {
      color: $gl-text-color-secondary;
    }
51

52 53 54 55 56 57
    .dropdown-menu {
      .fa {
        margin-right: 6px;
        color: $gl-text-color-secondary;
      }
    }
58

59
    .build-link,
60
    .ref-name {
61
      color: $gl-text-color;
62
    }
63

64 65 66 67 68 69 70 71
    .stop-env-link,
    .external-url {
      color: $gl-text-color-secondary;

      .stop-env-icon {
        font-size: 14px;
      }
    }
72

73
    .deployment .build-column {
Filipa Lacerda's avatar
Filipa Lacerda committed
74
      .build-link {
75
        color: $gl-text-color;
Filipa Lacerda's avatar
Filipa Lacerda committed
76
      }
77

Filipa Lacerda's avatar
Filipa Lacerda committed
78 79
      .avatar {
        float: none;
80
        margin-right: 0;
Filipa Lacerda's avatar
Filipa Lacerda committed
81 82
      }
    }
83

84
    .folder-icon {
85
      margin-right: 3px;
86 87
      color: $gl-text-color-secondary;
      display: inline-block;
88
      vertical-align: text-top;
89 90 91 92

      .fa:nth-child(1) {
        margin-right: 3px;
      }
93
    }
Filipa Lacerda's avatar
Filipa Lacerda committed
94

95 96 97 98 99
    .folder-name {
      cursor: pointer;
      color: $gl-text-color-secondary;
      display: inline-block;
    }
100

101 102 103 104
    .icon-container {
      width: 20px;
      text-align: center;
    }
105

106
    .branch-commit {
107
      .commit-sha {
108 109
        margin-right: 0;
      }
110
    }
111 112

    .no-btn {
113
      border: 0;
114 115 116 117 118
      background: none;
      outline: none;
      width: 100%;
      text-align: left;
    }
119 120 121 122

    .environment-child-row {
      padding-left: 20px;
    }
123
  }
124
}
125

126
.gl-responsive-table-row {
127 128 129
  .branch-commit {
    max-width: 100%;
  }
130 131 132
}

.folder-row {
133 134
  border-left: 0;
  border-right: 0;
135

Clement Ho's avatar
Clement Ho committed
136
  @media (min-width: map-get($grid-breakpoints, md)-1) {
137
    border-top: 0;
138 139 140
  }
}

141 142
.x-axis path,
.y-axis path,
143 144
.label-x-axis-line,
.label-y-axis-line {
145 146 147 148 149 150 151
  fill: none;
  stroke-width: 1;
  shape-rendering: crispEdges;
}

.x-axis path,
.y-axis path {
152
  stroke: $gl-gray-350;
153 154
}

155 156
.label-x-axis-line,
.label-y-axis-line {
157 158 159 160 161
  stroke: $border-color;
}

.y-axis {
  line {
162
    stroke: $gl-gray-350;
163 164 165 166 167
    stroke-width: 1;
  }
}

.metric-area {
168
  opacity: 0.25;
169 170 171 172
}

.prometheus-graph-overlay {
  fill: none;
173
  opacity: 0;
174 175 176 177 178 179
  pointer-events: all;
}

.rect-text-metric {
  fill: $white-light;
  stroke-width: 1;
Phil Hughes's avatar
Phil Hughes committed
180
  stroke: $gray-darkest;
181 182 183 184 185 186
}

.rect-axis-text {
  fill: $white-light;
}

187
.text-metric {
188
  font-size: 12px;
189 190 191
}

.selected-metric-line {
Phil Hughes's avatar
Phil Hughes committed
192
  stroke: $gl-gray-dark;
193 194
  stroke-width: 1;
}
Phil Hughes's avatar
Phil Hughes committed
195 196

.deployment-line {
Phil Hughes's avatar
Phil Hughes committed
197
  stroke: $black;
198
  stroke-width: 1;
Phil Hughes's avatar
Phil Hughes committed
199
}
Phil Hughes's avatar
Phil Hughes committed
200

201 202 203
.divider-line {
  stroke-width: 1;
  stroke: $gray-darkest;
Phil Hughes's avatar
Phil Hughes committed
204 205
}

Jose's avatar
Jose committed
206 207
.prometheus-graphs {
  .environments {
208 209 210 211 212 213 214 215 216 217 218 219
    .dropdown-menu-toggle {
      svg {
        position: absolute;
        right: 5%;
        top: 25%;
      }
    }

    .dropdown-menu-toggle,
    .dropdown-menu {
      width: 240px;
    }
Jose's avatar
Jose committed
220 221 222
  }
}

223 224 225 226 227 228 229 230
.environments-actions {
  .external-url,
  .monitoring-url,
  .terminal-button,
  .stop-env-link {
    width: 38px;
  }
}
231 232 233 234 235

.prometheus-panel {
  margin-top: 20px;
}

236 237 238 239 240 241 242 243 244 245
.prometheus-graph-group {
  display: flex;
  flex-wrap: wrap;
  padding: $gl-padding / 2;
}

.prometheus-graph {
  padding: $gl-padding / 2;
}

246 247 248 249 250 251 252
.prometheus-graph-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: $gl-padding-8;

  h5 {
253
    font-size: $gl-font-size-large;
254 255 256 257
    margin: 0;
  }
}

258 259
.prometheus-graph-cursor {
  position: absolute;
260
  background: $gray-600;
261 262 263 264 265 266
  width: 1px;
}

.prometheus-graph-flag {
  display: block;
  min-width: 160px;
267 268
  border: 0;
  box-shadow: 0 1px 4px 0 $black-transparent;
269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286

  h5 {
    padding: 0;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
  }

  .deploy-meta-content {
    border-bottom: 1px solid $white-dark;

    svg {
      height: 15px;
      vertical-align: bottom;
    }
  }

  &.popover {
287 288
    padding: 0;

289 290 291 292
    &.left {
      left: auto;
      right: 0;
      margin-right: 10px;
293 294

      > .arrow {
295
        right: -14px;
296 297 298 299
        border-left-color: $border-color;
      }

      > .arrow::after {
300 301
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
302
        border-left: 4px solid $gray-50;
303 304 305 306 307
      }

      .arrow-shadow {
        right: -3px;
        box-shadow: 1px 0 9px 0 $black-transparent;
308
      }
309 310 311 312 313 314
    }

    &.right {
      left: 0;
      right: auto;
      margin-left: 10px;
315 316

      > .arrow {
317
        left: -7px;
318 319 320 321
        border-right-color: $border-color;
      }

      > .arrow::after {
322 323
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
324
        border-right: 4px solid $gray-50;
325 326 327 328 329
      }

      .arrow-shadow {
        left: -3px;
        box-shadow: 1px 0 8px 0 $black-transparent;
330
      }
331 332 333
    }

    > .arrow {
334 335 336 337 338
      top: 10px;
      margin: 0;
    }

    .arrow-shadow {
339
      content: '';
340 341 342 343 344 345
      position: absolute;
      width: 7px;
      height: 7px;
      background-color: transparent;
      transform: rotate(45deg);
      top: 13px;
346 347 348 349
    }

    > .popover-title,
    > .popover-content {
350
      padding: 8px;
351 352
      font-size: 12px;
      white-space: nowrap;
353
      position: relative;
354
    }
355 356

    > .popover-title {
357
      background-color: $gray-50;
358
      border-radius: $border-radius-default $border-radius-default 0 0;
359 360 361 362 363
    }
  }

  strong {
    font-weight: 600;
364 365 366
  }
}

367 368 369 370 371 372 373 374 375
.prometheus-table {
  border-collapse: collapse;
  padding: 0;
  margin: 0;

  td {
    vertical-align: middle;

    + td {
376
      padding-left: 8px;
377 378 379
      vertical-align: top;
    }
  }
380 381 382 383 384

  .legend-metric-title {
    font-size: 12px;
    vertical-align: middle;
  }
385 386
}

387 388 389 390 391 392
.prometheus-svg-container {
  position: relative;
  height: 0;
  width: 100%;
  padding: 0;
  padding-bottom: 100%;
393

394
  .text-metric-usage {
395
    fill: $black;
396
    font-weight: $gl-font-weight-normal;
397
    font-size: 12px;
398 399
  }

400 401 402 403 404 405
  > svg {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
406

407 408 409 410 411 412 413 414 415
    text {
      fill: $gl-text-color;
      stroke-width: 0;
    }

    .text-metric-bold {
      font-weight: $gl-font-weight-bold;
    }

416
    .label-axis-text {
417 418
      fill: $black;
      font-weight: $gl-font-weight-normal;
419
      font-size: 10px;
Mike Greiling's avatar
Mike Greiling committed
420
    }
421

422 423
    .legend-axis-text {
      fill: $black;
Mike Greiling's avatar
Mike Greiling committed
424
    }
425

426 427 428 429 430 431
    .tick {
      > line {
        stroke: $gray-darker;
      }

      > text {
432
        fill: $gray-600;
Mike Greiling's avatar
Mike Greiling committed
433
        font-size: 10px;
434
      }
435
    }
436

437 438 439 440
    .y-label-text,
    .x-label-text {
      fill: $gray-darkest;
    }
441

442 443
    .axis-tick {
      stroke: $gray-darker;
444 445
    }

446 447 448 449 450 451
    .deploy-info-text {
      dominant-baseline: text-before-edge;
      font-size: 12px;
    }

    .deploy-info-text-link {
452
      font-family: $monospace-font;
453
      fill: $blue-600;
454 455

      &:hover {
456
        fill: $blue-800;
457 458 459
      }
    }

Clement Ho's avatar
Clement Ho committed
460
    @include media-breakpoint-down(sm) {
461
      .label-axis-text,
462 463 464 465 466 467 468 469
      .text-metric-usage,
      .legend-axis-text {
        font-size: 8px;
      }

      .tick > text {
        font-size: 8px;
      }
470 471 472
    }
  }
}
473 474

.prometheus-table-row-highlight {
475
  background-color: $gray-100;
476
}