Use logical properties in css
Signed-off-by: Mostafa Ahangarha <ahangarha@riseup.net>
This commit is contained in:
Mostafa Ahangarha
parent
165a2ffdaa
commit
7de448871e
|
|
@ -28,20 +28,28 @@ li:focus .app-navigation-entry__utils .action-item {
|
|||
|
||||
/* Welcome / Help */
|
||||
.feature {
|
||||
background-position: left center;
|
||||
background-position-y: center;
|
||||
width: 100%;
|
||||
min-height: 32px;
|
||||
line-height: 32px;
|
||||
padding-left: 32px;
|
||||
padding-inline-start: 32px;
|
||||
margin-top: 0.3em !important;
|
||||
margin-bottom: 0.3em !important;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
body[dir='ltr'] .feature {
|
||||
background-position-x: left;
|
||||
}
|
||||
|
||||
body[dir='rtl'] .feature {
|
||||
background-position-x: right;
|
||||
}
|
||||
|
||||
.feature ul {
|
||||
list-style: circle outside;
|
||||
padding-left: 2em;
|
||||
padding-inline-start: 2em;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -66,6 +74,6 @@ li:focus .app-navigation-entry__utils .action-item {
|
|||
}
|
||||
|
||||
.app-content {
|
||||
margin-left: 0 !important;
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -317,9 +317,9 @@ export default {
|
|||
padding-top: 0 !important;
|
||||
// Prevent shrinking or growing
|
||||
flex: 0 0 auto;
|
||||
padding-right: 3px;
|
||||
padding-inline-end: 3px;
|
||||
padding-bottom: 3px;
|
||||
padding-left: 3px;
|
||||
padding-inline-start: 3px;
|
||||
margin: 0 3px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -354,7 +354,7 @@ export default {
|
|||
border-radius: var(--border-radius);
|
||||
background-position: center;
|
||||
margin-top: 5px;
|
||||
margin-left: 2px;
|
||||
margin-inline-start: 2px;
|
||||
}
|
||||
|
||||
.CodeMirror .cm-formatting-task.cm-property::before {
|
||||
|
|
@ -370,10 +370,10 @@ export default {
|
|||
|
||||
.upload-button {
|
||||
position: fixed;
|
||||
right: 64px;
|
||||
inset-inline-end: 64px;
|
||||
z-index: 10;
|
||||
height: 40px;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
top: 65px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
}
|
||||
|
||||
& ul, & ol {
|
||||
margin-left: 3ex;
|
||||
margin-inline-start: 3ex;
|
||||
}
|
||||
|
||||
& li > p, & li > ul, & li > ol {
|
||||
|
|
@ -220,8 +220,8 @@ export default {
|
|||
|
||||
& blockquote {
|
||||
font-style: italic;
|
||||
border-left: 4px solid var(--color-border);
|
||||
padding-left: 2ex;
|
||||
border-inline-start: 4px solid var(--color-border);
|
||||
padding-inline-start: 2ex;
|
||||
color: var(--color-text-light)
|
||||
}
|
||||
|
||||
|
|
@ -263,8 +263,8 @@ export default {
|
|||
.download-icon-inner {
|
||||
height: 3em;
|
||||
width: auto;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -281,7 +281,7 @@ export default {
|
|||
|
||||
& table td, & table th {
|
||||
padding: 0.35em 0.5em;
|
||||
text-align: left;
|
||||
text-align: start;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,15 +56,19 @@ export default {
|
|||
<style scoped>
|
||||
.badge-wrapper {
|
||||
margin-top: 2em;
|
||||
margin-left: 2em;
|
||||
margin-inline-start: 2em;
|
||||
width: 100%;
|
||||
clear:both;
|
||||
}
|
||||
|
||||
.badge {
|
||||
body[dir='ltr'] .badge {
|
||||
float: left;
|
||||
}
|
||||
|
||||
body[dir='rtl'] .badge {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.appstore-badge {
|
||||
height: 72px;
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ export default {
|
|||
margin-top: 24px;
|
||||
|
||||
button {
|
||||
margin-left: 12px;
|
||||
margin-inline-start: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -438,9 +438,9 @@ export default {
|
|||
margin: 0 auto;
|
||||
}
|
||||
.note-container {
|
||||
padding-right: 250px;
|
||||
padding-inline-end: 250px;
|
||||
transition-duration: var(--animation-quick);
|
||||
transition-property: padding-right;
|
||||
transition-property: padding-inline-end;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -467,7 +467,7 @@ export default {
|
|||
.action-buttons {
|
||||
position: fixed;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
inset-inline-end: 20px;
|
||||
width: 44px;
|
||||
margin-top: 1em;
|
||||
z-index: 2000;
|
||||
|
|
|
|||
|
|
@ -196,7 +196,7 @@ export default {
|
|||
|
||||
.is-mobile:deep(.text-menubar) {
|
||||
// Avoid overlapping the navigation toggle
|
||||
margin-left: 44px;
|
||||
margin-inline-start: 44px;
|
||||
z-index: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ export default {
|
|||
|
||||
.content-list__search {
|
||||
padding: 4px;
|
||||
padding-left: 50px;
|
||||
padding-inline-start: 50px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background-color: var(--color-main-background-translucent);
|
||||
|
|
@ -268,6 +268,6 @@ export default {
|
|||
border: 2px solid var(--color-loading-light);
|
||||
border-top-color: var(--color-loading-dark);
|
||||
vertical-align: top;
|
||||
margin-right: 5px;
|
||||
margin-inline-end: 5px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue