From c950d27d47a03ea0a7856eaf555cded8b9db8b01 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Mon, 18 May 2020 14:37:06 +0200 Subject: [PATCH] update: css for form elements are outside the .with-form context --- src/styles/base/form.scss | 480 +++++++++++++++++++++++--------------- 1 file changed, 294 insertions(+), 186 deletions(-) diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index a14b22f..7986e7b 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -15,6 +15,7 @@ form { margin-left: auto; margin-top: 3.2rem; } +<<<<<<< HEAD .fieldset { border-bottom: 1px solid var(--color-fieldset-border); @@ -48,14 +49,56 @@ form { padding-left: 3.4rem; } +======= + +.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;*/ + + label { + display: flex; + flex-direction: column; /* To align label and input vertically */ + font-weight: 600; + margin-bottom: 0.8rem; + margin-top: 1.8rem; + text-transform: uppercase; + } + + &.is-light label { + color: var(--color-label-light); + } +} + +.is-full-width { + box-sizing: border-box; + flex: 1 1 100%; + padding-left: 3.4rem; +} + +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context .is-half-width { box-sizing: border-box; flex: 0 0 50%; padding-left: 3.4rem; } +<<<<<<< HEAD input:not([type='file']):not([type='search']):not([type='submit']), textarea { +======= +.input-text-like input:not([type='file']):not([type='search']):not([type='submit']), +.input-text-like textarea { +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context -webkit-tap-highlight-color: var(--color-grey-7); background-color: var(--color-input-background); box-sizing: border-box; @@ -65,7 +108,11 @@ textarea { line-height: 1; min-width: 0; padding: 1rem; +<<<<<<< HEAD +======= + +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context &:focus, &:active { border-bottom: 2px solid var(--color-input-active); @@ -75,13 +122,19 @@ textarea { textarea { height: 100px; } +<<<<<<< HEAD .content-box { +======= + +.content-box { + +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context &.with-form { sib-set-default:not([name='user-thumb']) { - clear: both; + clear: both; display: flex!important; flex-wrap: wrap; max-width: 100%; @@ -90,8 +143,11 @@ textarea { float: left; width: 50%; } - } + } + } +} +<<<<<<< HEAD /* To align label and input vertically */ label { display: flex; @@ -99,62 +155,59 @@ textarea { } /*sib-form[set-user-id-select] { +======= +/*sib-form[set-user-id-select] { +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context - input[type="submit"] { - margin-left: 0; - margin-top: 0; - } + input[type="submit"] { + margin-left: 0; + margin-top: 0; + } - select { - display: none; - } - }*/ + select { + display: none; + } +}*/ - /* WIDGETS SIB (let in .content-box to override default styles) */ +/* WIDGETS SIB (let in .content-box to override default styles) */ - sib-form-auto-completion { +sib-form-auto-completion { - .ss-main { - font-weight: normal; - text-transform: none; - } + .ss-main { + font-weight: normal; + text-transform: none; + } - .ss-single-selected { - align-items: center; - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - color: var(--color-input-text); - display: flex; - font-weight: normal; - justify-content: flex-end; - min-height: 4.6rem; - padding-left: 1.2rem; - text-transform: none; + .ss-single-selected { + align-items: center; + background-color: var(--color-input-background); + border: none; + border-radius: 0px; + color: var(--color-input-text); + display: flex; + font-weight: normal; + justify-content: flex-end; + min-height: 4.6rem; + padding-left: 1.2rem; + text-transform: none; - .ss-disabled { - color: var(--color-grey-5); - } - - .ss-arrow { - font-size: 1.8rem; - margin: 0 18px 0 0; - - span { - border: solid var(--color-input-icon); - border-width: 0 2px 2px 0; - } - } - } - - .ss-list { - color: var(--color-select-list); - font-weight: normal; - text-transform: none; - } + .ss-disabled { + color: var(--color-grey-5); } + .ss-arrow { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span { + border: solid var(--color-input-icon); + border-width: 0 2px 2px 0; + } + } + } + +<<<<<<< HEAD hubl-status { align-self: auto; } @@ -180,148 +233,203 @@ textarea { position: absolute; right: 8px; } +======= + .ss-list { + color: var(--color-select-list); + font-weight: normal; + text-transform: none; + } +} - &::-webkit-clear-button { - cursor: pointer; - margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ - margin-right: 5px; - } +/* 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; - &::-webkit-inner-spin-button { - display: none; - } - } + 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; + } +} +/* End */ + +sib-form-date { + input[type="date"] { + background-image: url("/images/calendar.svg"); + background-position: right 12px top 50%; + background-repeat: no-repeat; + background-size: 1.4rem; + color: var(--color-input-icon); + cursor: default; + font-size: 1.4rem; + margin-top: 1.6rem; + max-width: 50vw; + padding-right: 3rem; /* Needed to replace the close icon in FF when you are selecting a date */ + padding-top: 1.2rem; /* Needed to center the close icon in FF when you are selecting a date */ + position: relative; + + &::-webkit-calendar-picker-indicator { + cursor: pointer; + opacity: 0; + position: absolute; + right: 8px; + } +>>>>>>> 5701eea... update: css for form elements are outside the .with-form context + + &::-webkit-clear-button { + cursor: pointer; + margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ + margin-right: 5px; } - sib-form-file { - - label { - align-items: baseline; - clear: both; - display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 100%; - - div { - width: 100%; - } - - input[type='text'] { - box-sizing: border-box; - flex: 0 0 50%; - } - - input[type='file'] { - box-sizing: border-box; - flex: 0 0 20%; - color: var(--color-input-text); - cursor: pointer; - padding-left: 3rem; - } - } - } - - /*sib-multiple-select { - - &.select-skills .ss-values .ss-disabled::before { - content: "Select skills"; - } - - sib-form-auto-completion > label { - display: flex; - flex-direction: column; - - .ss-main { - font-weight: normal; - margin-bottom: 7.8rem; - margin-top: 1.6rem; - max-width: 50vw; - text-transform: none; - - .ss-multi-selected { - align-items: center; - background-color: var(--color-input-background); - border: none; - border-radius: 0px; - display: flex; - justify-content: flex-end; - min-height: 4.2rem; - padding-left: 1.2rem; - - .ss-add { - font-size: 1.8rem; - margin: 0 18px 0 0; - - span.ss-plus { - background: var(--color-input-icon); - - &::after { - background: var(--color-input-icon); - } - } - } - - .ss-values { - background: transparent; - position: absolute; - top: 6rem; - width: 100%; - - .ss-disabled { - color: transparent; - font-size: 1.4rem; - left: calc(1.2rem - 5px); - position: absolute; - top: calc(-6rem + 7px); - - &::before { - color: var(--color-grey-5); - font-weight: normal; - } - } - - .ss-value { - @extend .skill; - display: flex; - - .ss-value-delete { - font-weight: normal; - } - } - } - } - - .ss-list { - color: var(--color-input-text); - } - } - } - }*/ - - /* CUSTOM WIDGETS */ - - hubl-member-form { - width: 100%; - - form { - display: flex; - flex-direction: column; - - [name='member-form__input'] { - margin-bottom: 1rem; - } - - sib-form-auto-completion { - float: left; - } - - input[type='submit'] { - background-color: var(--color-select-add-button-background); - border: 1px solid var(--color-select-add-button); - color: var(--color-select-add-button); - } - } + &::-webkit-inner-spin-button { + display: none; + } + } +} + +sib-form-file { + + label { + align-items: baseline; + clear: both; + display: flex; + flex-direction: row; + flex-wrap: wrap; + max-width: 100%; + + div { + width: 100%; + } + + input[type='text'] { + box-sizing: border-box; + flex: 0 0 50%; + } + + input[type='file'] { + box-sizing: border-box; + flex: 0 0 20%; + color: var(--color-input-text); + cursor: pointer; + padding-left: 3rem; + } + } +} + +/*sib-multiple-select { + + &.select-skills .ss-values .ss-disabled::before { + content: "Select skills"; + } + + sib-form-auto-completion > label { + display: flex; + flex-direction: column; + + .ss-main { + font-weight: normal; + margin-bottom: 7.8rem; + margin-top: 1.6rem; + max-width: 50vw; + text-transform: none; + + .ss-multi-selected { + align-items: center; + background-color: var(--color-input-background); + border: none; + border-radius: 0px; + display: flex; + justify-content: flex-end; + min-height: 4.2rem; + padding-left: 1.2rem; + + .ss-add { + font-size: 1.8rem; + margin: 0 18px 0 0; + + span.ss-plus { + background: var(--color-input-icon); + + &::after { + background: var(--color-input-icon); + } + } + } + + .ss-values { + background: transparent; + position: absolute; + top: 6rem; + width: 100%; + + .ss-disabled { + color: transparent; + font-size: 1.4rem; + left: calc(1.2rem - 5px); + position: absolute; + top: calc(-6rem + 7px); + + &::before { + color: var(--color-grey-5); + font-weight: normal; + } + } + + .ss-value { + @extend .skill; + display: flex; + + .ss-value-delete { + font-weight: normal; + } + } + } + } + + .ss-list { + color: var(--color-input-text); + } + } + } +}*/ + +/* CUSTOM WIDGETS */ + +hubl-member-form { + width: 100%; + + form { + display: flex; + flex-direction: column; + + [name='member-form__input'] { + margin-bottom: 1rem; + } + + sib-form-auto-completion { + float: left; + } + + input[type='submit'] { + background-color: var(--color-select-add-button-background); + border: 1px solid var(--color-select-add-button); + color: var(--color-select-add-button); } } }