Added sass lint to Canvas (#43410)

Added sass lint to Canvas
elastic · Aug 16, 2019 · dbab52a · dbab52a
1 parent f882584
commit dbab52a
Show file tree

Hide file tree

Showing 27 changed files with 60 additions and 57 deletions.
diff --git a/.sass-lint.yml b/.sass-lint.yml
@@ -6,6 +6,7 @@ files:
     - 'src/legacy/ui/public/vislib/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/rollup/**/*.s+(a|c)ss'
     - 'x-pack/legacy/plugins/security/**/*.s+(a|c)ss'
+    - 'x-pack/legacy/plugins/canvas/**/*.s+(a|c)ss'
 rules:
   quotes:
     - 2

diff --git a/...plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss b/...plugins/canvas/canvas_plugin_src/renderers/dropdown_filter/component/dropdown_filter.scss
@@ -9,8 +9,6 @@
     padding: $euiSizeXS $euiSize;
     border: $euiBorderThin;
     border-radius: $euiBorderRadius;
-    -webkit-appearance: none;
-    -moz-appearance: none;
     appearance: none;
     font-size: inherit;
 

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/error/error.scss
@@ -4,12 +4,12 @@
   align-items: center;
 
   .canvasRenderError__icon {
-    opacity: 0.4;
-    stroke: white;
-    stroke-width: 0.2px;
+    opacity: .4;
+    stroke: $euiColorEmptyShade;
+    stroke-width: .2px;
 
     &:hover {
-      opacity: 0.6;
+      opacity: .6;
       cursor: pointer;
     }
   }

diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss b/x-pack/legacy/plugins/canvas/canvas_plugin_src/renderers/reveal_image/reveal_image.scss
@@ -13,10 +13,6 @@
 
   // disables selection and dragging
   .revealImage__image {
-    -khtml-user-select: none;
-    -o-user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
     user-select: none;
   }
 }
diff --git a/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss b/x-pack/legacy/plugins/canvas/public/apps/workpad/workpad_app/workpad_app.scss
@@ -30,7 +30,7 @@ $canvasLayoutFontSize: $euiFontSizeS;
 .canvasLayout__stageHeader {
   flex-grow: 0;
   flex-basis: auto;
-  padding: ($euiSizeXS +1px) $euiSize $euiSizeXS $euiSize;
+  padding: ($euiSizeXS + 1px) $euiSize $euiSizeXS;
   font-size: $canvasLayoutFontSize;
   border-bottom: $euiBorderThin;
   background: $euiColorLightestShade;

diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss b/x-pack/legacy/plugins/canvas/public/components/arg_form/arg_form.scss
@@ -32,7 +32,8 @@
 
 }
 
