bellord/kit
1
0
Fork 0
mirror of https://bitbucket.org/bellord13/kit.git synced 2026-11-13 19:06:11 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
bellord
2024-06-12 01:45:12 +03:00
parent de3dfeded2
commit 36e40a3035
11 changed files with 1001 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/autoComplete/css/autoComplete.01.css
+92
View File
@@ -0,0 +1,92 @@
.autoComplete_wrapper {
display: inline-block;
position: relative;
}
.autoComplete_wrapper > input {
width: 370px;
height: 40px;
padding-left: 20px;
font-size: 1rem;
color: rgba(123, 123, 123, 1);
border-radius: 8px;
border: 0;
outline: none;
background-color: #f1f3f4;
}
.autoComplete_wrapper > input::placeholder {
color: rgba(123, 123, 123, 0.5);
transition: all 0.3s ease;
}
.autoComplete_wrapper > ul {
position: absolute;
max-height: 226px;
overflow-y: scroll;
top: 100%;
left: 0;
right: 0;
padding: 0;
margin: 0.5rem 0 0 0;
border-radius: 0.6rem;
background-color: #fff;
box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
border: 1px solid rgba(33, 33, 33, 0.07);
z-index: 1000;
outline: none;
}
.autoComplete_wrapper > ul[hidden],
.autoComplete_wrapper > ul:empty {
display: block;
opacity: 0;
transform: scale(0);
}
.autoComplete_wrapper > ul > li {
margin: 0.3rem;
padding: 0.3rem 0.5rem;
list-style: none;
text-align: left;
font-size: 1rem;
color: #212121;
transition: all 0.1s ease-in-out;
border-radius: 0.35rem;
background-color: rgba(255, 255, 255, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
}
.autoComplete_wrapper > ul > li::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_wrapper > ul > li:hover {
cursor: pointer;
background-color: rgba(123, 123, 123, 0.1);
}
.autoComplete_wrapper > ul > li mark {
background-color: transparent;
color: rgba(255, 122, 122, 1);
font-weight: bold;
}
.autoComplete_wrapper > ul > li mark::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_wrapper > ul > li[aria-selected="true"] {
background-color: rgba(123, 123, 123, 0.1);
}
@media only screen and (max-width: 600px) {
.autoComplete_wrapper > input {
width: 18rem;
}
}
assets/autoComplete/css/autoComplete.02.css
+82
View File
@@ -0,0 +1,82 @@
.autoComplete_wrapper {
display: inline-block;
position: relative;
}
.autoComplete_wrapper > input {
width: 370px;
height: 40px;
padding-left: 10px;
font-size: 1rem;
color: rgb(116, 116, 116);
border-radius: 4px;
border: 1px solid rgba(33, 33, 33, 0.2);
outline: none;
}
.autoComplete_wrapper > input::placeholder {
color: rgba(123, 123, 123, 0.5);
transition: all 0.3s ease;
}
.autoComplete_wrapper > ul {
position: absolute;
max-height: 226px;
overflow-y: scroll;
top: 100%;
left: 0;
right: 0;
padding: 0;
margin: 0.5rem 0 0 0;
border-radius: 4px;
background-color: #fff;
border: 1px solid rgba(33, 33, 33, 0.1);
z-index: 1000;
outline: none;
}
.autoComplete_wrapper > ul > li {
padding: 10px 20px;
list-style: none;
text-align: left;
font-size: 16px;
color: #212121;
transition: all 0.1s ease-in-out;
border-radius: 3px;
background-color: rgba(255, 255, 255, 1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
}
.autoComplete_wrapper > ul > li::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_wrapper > ul > li:hover {
cursor: pointer;
background-color: rgba(123, 123, 123, 0.1);
}
.autoComplete_wrapper > ul > li mark {
background-color: transparent;
color: rgba(255, 122, 122, 1);
font-weight: bold;
}
.autoComplete_wrapper > ul > li mark::selection {
color: rgba(#ffffff, 0);
background-color: rgba(#ffffff, 0);
}
.autoComplete_wrapper > ul > li[aria-selected="true"] {
background-color: rgba(123, 123, 123, 0.1);
}
@media only screen and (max-width: 600px) {
.autoComplete_wrapper > input {
width: 18rem;
}
}
assets/autoComplete/css/autoComplete.css
+116
View File
@@ -0,0 +1,116 @@
.autoComplete_wrapper {
display: inline-block;
position: relative;
}
.autoComplete_wrapper > input {
height: 3rem;
width: 370px;
margin: 0;
padding: 0 2rem 0 3.2rem;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
font-size: 1rem;
text-overflow: ellipsis;
outline: none;
border-radius: 10rem;
background-image: url(./images/search.svg);
background-size: 1.4rem;
background-position: left 1.05rem top 0.8rem;
background-repeat: no-repeat;
background-origin: border-box;
background-color: #fff;
transition: all 0.4s ease;
-webkit-transition: all -webkit-transform 0.4s ease;
}
.autoComplete_wrapper > input::placeholder {
}
.autoComplete_wrapper > input:hover::placeholder {
}
.autoComplete_wrapper > input:focus::placeholder {
}
.autoComplete_wrapper > input:focus::selection {
/*background-color: rgba(255, 122, 122, 0.15);*/
}
.autoComplete_wrapper > input::selection {
/*background-color: rgba(255, 122, 122, 0.15);*/
}
.autoComplete_wrapper > input:hover {
}
.autoComplete_wrapper > input:focus {
}
.autoComplete_wrapper > ul {
position: absolute;
max-height: 226px;
overflow-y: scroll;
box-sizing: border-box;
left: 0;
right: 0;
margin: 0.5rem 0 0 0;
padding: 0;
z-index: 1;
list-style: none;
border-radius: 0.6rem;
background-color: #fff;
border: 1px solid rgba(33, 33, 33, 0.07);
box-shadow: 0 3px 6px rgba(149, 157, 165, 0.15);
outline: none;
transition: opacity 0.15s ease-in-out;
-moz-transition: opacity 0.15s ease-in-out;
-webkit-transition: opacity 0.15s ease-in-out;
}
.autoComplete_wrapper > ul[hidden],
.autoComplete_wrapper > ul:empty {
display: block;
opacity: 0;
transform: scale(0);
}
.autoComplete_wrapper > ul > li,
.autoComplete_wrapper .no_result {
margin: 0.3rem;
padding: 0.3rem 0.5rem;
text-align: left;
font-size: 1rem;
color: #212121;
border-radius: 0.35rem;
background-color: rgba(255, 255, 255, 1);
white-space: normal;
overflow: hidden;
text-overflow: ellipsis;
transition: all 0.2s ease;
}
.autoComplete_wrapper > ul > li mark {
background-color: transparent;
font-weight: bold;
}
.autoComplete_wrapper > ul > li:hover {
cursor: pointer;
background-color: rgba(255, 122, 122, 0.15);
}
.autoComplete_wrapper > ul > li[aria-selected="true"] {
background-color: rgba(255, 122, 122, 0.15);
}
@media only screen and (max-width: 600px) {
.autoComplete_wrapper > input {
}
}
assets/autoComplete/css/images/magnifier.svg
+3
View File
@@ -0,0 +1,3 @@
<svg xmlns="http://www.w3.org/2000/svg" width="218" height="218">
<path d="M209.33 170.924l-54.375-54.394c5.082-10.625 8-22.48 8-35.045C162.966 36.482 126.48 0 81.48 0S0 36.482 0 81.48s36.48 81.48 81.48 81.48c12.573 0 24.42-2.936 35.056-8l54.383 54.375c10.598 10.61 27.804 10.61 38.408 0 10.61-10.612 10.61-27.815 0-38.405zM18.108 81.48c0-35.013 28.372-63.376 63.374-63.376s63.374 28.364 63.374 63.376c0 34.99-28.37 63.374-63.374 63.374s-63.374-28.38-63.374-63.374zm178.415 115.044a9.05 9.05 0 0 1-12.801 0l-51.415-51.42c4.722-3.8 9.015-8.084 12.803-12.806l51.412 51.426c1.7 1.697 2.654 4 2.654 6.4s-.955 4.704-2.654 6.4z" fill="#ff7a7a" fill-rule="nonzero"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 670 B

assets/autoComplete/css/images/search.svg
+8
View File
@@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" focusable="false" x="0px" y="0px" width="30" height="30" viewBox="0 0 171 171" style=" fill:#000000;">
<g fill="none" fill-rule="nonzero" stroke="none" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0" font-family="none" font-weight="none" font-size="none" text-anchor="none" style="mix-blend-mode: normal">
<path d="M0,171.99609v-171.99609h171.99609v171.99609z" fill="none"></path>
<g fill="#ff7a7a">
<path d="M74.1,17.1c-31.41272,0 -57,25.58728 -57,57c0,31.41272 25.58728,57 57,57c13.6601,0 26.20509,-4.85078 36.03692,-12.90293l34.03301,34.03301c1.42965,1.48907 3.55262,2.08891 5.55014,1.56818c1.99752,-0.52073 3.55746,-2.08067 4.07819,-4.07819c0.52073,-1.99752 -0.0791,-4.12049 -1.56818,-5.55014l-34.03301,-34.03301c8.05215,-9.83182 12.90293,-22.37682 12.90293,-36.03692c0,-31.41272 -25.58728,-57 -57,-57zM74.1,28.5c25.2517,0 45.6,20.3483 45.6,45.6c0,25.2517 -20.3483,45.6 -45.6,45.6c-25.2517,0 -45.6,-20.3483 -45.6,-45.6c0,-25.2517 20.3483,-45.6 45.6,-45.6z"></path>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB