Search and search switches are functional

This commit is contained in:
Claude Brisson
2023-12-17 19:42:16 +01:00
parent ea44f6068e
commit 98192a1ebc
13 changed files with 228 additions and 82 deletions

View File

@@ -339,32 +339,8 @@
}
}
.checkbox {
width: 50px;
height: 26px;
border-radius: 18px;
background-color: #F7D6A3;
display: flex;
align-items: center;
padding-left: 5px;
padding-right: 5px;
.clickable {
pointer-events: all;
cursor: pointer;
.circle {
background-color: #6B5E8A;
transform: translateX(0px);
border-radius: 50%;
width: 20px;
height: 20px;
transition: 300ms;
}
input {
display: none;
}
&.active {
background-color: rgb(218, 114, 80);
.circle {
transform: translateX(20px);
}
}
}
}

View File

@@ -48,6 +48,16 @@
}
/* registration section */
#player {
&.create .edition {
display: none;
}
&.edit .creation {
display: none;
}
}
#player-form {
&:not(.add) {
#search-form, #search-result {
@@ -57,6 +67,42 @@
}
#search-form {
position: relative;
.toggle {
cursor: pointer;
input {
display: none;
}
label {
display: block;
text-align: center;
cursor: pointer;
}
.checkbox {
width: 50px;
height: 26px;
border-radius: 18px;
background-color: #F7D6A3;
display: flex;
align-items: center;
padding-left: 5px;
padding-right: 5px;
cursor: pointer;
.circle {
background-color: #6B5E8A;
transform: translateX(0px);
border-radius: 50%;
width: 20px;
height: 20px;
transition: 300ms;
}
}
input:checked + .checkbox {
background-color: rgb(218, 114, 80);
.circle {
transform: translateX(20px);
}
}
}
}
#search-result {
position: absolute;
@@ -66,9 +112,14 @@
top: 100%;
padding: 1em;
overflow-y: auto;
&.hidden {
&:empty {
display: none;
}
.result-line {
cursor: pointer;
&:hover {
background-color: rgba(100,200,255,200);
}
}
}
}