github-mirror/framework
2
0
Fork 0
mirror of https://github.com/flarum/framework.git synced 2025-02-08 04:10:45 +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 24dc0fc143
commit 83e69dc61d
1 changed files with 19 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
framework/core/less/common/Checkbox.less
View File

@ -3,7 +3,7 @@
cursor: pointer;
margin: 0;
& input[type=checkbox] {
& input[type="checkbox"] {
display: none;
}
}
@ -18,7 +18,7 @@
.LoadingIndicator {
display: inline-block;
margin-left: 10px;
margin-left: 20px;
}
}
}
@ -32,7 +32,7 @@
.transition(background-color 0.2s);
.on& {
background: #58A400;
background: #58a400;
}
&:before {
@ -48,7 +48,7 @@
}
}
&:before {
content: ' ';
content: " ";
background: @body-bg;
border-radius: 11px;
box-shadow: 0 2px 4px @shadow-color;
@ -58,12 +58,25 @@
font-size: 14px;
.on & {
color: #58A400;
color: #58a400;
}
.off & {
color: #D0021B;
color: #d0021b;
}
.disabled & {
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%);
}
}