@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_popups.scss

@@ -0,0 +1,173 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-popup {
+	display: inline-block;
+	position: relative;
+
+	&__panel {
+		max-height: 0;
+		overflow: hidden;
+		position: absolute;
+		width: 250px;
+		z-index: variables.$z-index-popups;
+
+		&--width2 {
+			min-width: 200px;
+		}
+
+		&--width3 {
+			min-width: 300px;
+		}
+
+		&__content {
+			background: variables.$white;
+			border-radius: variables.$unit1;
+			box-shadow: 0 1px 20px rgba(variables.$black, 0.2);
+		}
+
+		&_open {
+			max-height: 100vh;
+			overflow: visible;
+
+			.Vlt-popup__scroll {
+				max-height: 400px;
+				overflow-y: auto;
+			}
+		}
+	}
+
+	&__header {
+		background: variables.$blue;
+		border-top-left-radius: variables.$unit1;
+		border-top-right-radius: variables.$unit1;
+		color: variables.$white;
+		font-size: 1.5rem;
+		font-weight: 900;
+		padding: variables.$unit1 variables.$unit3;
+		text-align: left;
+	}
+
+	&__link {
+		color: variables.$black;
+		cursor: pointer;
+		display: flex;
+		overflow: hidden;
+		padding: 12px 20px 0;
+		position: relative;
+		text-align: left;
+
+		&--noborder {
+			// Fixes the spacing without changing the proportion of the element
+			margin-top: -4px;
+
+			&:before {
+				display: none;
+			}
+		}
+
+		&--disabled,
+		&--selected {
+			color: variables.$grey-dark;
+			cursor: default;
+			pointer-events: none;
+
+			& .Vlt-popup__link__icon {
+				fill: variables.$grey-dark;
+			}
+		}
+
+		&--highlighted {
+			color: variables.$blue;
+		}
+
+		&__icon {
+			fill: variables.$blue;
+			flex: 0 0 20px;
+			height: 20px;
+			margin-right: 10px;
+			vertical-align: middle;
+			width: 20px;
+		}
+
+		&__content {
+			flex: 1;
+			padding-bottom: variables.$unit2;
+			position: relative;
+
+			&:after {
+				background: variables.$grey-light;
+				bottom: 0;
+				content: '';
+				display: block;
+				height: 1px;
+				left: 0;
+				position: absolute;
+				width: 100%;
+			}
+
+			h6 {
+				font-weight: 600;
+				margin-bottom: 0 !important;
+			}
+
+			p {
+				margin-top: variables.$unit1;
+			}
+		}
+
+		&:hover {
+			background: rgba(variables.$black, 0.05);
+		}
+
+		&:active {
+			background: rgba(variables.$black, 0.1);
+		}
+
+		&--nohover {
+			&:hover {
+				background: transparent;
+			}
+		}
+
+		&:last-child {
+			border-bottom-left-radius: variables.$unit1;
+			border-bottom-right-radius: variables.$unit1;
+
+			.Vlt-popup__link__content:after {
+				display: none;
+			}
+		}
+	}
+
+	&--top-left {
+		.Vlt-popup__panel {
+			bottom: 100%;
+			right: 0;
+		}
+	}
+
+	&--top-right {
+		.Vlt-popup__panel {
+			bottom: 100%;
+			left: 0;
+		}
+	}
+
+	&--bottom-left {
+		.Vlt-popup__panel {
+			right: 0;
+			top: 100%;
+		}
+	}
+
+	&--bottom-right {
+		.Vlt-popup__panel {
+			left: 0;
+			top: 100%;
+		}
+	}
+}

package/vendor/volta3/scss/components/_progress.scss

@@ -0,0 +1,28 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-progress {
+	background-color: rgba(variables.$grey-darker, 0.45);
+	border-radius: 10px;
+	display: block;
+	height: 6px;
+	margin: 7px 0;
+	overflow: hidden;
+	position: relative;
+
+	&__bar {
+		background-image: linear-gradient(to right, variables.$gradient-blue, variables.$gradient-purple);
+		height: 100%;
+		left: 0;
+		position: absolute;
+		transition: width 0.2s ease-out;
+		width: 0%;
+
+		&[class*='Vlt-bg-'] {
+			background-image: none;
+		}
+	}
+}

package/vendor/volta3/scss/components/_spinner.scss

