@vgip/meta-ui 1.9.9 → 2.1.0

package/vendor/volta3/scss/components/_color-classes.scss

@@ -0,0 +1,186 @@
+@use "sass:color";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+$colors: (
+	'white': variables.$white,
+	orange-lighter: variables.$orange-lighter,
+	orange-light: variables.$orange-light,
+	'orange': variables.$orange,
+	orange-dark: variables.$orange-dark,
+	orange-darker: variables.$orange-darker,
+	blue-lighter: variables.$blue-lighter,
+	blue-light: variables.$blue-light,
+	'blue': variables.$blue,
+	blue-dark: variables.$blue-dark,
+	blue-darker: variables.$blue-darker,
+	blue-text: variables.$blue-text,
+	green-lighter: variables.$green-lighter,
+	green-light: variables.$green-light,
+	'green': variables.$green,
+	green-dark: variables.$green-dark,
+	green-darker: variables.$green-darker,
+	green-text: variables.$green-text,
+	purple-lighter: variables.$purple-lighter,
+	purple-light: variables.$purple-light,
+	'purple': variables.$purple,
+	purple-dark: variables.$purple-dark,
+	purple-darker: variables.$purple-darker,
+	purple-text: variables.$purple-text,
+	teal-lighter: variables.$teal-lighter,
+	teal-light: variables.$teal-light,
+	'teal': variables.$teal,
+	teal-dark: variables.$teal-dark,
+	teal-darker: variables.$teal-darker,
+	teal-text: variables.$teal-text,
+	yellow-lighter: variables.$yellow-lighter,
+	yellow-light: variables.$yellow-light,
+	'yellow': variables.$yellow,
+	yellow-dark: variables.$yellow-dark,
+	yellow-darker: variables.$yellow-darker,
+	yellow-text: variables.$yellow-text,
+	indigo-lighter: variables.$indigo-lighter,
+	indigo-light: variables.$indigo-light,
+	'indigo': variables.$indigo,
+	indigo-dark: variables.$indigo-dark,
+	indigo-darker: variables.$indigo-darker,
+	indigo-text: variables.$indigo-text,
+	grey-lighter: variables.$grey-lighter,
+	grey-light: variables.$grey-light,
+	'grey': variables.$grey,
+	grey-dark: variables.$grey-dark,
+	grey-darker: variables.$grey-darker,
+	'black': variables.$black,
+	red-lighter: variables.$red-lighter,
+	red-light: variables.$red-light,
+	'red': variables.$red,
+	red-dark: variables.$red-dark,
+	red-darker: variables.$red-darker,
+	red-text: variables.$red-text,
+	aqua-lighter: variables.$aqua-lighter,
+	aqua-light: variables.$aqua-light,
+	'aqua': variables.$aqua,
+	aqua-dark: variables.$aqua-dark,
+	aqua-darker: variables.$aqua-darker,
+	aqua-text: variables.$aqua-text
+);
+
+@each $color, $color-variable in $colors {
+	.Vlt-#{$color} {
+		color: $color-variable !important;
+		fill: $color-variable !important;
+	}
+
+	.Vlt-bg-#{$color} {
+		background-color: $color-variable !important;
+	}
+
+	.Vlt-bdr-#{$color} {
+		border-color: $color-variable !important;
+	}
+}
+
+.Vlt-gradient {
+	&--blue {
+		background: linear-gradient(to right, color.adjust(variables.$blue-dark, $lightness: 5%), color.adjust(variables.$blue-dark, $lightness: -10%)) !important;
+	}
+
+	&--blue-light {
+		background: linear-gradient(to right, color.adjust(variables.$blue, $lightness: 5%), color.adjust(variables.$blue, $lightness: -10%)) !important;
+	}
+
+	&--red {
+		background: linear-gradient(to right, color.adjust(variables.$red, $lightness: 5%), color.adjust(variables.$red, $lightness: -10%)) !important;
+	}
+
+	&--orange {
+		background: linear-gradient(to right, color.adjust(variables.$orange, $lightness: 10%), color.adjust(variables.$orange, $lightness: -5%)) !important;
+	}
+
+	&--indigo {
+		background: linear-gradient(to right, color.adjust(variables.$indigo, $lightness: 5%), color.adjust(variables.$indigo, $lightness: -10%)) !important;
+	}
+
+	&--green {
+		background: linear-gradient(to right, color.adjust(variables.$green, $lightness: 5%), color.adjust(variables.$green, $lightness: -10%)) !important;
+	}
+
+	&--purple {
+		background: linear-gradient(to right, color.adjust(variables.$purple, $lightness: 5%), color.adjust(variables.$purple, $lightness: -10%)) !important;
+	}
+
+	&--teal {
+		background: linear-gradient(to right, color.adjust(variables.$teal, $lightness: 5%), color.adjust(variables.$teal, $lightness: -10%)) !important;
+	}
+
+	&--blue-to-pink {
+		background: linear-gradient(to right, variables.$gradient-blue, variables.$gradient-pink) !important;
+	}
+
+	&--blue-to-purple {
+		background: linear-gradient(to right, variables.$gradient-blue, variables.$gradient-purple) !important;
+	}
+
+	&--pink-to-blue {
+		background: linear-gradient(to right, variables.$gradient-pink, variables.$gradient-blue) !important;
+	}
+
+	&--pink-to-peach {
+		background: linear-gradient(to right, variables.$gradient-pink, variables.$gradient-peach) !important;
+	}
+
+	&--purple-to-peach {
+		background: linear-gradient(to right, variables.$gradient-purple, variables.$gradient-peach) !important;
+	}
+
+	&--gumdrops1 {
+		background: variables.$gumdrops1 !important;
+	}
+
+	&--gumdrops2 {
+		background: variables.$gumdrops2 !important;
+	}
+
+	&--gumdrops3 {
+		background: variables.$gumdrops3 !important;
+	}
+
+	&--lovehearts1 {
+		background: variables.$lovehearts1 !important;
+	}
+
+	&--lovehearts2 {
+		background: variables.$lovehearts2 !important;
+	}
+
+	&--lovehearts3 {
+		background: variables.$lovehearts3 !important;
+	}
+
+	&--skittles1 {
+		background: variables.$skittles1 !important;
+	}
+
+	&--skittles2 {
+		background: variables.$skittles2 !important;
+	}
+
+	&--skittles3 {
+		background: variables.$skittles3 !important;
+	}
+
+	&--twizzlers1 {
+		background: variables.$twizzlers1 !important;
+	}
+
+	&--twizzlers2 {
+		background: variables.$twizzlers2 !important;
+	}
+
+	&--twizzlers3 {
+		background: variables.$twizzlers3 !important;
+	}
+}

