YunoHost/yunohost-admin
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-admin.git synced 2024-09-03 20:06:15 +02:00
Code Issues Projects Releases Packages Wiki Activity

add scss to deal with form col width

Browse source
This commit is contained in:
Axolotle 2020-07-27 11:06:05 +02:00
parent 5bfa1cda17
commit 4c67de3ebd
2 changed files with 31 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
app/src/scss/main.scss
View file

@ -30,12 +30,35 @@ body {
color: #333;
}
.input-group.is-invalid {
~ .invalid-feedback {
.input-group {
select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
&.is-invalid ~ .invalid-feedback {
display: block;
}
}
.col-form-label {
@include media-breakpoint-up(xs) {
width: 100%;
}
@include media-breakpoint-up(sm) {
flex-basis: 40%;
}
@include media-breakpoint-up(md) {
flex-basis: 30%;
}
@include media-breakpoint-up(lg) {
flex-basis: 25%;
}
@include media-breakpoint-up(xl) {
flex-basis: 20%;
}
}
// Fork-awesome overrides
.fa-fw {

30
app/src/views/user/UserCreate.vue
View file

@ -4,10 +4,7 @@
<b-card :header="$t('users_new')" header-tag="h2">
<b-form id="user-create" @submit.prevent="onSubmit">
<b-form-group
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
:label="$t('user_username')" label-for="input-username" label-class="test"
>
<b-form-group label-cols="auto" :label="$t('user_username')" label-for="input-username">
<b-input
id="input-username" :placeholder="$t('placeholder.username')"
aria-describedby="username-feedback" required
@ -19,7 +16,7 @@
</b-form-invalid-feedback>
</b-form-group>
<b-form-group label-cols-sm="5" label-cols-lg="4" label-cols-xl="3">
<b-form-group label-cols="auto">
<template v-slot:label aria-hidden="true">
{{ $t('user_fullname') }}
</template>
@ -55,10 +52,7 @@
</div>
</b-form-group>
<b-form-group
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
:label="$t('user_email')" label-for="input-email"
>
<b-form-group label-cols="auto" :label="$t('user_email')" label-for="input-email">
<b-input-group>
<b-input
id="input-email" :placeholder="$t('placeholder.username')"
@ -82,8 +76,7 @@
</b-form-group>
<b-form-group
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
:label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
label-cols="auto" :label="$t('user_mailbox_quota')" label-for="input-mailbox-quota"
:description="$t('mailbox_quota_description')"
>
<b-input-group append="M">
@ -94,10 +87,7 @@
</b-input-group>
</b-form-group>
<b-form-group
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
:label="$t('password')" label-for="input-password"
>
<b-form-group label-cols="auto" :label="$t('password')" label-for="input-password">
<b-input
id="input-password" placeholder="••••••••"
aria-describedby="password-feedback" required
@ -110,8 +100,7 @@
</b-form-group>
<b-form-group
label-cols-sm="5" label-cols-lg="4" label-cols-xl="3"
:label="$t('password_confirmation')" label-for="input-confirmation"
label-cols="auto" :label="$t('password_confirmation')" label-for="input-confirmation"
:description="$t('good_practices_about_user_password')"
>
<b-input
@ -259,11 +248,4 @@ export default {
}
}
}
.input-group {
select {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
</style>