@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_dropdowns.scss

@@ -0,0 +1,495 @@
+@use "../lib/mediaqueries";
+@use "../lib/utils";
+@use "../lib/variables";
+@use "buttons";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-dropdown {
+	display: inline-block;
+	position: relative;
+
+	&__header,
+	&__title {
+		background: variables.$purple-dark;
+		border-top-left-radius: variables.$unit1;
+		border-top-right-radius: variables.$unit1;
+		color: variables.$white;
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-top: -8px;
+		padding: 5px variables.$unit2;
+		text-align: left;
+	}
+
+	&__label {
+		flex: 1;
+	}
+
+	&__link,
+	&__block {
+		color: variables.$black;
+		overflow: hidden;
+		padding: 5px 16px;
+		position: relative;
+		text-align: left;
+
+		&--border-top {
+			margin-top: 3px;
+			padding-bottom: 8px;
+			padding-top: 8px;
+
+			&:before {
+				background-color: variables.$grey-light;
+				content: '';
+				height: 1px;
+				left: 0;
+				position: absolute;
+				right: 0;
+				top: 0;
+			}
+		}
+
+		&--disabled,
+		&_disabled {
+			color: variables.$grey-dark;
+			cursor: default;
+			pointer-events: none;
+		}
+
+		&--highlighted {
+			color: variables.$blue;
+		}
+
+		&__icon {
+			flex: 0 0 20px;
+			height: 20px;
+			margin-bottom: -3px;
+			margin-right: 10px;
+			vertical-align: middle;
+			width: 20px;
+		}
+
+		&__label {
+			align-self: center;
+			flex: 1;
+		}
+	}
+
+	&__link {
+		cursor: pointer;
+		display: flex;
+		font-size: 1.4rem;
+		white-space: nowrap;
+
+		&:hover,
+		&:focus {
+			background: rgba(variables.$black, 0.05);
+		}
+
+		&:focus {
+			outline: none;
+		}
+
+		&:active {
+			background: rgba(variables.$black, 0.1);
+		}
+
+		&--nohover {
+			&:hover {
+				background: transparent;
+			}
+		}
+
+		&--selected,
+		&_selected {
+			font-size: 1.5rem;
+			font-weight: 600;
+			padding-right: 40px;
+
+			&:after {
+				$fill-color: utils.encode-hex-code(variables.$black);
+				background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22#{$fill-color}%22%20fill-rule%3D%22nonzero%22%20d%3D%22M2.904%2012.11L1.5%2013.52%207.958%2020%2022.5%205.409%2021.096%204%207.958%2017.182z%22%2F%3E%3C%2Fsvg%3E') no-repeat right center;
+				background-size: contain;
+				content: '';
+				height: 16px;
+				position: absolute;
+				right: 16px;
+				top: 9px;
+				width: 16px;
+			}
+		}
+	}
+
+	&__block {
+		&--nowrap {
+			white-space: nowrap;
+		}
+
+		&--center {
+			text-align: center;
+		}
+	}
+
+	& + .Vlt-btn,
+	.Vlt-btn + & {
+		margin-left: variables.$unit1;
+	}
+
+	&--full-width {
+		display: flex;
+
+		.Vlt-dropdown__trigger {
+			width: 100%;
+
+			.Vlt-btn {
+				text-align: left;
+				width: 100%;
+			}
+		}
+	}
+}
+
+.Vlt-dropdown__trigger {
+	// New wrapper for the dropdown button
+	display: inline-block;
+
+	&--btn {
+		.Vlt-btn {
+			&:hover {
+				transform: none;
+			}
+
+			&:after {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: contain;
+				content: '';
+				display: inline-block;
+				float: right;
+				height: 24px;
+				margin-left: 5px;
+				vertical-align: middle;
+				width: 20px;
+			}
+
+			&.Vlt-btn--secondary.Vlt-btn--outline,
+			&.Vlt-btn--tertiary,
+			&.Vlt-btn--white {
+				&:after {
+					$fill-color: utils.encode-hex-code(variables.$black);
+					background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+				}
+			}
+
+			&.Vlt-btn--outline {
+				&.Vlt-btn--primary {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$purple);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--tertiary {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$grey-light);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--quaternary {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$green);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--indigo {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$indigo);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--orange {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$orange);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--destructive {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$red);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+
+				&.Vlt-btn--white {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$white);
+						background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+					}
+				}
+			}
+
+			&.Vlt-btn--link {
+				&:after {
+					background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23117bb8%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+				}
+			}
+		}
+
+		& + .Vlt-dropdown__panel {
+			margin-top: -4px
+		}
+	}
+
+	&--block {
+		width: 100%;
+
+		.Vlt-btn {
+			text-align: left;
+			width: 100%;
+		}
+	}
+}
+
+.Vlt-dropdown__btn {
+	@extend %Vlt-btn;
+	margin-bottom: 0;
+	margin-top: 0;
+
+	&:after {
+		background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23ffffff%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		content: '';
+		display: inline-block;
+		height: 20px;
+		margin-bottom: -1px;
+		margin-left: 5px;
+		margin-top: -2px;
+		vertical-align: middle;
+		width: 20px;
+	}
+
+	&:hover {
+		transform: none;
+	}
+
+	&:active {
+		transform: none;
+	}
+
+	&:not(&--primary):not(&--secondary):not(&--tertiary):not(&--quaternary):not(&--destructive):not(&--indigo):not(&--orange):not(&--white) {
+		@extend %Vlt-btn--tertiary;
+
+		&:after {
+			$fill-color: utils.encode-hex-code(variables.$black);
+			background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+		}
+	}
+
+	&--large {
+		@extend %Vlt-btn--large;
+
+		&:after {
+			height: 24px;
+			margin-left: 8px;
+			width: 24px;
+		}
+	}
+
+	&--small {
+		@extend %Vlt-btn--small;
+
+		&:after {
+			margin: -4px -5px -3px 5px;
+		}
+	}
+
+	&--app {
+		@include buttons.btn-app-radius;
+	}
+
+	&--primary {
+		@extend %Vlt-btn--primary;
+	}
+
+	&--secondary {
+		@extend %Vlt-btn--secondary;
+	}
+
+	&--quaternary {
+		@extend %Vlt-btn--quaternary;
+	}
+
+	&--destructive {
+		@extend %Vlt-btn--destructive;
+	}
+
+	.Vlt-form__element & {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+}
+
+.Vlt-native-dropdown {
+	display: inline-flex; // Needed for vertical alignment on Firefox
+	position: relative;
+	width: fit-content;
+
+	select {
+		@extend %Vlt-btn, .Vlt-btn--secondary;
+		margin-bottom: 0;
+		margin-top: 0;
+		padding-right: 38px;
+
+		&::-ms-expand {
+		    display: none;
+		}
+
+		&:hover {
+			transform: none;
+		}
+
+		&:active {
+			transform: none;
+		}
+	}
+
+	&:after {
+		$fill-color: utils.encode-hex-code(variables.$white);
+		background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		content: '';
+		display: inline-block;
+		height: 20px;
+		margin-left: 5px;
+		margin-top: -10px;
+		pointer-events: none;
+		position: absolute;
+		right: 12px;
+		top: 50%;
+		width: 20px;
+	}
+
+	&--large {
+		select {
+			@extend %Vlt-btn--large;
+		}
+	}
+
+	.Vlt-form__element--big &,
+	&--large {
+
+		&:after {
+			right: 25px;
+		}
+
+		select {
+			margin-bottom: 0;
+			margin-top: 0;
+			padding-right: 50px !important;
+		}
+	}
+
+	& + .Vlt-btn,
+	.Vlt-btn + & {
+		margin-left: variables.$unit1;
+	}
+
+	&--app {
+		select {
+			@include buttons.btn-app-radius;
+		}
+	}
+}
+
+// .Vlt-dropdown__selection {
+// }
+
+.Vlt-dropdown__panel {
+	max-height: 0;
+	min-width: 100%;
+	overflow: hidden;
+	position: absolute;
+	top: 100%;
+	z-index: variables.$z-index-dropdowns;
+
+	&__content {
+		background: variables.$white;
+		border-radius: variables.$unit1;
+		box-shadow: inset 0 0 0 1px variables.$grey-light, 0 2px 5px rgba(variables.$black, 0.15);
+		font-size: 1.5rem;
+		margin-bottom: 4px;
+		padding: variables.$unit1 0;
+
+		@media #{mediaqueries.$M-less}  {
+			-webkit-overflow-scrolling: touch;
+			overflow-y: scroll;
+		}
+
+		li:not([class]) {
+			display: block; // Needed for IE if the __link or __block is in a nested div to avoid extra spacing
+		}
+	}
+
+	&--left {
+		right: 0;
+	}
+
+	&--width2 {
+		min-width: 200px;
+	}
+
+	&--width3 {
+		min-width: 300px;
+	}
+
+	&--nomaxheight {
+		max-height: none;
+	}
+
+	.Vlt-btn {
+		margin-bottom: 0;
+		margin-top: 0;
+	}
+}
+
+.Vlt-dropdown__scroll {
+	flex: auto; // Has to be auto for IE
+	overflow-y: auto;
+}
+
+.Vlt-dropdown--expanded .Vlt-dropdown__panel,
+.Vlt-dropdown_expanded .Vlt-dropdown__panel,
+.Vlt-dropdown__panel_open {
+	max-height: 100vh;
+	overflow: visible;
+	transition: 0.3s;
+
+	.Vlt-dropdown__panel__content {
+		max-height: 400px;
+		overflow-y: auto;
+
+		&--scroll-area {
+			display: flex;
+			flex-flow: column;
+			overflow-y: hidden;
+
+			.Vlt-dropdown__link,
+			.Vlt-dropdown__block {
+				flex-shrink: 0;
+			}
+		}
+	}
+}

