FIX: sass-lint styleguide fixes

Dev/Install/client/src/styles/install.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 //Color Variables
 $message:     #BDBD00;    // blue
 $good:        #359318;    // green
@@ -8,7 +6,7 @@ $warning:			#E07127; 		// orange
 $warningBg:     #fcf8f2;
 $warningBorder:   #ffc28b;
 
-$error:				#C61414 /* #E21607 */; 		// red
+$error:       #C61414; // red - was #E21607
 $errorBg:     #FDF1F3;
 $errorBorder:   #F8C3CD;
 
@@ -18,18 +16,19 @@ $gradientBottom:	#7F9198;
 
 //Mixin to create a gradient from top to bottom
 @mixin topGradient($topColor, $bottomColor) {
-	background: $topColor; /* Old browszzzzzers */
+  background: $topColor; // Old browszzzzzers
-	background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); /* FF3.6+ */
+  background: -moz-linear-gradient(top, $topColor 0%, $bottomColor 100%); // FF3.6+
-	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$topColor), color-stop(100%,$bottomColor)); /* Chrome,Safari4+ */
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, $topColor), color-stop(100%, $bottomColor)); // Chrome,Safari4+
-	background: -webkit-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Chrome10+,Safari5.1+ */
+  background: -webkit-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Chrome10+,Safari5.1+
-	background: -o-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* Opera11.10+ */
+  background: -o-linear-gradient(top, $topColor 0%, $bottomColor 100%); // Opera11.10+
-	background: -ms-linear-gradient(top, $topColor 0%,$bottomColor 100%); /* IE10+ */
+  background: -ms-linear-gradient(top, $topColor 0%, $bottomColor 100%); // IE10+
-	background: linear-gradient(to bottom, $topColor 0%,$bottomColor 100%); /* W3C */
+  background: linear-gradient(to bottom, $topColor 0%, $bottomColor 100%); // W3C
+
   .lt-ie9 & {
-		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); /* IE6-9 */
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$topColor}', endColorstr='#{$bottomColor}',GradientType=0 ); // IE6-9
   }
-	$experimental-support-for-svg: true;
+  // $experimental-support-for-svg: true;
-	/* @include background-image(linear-gradient(top, $topColor,$bottomColor)); */
+  // @include background-image(linear-gradient(top, $topColor,$bottomColor));
 }
 
 //Mixin to create rounded corners. Takes a value for each of the 4 corners
@@ -54,7 +53,6 @@ $gradientBottom:	#7F9198;
   -webkit-box-shadow: $shadow;
   -moz-box-shadow: $shadow;
   box-shadow: $shadow;
-
 }
 
 //Mixin to create an inset box shadow
@@ -72,20 +70,27 @@ body {
   color: #333;
   width: 940px;
   margin: 0 auto 18px;
-	/* background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4; */
+  // background: url(../../../admin/images/textures/bg_cms_main_content.png) repeat scroll left top #F0F3F4;
   background-color: #f4f4f4;
 
-	/* Typography */
+  // Typography
   p {
     font-size: 13px;
     line-height: 18px;
     margin-bottom: 18px;
     color: #333;
   }
+
   a {
     color: $link;
   }
-	h1, h2, h3, h4, h5, h6 {
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
     color: #222;
     font-family: inherit;
     font-weight: bold;
@@ -94,19 +99,19 @@ body {
     text-rendering: optimizelegibility;
     clear: both;
     text-shadow: 0 1px 0 #fff;
+
     small {
       font-weight: normal;
       font-size: 12px;
       color: #666;
     }
   }
+
   h1 {
     font-size: 36px;
     line-height: 36px;
     letter-spacing: -0.5px;
-	}
+    background: transparent url("../images/logo.gif") no-repeat left top;
-	h1 {
-		background: transparent url(../images/logo.gif) no-repeat left top;
     text-indent: -9999px;
     height: 164px;
     width: 161px;
@@ -115,65 +120,85 @@ body {
     border-right: 1px solid $gradientTop;
     margin-right: 40px;
   }
+
   h2 {
     font-size: 34px;
     line-height: 36px;
     letter-spacing: -0.5px;
   }
+
   h3 {
     font-size: 18px;
     line-height: 27px;
   }
+
   h4 {
     font-size: 14px;
     line-height: 18px;
     margin: 18px 0 9px;
   }
+
   h5 {
     font-size: 12px;
     line-height: 18px;
     margin: 18px 0 0;
   }
 
-	/* Helpers */
+  //PHP5 required screen
+  #Header {
+    h1 {
+      margin-top: 45px;
+      margin-bottom: 27px;
+    }
+
+    h3 {
+      margin-top: -10px;
+    }
+  }
+
+  // Helpers
   .clear {
     clear: both;
   }
+
   .left {
     float: left;
   }
 
-	/* Messages */
+  // Messages
   .message {
     padding: 2px 18px;
     margin-bottom: 18px;
     @include roundedCorners(3px, 3px, 3px, 3px);
+
     p {
       margin: 11px 0 13px;
     }
+
     &.warning {
       background-color: $warningBg;
       border: 1px $warningBorder solid;
     }
+
     &.error {
-			background-color: #FDF1F3 /* #fdf5f5 */;
+      background-color: #FDF1F3; // was #fdf5f5
       border: 1px solid $errorBorder;
     }
+
     ul {
       margin-left: 18px;
       margin-top: -9px;
-			li {
+    }
+  }
 
-			}
-		}
-	}
   .helpText {
     float: right;
     width: 425px;
     padding-left: 20px;
     color: #666;
     margin-top: 0;
-		background: transparent url(../images/question.png) no-repeat left 1px;
+    background: transparent url("../images/question.png") no-repeat left 1px;
+
     &.requirementsHelpText {
       margin-top: 17px;
     }
@@ -185,39 +210,45 @@ body {
       margin: 9px 0 27px;
       border-collapse: collapse;
       width: 100%;
+
       thead {
-				tr {
+        td,
-					td, th {
+        th {
           font-weight: bold;
           vertical-align: bottom;
           padding: 12px;
         }
       }
-			}
+
-			th, td {
+      th,
+      td {
         padding: 8px 12px;
         text-align: left;
       }
+
       td {
         vertical-align: top;
-				border-top: none;
+        border-top: 0;
         background-color: #fff;
       }
-			th + th,
+      // th + th,
-			td + td,
+      // td + td,
-			th + td {
+      // th + td {
-				/* border-left: 1px solid #ddd; */
+      //   border-left: 1px solid #ddd;
-			}
+      // }
+
       tbody {
         tr:nth-child(odd) td,
         tr:nth-child(odd) th {
           background-color: #fcfcfc;
         }
+
         tr:hover td,
         tr:hover th {
           background-color: #f6f6f6;
         }
       }
+
       tfoot {
         font-style: italic;
         color: #888;
@@ -225,7 +256,9 @@ body {
     }
 
     // Forms
-		input, textarea, select {
+    input,
+    textarea,
+    select {
       width: 420px;
       margin-bottom: 9px;
       color: #707070;
@@ -244,6 +277,7 @@ body {
       transition: border linear .2s, box-shadow linear .2s;
       @include box-shadow(inset 0 1px 3px rgba(0, 0, 0, .1));
     }
+
     input:focus,
     textarea:focus {
       outline: 0;
@@ -251,6 +285,7 @@ body {
       $shadow: inset 0 1px 3px rgba(0, 0, 0, .1), 0 0 4px rgba(82, 168, 236, .6);
       @include box-shadow($shadow);
     }
+
     input[type=file]:focus,
     input[type=checkbox]:focus,
     select:focus {
@@ -262,12 +297,14 @@ body {
     select {
       height: 26px;
     }
+
     option {
       line-height: 27px;
       font-size: 12px;
       padding: 2px 6px;
       color: #666;
     }
+
     label {
       width: auto;
       float: none;
@@ -276,9 +313,11 @@ body {
       text-align: left;
       display: block;
     }
+
     .fields {
       float: left;
     }
+
     input.action {
       text-align: center;
       font-weight: bold;
@@ -296,20 +335,26 @@ body {
       @include roundedCorners(3px, 3px, 3px, 3px);
       @include boxShadow(0, 1px, 0, 0, #fff);
       background-color: #ddd;
+
       &:hover {
         @include boxShadow(0, 1px, 2px, 0, #ccc);
         @include topGradient (#fbfbfb, #ccc);
       }
-			&:focus, &:active {
+
+      &:focus,
+      &:active {
         @include boxShadow(0, 1px, 0, 0, #fff);
         @include topGradient (#fbfbfb, #bbb);
       }
     }
+
     input.action:hover,
     input.action:focus {
       cursor: pointer;
     }
-		input[type="checkbox"], input[type="radio"] {
+
+    input[type="checkbox"],
+    input[type="radio"] {
       border: medium none;
       height: auto;
       line-height: normal;
@@ -319,28 +364,34 @@ body {
       float: left;
       margin-top: 3px;
     }
+
     #install_button {
       font-size: 20px;
       color: #fff;
       border-color: #78A127 #78A127 #59781D;
       text-shadow: 0 1px 1px #4D7326;
       padding: 8px 14px;
-			background-color: green;
+      background-color: #008000;
       @include topGradient(#80BF40, #59862D);
       @include boxShadow(0, 1px, 0, 0, #fff);
+
       &:hover {
         @include boxShadow(0, 1px, 3px, 0, #bbb);
       }
-			&:focus, &:active {
+
+      &:focus,
+      &:active {
         @include boxShadow(0, 1px, 0, 0, #fff);
         @include topGradient(#80BF40, #59862D);
       }
+
       &[disabled=disabled] {
         border: 1px solid #aaa;
         border-color: #bbb #bbb #aaa;
         color: #999;
         text-shadow: 0 1px 0 #eee;
         @include topGradient (#fbfbfb, #bbb);
+
         &:hover {
           @include boxShadow(0, 1px, 0, 0, #fff);
         }
@@ -348,26 +399,31 @@ body {
     }
   }
 
-	/* Custom styles */
+  // Custom styles
   #Container {
     margin-bottom: 40px;
+
     h3.sectionHeading {
       padding-top: 27px;
       border-top: 1px solid $gradientTop;
       clear: both;
     }
+
     #Header {
       margin-bottom: 30px;
       height: 200px;
+
       div.left {
         width: 698px;
         margin-top: 47px;
       }
     }
+
     #Navigation {
       display: none;
     }
   }
+
   h5.requirement {
     padding: 12px 18px;
     font-size: 14px;
@@ -381,6 +437,7 @@ body {
     @include boxShadow(0, 1px, 0, 0, #fff);
     background-color: #eee;
     @include topGradient($gradientTop, $gradientBottom);
+
     span {
       font-weight: normal;
       font-size: 12px;
@@ -391,15 +448,19 @@ body {
       @include roundedCorners(2px, 2px, 2px, 2px);
       @include boxShadow(0, 0, 2px, 0, $gradientBottom);
     }
+
     &.good span {
-			color: $good /* #359318 */;
+      color: $good; // was #359318
     }
+
     &.warning span {
       color: $warning;
     }
+
     &.error span {
       color: $error;
     }
+
     a {
       font-size: 11px;
       right: 9px;
@@ -410,51 +471,63 @@ body {
       text-decoration: none;
       font-weight: normal;
       padding-right: 21px;
-			background: transparent url(../images/arrows.png) no-repeat right top;
+      background: transparent url("../images/arrows.png") no-repeat right top;
+
       &:hover {
-				background: transparent url(../images/arrows.png) no-repeat right -40px;
+        background: transparent url("../images/arrows.png") no-repeat right -40px;
       }
     }
   }
+
   table.testResults {
-		border-top: none;
+    border-top: 0;
     margin-top: -1px;
     margin-bottom: 9px;
     @include boxShadow(0, 1px, 0, 0, #fff);
     @include roundedCorners(3px, 3px, 3px, 3px);
     overflow: hidden;
+
     tr {
       &.good {
         display: none;
-				border: none;
+        border: 0;
+
         td {
           color: $good;
         }
       }
+
       &.warning {
-				border: none;
+        border: 0;
+
         td {
           color: $warning;
         }
       }
+
       &.error {
-				border: none;
+        border: 0;
         color: $error;
       }
     }
+
     td {
       border: 1px solid #ddd;
       width: 50%;
     }
   }
-	#database_selection, #Themes {
+
+  #database_selection,
+  #Themes {
     list-style: none;
     margin: 0;
     margin-bottom: 18px;
     padding-left: 0;
+
     li {
       clear: left;
       padding: 3px 0;
+
       .dbfields {
         padding: 12px;
         border: 1px solid #ddd;
@@ -466,16 +539,20 @@ body {
       }
     }
   }
+
   ul#Themes {
     float: left;
     width: 445px;
   }
+
   .databaseError {
     width: 422px;
   }
+
   #Footer {
     margin-top: 67px;
     margin-bottom: 18px;
+
     p {
       font-size: 12px;
       color: #999;
@@ -483,31 +560,19 @@ body {
   }
 }
 
-//PHP5 required screen
+// styles not tested
-body {
-	#Header {
-		h1 {
-			margin-top: 45px;
-			margin-bottom: 27px;
-		}
-		h3 {
-			margin-top: -10px;
-		}
-	}
-}
-
-
-/* styles not tested */
 
 #adminAcc,
 #devHelp,
 #localeHelp {
   padding-top: 20px;
 }
+
 #devHelp,
 #devSection {
   height: 18em;
 }
+
 #use_environment_field {
   margin-bottom: 25px;
   background-color: #FAFAFA;
@@ -516,23 +581,29 @@ body {
   box-shadow: 0 1px 0 0 white;
   margin-bottom: 9px;
   padding: 10px 10px 8px;
+
   input {
     float: left;
     margin-right: 5px;
   }
 }
+
 .databaseError {
   ul {
     margin-bottom: 0;
   }
-	ul, li {
+
+  ul,
+  li {
     margin-left: 0;
     padding-left: 0;
   }
 }
+
 #Layout p.goodInstall {
   color: #359318;
 }
+
 .goodInstall {
   padding: 0.5em;
   background-color: #e2fee1;
@@ -541,6 +612,7 @@ body {
   overflow: hidden;
   line-height: 18px;
   padding: 10px;
+
   a {
     float: right;
     font-size: 18px;

admin/client/src/components/Form/Form.scss

@@ -101,14 +101,12 @@
 
 
 // Readonlys should be converted to an input
-// scss-lint:disable all
 .form__field-holder p.readonly,
 .form__field-holder input.readonly,
 .form__field-holder span.readonly,
 .readonly .form__field-holder > div {
   @extend .form-control-static;
 }
-// scss-lint:enable all
 
 
 // Radio / Checkbox
@@ -149,7 +147,6 @@ input.radio {
   }
 }
 
-
 @mixin form-responsive($breakpoint-inline, $breakpoint-inline-limit-width, $breakpoint-inline-limit-width-max) {
   @include media-breakpoint-up($breakpoint-inline) {
     .form-group {
@@ -157,7 +154,6 @@ input.radio {
 
       // Composite fields
       // TODO reduce nesting
-      // scss-lint:disable SelectorDepth
       .form__field-holder .form-group {
         .form__field-holder,
         .form__field-label {
@@ -176,7 +172,6 @@ input.radio {
           @include make-col-offset(0);
         }
       }
-      // scss-lint:enable SelectorDepth
 
       &::after {
         margin: $spacer-y $grid-gutter-width-half #{-$spacer-y};

admin/client/src/components/FormAction/FormAction.scss

@@ -93,7 +93,9 @@
 }
 
 @keyframes loading-icon {
-  0%, 80%, 100% {
+  0%,
+  80%,
+  100% {
     transform: scale(0);
   }
 

admin/client/src/components/GridField/GridField.scss

@@ -132,7 +132,7 @@
   &:active,
   &[class*="font-icon-"]:active,
   &:focus,
-  &[class*="font-icon-"]:focus, {
+  &[class*="font-icon-"]:focus {
     background-color: darken($table-bg-tools, 6%);
 
     &::before {

admin/client/src/components/PopoverField/PopoverField.scss

@@ -10,9 +10,7 @@
   }
 
   .arrow {
-    // scss-lint:disable all
     @extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
-    // scss-lint:enable all
   }
 }
 
@@ -20,9 +18,7 @@
 
   // Unable to use classes within the popover, so we use elements to style
   ul {
-    // scss-lint:disable ImportantRule
     padding-left: 0 !important; // TODO remove important by removing nesting of lists
-    // scss-lint:enable ImportantRule
     list-style-type: none;
     margin-left: -#{$popover-padding} + 1px; // minus border
     margin-right: -#{$popover-padding} + 1px;

admin/client/src/components/Toolbar/Toolbar.scss

@@ -72,7 +72,7 @@
 }
 
 .toolbar__back-button,
-.cms_backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
+.cms-backlink .toolbar__back-button { // TEMP: Needed for anchor buttons to override legacy styles
   float: left;
   margin: $spacer-y * .625 $spacer-x / 2 $spacer-y * .625 #{-$spacer-x * .625};
   padding-left: $spacer-x / 4;

admin/client/src/styles/_fonts.scss

@@ -14,257 +14,325 @@
 
 [class^="font-icon-"]::before,
 [class*=" font-icon-"]::before {
-  // scss-lint:disable ImportantRule
   font-family: "silverstripe" !important;
-  // scss-lint:disable ImportantRule
   font-style: normal !important;
-  // scss-lint:disable ImportantRule
   font-weight: normal !important;
-  // scss-lint:disable ImportantRule
   font-variant: normal !important;
-  // scss-lint:disable ImportantRule
   text-transform: none !important;
-  // scss-lint:enable ImportantRule
   speak: none;
   line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-// scss-lint:disable EmptyLineBetweenBlocks
 .font-icon-search::before {
   content: "\73";
 }
+
 .font-icon-sync::before {
   content: "\63";
 }
+
 .font-icon-print::before {
   content: "\64";
 }
+
 .font-icon-list::before {
   content: "\65";
 }
+
 .font-icon-plus-circled::before {
   content: "\66";
 }
+
 .font-icon-check-mark-2::before {
   content: "\6b";
 }
+
 .font-icon-book::before {
   content: "\6e";
 }
+
 .font-icon-book-open::before {
   content: "\6f";
 }
+
 .font-icon-plus::before {
   content: "\6a";
 }
+
 .font-icon-tree::before {
   content: "\70";
 }
+
 .font-icon-flow-tree::before {
   content: "\71";
 }
+
 .font-icon-info-circled::before {
   content: "\79";
 }
+
 .font-icon-chart-line::before {
   content: "\42";
 }
+
 .font-icon-graph-bar::before {
   content: "\45";
 }
+
 .font-icon-torsos-all::before {
   content: "\46";
 }
+
 .font-icon-torso::before {
   content: "\48";
 }
+
 .font-icon-picture::before {
   content: "\76";
 }
+
 .font-icon-chart-pie::before {
   content: "\41";
 }
+
 .font-icon-sitemap::before {
   content: "\43";
 }
+
 .font-icon-globe-1::before {
   content: "\52";
 }
+
 .font-icon-chat::before {
   content: "\74";
 }
+
 .font-icon-comment::before {
   content: "\77";
 }
+
 .font-icon-logout::before {
   content: "\7a";
 }
+
 .font-icon-cancel-circled::before {
   content: "\51";
 }
+
 .font-icon-left-open::before {
   content: "\54";
 }
+
 .font-icon-right-open::before {
   content: "\55";
 }
+
 .font-icon-check-mark::before {
   content: "\47";
 }
+
 .font-icon-check-mark-circle::before {
   content: "\49";
 }
+
 .font-icon-back-in-time::before {
   content: "\58";
 }
+
 .font-icon-cog::before {
   content: "\59";
 }
+
 .font-icon-fast-forward::before {
   content: "\68";
 }
+
 .font-icon-install::before {
   content: "\61";
 }
+
 .font-icon-down-circled::before {
   content: "\69";
 }
+
 .font-icon-eye::before {
   content: "\6c";
 }
+
 .font-icon-columns::before {
   content: "\72";
 }
+
 .font-icon-edit-write::before {
   content: "\75";
 }
+
 .font-icon-monitor::before {
   content: "\78";
 }
+
 .font-icon-mobile::before {
   content: "\4a";
 }
+
 .font-icon-tablet::before {
   content: "\4b";
 }
+
 .font-icon-pencil::before {
   content: "\6d";
 }
+
 .font-icon-trash::before {
   content: "\67";
 }
+
 .font-icon-edit::before {
   content: "\4e";
 }
+
 .font-icon-tick::before {
   content: "\4f";
 }
+
 .font-icon-upload::before {
   content: "\62";
 }
+
 .font-icon-folder-add::before {
   content: "\53";
 }
+
 .font-icon-silverstripe::before {
   content: "\4d";
 }
+
 .font-icon-thumbnails::before {
   content: "\57";
 }
+
 .font-icon-down-open::before {
   content: "\30";
 }
+
 .font-icon-up-open::before {
   content: "\31";
 }
+
 .font-icon-link::before {
   content: "\32";
 }
+
 .font-icon-level-up::before {
   content: "\56";
 }
+
 .font-icon-image::before {
   content: "\34";
 }
+
 .font-icon-trash-bin::before {
   content: "\50";
 }
+
 .font-icon-code::before {
   content: "\33";
 }
+
 .font-icon-left-open-big::before {
   content: "\35";
 }
+
 .font-icon-down-open-big::before {
   content: "\36";
 }
+
 .font-icon-up-open-big::before {
   content: "\37";
 }
+
 .font-icon-right-open-big::before {
   content: "\38";
 }
+
 .font-icon-dot-3::before {
   content: "\39";
 }
+
 .font-icon-save::before {
   content: "\21";
 }
+
 .font-icon-rocket::before {
   content: "\5a";
 }
+
 .font-icon-cancel::before {
   content: "\44";
 }
+
 .font-icon-happy::before {
   content: "\22";
 }
+
 .font-icon-sad::before {
   content: "\23";
 }
+
 .font-icon-angle-double-right::before {
   content: "\24";
 }
+
 .font-icon-angle-double-left::before {
   content: "\25";
 }
+
 .font-icon-angle-right::before {
   content: "\26";
 }
+
 .font-icon-angle-left::before {
   content: "\27";
 }
+
 .font-icon-caret-up-down::before {
   content: "\29";
 }
+
 .font-icon-caret-down-two::before {
   content: "\28";
 }
+
 .font-icon-caret-up-two::before {
   content: "\2a";
 }
+
 .font-icon-right-dir::before {
   content: "\2b";
 }
+
 .font-icon-down-dir::before {
   content: "\2c";
 }
+
 .font-icon-link-broken::before {
   content: "\2d";
 }
+
 .font-icon-switch::before {
   content: "\2e";
 }
+
 .font-icon-resize::before {
   content: "\4c";
 }
+
 .font-icon-menu::before {
   content: "\2f";
 }
+
 .font-icon-edit-list::before {
   content: "\3a";
 }
-
-// scss-lint:enable EmptyLineBetweenBlocks

admin/client/src/styles/_typography.scss

@@ -54,11 +54,9 @@ h1 {
       background: $table-bg-hover;
     }
 
-    // scss-lint:disable SelectorDepth
     tr:first-child td {
       border-top: $table-border-width solid $border-color-light;
     }
-    // scss-lint:enable SelectorDepth
   }
 
   tfoot {
@@ -74,7 +72,7 @@ h1 {
 
 .cms {
   code {
-    font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
+    font-family: "Bitstream Vera Sans Mono", "Courier", monospace;
 	}
 }
 
@@ -109,11 +107,9 @@ th {
   -ms-word-break: break-all;
   word-break: break-word;
 
-  // scss-lint:disable VendorPrefix
   -ms-hyphens: auto;
   -moz-hyphens: auto;
   -webkit-hyphens: auto;
-  // scss-lint:enable VendorPrefix
   hyphens: auto;
 }
 

admin/client/src/styles/_variables.scss

@@ -327,18 +327,14 @@ $input-bg-disabled: $background-darker;
 $input-color: $body-color-light;
 $input-border-color: $border-color-dark;
 $input-btn-border-width: $border-width; // For form controls and buttons
-// scss-lint:disable ColorVariable
 $input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-// scss-lint:enable ColorVariable
 
 $input-border-radius: $border-radius;
 $input-border-radius-lg: $border-radius-lg;
 $input-border-radius-sm: $border-radius-sm;
 
 $input-border-focus: #66afe9;
-// scss-lint:disable ColorVariable
 $input-box-shadow-focus: rgba(102, 175, 233, .6);
-// scss-lint:enable ColorVariable
 
 // $input-color-placeholder: #999;
 //
@@ -726,7 +722,7 @@ $shadow-level-1: rgba(0, 0, 0, .1);
 $shadow-level-2: rgba(0, 0, 0, .15);
 $shadow-level-3: rgba(0, 0, 0, .2);
 $shadow-level-4: rgba(0, 0, 0, .25);
-$shadow-level-5: rgba(0, 0, 0, .30);
+$shadow-level-5: rgba(0, 0, 0, .3);
 
 // TODO tidy all shadows cms wide (including AssetAdmin)
 $shadow-light: $shadow-level-3;

admin/client/src/styles/bundle.scss

@@ -2,11 +2,11 @@
 @import "variables";
 
 // Compatibilty with compass
-@import "legacy/_compasscompat";
+@import "legacy/compasscompat";
 
 // Thirdparty
 @import "chosen";
-@import "../../../../node_modules/bootstrap/scss/bootstrap.scss";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
 @import "../../../thirdparty/jquery-ui-themes/smoothness/jquery-ui.css";
 @import "../../../thirdparty/jstree/themes/apple/style.css";
 @import "../../../thirdparty/jquery-notice/jquery.notice.css";

admin/client/src/styles/legacy/_compasscompat.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 /*<?php
 // *************
 // Self-generating. Run with PHP on the command line to re-generate.

admin/client/src/styles/legacy/_elementMixins.scss

@@ -1,5 +1,3 @@
-// scss-lint:disable all
-
 //**
 // * This file contains mixins relating to specific functionality
 // *

admin/client/src/styles/legacy/_style.scss

@@ -63,8 +63,7 @@ body.cms {
 .cms-content-fields,
 .cms-preview,
 .cms-preview iframe,
-.cms-preview-controls
+.cms-preview-controls {
- {
   display: inline-block;
 }
 
@@ -75,7 +74,7 @@ body.cms {
   z-index: 60;
   min-height: $toolbar-total-height;
   background: {
-    image: url(../images/textures/cms_content_header.png);
+    image: url("../images/textures/cms_content_header.png");
     repeat: repeat;
     position: left bottom;
     color: $color-darker-bg;
@@ -116,7 +115,7 @@ body.cms {
       background-repeat: no-repeat;
     }
 
-		.cms_backlink {
+    .cms-backlink {
       margin-top: -7px;
       float: left;
     }

admin/client/src/styles/legacy/themes/_default.scss

@@ -1,14 +1,13 @@
-/**
+// This file contains the default theme definitions for the admin interface.
- * This file contains the default theme definitions for the admin interface.
+// Please put mostly SCSS variable definitions in here,
- * Please put mostly SCSS variable definitions in here,
+// and leave the actual styling to _style.scss and auxilliary files.
- * and leave the actual styling to _style.scss and auxilliary files.
- */
 
-@import "../../variables.scss";
+@import "../../variables";
+
+//--------------------------------------------------
+// Colours
+//--------------------------------------------------
 
-/** -----------------------------------------------
- * Colours
- * ------------------------------------------------ */
 $color-base: #b0bec7 !default;
 $color-widget-bg: lighten($color-base, 20%) !default;
 
@@ -28,7 +27,7 @@ $base-menu-icon: darken($base-menu, 26%);
 $color-brand-bg: #005a93 !default;
 $color-brand: #43c7f4 !default;
 
-/* Keep as solid colours transparent borders wont work in ie */
+// Keep as solid colours transparent borders wont work in i
 $color-darker-bg: #f0f2f4 !default;
 $color-dark-bg: #142136 !default;
 $color-dark-separator: #19435c !default;
@@ -39,7 +38,7 @@ $color-light-separator: #D2D5D8 !default; // Horiontal dividers
 $color-tab: #d9d9d9 !default;
 $color-dark-grey: #7B8C91 !default;
 
-/* Only for use as shadows as they wont work in older browsers */
+// Only for use as shadows as they wont work in older browsers
 $color-shadow-light: rgba(201, 205, 206, 0.8) !default;
 $color-shadow-dark: rgba(107, 120, 123, 0.5) !default;
 $color-shadow-black: rgba(0, 0, 0, 0.6) !default;
@@ -55,7 +54,8 @@ $color-menu-background: #c6d7df !default;
 $color-menu-border: #8c99a1 !default;
 $color-panel-background: #c6d7df !default;
 
-$color-text-default: #4f5861 !default; /* new in SilverStripe 4 */
+// new in SilverStripe 4
+$color-text-default: #4f5861 !default;
 $color-text: #66727d !default;
 $color-text-light: white !default;
 $color-text-light-link: white !default;
@@ -83,30 +83,30 @@ $color-notice: #93CDE8 !default;		// blue
 $color-warning: #E9D104 !default;		// yellow
 $color-error: #e68288 !default;			// red
 $color-good: #72c34b !default;			// green
-/*$color-optional: #a1d2eb !default; */	// orange
+// $color-optional: #a1d2eb !default; // orange
 
 $color-cms-batchactions-menu-background: #f5f5f5 !default;
 $color-cms-batchactions-menu-selected-background: #fffcdc !default;
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Textures
+// Textures
- * ----------------------------------------------- */
+//--------------------------------------------------
 $tab-panel-texture-color: #f6f7f8 !default;
-$tab-panel-texture-background: $tab-panel-texture-color url(../images/textures/bg_cms_main_content.png) repeat top left !default;
+$tab-panel-texture-background: $tab-panel-texture-color url("../images/textures/bg_cms_main_content.png") repeat top left !default;
 
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Grid Units (px)
+// Grid Units (px)
- *
+//
- * We have a vertical rhythm that the grid is based off
+// We have a vertical rhythm that the grid is based off
- * both x (=horizontal) and y (=vertical). All internal padding and
+// both x (=horizontal) and y (=vertical). All internal padding and
- * margins are scaled to this and accounting for paragraphs
+// margins are scaled to this and accounting for paragraphs
- * ------------------------------------------------ */
+//--------------------------------------------------
 $grid-y: 8px !default;
 $grid-x: 8px !default;
 
-/** -----------------------------------------------
+//--------------------------------------------------
- * Application Logo (CMS Logo) Must be 24px x 24px
+// Application Logo (CMS Logo) Must be 24px x 24px
- * ------------------------------------------------ */
+//--------------------------------------------------
 $application-logo-small: url("../images/logo_small.png") !default;
 $application-logo-small-2x: url("../images/logo_small@2x.png") !default;

admin/templates/SilverStripe/Admin/Includes/BackLink_Button.ss

@@ -1,5 +1,5 @@
 <% if $Backlink %>
-	<div class="cms_backlink">
+	<div class="cms-backlink">
 		<a class="btn btn-secondary font-icon-left-open-big toolbar__back-button btn--no-text" href="$Backlink"></a>
 	</div>
 <% end_if %>

client/src/styles/debug.scss

@@ -18,6 +18,7 @@ body {
 
   // try to get the info above the template with z-index
   z-index: 9999;
+
   h1 {
     margin: 0 0 6px 0;
     padding: 0 32px 0 0;
@@ -26,7 +27,7 @@ body {
     text-shadow: 0 1px darken(#003050, 5%);
     line-height: 30px;
 
-		background: url(../images/logo_small.png) no-repeat right 3px;
+    background: url("../images/logo_small.png") no-repeat right 3px;
   }
 
   h3 {
@@ -35,6 +36,7 @@ body {
     line-height: 18px;
     font-weight: normal;
   }
+
   p {
     margin: 0;
     font-size: 14px;
@@ -73,6 +75,7 @@ body {
   // try to get the info above the template with z-index
   position: relative;
   z-index: 9999;
+
   li {
     font-size: 14px;
     margin: 6px 0;
@@ -110,6 +113,7 @@ pre {
   span {
     color: #999;
   }
+
   .error {
     color: #f00;
   }
@@ -138,11 +142,19 @@ fieldset {
 }
 
 .pass {
-	margin-top:18px; padding:2px 20px 2px 40px; color:#006600; background:#E2F9E3; border: 1px solid #8DD38D;
+  margin-top: 18px;
+  padding: 2px 20px 2px 40px;
+  color: #006600;
+  background: #E2F9E3;
+  border: 1px solid #8DD38D;
   border-radius: 4px;
 }
 
 .fail {
-	margin-top:18px; padding:2px 20px 2px 40px; color:#C80700; background:#FFE9E9;
+  margin-top: 18px;
-	border:1px solid #C80700; border-radius:4px;
+  padding: 2px 20px 2px 40px;
+  color: #C80700;
+  background: #FFE9E9;
+  border: 1px solid #C80700;
+  border-radius: 4px;
 }