package/vendor/volta3/scss/components/_dialpad.scss

@@ -0,0 +1,224 @@
+@use "../lib/utils";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-dialpad {
+	background: variables.$black;
+	border-radius: variables.$unit1;
+	box-shadow: 0 5px 10px 0 rgba(variables.$black, 0.25);
+	margin: variables.$unit1 auto;
+	max-width: 100%;
+	width: 300px;
+
+	&__keypad {
+		display: flex;
+		flex-flow: row wrap;
+		padding: variables.$unit1 variables.$unit1 variables.$unit3;
+	}
+
+	&__key {
+		@extend .reset-button !optional;
+		align-items: center;
+		border-radius: 6px;
+		cursor: pointer;
+		display: flex;
+		flex: 0 0 33%;
+		flex-flow: row wrap;
+		height: 60px;
+		justify-content: center;
+		margin: 2px 0;
+		transition: background 0.4s;
+
+		&__main {
+			align-self: flex-start;
+			color: variables.$white;
+			flex: 0 0 100%;
+			font-size: 3rem;
+			font-weight: 800;
+			padding-bottom: 2px;
+			padding-top: 10px;
+			text-align: center;
+		}
+
+		&__sub {
+			align-self: flex-start;
+			color: variables.$grey-dark;
+			flex: 0 0 100%;
+			font-size: 1.2rem;
+			font-weight: 600;
+			text-align: center;
+			text-transform: uppercase;
+		}
+
+		&__sub-plus {
+			font-size: 2rem;
+			font-weight: 800;
+		}
+
+		&:hover {
+			background: rgba(variables.$white, 0.15);
+		}
+
+		&:active {
+			background: rgba(variables.$white, 0.25);
+		}
+
+		svg {
+			height: 24px;
+			width: 24px;
+		}
+
+		.Vlt-btn {
+			margin: 0;
+
+			svg {
+				height: 24px;
+				margin: 0 -12px;
+				width: 24px;
+			}
+		}
+
+		&--nohover {
+			&:hover {
+				background: transparent;
+			}
+		}
+	}
+
+	&__header {
+		color: variables.$white;
+		font-size: 1.2rem;
+		padding: 12px 32px;
+		position: relative;
+		text-align: center;
+
+		&__dismiss {
+			$fill-color: utils.encode-hex-code(variables.$white);
+			background-color: transparent;
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M17.7429%206.25714C17.4%205.91429%2016.8857%205.91429%2016.5429%206.25714L12%2010.8L7.45714%206.25714C7.11429%205.91429%206.6%205.91429%206.25714%206.25714C5.91429%206.6%205.91429%207.11429%206.25714%207.45714L10.8%2012L6.25714%2016.5429C5.91429%2016.8857%205.91429%2017.4%206.25714%2017.7429C6.42857%2017.9143%206.6%2018%206.85714%2018C7.11429%2018%207.28571%2017.9143%207.45714%2017.7429L12%2013.2L16.5429%2017.7429C16.7143%2017.9143%2016.9714%2018%2017.1429%2018C17.3143%2018%2017.5714%2017.9143%2017.7429%2017.7429C18.0857%2017.4%2018.0857%2016.8857%2017.7429%2016.5429L13.2%2012L17.7429%207.45714C18.0857%207.11429%2018.0857%206.6%2017.7429%206.25714Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 100%;
+			border: 0;
+			box-shadow: none;
+			cursor: pointer;
+			height: 24px;
+			opacity: 1;
+			outline: none;
+			position: absolute;
+			right: 8px;
+			top: 8px;
+			transition: opacity 0.2s;
+			width: 24px;
+
+			svg {
+				display: none;
+			}
+
+			&:hover {
+				opacity: 0.7;
+			}
+		}
+	}
+
+	&__strip {
+		align-items: center;
+		background: rgba(variables.$white, 0.0625);
+		display: flex;
+		height: 52px;
+		padding: variables.$unit1 variables.$unit2;
+
+		&__icon {
+			flex: 0 0 28px;
+			width: 28px;
+		}
+
+		&__backspace {
+			cursor: pointer;
+			flex: 0 0 28px;
+			transition: opacity 0.2s;
+			width: 28px;
+
+			&:hover {
+				opacity: 0.7;
+			}
+		}
+
+		&__number {
+			flex: 1;
+			padding: 0 variables.$unit0;
+
+			input {
+				background: transparent;
+				border: 0;
+				color: variables.$white;
+				direction: rtl;
+				font-size: 2.1rem;
+				font-weight: 800;
+  				overflow: hidden;
+  				text-align: center;
+  				text-overflow: ellipsis;
+  				white-space: nowrap;
+  				width: 100%;
+
+				&:focus {
+					direction: ltr;
+					outline: none;
+				}
+			}
+		}
+	}
+
+	&--light {
+		background: variables.$white;
+		border: 0;
+
+		.Vlt-dialpad {
+			&__key {
+				&__main {
+					color: variables.$black;
+				}
+
+				&__sub {
+					color: variables.$grey-dark;
+				}
+
+				&:hover {
+					background: variables.$grey-lighter;
+				}
+
+				&:active {
+					background: variables.$grey-light;
+				}
+
+				&--nohover {
+					&:hover {
+						background: transparent;
+					}
+				}
+			}
+
+			&__header {
+				color: variables.$grey-darker;
+
+				&__dismiss {
+					$fill-color: utils.encode-hex-code(variables.$black);
+					background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M17.7429%206.25714C17.4%205.91429%2016.8857%205.91429%2016.5429%206.25714L12%2010.8L7.45714%206.25714C7.11429%205.91429%206.6%205.91429%206.25714%206.25714C5.91429%206.6%205.91429%207.11429%206.25714%207.45714L10.8%2012L6.25714%2016.5429C5.91429%2016.8857%205.91429%2017.4%206.25714%2017.7429C6.42857%2017.9143%206.6%2018%206.85714%2018C7.11429%2018%207.28571%2017.9143%207.45714%2017.7429L12%2013.2L16.5429%2017.7429C16.7143%2017.9143%2016.9714%2018%2017.1429%2018C17.3143%2018%2017.5714%2017.9143%2017.7429%2017.7429C18.0857%2017.4%2018.0857%2016.8857%2017.7429%2016.5429L13.2%2012L17.7429%207.45714C18.0857%207.11429%2018.0857%206.6%2017.7429%206.25714Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				}
+			}
+
+			&__strip {
+				background: variables.$grey-lighter;
+
+				&__number {
+					input {
+						color: variables.$grey-darker;
+					}
+				}
+			}
+		}
+	}
+}