mirrors/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-04-20 19:45:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 10

Base: Replace bespoke input switch with native element

Browse source 
Turns out we support <input type=checkbox switch>, so let's use it!
This commit is contained in:
Timothy Flynn 2025-04-02 11:38:34 -04:00 • committed by Tim Flynn
parent 04d44c9b26
commit 49dae536a7
Notes: github-actions[bot] 2025-04-02 18:17:34 +00:00
2 changed files with 26 additions and 73 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
Base/res/ladybird/about-pages/settings.html
View file

@ -90,6 +90,12 @@
margin-bottom: 0;
}
.toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.permission-container {
display: flex;
align-items: center;
@ -287,14 +293,9 @@
<div class="card">
<div class="card-header">Search</div>
<div class="card-body">
<div class="card-group">
<div class="toggle-container">
<label for="search-toggle">Enable Search</label>
<label class="toggle">
<input id="search-toggle" type="checkbox" />
<span class="toggle-button"></span>
</label>
</div>
<div class="card-group toggle-container">
<label for="search-toggle">Enable Search</label>
<input id="search-toggle" type="checkbox" switch />
</div>
<div class="card-group hidden">
<label for="search-engine">Default Search Engine</label>
@ -306,14 +307,9 @@
<hr />
<div class="card-group">
<div class="toggle-container">
<label for="autocomplete-toggle">Enable Autocomplete</label>
<label class="toggle">
<input id="autocomplete-toggle" type="checkbox" />
<span class="toggle-button"></span>
</label>
</div>
<div class="card-group toggle-container">
<label for="autocomplete-toggle">Enable Autocomplete</label>
<input id="autocomplete-toggle" type="checkbox" switch />
</div>
<div class="card-group hidden">
<label for="autocomplete-engine">Default Autocomplete Engine</label>
@ -350,10 +346,7 @@
<div class="dialog-body">
<div class="toggle-container">
<label for="site-settings-global">Enable on all sites</label>
<label class="toggle">
<input id="site-settings-global" type="checkbox" />
<span class="toggle-button"></span>
</label>
<input id="site-settings-global" type="checkbox" switch />
</div>
<hr />
<label>Allowlist</label>

66
Base/res/ladybird/ladybird.css
View file

@ -146,67 +146,27 @@ select:focus {
outline: none;
}
/**
* Create a toggle switch as a checkbox alternative:
*
* <div class="toggle-container">
* <label for="your-toggle">Toggle Label</label>
* <label class="toggle">
* <input id="your-toggle" type="checkbox" checked />
* <span class="toggle-button"></span>
* </label>
* </div>
*/
.toggle-container {
display: flex;
align-items: center;
justify-content: space-between;
}
.toggle-container .toggle {
input[type="checkbox"][switch] {
width: 50px;
height: 24px;
display: inline-block;
position: relative;
}
.toggle-container .toggle input {
display: none;
}
.toggle-container .toggle-button {
background-color: var(--toggle-background-color);
border-radius: 24px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
cursor: pointer;
outline: none;
}
.toggle-container .toggle-button:before {
background-color: white;
border-radius: 50%;
content: "";
width: 18px;
height: 18px;
position: absolute;
bottom: 3px;
left: 3px;
}
.toggle-container input:checked + .toggle-button {
input[type="checkbox"][switch]:checked {
background-color: var(--violet-100);
}
.toggle-container input:checked + .toggle-button:before {
transform: translateX(26px);
input[type="checkbox"][switch]::before {
background-color: white;
border: 0.6em solid white;
left: 3px;
}
input[type="checkbox"][switch]:checked::before {
left: calc(100% - 1.3em);
}