Merge pull request #5017 from Gustry/stylelint-css

Lint - Introduce stylelint for CSS files

lizmap/.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "extends": "stylelint-config-standard",
+  "rules": {
+    "block-no-empty": null,
+    "declaration-block-no-shorthand-property-overrides": null,
+    "function-linear-gradient-no-nonstandard-direction": null,
+    "media-feature-name-no-unknown": null,
+    "no-descending-specificity": null,
+    "no-duplicate-selectors": null,
+    "selector-class-pattern": ".*",
+    "selector-id-pattern": ".*"
+  },
+  "ignoreFiles": [
+    "www/assets/**/*.css",
+    "vendor/**/*.css"
+  ]
+}

lizmap/www/themes/default/css/admin.css

@@ -1,8 +1,9 @@
 .jforms-error-list {
     background-color: #C43C35;
-    background-image: -moz-linear-gradient(center top , #EE5F5B, #C43C35);
-    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+    background-image: linear-gradient(center top , #EE5F5B, #C43C35);
+    border-color: rgb(0 0 0 / 10%) rgb(0 0 0 / 10%) rgb(0 0 0 / 25%);
 }
+
 .jforms-error-list li {
     color: #FFF;
 }

lizmap/www/themes/default/css/embed.css

@@ -1,22 +1,30 @@
 #mapmenu {
 }
+
 #mapmenu > div {
 }
+
 #mapmenu .nav-list {
 }
+
 #mapmenu .nav-list > li {
 }
+
 #mapmenu .nav-list > li > a {
 }
 
 #mapmenu .navbar-search {
 }
+
 #mapmenu .navbar-search .search-query {
 }
+
 #mapmenu .navbar-search .search-icon {
 }
+
 #mapmenu .navbar-search .icon {
 }
+
 #mapmenu .navbar-search .icon span {
 }
 
@@ -25,5 +33,6 @@
 
 #dock {
 }
+
 #map-content {
 }

lizmap/www/themes/default/css/main.css

@@ -4,12 +4,12 @@
   --header-background-image: none;
   --color-background-primary: #ffffffdb;
   --color-background-primary-content: #ffffffdb;
-  --color-text-primary: rgb(51, 51, 51);
-  --color-text-primary-content: rgb(51, 51, 51);
+  --color-text-primary: rgb(51 51 51);
+  --color-text-primary-content: rgb(51 51 51);
   --color-contrasted-elements: #43718c;
   --color-contrasted-elements-light: #c3dceb;
   --color-contrasted-text: white;
-  --color-dark-gray-elements: rgb(51, 51, 51);
+  --color-dark-gray-elements: rgb(51 51 51);
 }
 
 /* BODY */
@@ -26,10 +26,12 @@ button.btn, a.btn, input.btn {
   box-shadow: none;
   text-shadow: none;
 }
+
 button.btn:focus, a.btn:focus, input.btn:focus {
   background-color: var(--color-contrasted-elements-light);
   color: var(--color-text-primary);
 }
+
 button.btn:hover,
 button.btn.active,
 a.btn:hover,
@@ -39,45 +41,56 @@ input.btn.active {
   background-color: var(--color-contrasted-elements);
   color: var(--color-contrasted-text);
 }
+
 /* button types (bootstrap) */
+
 /* button types */
 .btn.btn-primary, .btn.btn-primary:focus {
   background-color: #43718c;
   color: white;
 }
+
 .btn.btn-info, .btn.btn-info:focus {
   background-color: #57bcda;
   color: white;
 }
+
 .btn.btn-success, .btn.btn-success:focus {
   background-color: #95c02a;
   color: white;
 }
+
 .btn.btn-warning, .btn.btn-warning:focus {
   background-color: #f9a227;
   color: white;
 }
+
 .btn.btn-danger, .btn.btn-danger:focus {
   background-color: #da4f49;
   color: white;
 }
+
 /* hover & active */
 .btn.btn-primary:hover, .btn.btn-primary.active {
   background-color: #43718c;
     filter:brightness(110%);
 }
+
 .btn.btn-info:hover, .btn.btn-info.active {
   background-color: #57bcda;
     filter:brightness(110%);
 }
+
 .btn.btn-success:hover, .btn.btn-success.active {
   background-color: #95c02a;
     filter:brightness(110%);
 }
+
 .btn.btn-warning:hover, .btn.btn-warning.active {
   background-color: #f9a227;
     filter:brightness(110%);
 }
+
 .btn.btn-danger:hover, .btn.btn-danger.active {
   background-color: #da4f49;
     filter:brightness(110%);
@@ -92,12 +105,14 @@ input.btn.active {
   background-color: var(--color-contrasted-elements);
   color: var(--color-contrasted-text);
 }
+
 .btn-group.open .btn.dropdown-toggle {
   background-color: var(--color-contrasted-elements);
   color: var(--color-contrasted-text);
 }
 
 /* FORMS */
+
 /* Form submit button container */
 div.jforms-submit-buttons {
   padding: 5px;
@@ -124,9 +139,11 @@ div.jforms-submit-buttons.form-actions .btn:focus
 div.jforms-submit-buttons.form-actions .btn.jforms-ctrl-reset {
   background-color: lightgrey;
 }
+
 div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_cancel {
   background-color: #fd8c62;
 }
+
 div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_submit {
   background-color: #aedb6a;
 }
@@ -141,7 +158,7 @@ div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_submit {
 }
 
 #logo {
-  background : url(img/logo.png) no-repeat;
+  background : url("img/logo.png") no-repeat;
   background-size:contain;
 }
 
@@ -152,68 +169,82 @@ div.jforms-submit-buttons.form-actions #jforms_view_edition__submit_submit {
 #auth {
   background: transparent;
 }
+
 .navbar .navbar-nav > a,
 .navbar .navbar-nav > li > a ,
 .navbar .navbar-nav > li > a {
   color: var(--color-contrasted-text);
 }
+
 .navbar .navbar-nav .active > a,
 .navbar .navbar-nav > li > a:focus ,
 .navbar .navbar-nav > li > a:hover {
   background-color: var(--color-background-primary);
 }
+
 .navbar .navbar-nav li.dropdown.open > .dropdown-toggle,
 .navbar .navbar-nav li.dropdown.active > .dropdown-toggle,
 .navbar .navbar-nav li.dropdown.open.active > .dropdown-toggle {
   color : var(--color-text-primary);
   background-color: var(--color-background-primary);
 }
-.navbar .navbar-nav > li > .dropdown-menu:after {
+
+.navbar .navbar-nav > li > .dropdown-menu::after {
   border-bottom: 6px solid var(--color-background-primary);
 }
+
 .dropdown-menu {
   background-color: var(--color-background-primary);
 }
+
 .navbar .icon {
-  background-image:url(images/sprite_20_tools.png);
+  background-image:url("images/sprite_20_tools.png");
 }
 
 .navbar .dashboard-item .icon {
-    background-position: -975px 0px;
+    background-position: -975px 0;
 }
+
 .navbar .navbar-nav .dashboard-item a:hover .icon,
 .navbar .navbar-nav .dashboard-item.active a .icon {
-    background-position: -950px 0px;
+    background-position: -950px 0;
 }
 
 .navbar .navbar-nav .login .icon {
-  background-position: -225px 0px;
+  background-position: -225px 0;
 }
+
 .navbar .navbar-nav .login a:hover .icon,
 .navbar .navbar-nav .login.active a .icon {
-  background-position: -200px 0px;
+  background-position: -200px 0;
 }
+
 .navbar .navbar-nav .registered .icon {
-  background-position: -825px 0px;
+  background-position: -825px 0;
 }
+
 .navbar .navbar-nav .registered a:hover .icon,
 .navbar .navbar-nav .registered.active a .icon {
-  background-position: -800px 0px;
+  background-position: -800px 0;
 }
+
 .navbar .navbar-nav .user .icon {
-  background-position: -575px 0px;
+  background-position: -575px 0;
 }
+
 .navbar .navbar-nav .user a:hover .icon,
 .navbar .navbar-nav .user.active a .icon,
 .navbar .navbar-nav .user.open a .icon    {
-  background-position: -550px 0px;
+  background-position: -550px 0;
 }
+
 .navbar .navbar-nav .home .icon {
-  background-position: -25px 0px;
+  background-position: -25px 0;
 }
+
 .navbar .navbar-nav .home a:hover .icon,
 .navbar .navbar-nav .home.active a .icon {
-  background-position: 0px 0px;
+  background-position: 0 0;
 }
 
 .navbar .navbar-nav > li > a:focus, .navbar .navbar-nav > li > a:hover {