194 lines
4.5 KiB
CSS
194 lines
4.5 KiB
CSS
/**
|
||
* iOS-style Search Component
|
||
*
|
||
* Поле поиска в стиле iOS с иконкой лупы и кнопкой очистки
|
||
* Переиспользуемый компонент для различных страниц списков
|
||
*
|
||
* Использование:
|
||
* <link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
|
||
*
|
||
* HTML структура:
|
||
* <div class="ios-search">
|
||
* <i class="bi bi-search"></i>
|
||
* <input type="text" class="ios-search-input" placeholder="Поиск...">
|
||
* <button class="ios-search-clear" type="button">
|
||
* <i class="bi bi-x-lg"></i>
|
||
* </button>
|
||
* </div>
|
||
*/
|
||
|
||
/* ===== CSS ПЕРЕМЕННЫЕ ДЛЯ ОТСТУПОВ ===== */
|
||
:root {
|
||
--ios-search-padding-left: 36px;
|
||
--ios-search-padding-right: 36px;
|
||
--ios-search-icon-left: 10px;
|
||
--ios-search-clear-right: 4px;
|
||
}
|
||
|
||
/* ===== Контейнер поиска ===== */
|
||
.ios-search {
|
||
position: relative;
|
||
width: 100%;
|
||
max-width: 420px;
|
||
}
|
||
|
||
/* ===== Поле ввода ===== */
|
||
.ios-search-input {
|
||
width: 100%;
|
||
height: 40px;
|
||
padding-left: var(--ios-search-padding-left);
|
||
padding-right: var(--ios-search-padding-right);
|
||
padding-top: var(--space-1);
|
||
padding-bottom: var(--space-1);
|
||
border-radius: 14px;
|
||
border: 1px solid var(--bs-border-color);
|
||
background: color-mix(in srgb, var(--bs-body-bg), #000 4%);
|
||
font-size: 15px;
|
||
outline: none;
|
||
transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
|
||
}
|
||
|
||
/* Скрываем нативный крестик браузера у type="search" */
|
||
.ios-search-input::-webkit-search-cancel-button {
|
||
display: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.ios-search-input::-webkit-search-decoration {
|
||
display: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
.ios-search-input::-ms-clear {
|
||
display: none;
|
||
}
|
||
|
||
/* Тёмная тема */
|
||
[data-bs-theme="dark"] .ios-search-input {
|
||
background: color-mix(in srgb, var(--bs-body-bg), #fff 6%);
|
||
}
|
||
|
||
/* Фокус */
|
||
.ios-search-input:focus {
|
||
border-color: var(--bs-primary);
|
||
box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.15);
|
||
background: var(--bs-body-bg);
|
||
}
|
||
|
||
/* Placeholder */
|
||
.ios-search-input::placeholder {
|
||
color: var(--bs-secondary-color);
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* ===== Иконка поиска (лупа) ===== */
|
||
.ios-search > .bi-search {
|
||
position: absolute;
|
||
left: var(--ios-search-icon-left);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
opacity: 0.55;
|
||
pointer-events: none;
|
||
font-size: 0.95rem;
|
||
color: var(--bs-body-color);
|
||
}
|
||
|
||
/* ===== Кнопка очистки ===== */
|
||
.ios-search-clear {
|
||
position: absolute;
|
||
right: var(--ios-search-clear-right);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
border: 0;
|
||
background: transparent;
|
||
padding: var(--space-1);
|
||
display: none;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
transition: background 0.2s ease;
|
||
}
|
||
|
||
.ios-search-clear:hover {
|
||
background: color-mix(in srgb, var(--bs-body-color), transparent 90%);
|
||
}
|
||
|
||
.ios-search-clear:active {
|
||
background: color-mix(in srgb, var(--bs-body-color), transparent 85%);
|
||
}
|
||
|
||
.ios-search-clear .bi-x-lg {
|
||
opacity: 0.6;
|
||
font-size: 0.9rem;
|
||
color: var(--bs-body-color);
|
||
}
|
||
|
||
/* Показываем кнопку очистки когда есть текст */
|
||
.ios-search-input:not(:placeholder-shown) ~ .ios-search-clear {
|
||
display: block;
|
||
}
|
||
|
||
/* ===== Вариации размеров ===== */
|
||
|
||
/* Маленький размер */
|
||
.ios-search.sm .ios-search-input {
|
||
height: 34px;
|
||
font-size: 14px;
|
||
padding-left: 32px;
|
||
padding-right: 32px;
|
||
padding-top: var(--space-1);
|
||
padding-bottom: var(--space-1);
|
||
border-radius: 12px;
|
||
}
|
||
|
||
.ios-search.sm > .bi-search {
|
||
left: 8px;
|
||
font-size: 0.85rem;
|
||
}
|
||
|
||
.ios-search.sm .ios-search-clear {
|
||
right: 3px;
|
||
padding: var(--space-1);
|
||
}
|
||
|
||
/* Большой размер */
|
||
.ios-search.lg .ios-search-input {
|
||
height: 48px;
|
||
font-size: 16px;
|
||
padding-left: 42px;
|
||
padding-right: 42px;
|
||
padding-top: calc(var(--space-1) + var(--space-1));
|
||
padding-bottom: calc(var(--space-1) + var(--space-1));
|
||
border-radius: 16px;
|
||
}
|
||
|
||
.ios-search.lg > .bi-search {
|
||
left: 12px;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.ios-search.lg .ios-search-clear {
|
||
right: 6px;
|
||
padding: var(--space-1);
|
||
}
|
||
|
||
/* ===== Вариация: только иконка без кнопки очистки ===== */
|
||
.ios-search.icon-only .ios-search-input {
|
||
padding-right: 12px;
|
||
}
|
||
|
||
.ios-search.icon-only .ios-search-clear {
|
||
display: none !important;
|
||
}
|
||
|
||
/* ===== Адаптивность ===== */
|
||
@media (max-width: 576px) {
|
||
.ios-search {
|
||
max-width: 100%;
|
||
}
|
||
|
||
.ios-search-input {
|
||
height: 38px;
|
||
font-size: 14px;
|
||
}
|
||
}
|