jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-04-17 16:00:50 -04:00
Code Issues Projects Releases Wiki Activity

refactor(client): togglebutton's layout from float to flex (#49510)

Browse Source 
* Refactor the togglebutton from float to flex

* Update toggle-button.css
This commit is contained in:
xarcode
2023-02-27 22:42:31 +05:30
committed by GitHub
parent 564a4d2cab
commit de87492cf8
1 changed files with 1 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
client/src/components/helpers/toggle-button.css
View File

@@ -41,6 +41,7 @@
.btn-group .btn.toggle-active {
border-color: var(--tertiary-color);
padding-inline: 30px;
display: flex;
}
.btn-group .btn-primary,
@@ -48,44 +49,3 @@
.btn-group .btn-primary:hover {
border-color: var(--secondary-color);
}
.btn.toggle-active > .tick,
.btn.toggle-not-active > .tick {
position: absolute;
}
.btn:first-child > .tick {
left: 9px;
top: calc(50% - 8pt);
}
.btn:last-child > .tick {
right: 6px;
top: calc(50% - 8pt);
}
.btn-group .btn + .btn {
margin-inline-start: -2px;
}
label.toggle-label {
display: flex;
flex-direction: column;
}
@media (max-width: 550px) {
.btn:first-child > .tick {
left: 6px;
}
.btn:last-child > .tick {
right: 5px;
}
}
@media (max-width: 440px) {
.btn:first-child > .tick {
left: auto;
right: 5px;
}
}