@@ -0,0 +1,105 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-spinner {
+  display: inline-block;
+  height: 64px;
+  margin: variables.$unit1;
+  position: relative;
+  width: 64px;
+
+  &:before,
+  &:after {
+    animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border: 6px solid variables.$black;
+    border-color: variables.$black transparent transparent;
+    border-radius: 50%;
+    box-sizing: border-box;
+    content: '';
+    display: block;
+    height: 75%;
+    margin: 6px;
+    position: absolute;
+    width: 75%;
+  }
+
+  &:after {
+    animation-delay: -0.1s;
+  }
+
+  &--small {
+    height: 32px;
+    width: 32px;
+
+    &:before,
+    &:after {
+      border-width: 3px;
+      margin: 3px;
+    }
+  }
+
+  &--smaller {
+    height: 20px;
+    width: 20px;
+
+    &:before,
+    &:after {
+      border-width: 2px;
+      margin: 2px;
+    }
+  }
+
+  &--middle {
+    vertical-align: middle;
+  }
+
+  &--center {
+    display: block;
+    margin: 0 auto;
+  }
+
+  &--white {
+    &:before,
+    &:after {
+      border-color: variables.$white transparent transparent;
+    }
+  }
+
+  .Vlt-btn & {
+    height: 20px;
+    margin: -3px 6px 0 0;
+    vertical-align: middle;
+    width: 20px;
+
+    &:before,
+    &:after {
+      border-width: 2px;
+      margin: 2px;
+    }
+  }
+
+  .Vlt-btn--large & {
+    height: 24px;
+    width: 24px;
+  }
+
+  .Vlt-btn--small & {
+    height: 18px;
+    margin-top: -4px;
+    width: 18px;
+  }
+}
+
+@keyframes spinner {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+

package/vendor/volta3/scss/components/_steps.scss

@@ -0,0 +1,242 @@
+@use "../lib/mediaqueries";
+@use "../lib/utils";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-steps {
+	counter-reset: steps;
+	display: inline-flex;
+	justify-content: center;
+	list-style: none;
+	margin: 0;
+	overflow: visible;
+	padding: 0;
+
+	&--black {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$black;
+					border-color: variables.$black;
+				}
+			}
+		}
+	}
+
+	&--grey {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$grey;
+					border-color: variables.$grey;
+				}
+			}
+		}
+	}
+
+	&--white {
+		.Vlt-steps__item {
+			&:before {
+				border-color: variables.$white;
+				color: variables.$white;
+			}
+
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$white;
+					color: variables.$black;
+				}
+			}
+		}
+	}
+
+	&--orange {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$orange;
+					border-color: variables.$orange;
+				}
+			}
+		}
+	}
+
+	&--blue {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$blue;
+					border-color: variables.$blue;
+				}
+			}
+		}
+	}
+
+	&--red {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$red;
+					border-color: variables.$red;
+				}
+			}
+		}
+	}
+
+	&--green {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$green;
+					border-color: variables.$green;
+				}
+			}
+		}
+	}
+
+	&--purple {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$purple;
+					border-color: variables.$purple;
+				}
+			}
+		}
+	}
+
+	&--yellow {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$yellow;
+					border-color: variables.$yellow;
+				}
+			}
+		}
+	}
+
+	&--indigo {
+		.Vlt-steps__item {
+			&--selected,
+			&_selected {
+				&:before {
+					background: variables.$indigo;
+					border-color: variables.$indigo;
+				}
+			}
+		}
+	}
+
+	&__item {
+		align-items: center;
+		color: variables.$black;
+		counter-increment: steps;
+		display: table;
+		font-size: 14px;
+		font-weight: 400;
+		margin: 0 65px 0 0;
+		position: relative;
+		text-align: center;
+
+		@media #{mediaqueries.$S-only} {
+			flex: 1;
+			position: relative;
+			text-align: center;
+		}
+
+		span {
+			font-size: 1.1rem;
+			font-weight: 400;
+			left: 50%;
+			line-height: 1.5rem;
+			margin-top: 4px;
+			position: absolute;
+			transform: translateX(-50%);
+			white-space: nowrap;
+		}
+
+		&:first-child {
+			margin-left: 0;
+		}
+
+		a {
+			color: variables.$black;
+		}
+
+  		&:before {
+  			align-items: center;
+			border: 1px solid;
+			border-color: variables.$black;
+			border-radius: 100%;
+			color: variables.$black;
+			content: counter(steps);
+			display: flex;
+			flex: 0 0 40px;
+			font-size: 14px;
+			height: 40px;
+			justify-content: center;
+			margin: 0 auto;;
+			width: 40px;
+  		}
+
+  		&:after {
+			$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%3Cg%20clip-path%3D%22url(%23clip0)%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M9.55892%204.05952C9.89391%203.81589%2010.363%203.88995%2010.6066%204.22494L15.9399%2011.5583C16.1312%2011.8213%2016.1312%2012.1775%2015.9399%2012.4405L10.6066%2019.7739C10.363%2020.1089%209.89391%2020.1829%209.55892%2019.9393C9.22393%2019.6957%209.14987%2019.2266%209.3935%2018.8916L14.406%2011.9994L9.3935%205.1072C9.14987%204.77221%209.22393%204.30315%209.55892%204.05952Z%22%2F%3E%0A%3C%2Fg%3E%0A%3Cdefs%3E%0A%3CclipPath%20id%3D%22clip0%22%3E%0A%3Crect%20x%3D%224%22%20y%3D%224%22%20width%3D%2216%22%20height%3D%2216%22%2F%3E%0A%3C%2FclipPath%3E%0A%3C%2Fdefs%3E%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			content: '';
+			height: 24px;
+			position: absolute;
+			right: -45px;
+			top: 8px;
+			width: 24px;
+		}
+
+		&:last-child {
+			margin-right: 0;
+
+			&:after {
+				display: none;
+			}
+		}
+
+		&--selected,
+		&_selected {
+			&:before {
+				background: variables.$black;
+				color: variables.$white;
+				font-weight: 400;
+			}
+		}
+
+		&_done {
+			&:before {
+				background-color: variables.$grey;
+				background-image: 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%20%3E%3Cpath%20fill%3D%22%23fff%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');
+				background-position: center center;
+				background-repeat: no-repeat;
+				background-size: 20px 20px;
+				border: 0;
+				content: '';
+			}
+
+			&: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%2024%2024%22%20style%3D%22enable-background%3Anew%200%200%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A%23C4CDD5%3B%22%20d%3D%22M13.5%2C12l-5.2%2C5.4c-0.3%2C0.4-0.3%2C0.9%2C0%2C1.3c0.3%2C0.3%2C0.9%2C0.4%2C1.2%2C0c0%2C0%2C0%2C0%2C0%2C0L16%2C12L9.5%2C5.3%0D%0A%09c-0.3-0.3-0.9-0.4-1.2%2C0c0%2C0%2C0%2C0%2C0%2C0c-0.3%2C0.4-0.3%2C0.9%2C0%2C1.3L13.5%2C12z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			}
+		}
+	}
+}