Merge branch 'enable-scss-lint-space-after-variable-colon' into 'master'

Enable SpaceAfterVariableColon in scss-lint

## What does this MR do?
Enables `SpaceAfterVariableColon` 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 !7080

.scss-lint.yml

@@ -191,7 +191,7 @@ linters:
   # Variables should be formatted with a single space separating the colon
   # from the variable's value.
   SpaceAfterVariableColon:
-    enabled: false
+    enabled: true
 
   # Variables should be formatted with no space between the name and the
   # colon.

app/assets/stylesheets/framework/tw_bootstrap_variables.scss

@@ -16,21 +16,21 @@
 // $gray-light:             lighten($gray-base, 46.7%) // #777
 // $gray-lighter:           lighten($gray-base, 93.5%) // #eee
 
-$brand-primary:  $gl-primary;
-$brand-success:  $gl-success;
-$brand-info:     $gl-info;
-$brand-warning:  $gl-warning;
-$brand-danger:   $gl-danger;
+$brand-primary: $gl-primary;
+$brand-success: $gl-success;
+$brand-info: $gl-info;
+$brand-warning: $gl-warning;
+$brand-danger: $gl-danger;
 
-$border-radius-base:        3px !default;
-$border-radius-large:       3px !default;
-$border-radius-small:       3px !default;
+$border-radius-base: 3px !default;
+$border-radius-large: 3px !default;
+$border-radius-small: 3px !default;
 
 
 //== Scaffolding
 //
-$text-color:            $gl-text-color;
-$link-color:            $gl-link-color;
+$text-color: $gl-text-color;
+$link-color: $gl-link-color;
 
 
 //== Typography
@@ -38,112 +38,112 @@ $link-color:            $gl-link-color;
 //## Font, line-height, and color for body text, headings, and more.
 
 $font-family-sans-serif: $regular_font;
-$font-family-monospace:  $monospace_font;
-$font-size-base:         $gl-font-size;
+$font-family-monospace: $monospace_font;
+$font-size-base: $gl-font-size;
 
 
 //== Components
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$padding-base-vertical:     $gl-vert-padding;
-$padding-base-horizontal:   $gl-padding;
-$component-active-color:    #fff;
-$component-active-bg:       $brand-info;
+$padding-base-vertical: $gl-vert-padding;
+$padding-base-horizontal: $gl-padding;
+$component-active-color: #fff;
+$component-active-bg: $brand-info;
 
 //== Forms
 //
 //##
 
-$input-color:                    $text-color;
-$input-border:                   $border-color;
-$input-border-focus:             $focus-border-color;
-$legend-color:                   $text-color;
+$input-color: $text-color;
+$input-border: $border-color;
+$input-border-focus: $focus-border-color;
+$legend-color: $text-color;
 
 
 //== Pagination
 //
 //##
 
-$pagination-color:                     $gl-gray;
-$pagination-bg:                        #fff;
-$pagination-border:                    $border-color;
+$pagination-color: $gl-gray;
+$pagination-bg: #fff;
+$pagination-border: $border-color;
 
-$pagination-hover-color:               $gl-gray;
-$pagination-hover-bg:                  $row-hover;
-$pagination-hover-border:              $border-color;
+$pagination-hover-color: $gl-gray;
+$pagination-hover-bg: $row-hover;
+$pagination-hover-border: $border-color;
 
-$pagination-active-color:              $blue-dark;
-$pagination-active-bg:                 #fff;
-$pagination-active-border:             $border-color;
+$pagination-active-color: $blue-dark;
+$pagination-active-bg: #fff;
+$pagination-active-border: $border-color;
 
-$pagination-disabled-color:            #cdcdcd;
-$pagination-disabled-bg:               $background-color;
-$pagination-disabled-border:           $border-color;
+$pagination-disabled-color: #cdcdcd;
+$pagination-disabled-bg: $background-color;
+$pagination-disabled-border: $border-color;
 
 
 //== Form states and alerts
 //
 //## Define colors for form feedback states and, by default, alerts.
 
-$state-success-text:             #fff;
-$state-success-bg:               $brand-success;
-$state-success-border:           $brand-success;
+$state-success-text: #fff;
+$state-success-bg: $brand-success;
+$state-success-border: $brand-success;
 
-$state-info-text:                #fff;
-$state-info-bg:                  $brand-info;
-$state-info-border:              $brand-info;
+$state-info-text: #fff;
+$state-info-bg: $brand-info;
+$state-info-border: $brand-info;
 
-$state-warning-text:             #fff;
-$state-warning-bg:               $brand-warning;
-$state-warning-border:           $brand-warning;
+$state-warning-text: #fff;
+$state-warning-bg: $brand-warning;
+$state-warning-border: $brand-warning;
 
-$state-danger-text:              #fff;
-$state-danger-bg:                $brand-danger;
-$state-danger-border:            $brand-danger;
+$state-danger-text: #fff;
+$state-danger-bg: $brand-danger;
+$state-danger-border: $brand-danger;
 
 
 //== Alerts
 //
 //## Define alert colors, border radius, and padding.
 
-$alert-border-radius:            0;
+$alert-border-radius: 0;
 
 
 //== Panels
 //
 //##
 
-$panel-border-radius:         2px;
-$panel-default-text:       $text-color;
-$panel-default-border:     $border-color;
+$panel-border-radius: 2px;
+$panel-default-text: $text-color;
+$panel-default-border: $border-color;
 $panel-default-heading-bg: $background-color;
-$panel-footer-bg:          $background-color;
-$panel-inner-border:       $border-color;
+$panel-footer-bg: $background-color;
+$panel-inner-border: $border-color;
 
 //== Wells
 //
 //##
 
-$well-bg:                     $gray-light;
-$well-border:                 #eee;
+$well-bg: $gray-light;
+$well-border: #eee;
 
 //== Code
 //
 //##
 
-$code-color:                  #c7254e;
-$code-bg:                     #f9f2f4;
+$code-color: #c7254e;
+$code-bg: #f9f2f4;
 
-$kbd-color:                   #fff;
-$kbd-bg:                      #333;
+$kbd-color: #fff;
+$kbd-bg: #333;
 
 //== Buttons
 //
 //##
-$btn-default-color:              $gl-text-color;
-$btn-default-bg:                 #fff;
-$btn-default-border:             #e7e9ed;
+$btn-default-color: $gl-text-color;
+$btn-default-bg: #fff;
+$btn-default-border: #e7e9ed;
 
 //== Nav
 //
@@ -153,8 +153,8 @@ $nav-link-padding: 13px $gl-padding;
 //== Code
 //
 //##
-$pre-bg:           $background-color !default;
-$pre-color:        $gl-gray !default;
+$pre-bg: $background-color !default;
+$pre-color: $gl-gray !default;
 $pre-border-color: $border-color;
 
 $table-bg-accent: $background-color;

app/assets/stylesheets/framework/variables.scss

@@ -84,39 +84,39 @@ $warning-message-border: #f0e2bb;
 /*
  * UI elements
  */
-$border-color:          #e5e5e5;
-$focus-border-color:    #3aabf0;
-$table-border-color:    #f0f0f0;
-$background-color:      $gray-light;
+$border-color: #e5e5e5;
+$focus-border-color: #3aabf0;
+$table-border-color: #f0f0f0;
+$background-color: $gray-light;
 $dark-background-color: #f5f5f5;
-$table-text-gray:       #8f8f8f;
+$table-text-gray: #8f8f8f;
 
 /*
  * Text
  */
-$gl-font-size:         15px;
-$gl-title-color:       #333;
-$gl-text-color:        #5c5c5c;
-$gl-text-color-light:  #8c8c8c;
-$gl-text-green:        #4a2;
-$gl-text-red:          #d12f19;
-$gl-text-orange:       #d90;
-$gl-link-color:        #3084bb;
-$gl-dark-link-color:   #333;
+$gl-font-size: 15px;
+$gl-title-color: #333;
+$gl-text-color: #5c5c5c;
+$gl-text-color-light: #8c8c8c;
+$gl-text-green: #4a2;
+$gl-text-red: #d12f19;
+$gl-text-orange: #d90;
+$gl-link-color: #3084bb;
+$gl-dark-link-color: #333;
 $gl-placeholder-color: #8f8f8f;
-$gl-icon-color:        $gl-placeholder-color;
-$gl-grayish-blue:      #7f8fa4;
-$gl-gray:              $gl-text-color;
-$gl-gray-dark:         #313236;
-$gl-gray-light:        $gl-placeholder-color;
-$gl-header-color:      #4c4e54;
+$gl-icon-color: $gl-placeholder-color;
+$gl-grayish-blue: #7f8fa4;
+$gl-gray: $gl-text-color;
+$gl-gray-dark: #313236;
+$gl-gray-light: $gl-placeholder-color;
+$gl-header-color: #4c4e54;
 
 /*
  * Lists
  */
-$list-font-size:   $gl-font-size;
+$list-font-size: $gl-font-size;
 $list-title-color: $gl-title-color;
-$list-text-color:  $gl-text-color;
+$list-text-color: $gl-text-color;
 $list-text-height: 42px;
 
 /*

app/assets/stylesheets/mailers/devise.scss

@@ -5,13 +5,13 @@
 // Styles defined here are embedded directly into the resulting email HTML via
 // the `premailer` gem.
 
-$body-background-color:    #363636;
+$body-background-color: #363636;
 $message-background-color: #fafafa;
 
-$header-color:             #6b4fbb;
-$body-color:               #444;
-$cta-color:                #e14329;
-$footer-link-color:        #7e7e7e;
+$header-color: #6b4fbb;
+$body-color: #444;
+$cta-color: #e14329;
+$footer-link-color: #7e7e7e;
 
 $font-family: Helvetica, Arial, sans-serif;