Merge branch 'remove-redundant-mixins' into 'master'

Remove redundant mixins

## What does this MR do?
Removes the following redundant mixins
```
@mixin box-shadow($shadow) {
  box-shadow: $shadow;
}

@mixin border-radius($radius) {
  border-radius: $radius;
}
```

## Are there points in the code the reviewer needs to double check?
Just need to make sure the refactor didn't break anything. Last time I did something like this, we faced an edge case where values `.5` would pass correctly in mixins but not when passed directly to the property.

## Why was this MR needed?

*  Reduces redundant code which leads to happier developers 😄 

## Screenshots (if relevant)
None

## Does this MR meet the acceptance criteria?

- [x] [CHANGELOG](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CHANGELOG) entry added
- Tests
  - [x] All builds are passing
- [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html)
- [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides)
- [x] Branch has no merge conflicts with `master` (if you do - rebase it please)
- [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits)

## What are the relevant issue numbers?
Closes #22012

See merge request !6287

CHANGELOG

@@ -36,6 +36,7 @@ v 8.13.0 (unreleased)
   - Add word-wrap to issue title on issue and milestone boards (ClemMakesApps)
   - Fix todos page mobile viewport layout (ClemMakesApps)
   - Fix inconsistent highlighting of already selected activity nav-links (ClemMakesApps)
+  - Remove redundant mixins (ClemMakesApps)
   - Fix robots.txt disallowing access to groups starting with "s" (Matt Harrison)
   - Close open merge request without source project (Katarzyna Kobierska Ula Budziszewska)
   - Fix that manual jobs would no longer block jobs in the next stage. !6604

app/assets/stylesheets/framework/avatar.scss

@@ -4,7 +4,7 @@
   width: 40px;
   height: 40px;
   padding: 0;
-  @include border-radius($avatar_radius);
+  border-radius: $avatar_radius;
   border: 1px solid rgba(0, 0, 0, .1);
 
   &.avatar-inline {
@@ -17,7 +17,7 @@
   }
 
   &.avatar-tile {
-    @include border-radius(0);
+    border-radius: 0;
     border: none;
   }
 

app/assets/stylesheets/framework/blocks.scss

@@ -133,7 +133,7 @@
     }
 
     .identicon {
-      @include border-radius(50%);
+      border-radius: 50%;
     }
   }
 

