diff --git a/src/webparts/requestPortal/features/myRequests/RequestsFilterBar.module.scss b/src/webparts/requestPortal/features/myRequests/RequestsFilterBar.module.scss new file mode 100644 index 0000000..d5c525d --- /dev/null +++ b/src/webparts/requestPortal/features/myRequests/RequestsFilterBar.module.scss @@ -0,0 +1,82 @@ +@import '../../../../styles/design-tokens'; + +// Ниже этой ширины контролы встают в колонку во всю ширину — в строку они +// на телефоне не помещаются даже с переносом. +$bar-stack-breakpoint: 640px; + +.bar { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: $sp-3; + margin-bottom: $sp-4; + + @media (max-width: $bar-stack-breakpoint) { + flex-direction: column; + align-items: stretch; + } +} + +// Общий вид полей — как у поиска в шапке таблицы (см. RequestsTableView.module.scss). +@mixin field { + padding: 9px 13px; + border: 1px solid $gray-300; + border-radius: $r-sm; + background-color: $white; + font-family: $font-sans; + font-size: $fs-sm; + color: $gray-900; + transition: .18s; + + @include input-focus-gold; +} + +.select { + @include field; + + // appearance: none + своя SVG-галочка — как в shared/ui/Select. Нативная + // стрелка ОС рисуется своим шрифтом и рядом с остальными полями портала + // выглядит чужеродно (и по-разному в разных браузерах). + appearance: none; + padding-right: 34px; + background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236B7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right 12px center; + cursor: pointer; +} + +.period { + display: flex; + align-items: center; + gap: $sp-2; + + @media (max-width: $bar-stack-breakpoint) { + flex-wrap: wrap; + } +} + +.periodLabel { + font-size: $fs-sm; + color: $gray-500; + white-space: nowrap; +} + +.date { + @include field; + // Нативный date-инпут на iOS без явного размера схлопывается в ноль. + min-width: 140px; + + @media (max-width: $bar-stack-breakpoint) { + flex: 1; + } +} + +// Цвета пунктов списка статусов — те же, что у StatusBadge. Только color: +// background-color нативный