perso/DOCKER_wordpress
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

temp version of filters drop down with toogle

Browse Source
This commit is contained in:
lenovo
2022-11-12 16:11:59 +01:00
parent 52eeda4ad4
commit cda936deb7
3 changed files with 143 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
srcs/plugins/map_prof/styles/mp_filters.css
View File

@@ -26,6 +26,9 @@
display: flex !important;
flex-direction: column;
width: 100%;
overflow: visible;
cursor: pointer;
border: 1px solid #ba197a;
}
@@ -148,7 +151,6 @@
*/
/*
*/
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
@@ -188,65 +190,102 @@
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV SWITCH AND CLOSE
WIP VERSION DIV TITLE
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
width: 100%;
height: auto;
max-height: 400px;
cursor: pointer;
background-color: transparent;
overflow: scroll;
border: 1px solid red;
}
#ljdp_map_filters .filter_menu .filter_menu_title:focus {
background-color: #ffffff;
height: auto;
top: 100%;
overflow: scroll;
padding: 10px;
border: 1px solid #ba197a;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu .filter_menu_title:focus
+ .filter_menu_drop {
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:first-child {
margin-top: 100px;
}
#ljdp_map_filters .filter_menu .filter_menu_drop:focus p:first-child {
margin-top: auto;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
#ljdp_map_filters .filter_menu_drop p {
display: none;
cursor: pointer;
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
#ljdp_map_filters .filter_menu_drop p:hover {
background-color: #dddddd;
}
#ljdp_map_filters p.filter_menu_drop_title {
display: flex;
text-align: center;
}
#ljdp_map_filters .filter_menu_drop_title:focus ~ p {
display: flex;
}
*/
/* **************************************
VERSION DIV VISIBILITY
*/
/*
*/
#ljdp_map_filters .filter_menu_title {
width: 100%;
cursor: pointer;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
max-height: 400px;
width: 100%;
cursor: pointer;
overflow: scroll;
background-color: #ffffff;
/* opacity is toogled instantanously, for visual confort, but element is still present and clickable */
/* then, visibility is toogle, after x seconds, letting plainty of times for the browser to catch the 'onclick' event */
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_drop {
opacity: 1;
visibility: visible;
}
#ljdp_map_filters .filter_menu_drop p {
padding: 0px 10px;
margin: 0px;
width: 100%;
}
#ljdp_map_filters .filter_menu_drop p:hover {
background-color: #dddddd;
}