fffd2f1576
Technically, the other modes can have a quick-action button as well, but for now it's not implemented since it's unlikely to be used. The first usage will be to house the "toggle markdown editor" button, but it can be used for anything. The caller will handle the action. It will be located at the upper-right, which is a better place for such a button. Putting the "toggle markdown editor" button on the bottom seems too far away and seems to make the 'Done|Cancel' area too busy/cluttered.
157 lines
3.5 KiB
SCSS
157 lines
3.5 KiB
SCSS
// 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
|
|
|
|
input-submit {
|
|
align-items: center;
|
|
|
|
input {
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
input[type='number'] {
|
|
width: 8em;
|
|
}
|
|
|
|
fieldset-group {
|
|
+ fieldset-group {
|
|
margin-top: var(--spacing-small);
|
|
}
|
|
|
|
&.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.fieldgroup--paginate {
|
|
padding-bottom: var(--spacing-large);
|
|
margin-top: var(--spacing-large);
|
|
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 {
|
|
.form-field__prefix {
|
|
white-space: nowrap;
|
|
padding: 0.5rem;
|
|
padding-right: var(--spacing-small);
|
|
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(--color-text-help);
|
|
}
|
|
}
|
|
|
|
fieldset-section:last-child {
|
|
width: 100%;
|
|
|
|
input {
|
|
border-left: 0;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border-color: var(--color-input-border);
|
|
padding-left: var(--spacing-xsmall);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.form-field--copyable {
|
|
padding: 0.2rem 0.75rem;
|
|
text-overflow: ellipsis;
|
|
user-select: text;
|
|
cursor: default;
|
|
}
|
|
|
|
.form-field--short {
|
|
width: 25em;
|
|
}
|
|
|
|
.form-field--price-amount {
|
|
width: 7em;
|
|
}
|
|
|
|
.form-field--address {
|
|
min-width: 18em;
|
|
}
|
|
|
|
.form-field__help {
|
|
@extend .help;
|
|
margin-top: var(--spacing-miniscule);
|
|
margin-bottom: var(--spacing-small);
|
|
}
|
|
|
|
.form-field__help + .checkbox,
|
|
.form-field__help + .radio {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
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
|
|
}
|
|
}
|
|
}
|