@import 'init/mixins'; input, textarea, select { height: var(--height-input); border-radius: var(--border-radius); border: 1px solid; color: var(--color-input); border-color: var(--color-input-border); background-color: var(--color-input-bg); padding-right: var(--spacing-s); padding-left: var(--spacing-s); &:focus { @include focus; } &::placeholder { color: var(--color-input-placeholder); opacity: 0.4; } &:disabled { opacity: 0.4; & + label { opacity: 0.4; } } &[type='range'] { height: auto; height: 0.5rem; background-color: var(--color-secondary); } } checkbox-element, radio-element, select { cursor: pointer; } select { background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 96 96' xmlns='http://www.w3.org/2000/svg' fill='%23212529'%3E%3Cpath d='M17.172, 31.172c1.562, -1.562 4.095, -1.562 5.656, 0l25.172, 25.171l25.172, -25.171c1.562, -1.562 4.095, -1.562 5.656, 0c1.562, 1.562 1.562, 4.095 0, 5.656l-28, 28c-1.562, 1.562 -4.095, 1.562 -5.656, 0l-28, -28c-0.781, -0.781 -1.172, -1.805 -1.172, -2.828c0, -1.023 0.391, -2.047 1.172, -2.828Z'/%3E%3C/svg%3E%0A"); background-position: 99% center; background-repeat: no-repeat; background-size: 1rem; padding-right: var(--spacing-l); padding-left: var(--spacing-s); } fieldset-group { display: flex; flex-direction: row; justify-content: space-between; &.fieldset-group--smushed { fieldset-section + fieldset-section { margin-top: 0; } } } fieldset-section, fieldset-group, form, .checkbox, .radio, .form-field--SimpleMDE, .form-field__help { + fieldset-section, + fieldset-group, + form, + .checkbox, + .radio, + .form-field--SimpleMDE { margin-top: var(--spacing-l); } + .form-field__help { margin-top: var(--spacing-s); } &:last-child { margin-bottom: 0; } input, select { width: 100%; } } fieldset-section, .checkbox, .radio { display: flex; flex-direction: column; } label { font-size: var(--font-small); color: var(--color-input-label); display: inline-block; margin-bottom: var(--spacing-xxs); } input-submit { display: flex; & > *:first-child, & > *:nth-child(2) { margin: 0; } & > *:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right: none; } & > *:nth-child(2) { border-top-left-radius: 0; border-bottom-left-radius: 0; border: 1px solid var(--color-border); } } .checkbox, .radio { position: relative; input[type='checkbox'], input[type='radio'] { height: var(--height-checkbox); width: var(--height-checkbox); position: absolute; border: none; left: 0; padding: 0; background-color: transparent; &:disabled + label { cursor: default; pointer-events: none; } } label { position: relative; display: inline-block; margin: 0; font-size: var(--font-base); padding-left: calc(var(--height-checkbox) + var(--spacing-s)); min-height: var(--height-checkbox); &::before { background-color: var(--color-input-toggle-bg); } &:hover { &::before { background-color: var(--color-input-toggle-bg-hover); } } } label::before, label::after { position: absolute; content: ''; } // Hide the checkmark by default input[type='checkbox'] + label::after, input[type='radio'] + label::after { content: none; } // Unhide on the checked state input[type='checkbox']:checked + label::after, input[type='radio']:checked + label::after { content: ''; } input[type='checkbox']:focus + label::before, input[type='radio']:focus + label::before { @include focus; } } .checkbox { // Outer box of the fake checkbox label::before { height: var(--height-checkbox); width: var(--height-checkbox); border: 1px solid var(--color-input-border); border-radius: var(--border-radius); left: 0px; top: -1px; } // Checkmark of the fake checkbox label::after { height: 6px; width: 12px; border-left: 2px solid; border-bottom: 2px solid; border-color: var(--color-input-toggle); transform: rotate(-45deg); left: 6px; top: 6px; } } .radio { input[type='radio'] { border-radius: 50%; } // Outer box of the fake radio label::before { height: var(--height-radio); width: var(--height-radio); border: 1px solid var(--color-input-border); border-radius: calc(var(--height-radio) * 0.5); left: 0px; top: -1px; } // Checkmark of the fake radio label::after { height: 12px; width: 12px; border-radius: 50%; background-color: var(--color-secondary); left: 6px; top: 5px; } } .range__label { display: flex; justify-content: space-between; width: 100%; > * { width: 33%; text-align: center; &:first-of-type { text-align: left; } &:last-of-type { text-align: right; } } } .fieldset-group { @extend fieldset-group; } .fieldset-section { @extend fieldset-section; } .input-submit { @extend input-submit; } input-submit { align-items: center; input { z-index: 2; } } input[type='number'] { width: 8rem; } fieldset-group { + fieldset-group { margin-top: var(--spacing-s); } &.fieldset-group--smushed { justify-content: flex-start; fieldset-section { width: auto; margin: 0; &:first-child { input, select { border-right: none; border-top-right-radius: 0; border-bottom-right-radius: 0; } } &:nth-of-type(2) { input, select { border-top-left-radius: 0; border-bottom-left-radius: 0; } label { margin-left: var(--spacing-s); } } } &.fieldgroup--paginate { padding-bottom: var(--spacing-l); margin-top: var(--spacing-l); align-items: flex-end; justify-content: center; } } // This is a special case where the prefix appears "inside" the input // It would be way simpler to just use position: absolute and give it a width // but the width can change when we use it for the name prefix // lbry:// {input}, lbry://@short {input}, @lbry://longername {input} // The spacing/alignment isn't very robust and will probably need to be changed // if we use this in more places &.fieldset-group--disabled-prefix { align-items: flex-end; label { min-height: 18px; white-space: nowrap; // Set width 0 and overflow visible so the label can act as if it's the input label and not a random text node in a side by side div overflow: visible; width: 0; } fieldset-section:first-child { max-width: 40%; .form-field__prefix { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; padding: 0.5rem; padding-right: var(--spacing-s); height: var(--height-input); border: 1px solid; border-top-left-radius: var(--border-radius); border-bottom-left-radius: var(--border-radius); border-right: 0; border-color: var(--color-input-border); color: var(--color-text-help); background-color: var(--color-input-bg); border-right: 1px solid var(--border-color); } } fieldset-section:last-child { width: 100%; label { // Overwrite the input's label to wrap instead. This is usually // an error message, which could be long in other languages. width: 100%; white-space: normal; } input { border-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-color: var(--color-input-border); padding-left: var(--spacing-xs); } } } } .form-field--copyable { padding: 0.2rem 0.75rem; text-overflow: ellipsis; user-select: text; cursor: default; } .form-field--short { width: 100%; @media (min-width: $breakpoint-small) { width: 25em; } } .form-field--price-amount { width: 7em; } .form-field--address { min-width: 18em; } .form-field__help { @extend .help; } .form-field__help + .checkbox, .form-field__help + .radio { margin-top: var(--spacing-l); } .form-field__conjuction { padding-top: 1rem; } .form-field__two-column { @media (min-width: $breakpoint-small) { column-count: 2; } } .form-field__quick-action { float: right; font-size: var(--font-xsmall); margin-top: 2.5%; } fieldset-section { .form-field__internal-option { margin-top: var(--spacing-s); margin-left: 2.2rem; &:first-of-type { margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file } } .select--slim { @media (min-width: $breakpoint-small) { max-width: none; } select { max-height: 1.5rem !important; padding: 0 var(--spacing-xs); padding-right: var(--spacing-l); } } }