Added Stylelint Setup

Added stylelint to static-analysis
Updated yarn dependencies
CSS Fixes and rule adoptions of stylelint
Added stylelint-scss
Deduplicated yarn.lock to clear dependencies

First round of advanced stylelint rules

Mainly Vendor prefix updates related to flex

Updates to more webkit specific vendor prefixes

Finished all vendor specific fixes

Moved now 4 rules to warning

Fixed the new scss lint problems

More stylelint adaptions after rebase

24 files changed, 105 insertions, 212 deletions

diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index a9324ba2ed0..81216b2b98e 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -3,7 +3,6 @@
 }
 
 .user-can-drag {
-  cursor: -webkit-grab;
   cursor: grab;
 }
 
@@ -12,12 +11,8 @@
   opacity: 1 !important;
 
   * {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     // !important to make sure no style can override this when dragging
-    cursor: -webkit-grabbing !important;
     cursor: grabbing !important;
   }
 }
@@ -501,7 +496,6 @@
 }
 
 .add-issues-modal {
-  display: -webkit-flex;
   display: flex;
   position: fixed;
   top: 0;
@@ -513,9 +507,7 @@
 }
 
 .add-issues-container {
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-direction: column;
   flex-direction: column;
   width: 90vw;
   height: 85vh;
@@ -528,16 +520,12 @@
   box-shadow: 0 2px 12px rgba($black, 0.5);
 
   .empty-state {
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex: 1;
     flex: 1;
     margin-top: 0;
 
     &.add-issues-empty-state-filter {
-      -webkit-flex-direction: column;
       flex-direction: column;
-      -webkit-justify-content: center;
       justify-content: center;
     }
 
@@ -566,11 +554,9 @@
 }
 
 .add-issues-search {
-  display: -webkit-flex;
   display: flex;
 
   .issues-filters {
-    -webkit-flex: 1;
     flex: 1;
   }
 }
@@ -588,9 +574,7 @@
 }
 
 .add-issues-list {
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex: 1;
   flex: 1;
   padding-top: 3px;
   margin-left: -$gl-vert-padding;
@@ -609,7 +593,6 @@
 }
 
 .add-issues-list-loading {
-  -webkit-align-self: center;
   align-self: center;
   width: 100%;
   padding-left: $gl-vert-padding;
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index 11966931a6c..670e320dbc2 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/app/assets/stylesheets/pages/commits.scss
@@ -342,11 +342,11 @@
   }
 
   &.invalid {
-    @include status-color($gray-dark, color("gray"), $gray-darkest);
+    @include status-color($gray-dark, color('gray'), $gray-darkest);
     border-color: $gray-darkest;
 
     &:not(span):hover {
-      color: color("gray");
+      color: color('gray');
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/cycle_analytics.scss b/app/assets/stylesheets/pages/cycle_analytics.scss
index ec2108b15be..2b932d164a5 100644
--- a/app/assets/stylesheets/pages/cycle_analytics.scss
+++ b/app/assets/stylesheets/pages/cycle_analytics.scss
@@ -330,7 +330,6 @@
 
   // Custom Styles for stage items
   .item-build-component {
-
     .item-title {
       .icon-build-status {
         float: left;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index d001dff7986..0dbbe9e4c25 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -9,7 +9,6 @@
     @media (min-width: map-get($grid-breakpoints, md)) {
       $mr-file-header-top: $mr-version-controls-height + $header-height + $mr-tabs-height;
 
-      position: -webkit-sticky;
       position: sticky;
       top: $mr-file-header-top;
       z-index: 102;
@@ -239,22 +238,18 @@
 
       img {
         border: 1px solid $white-light;
-        background-image: linear-gradient(
-            45deg,
-            $border-color 25%,
-            transparent 25%,
-            transparent 75%,
-            $border-color 75%,
-            $border-color 100%
-          ),
-          linear-gradient(
-            45deg,
-            $border-color 25%,
-            transparent 25%,
-            transparent 75%,
-            $border-color 75%,
-            $border-color 100%
-          );
+        background-image: linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%),
+          linear-gradient(45deg,
+        $border-color 25%,
+        transparent 25%,
+        transparent 75%,
+        $border-color 75%,
+        $border-color 100%);
         background-size: 10px 10px;
         background-position: 0 0, 5px 5px;
         max-width: 100%;
@@ -510,10 +505,10 @@
 
 .diff-stats {
   align-items: center;
-  padding: 0 .25rem;
+  padding: 0 0.25rem;
 
   .diff-stats-group {
-    padding: 0 .25rem;
+    padding: 0 0.25rem;
   }
 
   svg.diff-stats-icon {
@@ -522,7 +517,7 @@
 
   &.is-compare-versions-header {
     .diff-stats-group {
-      padding: 0 .5rem;
+      padding: 0 0.5rem;
     }
   }
 }
@@ -726,7 +721,6 @@
   }
 
   @include media-breakpoint-up(sm) {
-    position: -webkit-sticky;
     position: sticky;
     top: $header-height;
     background-color: $white-light;
@@ -834,34 +828,26 @@
     width: 100%;
     height: 10px;
     background-color: $white-light;
-    background-image: linear-gradient(
-        45deg,
-        transparent,
-        transparent 73%,
-        $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        225deg,
-        transparent,
-        transparent 73%,
-        $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        135deg,
-        transparent,
-        transparent 73%,
-        $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      ),
-      linear-gradient(
-        -45deg,
-        transparent,
-        transparent 73%,
-        $diff-jagged-border-gradient-color 75%,
-        $white-light 80%
-      );
+    background-image: linear-gradient(45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white-light 80%),
+      linear-gradient(225deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white-light 80%),
+      linear-gradient(135deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white-light 80%),
+      linear-gradient(-45deg,
+    transparent,
+    transparent 73%,
+    $diff-jagged-border-gradient-color 75%,
+    $white-light 80%);
     background-position: 5px 5px, 0 5px, 0 5px, 5px 5px;
     background-size: 10px 10px;
     background-repeat: repeat;
@@ -904,7 +890,7 @@
   }
 }
 
-.files:not([data-can-create-note="true"]) .frame {
+.files:not([data-can-create-note='true']) .frame {
   cursor: auto;
 }
 
@@ -913,15 +899,14 @@
 .btn-transparent.image-diff-overlay-add-comment {
   position: relative;
   cursor: image-url('illustrations/image_comment_light_cursor.svg')
-      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   // Retina cursor
-  cursor: -webkit-image-set(
-        image-url('illustrations/image_comment_light_cursor.svg') 1x,
-        image-url('illustrations/image_comment_light_cursor@2x.svg') 2x
-      )
-      $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
+  // scss-lint:disable DuplicateProperty
+  cursor: image-set(image-url('illustrations/image_comment_light_cursor.svg') 1x,
+  image-url('illustrations/image_comment_light_cursor@2x.svg') 2x)
+    $image-comment-cursor-left-offset $image-comment-cursor-top-offset,
     auto;
 
   .comment-indicator {
@@ -1026,7 +1011,6 @@
 }
 
 .diff-tree-list {
-  position: -webkit-sticky;
   position: sticky;
   $top-pos: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
   top: $header-height + $mr-tabs-height + $mr-version-controls-height + 10px;
diff --git a/app/assets/stylesheets/pages/graph.scss b/app/assets/stylesheets/pages/graph.scss
index 83b1680512d..3febf4cf826 100644
--- a/app/assets/stylesheets/pages/graph.scss
+++ b/app/assets/stylesheets/pages/graph.scss
@@ -71,12 +71,10 @@
 
 .svg-graph-container-with-grab {
   cursor: grab;
-  cursor: -webkit-grab;
 }
 
 .svg-graph-container-grabbed {
   cursor: grabbing;
-  cursor: -webkit-grabbing;
 }
 
 @keyframes flickerAnimation {
diff --git a/app/assets/stylesheets/pages/help.scss b/app/assets/stylesheets/pages/help.scss
index 2c23f31c240..161d4dbfb22 100644
--- a/app/assets/stylesheets/pages/help.scss
+++ b/app/assets/stylesheets/pages/help.scss
@@ -30,7 +30,7 @@
   .key {
     @extend .badge.badge-pill;
     background-color: $label-inverse-bg;
-    font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    font: 11px Consolas, 'Liberation Mono', Menlo, Courier, monospace;
     padding: 3px 5px;
   }
 }
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index e0bdc1341b1..3796ef47c32 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -136,7 +136,7 @@
       color: $blue-800;
 
       .avatar {
-        border-color: rgba($gray-normal, .2);
+        border-color: rgba($gray-normal, 0.2);
       }
 
     }
@@ -223,7 +223,7 @@
     }
 
     a.edit-link:not([href]):hover {
-      color: rgba($gray-normal, .2);
+      color: rgba($gray-normal, 0.2);
     }
 
     .lock-edit, // uses same style, different js behaviour
@@ -711,14 +711,11 @@
 
 .issuable-list {
   li {
-
     .issue-box {
-      display: -webkit-flex;
       display: flex;
     }
 
     .issuable-info-container {
-      -webkit-flex: 1;
       flex: 1;
       display: flex;
       padding-right: $gl-padding;
@@ -813,7 +810,6 @@
 
 
   .sidebar-collapsed-icon {
-
     > .stopwatch-svg {
       display: inline-block;
     }
@@ -871,11 +867,11 @@
   }
 
   .help-state-toggle-enter-active {
-    transition: all .8s ease;
+    transition: all 0.8s ease;
   }
 
   .help-state-toggle-leave-active {
-    transition: all .5s ease;
+    transition: all 0.5s ease;
   }
 
   .help-state-toggle-enter,
diff --git a/app/assets/stylesheets/pages/issues.scss b/app/assets/stylesheets/pages/issues.scss
index 0037364978c..9f30495a7ef 100644
--- a/app/assets/stylesheets/pages/issues.scss
+++ b/app/assets/stylesheets/pages/issues.scss
@@ -58,8 +58,6 @@ form.edit-issue {
 }
 
 ul.related-merge-requests > li {
-  display: -ms-flexbox;
-  display: -webkit-flex;
   display: flex;
   align-items: center;
 
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 2372640277e..75d219320ef 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -95,13 +95,11 @@
     .prioritized-labels & {
       box-shadow: 0 1px 2px $issue-boards-card-shadow;
       cursor: move;
-      cursor: -webkit-grab;
-      cursor: -moz-grab;
+      cursor: grab;
       border: 0;
 
       &:active {
-        cursor: -webkit-grabbing;
-        cursor: -moz-grabbing;
+        cursor: grabbing;
       }
     }
   }
diff --git a/app/assets/stylesheets/pages/login.scss b/app/assets/stylesheets/pages/login.scss
index 67d7a8175ac..22a515cbdaa 100644
--- a/app/assets/stylesheets/pages/login.scss
+++ b/app/assets/stylesheets/pages/login.scss
@@ -120,7 +120,6 @@
   }
 
   .new-session-tabs {
-    display: -webkit-flex;
     display: flex;
     box-shadow: 0 0 0 1px $border-color;
     border-top-right-radius: $border-radius-default;
@@ -190,7 +189,7 @@
     margin-top: 16px;
   }
 
-  input[type="submit"] {
+  input[type='submit'] {
     @extend .btn-block;
     margin-bottom: 0;
   }
diff --git a/app/assets/stylesheets/pages/members.scss b/app/assets/stylesheets/pages/members.scss
index 99609a96976..eb32beb0972 100644
--- a/app/assets/stylesheets/pages/members.scss
+++ b/app/assets/stylesheets/pages/members.scss
@@ -27,7 +27,6 @@
 
   .controls {
     @include media-breakpoint-up(sm) {
-      display: -webkit-flex;
       display: flex;
     }
 
diff --git a/app/assets/stylesheets/pages/merge_conflicts.scss b/app/assets/stylesheets/pages/merge_conflicts.scss
index e0f7d075fc7..278a9014458 100644
--- a/app/assets/stylesheets/pages/merge_conflicts.scss
+++ b/app/assets/stylesheets/pages/merge_conflicts.scss
@@ -20,81 +20,81 @@ $colors: (
   white-header-not-chosen     : #f0f0f0,
   white-line-not-chosen       : $gray-light,
 
-  dark-header-head-neutral   : rgba(#3f3, .2),
-  dark-line-head-neutral     : rgba(#3f3, .1),
+  dark-header-head-neutral   : rgba(#3f3, 0.2),
+  dark-line-head-neutral     : rgba(#3f3, 0.1),
   dark-button-head-neutral   : #40874f,
 
-  dark-header-head-chosen    : rgba(#3f3, .33),
-  dark-line-head-chosen      : rgba(#3f3, .2),
+  dark-header-head-chosen    : rgba(#3f3, 0.33),
+  dark-line-head-chosen      : rgba(#3f3, 0.2),
   dark-button-head-chosen    : #258537,
 
-  dark-header-origin-neutral : rgba(#2878c9, .4),
-  dark-line-origin-neutral   : rgba(#2878c9, .3),
+  dark-header-origin-neutral : rgba(#2878c9, 0.4),
+  dark-line-origin-neutral   : rgba(#2878c9, 0.3),
   dark-button-origin-neutral : #2a5c8c,
 
-  dark-header-origin-chosen  : rgba(#2878c9, .6),
-  dark-line-origin-chosen    : rgba(#2878c9, .4),
+  dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  dark-line-origin-chosen    : rgba(#2878c9, 0.4),
   dark-button-origin-chosen  : #1d6cbf,
 
-  dark-header-not-chosen     : rgba(#fff, .25),
-  dark-line-not-chosen       : rgba(#fff, .1),
+  dark-header-not-chosen     : rgba(#fff, 0.25),
+  dark-line-not-chosen       : rgba(#fff, 0.1),
 
-  monokai-header-head-neutral   : rgba(#a6e22e, .25),
-  monokai-line-head-neutral     : rgba(#a6e22e, .1),
+  monokai-header-head-neutral   : rgba(#a6e22e, 0.25),
+  monokai-line-head-neutral     : rgba(#a6e22e, 0.1),
   monokai-button-head-neutral   : #376b20,
 
-  monokai-header-head-chosen    : rgba(#a6e22e, .4),
-  monokai-line-head-chosen      : rgba(#a6e22e, .25),
+  monokai-header-head-chosen    : rgba(#a6e22e, 0.4),
+  monokai-line-head-chosen      : rgba(#a6e22e, 0.25),
   monokai-button-head-chosen    : #39800d,
 
-  monokai-header-origin-neutral : rgba(#60d9f1, .35),
-  monokai-line-origin-neutral   : rgba(#60d9f1, .15),
+  monokai-header-origin-neutral : rgba(#60d9f1, 0.35),
+  monokai-line-origin-neutral   : rgba(#60d9f1, 0.15),
   monokai-button-origin-neutral : #38848c,
 
-  monokai-header-origin-chosen  : rgba(#60d9f1, .5),
-  monokai-line-origin-chosen    : rgba(#60d9f1, .35),
+  monokai-header-origin-chosen  : rgba(#60d9f1, 0.5),
+  monokai-line-origin-chosen    : rgba(#60d9f1, 0.35),
   monokai-button-origin-chosen  : #3ea4b2,
 
-  monokai-header-not-chosen     : rgba(#76715d, .24),
-  monokai-line-not-chosen       : rgba(#76715d, .1),
+  monokai-header-not-chosen     : rgba(#76715d, 0.24),
+  monokai-line-not-chosen       : rgba(#76715d, 0.1),
 
-  solarized-light-header-head-neutral   : rgba(#859900, .37),
-  solarized-light-line-head-neutral     : rgba(#859900, .2),
+  solarized-light-header-head-neutral   : rgba(#859900, 0.37),
+  solarized-light-line-head-neutral     : rgba(#859900, 0.2),
   solarized-light-button-head-neutral   : #afb262,
 
-  solarized-light-header-head-chosen    : rgba(#859900, .5),
-  solarized-light-line-head-chosen      : rgba(#859900, .37),
+  solarized-light-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-light-line-head-chosen      : rgba(#859900, 0.37),
   solarized-light-button-head-chosen    : #94993d,
 
-  solarized-light-header-origin-neutral : rgba(#2878c9, .37),
-  solarized-light-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-light-header-origin-neutral : rgba(#2878c9, 0.37),
+  solarized-light-line-origin-neutral   : rgba(#2878c9, 0.15),
   solarized-light-button-origin-neutral : #60a1bf,
 
-  solarized-light-header-origin-chosen  : rgba(#2878c9, .6),
-  solarized-light-line-origin-chosen    : rgba(#2878c9, .37),
+  solarized-light-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-light-line-origin-chosen    : rgba(#2878c9, 0.37),
   solarized-light-button-origin-chosen  : #2482b2,
 
-  solarized-light-header-not-chosen     : rgba(#839496, .37),
-  solarized-light-line-not-chosen       : rgba(#839496, .2),
+  solarized-light-header-not-chosen     : rgba(#839496, 0.37),
+  solarized-light-line-not-chosen       : rgba(#839496, 0.2),
 
-  solarized-dark-header-head-neutral   : rgba(#859900, .35),
-  solarized-dark-line-head-neutral     : rgba(#859900, .15),
+  solarized-dark-header-head-neutral   : rgba(#859900, 0.35),
+  solarized-dark-line-head-neutral     : rgba(#859900, 0.15),
   solarized-dark-button-head-neutral   : #376b20,
 
-  solarized-dark-header-head-chosen    : rgba(#859900, .5),
-  solarized-dark-line-head-chosen      : rgba(#859900, .35),
+  solarized-dark-header-head-chosen    : rgba(#859900, 0.5),
+  solarized-dark-line-head-chosen      : rgba(#859900, 0.35),
   solarized-dark-button-head-chosen    : #39800d,
 
-  solarized-dark-header-origin-neutral : rgba(#2878c9, .35),
-  solarized-dark-line-origin-neutral   : rgba(#2878c9, .15),
+  solarized-dark-header-origin-neutral : rgba(#2878c9, 0.35),
+  solarized-dark-line-origin-neutral   : rgba(#2878c9, 0.15),
   solarized-dark-button-origin-neutral : #086799,
 
-  solarized-dark-header-origin-chosen  : rgba(#2878c9, .6),
-  solarized-dark-line-origin-chosen    : rgba(#2878c9, .35),
+  solarized-dark-header-origin-chosen  : rgba(#2878c9, 0.6),
+  solarized-dark-line-origin-chosen    : rgba(#2878c9, 0.35),
   solarized-dark-button-origin-chosen  : #0082cc,
 
-  solarized_dark_header_not_chosen     : rgba(#839496, .25),
-  solarized_dark_line_not_chosen       : rgba(#839496, .15),
+  solarized_dark_header_not_chosen     : rgba(#839496, 0.25),
+  solarized_dark_line_not_chosen       : rgba(#839496, 0.15),
 
   none_header_head_neutral   : $gray-normal,
   none_line_head_neutral     : $gray-normal,
@@ -210,26 +210,20 @@ $colors: (
 }
 
 #conflicts {
-
   .white {
-    @include color-scheme('white')
-  }
+    @include color-scheme('white'); }
 
   .dark {
-    @include color-scheme('dark')
-  }
+    @include color-scheme('dark'); }
 
   .monokai {
-    @include color-scheme('monokai')
-  }
+    @include color-scheme('monokai'); }
 
   .solarized-light {
-    @include color-scheme('solarized-light')
-  }
+    @include color-scheme('solarized-light'); }
 
   .solarized-dark {
-    @include color-scheme('solarized-dark')
-  }
+    @include color-scheme('solarized-dark'); }
 
   .diff-wrap-lines .line_content {
     white-space: normal;
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index cfd3faab122..e73d1a1289d 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -491,11 +491,9 @@
   .merge-request {
     padding: 10px 0 10px 15px;
     position: relative;
-    display: -webkit-flex;
     display: flex;
 
     .issuable-info-container {
-      -webkit-flex: 1;
       flex: 1;
     }
 
@@ -786,7 +784,6 @@
   }
 
   @include media-breakpoint-up(md) {
-    position: -webkit-sticky;
     position: sticky;
     top: $header-height + $mr-tabs-height;
     width: 100%;
@@ -814,7 +811,6 @@
 
   @include media-breakpoint-up(sm) {
     position: sticky;
-    position: -webkit-sticky;
   }
 
   &.affix {
diff --git a/app/assets/stylesheets/pages/milestone.scss b/app/assets/stylesheets/pages/milestone.scss
index 15f3a2ef4a8..3ca8e943a3a 100644
--- a/app/assets/stylesheets/pages/milestone.scss
+++ b/app/assets/stylesheets/pages/milestone.scss
@@ -67,18 +67,14 @@ $status-box-line-height: 26px;
   .card-header {
     line-height: $line-height-base;
     padding: 14px 16px;
-    display: -webkit-flex;
     display: flex;
 
     .title {
-      -webkit-flex: 1;
-      -webkit-flex-grow: 1;
       flex: 1;
       flex-grow: 2;
     }
 
     .counter {
-      -webkit-flex: 1;
       flex: 0;
       padding-left: 16px;
     }
diff --git a/app/assets/stylesheets/pages/note_form.scss b/app/assets/stylesheets/pages/note_form.scss
index 51f755c67af..3343b55d24b 100644
--- a/app/assets/stylesheets/pages/note_form.scss
+++ b/app/assets/stylesheets/pages/note_form.scss
@@ -58,7 +58,7 @@
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
-                box-shadow ease-in-out 0.15s;
+      box-shadow ease-in-out 0.15s;
 
     &.is-focused {
       @extend .form-control:focus;
@@ -72,7 +72,7 @@
     &.is-dropzone-hover {
       border-color: $green-500;
       box-shadow: 0 0 2px $black-transparent,
-                  0 0 4px $green-500-focus;
+        0 0 4px $green-500-focus;
 
       .comment-toolbar,
       .nav-links {
@@ -84,9 +84,7 @@
 
 .md-header .nav-links {
   display: flex;
-  display: -webkit-flex;
   flex-flow: row wrap;
-  -webkit-flex-flow: row wrap;
   width: 100%;
 
   .float-right {
@@ -444,7 +442,7 @@ table {
 .uploading-error-message {
   @include media-breakpoint-down(xs) {
     &::after {
-      content: "\a";
+      content: '\a';
       white-space: pre;
     }
   }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 7e7eff1346a..baf0e1eadee 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -905,7 +905,6 @@ $note-form-margin-left: 72px;
 }
 
 .discussion-filter-container {
-
   .btn > svg {
     width: $gl-col-padding;
     height: $gl-col-padding;
@@ -927,7 +926,6 @@ $note-form-margin-left: 72px;
 //This needs to be deleted when Snippet/Commit comments are convered to Vue
 // See https://gitlab.com/gitlab-org/gitlab-ce/issues/53918#note_117038785
 .unstyled-comments {
-
   .discussion-header {
     padding: $gl-padding;
     border-bottom: 1px solid $border-color;
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index e676d48c1f4..acc562f0769 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -994,7 +994,6 @@ button.mini-pipeline-graph-dropdown-toggle {
  * Top arrow in the dropdown in the mini pipeline graph
  */
 .mini-pipeline-graph-dropdown-menu {
-
   &::before,
   &::after {
     content: '';
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index a1e847009fc..ab26259c007 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -270,11 +270,9 @@
       position: static;
       padding: 0 16px;
       margin-bottom: 20px;
-      display: -webkit-flex;
       display: flex;
 
       .btn {
-        -webkit-flex-grow: 1;
         flex-grow: 1;
 
         &:first-child {
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 277030ad3af..1349845f300 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -571,9 +571,7 @@
 
   .import-buttons {
     padding-left: 0;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
 
     .btn {
diff --git a/app/assets/stylesheets/pages/search.scss b/app/assets/stylesheets/pages/search.scss
index 149c3254d84..20bdc6596e9 100644
--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -84,9 +84,7 @@ input[type='checkbox']:hover {
 
     .search-icon {
       transition: color $default-transition-duration;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-user-select: none;
+      user-select: none;
     }
 
     .clear-icon {
@@ -185,13 +183,11 @@ input[type='checkbox']:hover {
 
 .search-holder {
   @include media-breakpoint-up(sm) {
-    display: -webkit-flex;
     display: flex;
   }
 
   .search-field-holder,
   .project-filter-form {
-    -webkit-flex: 1 0 auto;
     flex: 1 0 auto;
     position: relative;
     margin-right: 0;
diff --git a/app/assets/stylesheets/pages/status.scss b/app/assets/stylesheets/pages/status.scss
index 7d59dd3b5d1..f4d568d02ac 100644
--- a/app/assets/stylesheets/pages/status.scss
+++ b/app/assets/stylesheets/pages/status.scss
@@ -33,7 +33,7 @@
     border-color: $gl-text-color;
 
     &:not(span):hover {
-      background-color: rgba($gl-text-color, .07);
+      background-color: rgba($gl-text-color, 0.07);
     }
   }
 
@@ -54,7 +54,7 @@
     border-color: $gl-text-color-secondary;
 
     &:not(span):hover {
-      background-color: rgba($gl-text-color-secondary, .07);
+      background-color: rgba($gl-text-color-secondary, 0.07);
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index 3fc37e20c36..2a1e8345755 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -6,9 +6,7 @@
 .todos-list > .todo {
   // workaround because we cannot use border-colapse
   border-top: 1px solid transparent;
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-direction: row;
   flex-direction: row;
 
   &:hover {
@@ -29,23 +27,18 @@
   .todo-avatar,
   .todo-actions {
     @include transition(opacity);
-    -webkit-flex: 0 0 auto;
     flex: 0 0 auto;
   }
 
   .todo-actions {
-    display: -webkit-flex;
     display: flex;
-    -webkit-justify-content: center;
     justify-content: center;
-    -webkit-flex-direction: column;
     flex-direction: column;
     margin-left: 10px;
     min-width: 55px;
   }
 
   .todo-item {
-    -webkit-flex: 0 1 100%;
     flex: 0 1 100%;
     min-width: 0;
   }
@@ -60,13 +53,13 @@
 
       .todo-avatar,
       .todo-item {
-        opacity: .6;
+        opacity: 0.6;
       }
     }
 
     .todo-avatar,
     .todo-item {
-      opacity: .2;
+      opacity: 0.2;
     }
 
     .btn {
@@ -82,7 +75,6 @@
     display: flex;
 
     > .title-item {
-      -webkit-flex: 0 0 auto;
       flex: 0 0 auto;
       margin: 0 2px;
 
@@ -96,7 +88,6 @@
     }
 
     .todo-label {
-      -webkit-flex: 0 1 auto;
       flex: 0 1 auto;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -222,23 +213,19 @@
 }
 
 .todos-empty {
-  display: -webkit-flex;
   display: flex;
-  -webkit-flex-direction: column;
   flex-direction: column;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
 
   @include media-breakpoint-up(sm) {
-    -webkit-flex-direction: row;
     flex-direction: row;
     padding-top: 80px;
   }
 }
 
 .todos-empty-content {
-  -webkit-align-self: center;
   align-self: center;
   max-width: 480px;
   margin-right: 20px;
@@ -252,7 +239,6 @@
   @include media-breakpoint-up(sm) {
     width: 300px;
     margin-right: 0;
-    -webkit-order: 2;
     order: 2;
   }
 }
diff --git a/app/assets/stylesheets/pages/tree.scss b/app/assets/stylesheets/pages/tree.scss
index a46b8679a42..5664f46484e 100644
--- a/app/assets/stylesheets/pages/tree.scss
+++ b/app/assets/stylesheets/pages/tree.scss
@@ -172,26 +172,6 @@
         text-decoration: inherit;
       }
     }
-
-    .tree_commit {
-      max-width: 320px;
-
-      .str-truncated {
-        max-width: 100%;
-      }
-    }
-
-    .tree_time_ago {
-      min-width: 135px;
-    }
-  }
-
-  .tree_author {
-    padding-right: 8px;
-
-    .commit-author-name {
-      color: $gl-text-color;
-    }
   }
 
   .tree-truncated-warning {
diff --git a/app/assets/stylesheets/pages/ui_dev_kit.scss b/app/assets/stylesheets/pages/ui_dev_kit.scss
index 84c617c7ec0..7744fd814d0 100644
--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -10,7 +10,7 @@
     margin-bottom: 15px;
 
     &::before {
-      content: "Example";
+      content: 'Example';
       color: $ui-dev-kit-example-color;
     }
   }