#169 BS5 / RTL fixes

This commit is contained in:
Avris 2021-03-01 22:35:03 +01:00
parent 6323039758
commit 9c24c0b9cd
8 changed files with 23 additions and 23 deletions

View File

@ -223,7 +223,7 @@
@import "assets/variables"; @import "assets/variables";
.profile-current { .profile-current {
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
} }
.narrow-message { .narrow-message {

View File

@ -308,7 +308,7 @@
@import "assets/variables"; @import "assets/variables";
.list-singular { .list-singular {
padding-left: 0; padding-inline-start: 0;
list-style: none; list-style: none;
li { li {
white-space: nowrap; white-space: nowrap;
@ -327,7 +327,7 @@
} }
} }
.list-plural { .list-plural {
padding-left: 0; padding-inline-start: 0;
list-style: none; list-style: none;
li { li {
white-space: nowrap; white-space: nowrap;

View File

@ -69,7 +69,7 @@
<Icon v="bars"/> <Icon v="bars"/>
</button> </button>
<div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']"> <div :class="['bg-white border p-3', hamburgerActive ? '' : 'd-none']">
<div class="btn-group-vertical d-flex nav-custom nav-custom-left mb-2"> <div class="btn-group-vertical d-flex nav-custom nav-custom-start mb-2">
<nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`"> <nuxt-link v-for="link in links" :key="link.link" :to="link.link" :class="`btn btn-sm ${isActiveRoute(link) ? 'active' : ''}`">
<Icon :v="link.icon"/> <Icon :v="link.icon"/>
<Spelling>{{ link.textLong || link.text }}</Spelling> <Spelling>{{ link.textLong || link.text }}</Spelling>
@ -91,10 +91,10 @@
This language version is still under construction! This language version is still under construction!
</div> </div>
<div v-show="showCensus" class="alert alert-info mt-3"> <div v-show="showCensus" class="alert alert-info mt-3">
<a href="#" class="float-right" @click.prevent="dismissCensus"> <a href="#" class="float-end" @click.prevent="dismissCensus">
<Icon v="times"/> <Icon v="times"/>
</a> </a>
<Icon v="user-chart" size="2" class="d-inline-block float-left mr-3 mt-2"/> <Icon v="user-chart" size="2" class="d-inline-block float-start mr-3 mt-2"/>
<T silent>census.banner</T> <T silent>census.banner</T>
</div> </div>
</header> </header>
@ -307,12 +307,12 @@
.nav-custom { .nav-custom {
.btn { .btn {
border-left: 1px solid $gray-500; border-inline-start: 1px solid $gray-500;
border-radius: 0; border-radius: 0;
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
padding-left: calc(#{$btn-padding-x-sm} - 2px); padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
color: $primary; color: $primary;
} }
@ -321,14 +321,14 @@
} }
} }
.nav-custom-left { .nav-custom-start {
.btn { .btn {
border-left: 1px solid $gray-500; border-inline-start: 1px solid $gray-500;
border-radius: 0; border-radius: 0;
&:hover, &:focus, &.active { &:hover, &:focus, &.active {
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
padding-left: calc(#{$btn-padding-x-sm} - 2px); padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
color: $primary; color: $primary;
} }
@ -337,7 +337,7 @@
} }
@include media-breakpoint-up('md', $grid-breakpoints) { @include media-breakpoint-up('md', $grid-breakpoints) {
.nav-custom:not(.nav-custom-left) { .nav-custom:not(.nav-custom-start) {
.btn { .btn {
border-bottom: 1px solid $gray-500; border-bottom: 1px solid $gray-500;
border-radius: 0; border-radius: 0;

View File

@ -44,7 +44,7 @@
bottom: 100%; bottom: 100%;
margin-bottom: -$size/2; margin-bottom: -$size/2;
left: 50%; left: 50%;
margin-left: -$size/2; margin-inline-start: -$size/2;
border-radius: 100%; border-radius: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
@ -60,7 +60,7 @@
} }
> span { > span {
box-shadow:0 2px 4px $value; box-shadow:0 2px 4px $value;
// FIXME background: theme-color-level($color, $alert-bg-level); background: tint-color($value, 80%);
color: $value; color: $value;
} }
} }

View File

@ -123,6 +123,6 @@
@import "assets/variables"; @import "assets/variables";
.marked { .marked {
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
} }
</style> </style>

View File

@ -11,7 +11,7 @@
{{countResponses}} {{countResponses}}
<T>census.replies</T> <T>census.replies</T>
<a href="/api/census/export" class="btn btn-outline-secondary btn-sm float-right"> <a href="/api/census/export" class="btn btn-outline-secondary btn-sm float-end">
<Icon v="download"/> <Icon v="download"/>
</a> </a>
</div> </div>

View File

@ -6,7 +6,7 @@
@{{username}} @{{username}}
</h2> </h2>
<div> <div>
<div class="text-right"> <div class="text-end">
<nuxt-link v-if="$user() && $user().username === username" to="/editor" <nuxt-link v-if="$user() && $user().username === username" to="/editor"
class="btn btn-outline-primary btn-sm mb-2" class="btn btn-outline-primary btn-sm mb-2"
> >
@ -228,8 +228,8 @@
.list-group-item-hoverable { .list-group-item-hoverable {
&:hover { &:hover {
color: $primary; color: $primary;
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
padding-left: calc(#{$list-group-item-padding-x} - 2px); padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
} }
} }

View File

@ -16,8 +16,8 @@
.list-group-item-hoverable { .list-group-item-hoverable {
&:hover { &:hover {
color: $primary; color: $primary;
border-left: 3px solid $primary; border-inline-start: 3px solid $primary;
padding-left: calc(#{$list-group-item-padding-x} - 2px); padding-inline-start: calc(#{$list-group-item-padding-x} - 2px);
} }
} }
</style> </style>