tech(sass): sasslint fixes for css3

Pseudo-elements must start with double colons pseudo-element

public/sass/components/_dropdown.scss

@@ -207,7 +207,7 @@
 }
 
 // Caret to indicate there is a submenu
-.dropdown-submenu > a:after {
+.dropdown-submenu > a::after {
   display: block;
   content: " ";
   float: right;
@@ -220,7 +220,7 @@
   margin-top: 5px;
   margin-right: -10px;
 }
-.dropdown-submenu:hover > a:after {
+.dropdown-submenu:hover > a::after {
   border-left-color: $dropdownLinkColorHover;
 }
 

public/sass/components/_footer.scss

@@ -23,14 +23,14 @@
   li {
     display: inline-block;
     padding-right: 2px;
-    &:after {
+    &::after {
       content: ' | ';
       padding-left: 2px;
     }
   }
 
   li:last-child {
-    &:after {
+    &::after {
       padding-left: 0;
       content: '';
     }

public/sass/components/_gf-form.scss

@@ -127,7 +127,7 @@ $gf-form-margin: 0.25rem;
   &--dropdown {
     padding-right: $input-padding-x*2;
 
-    &:after {
+    &::after {
       position: absolute;
       top: 35%;
       right: $input-padding-x/2;
@@ -164,7 +164,7 @@ $gf-form-margin: 0.25rem;
     }
   }
 
-  &:after {
+  &::after {
     position: absolute;
     top: 35%;
     right: $input-padding-x/2;
@@ -176,7 +176,7 @@ $gf-form-margin: 0.25rem;
   }
 
   &--has-help-icon {
-    &:after {
+    &::after {
       right: $input-padding-x*3;
     }
   }
@@ -215,7 +215,7 @@ $gf-form-margin: 0.25rem;
   background-color: $input-bg;
   padding-right: $input-padding-x;
 
-  &:after {
+  &::after {
     position: absolute;
     top: 35%;
     right: $input-padding-x/2;

public/sass/components/_infobox.scss

-.grafana-info-box:before {
+.grafana-info-box::before {
   content: "\f05a";
   font-family:'FontAwesome';
   position: absolute;

public/sass/components/_panel_graph.scss

@@ -47,19 +47,19 @@
   white-space: nowrap;
   font-size: 85%;
   text-align: left;
-  &.current:before {
+  &.current::before {
     content: "Current: "
   }
-  &.max:before {
+  &.max::before {
     content: "Max: "
   }
-  &.min:before {
+  &.min::before {
     content: "Min: "
   }
-  &.total:before {
+  &.total::before {
     content: "Total: "
   }
-  &.avg:before {
+  &.avg::before {
     content: "Avg: "
   }
 }
@@ -95,7 +95,7 @@
     &--right-y {
       float: none;
 
-      .graph-legend-alias:after {
+      .graph-legend-alias::after {
         content: '(right-y)';
         padding: 0 5px;
         color: $text-color-weak;
@@ -137,7 +137,7 @@
 
   .graph-legend-value {
     &.current, &.max, &.min, &.total, &.avg {
-      &:before {
+      &::before {
         content: '';
       }
     }

public/sass/components/_search.scss

@@ -74,11 +74,11 @@
     background-color: $grafanaListBackground;
     margin-bottom: 4px;
 
-    .search-result-icon:before {
+    .search-result-icon::before {
       content: "\f009";
     }
 
-    &.search-item-dash-home .search-result-icon:before {
+    &.search-item-dash-home .search-result-icon::before {
       content: "\f015";
     }
   }

public/sass/components/_sidemenu.scss

@@ -151,7 +151,7 @@
   display: inline-block;
   position: relative;
 
-  &:after {
+  &::after {
     display: block;
     position: absolute;
     top: 50%;

public/sass/components/_switch.scss

@@ -30,7 +30,7 @@ $switch-height: 1.5rem;
     background-color: $page-bg;
   }
 
-  input + label:before, input + label:after {
+  input + label::before, input + label::after {
     @include buttonBackground($input-bg, $input-bg);
 
     display: block;
@@ -47,13 +47,13 @@ $switch-height: 1.5rem;
   }
 
   &:hover {
-    input + label:before {
+    input + label::before {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
       color: $text-color;
       text-shadow: $text-shadow-faint;
     }
 
-    input + label:after {
+    input + label::after {
       @include buttonBackground($input-bg, lighten($input-bg, 5%));
       color: lighten($orange, 10%);
       text-shadow: $text-shadow-strong;
@@ -61,7 +61,7 @@ $switch-height: 1.5rem;
 
   }
 
-  input + label:before {
+  input + label::before {
     font-family: 'FontAwesome';
     content: "\f096"; // square-o
     color: $text-color-faint;
@@ -70,7 +70,7 @@ $switch-height: 1.5rem;
     text-shadow: $text-shadow-faint;
   }
 
-  input + label:after {
+  input + label::after {
     content: "\f046"; // check-square-o
     color: $orange;
     text-shadow: $text-shadow-strong;
@@ -81,11 +81,11 @@ $switch-height: 1.5rem;
     backface-visibility: hidden;
   }
 
-  input:checked + label:before {
+  input:checked + label::before {
     transform: rotateY(180deg);
   }
 
-  input:checked + label:after {
+  input:checked + label::after {
     transform: rotateY(0);
   }
 }

public/sass/components/_tagsinput.scss

@@ -24,7 +24,7 @@
     [data-role="remove"] {
       margin-left:8px;
       cursor:pointer;
-      &:after{
+      &::after{
         content: "x";
         padding:0px 2px;
       }

public/sass/components/_tightform.scss

@@ -25,12 +25,11 @@
   border: 1px solid $tight-form-border;
   border-bottom: none;
 
-  .tight-form, .tight-form-item, [type=text].tight-form-input, [type=text].tight-form-clear-input  {
+  .tight-form, .tight-form-item, [type="text"].tight-form-input, [type="text"].tight-form-clear-input  {
     border: none;
   }
 }
 
-
 .spaced-form {
   .tight-form {
     margin: 7px 0;
@@ -122,14 +121,14 @@
   }
 }
 
-input[type=text].tight-form-func-param {
+input[type="text"].tight-form-func-param {
   background: transparent;
   border: none;
   margin: 0;
   padding: 0;
 }
 
-input[type=text].tight-form-clear-input {
+input[type="text"].tight-form-clear-input {
   padding: 8px 7px;
   border: none;
   margin: 0px;
@@ -138,10 +137,10 @@ input[type=text].tight-form-clear-input {
   border-right: 1px solid $tight-form-border;
 }
 
-[type=text],
-[type=email],
-[type=number],
-[type=password] {
+[type="text"],
+[type="email"],
+[type="number"],
+[type="password"] {
   &.tight-form-input {
     background-color: $input-bg;
     border: none;
@@ -157,7 +156,7 @@ input[type=text].tight-form-clear-input {
   }
 }
 
-input[type=checkbox].tight-form-checkbox {
+input[type="checkbox"].tight-form-checkbox {
   margin: 0;
 }
 
@@ -200,7 +199,7 @@ select.tight-form-input {
 }
 
 .tight-form-radio {
-  input[type=radio] {
+  input[type="radio"] {
     margin: 0;
   }
   label {

public/sass/components/_timepicker.scss

@@ -99,10 +99,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.fa-chevron-left:before {
+.fa-chevron-left::before {
   content: "\f053";
 }
-.fa-chevron-right:before {
+.fa-chevron-right::before {
   content: "\f054";
 }