#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";
.profile-current {
border-left: 3px solid $primary;
border-inline-start: 3px solid $primary;
}
.narrow-message {

View File

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

View File

@ -69,7 +69,7 @@
<Icon v="bars"/>
</button>
<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' : ''}`">
<Icon :v="link.icon"/>
<Spelling>{{ link.textLong || link.text }}</Spelling>
@ -91,10 +91,10 @@
This language version is still under construction!
</div>
<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"/>
</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>
</div>
</header>
@ -307,12 +307,12 @@
.nav-custom {
.btn {
border-left: 1px solid $gray-500;
border-inline-start: 1px solid $gray-500;
border-radius: 0;
&:hover, &:focus, &.active {
border-left: 3px solid $primary;
padding-left: calc(#{$btn-padding-x-sm} - 2px);
border-inline-start: 3px solid $primary;
padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
color: $primary;
}
@ -321,14 +321,14 @@
}
}
.nav-custom-left {
.nav-custom-start {
.btn {
border-left: 1px solid $gray-500;
border-inline-start: 1px solid $gray-500;
border-radius: 0;
&:hover, &:focus, &.active {
border-left: 3px solid $primary;
padding-left: calc(#{$btn-padding-x-sm} - 2px);
border-inline-start: 3px solid $primary;
padding-inline-start: calc(#{$btn-padding-x-sm} - 2px);
color: $primary;
}
@ -337,7 +337,7 @@
}
@include media-breakpoint-up('md', $grid-breakpoints) {
.nav-custom:not(.nav-custom-left) {
.nav-custom:not(.nav-custom-start) {
.btn {
border-bottom: 1px solid $gray-500;
border-radius: 0;

View File

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

View File

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

View File

@ -11,7 +11,7 @@
{{countResponses}}
<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"/>
</a>
</div>

View File

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

View File

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