improvements

2026-10-02 20:31:49 +03:00
parent 5ad60b819a
commit 6460846134
79 changed files with 21275 additions and 7875 deletions
--- a/modules/home/departuresCard/selectMenu.module.scss
+++ b/modules/home/departuresCard/selectMenu.module.scss
@@ -0,0 +1,153 @@
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+  font-size: 0.95rem;
+  font-weight: 700;
+}
+
+.label {
+  color: #455e91;
+}
+
+.trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 56px;
+  padding: 16px;
+  border: 0;
+  border-radius: 16px;
+  background: #fff;
+  color: #2c4678;
+  font: inherit;
+  text-align: left;
+  transition: background 0.25s ease;
+
+  span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.3s ease;
+  }
+  &:disabled {
+    color: #455e91;
+    opacity: 0.65;
+  }
+  &:hover:not(:disabled),
+  &.open {
+    background: #d8e2ff;
+  }
+  &.open svg {
+    transform: rotate(180deg);
+  }
+}
+
+.trigger:focus-visible,
+.search:focus-visible {
+  outline: 3px solid #2c4678;
+  outline-offset: 3px;
+}
+
+.panel {
+  position: fixed;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+  padding: 8px;
+  border: 1px solid #efefef;
+  border-radius: 16px;
+  background: #fafafa;
+  color: #2c4678;
+  box-shadow: 0 4px 16px #00000014;
+  animation: menuIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.search {
+  flex-shrink: 0;
+  width: calc(100% - 8px);
+  margin: 4px 4px 10px;
+  padding: 12px;
+  border: 0;
+  border-radius: 10px;
+  background: #f3f3fa;
+  color: #2c4678;
+  font: inherit;
+  font-size: 0.9rem;
+  user-select: text;
+  -webkit-user-select: text;
+  cursor: text;
+  &::placeholder {
+    color: #455e91;
+  }
+}
+
+.menuLabel,
+.noResults {
+  padding: 8px 12px;
+  color: #455e91;
+  font-size: 0.85rem;
+}
+
+.options {
+  list-style: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  min-height: 0;
+  scrollbar-width: thin;
+  scrollbar-color: #aec6ff transparent;
+}
+
+.option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  width: 100%;
+  min-height: 44px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-align: left;
+  overflow-wrap: anywhere;
+  transition: background 0.2s ease;
+  &:hover,
+  &.active {
+    background: #efefef;
+  }
+  &.selected {
+    background: #d8e2ff;
+  }
+}
+
+@keyframes menuIn {
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .panel {
+    animation: none;
+  }
+  .trigger,
+  .trigger svg,
+  .option {
+    transition: none;
+  }
+}