Repository: exadel-inc/esl
Pull request #1794 (2023-07-12 02:04:05)

chore(stylelint): migrate to `stylelint-prettier` for formatting rules of `stylelint`
Alternative to: #1574 to make `*.less` files proper format check again
Less restrictive than #1507 due to restricting the area of `prettier` to `**/*.less`

Reformating included

Feel free to share your opinion if that option works for us as a good code style of stylesheets.


Patch:
diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 000000000..eea8e43a2
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,34 @@
+# We are not using prittier for anuthing except less files for now
+!**/*.less
+
+# IDE
+.idea
+*.iml
+*.ipr
+*.iws
+.DS_Store
+
+# Libs
+node_modules
+
+# Build output
+target
+pages/dist
+
+# Generated surces
+/modules
+/polyfills
+
+# Logs & Tmp
+npm-debug.log
+.gitconfig
+
+# Jest & Sonar
+/.report
+/.scannerwork
+
+# Common configuration
+jest.config.js
+
+# Common directories
+build
diff --git a/.prettierrc.yml b/.prettierrc.yml
new file mode 100644
index 000000000..1026c1630
--- /dev/null
+++ b/.prettierrc.yml
@@ -0,0 +1,11 @@
+useTabs: false
+tabWidth: 2
+semi: true
+singleQuote: true
+arrowParens: always
+bracketSpacing: false
+bracketSameLine: true
+insertPragma: false
+proseWrap: preserve
+quoteProps: consistent
+trailingComma: none
diff --git a/.stylelintrc.yml b/.stylelintrc.yml
index dfd255a19..d619a2861 100644
--- a/.stylelintrc.yml
+++ b/.stylelintrc.yml
@@ -1,32 +1,28 @@
 plugins:
+  - stylelint-prettier
   # Custom plugin to disallow absolute import paths
   - ./build/import.stylelint.js
 # Use LESS preprocessor
 customSyntax: postcss-less
 
 rules:
+  # Prettier integration
+  prettier/prettier:
+    - true
+    - severity: warning
+
   # Disallow unknown at-rules
   at-rule-no-unknown: true
   # Warn about empty selectors
   block-no-empty:
     - true
     - severity: warning
-  # Warn that require a single space before the opening brace of blocks
-  block-opening-brace-space-before:
-    - always
-    - severity: warning
-  # Disallow uppercase for hex colors
-  color-hex-case: lower
   # Disallow invalid hex colors
   color-hex-length: short
   # Disallow invalid hex colors
   color-no-invalid-hex: true
   # Disallow empty comments
   comment-no-empty: true
-  # Warn that require a single space after the colon of declarations
-  declaration-colon-space-after:
-    - always
-    - severity: warning
   # Disallow duplicate properties within declaration blocks
   declaration-block-no-duplicate-properties: true
   # Disallow absolute paths for imports in bounds of library files
@@ -47,23 +43,11 @@ rules:
   no-empty-source:
     - true
     - severity: warning
-  # Disallow extra semicolons
-  no-extra-semicolons: true
   # Disallow double-slash comments `(//...)` for clear CSS, as they are not supported by CSS
   # and could lead to unexpected results
   no-invalid-double-slash-comments: true
-  # Disallow a leading zero for fractional numbers less than 1
-  number-leading-zero: never
   # Disallow unknown properties
   property-no-unknown: true
-  # Disallow whitespace before the commas of selector lists
-  selector-list-comma-space-before: never
-  # Use lowercase for pseudo-class selectors
-  selector-pseudo-class-case: lower
-  # Disallow whitespace on the inside of the parentheses within pseudo-class selectors
-  selector-pseudo-class-parentheses-space-inside: never
-  # Use lowercase for pseudo-element selectors
-  selector-pseudo-element-case: lower
   # Use double colon notation for applicable pseudo-elements
   selector-pseudo-element-colon-notation: double
   # Disallow unknown pseudo-class selectors
diff --git a/package-lock.json b/package-lock.json
index 528d99f56..49d82e716 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,12 +52,14 @@
         "out-url": "^1.1.3",
         "postcss": "^8.4.26",
         "postcss-less": "^6.0.0",
+        "prettier": "^3.0.0",
         "prismjs": "^1.29.0",
         "promise-polyfill": "^8.3.0",
         "rimraf": "^5.0.1",
         "semantic-release": "^21.0.7",
         "smoothscroll-polyfill": "^0.4.4",
         "stylelint": "^15.10.1",
+        "stylelint-prettier": "^4.0.0",
         "ts-jest": "^29.1.1",
         "ts-loader": "^9.4.4",
         "typescript": "5.1.6",
@@ -6916,6 +6918,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "node_modules/fast-glob": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
@@ -15325,6 +15333,33 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+      "dev": true,
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "29.6.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.1.tgz",
@@ -17447,6 +17482,22 @@
         "url": "https://opencollective.com/stylelint"
       }
     },
+    "node_modules/stylelint-prettier": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-4.0.0.tgz",
+      "integrity": "sha512-hYlObunQiSzc5XRttNiDyaY1W7ytW/AJtEbaDxy0rr4ioQvko+cjAgSGrRbz0iRB+yc6jiMrUmHcGkvFb+zDqw==",
+      "dev": true,
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "prettier": ">=3.0.0",
+        "stylelint": ">=15.8.0"
+      }
+    },
     "node_modules/stylelint/node_modules/balanced-match": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
@@ -24430,6 +24481,12 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true
+    },
     "fast-glob": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.0.tgz",
@@ -30410,6 +30467,21 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "prettier": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.0.0.tgz",
+      "integrity": "sha512-zBf5eHpwHOGPC47h0zrPyNn+eAEIdEzfywMoYn2XPi0P44Zp0tSq64rq0xAREh4auw2cJZHo9QUob+NqCQky4g==",
+      "dev": true
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "dev": true,
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
+    },
     "pretty-format": {
       "version": "29.6.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-29.6.1.tgz",
@@ -32199,6 +32271,15 @@
         }
       }
     },
+    "stylelint-prettier": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-prettier/-/stylelint-prettier-4.0.0.tgz",
+      "integrity": "sha512-hYlObunQiSzc5XRttNiDyaY1W7ytW/AJtEbaDxy0rr4ioQvko+cjAgSGrRbz0iRB+yc6jiMrUmHcGkvFb+zDqw==",
+      "dev": true,
+      "requires": {
+        "prettier-linter-helpers": "^1.0.0"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index ba557cf9e..ff207e8e7 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,8 @@
     "lint:js": "eslint \"src/**/*.ts\" \"pages/src/**/*.ts\" --max-warnings 3",
     "lint:css": "stylelint \"src/**/*.less\" \"pages/src/**/*.less\"",
     "prepare": "husky install && npm run build",
-    "preversion": "npm test"
+    "preversion": "npm test",
+    "fix:less": "stylelint --fix \"**/*.less\""
   },
   "dependencies": {
     "@types/resize-observer-browser": "0.1.7",
@@ -124,12 +125,14 @@
     "out-url": "^1.1.3",
     "postcss": "^8.4.26",
     "postcss-less": "^6.0.0",
+    "prettier": "^3.0.0",
     "prismjs": "^1.29.0",
     "promise-polyfill": "^8.3.0",
     "rimraf": "^5.0.1",
     "semantic-release": "^21.0.7",
     "smoothscroll-polyfill": "^0.4.4",
     "stylelint": "^15.10.1",
+    "stylelint-prettier": "^4.0.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "typescript": "5.1.6",
diff --git a/pages/src/banner/banner.less b/pages/src/banner/banner.less
index 2dbf08b30..902ec7cf9 100644
--- a/pages/src/banner/banner.less
+++ b/pages/src/banner/banner.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) '../common/variables.less';
 
 .banner {
   &-alert {
@@ -15,11 +15,11 @@
     font-weight: 500;
 
     p {
-      margin: .05rem;
+      margin: 0.05rem;
     }
 
     @media @xs-sm {
-      font-size: .85rem;
+      font-size: 0.85rem;
     }
   }
 }
diff --git a/pages/src/collection-grid/collection-grid.less b/pages/src/collection-grid/collection-grid.less
index 67160fabc..1d110542c 100644
--- a/pages/src/collection-grid/collection-grid.less
+++ b/pages/src/collection-grid/collection-grid.less
@@ -1,4 +1,4 @@
-@import (reference) "../common/variables.less";
+@import (reference) '../common/variables.less';
 
 // TODO: refactor
 .collection-grid {
@@ -7,7 +7,6 @@
   justify-content: space-around;
   grid-gap: 15px 30px;
 
-
   &-item {
     display: flex;
     flex-direction: column;
@@ -15,7 +14,9 @@
     width: 100%;
     max-width: 310px;
     border: 1px solid #c8d6f0;
-    transition: color .25s ease-in-out, border-color .25s ease-in-out;
+    transition:
+      color 0.25s ease-in-out,
+      border-color 0.25s ease-in-out;
 
     &:hover {
       text-decoration: none;
@@ -39,16 +40,20 @@
     font-weight: 600;
     color: black;
     padding: 5px 15px;
-    transition: color .25s ease-in-out;
+    transition: color 0.25s ease-in-out;
   }
 
   &-item.draft &-box {
-    opacity: .3;
-    transition: opacity .25s ease-in-out, color .1s linear;
+    opacity: 0.3;
+    transition:
+      opacity 0.25s ease-in-out,
+      color 0.1s linear;
   }
   &-item.draft:hover &-box {
     opacity: 1;
-    transition: opacity .25s ease-in-out, color .1s linear;
+    transition:
+      opacity 0.25s ease-in-out,
+      color 0.1s linear;
   }
 
   &-divider {
@@ -74,8 +79,11 @@
 
     color: white;
     -webkit-text-stroke: 1px @nav-dark-selected;
-    text-shadow: -1px -1px 0 @nav-dark-selected, 1px -1px 0 @nav-dark-selected,
-    -1px 1px 0 @nav-dark-selected, 1px 1px 0 @nav-dark-selected;
+    text-shadow:
+      -1px -1px 0 @nav-dark-selected,
+      1px -1px 0 @nav-dark-selected,
+      -1px 1px 0 @nav-dark-selected,
+      1px 1px 0 @nav-dark-selected;
   }
 
   &-alt-small {
@@ -88,7 +96,7 @@
 
   &-column &-item {
     background-color: white;
-    border-radius: .75rem;
+    border-radius: 0.75rem;
     border: 1px solid #c8d6f0;
     max-width: 100%;
     height: 100%;
diff --git a/pages/src/common/accent-lines.less b/pages/src/common/accent-lines.less
index 1c21c9050..8a44a78c7 100644
--- a/pages/src/common/accent-lines.less
+++ b/pages/src/common/accent-lines.less
@@ -30,5 +30,4 @@
       stroke-dashoffset: 0;
     }
   }
-
 }
diff --git a/pages/src/common/accordion.less b/pages/src/common/accordion.less
index 49a5e62b0..deea0b5d8 100644
--- a/pages/src/common/accordion.less
+++ b/pages/src/common/accordion.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .esl-d-accordion {
   position: relative;
@@ -10,9 +10,9 @@
   background-clip: border-box;
 
   border: 1px solid @secondary-blue;
-  border-radius: .3rem;
+  border-radius: 0.3rem;
 
-  margin-bottom: .5em;
+  margin-bottom: 0.5em;
 
   &-body {
     flex: 1 1 auto;
@@ -20,14 +20,14 @@
   }
 
   &-header {
-    padding: .75rem 1.25rem;
+    padding: 0.75rem 1.25rem;
     margin-bottom: 0;
 
     border-bottom: 1px solid transparent;
-    transition: border-bottom-color .4s ease-in-out;
+    transition: border-bottom-color 0.4s ease-in-out;
 
     &:first-child {
-      border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
+      border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0;
     }
 
     &-arrow {
@@ -47,7 +47,9 @@
 
       transform: rotate(225deg);
       transform-origin: center;
-      transition: transform .5s ease-in-out, top .5s ease-in-out;
+      transition:
+        transform 0.5s ease-in-out,
+        top 0.5s ease-in-out;
     }
 
     &[active] {
diff --git a/pages/src/common/alert.less b/pages/src/common/alert.less
index 8db187ee8..194426800 100644
--- a/pages/src/common/alert.less
+++ b/pages/src/common/alert.less
@@ -1,11 +1,11 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .alert {
   position: relative;
-  padding: .75rem 1.25rem;
+  padding: 0.75rem 1.25rem;
   margin-bottom: 1rem;
   border: 1px solid transparent;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
 
   .alert-color(@cls, @color) {
     &-@{cls} {
diff --git a/pages/src/common/animation-loading.less b/pages/src/common/animation-loading.less
index dd0f8d4fc..9f4bbf3aa 100644
--- a/pages/src/common/animation-loading.less
+++ b/pages/src/common/animation-loading.less
@@ -1,4 +1,4 @@
-@import "./common/colors.less";
+@import './common/colors.less';
 
 .animation-loading {
   position: relative;
@@ -12,8 +12,8 @@
   }
 }
 
-
-.animation-loading::before, .animation-loading::after {
+.animation-loading::before,
+.animation-loading::after {
   content: '';
   display: inline-block;
   position: absolute;
@@ -36,7 +36,7 @@
   border-radius: 5px;
   background-color: inherit;
   animation: animationLoadingAfter 1s infinite ease-in;
-  animation-delay: .5s;
+  animation-delay: 0.5s;
 }
 
 @keyframes animationLoadingBefore {
diff --git a/pages/src/common/badge.less b/pages/src/common/badge.less
index e9895354d..2bf3be1b5 100644
--- a/pages/src/common/badge.less
+++ b/pages/src/common/badge.less
@@ -1,20 +1,21 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .badge {
   display: inline-block;
   text-transform: uppercase;
-  padding: .45em .4em;
+  padding: 0.45em 0.4em;
   font-size: 75%;
   font-weight: 700;
   line-height: 1;
   text-align: center;
   white-space: nowrap;
   vertical-align: baseline;
-  border-radius: .25rem;
-  transition: color .15s ease-in-out,
-              background-color .15s ease-in-out,
-              border-color .15s ease-in-out,
-              box-shadow .15s ease-in-out;
+  border-radius: 0.25rem;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   &:empty {
     display: none;
@@ -28,7 +29,7 @@
   }
 
   &-md {
-    padding: .4em .8em;
+    padding: 0.4em 0.8em;
     font-size: 80%;
   }
 
@@ -58,7 +59,7 @@
     font-size: 52%;
     font-weight: 700;
     vertical-align: super;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
     text-shadow: 0 0 1px #2125293d;
   }
 
diff --git a/pages/src/common/buttons.less b/pages/src/common/buttons.less
index 9d9796b23..0ce662401 100644
--- a/pages/src/common/buttons.less
+++ b/pages/src/common/buttons.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .btn {
   --btn-color: #212529;
@@ -13,18 +13,19 @@
   cursor: pointer;
   user-select: none;
 
-  padding: .3rem 1rem .35rem;
+  padding: 0.3rem 1rem 0.35rem;
 
   font-size: 1rem;
   line-height: 1.5;
 
-  transition: color .15s ease-in-out,
-              background-color .15s ease-in-out,
-              border-color .15s ease-in-out,
-              box-shadow .15s ease-in-out,
-              text-shadow .15s ease-in-out,
-              top .15s ease-in-out,
-              left .15s ease-in-out;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out,
+    text-shadow 0.15s ease-in-out,
+    top 0.15s ease-in-out,
+    left 0.15s ease-in-out;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -37,12 +38,12 @@
     outline: 2px dashed #1fc2ff;
   }
   &:disabled {
-    opacity: .65;
+    opacity: 0.65;
   }
 
   color: var(--btn-color);
   border: 2px solid var(--btn-color);
-  border-radius: .75rem;
+  border-radius: 0.75rem;
   background-color: transparent;
 
   &:active {
@@ -55,12 +56,12 @@
   &:active {
     color: var(--btn-color);
     border: 2px solid var(--btn-color);
-    box-shadow: 0 0 6px var(--btn-color),
-                0 0 10px var(--btn-color);
+    box-shadow:
+      0 0 6px var(--btn-color),
+      0 0 10px var(--btn-color);
     text-decoration: none;
   }
 
-
   &-sm {
     font-size: 1rem;
     line-height: 1.2;
@@ -72,9 +73,9 @@
     font-weight: 500;
   }
   &-spaced {
-    padding: .7rem 2.75rem .75rem;
+    padding: 0.7rem 2.75rem 0.75rem;
     @media @sm {
-      padding: .7rem 2rem .75rem;
+      padding: 0.7rem 2rem 0.75rem;
     }
   }
 
@@ -112,10 +113,10 @@
   }
 
   &-container {
-    margin: -.4rem;
+    margin: -0.4rem;
   }
   &-container & {
-    margin: .4rem;
+    margin: 0.4rem;
   }
   &-group-centered {
     justify-content: center;
diff --git a/pages/src/common/close.less b/pages/src/common/close.less
index 6259dab68..8b234922c 100644
--- a/pages/src/common/close.less
+++ b/pages/src/common/close.less
@@ -5,7 +5,7 @@
   line-height: 1;
   color: #000;
   text-shadow: 0 1px 0 #fff;
-  opacity: .5;
+  opacity: 0.5;
 
   &:hover {
     color: #000;
@@ -14,7 +14,7 @@
 
   &:not(:disabled):hover,
   &:not(:disabled):focus {
-    opacity: .75;
+    opacity: 0.75;
   }
 }
 
diff --git a/pages/src/common/code.less b/pages/src/common/code.less
index f2860c854..111f7ab66 100644
--- a/pages/src/common/code.less
+++ b/pages/src/common/code.less
@@ -1,6 +1,7 @@
 pre,
 code {
-  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+    'Courier New', monospace;
   font-size: 1em;
 }
 
@@ -27,11 +28,11 @@ pre {
 
 .code-block {
   position: relative;
-  padding: .75rem 1.25rem;
+  padding: 0.75rem 1.25rem;
   margin-bottom: 1rem;
   color: #000;
   border: 1px solid #bbb;
-  border-radius: .25rem;
+  border-radius: 0.25rem;
   background-color: #eee;
 
   font-weight: bolder;
diff --git a/pages/src/common/colors.less b/pages/src/common/colors.less
index 9d3b2968a..bf3faaf82 100644
--- a/pages/src/common/colors.less
+++ b/pages/src/common/colors.less
@@ -1,5 +1,5 @@
 /* Colors */
-@primary-blue: #0097E7;
+@primary-blue: #0097e7;
 @secondary-blue: #8bc2ff;
 
 @primary-green: #24c3c9;
@@ -11,13 +11,13 @@
 @primary-orange-dark: #c6361a;
 
 @body-bg: #f8f8f8;
-@body-fg: rgba(22, 0, 27, .9);
+@body-fg: rgba(22, 0, 27, 0.9);
 
 @link-fg: @primary-blue;
 @link-hover-fg: @secondary-blue;
 @link-hover-underline: @secondary-blue;
 
-@landing-bg-color: #131A2E;
+@landing-bg-color: #131a2e;
 @landing-fg-color: #fff;
 
 @nav-dark-bg: @landing-bg-color; //#232429;
diff --git a/pages/src/common/containers.less b/pages/src/common/containers.less
index c0565a317..ff5e80dc6 100644
--- a/pages/src/common/containers.less
+++ b/pages/src/common/containers.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .container,
 .container-fluid {
diff --git a/pages/src/common/dropdown-menu.less b/pages/src/common/dropdown-menu.less
index dfdcba4c2..7c5ec6178 100644
--- a/pages/src/common/dropdown-menu.less
+++ b/pages/src/common/dropdown-menu.less
@@ -1,6 +1,6 @@
 // TODO: review after base styles creation
 // TODO: share with core ?
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .esl-example-menu {
   display: flex;
@@ -9,7 +9,7 @@
   min-height: 3.5rem;
   background-color: @primary-blue;
   border-radius: 8px;
-  padding: 0 .5rem;
+  padding: 0 0.5rem;
 
   .menu-item {
     position: relative;
@@ -30,10 +30,14 @@
     font-weight: 400;
     line-height: 1.5;
     border: 1px solid transparent;
-    border-radius: .25rem;
-    padding: .375rem .75rem;
+    border-radius: 0.25rem;
+    padding: 0.375rem 0.75rem;
 
-    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+    transition:
+      color 0.15s ease-in-out,
+      background-color 0.15s ease-in-out,
+      border-color 0.15s ease-in-out,
+      box-shadow 0.15s ease-in-out;
   }
 
   .menu-item-arrow::after {
@@ -58,13 +62,17 @@
 
     color: black;
     border-radius: 8px;
-    box-shadow: 2px 2px 6px rgba(161, 160, 160, .4);
+    box-shadow: 2px 2px 6px rgba(161, 160, 160, 0.4);
     background-color: #fff;
-    transform: translate3d(0,0,0);
+    transform: translate3d(0, 0, 0);
 
-    transition: max-height .3s ease-in-out, visibility 0s linear .3s;
+    transition:
+      max-height 0.3s ease-in-out,
+      visibility 0s linear 0.3s;
     &.open {
-      transition: max-height .3s ease-in-out, visibility 0s linear;
+      transition:
+        max-height 0.3s ease-in-out,
+        visibility 0s linear;
     }
 
     &.animate.open {
diff --git a/pages/src/common/flex.less b/pages/src/common/flex.less
index 2a552166f..e8fa4ddbf 100644
--- a/pages/src/common/flex.less
+++ b/pages/src/common/flex.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .flex {
   &-column {
@@ -53,7 +53,14 @@
   margin-left: -15px;
 }
 
-.col, .col-3, .col-4, .col-6, .col-12, .col-md-4, .col-sm-6, .col-md-6 {
+.col,
+.col-3,
+.col-4,
+.col-6,
+.col-12,
+.col-md-4,
+.col-sm-6,
+.col-md-6 {
   position: relative;
   width: 100%;
   padding-right: 15px;
diff --git a/pages/src/common/forms.less b/pages/src/common/forms.less
index 9294348e6..a1ace0486 100644
--- a/pages/src/common/forms.less
+++ b/pages/src/common/forms.less
@@ -1,10 +1,10 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .form-control {
   display: block;
   width: 100%;
-  height: calc(1.5em + .75rem + 2px);
-  padding: .375rem .75rem;
+  height: calc(1.5em + 0.75rem + 2px);
+  padding: 0.375rem 0.75rem;
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
@@ -12,8 +12,10 @@
   background-color: #fff;
   background-clip: padding-box;
   border: 1px solid @secondary-blue;
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+  border-radius: 0.25rem;
+  transition:
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
 
   @media (prefers-reduced-motion: reduce) {
     transition: none;
@@ -43,7 +45,7 @@
     background-color: #fff;
     border-color: #80bdff;
     outline: 0;
-    box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25);
+    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
   }
 
   &:disabled {
diff --git a/pages/src/common/helpers.less b/pages/src/common/helpers.less
index a57aed2a7..bc7e3a246 100644
--- a/pages/src/common/helpers.less
+++ b/pages/src/common/helpers.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 // Block
 .d-block {
@@ -26,10 +26,10 @@
 // Margin
 .m {
   &-0 {
-  margin: 0 !important;
+    margin: 0 !important;
   }
   &-1 {
-    margin: .5rem !important;
+    margin: 0.5rem !important;
   }
   &-2 {
     margin: 1rem !important;
@@ -45,10 +45,10 @@
 // Margin-bottom
 .mb {
   &-0 {
-  margin-bottom: 0 !important;
+    margin-bottom: 0 !important;
   }
   &-1 {
-    margin-bottom: .5rem !important;
+    margin-bottom: 0.5rem !important;
   }
   &-2 {
     margin-bottom: 1rem !important;
@@ -65,12 +65,12 @@
     margin-right: 0 !important;
   }
   &-1 {
-    margin-left: .25rem !important;
-    margin-right: .25rem !important;
+    margin-left: 0.25rem !important;
+    margin-right: 0.25rem !important;
   }
   &-2 {
-    margin-left: .5rem !important;
-    margin-right: .5rem !important;
+    margin-left: 0.5rem !important;
+    margin-right: 0.5rem !important;
   }
   &-4 {
     margin-left: 2rem !important;
@@ -85,7 +85,7 @@
 // Padding
 .p {
   &-2 {
-    padding: .5rem !important;
+    padding: 0.5rem !important;
   }
   &-3 {
     padding: 1rem !important;
@@ -97,17 +97,17 @@
 
 // Padding-top
 .pt-2 {
-  padding-top: .5rem !important;
+  padding-top: 0.5rem !important;
 }
 
 // Padding-bottom
 .pb-2 {
-  padding-bottom: .5rem !important;
+  padding-bottom: 0.5rem !important;
 }
 
 // Border radius
 .round {
-  border-radius: .5rem;
+  border-radius: 0.5rem;
 }
 
 // List helpers
diff --git a/pages/src/common/links.less b/pages/src/common/links.less
index 47e0d4ea0..4291d447b 100644
--- a/pages/src/common/links.less
+++ b/pages/src/common/links.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 @arrow: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 471.2 471.2'%3E%3Cpath d='M456.57 248.48a18.45 18.45 0 0 0 5.43-12.9 17.88 17.88 0 0 0-5.43-12.9L340.08 106.19a18.34 18.34 0 0 0-25.93 25.93l85.26 85.13H27.53a18.33 18.33 0 1 0 0 36.66h371.88l-85.26 85.26a18.34 18.34 0 0 0 25.93 25.93z'/%3E%3C/svg%3E";
 
@@ -7,16 +7,17 @@
   font-size: 1rem;
   font-weight: 600;
 
-  &::after, &::before {
+  &::after,
+  &::before {
     display: inline-block;
     margin: 0 5px;
     width: 1em;
     height: 1.27em;
     vertical-align: middle;
-    transition: transform .3s ease-in-out;
+    transition: transform 0.3s ease-in-out;
 
-    -webkit-mask: url(@arrow) no-repeat 0 .1em;
-    mask: url(@arrow) no-repeat 0 .1em;
+    -webkit-mask: url(@arrow) no-repeat 0 0.1em;
+    mask: url(@arrow) no-repeat 0 0.1em;
 
     background-color: @primary-blue;
   }
diff --git a/pages/src/common/markdown.less b/pages/src/common/markdown.less
index d1ca9898c..738358ef9 100644
--- a/pages/src/common/markdown.less
+++ b/pages/src/common/markdown.less
@@ -4,7 +4,7 @@
     padding-left: 1.5rem;
 
     p {
-      margin-bottom: .5rem;
+      margin-bottom: 0.5rem;
     }
 
     p:only-child {
diff --git a/pages/src/common/reboot.less b/pages/src/common/reboot.less
index 00f595a75..de3ba93a8 100644
--- a/pages/src/common/reboot.less
+++ b/pages/src/common/reboot.less
@@ -3,7 +3,7 @@
 // Normalization of HTML elements, manually forked from Normalize.css to remove
 // styles targeting irrelevant browsers while applying new styles.
 
-@import "./variables.less";
+@import './variables.less';
 
 *,
 *::before,
@@ -22,18 +22,24 @@
 
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
+    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   font-size: 1rem;
   font-weight: 400;
   line-height: 1.5;
   text-align: left;
 }
 
-footer, header, main, nav, section {
+footer,
+header,
+main,
+nav,
+section {
   display: block;
 }
 
-[tabindex="-1"]:focus:not(:focus-visible) {
+[tabindex='-1']:focus:not(:focus-visible) {
   outline: 0 !important;
 }
 
@@ -45,7 +51,7 @@ hr {
   margin-top: 1rem;
   margin-bottom: 1rem;
   border: 0;
-  border-top: 1px solid rgba(0, 0, 0, .1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
 }
 
 section {
@@ -64,7 +70,7 @@ svg {
 
 label {
   display: inline-block;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }
 
 input,
@@ -91,20 +97,20 @@ select {
 }
 
 button,
-[type="button"],
-[type="reset"] {
+[type='button'],
+[type='reset'] {
   -webkit-appearance: button;
 }
 
 button:not(:disabled),
-[type="button"]:not(:disabled),
-[type="reset"]:not(:disabled) {
+[type='button']:not(:disabled),
+[type='reset']:not(:disabled) {
   cursor: pointer;
 }
 
 button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner {
+[type='button']::-moz-focus-inner,
+[type='reset']::-moz-focus-inner {
   padding: 0;
   border-style: none;
 }
@@ -121,7 +127,7 @@ button {
   border-radius: 0;
 }
 
-input[type="radio"] {
+input[type='radio'] {
   box-sizing: border-box;
   padding: 0;
 }
@@ -139,6 +145,6 @@ fieldset {
 
 audio {
   &::-webkit-media-controls-enclosure {
-    border: 1px solid rgba(0, 0, 0, .6);
+    border: 1px solid rgba(0, 0, 0, 0.6);
   }
 }
diff --git a/pages/src/common/scrollbar.less b/pages/src/common/scrollbar.less
index f4423eec9..6eb9d8502 100644
--- a/pages/src/common/scrollbar.less
+++ b/pages/src/common/scrollbar.less
@@ -1,4 +1,4 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .scrollbar-second.scrollbar-second {
   padding-right: 25px;
diff --git a/pages/src/common/simple-grid.less b/pages/src/common/simple-grid.less
index 9361d146b..ee0148c9e 100644
--- a/pages/src/common/simple-grid.less
+++ b/pages/src/common/simple-grid.less
@@ -1,4 +1,4 @@
-@import "./variables.less";
+@import './variables.less';
 
 .simple-grid {
   --col-grid: 1;
diff --git a/pages/src/common/tabs.less b/pages/src/common/tabs.less
index f41ee4af0..042fe7de2 100644
--- a/pages/src/common/tabs.less
+++ b/pages/src/common/tabs.less
@@ -1,13 +1,14 @@
-@import (reference) "./variables.less";
+@import (reference) './variables.less';
 
 .esl-d-tab-group {
-  &, & > .esl-d-tab-panel {
-    border-bottom-left-radius: calc(.5rem - 1px);
-    border-bottom-right-radius: calc(.5rem - 1px);
+  &,
+  & > .esl-d-tab-panel {
+    border-bottom-left-radius: calc(0.5rem - 1px);
+    border-bottom-right-radius: calc(0.5rem - 1px);
   }
 
   & > .esl-d-accordion-header {
-    border-radius: calc(.5rem - 1px);
+    border-radius: calc(0.5rem - 1px);
     transition: border-radius 0s linear.5s;
     &[active] {
       color: @primary-blue;
@@ -30,7 +31,7 @@
     border: 1px solid @secondary-blue;
     border-top: none;
 
-    margin-bottom: .5rem;
+    margin-bottom: 0.5rem;
   }
   > .esl-d-tab-group > .esl-d-accordion-header {
     display: block;
@@ -68,14 +69,15 @@
   max-width: 280px;
   min-height: 100%;
   margin: 0;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
 
   border: 1px solid transparent;
   border-bottom: none;
-  border-top-left-radius: calc(.5rem - 1px);
-  border-top-right-radius: calc(.5rem - 1px);
+  border-top-left-radius: calc(0.5rem - 1px);
+  border-top-right-radius: calc(0.5rem - 1px);
 
-  &:focus, &:hover {
+  &:focus,
+  &:hover {
     @inactive-color: mix(@secondary-blue, #ccc, 50);
     border-color: @inactive-color @inactive-color @secondary-blue;
   }
diff --git a/pages/src/common/typography.less b/pages/src/common/typography.less
index 77c9b53e0..6bb8152f9 100644
--- a/pages/src/common/typography.less
+++ b/pages/src/common/typography.less
@@ -1,4 +1,4 @@
-@import "./variables.less";
+@import './variables.less';
 
 html {
   font-family: sans-serif;
@@ -17,42 +17,58 @@ p {
   margin-bottom: 1rem;
 }
 
-h1, h2, h3, h4, h5,
-.h1, .h2, .h3, .h4, .h5 {
+h1,
+h2,
+h3,
+h4,
+h5,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
   font-weight: 500;
   line-height: 1.2;
 }
 
-h1, .h1 {
+h1,
+.h1 {
   font-size: 2.5rem;
   @media @sm-xl {
     font-size: 3rem;
     margin-bottom: 1rem;
   }
 }
-h2, .h2 {
+h2,
+.h2 {
   font-size: 2rem;
 }
-h3, .h3 {
+h3,
+.h3 {
   font-size: 1.5rem;
 }
-h4, .h4 {
+h4,
+.h4 {
   font-size: 1.25rem;
 }
-h5, .h5 {
+h5,
+.h5 {
   font-size: 1.1rem;
 }
 
-b, strong {
+b,
+strong {
   font-weight: bolder;
 }
 
-ol, ul {
+ol,
+ul {
   margin-top: 0;
   margin-bottom: 1rem;
-  ol, ul {
+  ol,
+  ul {
     margin-bottom: 0;
   }
 }
@@ -89,11 +105,13 @@ a {
       font-size: 4rem;
     }
   }
-  h2, .h2 {
+  h2,
+  .h2 {
     font-size: 2.5rem;
     margin-bottom: 2rem;
   }
-  h3, .h3 {
+  h3,
+  .h3 {
     font-size: 2rem;
   }
 }
diff --git a/pages/src/common/variables.less b/pages/src/common/variables.less
index bd937a13a..d0f648789 100644
--- a/pages/src/common/variables.less
+++ b/pages/src/common/variables.less
@@ -1,5 +1,5 @@
-@import (reference) "./colors.less";
-@import (reference) "./breakpoints.less";
+@import (reference) './colors.less';
+@import (reference) './breakpoints.less';
 
 @header-height-mobile: 56px;
 @header-height-desktop: 84px;
diff --git a/pages/src/esl-share/esl-share.less b/pages/src/esl-share/esl-share.less
index f75af649f..ae82a911e 100644
--- a/pages/src/esl-share/esl-share.less
+++ b/pages/src/esl-share/esl-share.less
@@ -1,12 +1,13 @@
 esl-share-list esl-share-button[unavailable] {
   display: inline-block;
-  opacity: .3;
+  opacity: 0.3;
   cursor: not-allowed;
   filter: grayscale(1);
 }
 
 esl-share-button {
-  path, circle {
+  path,
+  circle {
     fill: #fff;
   }
 }
diff --git a/pages/src/landing/benefits/benefits.less b/pages/src/landing/benefits/benefits.less
index 3f6a352b3..34762a4b8 100644
--- a/pages/src/landing/benefits/benefits.less
+++ b/pages/src/landing/benefits/benefits.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .benefit {
   position: relative;
diff --git a/pages/src/landing/blogs/blogs.less b/pages/src/landing/blogs/blogs.less
index 5f4e4538a..62657d9b7 100644
--- a/pages/src/landing/blogs/blogs.less
+++ b/pages/src/landing/blogs/blogs.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .blogs {
   position: relative;
diff --git a/pages/src/landing/browser-support/browser-support.less b/pages/src/landing/browser-support/browser-support.less
index 93b73677e..660829c49 100644
--- a/pages/src/landing/browser-support/browser-support.less
+++ b/pages/src/landing/browser-support/browser-support.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .browser-support {
   position: relative;
@@ -32,7 +32,8 @@
     flex-direction: row;
     align-items: center;
 
-    &-content, &-image {
+    &-content,
+    &-image {
       width: 50%;
     }
 
diff --git a/pages/src/landing/landing.less b/pages/src/landing/landing.less
index b3144a9ec..90742988b 100644
--- a/pages/src/landing/landing.less
+++ b/pages/src/landing/landing.less
@@ -1,6 +1,6 @@
-@import "./marquee/marquee.less";
-@import "./benefits/benefits.less";
-@import "./browser-support/browser-support.less";
-@import "./promo-banner/promo-banner.less";
-@import "./blogs/blogs.less";
+@import './marquee/marquee.less';
+@import './benefits/benefits.less';
+@import './browser-support/browser-support.less';
+@import './promo-banner/promo-banner.less';
+@import './blogs/blogs.less';
 //@import "./overview/overview.less";
diff --git a/pages/src/landing/marquee/marquee-logo.less b/pages/src/landing/marquee/marquee-logo.less
index 68b31a8d2..f665dab7b 100644
--- a/pages/src/landing/marquee/marquee-logo.less
+++ b/pages/src/landing/marquee/marquee-logo.less
@@ -1,8 +1,11 @@
 #esl-logo-shield-stars > use.animate {
-  animation: shine-orange .5s linear;
+  animation: shine-orange 0.5s linear;
 }
 @keyframes shine-orange {
-  0%, 20%, 80%, 100% {
+  0%,
+  20%,
+  80%,
+  100% {
     stroke: transparent;
   }
   50% {
@@ -11,10 +14,13 @@
 }
 #esl-logo-border-inner-stars > use.animate,
 #esl-logo-border-outer-stars > use.animate {
-  animation: shine-blue .5s linear;
+  animation: shine-blue 0.5s linear;
 }
 @keyframes shine-blue {
-  0%, 20%, 80%, 100% {
+  0%,
+  20%,
+  80%,
+  100% {
     stroke: transparent;
   }
   50% {
@@ -24,10 +30,13 @@
 
 #esl-logo-wrench-left-stars > use.animate,
 #esl-logo-wrench-right-stars > use.animate {
-  animation: shine-white .5s linear;
+  animation: shine-white 0.5s linear;
 }
 @keyframes shine-white {
-  0%, 20%, 80%, 100% {
+  0%,
+  20%,
+  80%,
+  100% {
     stroke: transparent;
   }
   50% {
diff --git a/pages/src/landing/marquee/marquee.less b/pages/src/landing/marquee/marquee.less
index e795f3744..4ba76dcef 100644
--- a/pages/src/landing/marquee/marquee.less
+++ b/pages/src/landing/marquee/marquee.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .marquee {
   position: relative;
@@ -76,7 +76,7 @@
     @media @md-xl {
       font-size: 4rem;
       max-width: 100%;
-      margin: 0 -.1875rem 1rem;
+      margin: 0 -0.1875rem 1rem;
       text-shadow: none;
     }
   }
@@ -86,13 +86,13 @@
   }
   &-slogan-line {
     font-style: italic;
-    color: rgba(255, 255, 255, .6);
+    color: rgba(255, 255, 255, 0.6);
   }
 
   &-brand {
     width: 100%;
     margin: 0 auto;
-    opacity: .7;
+    opacity: 0.7;
 
     @media @md-xl {
       width: 90%;
@@ -106,4 +106,4 @@
     }
   }
 }
-@import "./marquee-logo.less";
+@import './marquee-logo.less';
diff --git a/pages/src/landing/overview/overview-item.less b/pages/src/landing/overview/overview-item.less
index 912cdd80a..c0316b1d2 100644
--- a/pages/src/landing/overview/overview-item.less
+++ b/pages/src/landing/overview/overview-item.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .overview {
   &-item {
diff --git a/pages/src/landing/overview/overview.less b/pages/src/landing/overview/overview.less
index edbade2a0..e0cba6e8d 100644
--- a/pages/src/landing/overview/overview.less
+++ b/pages/src/landing/overview/overview.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .overview {
   position: relative;
@@ -18,11 +18,12 @@
       width: 100%;
       // min-width: unset !important;
       margin: 0;
-      transition: transform .7s ease-in-out;
+      transition: transform 0.7s ease-in-out;
     }
   }
 
-  &-btn-prev-wrapper, &-btn-next-wrapper {
+  &-btn-prev-wrapper,
+  &-btn-next-wrapper {
     position: absolute;
     top: 50%;
     width: 40px;
@@ -47,7 +48,7 @@
     }
 
     &:hover {
-      opacity: .5;
+      opacity: 0.5;
     }
   }
 
@@ -68,4 +69,4 @@
   }
 }
 
-@import "./overview-item.less";
+@import './overview-item.less';
diff --git a/pages/src/landing/promo-banner/promo-banner.less b/pages/src/landing/promo-banner/promo-banner.less
index a893d028d..c926e4ae7 100644
--- a/pages/src/landing/promo-banner/promo-banner.less
+++ b/pages/src/landing/promo-banner/promo-banner.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .promo-banner {
   position: relative;
@@ -16,26 +16,48 @@
     width: 100%;
     height: 100%;
 
-    opacity: .6;
+    opacity: 0.6;
 
-    background: url('/assets/common/aurora.webp'), url('/assets/common/aurora.webp'), linear-gradient(rgba(0, 0, 0, 0), rgba(13, 57, 90, 1) 40%, rgba(0, 0, 0, 0));
-    background-position: right 157% bottom 22%, left 139% bottom 18%, center;
-    background-size: 50% 100%, 50% 85%, auto;
+    background: url('/assets/common/aurora.webp'),
+      url('/assets/common/aurora.webp'),
+      linear-gradient(
+        rgba(0, 0, 0, 0),
+        rgba(13, 57, 90, 1) 40%,
+        rgba(0, 0, 0, 0)
+      );
+    background-position:
+      right 157% bottom 22%,
+      left 139% bottom 18%,
+      center;
+    background-size:
+      50% 100%,
+      50% 85%,
+      auto;
     background-repeat: no-repeat, no-repeat, repeat;
     @media @xs {
-      background: url('/assets/common/aurora.webp'), linear-gradient(rgba(0, 0, 0, 0), rgba(13, 57, 90, 1) 40%, rgba(0, 0, 0, 0));
+      background: url('/assets/common/aurora.webp'),
+        linear-gradient(
+          rgba(0, 0, 0, 0),
+          rgba(13, 57, 90, 1) 40%,
+          rgba(0, 0, 0, 0)
+        );
       background-repeat: no-repeat, repeat;
       top: -13%;
       background-size: 101% 112%;
-      opacity: .3;
+      opacity: 0.3;
     }
     @media @lg-xl {
-      background-position: right 157% bottom 54%, left 139% bottom 45%, center;
-      background-size: 50% 196%, 50% 132%, auto;
+      background-position:
+        right 157% bottom 54%,
+        left 139% bottom 45%,
+        center;
+      background-size:
+        50% 196%,
+        50% 132%,
+        auto;
     }
   }
 
-
   &-content {
     z-index: 1;
     text-align: center;
diff --git a/pages/src/localdev.less b/pages/src/localdev.less
index 34cb2a09b..fc566b347 100644
--- a/pages/src/localdev.less
+++ b/pages/src/localdev.less
@@ -1,42 +1,42 @@
-@import "./common/reboot.less";
-@import "./common/typography.less";
-@import "./common/colors.less";
-@import "./common/markdown.less";
-
-@import "./common/accent-lines.less";
-@import "./common/accordion.less";
-@import "./common/alert.less";
-@import "./common/badge.less";
-@import "./common/buttons.less";
-@import "./common/code.less";
-@import "./common/links.less";
-@import "./common/close.less";
-@import "./common/containers.less";
-@import "./common/simple-grid.less";
-@import "./common/forms.less";
-@import "./common/flex.less";
-@import "./common/helpers.less";
-@import "./common/scrollbar.less";
-@import "./common/tabs.less";
-@import "./common/dropdown-menu.less";
-@import "./common/animation-loading.less";
-
-@import "./page/sidebar-layout.less";
-@import "./page/landing-layout.less";
-
-@import "./search/search.less";
-
-@import "./navigation/navigation.less";
-@import "./landing/landing.less";
-
-@import "./banner/banner.less";
-
-@import "./collection-grid/collection-grid.less";
-@import "./esl-media-demo/test-media.less";
-@import "./esl-share/esl-share.less";
-
-@import "../../src/modules/all.less";
-
-@import "./back-link/back-link";
-
-@import (inline) "../../node_modules/prismjs/themes/prism.css";
+@import './common/reboot.less';
+@import './common/typography.less';
+@import './common/colors.less';
+@import './common/markdown.less';
+
+@import './common/accent-lines.less';
+@import './common/accordion.less';
+@import './common/alert.less';
+@import './common/badge.less';
+@import './common/buttons.less';
+@import './common/code.less';
+@import './common/links.less';
+@import './common/close.less';
+@import './common/containers.less';
+@import './common/simple-grid.less';
+@import './common/forms.less';
+@import './common/flex.less';
+@import './common/helpers.less';
+@import './common/scrollbar.less';
+@import './common/tabs.less';
+@import './common/dropdown-menu.less';
+@import './common/animation-loading.less';
+
+@import './page/sidebar-layout.less';
+@import './page/landing-layout.less';
+
+@import './search/search.less';
+
+@import './navigation/navigation.less';
+@import './landing/landing.less';
+
+@import './banner/banner.less';
+
+@import './collection-grid/collection-grid.less';
+@import './esl-media-demo/test-media.less';
+@import './esl-share/esl-share.less';
+
+@import '../../src/modules/all.less';
+
+@import './back-link/back-link';
+
+@import (inline) '../../node_modules/prismjs/themes/prism.css';
diff --git a/pages/src/navigation/footer/footer.less b/pages/src/navigation/footer/footer.less
index e3f713f95..8a7e036e9 100644
--- a/pages/src/navigation/footer/footer.less
+++ b/pages/src/navigation/footer/footer.less
@@ -1,8 +1,16 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .footer {
   @footer-primary: @primary-blue;
-  @footer-gradient: linear-gradient(to right, #131A2E, @footer-primary,@footer-primary, #ffffff, #131A2E) 47% 0%;
+  @footer-gradient: linear-gradient(
+      to right,
+      #131a2e,
+      @footer-primary,
+      @footer-primary,
+      #ffffff,
+      #131a2e
+    )
+    47% 0%;
 
   display: block;
   @media print {
@@ -53,7 +61,7 @@
     }
 
     @media @md-xl {
-      font-size: .875rem;
+      font-size: 0.875rem;
     }
   }
 
@@ -121,7 +129,7 @@
     height: 10px;
 
     transform-origin: center center;
-    transition: transform .5s ease-in-out;
+    transition: transform 0.5s ease-in-out;
 
     &::after {
       content: '';
@@ -148,11 +156,14 @@
   &-accordion-content {
     margin: 0 15px;
     z-index: 99;
-    transition: max-height .3s ease-in-out,
-    visibility 0s linear .3s;
+    transition:
+      max-height 0.3s ease-in-out,
+      visibility 0s linear 0.3s;
 
     &.open {
-      transition: max-height .3s ease-in-out, visibility 0s linear;
+      transition:
+        max-height 0.3s ease-in-out,
+        visibility 0s linear;
     }
 
     &.animate.open {
@@ -173,7 +184,7 @@
   }
 
   &-common-links {
-    font-size: .9rem;
+    font-size: 0.9rem;
   }
   &-common-links &-link {
     padding: 0;
diff --git a/pages/src/navigation/header/header-search.less b/pages/src/navigation/header/header-search.less
index 2c25be238..ec0d43b38 100644
--- a/pages/src/navigation/header/header-search.less
+++ b/pages/src/navigation/header/header-search.less
@@ -1,4 +1,4 @@
-@import "../../common/colors.less";
+@import '../../common/colors.less';
 
 // overwrite the default search styles in the header
 .header-search-box {
@@ -14,9 +14,9 @@
       padding: 0;
       overflow: hidden;
       border: none;
-      border-radius: .75rem;
+      border-radius: 0.75rem;
 
-      transition: width .5s ease-in-out;
+      transition: width 0.5s ease-in-out;
       will-change: width;
 
       .gsib_a,
diff --git a/pages/src/navigation/header/header.less b/pages/src/navigation/header/header.less
index 9b2f1cdc9..3cec595d8 100644
--- a/pages/src/navigation/header/header.less
+++ b/pages/src/navigation/header/header.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 .header {
   z-index: 10;
@@ -85,13 +85,14 @@
   }
 
   &-share-popup.esl-popup {
-    &, & > .esl-popup-arrow {
+    &,
+    & > .esl-popup-arrow {
       background: @landing-bg-color;
       border-color: gray;
     }
     > .esl-share {
-      margin: .75rem;
-      gap: .25rem;
+      margin: 0.75rem;
+      gap: 0.25rem;
     }
   }
 
@@ -152,7 +153,7 @@
     border-top: 2px solid white;
     border-bottom: 2px solid white;
 
-    transition: border .5s ease-in-out;
+    transition: border 0.5s ease-in-out;
 
     &::before,
     &::after {
@@ -168,7 +169,7 @@
       background: white;
 
       transform: translate(-50%, -50%);
-      transition: transform .5s ease-in-out;
+      transition: transform 0.5s ease-in-out;
     }
 
     &[active] {
@@ -199,7 +200,8 @@
     }
   }
 
-  &-short-name, &-long-name {
+  &-short-name,
+  &-long-name {
     font-size: 1.125rem;
     font-weight: 500;
     margin-left: 11px;
diff --git a/pages/src/navigation/header/logo.less b/pages/src/navigation/header/logo.less
index 7737d6449..6f1644c1d 100644
--- a/pages/src/navigation/header/logo.less
+++ b/pages/src/navigation/header/logo.less
@@ -18,7 +18,8 @@
 }
 
 @keyframes logo-enlarge-shield {
-  93%, 97% {
+  93%,
+  97% {
     transform: scale(1);
   }
   95% {
@@ -26,26 +27,32 @@
   }
 }
 @keyframes logo-rotate-180 {
-  0%, 80% {
+  0%,
+  80% {
     transform: rotate(0deg);
   }
-  90%, 100% {
+  90%,
+  100% {
     transform: rotate(180deg);
   }
 }
 @keyframes logo-move-wrench-l {
-  70%, 100% {
+  70%,
+  100% {
     transform: translate(0px, 0px);
   }
-  80%, 90% {
+  80%,
+  90% {
     transform: translate(15px, -2px);
   }
 }
 @keyframes logo-move-wrench-r {
-  70%, 100% {
+  70%,
+  100% {
     transform: translate(0px, 0px);
   }
-  80%, 90% {
+  80%,
+  90% {
     transform: translate(-15px, 2px);
   }
 }
diff --git a/pages/src/navigation/navigation.less b/pages/src/navigation/navigation.less
index 47f145efb..f6d23a9da 100644
--- a/pages/src/navigation/navigation.less
+++ b/pages/src/navigation/navigation.less
@@ -1,9 +1,9 @@
-@import "./header/header.less";
-@import "./header/header-search.less";
-@import "./header/logo.less";
+@import './header/header.less';
+@import './header/header-search.less';
+@import './header/logo.less';
 
-@import "./sidebar/sidebar.less";
-@import "./related/related-links.less";
+@import './sidebar/sidebar.less';
+@import './related/related-links.less';
 
-@import "./footer/footer.less";
-@import "./footer/footer-compact.less";
+@import './footer/footer.less';
+@import './footer/footer-compact.less';
diff --git a/pages/src/navigation/sidebar/sidebar-content.less b/pages/src/navigation/sidebar/sidebar-content.less
index 8ee91a2f6..36336bee8 100644
--- a/pages/src/navigation/sidebar/sidebar-content.less
+++ b/pages/src/navigation/sidebar/sidebar-content.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
   .sidebar-nav {
@@ -42,7 +42,7 @@ esl-d-sidebar {
     padding-left: 15px;
     overflow: hidden;
 
-    font-size: .95rem;
+    font-size: 0.95rem;
     font-weight: 600;
     line-height: 20px;
     text-transform: uppercase;
@@ -62,21 +62,21 @@ esl-d-sidebar {
 
   .sidebar-scrollbar {
     @media (hover: hover) {
-      opacity: .4;
-      transition: opacity .3s linear;
+      opacity: 0.4;
+      transition: opacity 0.3s linear;
     }
 
     .scrollbar-track {
-      background: rgba(255, 255, 255, .3);
+      background: rgba(255, 255, 255, 0.3);
     }
 
     .scrollbar-thumb {
-      background: rgba(0, 0, 0, .4);
+      background: rgba(0, 0, 0, 0.4);
     }
 
     &[dragging] .scrollbar-thumb {
-      background: rgba(0, 0, 0, .6);
-      box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, .2);
+      background: rgba(0, 0, 0, 0.6);
+      box-shadow: inset 0 0 4px 0 rgba(255, 255, 255, 0.2);
     }
   }
 
diff --git a/pages/src/navigation/sidebar/sidebar-controls.less b/pages/src/navigation/sidebar/sidebar-controls.less
index 52b748401..4e80a0614 100644
--- a/pages/src/navigation/sidebar/sidebar-controls.less
+++ b/pages/src/navigation/sidebar/sidebar-controls.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
   .sidebar-trigger-btn {
@@ -15,7 +15,7 @@ esl-d-sidebar {
 
     transform: rotate(0deg);
     transform-origin: center center;
-    transition: transform .5s ease-in-out;
+    transition: transform 0.5s ease-in-out;
 
     @media @md-xl {
       display: block;
@@ -27,7 +27,8 @@ esl-d-sidebar {
   }
 
   .sidebar-arrows-icon {
-    &::after, &::before {
+    &::after,
+    &::before {
       content: '';
 
       position: absolute;
@@ -36,7 +37,7 @@ esl-d-sidebar {
 
       transform: rotate(-45deg);
       transform-origin: top left;
-      transition: transform .4s ease-in-out;
+      transition: transform 0.4s ease-in-out;
 
       width: 22%;
       height: 22%;
@@ -52,10 +53,11 @@ esl-d-sidebar {
 
     &:hover {
       &::after {
-        opacity: .5;
+        opacity: 0.5;
       }
 
-      &::before, &::after {
+      &::before,
+      &::after {
         transform: translate(3px) rotate(-45deg);
       }
     }
diff --git a/pages/src/navigation/sidebar/sidebar-primary-nav.less b/pages/src/navigation/sidebar/sidebar-primary-nav.less
index 78066a9a1..e5c56a23c 100644
--- a/pages/src/navigation/sidebar/sidebar-primary-nav.less
+++ b/pages/src/navigation/sidebar/sidebar-primary-nav.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
   .sidebar-nav-list {
@@ -50,7 +50,11 @@ esl-d-sidebar {
 
     &.active {
       color: @nav-dark-selected;
-      background: linear-gradient(to right, fade(@nav-dark-selected, 25%), fade(@nav-dark-selected, 0%));
+      background: linear-gradient(
+        to right,
+        fade(@nav-dark-selected, 25%),
+        fade(@nav-dark-selected, 0%)
+      );
 
       &::before {
         content: '';
@@ -84,7 +88,7 @@ esl-d-sidebar {
     font-size: 1.125rem;
     font-weight: 500;
 
-    transition: opacity .5s ease-in;
+    transition: opacity 0.5s ease-in;
 
     &:hover {
       color: @nav-dark-hover;
@@ -113,7 +117,7 @@ esl-d-sidebar {
 
     transform: rotate(0deg);
     transform-origin: center;
-    transition: transform .5s ease-in-out;
+    transition: transform 0.5s ease-in-out;
   }
   .sidebar-nav-item-trigger[active] {
     &.sidebar-nav-item-arrow::after {
diff --git a/pages/src/navigation/sidebar/sidebar-seccondary-nav.less b/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
index 0745e0081..cb168ca33 100644
--- a/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
+++ b/pages/src/navigation/sidebar/sidebar-seccondary-nav.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
   .sidebar-nav-secondary {
@@ -21,7 +21,11 @@ esl-d-sidebar {
 
     &.active {
       color: @nav-dark-selected;
-      background: linear-gradient(to right, fade(@nav-dark-selected, 25%), fade(@nav-dark-selected, 0%));
+      background: linear-gradient(
+        to right,
+        fade(@nav-dark-selected, 25%),
+        fade(@nav-dark-selected, 0%)
+      );
     }
   }
   .sidebar-nav-secondary-link {
diff --git a/pages/src/navigation/sidebar/sidebar.less b/pages/src/navigation/sidebar/sidebar.less
index 74ab9e6e1..ad7e7f516 100644
--- a/pages/src/navigation/sidebar/sidebar.less
+++ b/pages/src/navigation/sidebar/sidebar.less
@@ -1,4 +1,4 @@
-@import (reference) "../../common/variables.less";
+@import (reference) '../../common/variables.less';
 
 esl-d-sidebar {
   display: block;
@@ -18,19 +18,24 @@ esl-d-sidebar {
   /* stylelint-enable */
   max-width: 0;
 
-  box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, .5);
+  box-shadow: 4px 8px 8px 0 rgba(0, 0, 0, 0.5);
   @media @md-xl {
-    box-shadow: 4px 0 8px 0 rgba(0, 0, 0, .5);
+    box-shadow: 4px 0 8px 0 rgba(0, 0, 0, 0.5);
   }
 
   &[animation] {
-    transition: max-width .5s ease-in-out, visibility .5s linear;
+    transition:
+      max-width 0.5s ease-in-out,
+      visibility 0.5s linear;
     &.open {
-      transition: max-width .5s ease-in-out, visibility 0s linear;
+      transition:
+        max-width 0.5s ease-in-out,
+        visibility 0s linear;
     }
   }
 
-  &, & .sidebar-content {
+  &,
+  & .sidebar-content {
     width: 100vw;
     @media @sm {
       width: 20rem;
@@ -74,7 +79,7 @@ esl-d-sidebar {
   }
 }
 
-@import "./sidebar-controls.less";
-@import "./sidebar-content.less";
-@import "./sidebar-primary-nav.less";
-@import "./sidebar-seccondary-nav.less";
+@import './sidebar-controls.less';
+@import './sidebar-content.less';
+@import './sidebar-primary-nav.less';
+@import './sidebar-seccondary-nav.less';
diff --git a/pages/src/page/base-layout.less b/pages/src/page/base-layout.less
index dec219b8c..0514712b9 100644
--- a/pages/src/page/base-layout.less
+++ b/pages/src/page/base-layout.less
@@ -1,4 +1,4 @@
-@import "../common/variables.less";
+@import '../common/variables.less';
 
 @page {
   size: a4 portrait;
@@ -64,10 +64,10 @@ main {
   height: @header-height-mobile;
   pointer-events: none;
   box-shadow: none;
-  transition: box-shadow .3s ease-in-out;
+  transition: box-shadow 0.3s ease-in-out;
 
   .esl-scrollbar:not([at-start]) + & {
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .5);
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
   }
 
   @media @md-xl {
diff --git a/pages/src/page/landing-layout.less b/pages/src/page/landing-layout.less
index 6ef72f546..03aacfd73 100644
--- a/pages/src/page/landing-layout.less
+++ b/pages/src/page/landing-layout.less
@@ -1,5 +1,5 @@
-@import (reference) "../common/variables.less";
-@import "./base-layout.less";
+@import (reference) '../common/variables.less';
+@import './base-layout.less';
 
 .landing-layout {
   display: flex;
@@ -16,7 +16,6 @@
   background: @landing-bg-color url('/assets/common/stars.webp') repeat;
   background-size: 50vw auto;
 
-
   &::before {
     content: '';
     position: absolute;
@@ -30,14 +29,22 @@
     animation: slow-move-right 100s infinite linear;
 
     @media print {
-     display: none;
+      display: none;
     }
   }
 
   @keyframes slow-move-right {
-    0% { background-position: 0 0; opacity: 1; }
-    50% { opacity: .75; }
-    100% { background-position: 100vw 0; opacity: 1; }
+    0% {
+      background-position: 0 0;
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.75;
+    }
+    100% {
+      background-position: 100vw 0;
+      opacity: 1;
+    }
   }
 
   .main-scroll {
diff --git a/pages/src/page/sidebar-layout.less b/pages/src/page/sidebar-layout.less
index 80418840a..ce23b7aca 100644
--- a/pages/src/page/sidebar-layout.less
+++ b/pages/src/page/sidebar-layout.less
@@ -1,5 +1,5 @@
-@import (reference) "../common/variables.less";
-@import "./base-layout.less";
+@import (reference) '../common/variables.less';
+@import './base-layout.less';
 
 .sidebar-layout {
   display: flex;
diff --git a/pages/src/search/search.less b/pages/src/search/search.less
index ffcf2056b..c36a18462 100644
--- a/pages/src/search/search.less
+++ b/pages/src/search/search.less
@@ -1,4 +1,4 @@
-@import "../common/colors.less";
+@import '../common/colors.less';
 
 // overwrite default search styles on the search page
 main {
diff --git a/pages/views/examples/toggleable.njk b/pages/views/examples/toggleable.njk
index 42adbb349..56462b31c 100644
--- a/pages/views/examples/toggleable.njk
+++ b/pages/views/examples/toggleable.njk
@@ -250,7 +250,7 @@ aside:
 <hr/>
 
 <section>
-  <h4 style="margin-bottom: 30px;">Example with Related Target</h2>
+  <h4 style="margin-bottom: 30px;">Example with Related Target</h4>
   <div class="row">
     <div class="col-12" style="margin-bottom: 15px;">
       <esl-trigger target="#toggleable10" mode="show" active-class-target="::parent(.col-12)" class="btn btn-sec-blue">Show</esl-trigger>
diff --git a/src/modules/all.less b/src/modules/all.less
index 05fab970e..f6afe98c3 100644
--- a/src/modules/all.less
+++ b/src/modules/all.less
@@ -1,27 +1,27 @@
-@import "./esl-utils/all.less";
+@import './esl-utils/all.less';
 
-@import "./esl-image/core.less";
-@import "./esl-media/core.less";
+@import './esl-image/core.less';
+@import './esl-media/core.less';
 
-@import "./esl-scrollbar/core.less";
+@import './esl-scrollbar/core.less';
 
-@import "./esl-a11y-group/core.less";
-@import "./esl-toggleable/core.less";
-@import "./esl-popup/core.less";
-@import "./esl-trigger/core.less";
+@import './esl-a11y-group/core.less';
+@import './esl-toggleable/core.less';
+@import './esl-popup/core.less';
+@import './esl-trigger/core.less';
 
-@import "./esl-panel/core.less";
-@import "./esl-panel-group/core.less";
+@import './esl-panel/core.less';
+@import './esl-panel-group/core.less';
 
-@import "./esl-tab/core.less";
+@import './esl-tab/core.less';
 
-@import "./esl-alert/core.less";
+@import './esl-alert/core.less';
 
-@import "./esl-forms/all.less";
+@import './esl-forms/all.less';
 
-@import "./esl-footnotes/core.less";
-@import "./esl-tooltip/core.less";
+@import './esl-footnotes/core.less';
+@import './esl-tooltip/core.less';
 
-@import "./esl-animate/core.less";
+@import './esl-animate/core.less';
 
-@import "./esl-share/core.less";
+@import './esl-share/core.less';
diff --git a/src/modules/esl-a11y-group/core.less b/src/modules/esl-a11y-group/core.less
index 40071b92a..c0c383383 100644
--- a/src/modules/esl-a11y-group/core.less
+++ b/src/modules/esl-a11y-group/core.less
@@ -1,1 +1,1 @@
-@import "./core/esl-a11y-group.less";
+@import './core/esl-a11y-group.less';
diff --git a/src/modules/esl-alert/core.less b/src/modules/esl-alert/core.less
index cf6b4e052..b5c52735b 100644
--- a/src/modules/esl-alert/core.less
+++ b/src/modules/esl-alert/core.less
@@ -1,4 +1,4 @@
-@import "./core/esl-alert.less";
+@import './core/esl-alert.less';
 
 @esl-alert-color: #fff;
-@esl-alert-background: #0097E7;
+@esl-alert-background: #0097e7;
diff --git a/src/modules/esl-alert/core/esl-alert.less b/src/modules/esl-alert/core/esl-alert.less
index 20abc75df..20e51a89e 100644
--- a/src/modules/esl-alert/core/esl-alert.less
+++ b/src/modules/esl-alert/core/esl-alert.less
@@ -1,4 +1,4 @@
-@import "../../esl-utils/fixes/ie-fixes";
+@import '../../esl-utils/fixes/ie-fixes';
 
 esl-alert {
   display: flex;
@@ -6,7 +6,9 @@ esl-alert {
 
   opacity: 0;
   visibility: hidden;
-  transition: opacity .3s ease .05s, visibility 0s linear .35s;
+  transition:
+    opacity 0.3s ease 0.05s,
+    visibility 0s linear 0.35s;
 
   position: absolute;
   z-index: 10002;
diff --git a/src/modules/esl-animate/core.less b/src/modules/esl-animate/core.less
index 0e6d36f10..9b38a1b79 100644
--- a/src/modules/esl-animate/core.less
+++ b/src/modules/esl-animate/core.less
@@ -1,2 +1,2 @@
-@import "./core/esl-animate.less";
-@import "./core/esl-animate-animations.less";
+@import './core/esl-animate.less';
+@import './core/esl-animate-animations.less';
diff --git a/src/modules/esl-animate/core/esl-animate-animations.less b/src/modules/esl-animate/core/esl-animate-animations.less
index cf49b67f7..c566f3473 100644
--- a/src/modules/esl-animate/core/esl-animate-animations.less
+++ b/src/modules/esl-animate/core/esl-animate-animations.less
@@ -12,14 +12,19 @@
     --esl-animation-offset-x: 0;
     --esl-animation-offset-y: 0;
 
-
     opacity: 0;
-    transform: translate3d(var(--esl-animation-offset-x), var(--esl-animation-offset-y), 0);
+    transform: translate3d(
+      var(--esl-animation-offset-x),
+      var(--esl-animation-offset-y),
+      0
+    );
 
     &.in {
       opacity: 1;
       transform: translate3d(0, 0, 0);
-      transition: transform 1s, opacity 1s;
+      transition:
+        transform 1s,
+        opacity 1s;
     }
 
     &:not(.in) {
diff --git a/src/modules/esl-footnotes/core.less b/src/modules/esl-footnotes/core.less
index 5ff549997..62971d538 100644
--- a/src/modules/esl-footnotes/core.less
+++ b/src/modules/esl-footnotes/core.less
@@ -1,2 +1,2 @@
-@import "./core/esl-footnotes.less";
-@import "./core/esl-note.less";
+@import './core/esl-footnotes.less';
+@import './core/esl-note.less';
diff --git a/src/modules/esl-footnotes/core/esl-footnotes.less b/src/modules/esl-footnotes/core/esl-footnotes.less
index 04ae93294..dc4bf84bd 100644
--- a/src/modules/esl-footnotes/core/esl-footnotes.less
+++ b/src/modules/esl-footnotes/core/esl-footnotes.less
@@ -8,12 +8,12 @@ esl-footnotes {
     font-size: 75%;
     line-height: 0;
     vertical-align: baseline;
-    top: -.5em;
+    top: -0.5em;
   }
 
   .esl-footnotes-text {
-    padding-left: .5em;
-    padding-right: .5em;
+    padding-left: 0.5em;
+    padding-right: 0.5em;
   }
 
   .esl-footnotes-back-to-note {
@@ -21,7 +21,7 @@ esl-footnotes {
     font-size: 66%;
     line-height: 0;
     vertical-align: baseline;
-    top: -.5em;
+    top: -0.5em;
     cursor: pointer;
 
     &::before {
diff --git a/src/modules/esl-footnotes/core/esl-note.less b/src/modules/esl-footnotes/core/esl-note.less
index 2728605df..897f1f761 100644
--- a/src/modules/esl-footnotes/core/esl-note.less
+++ b/src/modules/esl-footnotes/core/esl-note.less
@@ -3,7 +3,7 @@ esl-note {
   font-size: 75%;
   line-height: 0;
   vertical-align: baseline;
-  top: -.5em;
+  top: -0.5em;
   cursor: pointer;
 
   &::before {
diff --git a/src/modules/esl-forms/all.less b/src/modules/esl-forms/all.less
index e72857e9b..2aab842e1 100644
--- a/src/modules/esl-forms/all.less
+++ b/src/modules/esl-forms/all.less
@@ -1,2 +1,2 @@
-@import "./esl-select/core.less";
-@import "./esl-select-list/core.less";
+@import './esl-select/core.less';
+@import './esl-select-list/core.less';
diff --git a/src/modules/esl-forms/esl-select-list/core.less b/src/modules/esl-forms/esl-select-list/core.less
index bf356bf97..1ae06d05a 100644
--- a/src/modules/esl-forms/esl-select-list/core.less
+++ b/src/modules/esl-forms/esl-select-list/core.less
@@ -1,9 +1,9 @@
 // Variables defaults, can be overwritten on consumer side
 @esl-select-list-check: #fff;
-@esl-select-list-primary: #0097E7;
+@esl-select-list-primary: #0097e7;
 @esl-select-list-disabled: #aaa;
 @esl-select-list-secondary: #ccc;
 @esl-select-list-background: #fff;
 
-@import "./core/esl-select-item.less";
-@import "./core/esl-select-list.less";
+@import './core/esl-select-item.less';
+@import './core/esl-select-list.less';
diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-item.less b/src/modules/esl-forms/esl-select-list/core/esl-select-item.less
index 5fa8aba0a..964bb8fe3 100644
--- a/src/modules/esl-forms/esl-select-list/core/esl-select-item.less
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-item.less
@@ -33,7 +33,7 @@ esl-select-item {
     transform: rotate(-45deg);
 
     opacity: 0;
-    transition: opacity .4s ease-in;
+    transition: opacity 0.4s ease-in;
   }
 
   &[selected] {
diff --git a/src/modules/esl-forms/esl-select-list/core/esl-select-list.less b/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
index b9b90eb4f..c678618b0 100644
--- a/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
+++ b/src/modules/esl-forms/esl-select-list/core/esl-select-list.less
@@ -19,7 +19,7 @@
     border: 0;
     padding: 0;
     overflow: hidden;
-    clip: rect(0,0,0,0);
+    clip: rect(0, 0, 0, 0);
   }
 
   esl-scrollbar {
@@ -48,7 +48,8 @@
 }
 
 /* stylelint-disable */
-_:-ms-fullscreen, :root .esl-select-list {
+_:-ms-fullscreen,
+:root .esl-select-list {
   height: 400px; // IE 11 only
 }
 /* stylelint-enable */
diff --git a/src/modules/esl-forms/esl-select/core.less b/src/modules/esl-forms/esl-select/core.less
index a983c5fc1..bbdf73ee5 100644
--- a/src/modules/esl-forms/esl-select/core.less
+++ b/src/modules/esl-forms/esl-select/core.less
@@ -1,5 +1,5 @@
 // Variables defaults, can be overwritten on consumer side
-@esl-select-primary: #0097E7;
+@esl-select-primary: #0097e7;
 @esl-select-disabled: #aaa;
 @esl-select-empty-color: #aaa;
 
@@ -7,6 +7,6 @@
 @esl-select-invlalid-border-color: #b22;
 
 // ESL Select parts
-@import "./core/esl-select.less";
-@import "./core/esl-select-renderer.less";
-@import "./core/esl-select-dropdown.less";
+@import './core/esl-select.less';
+@import './core/esl-select-renderer.less';
+@import './core/esl-select-dropdown.less';
diff --git a/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
index 2735e61b8..b6d5b8007 100644
--- a/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
+++ b/src/modules/esl-forms/esl-select/core/esl-select-dropdown.less
@@ -9,19 +9,23 @@
   opacity: 0;
   pointer-events: none;
 
-  transition: opacity .25s linear, visibility 0s linear .25s;
+  transition:
+    opacity 0.25s linear,
+    visibility 0s linear 0.25s;
 
   &[open] {
     visibility: visible;
     pointer-events: all;
     opacity: 1;
 
-    transition: opacity .25s linear, visibility 0s linear 0s;
+    transition:
+      opacity 0.25s linear,
+      visibility 0s linear 0s;
   }
 
   .esl-select-list {
     max-height: 50vh;
-    box-shadow: 2px 4px 4px rgba(0, 0, 0, .2);
+    box-shadow: 2px 4px 4px rgba(0, 0, 0, 0.2);
 
     .esl-select-list-container {
       margin-right: 20px;
diff --git a/src/modules/esl-forms/esl-select/core/esl-select.less b/src/modules/esl-forms/esl-select/core/esl-select.less
index e146bf722..163a435eb 100644
--- a/src/modules/esl-forms/esl-select/core/esl-select.less
+++ b/src/modules/esl-forms/esl-select/core/esl-select.less
@@ -12,7 +12,7 @@
     padding: 0;
     overflow: hidden;
     opacity: 0;
-    clip: rect(0,0,0,0);
+    clip: rect(0, 0, 0, 0);
 
     width: 100%;
     height: 100%;
@@ -48,7 +48,7 @@
     text-align: center;
     font-weight: bold !important;
 
-    transition: transform .2s linear;
+    transition: transform 0.2s linear;
     transform-origin: center center;
   }
   &[open] .esl-select-renderer::after {
diff --git a/src/modules/esl-image/core.less b/src/modules/esl-image/core.less
index de28acd17..12cb247c1 100644
--- a/src/modules/esl-image/core.less
+++ b/src/modules/esl-image/core.less
@@ -1,4 +1,4 @@
-@import "core.mixin.less";
+@import 'core.mixin.less';
 
 .esl-image-init();
 .esl-image-container-init();
diff --git a/src/modules/esl-image/core.mixin.less b/src/modules/esl-image/core.mixin.less
index 66bf36264..bd12072fd 100644
--- a/src/modules/esl-image/core.mixin.less
+++ b/src/modules/esl-image/core.mixin.less
@@ -1,2 +1,2 @@
-@import "./core/esl-image.less";
-@import "./core/esl-image-container.less";
+@import './core/esl-image.less';
+@import './core/esl-image-container.less';
diff --git a/src/modules/esl-image/core/esl-image-container.less b/src/modules/esl-image/core/esl-image-container.less
index e23566f21..80ebb561d 100644
--- a/src/modules/esl-image/core/esl-image-container.less
+++ b/src/modules/esl-image/core/esl-image-container.less
@@ -10,16 +10,16 @@
       left: 0;
       width: 100%;
 
-      &[mode="origin"],
+      &[mode='origin'],
       &[mode='save-ratio'] {
         position: relative;
       }
 
-      &[mode="fit"] {
+      &[mode='fit'] {
         position: static;
         overflow: hidden;
       }
-      &[mode="fit"] > .inner-image {
+      &[mode='fit'] > .inner-image {
         position: absolute;
         top: 50%;
         left: 50%;
@@ -42,7 +42,7 @@
       opacity: 0;
       &[ready] {
         opacity: 1;
-        transition: opacity .4s;
+        transition: opacity 0.4s;
       }
     }
 
@@ -53,7 +53,7 @@
       padding-top: 75%;
     }
     &.@{containerClass}-16-9 {
-      padding-top: (9/16*100%);
+      padding-top: (9/16 * 100%);
     }
   }
 }
diff --git a/src/modules/esl-image/core/esl-image.less b/src/modules/esl-image/core/esl-image.less
index a9a6ab28e..efdb251f0 100644
--- a/src/modules/esl-image/core/esl-image.less
+++ b/src/modules/esl-image/core/esl-image.less
@@ -45,8 +45,8 @@
       display: none;
     }
 
-    &[mode="fit"][error]::after,
-    &[mode="origin"][error]::after {
+    &[mode='fit'][error]::after,
+    &[mode='origin'][error]::after {
       display: none;
     }
 
diff --git a/src/modules/esl-media/core.less b/src/modules/esl-media/core.less
index 9094b6ae3..71da77c0d 100644
--- a/src/modules/esl-media/core.less
+++ b/src/modules/esl-media/core.less
@@ -1,4 +1,4 @@
-@import "core.mixin.less";
+@import 'core.mixin.less';
 
 .esl-media-init();
 .esl-media-container-init();
diff --git a/src/modules/esl-media/core.mixin.less b/src/modules/esl-media/core.mixin.less
index a8507902b..c26545573 100644
--- a/src/modules/esl-media/core.mixin.less
+++ b/src/modules/esl-media/core.mixin.less
@@ -1,2 +1,2 @@
-@import "./core/esl-media.less";
-@import "./core/esl-media-container";
+@import './core/esl-media.less';
+@import './core/esl-media-container';
diff --git a/src/modules/esl-panel-group/core.less b/src/modules/esl-panel-group/core.less
index 62a240e45..39ccf620e 100644
--- a/src/modules/esl-panel-group/core.less
+++ b/src/modules/esl-panel-group/core.less
@@ -1,1 +1,1 @@
-@import "./core/esl-panel-group.less";
+@import './core/esl-panel-group.less';
diff --git a/src/modules/esl-panel-group/core/esl-panel-group.less b/src/modules/esl-panel-group/core/esl-panel-group.less
index 923bd2fc8..75318039b 100644
--- a/src/modules/esl-panel-group/core/esl-panel-group.less
+++ b/src/modules/esl-panel-group/core/esl-panel-group.less
@@ -1,5 +1,5 @@
 esl-panel-group {
-  @animationTime: .5s;
+  @animationTime: 0.5s;
 
   display: block;
   box-sizing: content-box;
@@ -12,11 +12,17 @@ esl-panel-group {
   &[current-mode='tabs'] {
     > esl-panel {
       opacity: 0;
-      transition: max-height @animationTime ease-in-out, visibility 0s linear @animationTime, opacity @animationTime ease-in-out;
+      transition:
+        max-height @animationTime ease-in-out,
+        visibility 0s linear @animationTime,
+        opacity @animationTime ease-in-out;
 
       &.open {
         opacity: 1;
-        transition: max-height @animationTime ease-in-out, visibility 0s linear, opacity @animationTime ease-in-out;
+        transition:
+          max-height @animationTime ease-in-out,
+          visibility 0s linear,
+          opacity @animationTime ease-in-out;
       }
     }
   }
diff --git a/src/modules/esl-panel/core.less b/src/modules/esl-panel/core.less
index 391c67b80..c3e5dd952 100644
--- a/src/modules/esl-panel/core.less
+++ b/src/modules/esl-panel/core.less
@@ -1,1 +1,1 @@
-@import "./core/esl-panel.less";
+@import './core/esl-panel.less';
diff --git a/src/modules/esl-panel/core/esl-panel.less b/src/modules/esl-panel/core/esl-panel.less
index c1ba5e3e8..fb2522884 100644
--- a/src/modules/esl-panel/core/esl-panel.less
+++ b/src/modules/esl-panel/core/esl-panel.less
@@ -1,5 +1,5 @@
 esl-panel {
-  @animationTime: .5s;
+  @animationTime: 0.5s;
 
   display: block;
   height: auto;
@@ -7,12 +7,16 @@ esl-panel {
 
   visibility: hidden;
   max-height: 0;
-  transition: max-height @animationTime ease-in-out, visibility 0s linear @animationTime;
+  transition:
+    max-height @animationTime ease-in-out,
+    visibility 0s linear @animationTime;
 
   &.open {
     visibility: visible;
     max-height: none;
-    transition: max-height @animationTime ease-in-out, visibility 0s linear;
+    transition:
+      max-height @animationTime ease-in-out,
+      visibility 0s linear;
   }
 }
 
diff --git a/src/modules/esl-popup/core.less b/src/modules/esl-popup/core.less
index 05b6f86bb..2b3d81434 100644
--- a/src/modules/esl-popup/core.less
+++ b/src/modules/esl-popup/core.less
@@ -1,3 +1,3 @@
-@import "core.mixin.less";
+@import 'core.mixin.less';
 
 .esl-popup-init();
diff --git a/src/modules/esl-popup/core.mixin.less b/src/modules/esl-popup/core.mixin.less
index a9daaa1d5..03933abf3 100644
--- a/src/modules/esl-popup/core.mixin.less
+++ b/src/modules/esl-popup/core.mixin.less
@@ -1,1 +1,1 @@
-@import "./core/esl-popup.less";
+@import './core/esl-popup.less';
diff --git a/src/modules/esl-popup/core/esl-popup.less b/src/modules/esl-popup/core/esl-popup.less
index c576f8d52..4da71ded3 100644
--- a/src/modules/esl-popup/core/esl-popup.less
+++ b/src/modules/esl-popup/core/esl-popup.less
@@ -4,7 +4,9 @@
                       @popupBorderColor: #DBDBDB,
                       @popupBorderWidth: 1px) {
   @popupArrowHalf: (@popupArrowSize / 2);
-  @popupArrowShift: (@popupArrowSize * .2071 - @popupBorderWidth);  // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
+  @popupArrowShift: (
+    @popupArrowSize * 0.2071 - @popupBorderWidth
+  ); // 0.2071 = (sqrt(2) - 1) / 2  (Don't ask why, it's an axiom)
 
   .@{arrowClassName} {
     position: absolute;
@@ -20,7 +22,7 @@
     background: @popupBackgroundColor;
   }
 
-  &[placed-at=top] {
+  &[placed-at='top'] {
     .@{arrowClassName} {
       top: auto;
       bottom: (-@popupArrowHalf - @popupBorderWidth);
@@ -28,7 +30,7 @@
     }
   }
 
-  &[placed-at=left] {
+  &[placed-at='left'] {
     .@{arrowClassName} {
       right: (-@popupArrowHalf - @popupBorderWidth);
       left: auto;
@@ -37,7 +39,7 @@
     }
   }
 
-  &[placed-at=right] {
+  &[placed-at='right'] {
     .@{arrowClassName} {
       left: (-@popupArrowHalf - @popupBorderWidth - @popupArrowShift);
       right: auto;
@@ -67,9 +69,9 @@
     display: block;
     opacity: 0;
     visibility: hidden;
-    transition: visibility .5s .2s;
+    transition: visibility 0.5s 0.2s;
     box-sizing: border-box;
-    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2);
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
     border: @borderWidth solid @borderColor;
     background: @backgroundColor;
     cursor: default;
@@ -79,7 +81,9 @@
       z-index: @zIndex;
       opacity: 1;
       visibility: visible;
-      transition: opacity .15s, transform .2s;
+      transition:
+        opacity 0.15s,
+        transform 0.2s;
     }
 
     &:not([open]) {
diff --git a/src/modules/esl-scrollbar/core.less b/src/modules/esl-scrollbar/core.less
index 36118b12a..e3a5dada8 100644
--- a/src/modules/esl-scrollbar/core.less
+++ b/src/modules/esl-scrollbar/core.less
@@ -1,4 +1,4 @@
-@import "core.mixin.less";
+@import 'core.mixin.less';
 
 .esl-scrollbar-init();
 .esl-scrollbar-arrows-init();
diff --git a/src/modules/esl-scrollbar/core.mixin.less b/src/modules/esl-scrollbar/core.mixin.less
index 4694f5cff..2b341d025 100644
--- a/src/modules/esl-scrollbar/core.mixin.less
+++ b/src/modules/esl-scrollbar/core.mixin.less
@@ -1,3 +1,3 @@
-@import "./core/esl-scrollbar.less";
-@import "./core/esl-scrollbar-arrows.less";
-@import "./core/esl-scrollable-content.less";
+@import './core/esl-scrollbar.less';
+@import './core/esl-scrollbar-arrows.less';
+@import './core/esl-scrollable-content.less';
diff --git a/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less b/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
index 2a5907363..ea69f25d6 100644
--- a/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
+++ b/src/modules/esl-scrollbar/core/esl-scrollbar-arrows.less
@@ -52,7 +52,7 @@
 
     &[at-end] .scrollbar-track::after,
     &[at-start] .scrollbar-track::before {
-      opacity: .25;
+      opacity: 0.25;
     }
   }
 }
diff --git a/src/modules/esl-share/core.less b/src/modules/esl-share/core.less
index 276cb9111..c0270e1ab 100644
--- a/src/modules/esl-share/core.less
+++ b/src/modules/esl-share/core.less
@@ -1,3 +1,3 @@
-@import "./core/esl-share-button.less";
-@import "./core/esl-share-trigger.less";
-@import "./core/esl-share.less";
+@import './core/esl-share-button.less';
+@import './core/esl-share-trigger.less';
+@import './core/esl-share.less';
diff --git a/src/modules/esl-share/core/esl-share-button.less b/src/modules/esl-share/core/esl-share-button.less
index d17d50f5e..884e0fdce 100644
--- a/src/modules/esl-share/core/esl-share-button.less
+++ b/src/modules/esl-share/core/esl-share-button.less
@@ -5,7 +5,7 @@ esl-share-button {
   cursor: pointer;
 
   &:hover {
-    opacity: .6;
+    opacity: 0.6;
   }
 
   &[unavailable] {
diff --git a/src/modules/esl-share/core/esl-share.less b/src/modules/esl-share/core/esl-share.less
index 56ffff829..dc04f8478 100644
--- a/src/modules/esl-share/core/esl-share.less
+++ b/src/modules/esl-share/core/esl-share.less
@@ -1,4 +1,4 @@
-esl-share[mode="list"] {
+esl-share[mode='list'] {
   display: inline-flex;
   flex-wrap: wrap;
 }
diff --git a/src/modules/esl-tab/core.less b/src/modules/esl-tab/core.less
index c277cf7f2..3086b8a5a 100644
--- a/src/modules/esl-tab/core.less
+++ b/src/modules/esl-tab/core.less
@@ -1,4 +1,4 @@
-@import "./core/esl-tab.less";
-@import "./core/esl-tabs.less";
-@import "./core/esl-tabs.scrollable.less";
-@import "./core/esl-tabs.arrows.less";
+@import './core/esl-tab.less';
+@import './core/esl-tabs.less';
+@import './core/esl-tabs.scrollable.less';
+@import './core/esl-tabs.arrows.less';
diff --git a/src/modules/esl-tab/core/esl-tabs.arrows.less b/src/modules/esl-tab/core/esl-tabs.arrows.less
index 19d703006..a83eeebb7 100644
--- a/src/modules/esl-tab/core/esl-tabs.arrows.less
+++ b/src/modules/esl-tab/core/esl-tabs.arrows.less
@@ -4,7 +4,7 @@ esl-tabs[scrollable] {
     .arrow-next {
       display: block;
       &[disabled] {
-        opacity: .1;
+        opacity: 0.1;
         cursor: auto;
       }
     }
@@ -17,7 +17,7 @@ esl-tabs[scrollable] {
     height: 35px;
     background: none;
     border: none;
-    opacity: .5;
+    opacity: 0.5;
     cursor: pointer;
 
     // TODO: IE11 support
@@ -34,13 +34,15 @@ esl-tabs[scrollable] {
   .icon-arrow-prev {
     display: block;
     height: 35px;
-    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWdvbiBwb2ludHM9IjMxIDQwIDE2IDI1IDMxIDEwIDMzIDEyIDIwIDI1IDMzIDM4Ii8+PC9zdmc+) no-repeat;
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDUwIDUwIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA1MCA1MCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cG9seWdvbiBwb2ludHM9IjMxIDQwIDE2IDI1IDMxIDEwIDMzIDEyIDIwIDI1IDMzIDM4Ii8+PC9zdmc+)
+      no-repeat;
   }
   .icon-arrow-next {
     transform: scaleX(-1);
   }
 
-  [dir='rtl'] &, &[dir='rtl'] {
+  [dir='rtl'] &,
+  &[dir='rtl'] {
     .icon-arrow-prev {
       transform: scaleX(-1);
     }
diff --git a/src/modules/esl-tab/core/esl-tabs.scrollable.less b/src/modules/esl-tab/core/esl-tabs.scrollable.less
index f19f5e9aa..ec41b0ac7 100644
--- a/src/modules/esl-tab/core/esl-tabs.scrollable.less
+++ b/src/modules/esl-tab/core/esl-tabs.scrollable.less
@@ -15,7 +15,8 @@ esl-tabs[scrollable]:not(.scrollable-disabled) {
     }
   }
 
-  .arrow-prev, .arrow-next {
+  .arrow-prev,
+  .arrow-next {
     flex: 0 0 auto;
   }
 }
diff --git a/src/modules/esl-toggleable/core.less b/src/modules/esl-toggleable/core.less
index 7f913a1b0..83e729348 100644
--- a/src/modules/esl-toggleable/core.less
+++ b/src/modules/esl-toggleable/core.less
@@ -1,2 +1,2 @@
-@import "./core/esl-toggleable.less";
-@import "./core/esl-toggleable-dispatcher.less";
+@import './core/esl-toggleable.less';
+@import './core/esl-toggleable-dispatcher.less';
diff --git a/src/modules/esl-tooltip/core.less b/src/modules/esl-tooltip/core.less
index 4e793ea74..44bd45fda 100644
--- a/src/modules/esl-tooltip/core.less
+++ b/src/modules/esl-tooltip/core.less
@@ -1,1 +1,1 @@
-@import "./core/esl-tooltip.less";
+@import './core/esl-tooltip.less';
diff --git a/src/modules/esl-trigger/core.less b/src/modules/esl-trigger/core.less
index f27006a40..23b3d1982 100644
--- a/src/modules/esl-trigger/core.less
+++ b/src/modules/esl-trigger/core.less
@@ -1,1 +1,1 @@
-@import "./core/esl-trigger.less";
+@import './core/esl-trigger.less';
diff --git a/src/modules/esl-utils/all.less b/src/modules/esl-utils/all.less
index b08d2d7e3..b093cc9aa 100644
--- a/src/modules/esl-utils/all.less
+++ b/src/modules/esl-utils/all.less
@@ -1,1 +1,1 @@
-@import "./dom/scroll.less";
+@import './dom/scroll.less';
diff --git a/src/modules/esl-utils/dom/scroll.less b/src/modules/esl-utils/dom/scroll.less
index c5025b59d..48bd3b459 100644
--- a/src/modules/esl-utils/dom/scroll.less
+++ b/src/modules/esl-utils/dom/scroll.less
@@ -51,7 +51,8 @@ html[esl-scroll-lock='pseudo'] {
   }
 
   // hide analytics beacons and markers
-  & > img, & > iframe {
+  & > img,
+  & > iframe {
     flex: 0 1 auto !important;
   }
 }


Test patch:
diff --git a/pages/src/esl-media-demo/test-media.less b/pages/src/esl-media-demo/test-media.less
index 7f1624302..e4fdfe8c4 100644
--- a/pages/src/esl-media-demo/test-media.less
+++ b/pages/src/esl-media-demo/test-media.less
@@ -33,7 +33,7 @@ esl-d-media-controls {
 
     &.contrast {
       color: white;
-      text-shadow: 0 0 6px rgba(0, 0, 0, .9);
+      text-shadow: 0 0 6px rgba(0, 0, 0, 0.9);
     }
   }
 }