package/vendor/volta3/scss/components/_empties.scss

@@ -0,0 +1,77 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-empty {
+	align-items: center;
+	display: flex;
+	flex-flow: row wrap;
+	height: 100%;
+	justify-content: center;
+	padding: variables.$unit2 0;
+	text-align: center;
+	width: 100%;
+
+	&:before {
+		background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2260%22%20fill%3D%22%23E1E2E6%22%2F%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M42.75%2038.4375C42.75%2037.6436%2043.3936%2037%2044.1875%2037H75.812C76.606%2037%2077.25%2037.6436%2077.25%2038.4375C77.25%2039.2314%2076.606%2039.875%2075.812%2039.875H44.1875C43.3936%2039.875%2042.75%2039.2314%2042.75%2038.4375ZM49.938%2054.25C50.731%2054.25%2051.375%2054.8936%2051.375%2055.6875V60H68.625V55.6875C68.625%2054.8936%2069.269%2054.25%2070.062%2054.25C70.856%2054.25%2071.5%2054.8936%2071.5%2055.6875V61.438C71.5%2062.231%2070.856%2062.875%2070.062%2062.875H49.938C49.144%2062.875%2048.5%2062.231%2048.5%2061.438V55.6875C48.5%2054.8936%2049.144%2054.25%2049.938%2054.25ZM38.4375%2045.625C37.6436%2045.625%2037%2046.2686%2037%2047.0625V78.688C37%2079.481%2037.6436%2080.125%2038.4375%2080.125H81.562C82.356%2080.125%2083%2079.481%2083%2078.688V47.0625C83%2046.2686%2082.356%2045.625%2081.562%2045.625H38.4375ZM39.875%2077.25V48.5H80.125V77.25H39.875Z%22%20fill%3D%22%23131415%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+		background-position: center center;
+		background-repeat: no-repeat;
+		background-size: contain;
+		content: '';
+		flex: 0 0 100%;
+		height: 120px;
+	}
+
+	&__icon {
+		background-color: variables.$grey-light;
+		border-radius: 50%;
+		display: block;
+		height: 120px;
+		position: relative;
+		width: 120px;
+
+		svg {
+			height: 60px;
+			left: 30px;
+			position: absolute;
+			top: 30px;
+			width: 60px;
+		}
+	}
+
+	&__header {
+		flex: 0 0 100%;
+		font-size: 1.6rem;
+		font-weight: 600;
+		line-height: 2.3rem;
+		margin-bottom: -8px;
+		margin-top: variables.$unit3;
+	}
+
+	&__content {
+		color: variables.$black;
+		flex: 0 0 100%;
+		margin-top: variables.$unit2;
+
+		p {
+			color: variables.$black;
+		}
+	}
+
+	&--search {
+		&:before {
+			background-image: url('data:image/svg+xml,%3Csvg%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Ccircle%20cx%3D%2260%22%20cy%3D%2260%22%20r%3D%2260%22%20fill%3D%22%23E1E2E6%22%2F%3E%0A%3Cpath%20d%3D%22M39.875%2055.6875C39.875%2047.0625%2047.062%2039.875%2055.687%2039.875C64.312%2039.875%2071.5%2047.0625%2071.5%2055.6875C71.5%2064.312%2064.312%2071.5%2055.687%2071.5C47.062%2071.5%2039.875%2064.312%2039.875%2055.6875ZM55.687%2037C45.338%2037%2037%2045.3375%2037%2055.6875C37%2066.037%2045.338%2074.375%2055.687%2074.375C58.85%2074.375%2061.725%2073.512%2064.312%2072.075L74.663%2082.425C75.238%2083%2076.1%2083%2076.675%2082.425L82.425%2076.675C83%2076.1%2083%2075.238%2082.425%2074.663L72.075%2064.312C73.512%2061.725%2074.375%2058.85%2074.375%2055.6875C74.375%2045.3375%2066.037%2037%2055.687%2037Z%22%20fill%3D%22%23131415%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+
+	&--icon {
+		&:before {
+			display: none;
+		}
+	}
+}

package/vendor/volta3/scss/components/_flash-messages.scss

@@ -0,0 +1,39 @@
+@use "../lib/mediaqueries";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-flash {
+	box-shadow: inset 0 0 0 1px variables.$grey, 0 4px 10px rgba(variables.$deep-black, 0.2);
+	left: 50%;
+	margin-left: -45%;
+	position: fixed;
+	top: -100%;
+	transition: top 0.3s;
+	width: 90%;
+	z-index: variables.$z-index-flash;
+
+	&.Vlt-flash_visible {
+		top: 20px;
+	}
+
+	&--bottom {
+		bottom: -100%;
+		top: auto;
+		transition: bottom 0.3s;
+
+		&.Vlt-flash_visible {
+			bottom: 20px;
+			top: auto;
+		}
+	}
+
+	&--small {
+		@media #{mediaqueries.$L-plus} {
+			margin-left: -25%;
+			width: 50%;
+		}
+	}
+}