package.json: stylelint: Add logical property checker

Auto-fix usage of logical properties. This should help out with RTL as
otherwise properties need to be changed from for example padding-left to
padding-right.

.stylelintrc.json

@@ -1,5 +1,8 @@
 {
   "extends": "stylelint-config-standard-scss",
+  "plugins": [
+	"stylelint-use-logical-spec"
+  ],
   "rules": {
 	"declaration-colon-newline-after": null,
 	"selector-list-comma-newline-after": null,
@@ -36,6 +39,7 @@
 	"scss/no-global-function-names": null,
 	"scss/operator-no-unspaced": null,
 	"selector-class-pattern": null,
-	"selector-id-pattern": null
+	"selector-id-pattern": null,
+	"liberty/use-logical-spec": "always"
   }
 }

package.json

@@ -38,7 +38,8 @@
     "sizzle": "2.3.10",
     "stylelint": "15.11.0",
     "stylelint-config-standard-scss": "11.0.0",
-    "stylelint-formatter-pretty": "3.2.1"
+    "stylelint-formatter-pretty": "3.2.1",
+    "stylelint-use-logical-spec": "5.0.0"
   },
   "dependencies": {
     "@patternfly/patternfly": "5.1.0",

src/ContainerTerminal.css

@@ -2,5 +2,6 @@
 
 .terminal {
     /* 5px all around and on right +11 since the scrollbar is 11px wide */
-    padding: 5px 16px 5px 5px;
+    padding-block: 5px;
+    padding-inline: 5px 16px;
 }

src/Containers.scss

@@ -3,20 +3,18 @@
 .container-pod {
     .pf-v5-c-card__header {
         border-color: #ddd;
-        padding-top: var(--pf-v5-global--spacer--md);
+        padding-block-start: var(--pf-v5-global--spacer--md);
     }
 
     .pod-header-details {
 	border-color: #ddd;
-	margin-top: var(--pf-v5-global--spacer--md);
-	margin-left: var(--pf-v5-global--spacer--md);
-	margin-right: var(--pf-v5-global--spacer--md);
+	margin-block-start: var(--pf-v5-global--spacer--md);
+	margin-inline: var(--pf-v5-global--spacer--md);
     }
 
     .pod-details-button {
-       padding-left: 0;
-       padding-right: 0;
-       margin-right: var(--pf-v5-global--spacer--md);
+       padding-inline: 0;
+       margin-inline-end: var(--pf-v5-global--spacer--md);
     }
 
     .pod-details-button-color {
@@ -31,13 +29,13 @@
         .pod-name {
             font-weight: var(--pf-v5-global--FontWeight--bold);
             font-size: var(--pf-v5-global--FontSize--md);
-            padding-right: 1rem;
+            padding-inline-end: 1rem;
         }
     }
 
     > .pf-v5-c-card__header {
         &:not(:last-child) {
-            padding-bottom: var(--pf-v5-global--spacer-sm);
+            padding-block-end: var(--pf-v5-global--spacer-sm);
         }
 
         // Reduce vertical padding of pod header items
@@ -74,7 +72,8 @@
 }
 
 .ct-table-empty td {
-    padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md) var(--pf-v5-global--spacer--lg);
+    padding-block: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--lg);
+    padding-inline: var(--pf-v5-global--spacer--md);
 }
 
 /* HACK - force DescriptionList to wrap but not fill the width */
@@ -90,5 +89,5 @@
 
 /* Drop the excessive margin for a Dropdown button */
 .containers-containers .pf-v5-c-toolbar__content-section > :nth-last-child(2) {
-    margin-right: 0;
+    margin-inline-end: 0;
 }

src/ImageRunModal.scss

@@ -4,14 +4,14 @@
 .pf-v5-c-select__menu {
     // 3xl is the left+right padding for an iPhone SE;
     // this works on other screen sizes as well
-    max-width: calc(100vw - var(--pf-v5-global--spacer--3xl));
+    max-inline-size: calc(100vw - var(--pf-v5-global--spacer--3xl));
 }
 
 // Make sure the footer is visible with more then 5 results.
 .pf-c-select__menu-list {
     // 35% viewport height is for 1280x720;
     // since it picks the min of the two, it works everywhere
-    max-height: min(20rem, 35vh);
+    max-block-size: min(20rem, 35vh);
     overflow: hidden scroll;
 }
 
@@ -32,7 +32,7 @@
 .ct-input-group-spacer-sm.pf-v5-l-flex {
     // Limit width for select entries and inputs in the input groups otherwise they take up the whole space
     > .pf-v5-c-select, .pf-v5-c-form-control:not(.pf-v5-c-select__toggle-typeahead) {
-      max-width: 8ch;
+      max-inline-size: 8ch;
     }
 }
 

src/ImageSearchModal.css

@@ -12,7 +12,7 @@
 }
 
 .image-list-item + .image-list-item {
-    border-top: 1px solid var(--pf-v5-global--BorderColor--200);
+    border-block-start: 1px solid var(--pf-v5-global--BorderColor--200);
 }
 
 .image-list-item > .image-name {
@@ -32,19 +32,18 @@
 }
 
 .image-tag-entry {
-    max-width: 15rem;
+    max-inline-size: 15rem;
 }
 
 @media (max-width: 340px) {
     /* Shrink buttons to accommodate iPhone 5/SE */
     .podman-search .modal-footer > .btn {
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
+        padding-inline: 0.25rem;
     }
 }
 
 .image-search-tag-form {
-    margin-bottom: var(--pf-v5-global--spacer--md);
+    margin-block-end: var(--pf-v5-global--spacer--md);
 }
 
 .podman-search .pf-v5-c-modal-box__footer {

src/Images.css

@@ -14,7 +14,7 @@
 }
 
 .containers-images .pf-v5-c-expandable-section__content {
-    margin-top: 0;
+    margin-block-start: 0;
 }
 
 /* Override font-size due to h2 being wrapped in a Flex */

src/podman.scss

@@ -13,7 +13,7 @@
 #containers-images, #containers-containers {
     // Decrease padding for the image/container toggle button list
     .pf-v5-c-table.pf-m-compact .pf-v5-c-table__toggle {
-        padding-left: 0;
+        padding-inline-start: 0;
     }
 }
 
@@ -41,15 +41,15 @@
 }
 
 .containers-run-onbuildvarclaim input {
-    max-width: 15em;
+    max-inline-size: 15em;
 }
 
 .pf-v5-c-alert__description {
     overflow-wrap: anywhere;
 }
 
 .listing-action {
-    width: 100%;
+    inline-size: 100%;
     display: flex;
     justify-content: space-around;
 }
@@ -107,7 +107,7 @@
 }
 
 .content-action {
-    text-align: right;
+    text-align: end;
     white-space: nowrap !important;
 }