LeoVasanko/calendar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CSS rewritten to replace left/right with start/end.

Browse Source
This commit is contained in:
Leo Vasanko 2025-08-26 10:20:26 -06:00
parent 7ba5494ae5
commit 3e8cdf1b75
9 changed files with 14 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/layout.css
View File

@ -131,7 +131,7 @@ header {
overflow: visible;
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
width: 100%;
}
.month-name-label > span {

4
src/components/BaseDialog.vue
View File

@ -79,10 +79,10 @@ const modalStyle = computed(() => {
if (modalRef.value && props.modelValue) {
const style = {
transform: 'none',
left: modalPosition.value.x + 'px',
insetInlineStart: modalPosition.value.x + 'px',
top: modalPosition.value.y + 'px',
bottom: 'auto',
right: 'auto',
insetInlineEnd: 'auto',
}
if (hasMoved.value) {
style.width = dialogWidth.value ? dialogWidth.value + 'px' : undefined

2
src/components/CalendarDay.vue
View File

@ -32,7 +32,7 @@ const props = defineProps({
<style scoped>
.cell {
position: relative;
border-right: 1px solid var(--border-color);
border-inline-end: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
user-select: none;
display: grid;

2
src/components/CalendarView.vue
View File

@ -560,7 +560,7 @@ header h1 {
.month-label {
position: absolute;
left: 0;
inset-inline-start: 0;
width: 100%;
background-image: linear-gradient(to bottom, rgba(186, 186, 186, 0.3), rgba(186, 186, 186, 0.2));
font-size: 2em;

2
src/components/EventDialog.vue
View File

@ -943,7 +943,7 @@ const recurrenceSummary = computed(() => {
border-radius: 0.4rem;
cursor: pointer;
font-size: 0.9rem;
text-align: left;
text-align: start;
transition: background-color 0.15s ease;
}
.ec-recurrence-toggle:hover {

4
src/components/EventOverlay.vue
View File

@ -464,10 +464,10 @@ function applyRangeDuringDrag(st, startDate, endDate) {
}
.event-span .resize-handle.left {
left: 0;
inset-inline-start: 0;
}
.event-span .resize-handle.right {
right: 0;
inset-inline-end: 0;
}
</style>

2
src/components/HeaderControls.vue
View File

@ -204,6 +204,6 @@ onBeforeUnmount(() => {
.today-date {
white-space: pre-line;
text-align: center;
margin-right: 2rem;
margin-inline-end: 2rem;
}
</style>

2
src/components/Jogwheel.vue
View File

@ -181,7 +181,7 @@ defineExpose({
.jogwheel-viewport {
position: absolute;
top: 0;
right: 0;
inset-inline-end: 0;
bottom: 0;
width: var(--month-w);
overflow-y: auto;

8
src/components/SettingsDialog.vue
View File

@ -159,7 +159,7 @@ defineExpose({ open })
v-model="show"
title="Settings"
class="settings-modal"
:style="{ top: '4.5rem', right: '2rem', bottom: 'auto', left: 'auto', transform: 'none' }"
:style="{ top: '4.5rem', insetInlineEnd: '2rem', bottom: 'auto', insetInlineStart: 'auto', transform: 'none' }"
>
<div class="setting-group">
<label class="ec-field">
@ -242,9 +242,9 @@ defineExpose({ open })
.holiday-settings {
display: grid;
gap: 0.75rem;
margin-left: 1rem;
padding-left: 1rem;
border-left: 2px solid var(--border-color);
margin-inline-start: 1rem;
padding-inline-start: 1rem;
border-inline-start: 2px solid var(--border-color);
}
select {
border: 1px solid var(--muted);