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

wip new desing filter

Browse Source
This commit is contained in:
lenovo
2022-11-12 23:06:41 +01:00
parent c140187aa9
commit 36a55260fe
3 changed files with 138 additions and 272 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -33,223 +33,19 @@
}
/* **************************************
WIP VERSION SELECT
*/
/*
#ljdp_map_filters .filter_menu select.filter_menu_drop {
appearance: none;
text-align: center;
background-color: transparent;
border: none;
}
#ljdp_map_filters .filter_menu .filter_menu_drop option {
appearance: none;
text-align: center;
background-color: transparent;
border: none;
}
*/
/* **************************************
VERSION INPUT CHECKBOX
*/
/*
#ljdp_map_filters .filter_menu input.filter_menu_title {
display: none;
}
#ljdp_map_filters .filter_menu label.filter_menu_title {
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
padding: 10px 0px;
width: 100%;
max-height: 400px;
background-color: #ffffff;
overflow-y: scroll;
cursor: pointer;
}
#ljdp_map_filters .filter_menu input.filter_menu_title:checked
~ .filter_menu_drop {
display: flex;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV STICK
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
margin: 0px;
padding: 10px 0px;
width: 100%;
max-height: 400px;
background-color: #ffffff;
overflow-y: scroll;
cursor: pointer;
}
#ljdp_map_filters .filter_menu:focus-within .filter_menu_drop {
display: flex;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
VERSION DIV SWITCH
*/
/*
#ljdp_map_filters .filter_menu .filter_menu_title {
width: 100%;
cursor: pointer;
}
#ljdp_map_filters .filter_menu .filter_menu_drop {
flex-direction: column;
position: absolute;
left: 0px;
margin: 0px;
width: 100%;
max-height: 400px;
cursor: pointer;
background-color: transparent;
height: 100%;
padding-left: 100%;
top: 0%;
overflow: hidden;
}
#ljdp_map_filters .filter_menu .filter_menu_drop:focus {
background-color: #ffffff;
height: auto;
top: 100%;
overflow: scroll;
padding: 10px;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p {
padding: 0px 10px;
width: 100%;
}
#ljdp_map_filters .filter_menu .filter_menu_drop p:hover {
background-color: #dddddd;
}
*/
/* **************************************
WIP VERSION DIV TITLE
*/
/*
#ljdp_map_filters .filter_menu_drop {
flex-direction: column;
width: 100%;
max-height: 400px;
cursor: pointer;
background-color: #ffffff;
overflow: scroll;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu_drop p {
display: none;
cursor: pointer;
padding: 0px 10px;
width: 100%;
}
#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
DROP DOWN MENU
*/
/*
*/
#ljdp_map_filters .filter_menu_title {
#ljdp_map_filters .filter_menu_drop_title {
width: 100%;
cursor: pointer;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop_items {
flex-direction: column;
position: absolute;
top: 100%;
@@ -262,30 +58,55 @@
/* 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;
*/
display: none;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_title {
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu:focus .filter_menu_drop {
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
display: flex;
/*
opacity: 1;
visibility: visible;
*/
}
#ljdp_map_filters .filter_menu_drop p {
#ljdp_map_filters .filter_menu_drop_items p {
padding: 0px 10px;
margin: 0px;
width: 100%;
}
#ljdp_map_filters .filter_menu_drop p:hover {
#ljdp_map_filters .filter_menu_drop_items p:hover {
background-color: #dddddd;
}
/* **************************************
DROP DOWN MENU
*/
/*
*/
#ljdp_map_filters .filter_menu_buttons {
flex-direction: row;
border: 1px solid blue;
}
#ljdp_map_filters .filter_menu_buttons_click {
border: 1px solid green;
}