github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-06-25 04:03:35 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Improved UI of Switch with loading indicator (#2039)

Browse Source 
* Moved loading indicator outside of checkboxes to improve ui
* Made loading indicator more visible, fade label when switch is loading
This commit is contained in:
Alexander Skvortsov
2020-04-10 16:51:58 -04:00
committed by GitHub
parent 453c44632d
commit ffa56595c3
1 changed files with 19 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
less/common/Checkbox.less
View File

@ -3,7 +3,7 @@
cursor: pointer; cursor: pointer;
margin: 0; margin: 0;
& input[type=checkbox] { & input[type="checkbox"] {
display: none; display: none;
} }
} }
@ -18,7 +18,7 @@
.LoadingIndicator { .LoadingIndicator {
display: inline-block; display: inline-block;
margin-left: 10px; margin-left: 20px;
} }
} }
} }
@ -32,7 +32,7 @@
.transition(background-color 0.2s); .transition(background-color 0.2s);
.on& { .on& {
background: #58A400; background: #58a400;
} }
&:before { &:before {
@ -48,7 +48,7 @@
} }
} }
&:before { &:before {
content: ' '; content: " ";
background: @body-bg; background: @body-bg;
border-radius: 11px; border-radius: 11px;
box-shadow: 0 2px 4px @shadow-color; box-shadow: 0 2px 4px @shadow-color;
@ -58,12 +58,25 @@
font-size: 14px; font-size: 14px;
.on & { .on & {
color: #58A400; color: #58a400;
} }
.off & { .off & {
color: #D0021B; color: #d0021b;
} }
.disabled & { .disabled & {
color: @muted-more-color !important; color: @muted-more-color !important;
} }
} }
.Checkbox--switch.loading {
color: @muted-more-color !important;
&.on .Checkbox-display {
background: fade(#58a400, 0.5);
}
&.off .Checkbox-display {
background: fade(@control-bg, 0.5);
}
.LoadingIndicator {
color: darken(@muted-color, 50%);
}
}