1
0
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:
Travis Ralston
2019-01-24 21:24:28 -07:00
parent c5deeeaceb
commit 9bbbab9d03

View File

@@ -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
} }