gitlab-org--gitlab-foss/app/assets/stylesheets/pages/convdev_index.scss
2018-08-22 11:40:38 -05:00

255 lines
4.3 KiB
SCSS

$space-between-cards: 8px;
.convdev-empty svg {
margin: 64px auto 32px;
max-width: 420px;
}
.convdev-header {
margin-top: $gl-padding;
margin-bottom: $gl-padding;
padding: 0 4px;
display: flex;
align-items: center;
.convdev-header-title {
font-size: 48px;
line-height: 1;
margin: 0;
}
.convdev-header-subtitle {
font-size: 22px;
line-height: 1;
color: $gl-text-color-secondary;
margin-left: 8px;
font-weight: $gl-font-weight-normal;
a {
font-size: 18px;
color: $gl-text-color-secondary;
&:hover {
color: $blue-500;
}
}
}
}
.convdev-cards {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.convdev-card-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
width: 50%;
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);
}
}
.convdev-card {
border: solid 1px $border-color;
border-radius: 3px;
border-top-width: 3px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.convdev-card-low {
border-top-color: $red-400;
.board-card-score-big {
background-color: $red-50;
}
}
.convdev-card-average {
border-top-color: $orange-400;
.board-card-score-big {
background-color: $orange-50;
}
}
.convdev-card-high {
border-top-color: $green-400;
.board-card-score-big {
background-color: $green-50;
}
}
.convdev-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: $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: $gl-text-color-secondary;
.board-card-score-name {
font-size: 13px;
margin-top: 4px;
}
}
.board-card-score-value {
font-size: 16px;
color: $gl-text-color;
font-weight: $gl-font-weight-normal;
}
.board-card-score-big {
border-top: 2px solid $border-color;
border-bottom: 1px solid $border-color;
font-size: 22px;
padding: 10px 0;
font-weight: $gl-font-weight-normal;
}
.board-card-buttons {
display: flex;
> * {
font-size: 16px;
color: $gl-text-color-secondary;
padding: 10px;
flex-grow: 1;
&:hover {
background-color: $border-color;
color: $gl-text-color;
}
+ * {
border-left: solid 1px $border-color;
}
}
}
.convdev-steps {
margin-top: $gl-padding;
height: 1px;
min-width: 100%;
justify-content: space-around;
position: relative;
background: $border-color;
}
.convdev-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 $border-color;
background: $white-light;
transform: translate(-50%, -50%);
color: $gl-text-color-secondary;
fill: $gl-text-color-secondary;
box-shadow: 0 2px 4px $dropdown-shadow-color;
&:hover {
padding: 8px 10px;
fill: currentColor;
z-index: 100;
height: auto;
width: auto;
.convdev-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;
}
}
.convdev-step-title {
max-height: 0;
opacity: 0;
text-transform: uppercase;
margin: $gl-vert-padding 0 0;
text-align: center;
font-size: 12px;
}
.convdev-high-score {
color: $green-400;
}
.convdev-average-score {
color: $orange-400;
}
.convdev-low-score {
color: $red-400;
}