diff --git a/css/grid.css b/css/grid.css
index 883a75e90d..5c7f21dca3 100644
--- a/css/grid.css
+++ b/css/grid.css
@@ -9,7 +9,7 @@
.row.first-row {
padding-top: calc(var(--default-grid-baseline) * 4);
- padding-left: 60px;
+ padding-inline-start: 60px;
/*width: calc(100% - 45px);*/
width: 100%;
padding-bottom: 20px;
@@ -47,7 +47,7 @@
.col-4 { width: calc(100% - 20px); }
.row [class^='col-'], .row [class^='fix-col-'] {
- float: left;
+ float: inline-start;
position: relative;
/*
padding-right: 20px;
@@ -56,65 +56,61 @@
}
.floatReverse [class*='col-'] {
- float: right;
+ float: inline-end;
}
/* ===================== SPACES for rows OR columns =================00 */
.row .space-L {
- margin-left: 20px;
+ margin-inline-start: 20px;
}
.row.space-L {
- margin-left: 20px;
+ margin-inline-start: 20px;
width: calc(100% - 20px);
}
.row .space-L-small {
- margin-left: 8px;
+ margin-inline-start: 8px;
}
.row.space-L-small {
- margin-left: 8px;
+ margin-inline-start: 8px;
width: calc(100% - 8px);
}
.row .space-R {
- margin-right: 20px;
+ margin-inline-end: 20px;
}
.row.space-R {
- margin-right: 20px;
+ margin-inline-end: 20px;
width: calc(100% - 20px);
}
.row .space-R-small {
- margin-right: 8px;
+ margin-inline-end: 8px;
}
.row.space-R-small {
- margin-right: 8px;
+ margin-inline-end: 8px;
width: calc(100% - 8px);
}
.row .space-LR {
- margin-left: 20px;
- margin-right: 20px;
+ margin-inline: 20px;
}
.row.space-LR {
- margin-left: 20px;
- margin-right: 20px;
+ margin-inline: 20px;
width: calc(100% - 40px);
}
.row .space-LR-small {
- margin-left: 8px;
- margin-right: 8px;
+ margin-inline: 8px;
}
.row.space-LR-small {
- margin-left: 8px;
- margin-right: 8px;
+ margin-inline: 8px;
width: calc(100% - 16px);
}
@@ -145,7 +141,7 @@
/* put two or more elements (buttons) to the left and right */
.col-stretch-elements {
justify-content: space-between;
- padding-right: 0;
+ padding-inline-end: 0;
width: 100%;
}
@@ -159,14 +155,14 @@
.fix-col-4 { width: 100%; }
[class*='fix-col-'] {
- float: left;
+ float: inline-start;
position: relative;
padding: 0;
display: flex;
}
.floatReverse [class*='fix-col-'] {
- float: right;
+ float: inline-end;
}
/* ===== BOXES ========================== */
@@ -184,11 +180,11 @@
}
[class^='box-'] {
- margin-right: 20px;
+ margin-inline-end: 20px;
margin-bottom: 20px;
background-color: var(--color-background-darker);
padding: 15px;
- float: left;
+ float: inline-start;
position: relative;
}
@@ -221,8 +217,8 @@
.hide-xs {
display: none;
}
- .col-1, .fix-col-1 { width: 100%; padding-left: 0; padding-right: 0; }
- .col-3, .fix-col-3 { width: 100%; padding-left: 0; padding-right: 0; }
+ .col-1, .fix-col-1 { width: 100%; padding-inline: 0; }
+ .col-3, .fix-col-3 { width: 100%; padding-inline: 0; }
}
input, textarea {
diff --git a/src/App.vue b/src/App.vue
index 34903116a7..28da579124 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -164,7 +164,7 @@ export default {
.sidebar-icon {
position: absolute;
- right: 5px;
+ inset-inline-end: 5px;
top: 5px;
}
@@ -232,7 +232,7 @@ button[class^='icon-'] {
.icon-left {
background-position: left;
- padding-left: 22px;
+ padding-inline-start: 22px;
}
.mandatory {
@@ -241,7 +241,7 @@ button[class^='icon-'] {
.v-popover button {
height: 25px;
- margin-left: 10px;
+ margin-inline-start: 10px;
background-color: transparent;
border: none;
}
@@ -251,7 +251,7 @@ button[class^='icon-'] {
}
.v-popper__inner table td {
- padding-right: 15px;
+ padding-inline-end: 15px;
}
.error {
@@ -271,7 +271,7 @@ button[class^='icon-'] {
}
.align-right {
- text-align: right;
+ text-align: end;
}
.inline-flex {
diff --git a/src/modules/main/partials/ColumnTypeSelection.vue b/src/modules/main/partials/ColumnTypeSelection.vue
index 649d87e76b..71536b3c7c 100644
--- a/src/modules/main/partials/ColumnTypeSelection.vue
+++ b/src/modules/main/partials/ColumnTypeSelection.vue
@@ -153,11 +153,11 @@ export default {
}
.typeSelections span {
- padding-right: 21px;
+ padding-inline-end: 21px;
}
.multiSelectOptionLabel {
- padding-left: calc(var(--default-grid-baseline) * 1);
+ padding-inline-start: calc(var(--default-grid-baseline) * 1);
}
.icon-label-container {
diff --git a/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue b/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
index 5bba4541f2..b4d65950f4 100644
--- a/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
+++ b/src/modules/main/partials/editViewPartials/SelectedViewColumns.vue
@@ -155,7 +155,7 @@ export default {
}
.display-checkbox {
- padding-right: calc(var(--default-grid-baseline) * 4);
+ padding-inline-end: calc(var(--default-grid-baseline) * 4);
}
:deep(.modal-container) {
@@ -181,8 +181,7 @@ export default {
}
:deep(.checkbox-radio-switch__icon) {
- margin-right: 0 !important;
- margin-left: 0 !important;
+ margin-inline: 0 !important;
}
.selected-columns-wrapper {
@@ -191,7 +190,7 @@ export default {
}
.move-button {
- padding-right: 10px !important;
+ padding-inline-end: 10px !important;
cursor: move !important;
}
@@ -201,7 +200,7 @@ export default {
.meta-info {
font-style: italic;
- padding-left: calc(var(--default-grid-baseline) * 1);
+ padding-inline-start: calc(var(--default-grid-baseline) * 1);
color: var(--color-info);
}
diff --git a/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue b/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
index 7b35eef3f6..19f6a14ed8 100644
--- a/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
+++ b/src/modules/main/partials/editViewPartials/filter/FilterEntry.vue
@@ -208,8 +208,7 @@ export default {
}
.actions button {
- margin-right: calc(var(--default-grid-baseline) * 2);
- margin-left: auto;
+ margin-inline: auto calc(var(--default-grid-baseline) * 2);
height: 44px;
}
diff --git a/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue b/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
index f118f40db8..3adc8c6fd9 100644
--- a/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
+++ b/src/modules/main/partials/editViewPartials/filter/FilterGroup.vue
@@ -93,12 +93,12 @@ export default {
diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
index b85988790f..245878a4cc 100644
--- a/src/modules/modals/CreateContext.vue
+++ b/src/modules/modals/CreateContext.vue
@@ -198,7 +198,7 @@ export default {
diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
index 01a3232d4d..0e5e7845db 100644
--- a/src/modules/modals/CreateTable.vue
+++ b/src/modules/modals/CreateTable.vue
@@ -239,7 +239,7 @@ export default {
}
.modal__content {
- padding-right: 0 !important;
+ padding-inline-end: 0 !important;
.content-emoji {
display: inline-flex;
align-items: center;
diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
index 5d20f82f16..c17e1882c9 100644
--- a/src/modules/modals/EditColumn.vue
+++ b/src/modules/modals/EditColumn.vue
@@ -220,7 +220,7 @@ export default {
}
.button-padding-right {
- padding-right: calc(var(--default-grid-baseline) * 2)
+ padding-inline-end: calc(var(--default-grid-baseline) * 2)
}
.last-edit-info {
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
index 07b5eb5b45..6c74f0007a 100644
--- a/src/modules/modals/EditContext.vue
+++ b/src/modules/modals/EditContext.vue
@@ -285,7 +285,7 @@ export default {
}
.right-additional-button>button {
- margin-left: calc(var(--default-grid-baseline) * 3);
+ margin-inline-start: calc(var(--default-grid-baseline) * 3);
}
:deep(.element-description) {
diff --git a/src/modules/modals/EditTable.vue b/src/modules/modals/EditTable.vue
index a068fd0778..38125313d3 100644
--- a/src/modules/modals/EditTable.vue
+++ b/src/modules/modals/EditTable.vue
@@ -189,7 +189,7 @@ export default {
}
.right-additional-button > button {
- margin-left: calc(var(--default-grid-baseline) * 3);
+ margin-inline-start: calc(var(--default-grid-baseline) * 3);
}
:deep(.element-description) {
diff --git a/src/modules/modals/Import.vue b/src/modules/modals/Import.vue
index 45bae50144..1e05d97edd 100644
--- a/src/modules/modals/Import.vue
+++ b/src/modules/modals/Import.vue
@@ -487,7 +487,7 @@ export default {
.slot button {
min-width: fit-content;
- margin-right: calc(var(--default-grid-baseline) * 3);
+ margin-inline-end: calc(var(--default-grid-baseline) * 3);
}
:deep(.empty-content p) {
@@ -507,7 +507,7 @@ export default {
align-items: center;
justify-content: center;
gap: 12px;
- padding-left: 12px;
+ padding-inline-start: 12px;
padding-bottom: 16px;
}
diff --git a/src/modules/modals/ImportPreview.vue b/src/modules/modals/ImportPreview.vue
index e762d567ab..c670a2317f 100644
--- a/src/modules/modals/ImportPreview.vue
+++ b/src/modules/modals/ImportPreview.vue
@@ -259,7 +259,7 @@ table {
border: none;
td, th {
- padding-right: 8px;
+ padding-inline-end: 8px;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
@@ -274,8 +274,7 @@ table {
}
td:not(:first-child), th:not(:first-child) {
- padding-right: 8px;
- padding-left: 8px;
+ padding-inline: 8px;
}
tr {
@@ -294,14 +293,14 @@ table {
tbody {
td {
- text-align: left;
+ text-align: start;
vertical-align: middle;
&.left {
max-width: 300px;
}
&.right {
- text-align: right;
+ text-align: end;
}
}
diff --git a/src/modules/modals/ViewSettings.vue b/src/modules/modals/ViewSettings.vue
index 9ab749b705..c6d14c980b 100644
--- a/src/modules/modals/ViewSettings.vue
+++ b/src/modules/modals/ViewSettings.vue
@@ -360,7 +360,7 @@ export default {
diff --git a/src/pages/Context.vue b/src/pages/Context.vue
index 58267a9ae3..b2ce209ddd 100644
--- a/src/pages/Context.vue
+++ b/src/pages/Context.vue
@@ -245,7 +245,7 @@ export default {
&__description {
margin: calc(3 * var(--default-grid-baseline, 4px));
max-width: 790px;
- margin-left: 32px;
+ margin-inline-start: 32px;
}
&:deep(.icon-vue) {
@@ -258,10 +258,11 @@ export default {
margin: 40px 0;
&:deep(.row.first-row) {
- margin-left: 20px;
- padding-left: 0px;
+ margin-inline-start: 20px;
+ padding-inline-start: 0px;
}
}
+
:deep(h1) {
font-size: unset;
font-size: revert;
diff --git a/src/pages/Table.vue b/src/pages/Table.vue
index 7df573ede3..fec5c0c7ab 100644
--- a/src/pages/Table.vue
+++ b/src/pages/Table.vue
@@ -139,7 +139,7 @@ export default {
}
#content-vue .row.first-row {
- padding-left: 0px;
+ padding-inline-start: 0px;
}
.main-table-view, .main-view-view {
diff --git a/src/pages/View.vue b/src/pages/View.vue
index 35e9d91a7a..e470492def 100644
--- a/src/pages/View.vue
+++ b/src/pages/View.vue
@@ -81,6 +81,7 @@ export default {
width: max-content;
min-width: var(--app-content-width, 100%);
}
+
:deep(h1) {
font-size: unset;
font-size: revert;
diff --git a/src/shared/components/ncTable/NcTable.vue b/src/shared/components/ncTable/NcTable.vue
index 6c50b078c0..be8bbf986c 100644
--- a/src/shared/components/ncTable/NcTable.vue
+++ b/src/shared/components/ncTable/NcTable.vue
@@ -270,7 +270,7 @@ export default {
width: var(--app-content-width, auto);
position: sticky;
top: 60px;
- left: 0;
+ inset-inline-start: 0;
z-index: 15;
background-color: var(--color-main-background);
padding-top: 4px; // fix to show buttons completely
diff --git a/src/shared/components/ncTable/partials/FilterLabel.vue b/src/shared/components/ncTable/partials/FilterLabel.vue
index 6296ba343f..c530089ed2 100644
--- a/src/shared/components/ncTable/partials/FilterLabel.vue
+++ b/src/shared/components/ncTable/partials/FilterLabel.vue
@@ -78,8 +78,7 @@ export default {
.filter {
padding-top: 1px;
- padding-left: calc(var(--default-grid-baseline) * 2);
- padding-right: calc(var(--default-grid-baseline) * 6);
+ padding-inline: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 6);
padding-bottom: calc(var(--default-grid-baseline) * .5);
font-size: 0.9em;
border-radius: var(--border-radius-pill);
@@ -94,10 +93,9 @@ button {
padding-top: 1px;
min-height: auto;
padding-bottom: 1px;
- padding-left: 2px;
- padding-right: 2px;
+ padding-inline: 2px;
margin: 0;
- margin-left: 4px;
+ margin-inline-start: 4px;
}
diff --git a/src/shared/components/ncTable/partials/LinkWidget.vue b/src/shared/components/ncTable/partials/LinkWidget.vue
index 2ae1ab47cc..75f1c19d7c 100644
--- a/src/shared/components/ncTable/partials/LinkWidget.vue
+++ b/src/shared/components/ncTable/partials/LinkWidget.vue
@@ -90,7 +90,7 @@ export default {
align-items: center;
img, :deep(svg) {
- margin-right: calc(var(--default-grid-baseline) * 2);
+ margin-inline-end: calc(var(--default-grid-baseline) * 2);
}
}
diff --git a/src/shared/components/ncTable/partials/RichEditor.vue b/src/shared/components/ncTable/partials/RichEditor.vue
index 74d490dbfb..6519126d5b 100644
--- a/src/shared/components/ncTable/partials/RichEditor.vue
+++ b/src/shared/components/ncTable/partials/RichEditor.vue
@@ -121,7 +121,7 @@ export default {
.loading-indicator {
position: absolute;
top: 4px;
- right: 4px;
+ inset-inline-end: 4px;
}
:deep(.text-editor__wrapper div.ProseMirror) {
diff --git a/src/shared/components/ncTable/partials/TableCellDateTime.vue b/src/shared/components/ncTable/partials/TableCellDateTime.vue
index d319ec5a5f..4ec6f47520 100644
--- a/src/shared/components/ncTable/partials/TableCellDateTime.vue
+++ b/src/shared/components/ncTable/partials/TableCellDateTime.vue
@@ -214,7 +214,7 @@ export default {
> div:first-child {
cursor: pointer;
- text-align: right;
+ text-align: end;
}
}
@@ -247,12 +247,12 @@ export default {
}
.make-empty {
- padding-left: 15px;
+ padding-inline-start: 15px;
cursor: pointer;
}
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
:deep(input[type="datetime-local"]),
diff --git a/src/shared/components/ncTable/partials/TableCellHtml.vue b/src/shared/components/ncTable/partials/TableCellHtml.vue
index 6fa6e39ace..a4bcaecb29 100644
--- a/src/shared/components/ncTable/partials/TableCellHtml.vue
+++ b/src/shared/components/ncTable/partials/TableCellHtml.vue
@@ -201,7 +201,7 @@ export default {
.loading-indicator {
position: absolute;
top: 4px;
- right: 4px;
+ inset-inline-end: 4px;
}
:deep(.text-editor__wrapper div.ProseMirror) {
diff --git a/src/shared/components/ncTable/partials/TableCellLink.vue b/src/shared/components/ncTable/partials/TableCellLink.vue
index b21f5f24c4..4b06316cde 100644
--- a/src/shared/components/ncTable/partials/TableCellLink.vue
+++ b/src/shared/components/ncTable/partials/TableCellLink.vue
@@ -411,7 +411,7 @@ export default {
}
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
diff --git a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
index 9624485a04..764dffb3d9 100644
--- a/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellMultiSelection.vue
@@ -207,12 +207,12 @@ export default {
}
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
ul {
list-style-type: disc;
- padding-left: calc(var(--default-grid-baseline) * 3);
+ padding-inline-start: calc(var(--default-grid-baseline) * 3);
}
diff --git a/src/shared/components/ncTable/partials/TableCellNumber.vue b/src/shared/components/ncTable/partials/TableCellNumber.vue
index 08b26e0dbe..ebd749ee1b 100644
--- a/src/shared/components/ncTable/partials/TableCellNumber.vue
+++ b/src/shared/components/ncTable/partials/TableCellNumber.vue
@@ -103,7 +103,7 @@ export default {
diff --git a/src/shared/components/ncTable/partials/TableCellSelection.vue b/src/shared/components/ncTable/partials/TableCellSelection.vue
index 7e34639f8b..1ff0d62d6c 100644
--- a/src/shared/components/ncTable/partials/TableCellSelection.vue
+++ b/src/shared/components/ncTable/partials/TableCellSelection.vue
@@ -165,7 +165,7 @@ export default {
.edit-mode {
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
diff --git a/src/shared/components/ncTable/partials/TableCellStars.vue b/src/shared/components/ncTable/partials/TableCellStars.vue
index e33457f40a..5a77071b0d 100644
--- a/src/shared/components/ncTable/partials/TableCellStars.vue
+++ b/src/shared/components/ncTable/partials/TableCellStars.vue
@@ -169,6 +169,6 @@ export default {
}
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
diff --git a/src/shared/components/ncTable/partials/TableCellUsergroup.vue b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
index c08516a080..c091474bca 100644
--- a/src/shared/components/ncTable/partials/TableCellUsergroup.vue
+++ b/src/shared/components/ncTable/partials/TableCellUsergroup.vue
@@ -210,14 +210,14 @@ export default {
}
.usergroup-entry {
- padding-right: 10px;
+ padding-inline-end: 10px;
}
.edit-mode {
padding: 10px 0;
.icon-loading-inline {
- margin-left: 4px;
+ margin-inline-start: 4px;
}
}
diff --git a/src/shared/components/ncTable/partials/TableHeader.vue b/src/shared/components/ncTable/partials/TableHeader.vue
index ec10ba9475..612847d851 100644
--- a/src/shared/components/ncTable/partials/TableHeader.vue
+++ b/src/shared/components/ncTable/partials/TableHeader.vue
@@ -146,7 +146,7 @@ export default {
}
.cell span {
- padding-left: 12px;
+ padding-inline-start: 12px;
}
@@ -167,18 +167,18 @@ export default {
}
.hidden-indicator {
- border-right: solid;
+ border-inline-end: solid;
border-color: var(--color-primary);
border-width: 3px;
- padding-left: calc(var(--default-grid-baseline) * 1);
+ padding-inline-start: calc(var(--default-grid-baseline) * 1);
cursor: pointer;
}
.hidden-indicator-first {
- border-right: solid;
+ border-inline-end: solid;
border-color: var(--color-primary);
border-width: 3px;
- padding-left: calc(var(--default-grid-baseline) * 4);
+ padding-inline-start: calc(var(--default-grid-baseline) * 4);
cursor: pointer;
}
diff --git a/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue b/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
index c49c92f661..7ea11aafda 100644
--- a/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
+++ b/src/shared/components/ncTable/partials/TableHeaderColumnOptions.vue
@@ -386,7 +386,7 @@ export default {
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
index 9f54898d73..fdfd95003e 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue
@@ -131,11 +131,11 @@ export default {
input {
margin-top: 8px;
- margin-left: calc(var(--default-grid-baseline) * 1);
+ margin-inline-start: calc(var(--default-grid-baseline) * 1);
}
.col-4.inline {
- margin-left: calc(var(--default-grid-baseline) * 3);
+ margin-inline-start: calc(var(--default-grid-baseline) * 3);
}
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
index e93492f3ce..ff74e8922d 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/TextLinkForm.vue
@@ -151,7 +151,7 @@ export default {
display: inline-flex;
flex-wrap: wrap;
max-height: 137px;
- padding-left: calc(var(--default-grid-baseline) * 4);
+ padding-inline-start: calc(var(--default-grid-baseline) * 4);
overflow-y: auto;
overflow-x: hidden;
}
diff --git a/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue b/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
index 7fb73b2ba1..8dccc1d96f 100644
--- a/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
+++ b/src/shared/components/ncTable/partials/columnTypePartials/forms/UsergroupForm.vue
@@ -184,6 +184,6 @@ export default {
}
.selections span {
- padding-right: 21px;
+ padding-inline-end: 21px;
}
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
index e76cf24670..7f81befea5 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeDateForm.vue
@@ -73,7 +73,7 @@ export default {
}
.make-empty {
- padding-left: 15px;
+ padding-inline-start: 15px;
}
.make-empty:hover {
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
index 3e512b008a..b91735334b 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeForm.vue
@@ -69,7 +69,7 @@ export default {
}
.make-empty {
- padding-left: 15px;
+ padding-inline-start: 15px;
}
.make-empty:hover {
@@ -77,12 +77,12 @@ export default {
}
.hint-padding-left {
- padding-left: 20px;
+ padding-inline-start: 20px;
}
@media only screen and (max-width: 641px) {
.hint-padding-left {
- padding-left: 0;
+ padding-inline-start: 0;
}
}
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
index 3af6a18ac0..f1c60d0d9e 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/DatetimeTimeForm.vue
@@ -73,7 +73,7 @@ export default {
}
.make-empty {
- padding-left: 15px;
+ padding-inline-start: 15px;
}
.make-empty:hover {
@@ -81,12 +81,12 @@ export default {
}
.hint-padding-left {
- padding-left: 20px;
+ padding-inline-start: 20px;
}
@media only screen and (max-width: 641px) {
.hint-padding-left {
- padding-left: 0;
+ padding-inline-start: 0;
}
}
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
index 501c7ab47e..3bb28549e1 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/NumberForm.vue
@@ -107,11 +107,11 @@ export default {
diff --git a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
index 99910e471a..e157a74893 100644
--- a/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
+++ b/src/shared/components/ncTable/partials/rowTypePartials/NumberProgressForm.vue
@@ -71,12 +71,12 @@ export default {
diff --git a/src/shared/components/ncTable/sections/CustomTable.vue b/src/shared/components/ncTable/sections/CustomTable.vue
index 3190be92ef..000c0a42bf 100644
--- a/src/shared/components/ncTable/sections/CustomTable.vue
+++ b/src/shared/components/ncTable/sections/CustomTable.vue
@@ -429,7 +429,7 @@ export default {
}
.selected-page{
- padding-left: 5px;
+ padding-inline-start: 5px;
display:inline-flex;
align-items: center;
@@ -441,7 +441,7 @@ export default {
.large-width{
width: 100vw !important;
- left: 0 !important;
+ inset-inline-start: 0 !important;
}
.pagination-items{
@@ -479,7 +479,7 @@ export default {
// white-space: nowrap;
td, th {
- padding-right: 8px;
+ padding-inline-end: 8px;
max-width: 500px;
}
@@ -492,8 +492,7 @@ export default {
}
td:not(:first-child), th:not(:first-child) {
- padding-right: 8px;
- padding-left: 8px;
+ padding-inline: 8px;
}
tr {
@@ -520,7 +519,7 @@ export default {
tbody {
td {
- text-align: left;
+ text-align: start;
vertical-align: middle;
border: 1px solid var(--color-border-dark);
}
@@ -574,7 +573,7 @@ export default {
.icon-loading-inline {
position: absolute;
- right: 8px;
+ inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
}
@@ -586,9 +585,8 @@ export default {
tr>th.sticky:first-child,tr>td.sticky:first-child {
position: sticky;
- left: 0;
- padding-left: calc(var(--default-grid-baseline) * 4);
- padding-right: calc(var(--default-grid-baseline) * 4);
+ inset-inline-start: 0;
+ padding-inline: calc(var(--default-grid-baseline) * 4);
width: 60px;
background-color: inherit;
z-index: 5;
@@ -596,10 +594,10 @@ export default {
tr>th.sticky:last-child,tr>td.sticky:last-child {
position: sticky;
- right: 0;
+ inset-inline-end: 0;
width: 55px;
background-color: inherit;
- padding-right: 16px;
+ padding-inline-end: 16px;
}
tr>td.sticky:last-child {
diff --git a/src/shared/components/ncTable/sections/Options.vue b/src/shared/components/ncTable/sections/Options.vue
index b988a9c7f7..1e4ca0a513 100644
--- a/src/shared/components/ncTable/sections/Options.vue
+++ b/src/shared/components/ncTable/sections/Options.vue
@@ -184,7 +184,7 @@ export default {
position: -webkit-sticky; /* Safari */
position: sticky;
top: 90px;
- left: 0;
+ inset-inline-start: 0;
}
.selected-rows-option {
@@ -196,7 +196,7 @@ export default {
}
.add-padding-left {
- padding-left: calc(var(--default-grid-baseline) * 1);
+ padding-inline-start: calc(var(--default-grid-baseline) * 1);
}
:deep(.counter-bubble__counter) {
@@ -206,7 +206,7 @@ export default {
.actionButtonsLeft {
display: inline-flex;
align-items: center;
- padding-left: calc(var(--default-grid-baseline) * 1);
+ padding-inline-start: calc(var(--default-grid-baseline) * 1);
}
:deep(.actionButtonsLeft button) {
@@ -215,7 +215,7 @@ export default {
}
.searchAndFilter {
- margin-left: calc(var(--default-grid-baseline) * 3);
+ margin-inline-start: calc(var(--default-grid-baseline) * 3);
width: auto;
min-width: 100px;
}
diff --git a/src/styles/smart-picker.scss b/src/styles/smart-picker.scss
index a57b167c36..cad2705227 100644
--- a/src/styles/smart-picker.scss
+++ b/src/styles/smart-picker.scss
@@ -34,8 +34,7 @@
th, td {
border: none !important;
width: 50%;
- padding-left: calc(var(--default-grid-baseline) * 2);
- padding-right: calc(var(--default-grid-baseline) * 2);
+ padding-inline: calc(var(--default-grid-baseline) * 2);
}
}
@@ -43,11 +42,11 @@
display: flex;
> span {
- padding-right: calc(var(--default-grid-baseline) * 6);
+ padding-inline-end: calc(var(--default-grid-baseline) * 6);
}
label .material-design-icon {
- padding-right: calc(var(--default-grid-baseline) * 1);
+ padding-inline-end: calc(var(--default-grid-baseline) * 1);
}
}
@@ -64,8 +63,7 @@
width: 100%;
.selection {
- margin-left: auto;
- margin-right: auto;
+ margin-inline: auto;
width: 550px;
}
}
diff --git a/src/views/ContentReferenceWidget.vue b/src/views/ContentReferenceWidget.vue
index 64d5c8d8bc..b060b8a54c 100644
--- a/src/views/ContentReferenceWidget.vue
+++ b/src/views/ContentReferenceWidget.vue
@@ -218,7 +218,7 @@ export default {
& .header {
position: sticky;
top: 0;
- left: 0;
+ inset-inline-start: 0;
z-index: 1;
:where(.options) {
@@ -268,7 +268,7 @@ export default {
:where(.pagination-footer) {
width: unset !important;
- left: unset !important;
+ inset-inline-start: unset !important;
}
}
diff --git a/src/views/LinkReferenceWidget.vue b/src/views/LinkReferenceWidget.vue
index 559a3e67ed..2c53e33b58 100644
--- a/src/views/LinkReferenceWidget.vue
+++ b/src/views/LinkReferenceWidget.vue
@@ -96,7 +96,7 @@ export default {
}
&--image {
- margin-right: 12px;
+ margin-inline-end: 12px;
display: flex;
align-items: center;
.table-emoji {
diff --git a/src/views/partials/SearchAndSelectOption.vue b/src/views/partials/SearchAndSelectOption.vue
index 9da56eca89..a94dd602a4 100644
--- a/src/views/partials/SearchAndSelectOption.vue
+++ b/src/views/partials/SearchAndSelectOption.vue
@@ -102,7 +102,7 @@ export default {
display: flex;
align-items: center;
img, :deep(svg) {
- margin-right: calc(var(--default-grid-baseline) * 2);
+ margin-inline-end: calc(var(--default-grid-baseline) * 2);
}
}
diff --git a/src/views/sections/Search.vue b/src/views/sections/Search.vue
index 914cc6fd79..54bcd1936e 100644
--- a/src/views/sections/Search.vue
+++ b/src/views/sections/Search.vue
@@ -136,7 +136,7 @@ export default {
}
:deep(#smartpicker-select .vs__selected) {
- margin-left: 0;
+ margin-inline-start: 0;
}