feat: replace top with logical properties
This commit is contained in:
kolaente
parent
cdd4e46daa
commit
0159ddc313
|
|
@ -156,7 +156,7 @@ $user-dropdown-width-mobile: 5rem;
|
|||
--navbar-icon-size: 1.25rem;
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -132,7 +132,7 @@ projectStore.loadAllProjects()
|
|||
<style lang="scss" scoped>
|
||||
.menu-hide-button {
|
||||
position: fixed;
|
||||
top: 0.5rem;
|
||||
inset-block-start: 0.5rem;
|
||||
right: 0.5rem;
|
||||
z-index: 31;
|
||||
|
||||
|
|
@ -206,7 +206,7 @@ projectStore.loadAllProjects()
|
|||
.mobile-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -46,6 +46,6 @@ const enabled = computed(() => configStore.demoModeEnabled && !hide.value)
|
|||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: .5rem;
|
||||
top: .25rem;
|
||||
inset-block-start: .25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ $size: $lineWidth + 1rem;
|
|||
}
|
||||
|
||||
&::before {
|
||||
top: 50%;
|
||||
inset-block-start: 50%;
|
||||
transform: $transformX translateY(-0.4rem)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -156,7 +156,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
|
|||
padding: 1rem 0;
|
||||
transition: transform $transition-duration ease-in;
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
inset-block-start: $navbar-height;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translateX(-100%);
|
||||
|
|
@ -170,7 +170,7 @@ const savedFilterProjects = computed(() => projectStore.savedFilterProjects)
|
|||
}
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
width: 70vw;
|
||||
z-index: 20;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -439,7 +439,7 @@ function focus() {
|
|||
position: relative;
|
||||
|
||||
.control.is-loading::after {
|
||||
top: .75rem;
|
||||
inset-block-start: .75rem;
|
||||
}
|
||||
|
||||
&.is-disabled {
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ function handleInput(e: Event) {
|
|||
.password-field-type-toggle {
|
||||
position: absolute;
|
||||
color: var(--grey-400);
|
||||
top: 50%;
|
||||
inset-block-start: 50%;
|
||||
right: 1rem;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -929,7 +929,7 @@ watch(
|
|||
content: '';
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
bottom: 0;
|
||||
background: rgba(200, 200, 255, 0.4);
|
||||
pointer-events: none;
|
||||
|
|
@ -938,7 +938,7 @@ watch(
|
|||
.column-resize-handle {
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
bottom: -2px;
|
||||
width: 4px;
|
||||
background-color: #adf;
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ onClickOutside(dropdown, (e) => {
|
|||
min-width: 12rem;
|
||||
padding-block-start: 4px;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-block-start: 100%;
|
||||
z-index: 20;
|
||||
display: block;
|
||||
inset-inline-start: auto;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ withDefaults(defineProps<{
|
|||
&.is-loading::after {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
top: calc(50% - 1.5rem);
|
||||
inset-block-start: calc(50% - 1.5rem);
|
||||
inset-inline-start: calc(50% - 1.5rem);
|
||||
border-width: 3px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -130,7 +130,7 @@ $modal-width: 1024px;
|
|||
.modal-mask {
|
||||
position: fixed;
|
||||
z-index: 4000;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -152,7 +152,7 @@ $modal-width: 1024px;
|
|||
.hint-modal .modal-content {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
|
|
@ -216,20 +216,20 @@ $modal-width: 1024px;
|
|||
.close {
|
||||
$close-button-padding: 26px;
|
||||
position: fixed;
|
||||
top: .5rem;
|
||||
inset-block-start: .5rem;
|
||||
right: $close-button-padding;
|
||||
color: var(--white);
|
||||
font-size: 2rem;
|
||||
|
||||
@media screen and (min-width: $desktop) and (max-width: calc(#{$desktop } + #{$close-button-min-space})) {
|
||||
top: calc(5px + $modal-margin);
|
||||
inset-block-start: calc(5px + $modal-margin);
|
||||
right: 50%;
|
||||
// we align the close button to the modal until there is enough space outside for it
|
||||
transform: translateX(calc((#{$modal-width} / 2) - #{$close-button-padding}));
|
||||
}
|
||||
|
||||
@media screen and (min-width: $tablet) and (max-width: #{$desktop + $close-button-min-space}) {
|
||||
top: .75rem;
|
||||
inset-block-start: .75rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@ useTitle(() => title.value)
|
|||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
|
|
|||
|
|
@ -83,7 +83,7 @@ onClickOutside(popup, () => close())
|
|||
height: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
inset-block-start: 1rem;
|
||||
z-index: 100;
|
||||
|
||||
&.is-open {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const baseStore = useBaseStore()
|
|||
width: 100vw;
|
||||
flex-direction: column;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -208,7 +208,7 @@ async function markAllRead() {
|
|||
|
||||
.unread-indicator {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
inset-block-start: 1rem;
|
||||
right: .5rem;
|
||||
width: .75rem;
|
||||
height: .75rem;
|
||||
|
|
@ -221,7 +221,7 @@ async function markAllRead() {
|
|||
.notifications-list {
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: calc(100% + 1rem);
|
||||
inset-block-start: calc(100% + 1rem);
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ $filter-bubble-size: .75rem;
|
|||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: math.div($filter-bubble-size, -2);
|
||||
inset-block-start: math.div($filter-bubble-size, -2);
|
||||
right: math.div($filter-bubble-size, -2);
|
||||
|
||||
width: $filter-bubble-size;
|
||||
|
|
|
|||
|
|
@ -115,7 +115,7 @@ const textOnlyDescription = computed(() => {
|
|||
.project-background,
|
||||
.project-button {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
|
|
@ -159,7 +159,7 @@ const textOnlyDescription = computed(() => {
|
|||
|
||||
.favorite {
|
||||
position: absolute;
|
||||
top: var(--project-card-padding);
|
||||
inset-block-start: var(--project-card-padding);
|
||||
right: var(--project-card-padding);
|
||||
transition: opacity $transition, color $transition;
|
||||
opacity: 1;
|
||||
|
|
|
|||
|
|
@ -789,7 +789,7 @@ function unCollapseBucket(bucket: IBucket) {
|
|||
<style lang="scss" scoped>
|
||||
.control.is-loading {
|
||||
&::after {
|
||||
top: 30%;
|
||||
inset-block-start: 30%;
|
||||
right: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
--loader-border-color: var(--grey-500);
|
||||
|
|
@ -840,7 +840,7 @@ $filter-container-height: '1rem - #{$switch-view-height}';
|
|||
content: '';
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 0.25rem;
|
||||
inset-block-start: 0.25rem;
|
||||
right: 0.5rem;
|
||||
bottom: 0.25rem;
|
||||
inset-inline-start: 0.5rem;
|
||||
|
|
|
|||
|
|
@ -431,6 +431,6 @@ const taskDetailRoutes = computed(() => Object.fromEntries(
|
|||
}
|
||||
|
||||
.filter-container :deep(.popup) {
|
||||
top: 7rem;
|
||||
inset-block-start: 7rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -599,7 +599,7 @@ function reset() {
|
|||
|
||||
// FIXME: changed position should be an option of the modal
|
||||
:deep(.modal-content) {
|
||||
top: 3rem;
|
||||
inset-block-start: 3rem;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ defineEmits<{
|
|||
|
||||
.remove-assignee {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
inset-block-start: 4px;
|
||||
inset-inline-start: 2px;
|
||||
color: var(--danger);
|
||||
background: var(--white);
|
||||
|
|
|
|||
|
|
@ -352,7 +352,7 @@ async function setCoverImage(attachment: IAttachment | null) {
|
|||
.dropzone {
|
||||
position: fixed;
|
||||
background: hsla(var(--grey-100-hsl), 0.8);
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ async function cancel(element: HTMLInputElement) {
|
|||
display: none;
|
||||
position: absolute;
|
||||
right: 1.25rem;
|
||||
top: 1.1rem;
|
||||
inset-block-start: 1.1rem;
|
||||
|
||||
@media screen and (max-width: $tablet) {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@ $task-background: var(--white);
|
|||
&.loader-container.is-loading::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
inset-block-start: calc(50% - .75rem);
|
||||
inset-inline-start: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -261,7 +261,7 @@ function translateUnit(amount: number, unit: PeriodUnit): string {
|
|||
}
|
||||
|
||||
:deep(.popup) {
|
||||
top: unset;
|
||||
inset-block-start: unset;
|
||||
}
|
||||
|
||||
.reminder-options-popup {
|
||||
|
|
|
|||
|
|
@ -540,7 +540,7 @@ defineExpose({
|
|||
}
|
||||
|
||||
&.loader-container.is-loading:after {
|
||||
top: calc(50% - 1rem);
|
||||
inset-block-start: calc(50% - 1rem);
|
||||
inset-inline-start: calc(50% - 1rem);
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
|
|
@ -558,7 +558,7 @@ defineExpose({
|
|||
background-color: var(--white);
|
||||
box-shadow: var(--shadow-lg);
|
||||
color: var(--text);
|
||||
top: unset;
|
||||
inset-block-start: unset;
|
||||
|
||||
&.is-open {
|
||||
padding: 1rem;
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ const router = createRouter({
|
|||
// Otherwise just scroll to the top
|
||||
return {
|
||||
'inset-inline-start': 0,
|
||||
top: 0,
|
||||
'inset-block-start': 0,
|
||||
}
|
||||
},
|
||||
routes: [
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@
|
|||
|
||||
.numInputWrapper span.arrowDown:after {
|
||||
border-block-start: 4px solid var(--grey-200) !important;
|
||||
top: 40% !important;
|
||||
inset-block-start: 40% !important;
|
||||
}
|
||||
|
||||
.numInputWrapper span svg path {
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
&::after {
|
||||
@include loader;
|
||||
position: absolute;
|
||||
top: calc(50% - 2.5rem);
|
||||
inset-block-start: calc(50% - 2.5rem);
|
||||
inset-inline-start: calc(50% - 2.5rem);
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
&::after {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
top: calc(50% - .75rem);
|
||||
inset-block-start: calc(50% - .75rem);
|
||||
inset-inline-start: calc(50% - .75rem);
|
||||
border-width: 2px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1135,7 +1135,7 @@ h3 .button {
|
|||
.action-buttons {
|
||||
@media screen and (min-width: $tablet) {
|
||||
position: sticky;
|
||||
top: $navbar-height + 1.5rem;
|
||||
inset-block-start: $navbar-height + 1.5rem;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
|
|
@ -1153,12 +1153,12 @@ h3 .button {
|
|||
.is-modal .action-buttons {
|
||||
// we need same top margin for the modal close button
|
||||
@media screen and (min-width: $tablet) {
|
||||
top: 6.5rem;
|
||||
inset-block-start: 6.5rem;
|
||||
}
|
||||
// this is the moment when the fixed close button is outside the modal
|
||||
// => we can fill up the space again
|
||||
@media screen and (min-width: calc(#{$desktop} + 84px)) {
|
||||
top: 0;
|
||||
inset-block-start: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue