pro/2023_WEBSITE_jipf
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

filters are stylish

Browse Source
This commit is contained in:
lenovo
2022-11-14 04:46:41 +01:00
parent 8a4870a2b3
commit 363e8a010c
3 changed files with 81 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,20 @@
*/
/*
#ba197a;
*/
/* **************************************
GENERAL SETTINGS
*/
/*
*/
#ljdp_map_filters,
#ljdp_map_filters * {
display: flex;
@@ -20,41 +33,15 @@
gap: 10px;
margin-bottom: 10px;
}
*/
/*
overwrite display:none to avoid html flash at begining
<div class="filter_menu" style="display:none;">
*/
/*
#ljdp_map_filters .filter_menu {
display: flex !important;
flex-direction: column;
width: 100%;
overflow: visible;
width: auto;
cursor: pointer;
border: 1px solid #ba197a;
border-radius: 3px;
white-space: nowrap;
}
#ljdp_map_filters .filter_menu * {
cursor: pointer;
}
#ljdp_map_filters .filter_menu_title {
width: 100%;
padding: 5px;
}
*/
/* display inline-block for text-align to work */
/*
#ljdp_map_filters .filter_menu_title p {
display: inline-block;
width: 100%;
text-align: center;
}
*/
@@ -63,59 +50,18 @@
*/
/*
#ljdp_map_filters .filter_menu_drop_title {
width: 100%;
pointer-events: none;
}
#ljdp_map_filters .filter_menu_drop_items {
flex-direction: column;
position: absolute;
top: 100%;
left: 0px;
max-height: 400px;
width: 100%;
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 */
/*
display: none;
*/
/*
opacity: 0;
visibility: hidden;
transition: visibility 0.5s;
border: 1px solid #ba197a;
}
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_title {
pointer-events: auto;
}
#ljdp_map_filters .filter_menu_drop:focus .filter_menu_drop_items {
*/
/*
display: flex;
*/
/*
opacity: 1;
visibility: visible;
}
#ljdp_map_filters .filter_menu_drop_items p {
padding: 0px 10px;
#ljdp_map_filters .filter_menu_drop {
width: 100%;
height: auto;
margin: 0px;
width: 100%;
padding: 5px;
font-size: 100%;
font-weight: 500;
color: #666;
border: 2px solid #ba197a;
}
#ljdp_map_filters .filter_menu_drop_items p:hover {
background-color: #dddddd;
}
*/
@@ -124,30 +70,69 @@
MENU CHECKBOX
*/
/*
#ljdp_map_filters label.filter_menu_checkbox {
border-radius: 20px;
#ljdp_map_filters .filter_menu_checkbox p {
--size: 16px;
--left-offset: calc( var(--size) + 5px );
margin-left: var(--left-offset);
}
#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox {
color: #ffffff;
background-color: #ba197a;
#ljdp_map_filters .filter_menu_checkbox p::before {
content: "";
position: absolute;
top: calc( 50% - var(--size) / 2 - 1px );
left: calc( var(--left-offset) * -1 );
border: 2px solid #ba197a;
border-radius: 3px;
box-sizing: border-box;
width: var(--size);
height: var(--size);
}
#ljdp_map_filters input.filter_menu_checkbox:checked + label.filter_menu_checkbox p::before {
/*
background-color: #ba197a;
background-color: #ca1c84;
background-color: #e01f93;
background-color: #e3359e;
background-color: #e74ba9;
background-color: #ea62b3;
*/
background-color: #ed78be;
/*
background-color: #f08fc9;
background-color: #f3a5d4;
background-color: #f6bcdf;
background-color: #f9d2e9;
background-color: #fce9f4;
*/
}
*/
/* **************************************
MENU BUTTON
MENU RESET
*/
#ljdp_map_filters .filter_menu_reset {
/*
#ljdp_map_filters .filter_menu_button {
flex-shrink: 2;
white-space: nowrap;
}
*/
border: 2px solid #ba197a;
background-color: #ba197a;
color: #fff;
padding: 5px 10px;
}
@media only screen and (max-width: 700px) {
#ljdp_map_filters {
flex-wrap: wrap;
}
#ljdp_map_filters .filter_menu {
width: 100%;
}
}