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

138 lines
3.2 KiB
SCSS
Raw Normal View History

// lbry/components overrides and minor styles
// Some items have very specific styling
// This is because many styles inside `lbry/components/sass/form/` are very specific
// As styles become hardened here, they _should_ slowly move over to that repo
2019-05-01 07:16:12 +02:00
input-submit {
align-items: center;
}
2019-02-13 17:27:20 +01:00
2019-02-18 18:24:56 +01:00
input[type='number'] {
width: 8em;
}
2019-02-20 06:20:29 +01:00
fieldset-group {
2019-11-22 22:13:00 +01:00
+ fieldset-group {
margin-top: var(--spacing-small);
}
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 {
2019-06-11 20:10:58 +02:00
padding-bottom: var(--spacing-large);
margin-top: var(--spacing-large);
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 {
.form-field__prefix {
white-space: nowrap;
2019-11-22 22:13:00 +01:00
padding: 0.5rem;
2019-12-06 21:57:07 +01:00
padding-right: var(--spacing-small);
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-input-placeholder);
background-color: var(--color-input-bg);
2019-02-20 06:20:29 +01:00
}
}
fieldset-section:last-child {
width: 100%;
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);
2019-11-25 18:42:49 +01:00
padding-left: 0;
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;
margin-top: var(--spacing-miniscule);
margin-bottom: var(--spacing-small);
}
.form-field__conjuction {
padding-top: 1rem;
}
fieldset-section {
.form-field__internal-option {
margin-top: var(--spacing-small);
margin-left: 2.2rem;
&:first-of-type {
margin-top: var(--spacing-small); // Extra specificity needed here since _section.scss is applied after this file
}
}
}