solid-form { [data-id="error"] { display: none !important; // Hide the default core message, english only with a weird message } } .form form { display: block; height: fit-content; margin-bottom: 75px; transition: all .3s ease; @include breakpoint(lg) { display: flex; flex-direction: column; margin-bottom: 0; transition: all .3s ease; } } .button-register>form>input[type=submit] { @extend .button, .text-bold, .text-uppercase, .reversed, .button-secondary, .bordered; height: auto; position: fixed; bottom: 1em; left: 10%; white-space: normal; width: 80%; z-index: 1; @include breakpoint(lg) { height: 3rem; left: 0; margin: 0; margin-left: auto; margin-top: 32px; position: relative; width: auto; } } .form-label { /*flex: 1 1 auto;*/ 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 { color: var(--color-label-light); } } [name^='line-'] { @include breakpoint(lg) { display: flex; justify-content: space-between; } } .is-full-width { box-sizing: border-box; flex: 1 1 100%; } .is-half-width { box-sizing: border-box; flex: 0 1 calc(50% - 2.5rem); } .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; margin-top: 0.8rem; min-width: 0; padding: 1rem; &:focus, &:active { border-bottom: 2px solid var(--color-input-active); } } textarea { height: 100px; resize: vertical; } .content-box { &.with-form { /*solid-set-default:not([name='user-thumb']) { clear: both; display: flex!important; flex-wrap: wrap; max-width: 100%; solid-form-label-text { float: left; width: 50%; } }*/ } } /*solid-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) */ solid-form-dropdown-autocompletion, solid-form-dropdown-autocompletion-label, solid-form-multipleselect-autocompletion-label, hubl-status { .ss-main { font-weight: normal; margin-top: 0.8rem; text-transform: none; .ss-single-selected { background-color: var(--color-input-background); border: none; border-radius: 0px; color: var(--color-input-text); font-weight: normal; min-height: 4.6rem; padding-left: 1.2rem; .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: block; @include breakpoint(lg) { display: flex; flex-direction: row; margin-bottom: 2.6rem; margin-top: 1.8rem; } label { margin-top: 0; } .ss-main { min-width: 35vw; } input[type='submit'] { @extend .button, .text-bold, .text-uppercase, .button-complementary, .bordered; margin: 10px 0; width: 100%; @include breakpoint(lg) { height: 32px; margin: auto 0 auto 2.2rem; width: auto; } } } /* End */ solid-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; } } } solid-form-file { div { display: flex; flex-direction: column-reverse; align-items: center; margin-top: 1.8rem; @include breakpoint(lg) { flex-direction: row-reverse; justify-content: flex-end; } input[type='file'] { height: 0.1px; opacity: 0; overflow: hidden; position: absolute; width: 0.1px; z-index: -1; } input[type='text'] { margin-bottom: 0.8rem; width: 100%; @include breakpoint(lg) { width: auto; } } label { @extend .button, .text-bold, .text-uppercase, .button-primary, .bordered; text-align: center; width: 100%; @include breakpoint(lg) { margin: auto 2.2rem; width: auto; } } } } /*solid-form-multipleselect { &.select-skills .ss-values .ss-disabled::before { content: "Select skills"; } solid-form-dropdown-autocompletion-label > 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; } solid-form-dropdown-autocompletion-label, solid-form-multipleselect-autocompletion-label { 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); } } }