feat: replace absolute left position with inset-inline-start
This commit is contained in:
kolaente
parent
0e1a253eb8
commit
a25a4a00c9
|
|
@ -157,7 +157,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
|
|
@ -252,7 +252,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
}
|
||||
|
||||
.navbar-end {
|
||||
margin-left: 0;
|
||||
margin-left: 0; // overrides bulma core styles
|
||||
margin-inline-start: auto;
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -138,7 +138,7 @@ projectStore.loadAllProjects()
|
|||
|
||||
[dir="rtl"] & {
|
||||
right: auto;
|
||||
left: 0.5rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
}
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
|
|
@ -208,7 +208,7 @@ projectStore.loadAllProjects()
|
|||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
|
@ -231,7 +231,7 @@ projectStore.loadAllProjects()
|
|||
|
||||
[dir="rtl"] & {
|
||||
right: auto;
|
||||
left: 1rem;
|
||||
inset-inline-start: 1rem;
|
||||
}
|
||||
|
||||
color: var(--grey-500);
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@ $size: $lineWidth + 1rem;
|
|||
position: absolute;
|
||||
height: 3px;
|
||||
width: $lineWidth;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: $transformX;
|
||||
background-color: var(--grey-400);
|
||||
border-radius: 2px;
|
||||
|
|
|
|||
|
|
@ -158,13 +158,13 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
|
|||
position: fixed;
|
||||
top: $navbar-height;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateX(-100%);
|
||||
width: $navbar-width;
|
||||
overflow-y: auto;
|
||||
|
||||
[dir="rtl"] & {
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
right: 0;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,7 @@ function toggleEmojiPicker() {
|
|||
const left = rect.left - container.left + rect.width
|
||||
|
||||
emojiPickerPosition.value = {
|
||||
left: left === 0 ? undefined : left,
|
||||
'inset-inline-start': left === 0 ? undefined : left,
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ async function toggleReaction(value: string) {
|
|||
v-if="showEmojiPicker"
|
||||
ref="emojiPickerRef"
|
||||
class="emoji-picker"
|
||||
:style="{left: emojiPickerPosition?.left + 'px'}"
|
||||
:style="{'inset-inline-start': emojiPickerPosition?.left + 'px'}"
|
||||
data-source="/emojis.json"
|
||||
:is-dark="isDark"
|
||||
@emojiClick="detail => addReaction(detail.unicode)"
|
||||
|
|
|
|||
|
|
@ -927,7 +927,7 @@ watch(
|
|||
z-index: 2;
|
||||
position: absolute;
|
||||
content: '';
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -98,7 +98,7 @@ onClickOutside(dropdown, (e) => {
|
|||
top: 100%;
|
||||
z-index: 20;
|
||||
display: block;
|
||||
left: auto;
|
||||
inset-inline-start: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -34,7 +34,7 @@ withDefaults(defineProps<{
|
|||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: calc(50% - 1.5rem);
|
||||
left: calc(50% - 1.5rem);
|
||||
inset-inline-start: calc(50% - 1.5rem);
|
||||
border-width: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@ $modal-width: 1024px;
|
|||
position: fixed;
|
||||
z-index: 4000;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, .8);
|
||||
|
|
@ -153,7 +153,7 @@ $modal-width: 1024px;
|
|||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ useTitle(() => title.value)
|
|||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ const baseStore = useBaseStore()
|
|||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: var(--grey-100);
|
||||
|
|
|
|||
|
|
@ -118,7 +118,7 @@ const textOnlyDescription = computed(() => {
|
|||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.is-archived {
|
||||
|
|
|
|||
|
|
@ -843,7 +843,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
top: 0.25rem;
|
||||
right: 0.5rem;
|
||||
bottom: 0.25rem;
|
||||
left: 0.5rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
border: 3px dashed var(--grey-300);
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@ defineEmits<{
|
|||
.remove-assignee {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 2px;
|
||||
inset-inline-start: 2px;
|
||||
color: var(--danger);
|
||||
background: var(--white);
|
||||
padding: 0 4px;
|
||||
|
|
|
|||
|
|
@ -353,7 +353,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
position: fixed;
|
||||
background: hsla(var(--grey-100-hsl), 0.8);
|
||||
top: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
z-index: 4001; // modal z-index is 4000
|
||||
|
|
@ -367,7 +367,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
.drop-hint {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -139,7 +139,7 @@ $defer-task-max-width: 350px + 100px;
|
|||
max-width: $defer-task-max-width;
|
||||
|
||||
@media screen and (max-width: ($defer-task-max-width)) {
|
||||
left: .5rem;
|
||||
inset-inline-start: .5rem;
|
||||
right: .5rem;
|
||||
max-width: 100%;
|
||||
width: calc(100vw - 1rem - 2rem);
|
||||
|
|
|
|||
|
|
@ -231,7 +231,7 @@ $task-background: var(--white);
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
left: calc(50% - .75rem);
|
||||
inset-inline-start: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -541,7 +541,7 @@ defineExpose({
|
|||
|
||||
&.loader-container.is-loading:after {
|
||||
top: calc(50% - 1rem);
|
||||
left: calc(50% - 1rem);
|
||||
inset-inline-start: calc(50% - 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
border-left-color: var(--grey-300);
|
||||
|
|
|
|||
|
|
@ -31,7 +31,10 @@ const router = createRouter({
|
|||
}
|
||||
|
||||
// Otherwise just scroll to the top
|
||||
return {left: 0, top: 0}
|
||||
return {
|
||||
'inset-inline-start': 0,
|
||||
top: 0,
|
||||
}
|
||||
},
|
||||
routes: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
left: calc(50% - 2.5rem);
|
||||
inset-inline-start: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
border-width: 0.25rem;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
left: calc(50% - .75rem);
|
||||
inset-inline-start: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue