diff options
Diffstat (limited to 'app/assets/stylesheets/page_bundles/dev_ops_report.scss')
| -rw-r--r-- | app/assets/stylesheets/page_bundles/dev_ops_report.scss | 261 |
1 files changed, 261 insertions, 0 deletions
diff --git a/app/assets/stylesheets/page_bundles/dev_ops_report.scss b/app/assets/stylesheets/page_bundles/dev_ops_report.scss new file mode 100644 index 00000000000..5c6019efce6 --- /dev/null +++ b/app/assets/stylesheets/page_bundles/dev_ops_report.scss @@ -0,0 +1,261 @@ +@import 'mixins_and_variables_and_functions'; + +$space-between-cards: 8px; + +.devops-empty svg { + margin: 64px auto 32px; + max-width: 420px; +} + +.devops-header { + margin-top: $gl-padding; + margin-bottom: $gl-padding; + padding: 0 4px; + display: flex; + align-items: center; + + .devops-header-title { + font-size: 48px; + line-height: 1; + margin: 0; + } + + .devops-header-subtitle { + font-size: 22px; + line-height: 1; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + margin-left: 8px; + font-weight: $gl-font-weight-normal; + + .devops-header-icon { + vertical-align: px-to-rem(-$gl-spacing-scale-1); + } + + a { + font-size: 18px; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + + &:hover { + color: var(--blue-500, $blue-500); + } + } + } +} + +.devops-cards { + display: flex; + justify-content: center; + flex-wrap: wrap; +} + +.devops-card-wrapper { + display: flex; + flex-direction: column; + align-items: stretch; + text-align: center; + width: 50%; + border-color: var(--border-color, $border-color); + margin: 0 0 32px; + padding: $space-between-cards / 2; + position: relative; + + @include media-breakpoint-up(xs) { + width: percentage(1 / 4); + } + + @include media-breakpoint-up(sm) { + width: percentage(1 / 5); + } + + @include media-breakpoint-up(md) { + width: percentage(1 / 6); + } + + @include media-breakpoint-up(lg) { + width: percentage(1 / 10); + } +} + +.devops-card { + border: solid 1px var(--border-color, $border-color); + border-radius: 3px; + border-top-width: 3px; + display: flex; + flex-direction: column; + flex-grow: 1; +} + +.devops-card-low { + border-top-color: var(--red-400, $red-400); + + .board-card-score-big { + background-color: var(--red-50, $red-50); + } +} + +.devops-card-average { + border-top-color: var(--orange-200, $orange-200); + + .board-card-score-big { + background-color: var(--orange-50, $orange-50); + } +} + +.devops-card-high { + border-top-color: var(--green-400, $green-400); + + .board-card-score-big { + background-color: var(--green-50, $green-50); + } +} + +.devops-card-title { + margin: $gl-padding auto auto; + max-width: 100px; + + h3 { + font-size: 14px; + margin: 0 0 2px; + } + + .light-text { + font-size: 13px; + line-height: 1.25; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + } +} + +.board-card-scores { + display: flex; + justify-content: space-around; + align-items: center; + margin: $gl-padding $gl-btn-padding; + line-height: 1; +} + +.board-card-score { + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + + .board-card-score-name { + font-size: 13px; + margin-top: 4px; + } +} + +.board-card-score-value { + font-size: 16px; + color: var(--gl-text-color, $gl-text-color); + font-weight: $gl-font-weight-normal; +} + +.board-card-score-big { + border-top: 2px solid var(--border-color, $border-color); + border-bottom: 1px solid var(--border-color, $border-color); + font-size: 22px; + padding: 10px 0; + font-weight: $gl-font-weight-normal; +} + +.board-card-buttons { + display: flex; + + > * { + font-size: 16px; + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + padding: 10px; + flex-grow: 1; + + &:hover { + background-color: var(--border-color, $border-color); + color: var(--border-color, $border-color); + } + + + * { + border-left: solid 1px var(--border-color, $border-color); + } + } +} + +.devops-steps { + margin-top: $gl-padding; + height: 1px; + min-width: 100%; + justify-content: space-around; + position: relative; + background: var(--border-color, $border-color); +} + +.devops-step { + $step-positions: 5% 10% 30% 42% 48% 55% 60% 70% 75% 90%; + @each $pos in $step-positions { + $i: index($step-positions, $pos); + + &:nth-child(#{$i}) { + left: $pos; + } + } + + position: absolute; + transform-origin: 75% 50%; + padding: 8px; + height: 50px; + width: 50px; + border-radius: 3px; + display: flex; + flex-direction: column; + align-items: center; + border: solid 1px var(--border-color, $border-color); + background: var(--white, $white); + transform: translate(-50%, -50%); + color: var(--gl-text-color-secondary, $gl-text-color-secondary); + fill: var(--gl-text-color-secondary, $gl-text-color-secondary); + box-shadow: 0 2px 4px var(--dropdown-shadow-color, $dropdown-shadow-color); + + &:hover { + padding: 8px 10px; + fill: currentColor; + z-index: 100; + height: auto; + width: auto; + + .devops-step-title { + max-height: 2em; + opacity: 1; + transition: opacity 0.2s; + } + + svg { + transform: scale(1.5); + margin: $gl-btn-padding; + } + } + + svg { + transition: transform 0.1s; + width: 30px; + height: 30px; + min-height: 30px; + min-width: 30px; + } +} + +.devops-step-title { + max-height: 0; + opacity: 0; + text-transform: uppercase; + margin: $gl-vert-padding 0 0; + text-align: center; + font-size: 12px; +} + +.devops-high-score { + color: var(--green-400, $green-400); +} + +.devops-average-score { + color: var(--orange-500, $orange-500); +} + +.devops-low-score { + color: var(--red-400, $red-400); +} |