Виджет для формы выбора зеркал

dbapp/mainapp/static/css/checkbox-select-multiple.css

@@ -0,0 +1,160 @@
+.checkbox-multiselect-wrapper {
+    position: relative;
+    width: 100%;
+}
+
+.multiselect-input-container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    min-height: 38px;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    background-color: #fff;
+    cursor: text;
+    padding: 4px 30px 4px 4px;
+    flex-wrap: wrap;
+    gap: 4px;
+}
+
+.multiselect-input-container:focus-within {
+    border-color: #86b7fe;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+}
+
+.multiselect-tags {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    flex: 0 0 auto;
+}
+
+.multiselect-tag {
+    display: inline-flex;
+    align-items: center;
+    background-color: #e9ecef;
+    border: 1px solid #dee2e6;
+    border-radius: 0.25rem;
+    padding: 2px 8px;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    white-space: nowrap;
+}
+
+.multiselect-tag-remove {
+    margin-left: 6px;
+    cursor: pointer;
+    color: #6c757d;
+    font-weight: bold;
+    border: none;
+    background: none;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 1;
+}
+
+.multiselect-tag-remove:hover {
+    color: #dc3545;
+}
+
+.multiselect-search {
+    flex: 1 1 auto;
+    min-width: 120px;
+    border: none;
+    outline: none;
+    padding: 4px;
+    font-size: 0.875rem;
+}
+
+.multiselect-search:focus {
+    box-shadow: none;
+}
+
+.multiselect-clear {
+    position: absolute;
+    right: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+    background: none;
+    border: none;
+    font-size: 1.5rem;
+    line-height: 1;
+    color: #6c757d;
+    cursor: pointer;
+    padding: 0;
+    width: 20px;
+    height: 20px;
+    display: none;
+}
+
+.multiselect-clear:hover {
+    color: #dc3545;
+}
+
+.multiselect-input-container.has-selections .multiselect-clear {
+    display: block;
+}
+
+.multiselect-dropdown {
+    position: absolute;
+    left: 0;
+    right: 0;
+    background-color: #fff;
+    border: 1px solid #ced4da;
+    border-radius: 0.25rem;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
+    max-height: 300px;
+    overflow-y: auto;
+    z-index: 1000;
+    display: none;
+}
+
+/* Открытие вверх (по умолчанию) */
+.multiselect-dropdown {
+    bottom: 100%;
+    margin-bottom: 2px;
+}
+
+/* Открытие вниз (если места сверху недостаточно) */
+.multiselect-dropdown.dropdown-below {
+    bottom: auto;
+    top: 100%;
+    margin-top: 2px;
+    margin-bottom: 0;
+}
+
+.multiselect-dropdown.show {
+    display: block;
+}
+
+.multiselect-options {
+    padding: 4px 0;
+}
+
+.multiselect-option {
+    display: flex;
+    align-items: center;
+    padding: 8px 12px;
+    cursor: pointer;
+    margin: 0;
+    transition: background-color 0.15s ease-in-out;
+}
+
+.multiselect-option:hover {
+    background-color: #f8f9fa;
+}
+
+.multiselect-option input[type="checkbox"] {
+    margin-right: 8px;
+    cursor: pointer;
+}
+
+.multiselect-option .option-label {
+    flex: 1;
+    user-select: none;
+}
+
+.multiselect-option.hidden {
+    display: none;
+}