diff --git a/src/assets/NcAppNavigationItem.scss b/src/assets/NcAppNavigationItem.scss index 514e70abd9..ad6c099138 100644 --- a/src/assets/NcAppNavigationItem.scss +++ b/src/assets/NcAppNavigationItem.scss @@ -75,7 +75,7 @@ &:not(.app-navigation-entry--editing) { .app-navigation-entry-link, .app-navigation-entry-button { - padding-right: $icon-margin; + padding-inline-end: $icon-margin; } } @@ -138,7 +138,7 @@ .app-navigation-entry { display: inline-flex; flex-wrap: wrap; - padding-left: $icon-size; + padding-inline-start: $icon-size; } } @@ -146,7 +146,7 @@ .app-navigation-entry__deleted { display: inline-flex; flex: 1 1 0; - padding-left: calc(var(--default-clickable-area) - $icon-margin) !important; + padding-inline-start: calc(var(--default-clickable-area) - $icon-margin) !important; .app-navigation-entry__deleted-description { position: relative; overflow: hidden; @@ -169,8 +169,8 @@ } /* counter */ .app-navigation-entry__counter-wrapper { - // Add slightly more space to the right of the counter - margin-right: calc(var(--default-grid-baseline) * 2); + // Add slightly more space to the end of the counter + margin-inline-end: calc(var(--default-grid-baseline) * 2); display: flex; align-items: center; flex: 0 1 auto; diff --git a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue index 1aeb2f1918..c76d427b1c 100644 --- a/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue +++ b/src/components/NcAppNavigationCaption/NcAppNavigationCaption.vue @@ -267,8 +267,8 @@ export default { box-shadow: none !important; flex-shrink: 1; // padding to align the name with the icon of app navigation items - padding: 0 calc(var(--default-grid-baseline, 4px) * 2) 0 calc(var(--default-grid-baseline, 4px) * 2); - padding-right: 0; + padding-block: 0; + padding-inline: calc(var(--default-grid-baseline, 4px) * 2) 0; margin-top: 0px; margin-bottom: var(--default-grid-baseline); } diff --git a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue index 7717815c00..b869a495e3 100644 --- a/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue +++ b/src/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue @@ -64,7 +64,7 @@ export default { position: relative; z-index: 105; // above a, under button color: var(--color-main-text); - right: 0; + inset-inline-end: 0; &--open { color: var(--color-main-text); &:hover{ diff --git a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue index 088d7ee9dc..d42713476f 100644 --- a/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue +++ b/src/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue @@ -166,7 +166,7 @@ export default { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; - padding-left: 7px; + padding-inline-start: 7px; font-size: 14px; } diff --git a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue index e4ac5af543..f4bc6253f3 100644 --- a/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue +++ b/src/components/NcAppNavigationSettings/NcAppNavigationSettings.vue @@ -93,11 +93,11 @@ export default { box-shadow: none; border: 0; border-radius: var(--body-container-radius); - text-align: left; + text-align: start; font-weight: normal; font-size: 100%; color: var(--color-main-text); - padding-right: 14px; + padding-inline-end: 14px; line-height: var(--default-clickable-area); &:hover, diff --git a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue index 0ca13e0eaa..e5d8ba8144 100644 --- a/src/components/NcRichContenteditable/NcAutoCompleteResult.vue +++ b/src/components/NcRichContenteditable/NcAutoCompleteResult.vue @@ -134,7 +134,7 @@ export default { --auto-complete-result-status-icon-position: calc(var(--auto-complete-result-avatar-size) / 2 * (1 - 1 / sqrt(2)) - var(--auto-complete-result-status-icon-size) / 2); box-sizing: border-box; position: absolute; - right: var(--auto-complete-result-status-icon-position); + inset-inline-end: var(--auto-complete-result-status-icon-position); bottom: var(--auto-complete-result-status-icon-position); height: var(--auto-complete-result-status-icon-size); width: var(--auto-complete-result-status-icon-size); diff --git a/src/components/NcRichContenteditable/NcMentionBubble.vue b/src/components/NcRichContenteditable/NcMentionBubble.vue index 7151bdb9e6..e129c59fb3 100644 --- a/src/components/NcRichContenteditable/NcMentionBubble.vue +++ b/src/components/NcRichContenteditable/NcMentionBubble.vue @@ -121,8 +121,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding; height: $bubble-height ; -webkit-user-select: none; user-select: none; - padding-right: $bubble-padding * 3; - padding-left: $bubble-padding; + padding-inline: $bubble-padding $bubble-padding * 3; border-radius: math.div($bubble-height, 2); background-color: var(--color-background-dark); } @@ -145,7 +144,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding; &__title { overflow: hidden; - margin-left: $bubble-padding; + margin-inline-start: $bubble-padding; white-space: nowrap; text-overflow: ellipsis; // Put title in ::before so it is not selectable @@ -158,7 +157,7 @@ $bubble-avatar-size: $bubble-height - 2 * $bubble-padding; &__select { position: absolute; z-index: -1; - left: -100vw; + inset-inline-start: -100vw; width: 1px; height: 1px; overflow: hidden; diff --git a/src/components/NcUserBubble/NcUserBubble.vue b/src/components/NcUserBubble/NcUserBubble.vue index aa8801c9c4..e20797316f 100644 --- a/src/components/NcUserBubble/NcUserBubble.vue +++ b/src/components/NcUserBubble/NcUserBubble.vue @@ -273,7 +273,7 @@ export default { borderRadius: this.size / 2 + 'px', }, avatar: { - marginLeft: this.margin + 'px', + marginInlineStart: this.margin + 'px', }, } }, @@ -321,8 +321,8 @@ export default { } > :last-child { - // border radius left padding - padding-right: 8px; + // border radius end padding + padding-inline-end: 8px; } } @@ -339,8 +339,8 @@ export default { &__name, &__secondary { // proper spacing between avatar, name & slot - padding: 0; - padding-left: 4px; + padding-block: 0; + padding-inline: 4px 0; } }