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;*/ 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; } .is-half-width { box-sizing: border-box; flex: 0 0 50%; padding-left: 3.4rem; } .input-text-like input:not([type='file']):not([type='search']):not([type='submit']), .input-text-like 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 { sib-set-default:not([name='user-thumb']) { clear: both; display: flex!important; flex-wrap: wrap; max-width: 100%; sib-form-label-text { float: left; width: 50%; } } } } /*sib-form[set-user-id-select] { input[type="submit"] { margin-left: 0; margin-top: 0; } select { display: none; } }*/ /* WIDGETS SIB (let in .content-box to override default styles) */ sib-form-auto-completion { .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-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; } } /* 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; } } /* 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; } &::-webkit-clear-button { cursor: pointer; margin-bottom: 5px; /* Needed to compensate padding-top: 1.2rem; for the close icon in FF */ margin-right: 5px; } &::-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); } } }