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