Bump stylelint-config-idiomatic-order from 8.1.0 to 9.0.0

CHANGELOG.md

@@ -17,6 +17,8 @@
 ### Maintenance
 - Use the pre-built database images for MySQL and PostgreSQL tests
   [#1204](https://github.com/nextcloud/cookbook/pull/1204) @christianlupus
+- Update stylelint-config-idiomatic and fix code styling
+  [#1224](https://github.com/nextcloud/cookbook/pull/1224) @christianlupus
 
 ### Removed
 - Remove the deprecated endpoints from version 0.9.15

package.json

@@ -58,7 +58,7 @@
     "prettier": "^2.2.1",
     "prettier-package-json": "^2.6.3",
     "stylelint": "^14.5.3",
-    "stylelint-config-idiomatic-order": "^8.1.0",
+    "stylelint-config-idiomatic-order": "^9.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-scss": "^4.1.0",
     "svg-inline-loader": "^0.8.2",

src/components/EditInputField.vue

@@ -214,9 +214,9 @@ See: https://github.com/nextcloud/cookbook/issues/908
     min-height: revert;
     padding: revert;
     border: revert;
+    border-radius: revert;
     margin: revert;
     background-color: revert;
-    border-radius: revert;
     color: revert;
     font-size: revert;
     outline: revert;

src/components/EditInputGroup.vue

@@ -466,10 +466,10 @@ li .controls > button {
     width: 34px;
     height: 34px;
     padding: 0;
+    border-radius: 0;
     border-right-color: transparent;
     border-left-color: transparent;
     margin: 0;
-    border-radius: 0;
 }
 
 li .controls > button:last-child {
@@ -510,10 +510,10 @@ li .controls > button:last-child:not(:hover):not(:focus) {
     width: 36px;
     height: 36px;
     border: 1px solid var(--color-border-dark);
+    border-radius: 50%;
     background-color: var(--color-background-dark);
     background-position: center;
     background-repeat: no-repeat;
-    border-radius: 50%;
     line-height: 36px;
     outline: none;
     text-align: center;

src/components/RecipeCard.vue

@@ -95,8 +95,8 @@ export default {
     overflow: hidden;
     width: 105px;
     height: 105px;
-    background-color: #bebdbd;
     border-radius: 3px 0 0 3px;
+    background-color: #bebdbd;
     float: left;
 }
 

src/components/RecipeInstruction.vue

@@ -46,10 +46,10 @@ li::before {
     width: 36px;
     height: 36px;
     border: 1px solid var(--color-border-dark);
+    border-radius: 50%;
     background-color: var(--color-background-dark);
     background-position: center;
     background-repeat: no-repeat;
-    border-radius: 50%;
     content: counter(instruction-counter);
     line-height: 36px;
     outline: none;

src/components/RecipeKeyword.vue

@@ -39,9 +39,9 @@ li {
     display: inline-block;
     padding: 0 0.5em;
     border: 1px solid var(--color-border-dark);
+    border-radius: var(--border-radius-pill);
     margin-right: 0.3em;
     margin-bottom: 0.3em;
-    border-radius: var(--border-radius-pill);
 
     /* prevent text selection - doesn't look good */
     user-select: none; /* Standard */

src/components/RecipeTimer.vue

@@ -133,8 +133,8 @@ export default {
     position: relative;
     flex-grow: 1;
     border: 1px solid var(--color-border-dark);
-    margin: 1rem 2rem;
     border-radius: 3px;
+    margin: 1rem 2rem;
     font-size: 1.2rem;
     text-align: center;
 }

src/components/RecipeView.vue

@@ -703,8 +703,8 @@ export default {
     position: relative;
     flex-grow: 1;
     border: 1px solid var(--color-border-dark);
-    margin: 1rem 2rem;
     border-radius: 3px;
+    margin: 1rem 2rem;
     font-size: 1.2rem;
     text-align: center;
 }
@@ -836,11 +836,11 @@ main {
     width: 36px;
     height: 36px;
     border: 1px solid var(--color-border-dark);
+    border-radius: 50%;
     margin: -6px 1rem 1rem 0;
     background-color: var(--color-background-dark);
     background-position: center;
     background-repeat: no-repeat;
-    border-radius: 50%;
     content: counter(instruction-counter);
     float: left;
     line-height: 36px;

src/components/SuggestionsPopup.vue

@@ -383,8 +383,8 @@ export default {
     z-index: 2;
     overflow: hidden;
     border: 1px solid var(--color-background-darker);
-    background-color: var(--color-main-background);
     border-radius: 5px;
+    background-color: var(--color-main-background);
 }
 
 .scroller {