@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_switch.scss

@@ -0,0 +1,353 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-switch {
+	height: 30px;
+	position: relative;
+	width: 50px;
+
+	&__slider {
+		background-color: variables.$grey-dark;
+		border-radius: 30px;
+		cursor: pointer;
+		height: 100%;
+		left: 0px;
+		position: absolute;
+		top: 0px;
+		transition: 0.4s;
+		width: 100%;
+
+		&:before {
+			background-color: transparent;
+			border: 0;
+			border-radius: 30px;
+			box-shadow: 0 0 0 0 rgba(variables.$deep-black, 0.1);
+			content: '';
+			height: 30px;
+			left: 0;
+			position: absolute;
+			top: 0;
+			transition: 0.4s;
+			width: 50px;
+		}
+
+		&:after {
+			background-color: variables.$white;
+			border-radius: 30px;
+			content: '';
+			height: 24px;
+			left: 3px;
+			position: absolute;
+			top: 3px;
+			transition: 0.4s;
+			width: 24px;
+		}
+
+		&:hover {
+			background-color: variables.$grey-darker;
+
+			&:after {
+				background-color: variables.$grey-lighter;
+			}
+		}
+
+		&:active {
+			background-color: variables.$grey-light;
+
+			&:after {
+				background-color: variables.$grey-darker;
+			}
+		}
+	}
+
+	input {
+		-webkit-tap-highlight-color: transparent;
+		appearance: none;
+		height: 0px;
+		left: 10px;
+		overflow: hidden;
+		position: absolute;
+		top: 10px;
+		width: 0px;
+
+		&:disabled {
+			~ .Vlt-switch__slider {
+				background-color: rgba(variables.$grey-dark, 0.5);
+
+				&:hover,
+				&:active {
+					background-color: rgba(variables.$grey-dark, 0.5);
+					cursor: auto;
+
+					&:after {
+						background-color: variables.$white;
+					}
+				}
+			}
+		}
+
+		&:focus {
+			-webkit-tap-highlight-color: transparent;
+			outline: none;
+
+			~ .Vlt-switch__slider {
+				&:before {
+					box-shadow: 0 0 0 5px rgba(variables.$deep-black, 0.1);
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				&:before {
+					box-shadow: 0 0 0 5px rgba(variables.$green, 0.3);
+				}
+			}
+		}
+
+		&:checked ~ .Vlt-switch__slider {
+			background-color: variables.$green;
+
+			&:after {
+				left: 22px;
+			}
+
+			&:hover {
+				background-color: variables.$green-dark;
+
+				&:after {
+					background-color: variables.$green-lighter;
+				}
+			}
+
+			&:active {
+				background-color: variables.$green-lighter;
+
+				&:after {
+					background-color: variables.$green;
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--red {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(variables.$red, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: variables.$red;
+
+				&:hover {
+					background-color: variables.$red-dark;
+
+					&:after {
+						background-color: variables.$red-lighter;
+					}
+				}
+
+				&:active {
+					background-color: variables.$red-light;
+
+					&:after {
+						background-color: variables.$red-dark;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--primary {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(variables.$purple-dark, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: variables.$purple-dark;
+
+				&:hover {
+					background-color: variables.$purple-darker;
+
+					&:after {
+						background-color: variables.$purple-lighter;
+					}
+				}
+
+				&:active {
+					background-color: variables.$purple-light;
+
+					&:after {
+						background-color: variables.$purple-dark;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--secondary {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(variables.$black, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: variables.$black;
+
+				&:hover {
+					background-color: variables.$grey-darker;
+
+					&:after {
+						background-color: variables.$grey-lighter;
+					}
+				}
+
+				&:active {
+					background-color: variables.$grey-light;
+
+					&:after {
+						background-color: variables.$grey-darker;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--orange {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(variables.$orange, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: variables.$orange;
+
+				&:hover {
+					background-color: variables.$orange-dark;
+
+					&:after {
+						background-color: variables.$orange-lighter;
+					}
+				}
+
+				&:active {
+					background-color: variables.$orange-light;
+
+					&:after {
+						background-color: variables.$orange-dark;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--indigo {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(variables.$indigo, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: variables.$indigo;
+
+				&:hover {
+					background-color: variables.$indigo-dark;
+
+					&:after {
+						background-color: variables.$indigo-lighter;
+					}
+				}
+
+				&:active {
+					background-color: variables.$indigo-light;
+
+					&:after {
+						background-color: variables.$indigo-dark;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-switch--blue {
+		input {
+			&:focus {
+				&:checked ~ .Vlt-switch__slider {
+					&:before {
+						box-shadow: 0 0 0 5px rgba(28, 143, 218, 0.3);
+					}
+				}
+			}
+
+			&:checked ~ .Vlt-switch__slider {
+				background-color: #1c8fda;
+
+				&:hover {
+					background-color: #0070b9;
+
+					&:after {
+						background-color: #d9eefc;
+					}
+				}
+
+				&:active {
+					background-color: #d9eefc;
+
+					&:after {
+						background-color: #0070b9;
+					}
+				}
+			}
+		}
+	}
+
+	&--small {
+		height: 20px;
+		position: relative;
+		width: 32px;
+
+		.Vlt-switch__slider {
+			&:before {
+				height: 20px;
+				left: 0;
+				top: 0;
+				width: 32px;
+			}
+
+			&:after {
+				height: 16px;
+				left: 2px;
+				top: 2px;
+				width: 16px;
+			}
+		}
+
+		input:checked ~ .Vlt-switch__slider {
+			&:after {
+				left: 13px;
+			}
+		}
+	}
+}