Save
This commit is contained in:
Roman Pyrih
@@ -13,12 +13,13 @@
|
||||
*/
|
||||
|
||||
function register_hello_world_widget( $widgets_manager ) {
|
||||
|
||||
require_once( __DIR__ . '/widgets/images-list.php' );
|
||||
require_once( __DIR__ . '/widgets/acf-product-parameters.php' );
|
||||
require_once( __DIR__ . '/widgets/places-map.php' );
|
||||
|
||||
$widgets_manager->register( new \Elementor_Images_List() );
|
||||
$widgets_manager->register( new \Elementor_ACF_Product_Parameters() );
|
||||
$widgets_manager->register( new \Elementor_Places_Map() );
|
||||
}
|
||||
add_action( 'elementor/widgets/register', 'register_hello_world_widget' );
|
||||
|
||||
|
||||
629
wp-content/plugins/elementor-addon/widgets/places-map.php
Normal file
629
wp-content/plugins/elementor-addon/widgets/places-map.php
Normal file
@@ -0,0 +1,629 @@
|
||||
<?php
|
||||
if (!defined('ABSPATH')) {
|
||||
exit;
|
||||
}
|
||||
|
||||
use Elementor\Controls_Manager;
|
||||
use Elementor\Icons_Manager;
|
||||
use Elementor\Repeater;
|
||||
use Elementor\Utils;
|
||||
|
||||
class Elementor_Places_Map extends \Elementor\Widget_Base
|
||||
{
|
||||
|
||||
public function get_name()
|
||||
{
|
||||
return 'places-map';
|
||||
}
|
||||
|
||||
public function get_title()
|
||||
{
|
||||
return esc_html__('Places Map', 'elementor-addon');
|
||||
}
|
||||
|
||||
public function get_icon()
|
||||
{
|
||||
return 'eicon-code';
|
||||
}
|
||||
|
||||
public function get_categories()
|
||||
{
|
||||
return ['basic'];
|
||||
}
|
||||
|
||||
public function get_keywords()
|
||||
{
|
||||
return ['map', 'places'];
|
||||
}
|
||||
|
||||
protected function register_controls()
|
||||
{
|
||||
$this->start_controls_section(
|
||||
'list_section',
|
||||
[
|
||||
'label' => esc_html__('List', 'elementor-addon'),
|
||||
]
|
||||
);
|
||||
|
||||
|
||||
$this->end_controls_section();
|
||||
}
|
||||
|
||||
public function get_script_depends() {
|
||||
$google_map_api = 'AIzaSyD-1SOVhJXr6HREtfmMILvlmV-hml3nxUg';
|
||||
wp_register_script(
|
||||
'google-maps-api',
|
||||
'https://maps.googleapis.com/maps/api/js?key=' . $google_map_api,
|
||||
[],
|
||||
null,
|
||||
true
|
||||
);
|
||||
return [ 'google-maps-api' ];
|
||||
}
|
||||
|
||||
|
||||
protected function render()
|
||||
{
|
||||
$settings = $this->get_settings_for_display();
|
||||
|
||||
$wojewodztwa = [
|
||||
'dolnoslaskie' => [
|
||||
'id' => 1,
|
||||
'name' => 'Dolnośląskie',
|
||||
],
|
||||
'kujawsko-pomorskie' => [
|
||||
'id' => 2,
|
||||
'name' => 'Kujawsko-Pomorskie',
|
||||
],
|
||||
'lubelskie' => [
|
||||
'id' => 3,
|
||||
'name' => 'Lubelskie',
|
||||
],
|
||||
'lubuskie' => [
|
||||
'id' => 4,
|
||||
'name' => 'Lubuskie',
|
||||
],
|
||||
'lodzkie' => [
|
||||
'id' => 5,
|
||||
'name' => 'Łódzkie',
|
||||
],
|
||||
'malopolskie' => [
|
||||
'id' => 6,
|
||||
'name' => 'Małopolskie',
|
||||
],
|
||||
'mazowieckie' => [
|
||||
'id' => 7,
|
||||
'name' => 'Mazowieckie',
|
||||
],
|
||||
'opolskie' => [
|
||||
'id' => 8,
|
||||
'name' => 'Opolskie',
|
||||
],
|
||||
'podkarpackie' => [
|
||||
'id' => 9,
|
||||
'name' => 'Podkarpackie',
|
||||
],
|
||||
'podlaskie' => [
|
||||
'id' => 10,
|
||||
'name' => 'Podlaskie',
|
||||
],
|
||||
'pomorskie' => [
|
||||
'id' => 11,
|
||||
'name' => 'Pomorskie',
|
||||
],
|
||||
'slaskie' => [
|
||||
'id' => 12,
|
||||
'name' => 'Śląskie',
|
||||
],
|
||||
'swietokrzyskie' => [
|
||||
'id' => 13,
|
||||
'name' => 'Świętokrzyskie',
|
||||
],
|
||||
'warminsko-mazurskie' => [
|
||||
'id' => 14,
|
||||
'name' => 'Warmińsko-Mazurskie',
|
||||
],
|
||||
'wielkopolskie' => [
|
||||
'id' => 15,
|
||||
'name' => 'Wielkopolskie',
|
||||
],
|
||||
'zachodniopomorskie' => [
|
||||
'id' => 16,
|
||||
'name' => 'Zachodniopomorskie',
|
||||
],
|
||||
];
|
||||
|
||||
$places_list = [
|
||||
[
|
||||
'id' => 1,
|
||||
'name' => "Bajdy",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => 49.761567564930246,
|
||||
'lng' => 21.683291268864682
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => '
|
||||
<p><strong>INWEST-PROFIL Spółka z ograniczoną odpowiedzialnością sp. k.</strong></p>
|
||||
<p>Bajdy 206</p>
|
||||
<p>38-471 Wojaszówka</p>
|
||||
<br/>
|
||||
<p>Krzysztof Szumlański</p>
|
||||
<p>tel. +48 13 43 850 38<br/>
|
||||
+48 13 43 858 75 wew. 45<br/>
|
||||
+48 695 874 548</p>
|
||||
<p>e-mail: <a href="mailto:szumlanskikrzysztof@inwestprofil.pl">szumlanskikrzysztof@inwestprofil.pl</a></p>
|
||||
<br/>
|
||||
<p>Dominik Ziomek</p>
|
||||
<p>tel. +48 13 43 850 38<br/>
|
||||
+48 13 43 858 75 wew. 44<br/>
|
||||
+48 695 874 548</p>
|
||||
<p>e-mail: <a href="mailto:ziomekdominik@inwestprofil.pl">ziomekdominik@inwestprofil.pl</a></p>
|
||||
'
|
||||
],
|
||||
[
|
||||
'id' => 2,
|
||||
'name' => "Jasło",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 3,
|
||||
'name' => "Krosno",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 4,
|
||||
'name' => "Rzeszów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 5,
|
||||
'name' => "Brzozów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 6,
|
||||
'name' => "Dębica",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 7,
|
||||
'name' => "Gorlice",
|
||||
'voivodeship' => $wojewodztwa['malopolskie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 8,
|
||||
'name' => "Jarosław",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 9,
|
||||
'name' => "Kolbuszowa",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 10,
|
||||
'name' => "Leżańsk",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 11,
|
||||
'name' => "Łańcut",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 12,
|
||||
'name' => "Mielec",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 13,
|
||||
'name' => "Przeworsk",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 14,
|
||||
'name' => "Ropczyce - Sędziszów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 15,
|
||||
'name' => "Sanok",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 16,
|
||||
'name' => "Strzyżów",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
[
|
||||
'id' => 17,
|
||||
'name' => "Ustrzyki Dolne",
|
||||
'voivodeship' => $wojewodztwa['podkarpackie'],
|
||||
'position' => [
|
||||
'lat' => null,
|
||||
'lng' => null
|
||||
],
|
||||
'icon' => "https://maps.google.com/mapfiles/ms/icons/yellow-dot.png",
|
||||
'description' => ''
|
||||
],
|
||||
];
|
||||
?>
|
||||
<section id="custom-places-map">
|
||||
<div class="s-content s-style-1">
|
||||
<div class="s-left-col">
|
||||
<div class="map-point-info">
|
||||
<div class="map-point-info--head">
|
||||
<h3><strong>znajdź</strong> <br /> najbliższy salon</h3>
|
||||
<div class="select-wrapper">
|
||||
<select name="voivodeship" id="voivodeship">
|
||||
<option value="" disabled selected>Województwa</option>
|
||||
<?php foreach ($wojewodztwa as $wojewodztwo): ?>
|
||||
<option value="<?= $wojewodztwo['name'] ?>">
|
||||
<?= $wojewodztwo['name'] ?>
|
||||
</option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="map-point-info--body">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="s-right-col">
|
||||
<div id="places-mapa" style="width: 100%;"></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script>
|
||||
jQuery(document).ready(function($) {
|
||||
const voivodeship = <?= json_encode($wojewodztwa); ?>;
|
||||
const placesList = <?= json_encode($places_list); ?>;
|
||||
|
||||
// function initMap() {
|
||||
const mapOptions = {
|
||||
// center: { lat: 50.0411, lng: 21.9991 },
|
||||
center: {
|
||||
lat: 51.9194,
|
||||
lng: 19.1451
|
||||
},
|
||||
// zoom: 11.2,
|
||||
zoom: 6,
|
||||
styles: [{
|
||||
"featureType": "all",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "administrative",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "landscape.man_made",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"visibility": "on"
|
||||
},
|
||||
{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"visibility": "simplified"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "geometry.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels",
|
||||
"stylers": [{
|
||||
"visibility": "simplified"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.text.fill",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"weight": "6.61"
|
||||
},
|
||||
{
|
||||
"lightness": "0"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "poi",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
},
|
||||
{
|
||||
"gamma": "1.5"
|
||||
},
|
||||
{
|
||||
"weight": "0.01"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"featureType": "road",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "road.highway",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.text",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "transit",
|
||||
"elementType": "labels.icon",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
},
|
||||
{
|
||||
"featureType": "water",
|
||||
"elementType": "all",
|
||||
"stylers": [{
|
||||
"saturation": "-100"
|
||||
}]
|
||||
}
|
||||
]
|
||||
};
|
||||
// }
|
||||
|
||||
const map1 = new google.maps.Map(document.getElementById("places-mapa"), mapOptions);
|
||||
|
||||
setupMapSection({
|
||||
map: map1,
|
||||
locations: placesList,
|
||||
mapWrapperId: 'custom-places-map',
|
||||
voivodeships: voivodeship
|
||||
});
|
||||
|
||||
function setupMapSection({
|
||||
map,
|
||||
locations,
|
||||
mapWrapperId,
|
||||
voivodeships
|
||||
}) {
|
||||
const wrapper = document.getElementById(mapWrapperId);
|
||||
const select = wrapper.querySelector("select[name='voivodeship']");
|
||||
const listContainer = wrapper.querySelector(".map-point-info--body");
|
||||
|
||||
const bounds = new google.maps.LatLngBounds();
|
||||
const markers = [];
|
||||
|
||||
|
||||
locations.forEach(loc => {
|
||||
if (loc.position && loc.position.lat && loc.position.lng) {
|
||||
const marker = new google.maps.Marker({
|
||||
position: loc.position,
|
||||
map: map,
|
||||
title: loc.name,
|
||||
icon: loc.icon || undefined
|
||||
});
|
||||
|
||||
marker.addListener("click", () => {
|
||||
const voivKey = Object.keys(voivodeships).find(k => voivodeships[k].id === loc.voivodeship.id);
|
||||
console.log(voivodeships);
|
||||
console.log(voivodeships[voivKey].name);
|
||||
|
||||
if (voivKey) {
|
||||
select.value = voivodeships[voivKey].name;
|
||||
renderList(voivodeships[voivKey].name);
|
||||
|
||||
setTimeout(() => {
|
||||
const itemEl = listContainer.querySelector(`.location-item[data-id="${loc.id}"]`);
|
||||
if (itemEl) {
|
||||
const itemRect = itemEl.getBoundingClientRect();
|
||||
const containerRect = listContainer.getBoundingClientRect();
|
||||
const offsetTop = itemRect.top - containerRect.top;
|
||||
console.log('itemRect.top: ', itemRect.top);
|
||||
console.log('containerRect.top: ', containerRect.top);
|
||||
console.log('offsetTop: ', offsetTop);
|
||||
|
||||
if (offsetTop != 0) {
|
||||
listContainer.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
|
||||
itemEl.classList.add('highlight');
|
||||
setTimeout(() => itemEl.classList.remove('highlight'), 1000);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
});
|
||||
|
||||
markers.push(marker);
|
||||
bounds.extend(loc.position);
|
||||
}
|
||||
});
|
||||
|
||||
if (markers.length) {
|
||||
map.fitBounds(bounds);
|
||||
}
|
||||
|
||||
select.addEventListener("change", (e) => {
|
||||
renderList(e.target.value);
|
||||
});
|
||||
|
||||
function renderList(selectedVoivName) {
|
||||
listContainer.innerHTML = '';
|
||||
|
||||
const filtered = locations.filter(loc => loc.voivodeship.name === selectedVoivName);
|
||||
|
||||
if (!filtered.length) {
|
||||
const div = document.createElement("div");
|
||||
div.className = "location-item empty";
|
||||
div.innerHTML = "<p>Brak salonów w tym województwie.</p>";
|
||||
listContainer.appendChild(div);
|
||||
return;
|
||||
}
|
||||
|
||||
filtered.forEach(loc => {
|
||||
const div = document.createElement("div");
|
||||
div.className = "location-item";
|
||||
div.dataset.id = loc.id;
|
||||
div.innerHTML = `<h4>${loc.name}</h4>`;
|
||||
div.innerHTML += `${loc.description || ''}`;
|
||||
listContainer.appendChild(div);
|
||||
});
|
||||
}
|
||||
|
||||
select.value = voivodeships.podkarpackie.name;
|
||||
renderList(voivodeships.podkarpackie.name);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
}
|
||||
@@ -566,4 +566,255 @@
|
||||
}
|
||||
#newsletter-box .elementor-form-fields-wrapper .elementor-field-type-acceptance .elementor-field-option label {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.elementor-widget-places-map .s-content.s-style-1 {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(400px, 1fr) 2fr;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col {
|
||||
padding: 25px 0;
|
||||
background: #f5f5f5;
|
||||
height: 570px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head {
|
||||
margin-bottom: 25px;
|
||||
padding: 0 25px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head h3 {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head h3 strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head .select-wrapper {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head .select-wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url("/upload/filemanager/icon/arrow-down.svg") no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--head .select-wrapper select {
|
||||
border: none !important;
|
||||
width: 100%;
|
||||
-webkit-appearance: none !important;
|
||||
-moz-appearance: none !important;
|
||||
appearance: none !important;
|
||||
outline: none !important;
|
||||
padding: 7px 30px 7px 15px;
|
||||
color: #7c7c7c;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body {
|
||||
overflow: auto;
|
||||
margin-right: 7px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin: 25px 17px 25px 25px;
|
||||
background: #fff;
|
||||
border: 1px solid #f1f1f1;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item.highlight {
|
||||
background-color: #22a9e1;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item h4 {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item p {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item p strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .location-item a {
|
||||
display: block;
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
background: #e3e3e3;
|
||||
border-radius: 5px;
|
||||
transition: all 250ms ease-in-out;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client h4 {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client h4 strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client p {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client p strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-left-col .map-point-info .map-point-info--body .inst-client a {
|
||||
display: block;
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-1 .s-right-col > div {
|
||||
height: 100%;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
-moz-column-gap: 100px;
|
||||
column-gap: 100px;
|
||||
justify-content: center;
|
||||
row-gap: 50px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
text-align: center;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card--head {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card--head p {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card--head p strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card--text {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card--text p {
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card-info {
|
||||
border-radius: 15px;
|
||||
border: 0.5px solid #181c1d;
|
||||
padding: 27px 20px;
|
||||
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
|
||||
text-align: center;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-2 .tad-cards .tab-card .tab-card-info a {
|
||||
display: block;
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
-moz-column-gap: 38px;
|
||||
column-gap: 38px;
|
||||
row-gap: 70px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card {
|
||||
text-align: center;
|
||||
width: calc(33.3333333333% - 25.3333333333px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card .tab-card--head {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
align-content: flex-end;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card .tab-card--head p {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card .tab-card--head span {
|
||||
color: #fff246;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card .tab-card-info {
|
||||
border-radius: 15px;
|
||||
border: 0.5px solid #181c1d;
|
||||
padding: 27px 20px;
|
||||
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
|
||||
text-align: center;
|
||||
}
|
||||
.elementor-widget-places-map .s-content.s-style-3 .tad-cards .tab-card .tab-card-info a {
|
||||
display: block;
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}/*# sourceMappingURL=custom.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -759,3 +759,331 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.elementor-widget-places-map {
|
||||
.s-content {
|
||||
&.s-style-1 {
|
||||
display: grid;
|
||||
// grid-template-columns: 400px 1fr;
|
||||
grid-template-columns: minmax(400px, 1fr) 2fr;
|
||||
// column-gap: 20px;
|
||||
|
||||
.s-left-col {
|
||||
padding: 25px 0;
|
||||
background: #f5f5f5;
|
||||
// border-radius: 5px;
|
||||
height: 570px;
|
||||
|
||||
.map-point-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
||||
.map-point-info--head {
|
||||
margin-bottom: 25px;
|
||||
padding: 0 25px;
|
||||
|
||||
h3 {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
// font-family: $font3;
|
||||
letter-spacing: 2px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
.select-wrapper {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
// border-radius: 100px;
|
||||
overflow: hidden;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url('/upload/filemanager/icon/arrow-down.svg')
|
||||
no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
select {
|
||||
border: none !important;
|
||||
width: 100%;
|
||||
appearance: none !important;
|
||||
outline: none !important;
|
||||
padding: 7px 30px 7px 15px;
|
||||
|
||||
color: #7c7c7c;
|
||||
font-size: 14px;
|
||||
// font-family: $font3;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.map-point-info--body {
|
||||
overflow: auto;
|
||||
margin-right: 7px;
|
||||
// padding: 0 0 0 30px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: transparent;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 10px;
|
||||
|
||||
&:hover {
|
||||
background-color: #c0c0c0;
|
||||
}
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.location-item {
|
||||
position: relative;
|
||||
// padding: 30px 0 30px 30px;
|
||||
padding: 15px;
|
||||
margin: 25px 17px 25px 25px;
|
||||
// background: #e3e3e3;
|
||||
background: #fff;
|
||||
border: 1px solid #f1f1f1;
|
||||
// border-radius: 5px;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
&.highlight {
|
||||
background-color: #22a9e1;
|
||||
}
|
||||
|
||||
h4 {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
.inst-client {
|
||||
position: relative;
|
||||
padding: 15px;
|
||||
margin: 15px;
|
||||
background: #e3e3e3;
|
||||
border-radius: 5px;
|
||||
transition: all 250ms ease-in-out;
|
||||
|
||||
h4 {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
text-transform: uppercase;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 400;
|
||||
line-height: 1.5;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #181c1d;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.s-right-col {
|
||||
> div {
|
||||
// border-radius: 5px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.s-style-2 {
|
||||
.tad-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 100px;
|
||||
justify-content: center;
|
||||
row-gap: 50px;
|
||||
|
||||
.tab-card {
|
||||
width: 100%;
|
||||
max-width: 450px;
|
||||
text-align: center;
|
||||
|
||||
.tab-card--head {
|
||||
margin-bottom: 30px;
|
||||
|
||||
p {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
// font-family: $font3;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-card--text {
|
||||
margin-bottom: 30px;
|
||||
|
||||
p {
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-card-info {
|
||||
border-radius: 15px;
|
||||
border: 0.5px solid #181c1d;
|
||||
padding: 27px 20px;
|
||||
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.s-style-3 {
|
||||
.tad-cards {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 38px;
|
||||
row-gap: 70px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.tab-card {
|
||||
text-align: center;
|
||||
width: calc((100% / 3) - (38px - (38px / 3)));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.tab-card--head {
|
||||
text-align: center;
|
||||
flex-grow: 1;
|
||||
align-content: flex-end;
|
||||
|
||||
p {
|
||||
color: #1d1d1e;
|
||||
font-size: 20px;
|
||||
// font-family: $font3;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #fff246;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-card-info {
|
||||
border-radius: 15px;
|
||||
border: 0.5px solid #181c1d;
|
||||
padding: 27px 20px;
|
||||
box-shadow: 2px -2px 10px rgba(0, 0, 0, 0.25);
|
||||
text-align: center;
|
||||
|
||||
a {
|
||||
display: block;
|
||||
color: #1d1d1e;
|
||||
font-size: 16px;
|
||||
// font-family: $font3;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user