Compare commits
3 Commits
5ffa7ea7a0
...
cf0b38a8bb
| Author | SHA1 | Date |
|---|---|---|
 nimtaurel
|
cf0b38a8bb | |
nimtaurel
|
8e7ed8f785 | |
|
nimtaurel
|
2534ae1f48 |
|
|
@ -10,7 +10,7 @@
|
|||
namespace App\Modules\main\Components;
|
||||
|
||||
use A7kz\Platform\Modules\Platform\Core\Services\Base\Component;
|
||||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\Request;
|
||||
use Illuminate\Support\Carbon;
|
||||
use Illuminate\Support\Facades\Http;
|
||||
|
||||
|
|
@ -21,18 +21,21 @@ class Main extends Component
|
|||
parent::__construct($params, $module);
|
||||
$this->template = 'pipicar::main.views.main';
|
||||
|
||||
// $request = new Request([
|
||||
// 'started_at' => Carbon::now()->toDateString(),
|
||||
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
|
||||
// ]);
|
||||
//
|
||||
// $response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
|
||||
// $this->params['cars'] = $response->getData(true);
|
||||
|
||||
$response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
|
||||
|
||||
$request = new \Illuminate\Http\Request([
|
||||
'started_at' => Carbon::now()->toDateString(),
|
||||
'ended_at' => Carbon::now()->addDays(3)->toDateString(),
|
||||
]);
|
||||
$this->params['cars'] = collect($response->json());
|
||||
|
||||
$response = (new \App\Http\Controllers\MobileApiController)->getAvailableMarksList($request);
|
||||
$this->params['cars'] = collect($response->getData(true));
|
||||
|
||||
// $class_filters = Request::input('class_filters') ?? null;
|
||||
// $response = Http::get('https://cvm10.a7.kz/api/mobile/getAvailableMarksList', [
|
||||
// 'started_at' => Carbon::now()->toDateString(),
|
||||
// 'ended_at' => Carbon::now()->addDays(3)->toDateString(),
|
||||
// ]);
|
||||
// $this->params['cars'] = collect($response->json());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,108 +1,174 @@
|
|||
<div class="container text-center my-3 main-page">
|
||||
<p class="top-title">Доступные автомобили</p>
|
||||
<p class="title with-line line-center">Выберите лучший автомобиль</p>
|
||||
<p class="subtitle">У нас есть автомобили разных классов. Выберите свой идеальный вариант и забронируйте его.</p>
|
||||
<div class="row mx-auto my-auto">
|
||||
<div id="recipeCarousel" class="carousel slide w-100" data-bs-ride="carousel">
|
||||
<div class="carousel-inner w-100" role="listbox">
|
||||
@php $carsValues = array_values($cars->toArray()); @endphp
|
||||
@for($i = 0; $i < count($carsValues); $i++)
|
||||
@if($i % 1 == 0)
|
||||
<div class="carousel-item {{ $i == 0 ? 'active' : '' }}">
|
||||
<div class="row">
|
||||
@for($j = $i; $j < $i + 3 && $j < count($carsValues); $j++)
|
||||
@php $car = $carsValues[$j]; @endphp
|
||||
<div class="col-md-4">
|
||||
<div class="car-card">
|
||||
<img class="img-fluid" src="{{ $car['photo'] ?? asset('img/default.png') }}" alt="Car Image">
|
||||
<div class="title">{{ $car['brand'] . ' ' . $car['mark'] . ' - ' . $car['year'] }}</div>
|
||||
<div class="card-car-chars">
|
||||
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p> Кондиционер</p></div>
|
||||
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p> {{ $car['fuel_type'] }}</p></div>
|
||||
<div class="add-li"> <i class="material-symbols-outlined">groups</i><p> {{ $car['people'] }} мест</p></div>
|
||||
</div>
|
||||
<div class="car-card-footer">
|
||||
<div class="cost">
|
||||
<small>Базовая ставка</small>
|
||||
<p>
|
||||
@isset($car['tariffs'][0]['price'])
|
||||
{{ $car['tariffs'][0]['price'] }} ₸
|
||||
@endisset
|
||||
</p>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Арендовать</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endfor
|
||||
<div class="main-page-header">
|
||||
<p class="top-title">Доступные автомобили</p>
|
||||
<p class="title">Выберите лучший автомобиль</p>
|
||||
</div>
|
||||
<div class="container my-4">
|
||||
<div class="row">
|
||||
<div class="col-12 col-md-3 card-catalog-left-container">
|
||||
<div class="text-end">
|
||||
<button class="btn btn-outline" id="toggleFilterBtn">
|
||||
@lang('Фильтр')
|
||||
</button>
|
||||
</div>
|
||||
<div class="card card-catalog-left-filter collapsible collapsed" id="filterCard">
|
||||
<div class="card-body">
|
||||
{{-- Дата начала --}}
|
||||
<form method="GET" id="filter">
|
||||
<div class="form-group mb-3 pb-4 d-flex flex-column justify-content-around align-content-center">
|
||||
<label class="form-label d-block">Даты аренды</label>
|
||||
<div class="d-flex flex-row justify-content-around align-content-center">
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="started_at"
|
||||
id="started_at"
|
||||
autocomplete="off"
|
||||
inputmode="numeric"
|
||||
pattern="\d{2}\.\d{2}\.\d{4}"
|
||||
placeholder="дд.мм.гггг"
|
||||
value="{{ request('started_at') }}"
|
||||
style="max-width: 120px">
|
||||
<span class="separator">–</span>
|
||||
<input type="text"
|
||||
class="form-control"
|
||||
name="ended_at"
|
||||
id="ended_at"
|
||||
autocomplete="off"
|
||||
inputmode="numeric"
|
||||
pattern="\d{2}\.\d{2}\.\d{4}"
|
||||
placeholder="дд.мм.гггг"
|
||||
value="{{ request('ended_at') }}"
|
||||
style="max-width: 120px">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Класс авто --}}
|
||||
<div class="mb-3 pb-4">
|
||||
<label class="form-label d-block">Класс авто</label>
|
||||
<div class="btn-group" role="group" aria-label="Класс">
|
||||
<input type="checkbox" class="btn-check" name="class_filters[]" value="1" id="class_option1" {{ in_array('1', (array) request('class_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="class_option1">Эконом</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="class_filters[]" value="2" id="class_option2" {{ in_array('2', (array) request('class_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="class_option2">Средний</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="class_filters[]" value="3" id="class_option3" {{ in_array('3', (array) request('class_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="class_option3">Бизнес</label>
|
||||
</div>
|
||||
</div>
|
||||
{{-- Тип кузова --}}
|
||||
<div class="mb-3 pb-4">
|
||||
<label class="form-label d-block">Тип кузова</label>
|
||||
<div class="btn-group" role="group" aria-label="Кузов">
|
||||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="1" id="bodywork_option1" {{ in_array('1', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="bodywork_option1">Седан</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="2" id="bodywork_option2" {{ in_array('2', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="bodywork_option2">Кроссовер</label>
|
||||
|
||||
<input type="checkbox" class="btn-check" name="bodywork_filters[]" value="3" id="bodywork_option3" {{ in_array('3', (array) request('bodywork_filters')) ? 'checked' : '' }}>
|
||||
<label class="btn btn-outline-primary" for="bodywork_option3">Внедорожник</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Кнопка --}}
|
||||
<button type="submit" class="btn btn-success" style="width: 100%; font-size: 14px">
|
||||
@lang('Искать')
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
@endif
|
||||
@endfor
|
||||
</div>
|
||||
|
||||
<div class="card card-catalog-left mt-4">
|
||||
<div class="card-body">
|
||||
<p class="title">Все предложения включают:</p>
|
||||
<ul>
|
||||
<li><i class="material-symbols-outlined">done</i>
|
||||
<span> Бесплатное перебронирование и отмена</span></li>
|
||||
<li><i class="material-symbols-outlined">done</i>
|
||||
<span> Лимит пробега по городу 200 км</span></li>
|
||||
<li><i class="material-symbols-outlined">done</i> <span> Страхование гражданской ответственности</span></li>
|
||||
<li><i class="material-symbols-outlined">done</i> <span> Эконом класс</span></li>
|
||||
<li><i class="material-symbols-outlined">done</i> <span> Депозит</span></li>
|
||||
<li><i class="material-symbols-outlined">done</i>
|
||||
<span> Межгород по дополнительным тарифам</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card card-catalog-left2 mt-4">
|
||||
<div class="card-body">
|
||||
<p class="title">Другие условия:</p>
|
||||
<p class="cr-item">Минимальный возраст водителя - 21 год</p>
|
||||
<p class="cr-item">Минимальный срок владения водительскими правами - 2 года</p>
|
||||
<p class="title m-0">Прочие условия:</p>
|
||||
<a href="https://pcar.kz/#faq" target="_blank" class="btn-link">Условия аренды автомобиля</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-md-9 mb-4 d-flex justify-content-center">
|
||||
<div class="row custom-row">
|
||||
@php $carsValues = array_values($cars->toArray()); @endphp
|
||||
@foreach($carsValues as $car)
|
||||
<div class="col-12 col-md-6 mb-4">
|
||||
<div class="car-card">
|
||||
<img class="img-fluid" src="{{ $car['photo'] ?? asset('img/default.png') }}" alt="Car Image">
|
||||
<div class="title">{{ $car['brand'] . ' ' . $car['mark'] . ' - ' . $car['year'] }}</div>
|
||||
<div class="card-car-chars">
|
||||
<div class="add-li"><i class="material-symbols-outlined">ac_unit</i><p> Кондиционер</p></div>
|
||||
<div class="add-li"><i class="material-symbols-outlined">auto_transmission</i><p> {{ $car['fuel_type'] }}</p></div>
|
||||
<div class="add-li"><i class="material-symbols-outlined">groups</i><p> {{ $car['people'] }} мест</p></div>
|
||||
</div>
|
||||
<div class="car-card-footer">
|
||||
<div class="cost">
|
||||
<small>Базовая ставка</small>
|
||||
<p class="m-0">@isset($car['tariffs'][0]['price']){{ $car['tariffs'][0]['price'] }} ₸@endisset</p>
|
||||
</div>
|
||||
<a href="#" class="btn btn-primary">Арендовать</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<a class="carousel-control-prev" href="#recipeCarousel" role="button" data-bs-slide="prev">
|
||||
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class="bi bi-chevron-left"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="carousel-control-next" href="#recipeCarousel" role="button" data-bs-slide="next">
|
||||
<span class="icon-container rounded-circle d-flex align-items-center justify-content-center">
|
||||
<i class="bi bi-chevron-right"></i>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const carousel = new bootstrap.Carousel(document.querySelector('#recipeCarousel'), {
|
||||
interval: 10000,
|
||||
ride: 'carousel',
|
||||
wrap: true
|
||||
function debounce(func, wait) {
|
||||
let timeout;
|
||||
return function (...args) {
|
||||
const context = this;
|
||||
clearTimeout(timeout);
|
||||
timeout = setTimeout(() => func.apply(context, args), wait);
|
||||
};
|
||||
}
|
||||
|
||||
const datepickerConfig = {
|
||||
buttons: ['today', 'clear'],
|
||||
autoClose: true
|
||||
};
|
||||
|
||||
const startedAtPicker = new AirDatepicker('#started_at', datepickerConfig);
|
||||
const endedAtPicker = new AirDatepicker('#ended_at', datepickerConfig);
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
const toggleBtn = document.getElementById('toggleFilterBtn');
|
||||
const filterCard = document.getElementById('filterCard');
|
||||
|
||||
let isExpanded = false;
|
||||
|
||||
toggleBtn.addEventListener('click', function () {
|
||||
if (!isExpanded) {
|
||||
filterCard.style.transition = 'max-height 1.2s ease, opacity 1.2s ease';
|
||||
filterCard.classList.add('expanded');
|
||||
isExpanded = true;
|
||||
} else {
|
||||
filterCard.style.transition = 'max-height 0.4s ease, opacity 0.4s ease';
|
||||
filterCard.classList.remove('expanded');
|
||||
isExpanded = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.carousel-control-prev,
|
||||
.carousel-control-next {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: white;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
||||
border: 1px solid #ddd;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.carousel-control-prev {
|
||||
left: -20px;
|
||||
}
|
||||
|
||||
.carousel-control-next {
|
||||
right: -20px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: black; /* Цвет иконки */
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
/* Hover эффект */
|
||||
.carousel-control-prev:hover,
|
||||
.carousel-control-next:hover {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.bi::before, [class^=bi-]::before, [class*=" bi-"]::before {
|
||||
vertical-align: -0.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -265,51 +265,41 @@ body {
|
|||
|
||||
.main-page {
|
||||
padding: 20px;
|
||||
.top-title {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: #a8a8a8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
.main-page-header {
|
||||
.top-title {
|
||||
margin: 0;
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
font-size: 12px;
|
||||
color: #a8a8a8;
|
||||
font-weight: 600;
|
||||
}
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 36px;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 20px;
|
||||
color: #5d5d5d;
|
||||
margin: 0 0 50px 0;
|
||||
}
|
||||
.with-line.line-center:before {
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
.with-line.line-center:before {
|
||||
left: 50%;
|
||||
transform: translate(-50%);
|
||||
}
|
||||
|
||||
.with-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
width: 45px;
|
||||
height: 4px;
|
||||
background-color: #01b0e8;
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon, .carousel-control-next-icon {
|
||||
width: 3.125rem;
|
||||
height: 3.125rem;
|
||||
}
|
||||
|
||||
.carousel-control-next-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.carousel-control-prev-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='black'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
|
||||
.with-line:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
width: 45px;
|
||||
height: 4px;
|
||||
background-color: #01b0e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -53,78 +53,197 @@ iframe {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.carousel-inner {
|
||||
overflow: hidden;
|
||||
|
||||
.carousel-item {
|
||||
transition: transform 0.6s ease-in-out;
|
||||
.row.custom-row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: flex-start; // Можно center, если хочешь выравнивать
|
||||
|
||||
.row {
|
||||
.car-card {
|
||||
width: 100%;
|
||||
transition: .3s all ease;
|
||||
padding: 25px 20px;
|
||||
border-radius: 8px;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.add-li {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 35px;
|
||||
.car-card {
|
||||
margin: 0 10px;
|
||||
min-width: calc(33.333% - 20px);
|
||||
transition: .3s all ease;
|
||||
padding: 25px 20px;
|
||||
border-radius: 8px;
|
||||
border-bottom: 2px solid transparent;
|
||||
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
|
||||
align-content: center;
|
||||
color: #a8a8a8;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
transition: .3s all ease;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 240px;
|
||||
object-fit: contain;
|
||||
}
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.car-card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
.add-li {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
.cost {
|
||||
font-size: 1rem;
|
||||
small {
|
||||
font-size: .875em;
|
||||
color: #a8a8a8;
|
||||
margin-bottom: 5px;
|
||||
font-size: 16px;
|
||||
transition: .3s all ease;
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.car-card-footer {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
border-top: 1px solid #ddd;
|
||||
padding-top: 10px;
|
||||
margin-top: 10px;
|
||||
.cost p {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
p {
|
||||
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.car-card:hover {
|
||||
box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
|
||||
border-bottom: 2px solid #01B0E8;
|
||||
.add-li {
|
||||
p {
|
||||
color: #1e1e1e;
|
||||
}
|
||||
i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car-card:hover {
|
||||
box-shadow: #0000001a 0 20px 25px -5px, #0000000a 0 10px 10px -5px;
|
||||
border-bottom: 2px solid #01B0E8;
|
||||
|
||||
.add-li {
|
||||
p {
|
||||
color: #1e1e1e;
|
||||
}
|
||||
|
||||
i {
|
||||
color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-catalog-left-container {
|
||||
.card {
|
||||
border: none;
|
||||
box-shadow: #0000001a 0 4px 6px -1px, #0000000f 0 2px 4px -1px;
|
||||
padding: 0;
|
||||
border-radius: .25rem;
|
||||
margin: 0;
|
||||
.card-body {
|
||||
flex: 1 1 auto;
|
||||
padding: 1rem 1rem;
|
||||
.title {
|
||||
font-weight: 700;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-catalog-left {
|
||||
background-color: #01b0e8;
|
||||
color: #fff;
|
||||
.title {
|
||||
font-size: 16px;
|
||||
}
|
||||
ul {
|
||||
padding-inline-start: 0;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 7px;
|
||||
padding-bottom: 7px;
|
||||
border-bottom: 1px dashed #45d2f4;
|
||||
font-size: 14px;
|
||||
justify-content: start;
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-catalog-left2 {
|
||||
background-color:#fff;
|
||||
color: #7e7e7e;
|
||||
text-align: left;
|
||||
.title {
|
||||
font-size: 18px;
|
||||
color: #333235;
|
||||
}
|
||||
.cr-item {
|
||||
font-size: 14px;
|
||||
color: #7e7e7e;
|
||||
}
|
||||
.btn-link {
|
||||
font-size: 14px;
|
||||
color: #01b0e8;
|
||||
}
|
||||
}
|
||||
.card-catalog-left-filter {
|
||||
transition: max-height 0.3s ease, opacity 0.3s ease;
|
||||
overflow: hidden;
|
||||
.form-label {
|
||||
color: #a8a8a8;
|
||||
}
|
||||
#started_at, #ended_at {
|
||||
font-size: 14px;
|
||||
}
|
||||
.separator {
|
||||
font-size: 18px;
|
||||
padding: 0 8px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
color: #333235;
|
||||
}
|
||||
.btn-group {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap !important;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
.btn {
|
||||
flex: none;
|
||||
flex-shrink: 0;
|
||||
width: auto;
|
||||
font-size: 14px;
|
||||
padding: 5px 12px;
|
||||
color: #333235;
|
||||
background-color: #F1F1F1;
|
||||
border-radius: 0.8rem!important;
|
||||
}
|
||||
|
||||
.btn-check:checked + .btn {
|
||||
background-color: #01b0e8;
|
||||
color: #fff;
|
||||
border-color: #01b0e8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.collapsible.expanded {
|
||||
max-height: 1000px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue