Move .ci-widget-container CSS to utility classes

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Close this issue

Description

Move CSS in app/assets/stylesheets/pages/merge_requests.scss used by grouppipeline execution ~ "group::continuous integration" to utility classes.

The utility classes can be added directly in the component: app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

.ci-widget-container{ ... }

.ci-widget-container {
  justify-content: space-between;
  flex: 1;
  flex-direction: row;

  @include media-breakpoint-down(sm) {
    flex-direction: column;

    .stage-cell .stage-container {
      margin-top: 16px;
    }

    .dropdown .mini-pipeline-graph-dropdown-menu.dropdown-menu {
      transform: initial;
    }
  }

  .coverage {
    font-size: 12px;
    color: $gray-500;
    line-height: initial;
  }

  .mini-pipeline-graph-dropdown-toggle,
  .stage-cell .mini-pipeline-graph-dropdown-toggle svg {
    height: $ci-action-icon-size-lg;
    width: $ci-action-icon-size-lg;
  }
}

Why work on this?

• Currently the merge_requests.scss code is loaded in all our pages and it's only used in the merge quest page.
• The sizes of icons are changed via CSS when they could be generated directly from the components.