131 lines
3.6 KiB
CSS
131 lines
3.6 KiB
CSS
|
|
||
|
|
:root {
|
||
|
|
--spacing-smaller: 3px;
|
||
|
|
--spacing-small: 5px;
|
||
|
|
--spacing-medium: 7px;
|
||
|
|
--spacing-large: 12px;
|
||
|
|
--font-size: 12px;
|
||
|
|
--font-size-large: 14px;
|
||
|
|
--font-size-larger: 16px;
|
||
|
|
--line-height: 16px;
|
||
|
|
--line-height-larger: 20px;
|
||
|
|
--primary-color: var(--app-primary);
|
||
|
|
--text-color-dark: #212529;
|
||
|
|
--text-color: #585858;
|
||
|
|
--text-color-light: #65727e;
|
||
|
|
--border-color: #bebebe;
|
||
|
|
--border-color-light: #f1f3f5;
|
||
|
|
--input-placeholder: #65727e;
|
||
|
|
--input-background: #e9e9ed;
|
||
|
|
--input-border: #dee2e6;
|
||
|
|
--input-border-active: #c1c9d0;
|
||
|
|
--input-border-invalid: #e44e4e;
|
||
|
|
--input-outline-invalid: rgba(219, 138, 138, 0.5);
|
||
|
|
--input-color: #e9e9ed;
|
||
|
|
--input-disabled: #f7f7f7;
|
||
|
|
--input-min-height: 45px;
|
||
|
|
--options-height: 40dvh;
|
||
|
|
--option-background: #f3f4f7;
|
||
|
|
--border-radius: 5px;
|
||
|
|
--icon-size: 12px;
|
||
|
|
--icon-space: 30px;
|
||
|
|
--checkbox-size: 16px;
|
||
|
|
--checkbox-radius: 4px;
|
||
|
|
--checkbox-border: #ced4da;
|
||
|
|
--checkbox-background: #fff;
|
||
|
|
--checkbox-active: #fff;
|
||
|
|
--checkbox-thickness: 2px;
|
||
|
|
}
|
||
|
|
/* Overrides for MultiSelect */
|
||
|
|
.multi-select {
|
||
|
|
--spacing-smaller: 3px;
|
||
|
|
--spacing-small: 5px;
|
||
|
|
--spacing-medium: 7px;
|
||
|
|
--spacing-large: 12px;
|
||
|
|
--font-size: 12px;
|
||
|
|
--font-size-large: 14px;
|
||
|
|
--font-size-larger: 16px;
|
||
|
|
--line-height: 16px;
|
||
|
|
--line-height-larger: 20px;
|
||
|
|
--primary-color: var(--app-primary);
|
||
|
|
--text-color-dark: var(--app-contrast);
|
||
|
|
--text-color: var(--app-muted-color);
|
||
|
|
--text-color-light: var(--app-muted-color);
|
||
|
|
--border-color: var(--app-form-element-border-color);
|
||
|
|
--border-color-light: var(--app-muted-border-color);
|
||
|
|
--input-placeholder: var(--app-form-element-placeholder-color);
|
||
|
|
--input-background: var(--app-form-element-background-color);
|
||
|
|
--input-border: var(--app-form-element-border-color);
|
||
|
|
--input-border-active: var(--app-primary-focus);
|
||
|
|
--input-border-invalid: var(--app-form-element-invalid-border-color);
|
||
|
|
--input-outline-invalid: var(--app-form-element-invalid-active-shadow);
|
||
|
|
--input-color: var(--app-form-element-color);
|
||
|
|
--input-disabled: var(--app-form-element-disabled-background-color);
|
||
|
|
--input-min-height: calc(
|
||
|
|
1rem * var(--app-line-height) + var(--app-form-element-spacing-vertical) *
|
||
|
|
2 + var(--app-border-width) * 2
|
||
|
|
);
|
||
|
|
--options-height: 40dvh;
|
||
|
|
--option-background: var(--badge-neutral-bg);
|
||
|
|
--border-radius: var(--app-border-radius);
|
||
|
|
--icon-size: 12px;
|
||
|
|
--icon-space: 30px;
|
||
|
|
--checkbox-size: 16px;
|
||
|
|
--checkbox-radius: 4px;
|
||
|
|
--checkbox-border: var(--app-form-element-border-color);
|
||
|
|
--checkbox-background: var(--app-form-element-background-color);
|
||
|
|
--checkbox-active: var(--app-form-element-background-color);
|
||
|
|
--checkbox-thickness: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select
|
||
|
|
.multi-select-options
|
||
|
|
.multi-select-option
|
||
|
|
.multi-select-option-radio,
|
||
|
|
.multi-select
|
||
|
|
.multi-select-options
|
||
|
|
.multi-select-all
|
||
|
|
.multi-select-option-radio {
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
.multi-select
|
||
|
|
.multi-select-options
|
||
|
|
.multi-select-option
|
||
|
|
.multi-select-option-radio,
|
||
|
|
.multi-select
|
||
|
|
.multi-select-options
|
||
|
|
.multi-select-all
|
||
|
|
.multi-select-option-radio {
|
||
|
|
padding: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select {
|
||
|
|
margin-bottom: var(--app-spacing);
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select.disabled {
|
||
|
|
opacity: 0.65;
|
||
|
|
cursor: not-allowed;
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select.disabled .multi-select-header,
|
||
|
|
.multi-select.disabled .multi-select-options {
|
||
|
|
pointer-events: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select .multi-select-header {
|
||
|
|
background: var(--app-form-element-background-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select .multi-select-options {
|
||
|
|
background: var(--app-form-element-background-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select .multi-select-header .multi-select-header-option {
|
||
|
|
border: 1px solid var(--app-border);
|
||
|
|
}
|
||
|
|
|
||
|
|
.multi-select .multi-select-header {
|
||
|
|
padding-left: 7px;
|
||
|
|
}
|