Merge branch 'enable-scss-lint-pseudo-element' into 'master'

Enable PseudoElement in scss-lint ## What does this MR do? Enables `PseudoElement` in `.scss-lint.yml` ## Are there points in the code the reviewer needs to double check? None ## Why was this MR needed? Improve SCSS maintainability and consistency ## Screenshots (if relevant) None ## Does this MR meet the acceptance criteria? - 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 it does - 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? #23485 See merge request !7083

Merge branch 'enable-scss-lint-pseudo-element' into 'master'
168cd381 · Annabel Dunstone Gray · e4990b8c · d698ec0e · 168cd381 · 168cd381
Commit 168cd381 authored Oct 26, 2016 by Annabel Dunstone Gray
12 changed files
--- a/.scss-lint.yml
+++ b/.scss-lint.yml
@@ -143,7 +143,7 @@ linters:
  # with two colons. Pseudo-classes, like :hover and :first-child, should
  # be declared with one colon.
  PseudoElement:
-    enabled: false
+    enabled: true
  
  # Avoid qualifying elements in selectors (also known as "tag-qualifying").
  QualifyingElement:

--- a/app/assets/stylesheets/framework/dropdowns.scss
+++ b/app/assets/stylesheets/framework/dropdowns.scss
@@ -486,7 +486,7 @@
        font-size: 20px;
        text-indent: 0;

-        &:before {
+        &::before {
          display: block;
          position: relative;
          top: -2px;
@@ -518,7 +518,7 @@
        background-color: transparent;
        border: 0;

-        .ui-icon:before {
+        .ui-icon::before {
          color: $md-link-color;
        }
      }
@@ -527,7 +527,7 @@
    .ui-datepicker-prev {
      left: 0;

-      .ui-icon:before {
+      .ui-icon::before {
        content: '\f104';
        text-align: left;
      }
@@ -536,7 +536,7 @@
    .ui-datepicker-next {
      right: 0;

-      .ui-icon:before {
+      .ui-icon::before {
        content: '\f105';
        text-align: right;
      }

--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -14,7 +14,7 @@
    border-bottom: 1px solid #eee;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

-    &:after {
+    &::after {
      content: " ";
      display: table;
      clear: both;

--- a/app/assets/stylesheets/framework/timeline.scss
+++ b/app/assets/stylesheets/framework/timeline.scss
@@ -45,7 +45,7 @@

 @media (max-width: $screen-xs-max) {
  .timeline {
-    &:before {
+    &::before {
      background: none;
    }


--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -148,7 +148,7 @@

  a[href*="/uploads/"],
  a[href*="storage.googleapis.com/google-code-attachments/"] {
-    &:before {
+    &::before {
      margin-right: 4px;

      font: normal normal normal 14px/1 FontAwesome;
@@ -158,13 +158,13 @@
      content: "\f0c6";
    }

-    &:hover:before {
+    &:hover::before {
      text-decoration: none;
    }
  }

  a.no-attachment-icon {
-    &:before {
+    &::before {
      display: none;
    }
  }
@@ -183,13 +183,13 @@
      position: absolute;
      text-decoration: none;

-      &:after {
+      &::after {
        content: image-url('icon_anchor.svg');
        visibility: hidden;
      }
    }

-    &:hover > a.anchor:after {
+    &:hover > a.anchor::after {
      visibility: visible;
    }
  }

--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -94,14 +94,14 @@
          position: relative;

          &.old {
-            &:before {
+            &::before {
              content: '-';
              position: absolute;
            }
          }

          &.new {
-            &:before {
+            &::before {
              content: '+';
              position: absolute;
            }
@@ -471,7 +471,7 @@
 .file-holder {
  .diff-line-num:not(.js-unfold-bottom) {
    a {
-      &:before {
+      &::before {
        content: attr(data-linenumber);
      }
    }

--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -474,8 +474,8 @@
        }

        .arrow {
-          &:before,
-          &:after {
+          &::before,
+          &::after {
            content: '';
            display: inline-block;
            position: absolute;
@@ -486,14 +486,14 @@
            top: 18px;
          }

-          &:before {
+          &::before {
            left: -5px;
            margin-top: -6px;
            border-width: 7px 5px 7px 0;
            border-right-color: $border-color;
          }

-          &:after {
+          &::after {
            left: -4px;
            margin-top: -9px;
            border-width: 10px 7px 10px 0;

--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -77,14 +77,14 @@

 // Middle dot divider between each element in a list of items.
 .middle-dot-divider {
-  &:after {
+  &::after {
    content: "\00B7"; // Middle Dot
    padding: 0 6px;
    font-weight: bold;
  }

  &:last-child {
-    &:after {
+    &::after {
      content: "";
      padding: 0;
    }

--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -193,7 +193,7 @@
    margin-left: 4px;

    .arrow {
-      &:before {
+      &::before {
        content: '';
        display: inline-block;
        position: absolute;
@@ -209,7 +209,7 @@
        pointer-events: none;
      }

-      &:after {
+      &::after {
        content: '';
        position: absolute;
        width: 0;
@@ -351,7 +351,7 @@ a.deploy-project-label {
  line-height: 36px;
  margin: 0;

-  > li + li:before {
+  > li + li::before {
    padding: 0 3px;
    color: #999;
  }
@@ -790,7 +790,7 @@ pre.light-well {
    top: 7px;
    color: $location-icon-color;

-    &:before {
+    &::before {
      font-family: FontAwesome;
      font-weight: normal;
      font-style: normal;

--- a/app/assets/stylesheets/pages/search.scss
+++ b/app/assets/stylesheets/pages/search.scss
@@ -72,7 +72,7 @@
      top: 0;
      color: $location-icon-color;

-      &:before {
+      &::before {
        font-family: FontAwesome;
        font-weight: normal;
        font-style: normal;

--- a/app/assets/stylesheets/pages/ui_dev_kit.scss
+++ b/app/assets/stylesheets/pages/ui_dev_kit.scss
@@ -5,7 +5,7 @@
  }

  .example {
-    &:before {
+    &::before {
      content: "Example";
      color: #bbb;
    }

--- a/app/assets/stylesheets/print.scss
+++ b/app/assets/stylesheets/print.scss
@@ -35,7 +35,7 @@ nav.navbar-collapse.collapse,
 .nav,
 .btn,
 ul.notes-form,
-.merge-request-ci-status .ci-status-link:after,
+.merge-request-ci-status .ci-status-link::after,
 .issuable-gutter-toggle,
 .gutter-toggle,
 .issuable-details .content-block-small,