kodev-org
/
vikunja
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: convert all css properties to logical

This commit is contained in:
kolaente 2025-08-02 10:29:21 +02:00
parent 654e397638
commit 16f7fa087a
89 changed files with 239 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/base/BasePagination.vue
View File

@ -77,7 +77,7 @@ const pages = computed(() => createPagination(props.totalPages, props.currentPag
<style lang="scss" scoped>
.pagination {
padding-bottom: 1rem;
padding-block-end: 1rem;
}
.pagination-previous,
@ -90,7 +90,7 @@ const pages = computed(() => createPagination(props.totalPages, props.currentPag
.pagination-list {
&, & li {
margin-top: 0;
margin-block-start: 0;
}
}
</style>

8
frontend/src/components/date/DatepickerWithRange.vue
View File

@ -227,7 +227,7 @@ const buttonText = computed<string>(() => {
:deep(.popup) {
z-index: 10;
margin-top: 1rem;
margin-block-start: 1rem;
border-radius: $radius;
border: 1px solid var(--grey-200);
background-color: var(--white);
@ -253,7 +253,7 @@ const buttonText = computed<string>(() => {
.flatpickr-container {
width: 70%;
border-left: 1px solid var(--grey-200);
border-inline-start: 1px solid var(--grey-200);
padding: 1rem;
font-size: .9rem;
@ -282,13 +282,13 @@ const buttonText = computed<string>(() => {
width: 30%;
display: flex;
flex-direction: column;
padding-top: .5rem;
padding-block-start: .5rem;
overflow-y: scroll;
button {
display: block;
width: 100%;
text-align: left;
text-align: start;
padding: .5rem 1rem;
transition: $transition;
font-size: .9rem;

8
frontend/src/components/date/DatepickerWithValues.vue
View File

@ -173,7 +173,7 @@ const customRangeActive = computed<boolean>(() => {
:deep(.popup) {
z-index: 10;
margin-top: 1rem;
margin-block-start: 1rem;
border-radius: $radius;
border: 1px solid var(--grey-200);
background-color: var(--white);
@ -199,7 +199,7 @@ const customRangeActive = computed<boolean>(() => {
.flatpickr-container {
width: 70%;
border-left: 1px solid var(--grey-200);
border-inline-start: 1px solid var(--grey-200);
padding: 1rem;
font-size: .9rem;
@ -228,13 +228,13 @@ const customRangeActive = computed<boolean>(() => {
width: 30%;
display: flex;
flex-direction: column;
padding-top: .5rem;
padding-block-start: .5rem;
overflow-y: scroll;
button {
display: block;
width: 100%;
text-align: left;
text-align: start;
padding: .5rem 1rem;
transition: $transition;
font-size: .9rem;

12
frontend/src/components/home/ContentAuth.vue
View File

@ -164,7 +164,7 @@ projectStore.loadAllProjects()
min-height: calc(100vh - 65px);
@media screen and (max-width: $tablet) {
padding-top: $navbar-height;
padding-block-start: $navbar-height;
}
}
@ -181,8 +181,8 @@ projectStore.loadAllProjects()
}
@media screen and (max-width: $tablet) {
margin-left: 0;
margin-right: 0;
margin-inline-start: 0;
margin-inline-end: 0;
min-height: calc(100vh - 4rem);
}
@ -192,13 +192,13 @@ projectStore.loadAllProjects()
&.is-menu-enabled {
@media screen and (min-width: $tablet) {
margin-left: $navbar-width;
margin-inline-start: $navbar-width;
}
[dir="rtl"] & {
@media screen and (min-width: $tablet) {
margin-left: 0;
margin-right: $navbar-width;
margin-inline-start: 0;
margin-inline-end: $navbar-width;
}
}
}

2
frontend/src/components/home/ContentLinkShare.vue
View File

@ -19,7 +19,7 @@
>
{{ currentProject?.title === '' ? $t('misc.loading') : currentProject?.title }}
</h1>
<div class="box has-text-left view">
<div class="box has-text-start view">
<RouterView />
<PoweredByLink utm-medium="link_share" />
</div>

6
frontend/src/components/home/Navigation.vue
View File

@ -141,7 +141,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
padding-inline-start: 1rem;
margin-inline-end: 1rem;
margin-bottom: 1rem;
margin-block-end: 1rem;
@media screen and (min-width: $tablet) {
display: none;
@ -193,12 +193,12 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
display: inline-block;
.icon {
padding-bottom: .25rem;
padding-block-end: .25rem;
}
}
}
.menu + .menu {
padding-top: math.div($navbar-padding, 2);
padding-block-start: math.div($navbar-padding, 2);
}
</style>

4
frontend/src/components/home/PoweredByLink.vue
View File

@ -25,8 +25,8 @@ const computedUrl = computed(() => `${poweredByUrl}&utm_medium=${props.utmMedium
color: var(--grey-300);
text-align: center;
display: block;
padding-top: 1rem;
padding-bottom: 1rem;
padding-block-start: 1rem;
padding-block-end: 1rem;
font-size: .8rem;
}
</style>

2
frontend/src/components/home/ProjectsNavigationItem.vue
View File

@ -173,7 +173,7 @@ const childProjects = computed(() => {
display: flex;
align-items: center;
justify-content: flex-start;
margin-right: .25rem;
margin-inline-end: .25rem;
flex-shrink: 0;
.color-bubble, .icon {

4
frontend/src/components/input/AutocompleteDropdown.vue
View File

@ -197,7 +197,7 @@ function onUpdateField(e) {
z-index: 100;
max-width: 100%;
min-width: 100%;
margin-top: -2px;
margin-block-start: -2px;
button {
width: 100%;
@ -207,7 +207,7 @@ function onUpdateField(e) {
font-size: .9rem;
width: 100%;
color: var(--grey-800);
text-align: left;
text-align: start;
box-shadow: none;
text-transform: none;
font-family: $family-sans-serif;

2
frontend/src/components/input/Button.vue
View File

@ -90,7 +90,7 @@ const variantClass = computed(() => VARIANT_CLASS_MAP[props.variant])
}
&.fullheight {
padding-right: 7px;
padding-inline-end: 7px;
height: 100%;
}

2
frontend/src/components/input/ColorPicker.vue
View File

@ -55,7 +55,7 @@
<XButton
v-if="!isEmpty"
:disabled="isEmpty"
class="is-small ml-2"
class="is-small ms-2"
:shadow="false"
variant="secondary"
@click="reset"

2
frontend/src/components/input/DatepickerInline.vue
View File

@ -240,7 +240,7 @@ function getWeekdayFromStringInterval(dateString: string) {
font-size: .85rem;
display: flex;
justify-content: space-between;
padding-right: .25rem;
padding-inline-end: .25rem;
.weekday {
color: var(--text-light);

6
frontend/src/components/input/FancyCheckbox.vue
View File

@ -40,8 +40,8 @@ const emit = defineEmits<{
<style lang="scss" scoped>
.fancy-checkbox {
display: inline-block;
padding-right: 5px;
padding-top: 3px;
padding-inline-end: 5px;
padding-block-start: 3px;
&.is-block {
display: block;
@ -52,7 +52,7 @@ const emit = defineEmits<{
.fancy-checkbox__content {
font-size: 0.8rem;
vertical-align: top;
padding-left: .5rem;
padding-inline-start: .5rem;
}
.fancy-checkbox__icon:deep() {

8
frontend/src/components/input/Multiselect.vue
View File

@ -28,7 +28,7 @@
>
<span
:key="`item${key}`"
class="tag ml-2 mt-2"
class="tag ms-2 mt-2"
>
{{ label !== '' ? item[label] : item }}
<BaseButton
@ -484,7 +484,7 @@ function focus() {
max-width: 250px;
input {
padding-left: 0;
padding-inline-start: 0;
}
}
@ -529,7 +529,7 @@ function focus() {
.search-result-button {
background: transparent;
text-align: left;
text-align: start;
box-shadow: none;
border-radius: 0;
text-transform: none;
@ -572,7 +572,7 @@ function focus() {
font-size: .75rem;
color: transparent;
transition: color $transition;
padding-left: .5rem;
padding-inline-start: .5rem;
}
.has-removal-button {

6
frontend/src/components/input/Reactions.vue
View File

@ -174,8 +174,8 @@ async function toggleReaction(value: string) {
<style scoped lang="scss">
.reaction-button {
margin-right: .25rem;
margin-bottom: .25rem;
margin-inline-end: .25rem;
margin-block-end: .25rem;
padding: .175rem .5rem .15rem;
border: 1px solid var(--grey-400);
background: var(--grey-100);
@ -191,6 +191,6 @@ async function toggleReaction(value: string) {
.emoji-picker {
position: absolute;
z-index: 99;
margin-top: .5rem;
margin-block-start: .5rem;
}
</style>

2
frontend/src/components/input/SimpleButton.vue
View File

@ -17,7 +17,7 @@ import BaseButton from '@/components/base/BaseButton.vue'
display: block;
margin: .1rem 0;
width: 100%;
text-align: left;
text-align: start;
&:hover {
background: var(--white);

4
frontend/src/components/input/editor/CommandsList.vue
View File

@ -111,7 +111,7 @@ export default {
align-items: center;
margin: 0;
width: 100%;
text-align: left;
text-align: start;
background: transparent;
border-radius: $radius;
border: 0;
@ -129,7 +129,7 @@ export default {
height: 2rem;
border: 1px solid var(--grey-300);
padding: .5rem;
margin-right: .5rem;
margin-inline-end: .5rem;
border-radius: $radius;
color: var(--grey-700);
}

14
frontend/src/components/input/editor/EditorToolbar.vue
View File

@ -397,9 +397,9 @@ function setLink(event) {
flex-wrap: wrap;
> * + * {
border-left: 1px solid var(--grey-200);
margin-left: 6px;
padding-left: 6px;
border-inline-start: 1px solid var(--grey-200);
margin-inline-start: 6px;
padding-inline-start: 6px;
}
}
@ -411,7 +411,7 @@ function setLink(event) {
color: var(--grey-700);
transition: all $transition;
background: transparent;
margin-right: .25rem;
margin-inline-end: .25rem;
&:hover {
background: var(--grey-100);
@ -432,11 +432,11 @@ function setLink(event) {
}
.editor-toolbar__table-buttons {
margin-top: .5rem;
margin-block-start: .5rem;
> .editor-toolbar__button {
margin-right: .5rem;
margin-bottom: .5rem;
margin-inline-end: .5rem;
margin-block-end: .5rem;
padding: 0 .25rem;
border: 1px solid var(--grey-400);
font-size: .75rem;

24
frontend/src/components/input/editor/TipTap.vue
View File

@ -782,7 +782,7 @@ watch(
}
> * + * {
margin-top: 0.75em;
margin-block-start: 0.75em;
}
ul,
@ -882,8 +882,8 @@ watch(
}
blockquote {
padding-left: 1rem;
border-left: 2px solid rgba(#0d0d0d, 0.1);
padding-inline-start: 1rem;
border-inline-start: 2px solid rgba(#0d0d0d, 0.1);
}
hr {
@ -913,13 +913,13 @@ watch(
position: relative;
> * {
margin-bottom: 0;
margin-block-end: 0;
}
}
th {
font-weight: bold;
text-align: left;
text-align: start;
background-color: var(--grey-200);
}
@ -953,15 +953,15 @@ watch(
// Lists
ul {
margin-left: .5rem;
margin-top: 0 !important;
margin-inline-start: .5rem;
margin-block-start: 0 !important;
li {
margin-top: 0;
margin-block-start: 0;
}
p {
margin-bottom: 0 !important;
margin-block-end: 0 !important;
}
}
}
@ -979,7 +979,7 @@ watch(
ul[data-type='taskList'] {
list-style: none;
padding: 0;
margin-left: 0;
margin-inline-start: 0;
li[data-checked='true'] {
color: var(--grey-500);
@ -988,11 +988,11 @@ ul[data-type='taskList'] {
li {
display: flex;
margin-top: 0.25rem;
margin-block-start: 0.25rem;
> label {
flex: 0 0 auto;
margin-right: 0.5rem;
margin-inline-end: 0.5rem;
user-select: none;
}

4
frontend/src/components/misc/ApiConfig.vue
View File

@ -127,12 +127,12 @@ async function setApiUrl() {
<style lang="scss" scoped>
.api-config {
margin-bottom: .75rem;
margin-block-end: .75rem;
}
.api-url-info {
font-size: .9rem;
text-align: right;
text-align: end;
}
.url {

2
frontend/src/components/misc/Card.vue
View File

@ -70,7 +70,7 @@ defineEmits<{
.card {
background-color: var(--white);
border-radius: $radius;
margin-bottom: 1rem;
margin-block-end: 1rem;
border: 1px solid var(--card-border-color);
box-shadow: var(--shadow-sm);

4
frontend/src/components/misc/CreateEdit.vue
View File

@ -8,7 +8,7 @@
:title="title"
:shadow="false"
:padding="false"
class="has-text-left"
class="has-text-start"
:loading="loading"
:show-close="true"
@close="$router.back()"
@ -38,7 +38,7 @@
variant="primary"
:icon="primaryIcon"
:disabled="primaryDisabled || loading"
class="ml-2"
class="ms-2"
@click.prevent.stop="primary"
>
{{ primaryLabel || $t('misc.create') }}

6
frontend/src/components/misc/Dropdown.vue
View File

@ -93,7 +93,7 @@ onClickOutside(dropdown, (e) => {
.dropdown-menu {
min-width: 12rem;
padding-top: 4px;
padding-block-start: 4px;
position: absolute;
top: 100%;
z-index: 20;
@ -105,8 +105,8 @@ onClickOutside(dropdown, (e) => {
.dropdown-content {
background-color: var(--scheme-main);
border-radius: $radius;
padding-bottom: .5rem;
padding-top: .5rem;
padding-block-end: .5rem;
padding-block-start: .5rem;
box-shadow: var(--shadow-md);
}

2
frontend/src/components/misc/DropdownItem.vue
View File

@ -60,7 +60,7 @@ defineProps<DropDownItemProps>()
}
.icon {
padding-right: .5rem;
padding-inline-end: .5rem;
color: var(--grey-300);
}

4
frontend/src/components/misc/Legal.vue
View File

@ -29,8 +29,8 @@ const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
<style lang="scss" scoped>
.legal-links {
margin-top: 1rem;
text-align: right;
margin-block-start: 1rem;
text-align: end;
color: var(--grey-300);
font-size: 1rem;
}

2
frontend/src/components/misc/Message.vue
View File

@ -23,7 +23,7 @@ const props = withDefaults(defineProps<{
const TEXT_ALIGN_MAP = {
left: '',
center: 'has-text-centered',
right: 'has-text-right',
right: 'has-text-end',
} as const
export type TextAlignVariant = keyof typeof TEXT_ALIGN_MAP

4
frontend/src/components/misc/Modal.vue
View File

@ -205,7 +205,7 @@ $modal-width: 1024px;
z-index: 4600;
:deep(.card-content) {
text-align: left;
text-align: start;
.info {
font-style: italic;
@ -259,7 +259,7 @@ $modal-width: 1024px;
display: flex;
flex-direction: column;
justify-content: space-between;
margin-bottom: 0 !important;
margin-block-end: 0 !important;
}
}

2
frontend/src/components/misc/NoAuthWrapper.vue
View File

@ -77,7 +77,7 @@ useTitle(() => title.value)
place-items: center;
@media screen and (max-width: $fullhd) {
padding-bottom: 15rem;
padding-block-end: 15rem;
}
}

2
frontend/src/components/misc/Notification.vue
View File

@ -53,6 +53,6 @@
}
.buttons {
margin-top: 0.5rem;
margin-block-start: 0.5rem;
}
</style>

4
frontend/src/components/misc/Ready.vue
View File

@ -90,13 +90,13 @@ const baseStore = useBaseStore()
}
.logo {
margin-bottom: 1rem;
margin-block-end: 1rem;
width: 100px;
height: 100px;
}
.loader-container {
margin-right: 1rem;
margin-inline-end: 1rem;
&.is-loading::after {
border-left-color: var(--grey-400);

2
frontend/src/components/misc/User.vue
View File

@ -58,6 +58,6 @@ watch(() => [props.user, props.avatarSize], loadAvatar, { immediate: true })
.avatar {
border-radius: 100%;
vertical-align: middle;
margin-right: .5rem;
margin-inline-end: .5rem;
}
</style>

8
frontend/src/components/misc/keyboard-shortcuts/index.vue
View File

@ -64,11 +64,11 @@ function close() {
<style scoped>
.keyboard-shortcuts {
text-align: left;
text-align: start;
}
.message:not(:last-child) {
margin-bottom: 1rem;
margin-block-end: 1rem;
}
.message-body {
@ -81,11 +81,11 @@ function close() {
}
.shortcut-title {
margin-bottom: .5rem;
margin-block-end: .5rem;
}
.shortcut-keys {
justify-content: end;
margin-bottom: .5rem;
margin-block-end: .5rem;
}
</style>

8
frontend/src/components/notifications/Notifications.vue
View File

@ -44,12 +44,12 @@
<div>
<span
v-if="n.notification.doer"
class="has-text-weight-bold mr-1"
class="has-text-weight-bold me-1"
>
{{ getDisplayName(n.notification.doer) }}
</span>
<BaseButton
class="has-text-left"
class="has-text-start"
@click="() => to(n, index)()"
>
{{ n.toText(userInfo) }}
@ -283,7 +283,7 @@ async function markAllRead() {
}
img {
margin-right: 0;
margin-inline-end: 0;
}
}
@ -292,7 +292,7 @@ async function markAllRead() {
}
&:last-child {
margin-bottom: .25rem;
margin-block-end: .25rem;
}
a {

8
frontend/src/components/project/ProjectWrapper.vue
View File

@ -103,7 +103,7 @@ function getViewTitle(view: IProjectView) {
<style lang="scss" scoped>
.switch-view-container {
min-height: $switch-view-height;
margin-bottom: 1rem;
margin-block-end: 1rem;
display: flex;
justify-content: space-between;
@ -132,7 +132,7 @@ function getViewTitle(view: IProjectView) {
transition: all 100ms;
&:not(:last-child) {
margin-right: .5rem;
margin-inline-end: .5rem;
}
&:hover {
@ -150,14 +150,14 @@ function getViewTitle(view: IProjectView) {
// FIXME: this should be in notification and set via a prop
.is-archived .notification.is-warning {
margin-bottom: 1rem;
margin-block-end: 1rem;
}
.project-title-print {
display: none;
font-size: 1.75rem;
text-align: center;
margin-bottom: .5rem;
margin-block-end: .5rem;
@media print {
display: block;

2
frontend/src/components/project/partials/FilterInput.vue
View File

@ -373,7 +373,7 @@ const blurDebounced = useDebounceFn(() => emit('blur'), 500)
button.filter-query__date_value {
border-radius: $radius;
position: absolute;
margin-top: calc((0.25em - 0.125rem) * -1);
margin-block-start: calc((0.25em - 0.125rem) * -1);
height: 1.75rem;
padding: 0;
border: 0;

2
frontend/src/components/project/partials/Filters.vue
View File

@ -37,7 +37,7 @@
>
<XButton
variant="secondary"
class="mr-2"
class="me-2"
:disabled="filterQuery === ''"
@click.prevent.stop="clearFiltersAndEmit"
>

2
frontend/src/components/project/partials/ProjectCard.vue
View File

@ -134,7 +134,7 @@ const textOnlyDescription = computed(() => {
line-height: var(--title-line-height);
color: var(--text);
width: 100%;
margin-bottom: 0;
margin-block-end: 0;
max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
overflow: hidden;
text-overflow: ellipsis;

2
frontend/src/components/project/partials/ProjectCardGrid.vue
View File

@ -75,6 +75,6 @@ const filteredProjects = computed(() => {
.project-grid-item {
display: grid;
margin-top: 0; // remove padding coming form .content li + li
margin-block-start: 0; // remove padding coming form .content li + li
}
</style>

12
frontend/src/components/project/views/ProjectGantt.vue
View File

@ -167,14 +167,14 @@ const flatPickerConfig = computed(() => ({
<style lang="scss" scoped>
.gantt-chart-container {
padding-bottom: 1rem;
padding-block-end: 1rem;
}
.gantt-options {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
margin-block-end: 1rem;
@media screen and (max-width: $tablet) {
flex-direction: column;
@ -191,18 +191,18 @@ const flatPickerConfig = computed(() => ({
}
.field {
margin-bottom: 0;
margin-block-end: 0;
width: 33%;
&:not(:last-child) {
padding-right: .5rem;
padding-inline-end: .5rem;
}
@media screen and (max-width: $tablet) {
width: 100%;
max-width: 100%;
margin-top: .5rem;
padding-right: 0 !important;
margin-block-start: .5rem;
padding-inline-end: 0 !important;
}
&, .input {

8
frontend/src/components/project/views/ProjectKanban.vue
View File

@ -46,7 +46,7 @@
<span
v-if="bucket.id !== 0 && view?.doneBucketId === bucket.id"
v-tooltip="$t('project.kanban.doneBucketHint')"
class="icon is-small has-text-success mr-2"
class="icon is-small has-text-success me-2"
>
<Icon icon="check-double" />
</span>
@ -875,11 +875,11 @@ $filter-container-height: '1rem - #{$switch-view-height}';
padding: .25rem .5rem;
&:first-of-type {
padding-top: .5rem;
padding-block-start: .5rem;
}
&:last-of-type {
padding-bottom: .5rem;
padding-block-end: .5rem;
}
}
@ -912,7 +912,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
transform: rotate(90deg) translateY(-100%);
transform-origin: top left;
// Using negative margins instead of translateY here to make all other buckets fill the empty space
margin-right: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
margin-inline-end: calc((#{$bucket-width} - #{$bucket-header-height} - #{$bucket-right-margin}) * -1);
cursor: pointer;
.tasks, .bucket-footer {

6
frontend/src/components/project/views/ProjectList.vue
View File

@ -357,7 +357,7 @@ onBeforeUnmount(() => {
.handle {
opacity: 1;
transition: opacity $transition;
margin-right: .25rem;
margin-inline-end: .25rem;
cursor: grab;
}
@ -373,10 +373,10 @@ onBeforeUnmount(() => {
}
.list-view {
padding-bottom: 1rem;
padding-block-end: 1rem;
:deep(.card) {
margin-bottom: 0;
margin-block-end: 0;
}
}
</style>

4
frontend/src/components/project/views/ProjectTable.vue
View File

@ -12,7 +12,7 @@
<XButton
icon="th"
variant="secondary"
class="mr-2"
class="me-2"
@click.prevent.stop="toggle()"
>
{{ $t('project.table.columns') }}
@ -219,7 +219,7 @@
v-if="t.assignees.length > 0"
:assignees="t.assignees"
:avatar-size="28"
class="ml-1"
class="ms-1"
:inline="true"
/>
</td>

6
frontend/src/components/project/views/ViewEditForm.vue
View File

@ -285,7 +285,7 @@ function handleBubbleSave() {
>
<XButton
variant="tertiary"
class="mr-2"
class="me-2"
@click="emit('cancel')"
>
{{ $t('misc.cancel') }}
@ -308,12 +308,12 @@ function handleBubbleSave() {
background: transparent;
border: none;
color: var(--danger);
padding-right: .75rem;
padding-inline-end: .75rem;
cursor: pointer;
}
&-form {
margin-bottom: .5rem;
margin-block-end: .5rem;
padding: .5rem;
border: 1px solid var(--grey-200);
border-radius: $radius;

12
frontend/src/components/quick-actions/QuickActions.vue
View File

@ -613,12 +613,12 @@ function reset() {
font-size: 1.5rem;
@media screen and (max-width: $tablet) {
padding-right: .25rem;
padding-inline-end: .25rem;
}
}
&.has-active-cmd .input {
padding-left: .5rem;
padding-inline-start: .5rem;
}
.close {
@ -633,13 +633,13 @@ function reset() {
.active-cmd {
font-size: 1.25rem;
margin-left: .5rem;
margin-inline-start: .5rem;
background-color: var(--grey-100);
color: var(--grey-800);
}
.results {
text-align: left;
text-align: start;
width: 100%;
color: var(--grey-800);
}
@ -656,7 +656,7 @@ function reset() {
width: 100%;
background: transparent;
color: var(--grey-800);
text-align: left;
text-align: start;
box-shadow: none;
border-radius: 0;
text-transform: none;
@ -679,7 +679,7 @@ function reset() {
.saved-filter-icon {
font-size: .75rem;
width: .75rem;
margin-right: .25rem;
margin-inline-end: .25rem;
color: var(--grey-400)
}

2
frontend/src/components/sharing/LinkSharing.vue
View File

@ -4,7 +4,7 @@
{{ $t('project.share.links.title') }}
<span
v-tooltip="$t('project.share.links.explanation')"
class="is-size-7 has-text-grey is-italic ml-3"
class="is-size-7 has-text-grey is-italic ms-3"
>
{{ $t('project.share.links.what') }}
</span>

2
frontend/src/components/sharing/UserTeam.vue
View File

@ -97,7 +97,7 @@
<div class="select">
<select
v-model="selectedRight[s.id]"
class="mr-2"
class="me-2"
@change="toggleType(s)"
>
<option

2
frontend/src/components/tasks/AddTask.vue
View File

@ -285,7 +285,7 @@ defineExpose({
.task-add,
// overwrite bulma styles
.task-add .add-task__field {
margin-bottom: 0;
margin-block-end: 0;
}
.add-task-button {

4
frontend/src/components/tasks/GanttChart.vue
View File

@ -233,7 +233,7 @@ const dateIsToday = computed(() => (date: Date) => {
.g-upper-timeunit {
font-weight: bold;
border-right: 1px solid var(--grey-200);
border-inline-end: 1px solid var(--grey-200);
padding: .5rem 0;
}
@ -282,7 +282,7 @@ const dateIsToday = computed(() => (date: Date) => {
height: 75% !important;
opacity: .75 !important;
border-radius: $radius !important;
margin-top: 4px;
margin-block-start: 4px;
}
}
</style>

2
frontend/src/components/tasks/TaskForm.vue
View File

@ -73,7 +73,7 @@ async function createTask() {
max-width: 450px;
.input {
margin-right: .7rem;
margin-inline-end: .7rem;
font-size: .8rem;
}

6
frontend/src/components/tasks/partials/AssigneeList.vue
View File

@ -59,7 +59,7 @@ defineEmits<{
}
&:hover .assignee:not(:first-child) {
margin-left: -0.5rem;
margin-inline-start: -0.5rem;
}
}
@ -68,12 +68,12 @@ defineEmits<{
transition: all $transition;
&:not(:first-child) {
margin-left: -1rem;
margin-inline-start: -1rem;
}
:deep(.user img) {
border: 2px solid var(--white);
margin-right: 0;
margin-inline-end: 0;
}
}

8
frontend/src/components/tasks/partials/Attachments.vue
View File

@ -301,7 +301,7 @@ async function setCoverImage(attachment: IAttachment | null) {
}
.files {
margin-bottom: 1rem;
margin-block-end: 1rem;
}
.attachment {
@ -329,7 +329,7 @@ async function setCoverImage(attachment: IAttachment | null) {
font-weight: bold;
height: 2rem;
color: var(--text);
text-align: left;
text-align: start;
}
.info {
@ -339,7 +339,7 @@ async function setCoverImage(attachment: IAttachment | null) {
flex-direction: column;
p {
margin-bottom: 0;
margin-block-end: 0;
display: flex;
> span,
@ -472,7 +472,7 @@ async function setCoverImage(attachment: IAttachment | null) {
.is-task-cover {
background: var(--primary);
color: var(--white);
margin-left: .25rem;
margin-inline-start: .25rem;
padding: .25rem .35rem;
border-radius: 4px;
font-size: .75rem;

4
frontend/src/components/tasks/partials/ChecklistSummary.vue
View File

@ -64,14 +64,14 @@ const label = computed(() => {
color: var(--grey-500);
display: inline-flex;
align-items: center;
padding-left: .5rem;
padding-inline-start: .5rem;
font-size: .9rem;
}
svg {
transform: rotate(-90deg);
transition: stroke-dashoffset 0.35s;
margin-right: .25rem;
margin-inline-end: .25rem;
}
circle {

14
frontend/src/components/tasks/partials/Comments.vue
View File

@ -16,9 +16,9 @@
<div class="comments">
<span
v-if="taskCommentService.loading && saving === null && !creating"
class="is-flex is-align-items-center my-4 ml-2"
class="is-flex is-align-items-center my-4 ms-2"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('task.comment.loading') }}
</span>
<div
@ -79,7 +79,7 @@
"
class="is-inline-flex"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('misc.saving') }}
</span>
<span
@ -153,7 +153,7 @@
v-if="taskCommentService.loading && creating"
class="is-inline-flex"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('task.comment.creating') }}
</span>
</CustomTransition>
@ -460,8 +460,8 @@ function getCommentUrl(commentId: string) {
display: block;
width: 20px;
height: 20px;
padding-right: 0;
margin-right: .5rem;
padding-inline-end: 0;
margin-inline-end: .5rem;
}
@media screen and (min-width: $tablet) {
@ -498,6 +498,6 @@ function getCommentUrl(commentId: string) {
}
.comments-container {
scroll-margin-top: 4rem;
scroll-margin-block-start: 4rem;
}
</style>

2
frontend/src/components/tasks/partials/CreatedUpdated.vue
View File

@ -64,6 +64,6 @@ const doneFormatted = computed(() => formatDateLong(props.task.doneAt))
.created {
font-size: .75rem;
color: var(--grey-500);
text-align: right;
text-align: end;
}
</style>

4
frontend/src/components/tasks/partials/Description.vue
View File

@ -10,7 +10,7 @@
v-if="loading && saving"
class="is-small is-inline-flex"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('misc.saving') }}
</span>
<span
@ -146,6 +146,6 @@ async function uploadCallback(files: File[] | FileList): Promise<string[]> {
.tiptap__task-description {
// The exact amount of pixels we need to make the description icon align with the buttons and the form inside the editor.
// The icon is not exactly the same length on all sides so we need to hack our way around it.
margin-left: 4px;
margin-inline-start: 4px;
}
</style>

2
frontend/src/components/tasks/partials/EditAssignees.vue
View File

@ -123,6 +123,6 @@ async function findUser(query: string) {
<style lang="scss">
.edit-assignees.has-assignees.multiselect .input {
padding-left: 0;
padding-inline-start: 0;
}
</style>

10
frontend/src/components/tasks/partials/Heading.vue
View File

@ -46,7 +46,7 @@
v-if="loading && saving"
class="is-inline-flex is-align-items-center"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('misc.saving') }}
</span>
<span
@ -55,7 +55,7 @@
>
<Icon
icon="check"
class="mr-2"
class="me-2"
/>
{{ $t('misc.saved') }}
</span>
@ -152,13 +152,13 @@ async function cancel(element: HTMLInputElement) {
}
.title {
margin-bottom: 0;
margin-block-end: 0;
}
.title.input {
// 1.8rem is the font-size, 1.125 is the line-height, .3rem padding everywhere, 1px border around the whole thing.
min-height: calc(1.8rem * 1.125 + .6rem + 2px);
margin-right: 0;
margin-inline-end: 0;
@media screen and (max-width: $tablet) {
margin: 0 -.3rem .5rem -.3rem; // the title has 0.3rem padding - this make the text inside of it align with the rest
@ -177,7 +177,7 @@ async function cancel(element: HTMLInputElement) {
.close {
font-size: 2rem;
margin-left: 0.5rem;
margin-inline-start: 0.5rem;
line-height: 1;
@media screen and (max-width: $tablet) {

20
frontend/src/components/tasks/partials/KanbanCard.vue
View File

@ -34,7 +34,7 @@
</template>
<span
v-if="showTaskPosition"
class="tw-text-red-600 tw-pl-2"
class="tw-text-red-600 tw-ps-2"
>
{{ task.position }}
</span>
@ -74,7 +74,7 @@
v-if="task.assignees.length > 0"
:assignees="task.assignees"
:avatar-size="24"
class="mr-1"
class="me-1"
/>
<ChecklistSummary
:task="task"
@ -248,7 +248,7 @@ $task-background: var(--white);
align-items: center;
.icon {
margin-right: .25rem;
margin-inline-end: .25rem;
}
&.overdue {
@ -266,18 +266,18 @@ $task-background: var(--white);
display: flex;
flex-wrap: wrap;
align-items: center;
margin-top: .25rem;
margin-block-start: .25rem;
:deep(.tag),
:deep(.checklist-summary),
.assignees,
.icon,
.priority-label {
margin-right: .25rem;
margin-inline-end: .25rem;
}
:deep(.checklist-summary) {
padding-left: 0;
padding-inline-start: 0;
}
.assignees {
@ -295,7 +295,7 @@ $task-background: var(--white);
// FIXME: should be in Labels.vue
:deep(.tag) {
margin-left: 0;
margin-inline-start: 0;
}
.priority-label {
@ -305,7 +305,7 @@ $task-background: var(--white);
.icon {
height: 1rem;
padding: 0 .25rem;
margin-top: 0;
margin-block-start: 0;
}
}
}
@ -325,7 +325,7 @@ $task-background: var(--white);
.task-id {
color: var(--grey-500);
font-size: .8rem;
margin-bottom: .25rem;
margin-block-end: .25rem;
display: flex;
}
@ -378,7 +378,7 @@ $task-background: var(--white);
}
.kanban-card__done {
margin-right: .25rem;
margin-inline-end: .25rem;
}
.task-progress {

2
frontend/src/components/tasks/partials/Label.vue
View File

@ -22,7 +22,7 @@ const {getLabelStyles} = useLabelStyles()
<style scoped lang="scss">
.tag {
& + & {
margin-left: 0.5rem;
margin-inline-start: 0.5rem;
}
}
</style>

4
frontend/src/components/tasks/partials/Labels.vue
View File

@ -29,8 +29,8 @@ const displayLabels = computed(() =>
display: inline;
:deep(.tag) {
margin-top: .125rem;
margin-bottom: .125rem;
margin-block-start: .125rem;
margin-block-end: .125rem;
}
}
</style>

2
frontend/src/components/tasks/partials/PriorityLabel.vue
View File

@ -67,6 +67,6 @@ const minimumPriority = computed(() => {
.icon {
vertical-align: top;
width: auto !important;
padding-right: .5rem;
padding-inline-end: .5rem;
}
</style>

6
frontend/src/components/tasks/partials/RelatedTasks.vue
View File

@ -23,7 +23,7 @@
v-if="taskRelationService.loading"
class="is-inline-flex"
>
<span class="loader is-inline-block mr-2" />
<span class="loader is-inline-block me-2" />
{{ $t('misc.saving') }}
</span>
<span
@ -388,7 +388,7 @@ async function toggleTaskDone(task: ITask) {
<style lang="scss" scoped>
.add-task-relation-button {
margin-top: -3rem;
margin-block-start: -3rem;
svg {
transition: transform $transition;
@ -462,6 +462,6 @@ async function toggleTaskDone(task: ITask) {
.task-done-checkbox {
padding: 0;
height: 18px; // The exact height of the checkbox in the container
margin-right: .75rem;
margin-inline-end: .75rem;
}
</style>

4
frontend/src/components/tasks/partials/Reminders.vue
View File

@ -116,7 +116,7 @@ function removeReminderByIndex(index: number) {
}
&::last-child {
margin-bottom: 0.75rem;
margin-block-end: 0.75rem;
}
}
@ -127,7 +127,7 @@ function removeReminderByIndex(index: number) {
.remove {
color: var(--danger);
vertical-align: top;
padding-left: .5rem;
padding-inline-start: .5rem;
line-height: 1;
}
</style>

4
frontend/src/components/tasks/partials/RepeatAfter.vue
View File

@ -54,7 +54,7 @@
v-if="task.repeatMode !== TASK_REPEAT_MODES.REPEAT_MODE_MONTH"
class="is-flex"
>
<p class="pr-4">
<p class="pe-4">
{{ $t('task.repeat.each') }}
</p>
<div class="field has-addons is-fullwidth">
@ -162,7 +162,7 @@ function setRepeatAfter(amount: number, type: IRepeatAfter['type']) {
<style lang="scss" scoped>
p {
padding-top: 6px;
padding-block-start: 6px;
}
.input {

16
frontend/src/components/tasks/partials/SingleTaskInProject.vue
View File

@ -420,7 +420,7 @@ defineExpose({
.dueDate {
display: inline-block;
margin-left: 5px;
margin-inline-start: 5px;
&:focus-visible {
box-shadow: none;
@ -447,16 +447,16 @@ defineExpose({
.avatar {
border-radius: 50%;
vertical-align: bottom;
margin-left: 5px;
margin-inline-start: 5px;
height: 27px;
width: 27px;
}
.project-task-icon {
margin-left: 6px;
margin-inline-start: 6px;
&:not(:first-of-type) {
margin-left: 8px;
margin-inline-start: 8px;
}
}
@ -503,8 +503,8 @@ defineExpose({
:deep(.fancy-checkbox) {
height: 18px;
padding-top: 0;
padding-right: .5rem;
padding-block-start: 0;
padding-inline-end: .5rem;
span {
display: none;
@ -522,7 +522,7 @@ defineExpose({
}
.show-project .parent-tasks {
padding-left: .25rem;
padding-inline-start: .25rem;
}
.remove {
@ -550,7 +550,7 @@ defineExpose({
}
.subtask-nested {
margin-left: 1.75rem;
margin-inline-start: 1.75rem;
}
:deep(.popup) {

18
frontend/src/components/tasks/partials/SingleTaskInlineReadonly.vue
View File

@ -5,7 +5,7 @@
v-if="showProject && typeof project !== 'undefined'"
v-tooltip="$t('task.detail.belongsToProject', {project: project.title})"
class="task-project"
:class="{'mr-2': task.hexColor !== ''}"
:class="{'me-2': task.hexColor !== ''}"
>
{{ project.title }}
</span>
@ -13,7 +13,7 @@
<ColorBubble
v-if="task.hexColor !== ''"
:color="getHexColor(task.hexColor)"
class="mr-1"
class="me-1"
/>
<PriorityLabel
@ -36,7 +36,7 @@
<Labels
v-if="task.labels.length > 0"
class="labels ml-2 mr-1"
class="labels ms-2 me-1"
:labels="task.labels"
/>
@ -44,7 +44,7 @@
v-if="task.assignees.length > 0"
:assignees="task.assignees"
:avatar-size="20"
class="ml-1"
class="ms-1"
:inline="true"
/>
@ -148,7 +148,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
.dueDate {
display: inline-block;
margin-left: 5px;
margin-inline-start: 5px;
}
.overdue {
@ -165,16 +165,16 @@ const project = computed(() => projectStore.projects[props.task.projectId])
.avatar {
border-radius: 50%;
vertical-align: bottom;
margin-left: .5rem;
margin-inline-start: .5rem;
height: 21px;
width: 21px;
}
.project-task-icon {
margin-left: 6px;
margin-inline-start: 6px;
&:not(:first-of-type) {
margin-left: 8px;
margin-inline-start: 8px;
}
}
@ -196,7 +196,7 @@ const project = computed(() => projectStore.projects[props.task.projectId])
span.parent-tasks {
color: var(--grey-500);
width: auto;
margin-left: .25rem;
margin-inline-start: .25rem;
}
}
</style>

2
frontend/src/styles/theme/form.scss
View File

@ -36,7 +36,7 @@
}
.select:after {
margin-top: -0.575rem;
margin-block-start: -0.575rem;
}
.select select {

2
frontend/src/styles/theme/loading.scss
View File

@ -34,7 +34,7 @@
width: 2rem;
height: 2rem;
margin-inline-start: calc(50% - 1rem);
margin-top: 1rem;
margin-block-start: 1rem;
border-width: 0.25rem;
}
}

2
frontend/src/styles/theme/theme.scss
View File

@ -69,7 +69,7 @@ h6 {
}
button.table {
margin-bottom: 0 !important;
margin-block-end: 0 !important;
}
.is-max-width-desktop {

2
frontend/src/views/Home.vue
View File

@ -92,6 +92,6 @@ function updateTaskKey() {
<style scoped lang="scss">
.show-tasks {
margin-top: 2rem;
margin-block-start: 2rem;
}
</style>

2
frontend/src/views/migrate/Migration.vue
View File

@ -48,7 +48,7 @@ const availableMigrators = computed(() => configStore.availableMigrators
display: inline-block;
width: 100px;
text-transform: capitalize;
margin-right: 1rem;
margin-inline-end: 1rem;
}
.migration-service-image {

4
frontend/src/views/migrate/MigrationHandler.vue
View File

@ -249,7 +249,7 @@ async function migrate() {
max-width: 400px;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-block-end: 2rem;
}
.logo {
@ -271,7 +271,7 @@ async function migrate() {
display: inline-block;
border-radius: 10px;
animation: wave 2s ease infinite;
margin-right: 5px;
margin-inline-end: 5px;
&:nth-child(1) {
animation-delay: 0;

6
frontend/src/views/project/ListProjects.vue
View File

@ -68,7 +68,7 @@ const projects = computed(() => {
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
margin-block-end: 1rem;
@media screen and (max-width: $tablet) {
flex-direction: column;
@ -88,7 +88,7 @@ const projects = computed(() => {
}
.project:not(:first-child) {
margin-top: 1rem;
margin-block-start: 1rem;
}
.project-title {
@ -104,6 +104,6 @@ const projects = computed(() => {
border-radius: 3px;
font-family: $vikunja-font;
background: var(--white-translucent);
margin-left: .5rem;
margin-inline-start: .5rem;
}
</style>

2
frontend/src/views/project/ProjectInfo.vue
View File

@ -11,7 +11,7 @@
>
<div
v-if="htmlDescription !== ''"
class="has-text-left"
class="has-text-start"
v-html="htmlDescription"
/>
<p

4
frontend/src/views/project/settings/ProjectSettingsBackground.vue
View File

@ -232,7 +232,7 @@ async function removeBackground() {
<style lang="scss" scoped>
.unsplash-credit {
text-align: right;
text-align: end;
font-size: .8rem;
}
@ -259,7 +259,7 @@ async function removeBackground() {
}
.image-search__result-item {
margin-top: 0; // FIXME: removes padding from .content
margin-block-start: 0; // FIXME: removes padding from .content
aspect-ratio: 16 / 10;
background-size: cover;
background-position: center;

8
frontend/src/views/project/settings/ProjectSettingsViews.vue
View File

@ -159,7 +159,7 @@ async function saveViewPosition(e) {
<tr>
<th>{{ $t('project.views.title') }}</th>
<th>{{ $t('project.views.kind') }}</th>
<th class="has-text-right">
<th class="has-text-end">
{{ $t('project.views.actions') }}
</th>
</tr>
@ -189,10 +189,10 @@ async function saveViewPosition(e) {
<template v-else>
<td>{{ v.title }}</td>
<td>{{ v.viewKind }}</td>
<td class="has-text-right actions">
<td class="has-text-end actions">
<XButton
v-if="isAdmin"
class="is-danger mr-2"
class="is-danger me-2"
icon="trash-alt"
@click="() => {
viewIdToDelete = v.id
@ -233,7 +233,7 @@ async function saveViewPosition(e) {
<style scoped>
.handle {
cursor: grab;
margin-left: .25rem;
margin-inline-start: .25rem;
}
.actions {

2
frontend/src/views/project/settings/ProjectSettingsWebhooks.vue
View File

@ -272,7 +272,7 @@ function validateSelectedEvents() {
<style lang="scss" scoped>
.available-events-check {
margin-right: .5rem;
margin-inline-end: .5rem;
width: 12.5rem;
}
</style>

4
frontend/src/views/tasks/ShowTasks.vue
View File

@ -1,7 +1,7 @@
<template>
<div
v-cy="'showTasks'"
class="is-max-width-desktop has-text-left"
class="is-max-width-desktop has-text-start"
>
<h3 class="mb-2 title">
{{ pageTitle }}
@ -24,7 +24,7 @@
</DatepickerWithRange>
<FancyCheckbox
:model-value="showNulls"
class="mr-2"
class="me-2"
@update:modelValue="setShowNulls"
>
{{ $t('task.show.noDates') }}

22
frontend/src/views/tasks/TaskDetailView.vue
View File

@ -961,15 +961,15 @@ function setRelatedTasksActive() {
.task-view-container {
// simulate sass lighten($primary, 30) by increasing lightness 30% to 73%
--primary-light: hsla(var(--primary-h), var(--primary-s), 73%, var(--primary-a));
padding-bottom: 0;
padding-block-end: 0;
@media screen and (min-width: $desktop) {
padding-bottom: 1rem;
padding-block-end: 1rem;
}
}
.task-view {
padding-top: 1rem;
padding-block-start: 1rem;
padding-inline: .5rem;
background-color: var(--site-background);
@ -1000,7 +1000,7 @@ function setRelatedTasksActive() {
.subtitle {
color: var(--grey-500);
margin-bottom: 1rem;
margin-block-end: 1rem;
a {
color: var(--grey-800);
@ -1023,7 +1023,7 @@ h3 .button {
.remove {
color: var(--danger);
vertical-align: middle;
padding-left: .5rem;
padding-inline-start: .5rem;
line-height: 1;
}
@ -1038,7 +1038,7 @@ h3 .button {
display: block;
margin: .1rem 0;
width: 100%;
text-align: left;
text-align: start;
&:hover {
background: var(--white);
@ -1051,9 +1051,9 @@ h3 .button {
}
.details {
padding-bottom: 0.75rem;
padding-block-end: 0.75rem;
flex-flow: row wrap;
margin-bottom: 0;
margin-block-end: 0;
.detail-title {
display: block;
@ -1125,7 +1125,7 @@ h3 .button {
}
.attachments {
margin-bottom: 0;
margin-block-end: 0;
table tr:last-child td {
border-bottom: none;
@ -1141,7 +1141,7 @@ h3 .button {
.button {
width: 100%;
margin-bottom: .5rem;
margin-block-end: .5rem;
justify-content: left;
&.has-light-text {
@ -1163,7 +1163,7 @@ h3 .button {
}
.checklist-summary {
padding-left: .25rem;
padding-inline-start: .25rem;
}
.detail-content {

4
frontend/src/views/teams/EditTeam.vue
View File

@ -176,7 +176,7 @@
<XButton
v-if="m.id !== userInfo.id"
:loading="teamMemberService.loading"
class="mr-2"
class="me-2"
@click="() => toggleUserType(m)"
>
{{ m.admin ? $t('team.edit.makeMember') : $t('team.edit.makeAdmin') }}
@ -413,7 +413,7 @@ async function leave() {
<style lang="scss" scoped>
.card.is-fullwidth {
margin-bottom: 1rem;
margin-block-end: 1rem;
.content {
padding: 0;

2
frontend/src/views/teams/ListTeams.vue
View File

@ -59,7 +59,7 @@ teamService.getAll().then((result) => {
<style lang="scss" scoped>
ul.teams {
padding: 0;
margin-left: 0;
margin-inline-start: 0;
overflow: hidden;
li {

2
frontend/src/views/user/DataExportDownload.vue
View File

@ -34,7 +34,7 @@
<XButton
v-focus
:loading="dataExportService.loading"
class="mt-4 mr-4"
class="mt-4 me-4"
@click="download()"
>
{{ $t('misc.download') }}

6
frontend/src/views/user/Login.vue
View File

@ -100,7 +100,7 @@
<input
v-model="rememberMe"
type="checkbox"
class="mr-1"
class="me-1"
>
{{ $t('user.auth.remember') }}
</label>
@ -255,10 +255,10 @@ async function submit() {
.label-with-link {
display: flex;
justify-content: space-between;
margin-bottom: .5rem;
margin-block-end: .5rem;
.label {
margin-bottom: 0;
margin-block-end: 0;
}
}
</style>

2
frontend/src/views/user/Register.vue
View File

@ -82,7 +82,7 @@
<XButton
id="register-submit"
:loading="isLoading"
class="mr-2"
class="me-2"
:disabled="!everythingValid"
@click="submit"
>

10
frontend/src/views/user/Settings.vue
View File

@ -132,11 +132,11 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
.navigation {
width: 25%;
padding-right: 1rem;
padding-inline-end: 1rem;
@media screen and (max-width: $tablet) {
width: 100%;
padding-left: 0;
padding-inline-start: 0;
}
}
@ -145,7 +145,7 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
padding: .5rem;
color: var(--text);
width: 100%;
border-left: 3px solid transparent;
border-inline-start: 3px solid transparent;
&:hover,
&.router-link-active {
@ -159,8 +159,8 @@ const extraSettingsLinks = computed(() => authStore.settings.extraSettingsLinks)
@media screen and (max-width: $tablet) {
width: 100%;
padding-left: 0;
padding-top: 1rem;
padding-inline-start: 0;
padding-block-start: 1rem;
}
}
</style>

4
frontend/src/views/user/settings/Caldav.vue
View File

@ -49,7 +49,7 @@
<tr>
<th>{{ $t('misc.id') }}</th>
<th>{{ $t('misc.created') }}</th>
<th class="has-text-right">
<th class="has-text-end">
{{ $t('misc.actions') }}
</th>
</tr>
@ -59,7 +59,7 @@
>
<td>{{ tk.id }}</td>
<td>{{ formatDateShort(tk.created) }}</td>
<td class="has-text-right">
<td class="has-text-end">
<XButton
variant="secondary"
@click="deleteToken(tk)"

4
frontend/src/views/user/settings/DataExport.vue
View File

@ -136,7 +136,7 @@ async function requestDataExport() {
gap: .5rem;
> p {
margin-bottom: 0;
margin-block-end: 0;
}
@media (max-width: $mobile) {
@ -144,7 +144,7 @@ async function requestDataExport() {
align-items: flex-start;
> p {
margin-bottom: 1rem;
margin-block-end: 1rem;
}
> :deep(.button) {

4
frontend/src/views/user/settings/General.vue
View File

@ -549,7 +549,7 @@ async function updateSettings() {
}
.section-block + .section-block {
margin-top: 1.5rem;
margin-block-start: 1.5rem;
}
.field-group {
@ -566,7 +566,7 @@ async function updateSettings() {
.two-col {
flex: 0 0 50%;
margin-left: .5rem;
margin-inline-start: .5rem;
}
.sticky-save {

2
frontend/src/views/user/settings/TOTP.vue
View File

@ -83,7 +83,7 @@
</XButton>
<XButton
variant="tertiary"
class="ml-2"
class="ms-2"
@click="totpDisableForm = false"
>
{{ $t('misc.cancel') }}