-.canvasArg__form, .canvasArg__accordion {
+.canvasArg__form,
+.canvasArg__accordion {
   &:hover {
     .canvasArg__remove {
       opacity: 1;
@@ -78,8 +79,9 @@
     background: transparent;
   }
 
-  &:before, &:after {
-    content: "";
+  &:before,
+  &:after {
+    content: '';
     height: 1px;
     position: absolute;
     left: 0;

diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss b/x-pack/legacy/plugins/canvas/public/components/asset_manager/asset_manager.scss
@@ -11,13 +11,12 @@
   }
 
   .canvasAssetManager__meterWrapper {
-    flex-grow: 0;
-    min-width: 40%;
-    align-items: center;
-
     @include euiBreakpoint('xs', 's') {
       flex-grow: 1;
     }
+    flex-grow: 0;
+    min-width: 40%;
+    align-items: center;
   }
 
   .canvasAssetManager__meterLabel {

diff --git a/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss b/x-pack/legacy/plugins/canvas/public/components/asset_picker/asset_picker.scss
@@ -11,7 +11,7 @@
     text-align: center;
 
     &:hover {
-      outline: solid 3px rgba(0, 121, 165, 0.1);
+      outline: solid $euiSizeXS transparentize($euiColorPrimary, .9);
     }
   }
 

diff --git a/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss b/x-pack/legacy/plugins/canvas/public/components/autocomplete/autocomplete.scss
@@ -13,10 +13,11 @@
   border-right: $euiBorderThin;
 }
 
-.autocompleteItems, .autocompleteReference {
+.autocompleteItems,
+.autocompleteReference {
+  @include euiScrollBar;
   height: 258px;
   overflow: auto;
-  @include euiScrollBar;
 }
 
 .autocompleteReference {

diff --git a/...ck/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss b/...ck/legacy/plugins/canvas/public/components/border_resize_handle/border_resize_handle.scss
@@ -1,4 +1,5 @@
 .canvasBorderResizeHandle {
+  @include euiSlightShadow;
   transform-origin: center center; /* the default, only for clarity */
   transform-style: preserve-3d;
   display: block;
@@ -7,7 +8,6 @@
   width: 8px;
   margin-left: -4px;
   margin-top: -4px;
-  background-color: #fff;
-  border: 1px solid #666;
-  box-shadow: 0 2px 2px -1px rgba(153, 153, 153, 0.3), 0 1px 5px -2px rgba(153, 153, 153, 0.3);
+  background-color: $euiColorEmptyShade;
+  border: 1px solid $euiColorDarkShade;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss b/x-pack/legacy/plugins/canvas/public/components/color_palette/color_palette.scss
@@ -1,6 +1,6 @@
 .canvasColorPalette {
   .canvasColorPalette__dot {
     display: inline-block;
-    margin: 0px $euiSizeXS $euiSizeXS 0px;
+    margin: 0 $euiSizeXS $euiSizeXS 0;
   }
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss b/x-pack/legacy/plugins/canvas/public/components/datatable/datatable.scss
@@ -12,7 +12,7 @@
     overflow: auto;
 
     // removes white square in the scrollbar corner
-    &::-webkit-scrollbar-corner {
+    &::-webkit-scrollbar-corner { // sass-lint:disable-line no-vendor-prefixes
       background: transparent;
     }
   }

diff --git a/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss b/x-pack/legacy/plugins/canvas/public/components/element_card/element_card.scss
@@ -17,7 +17,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, 0.5);
+    background: transparentize($euiColorGhost, .5);
     border-radius: $euiBorderRadius;
   }
 }

diff --git a/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss b/x-pack/legacy/plugins/canvas/public/components/fullscreen/fullscreen.scss
@@ -1,8 +1,9 @@
-body.canvas-isFullscreen {
+body.canvas-isFullscreen { // sass-lint:disable-line no-qualifying-elements
   // hide global loading indicator
   .kbnLoadingIndicator {
     display: none;
   }
+
   // remove space for global nav elements
   .header-global-wrapper + .app-wrapper {
     left: 0;
@@ -11,7 +12,7 @@ body.canvas-isFullscreen {
 
   // set the background color
   .canvasLayout {
-    background: #000; // This hex is OK, we always want it black
+    background: $euiColorInk;
   }
 
   // hide all the interface parts

diff --git a/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss b/x-pack/legacy/plugins/canvas/public/components/page_manager/page_manager.scss
@@ -15,7 +15,7 @@
   }
   @for $i from 1 through 20 {
     .canvasPageManager--trayPop > div:nth-child(#{$i}n) {
-      animation-delay: #{$i * 0.05}s;
+      animation-delay: #{$i * .05}s;
     }
   }
 
@@ -50,7 +50,7 @@
 
     &:focus,
     &-isActive {
-      background-color: transparentize(darken($euiColorLightestShade, 30%), 0.5);
+      background-color: transparentize(darken($euiColorLightestShade, 30%), .5);
       outline: none;
       text-decoration: none;
     }
@@ -66,7 +66,7 @@
       text-decoration: none;
 
       .canvasPageManager__pagePreview {
-        @include euiBottomShadowMedium($opacity: 0.3);
+        @include euiBottomShadowMedium($opacity: .3);
       }
 
       .canvasPageManager__controls {
@@ -85,7 +85,7 @@
   }
 
   .canvasPageManager__pageNumber {
-    color: $euiColorDarkShade !important;
+    color: $euiColorDarkShade;
   }
 
   .canvasPageManager__pagePreview {
@@ -107,7 +107,7 @@
     opacity: 0;
     transition: opacity $euiAnimSpeedFast $euiAnimSlightResistance;
     transition-delay: $euiAnimSpeedNormal;
-    background: transparentize($euiColorGhost, 0.5);
+    background: transparentize($euiColorGhost, .5);
     border-radius: $euiBorderRadius;
   }
 }
@@ -117,10 +117,12 @@
     opacity: 0;
     transform: translateX(100%);
   }
+
   1% {
     opacity: 0;
     transform: translateX(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);
@@ -132,10 +134,12 @@
     opacity: 0;
     transform: translateY(100%);
   }
+
   1% {
     opacity: 0;
     transform: translateY(100%);
   }
+
   100% {
     opacity: 1;
     transform: translateY(0);

diff --git a/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss b/x-pack/legacy/plugins/canvas/public/components/palette_picker/palette_picker.scss
@@ -12,7 +12,7 @@
 }
 
 .canvasPalettePicker__swatchesPanel {
-  padding: $euiSizeS 0 !important;
+  padding: $euiSizeS 0 !important; // sass-lint:disable-line no-important
 }
 
 .canvasPalettePicker__swatch {
@@ -27,6 +27,7 @@
     .canvasPaletteSwatch__background {
       transform: scaleY(2);
     }
+
     .canvasPalettePicker__label {
       color: $euiTextColor;
     }

diff --git a/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss b/x-pack/legacy/plugins/canvas/public/components/remove_icon/remove_icon.scss
@@ -1,8 +1,8 @@
 .canvasRemove {
   $clearSize: $euiSize;
+  @include size($clearSize); // sass-lint:disable-line mixins-before-declarations
   position: absolute;
   pointer-events: all;
-  @include size($clearSize);
   background-color: $euiColorLightShade;
   border-radius: $clearSize;
   line-height: $clearSize;

diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar/sidebar.scss
@@ -33,9 +33,11 @@
   0% {
     opacity: 0;
   }
+
   1% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

diff --git a/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss b/x-pack/legacy/plugins/canvas/public/components/sidebar_header/sidebar_header.scss
@@ -1,3 +1,3 @@
 .canvasLayout__sidebarHeader {
-  padding: ($euiSizeXS * 0.5) 0;
+  padding: ($euiSizeXS * .5) 0;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss b/x-pack/legacy/plugins/canvas/public/components/toolbar/toolbar.scss
@@ -16,7 +16,7 @@
 
   button {
     padding: $euiSizeXS $euiSizeM;
-    box-shadow: 0 -2px 1px rgba($euiColorFullShade, .10)
+    box-shadow: 0 -2px 1px transparentize($euiColorFullShade, .9);
   }
 }
 

diff --git a/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss b/x-pack/legacy/plugins/canvas/public/components/toolbar/tray/tray.scss
@@ -1,6 +1,6 @@
 .canvasTray {
-  flex-direction: column;
   @include euiBottomShadowFlat;
+  flex-direction: column;
 }
 
 .canvasTray__panel {

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss b/x-pack/legacy/plugins/canvas/public/components/workpad/workpad.scss
@@ -11,8 +11,8 @@
   position: absolute;
   user-select: none;
   pointer-events: none;
-  background-image: linear-gradient(to right, grey 1px, transparent 1px),
-    linear-gradient(to bottom, grey 1px, transparent 1px);
+  background-image: linear-gradient(to right, $euiColorMediumShade 1px, transparent 1px),
+  linear-gradient(to bottom, $euiColorMediumShade 1px, transparent 1px);
   background-size: 50px 50px;
   top: 0;
 }
diff --git a/...cy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss b/...cy/plugins/canvas/public/components/workpad_loader/workpad_dropzone/workpad_dropzone.scss
@@ -12,11 +12,10 @@
 }
 
 .canvasWorkpad__dropzoneTable--tags {
-
   .euiTableCellContent {
     flex-wrap: wrap;
   }
-  
+
   .euiHealth {
     width: 100%;
   }

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.scss
@@ -1,12 +1,12 @@
 .canvasWorkpad__upload--compressed {
 
   &.euiFilePicker--compressed.euiFilePicker {
-
     .euiFilePicker__prompt {
       height: $euiSizeXXL;
       padding: $euiSizeM;
       padding-left: $euiSizeXXL;
     }
+
     .euiFilePicker__icon {
       top: $euiSizeM;
     }

diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss b/x-pack/legacy/plugins/canvas/public/components/workpad_page/workpad_page.scss
@@ -1,8 +1,8 @@
 .canvasPage {
+  @include euiBottomShadowFlat($opacity: .4);
   z-index: initial;
-  @include euiBottomShadowFlat($opacity: 0.4);
   position: absolute;
   top: 0;
-  transform-style: preserve-3d !important;
+  transform-style: preserve-3d !important; // sass-lint:disable-line no-important
   background-color: $euiColorEmptyShade;
 }
diff --git a/x-pack/legacy/plugins/canvas/public/style/hackery.scss b/x-pack/legacy/plugins/canvas/public/style/hackery.scss
@@ -3,7 +3,7 @@
   when the UI framework implements everything we need
 */
 
-#canvas-app {
+#canvas-app { // sass-lint:disable-line no-ids
   // Give buttons some room to the right
   .euiAccordion__childWrapper {
     overflow-x: hidden;
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,9 +33,11 @@ @@
 % {
         opacity: 0;
       }
 % {
         opacity: 0;
       }
 % {
         opacity: 1;
       }
@@ Expand Down @@