lbry-desktop/ui/scss/component/_form-field.scss

435 lines
8.5 KiB
SCSS
Raw Normal View History

2020-07-24 19:17:43 +02:00
@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;
}
2019-05-01 07:16:12 +02:00
input-submit {
align-items: center;
input {
z-index: 2;
}
2019-05-01 07:16:12 +02:00
}
2019-02-13 17:27:20 +01:00
2019-02-18 18:24:56 +01:00
input[type='number'] {
2020-06-16 15:38:35 +02:00
width: 8rem;
2019-02-18 18:24:56 +01:00
}
2019-02-20 06:20:29 +01:00
fieldset-group {
2019-11-22 22:13:00 +01:00
+ fieldset-group {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2019-11-22 22:13:00 +01:00
}
2019-10-28 15:04:37 +01:00
2019-02-20 06:20:29 +01:00
&.fieldset-group--smushed {
justify-content: flex-start;
2018-03-26 23:32:43 +02:00
2019-02-20 06:20:29 +01:00
fieldset-section {
width: auto;
2019-11-19 18:41:31 +01:00
margin: 0;
2019-08-19 18:10:48 +02:00
&:first-child {
input,
select {
2019-02-20 06:20:29 +01:00
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;
2019-02-20 06:20:29 +01:00
}
}
}
&.fieldgroup--paginate {
2020-06-01 19:03:19 +02:00
padding-bottom: var(--spacing-l);
margin-top: var(--spacing-l);
2019-06-11 20:10:58 +02:00
align-items: flex-end;
2019-02-20 06:20:29 +01:00
justify-content: center;
2019-02-13 17:27:20 +01:00
}
2017-10-15 00:37:40 +02:00
}
2019-02-20 06:20:29 +01:00
// 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;
2019-08-27 16:43:42 +02:00
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;
}
2019-02-20 06:20:29 +01:00
fieldset-section:first-child {
max-width: 40%;
2019-02-20 06:20:29 +01:00
.form-field__prefix {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
2019-11-22 22:13:00 +01:00
padding: 0.5rem;
2020-06-01 19:03:19 +02:00
padding-right: var(--spacing-s);
2019-11-22 22:13:00 +01:00
height: var(--height-input);
2019-02-20 06:20:29 +01:00
border: 1px solid;
2019-11-22 22:13:00 +01:00
border-top-left-radius: var(--border-radius);
border-bottom-left-radius: var(--border-radius);
2019-02-20 06:20:29 +01:00
border-right: 0;
2019-11-22 22:13:00 +01:00
border-color: var(--color-input-border);
color: var(--color-text-help);
2019-11-22 22:13:00 +01:00
background-color: var(--color-input-bg);
border-right: 1px solid var(--border-color);
2019-02-20 06:20:29 +01:00
}
}
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;
}
2019-02-20 06:20:29 +01:00
input {
border-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
2019-11-22 22:13:00 +01:00
border-color: var(--color-input-border);
2020-06-01 19:03:19 +02:00
padding-left: var(--spacing-xs);
2019-07-24 02:12:34 +02:00
}
2019-02-13 17:27:20 +01:00
}
2018-06-13 07:20:53 +02:00
}
2017-04-09 17:06:23 +02:00
}
2019-02-13 17:27:20 +01:00
.form-field--copyable {
padding: 0.2rem 0.75rem;
text-overflow: ellipsis;
user-select: text;
2019-02-20 06:20:29 +01:00
cursor: default;
2017-04-09 17:06:23 +02:00
}
2019-09-26 18:07:11 +02:00
.form-field--short {
width: 25em;
}
2019-02-13 17:27:20 +01:00
.form-field--price-amount {
width: 7em;
2017-04-09 17:06:23 +02:00
}
2018-03-26 23:32:43 +02:00
2019-02-13 17:27:20 +01:00
.form-field--address {
2019-09-30 23:48:30 +02:00
min-width: 18em;
2018-05-25 06:36:43 +02:00
}
2019-12-13 20:47:50 +01:00
.form-field__help {
@extend .help;
}
2019-12-18 06:27:08 +01:00
.form-field__help + .checkbox,
.form-field__help + .radio {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-l);
2019-12-18 06:27:08 +01:00
}
2019-12-13 20:47:50 +01:00
.form-field__conjuction {
padding-top: 1rem;
}
.form-field__two-column {
column-count: 2;
}
.form-field__quick-action {
float: right;
font-size: var(--font-xsmall);
margin-top: 2.5%;
}
2019-12-13 20:47:50 +01:00
fieldset-section {
.form-field__internal-option {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s);
2019-12-13 20:47:50 +01:00
margin-left: 2.2rem;
&:first-of-type {
2020-06-01 19:03:19 +02:00
margin-top: var(--spacing-s); // Extra specificity needed here since _section.scss is applied after this file
2019-12-13 20:47:50 +01:00
}
}
}