app/assets/stylesheets/framework/buttons.scss

 @mixin btn-default {
-  @include border-radius(3px);
+  border-radius: 3px;
   font-size: $gl-font-size;
   font-weight: 500;
   padding: $gl-vert-padding $gl-btn-padding;
@@ -8,7 +8,7 @@
   &:active {
     outline: none;
     background-color: $btn-active-gray;
-    @include box-shadow($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
   }
 }
 
@@ -43,7 +43,7 @@
 
   &:active,
   &.active {
-    @include box-shadow ($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
 
     background-color: $dark;
     border-color: $border-dark;
@@ -279,7 +279,7 @@
   }
 
   .active {
-    @include box-shadow($gl-btn-active-background);
+    box-shadow: $gl-btn-active-background;
 
     border: 1px solid #c6cacf !important;
     background-color: #e4e7ed !important;

app/assets/stylesheets/framework/forms.scss

@@ -73,7 +73,7 @@ label {
 }
 
 .form-control {
-  @include box-shadow(none);
+  box-shadow: none;
   border-radius: 3px;
   padding: $gl-vert-padding $gl-input-padding;
 }

app/assets/stylesheets/framework/issue_box.scss

@@ -16,7 +16,7 @@
     margin-top: 5px;
   }
 
-  @include border-radius(3px);
+  border-radius: 3px;
   display: block;
   float: left;
   margin-right: 10px;

app/assets/stylesheets/framework/markdown_area.scss

@@ -86,7 +86,7 @@
 }
 
 .markdown-area {
-  @include border-radius(0);
+  border-radius: 0;
   background: #fff;
   border: 1px solid #ddd;
   min-height: 140px;

app/assets/stylesheets/framework/mixins.scss

-/**
- * Generic mixins
- */
-@mixin box-shadow($shadow) {
-  box-shadow: $shadow;
-}
-
-@mixin border-radius($radius) {
-  border-radius: $radius;
-}
-
 /**
  * Prefilled mixins
  * Mixins with fixed values

app/assets/stylesheets/framework/mobile.scss

@@ -133,5 +133,5 @@
   font-size: 20px;
   color: #777;
   z-index: 100;
-  @include box-shadow(0 1px 2px #ddd);
+  box-shadow: 0 1px 2px #ddd;
 }

app/assets/stylesheets/framework/selects.scss

@@ -46,8 +46,8 @@
 }
 
 .select2-drop {
-  @include box-shadow(rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0);
-  @include border-radius ($border-radius-default);
+  box-shadow: rgba(76, 86, 103, 0.247059) 0 0 1px 0, rgba(31, 37, 50, 0.317647) 0 2px 18px 0;
+  border-radius: $border-radius-default;
   border: none;
   min-width: 175px;
 }
@@ -72,7 +72,7 @@
 
 .select2-container-active {
   .select2-choice, .select2-choices {
-    @include box-shadow(none);
+    box-shadow: none;
   }
 }
 
@@ -82,13 +82,13 @@
     outline: 0;
     background-image: none;
     background-color: $white-dark;
-    @include box-shadow($gl-btn-active-gradient);
+    box-shadow: $gl-btn-active-gradient;
   }
 }
 
 .select2-container-multi {
   .select2-choices {
-    @include border-radius($border-radius-default);
+    border-radius: $border-radius-default;
     border-color: $input-border;
     background: none;
 
@@ -123,7 +123,7 @@
   &.select2-container-active .select2-choices,
   &.select2-dropdown-open .select2-choices {
     border-color: $border-white-normal;
-    @include box-shadow($gl-btn-active-gradient);
+    box-shadow: $gl-btn-active-gradient;
   }
 }
 
@@ -157,7 +157,7 @@
   background-repeat: no-repeat;
   background-position: right 0 bottom 6px;
   border: 1px solid $input-border;
-  @include border-radius($border-radius-default);
+  border-radius: $border-radius-default;
   transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
 
   &:focus {

app/assets/stylesheets/framework/sidebar.scss

@@ -4,7 +4,7 @@
 
   &.page-sidebar-pinned {
     .sidebar-wrapper {
-      @include box-shadow(none);
+      box-shadow: none;
     }
   }
 
@@ -17,7 +17,7 @@
     width: 0;
     overflow: hidden;
     transition: width $sidebar-transition-duration;
-    @include box-shadow(2px 0 16px 0 $black-transparent);
+    box-shadow: 2px 0 16px 0 $black-transparent;
   }
 }
 
@@ -100,7 +100,7 @@
   .count {
     float: right;
     padding: 0 8px;
-    @include border-radius(6px);
+    border-radius: 6px;
   }
 }
 

app/assets/stylesheets/framework/typography.scss

@@ -116,7 +116,7 @@
     font-size: 13px;
     line-height: 1.6em;
     overflow-x: auto;
-    @include border-radius(2px);
+    border-radius: 2px;
   }
 
   p > code {

app/assets/stylesheets/pages/cycle_analytics.scss

@@ -50,7 +50,7 @@
 
   .bordered-box {
     border: 1px solid $border-color;
-    @include border-radius($border-radius-default);
+    border-radius: $border-radius-default;
   
   }
 

app/assets/stylesheets/pages/editor.scss

 .file-editor {
   #editor {
     border: none;
-    @include border-radius(0);
+    border-radius: 0;
     height: 500px;
     margin: 0;
     padding: 0;

app/assets/stylesheets/pages/events.scss

@@ -91,7 +91,7 @@
     float: right;
     border: 1px solid #eee;
     padding: 5px;
-    @include border-radius(5px);
+    border-radius: 5px;
     background: $gray-light;
     margin-left: 10px;
     top: -6px;

app/assets/stylesheets/pages/labels.scss

 .suggest-colors {
   margin-top: 5px;
   a {
-    @include border-radius(4px);
+    border-radius: 4px;
     width: 30px;
     height: 30px;
     display: inline-block;
@@ -17,7 +17,7 @@
     overflow: hidden;
 
     a {
-      @include border-radius(0);
+      border-radius: 0;
       width: (100% / 7);
       margin-right: 0;
       margin-bottom: -5px;

app/assets/stylesheets/pages/login.scss

@@ -73,12 +73,12 @@
     height: auto;
 
     &.top {
-      @include border-radius(5px 5px 0 0);
+      border-radius: 5px 5px 0 0;
       margin-bottom: 0;
     }
 
     &.bottom {
-      @include border-radius(0 0 5px 5px);
+      border-radius: 0 0 5px 5px;
       border-top: 0;
       margin-bottom: 20px;
     }
@@ -86,7 +86,7 @@
     &.middle {
       border-top: 0;
       margin-bottom: 0;
-      @include border-radius(0);
+      border-radius: 0;
     }
 
     &:active, &:focus {

app/assets/stylesheets/pages/merge_requests.scss

@@ -6,7 +6,7 @@
   background: $background-color;
   color: $gl-gray;
   border: 1px solid $border-color;
-  @include border-radius(2px);
+  border-radius: 2px;
 
   form {
     margin-bottom: 0;

app/assets/stylesheets/pages/notes.scss

@@ -334,7 +334,7 @@ ul.notes {
 
   .add-diff-note {
     margin-top: -4px;
-    @include border-radius(40px);
+    border-radius: 40px;
     background: #fff;
     padding: 4px;
     font-size: 16px;

app/assets/stylesheets/pages/profiles/preferences.scss

@@ -4,7 +4,7 @@
     text-align: center;
 
     .preview {
-      @include border-radius(4px);
+      border-radius: 4px;
 
       height: 80px;
       margin-bottom: 10px;
@@ -47,7 +47,7 @@
       width: 160px;
 
       img {
-        @include border-radius(4px);
+        border-radius: 4px;
 
         max-width: 100%;
       }

app/assets/stylesheets/pages/projects.scss

@@ -354,7 +354,7 @@ a.deploy-project-label {
     justify-content: flex-start;
 
     .fork-thumbnail {
-      @include border-radius($border-radius-base);
+      border-radius: $border-radius-base;
       background-color: $white-light;
       border: 1px solid $border-white-light;
       height: 202px;
@@ -371,7 +371,7 @@ a.deploy-project-label {
         background-color: $gray-light;
         border: 1px solid $gray-dark;
         margin: 0 auto;
-        @include border-radius(50%);
+        border-radius: 50%;
         i {
           font-size: 100px;
           color: $gray-dark;
@@ -390,7 +390,7 @@ a.deploy-project-label {
       }
 
       img {
-        @include border-radius(50%);
+        border-radius: 50%;
         max-width: 100px;
       }
     }
@@ -496,7 +496,7 @@ pre.light-well {
   }
 
   .light-well {
-    @include border-radius (2px);
+    border-radius: 2px;
 
     color: #5b6169;
     font-size: 13px;

app/assets/stylesheets/pages/status.scss

@@ -4,7 +4,7 @@
     margin-right: 10px;
     border: 1px solid #eee;
     white-space: nowrap;
-    @include border-radius(4px);
+    border-radius: 4px;
 
     &:hover {
       text-decoration: none;