From 21d078bda936cb525067d74155e42993a9a5d1d6 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Sun, 17 May 2020 21:10:46 +0200 Subject: [PATCH] update: label for form reviewed + class added for input --- src/styles/base/form.scss | 184 ++++++++---------- src/views/admin/page-admin-circles-create.pug | 5 + .../admin/page-admin-projects-create.pug | 8 +- src/views/admin/page-admin-users-create.pug | 8 +- src/views/admin/page-admin-users-edit.pug | 8 +- src/views/circle/page-circle-edit.pug | 5 +- src/views/project/page-project-edit.pug | 8 +- 7 files changed, 101 insertions(+), 125 deletions(-) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 4c4d908..a14b22f 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -1,85 +1,84 @@ +form { + display: flex; + flex-direction: column; + margin-left: -3.4rem; + transition: all .3s ease; +} + +.button-register>form>input[type=submit] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-secondary, + .bordered; + margin-left: auto; + margin-top: 3.2rem; +} + +.fieldset { + border-bottom: 1px solid var(--color-fieldset-border); + color: var(--color-title); + display: flex; + flex: 1 0 100%; + font-size: 1.8rem; + font-weight: 600; + margin: 2.6rem 0 1.8rem; + padding-bottom: 0.8rem; +} + +.form-label { + /*flex: 1 1 auto;*/ + font-weight: 600; + + &.is-light label { + color: var(--color-label-light); + margin-top: 1.8rem; + text-transform: uppercase; + + &>*:nth-child(1) { + margin-bottom: 0.8rem; + } + } +} + +.is-full-width { + box-sizing: border-box; + flex: 1 1 100%; + padding-left: 3.4rem; +} + +.is-half-width { + box-sizing: border-box; + flex: 0 0 50%; + padding-left: 3.4rem; +} + +input:not([type='file']):not([type='search']):not([type='submit']), +textarea { + -webkit-tap-highlight-color: var(--color-grey-7); + background-color: var(--color-input-background); + box-sizing: border-box; + border: 2px solid var(--color-input-background); + color: var(--color-input-text); + /*flex: 1 1 0; Problem on Firefox for input type date*/ + line-height: 1; + min-width: 0; + padding: 1rem; + + &:focus, + &:active { + border-bottom: 2px solid var(--color-input-active); + } +} + +textarea { + height: 100px; +} .content-box { - + &.with-form { - - form { - display: flex; - flex-direction: column; - margin-left: -3.4rem; - transition: all .3s ease; - } - - .button-register>form>input[type=submit] { - @extend .button, - .text-bold, - .text-uppercase, - .reversed, - .button-secondary, - .bordered; - margin-left: auto; - margin-top: 3.2rem; - } - - .fieldset { - border-bottom: 1px solid var(--color-fieldset-border); - color: var(--color-title); - display: flex; - flex: 1 0 100%; - font-size: 1.8rem; - font-weight: 600; - margin: 2.6rem 0 1.8rem; - padding-bottom: 0.8rem; - } - - .form-label { - /*flex: 1 1 auto;*/ - font-weight: 600; - - &.is-light label { - color: var(--color-label-light); - margin-top: 1.8rem; - text-transform: uppercase; - - &>*:nth-child(1) { - margin-bottom: 0.8rem; - } - } - } - - .is-full-width { - box-sizing: border-box; - flex: 1 1 100%; - padding-left: 3.4rem; - } - - .is-half-width { - box-sizing: border-box; - flex: 0 0 50%; - padding-left: 3.4rem; - } - - input:not([type='file']):not([type='search']):not([type='submit']), - textarea { - -webkit-tap-highlight-color: var(--color-grey-7); - background-color: var(--color-input-background); - box-sizing: border-box; - border: 2px solid var(--color-input-background); - color: var(--color-input-text); - /*flex: 1 1 0; Problem on Firefox for input type date*/ - line-height: 1; - min-width: 0; - padding: 1rem; - - &:focus, - &:active { - border-bottom: 2px solid var(--color-input-active); - } - } - - textarea { - height: 100px; - } sib-set-default:not([name='user-thumb']) { clear: both; @@ -156,35 +155,8 @@ } } -<<<<<<< HEAD hubl-status { align-self: auto; -======= - /* Additional styles for the select to add a member in circle-edit */ - .block.select-add>form { - display: flex; - flex-direction: row; - margin-bottom: 2.6rem; - - label { - margin-top: 0; - } - - .ss-main { - min-width: 35vw; - } - - input[type='submit'] { - @extend .button, - .btn-margin-left, - .text-bold, - .text-uppercase, - .button-complementary, - .bordered; - margin-top: auto; - margin-bottom: auto; - } ->>>>>>> 50b15bd... update: clean-up form css } sib-form-date { diff --git a/src/views/admin/page-admin-circles-create.pug b/src/views/admin/page-admin-circles-create.pug index 3ae1563..eeb1dd5 100644 --- a/src/views/admin/page-admin-circles-create.pug +++ b/src/views/admin/page-admin-circles-create.pug @@ -11,9 +11,14 @@ div.content-box__info label-status='Statut du canal' widget-status='hubl-status' +<<<<<<< HEAD class-name='form-label is-light is-full-width' class-description='form-label is-light is-full-width' class-status='form-label is-light is-full-width member-select color' +======= + class-name='form-label is-light is-full-width input-text-like' + class-description='form-label is-light is-full-width input-text-like' +>>>>>>> 013eeda... update: label for form reviewed + class added for input label-name='Nom du canal *' label-description='Sous-titre du canal *' diff --git a/src/views/admin/page-admin-projects-create.pug b/src/views/admin/page-admin-projects-create.pug index 87ef5d0..d672213 100644 --- a/src/views/admin/page-admin-projects-create.pug +++ b/src/views/admin/page-admin-projects-create.pug @@ -37,17 +37,17 @@ div.content-box__info widget-customer='sib-form-auto-completion' label-name='Nom du projet*' - class-name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width input-text-like' label-project.description='Description du projet' - class-project.description='form-label is-light is-full-width' + class-project.description='form-label is-light is-full-width input-text-like' widget-project.description='sib-form-textarea' label-businessProvider.name='Apporteur d\'affaire*' - class-businessProvider.name='form-label is-light is-half-width' + class-businessProvider.name='form-label is-light is-half-width input-text-like' label-businessProvider.fee='Contribution' - class-businessProvider.fee='form-label is-light is-half-width' + class-businessProvider.fee='form-label is-light is-half-width input-text-like' label-captain='Capitaine du projet' range-captain=`${endpoints.users || endpoints.get.users}` diff --git a/src/views/admin/page-admin-users-create.pug b/src/views/admin/page-admin-users-create.pug index cc84ab9..f178ad9 100644 --- a/src/views/admin/page-admin-users-create.pug +++ b/src/views/admin/page-admin-users-create.pug @@ -8,10 +8,10 @@ div.content-box__info fields='line-1(first_name, last_name), line-2(username, email), line-3(password)' - class-first_name='form-label is-light is-half-width' - class-last_name='form-label is-light is-half-width' - class-username='form-label is-light is-half-width' - class-email='form-label is-light is-half-width' + class-first_name='form-label is-light is-half-width input-text-like' + class-last_name='form-label is-light is-half-width input-text-like' + class-username='form-label is-light is-half-width input-text-like' + class-email='form-label is-light is-half-width input-text-like' label-first_name='Prénom *' label-last_name='Nom *' diff --git a/src/views/admin/page-admin-users-edit.pug b/src/views/admin/page-admin-users-edit.pug index eb1808b..940495e 100644 --- a/src/views/admin/page-admin-users-edit.pug +++ b/src/views/admin/page-admin-users-edit.pug @@ -13,10 +13,10 @@ div.content-box__info fields='line-1(first_name, last_name), line-2(username, email)' - class-first_name='form-label is-light is-half-width' - class-last_name='form-label is-light is-half-width' - class-username='form-label is-light is-half-width' - class-email='form-label is-light is-half-width' + class-first_name='form-label is-light is-half-width input-text-like' + class-last_name='form-label is-light is-half-width input-text-like' + class-username='form-label is-light is-half-width input-text-like' + class-email='form-label is-light is-half-width input-text-like' label-first_name='Prénom *' label-last_name='Nom *' diff --git a/src/views/circle/page-circle-edit.pug b/src/views/circle/page-circle-edit.pug index ccda297..77b974e 100644 --- a/src/views/circle/page-circle-edit.pug +++ b/src/views/circle/page-circle-edit.pug @@ -52,10 +52,9 @@ div.content-box__info label-owner='Administrateur ou administratrice' label-description='Sous-titre du canal *' - class-name='form-label is-light is-half-width' + class-name='form-label is-light is-half-width input-text-like' class-owner='form-label is-light is-half-width member-select color' - class-description='form-label is-light is-full-width' - class-status='form-label is-light is-full-width member-select color' + class-description='form-label is-light is-full-width input-text-like' widget-owner='sib-form-auto-completion' diff --git a/src/views/project/page-project-edit.pug b/src/views/project/page-project-edit.pug index bb5aa66..1358fc8 100644 --- a/src/views/project/page-project-edit.pug +++ b/src/views/project/page-project-edit.pug @@ -17,8 +17,8 @@ div.content-box__info class-customer='member-select form-label is-light is-half-width' widget-customer='sib-form-auto-completion' - class-name='form-label is-light is-half-width' - class-description='form-label is-light is-full-width' + class-name='form-label is-light is-half-width input-text-like' + class-description='form-label is-light is-full-width input-text-like' label-fieldset-info='' label-customer='Client*' range-customer=`${endpoints.customers || endpoints.get.customers}` @@ -28,8 +28,8 @@ div.content-box__info widget-description='sib-form-textarea' class-fieldset-fee='fieldset' - class-businessprovider='form-label is-light is-half-width' - class-businessproviderfee='form-label is-light is-half-width' + class-businessprovider='form-label is-light is-half-width input-text-like' + class-businessproviderfee='form-label is-light is-half-width input-text-like' label-fieldset-fee='Contributions' label-businessprovider='Apporteur d\'affaire' label-businessproviderfee='Montant de la contribution'