You've already forked matrix-react-sdk
mirror of
https://github.com/matrix-org/matrix-react-sdk.git
synced 2025-08-09 08:42:50 +03:00
Add simple animations to toggle switches
This commit is contained in:
@@ -14,9 +14,8 @@ See the License for the specific language governing permissions and
|
|||||||
limitations under the License.
|
limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
// TODO: Fancy transitions
|
|
||||||
|
|
||||||
.mx_ToggleSwitch {
|
.mx_ToggleSwitch {
|
||||||
|
transition: background-color 0.20s ease-out 0.1s;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 24px;
|
height: 24px;
|
||||||
border-radius: 14px;
|
border-radius: 14px;
|
||||||
@@ -33,6 +32,7 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mx_ToggleSwitch_ball {
|
.mx_ToggleSwitch_ball {
|
||||||
|
transition: left 0.15s ease-out 0.1s;
|
||||||
margin: 2px;
|
margin: 2px;
|
||||||
width: 20px;
|
width: 20px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
@@ -47,5 +47,5 @@ limitations under the License.
|
|||||||
}
|
}
|
||||||
|
|
||||||
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
|
.mx_ToggleSwitch_on > .mx_ToggleSwitch_ball {
|
||||||
right: 2px;
|
left: 23px; // 48px switch - 20px ball - 5px padding = 23px
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user