Fix CSS linter

This commit is contained in:
Filipa Lacerda 2018-05-01 19:43:43 +01:00
parent cab835c51f
commit b1b1c5326d
No known key found for this signature in database
GPG key ID: 9CA3FDE4D1E2F1C8

View file

@ -478,55 +478,6 @@
.ci-job-dropdown-container:hover .build-content { .ci-job-dropdown-container:hover .build-content {
@extend .build-content:hover; @extend .build-content:hover;
} }
}
.ci-action-icon-container {
position: absolute;
right: 5px;
top: 5px;
// Action Icons in big pipeline-graph nodes
&.ci-action-icon-wrapper {
height: 30px;
width: 30px;
background: $white-light;
border: 1px solid $border-color;
border-radius: 100%;
display: block;
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
}
}
svg {
fill: $gl-text-color-secondary;
position: relative;
top: -1px;
}
&.play {
svg {
left: 2px;
}
}
}
}
.build {
position: relative;
width: 186px;
margin-bottom: 10px;
white-space: normal;
// ensure .build-content has hover style when action-icon is hovered
.ci-job-dropdown-container:hover .build-content {
@extend .build-content:hover;
}
.ci-status-icon svg { .ci-status-icon svg {
height: 20px; height: 20px;
@ -611,36 +562,19 @@
} }
} }
} }
}
/**
Action icons inside dropdowns:
- mini graph in pipelines table
- dropdown in big graph
- mini graph in MR widget pipeline
- mini graph in Commit widget pipeline
*/
.big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu {
// override dropdown.scss
&.dropdown-menu li button,
&.dropdown-menu li a.ci-action-icon-container {
padding: 0;
text-align: center;
}
.ci-action-icon-container { .ci-action-icon-container {
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 5px; top: 5px;
// Action Icons in big pipeline-graph nodes
&.ci-action-icon-wrapper { &.ci-action-icon-wrapper {
height: $ci-action-dropdown-button-size; height: 30px;
width: $ci-action-dropdown-button-size; width: 30px;
background: $white-light; background: $white-light;
border: 1px solid $border-color; border: 1px solid $border-color;
border-radius: 50%; border-radius: 100%;
display: block; display: block;
&:hover { &:hover {
@ -653,20 +587,18 @@
} }
svg { svg {
width: $ci-action-dropdown-svg-size;
height: $ci-action-dropdown-svg-size;
fill: $gl-text-color-secondary; fill: $gl-text-color-secondary;
position: relative; position: relative;
top: 0px; top: -1px;
vertical-align: initial; }
&.play {
svg {
left: 2px;
}
} }
} }
} }
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
top: 2px;
}
} }
// Triggers the dropdown in the big pipeline graph // Triggers the dropdown in the big pipeline graph
@ -775,12 +707,64 @@ button.mini-pipeline-graph-dropdown-toggle {
} }
} }
// dropdown content for big and mini pipeline /**
Action icons inside dropdowns:
- mini graph in pipelines table
- dropdown in big graph
- mini graph in MR widget pipeline
- mini graph in Commit widget pipeline
*/
.big-pipeline-graph-dropdown-menu, .big-pipeline-graph-dropdown-menu,
.mini-pipeline-graph-dropdown-menu { .mini-pipeline-graph-dropdown-menu {
width: 240px; width: 240px;
max-width: 240px; max-width: 240px;
// override dropdown.scss
&.dropdown-menu li button,
&.dropdown-menu li a.ci-action-icon-container {
padding: 0;
text-align: center;
}
.ci-action-icon-container {
position: absolute;
right: 8px;
top: 8px;
&.ci-action-icon-wrapper {
height: $ci-action-dropdown-button-size;
width: $ci-action-dropdown-button-size;
background: $white-light;
border: 1px solid $border-color;
border-radius: 50%;
display: block;
&:hover {
background-color: $stage-hover-bg;
border: 1px solid $dropdown-toggle-active-border-color;
svg {
fill: $gl-text-color;
}
}
svg {
width: $ci-action-dropdown-svg-size;
height: $ci-action-dropdown-svg-size;
fill: $gl-text-color-secondary;
position: relative;
top: 0;
vertical-align: initial;
}
}
}
// SVGs in the commit widget and mr widget
a.ci-action-icon-container.ci-action-icon-wrapper svg {
top: 2px;
}
.scrollable-menu { .scrollable-menu {
padding: 0; padding: 0;
max-height: 245px; max-height: 245px;