masbudikusuma/edukarsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): implementasikan searchform.php native dengan styling pill modern

Browse Source
This commit is contained in:
Mas Budi Kusuma
2026-09-17 21:29:14 +07:00
parent f7ce5496dd
commit df5eef38f4
2 changed files with 84 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
style.css
+69
View File
@@ -950,3 +950,72 @@ body.edukarsa-popup-open { overflow: hidden; }
box-shadow: 0 6px 18px rgba(11, 74, 142, 0.25);
}
.edukarsa-popup-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(11, 74, 142, 0.35); }
/* 22. MODERN NATIVE SEARCH FORM */
.search-form.edukarsa-search-form,
.search-form {
display: flex;
align-items: center;
position: relative;
width: 100%;
margin: 0;
}
.search-form .search-form-label,
.search-form label {
flex: 1;
margin: 0;
position: relative;
width: 100%;
display: block;
}
.search-form .search-field {
width: 100%;
padding: 13px 52px 13px 20px;
background-color: #f8fafc;
border: 1.5px solid #e2e8f0;
border-radius: 50px;
font-size: 14px;
font-weight: 500;
color: var(--heading-color);
outline: none;
transition: all 0.25s ease;
font-family: inherit;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}
.search-form .search-field::placeholder {
color: #94a3b8;
font-size: 13.5px;
}
.search-form .search-field:focus {
background-color: #ffffff;
border-color: var(--secondary-color);
box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.12);
}
.search-form .search-submit {
position: absolute;
right: 5px;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
border-radius: 50%;
background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
color: #ffffff;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
padding: 0;
box-shadow: 0 4px 12px rgba(11, 74, 142, 0.25);
}
.search-form .search-submit:hover {
background: var(--primary-color);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 16px rgba(11, 74, 142, 0.35);
}
.search-form .search-submit svg {
display: block;
stroke: #ffffff;
}