feat: replace bottom with logical properties
This commit is contained in:
kolaente
parent
0f5e0019ae
commit
a9924881c2
|
|
@ -170,7 +170,7 @@ $ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
|
|||
position: absolute;
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ const shouldShowMessage = computed(() => {
|
|||
// at least define it centrally
|
||||
// the highest z-index of a modal is .hint-modal with 4500
|
||||
z-index: 5000;
|
||||
bottom: 1rem;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline: 1rem;
|
||||
max-width: max-content;
|
||||
margin-inline: auto;
|
||||
|
|
@ -75,7 +75,7 @@ const shouldShowMessage = computed(() => {
|
|||
}
|
||||
|
||||
&.has-update-available {
|
||||
bottom: 5rem;
|
||||
inset-block-end: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -207,7 +207,7 @@ projectStore.loadAllProjects()
|
|||
display: none;
|
||||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
height: 100vh;
|
||||
|
|
@ -225,7 +225,7 @@ projectStore.loadAllProjects()
|
|||
|
||||
.keyboard-shortcuts-button {
|
||||
position: fixed;
|
||||
bottom: calc(1rem - 4px);
|
||||
inset-block-end: calc(1rem - 4px);
|
||||
inset-inline-end: 1rem;
|
||||
z-index: 4500; // The modal has a z-index of 4000
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
|
|||
<style scoped lang="scss">
|
||||
.demo-mode-banner {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline: 0;
|
||||
background: var(--danger);
|
||||
z-index: 100;
|
||||
|
|
|
|||
|
|
@ -51,7 +51,7 @@ $size: $lineWidth + 1rem;
|
|||
}
|
||||
|
||||
&::after {
|
||||
bottom: 50%;
|
||||
inset-block-end: 50%;
|
||||
transform: $transformX translateY(0.4rem)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -157,7 +157,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
|
|||
transition: transform $transition-duration ease-in;
|
||||
position: fixed;
|
||||
inset-block-start: $navbar-height;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateX(-100%);
|
||||
width: $navbar-width;
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ function refreshApp() {
|
|||
// at least define it centrally
|
||||
// the highest z-index of a modal is .hint-modal with 4500
|
||||
z-index: 5000;
|
||||
bottom: 1rem;
|
||||
inset-block-end: 1rem;
|
||||
inset-inline: 1rem;
|
||||
max-width: max-content;
|
||||
margin-inline: auto;
|
||||
|
|
|
|||
|
|
@ -424,7 +424,7 @@ function setLink(event) {
|
|||
.icon__lower-text {
|
||||
font-size: .75rem;
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
inset-block-end: -3px;
|
||||
inset-inline-end: -2px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -930,7 +930,7 @@ watch(
|
|||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-block-start: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
background: rgba(200, 200, 255, 0.4);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
|
@ -939,7 +939,7 @@ watch(
|
|||
position: absolute;
|
||||
inset-inline-end: -2px;
|
||||
inset-block-start: 0;
|
||||
bottom: -2px;
|
||||
inset-block-end: -2px;
|
||||
width: 4px;
|
||||
background-color: #adf;
|
||||
pointer-events: none;
|
||||
|
|
|
|||
|
|
@ -120,7 +120,7 @@ useTitle(() => title.value)
|
|||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
background-color: rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ const baseStore = useBaseStore()
|
|||
position: fixed;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-end: 0;
|
||||
background: var(--grey-100);
|
||||
z-index: 99;
|
||||
|
|
@ -114,7 +114,7 @@ const baseStore = useBaseStore()
|
|||
text-align: center;
|
||||
position: absolute;
|
||||
width: 100vw;
|
||||
bottom: 5vh;
|
||||
inset-block-end: 5vh;
|
||||
color: $white;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ const textOnlyDescription = computed(() => {
|
|||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -842,7 +842,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
display: block;
|
||||
inset-block-start: 0.25rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
bottom: 0.25rem;
|
||||
inset-block-end: 0.25rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
border: 3px dashed var(--grey-300);
|
||||
border-radius: $radius;
|
||||
|
|
@ -953,7 +953,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
|
||||
.bucket-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
height: min-content;
|
||||
padding: .5rem;
|
||||
background-color: var(--grey-100);
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
background: hsla(var(--grey-100-hsl), 0.8);
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
right: 0;
|
||||
z-index: 4001; // modal z-index is 4000
|
||||
text-align: center;
|
||||
|
|
@ -366,7 +366,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
|
||||
.drop-hint {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue