@vgip/meta-ui 2.0.0 → 2.1.1

package/vendor/volta3/scss/components/_tabs.scss

@@ -0,0 +1,296 @@
+@use "../lib/mediaqueries";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+%tabs-panel {
+	// We use display and not visibility to prevent problems with nested tabs
+	display: none;
+	height: 100%;
+	left: 0;
+	position: absolute;
+	top: 0;
+	width: 100%;
+}
+
+%tabs-panel-active {
+	display: block;
+	position: static;
+}
+
+%tabs-link {
+	background: none;
+	border: 0;
+	border-radius: 0;
+	color: variables.$grey-darker;
+	cursor: pointer;
+	display: inline-block;
+	font-size: 1.5rem;
+	font-weight: 400;
+	margin: 0 20px 0 0; // iOS adds margin around buttons so the 0s need to be declared
+	outline: none;
+	padding: 14px 0px;
+	position: relative;
+
+	svg {
+		height: 20px;
+		margin-bottom: -(variables.$unit0);
+		vertical-align: baseline;
+		width: 20px;
+
+		& + span {
+			margin-left: variables.$unit1;
+		}
+	}
+
+	&:after {
+		background: variables.$grey-light;
+		bottom: 0;
+		content: '';
+		height: 3px;
+		left: 50%;
+		position: absolute;
+		transition: none;
+		width: 0px;
+	}
+
+	@media #{mediaqueries.$L-plus} {
+		// On iOS, the browsers treat the first click as :hover if there's a style for it
+		// So we're keeping this only on desktop
+
+		&:hover:not(.Vlt-tabs__link_active) {
+			background: none;
+			color: variables.$black;
+
+			&:after {
+				left: 0;
+				transition: all 0.2s;
+				width: 100%;
+			}
+		}
+	}
+}
+
+%tabs-link-bordered {
+	border-top-left-radius: variables.$unit1;
+	border-top-right-radius: variables.$unit1;
+	margin: 0;
+	padding-left: variables.$unit2;
+	padding-right: variables.$unit2;
+	transition: background 0.2s;
+
+	&:after {
+		background: variables.$grey-light;
+		content: '';
+		display: block;
+		height: 60%;
+		left: 0;
+		position: absolute;
+		top: 20%;
+		width: 1px !important;
+	}
+
+	&:first-child {
+		&:after {
+			display: none;
+		}
+	}
+
+	@media #{mediaqueries.$L-plus} {
+		&:hover:not(.Vlt-tabs__link_active) {
+			background: rgba(variables.$black, 0.05);
+		}
+	}
+}
+
+%tabs-link-active {
+	background: none;
+	color: variables.$black;
+	font-weight: 600;
+
+	&:after {
+		background: variables.$black;
+		left: 0;
+		width: 100%;
+
+		@media #{mediaqueries.$M-less} {
+			transition: all 0.2s;
+		}
+	}
+}
+
+%tabs-link-active-bordered {
+	border: 1px solid variables.$grey;
+	border-bottom: 0;
+
+	&:after {
+		display: none;
+	}
+
+	&:before {
+		background: variables.$white;
+		bottom: 0;
+		content: '';
+		height: 1px;
+		left: 0;
+		position: absolute;
+		width: 100%;
+	}
+}
+
+%tabs-header {
+	border-bottom: 1px solid variables.$grey;
+	display: flex;
+	margin: 0;
+	overflow-x: auto;
+	white-space: nowrap;
+}
+
+%tabs-header-bordered {
+	border-bottom: 0;
+	box-shadow: inset 0 -1px 0 variables.$grey;
+	margin-top: variables.$unit1;
+
+	.Vlt-tabs__link {
+		margin-top: variables.$unit0;
+
+		&:first-child {
+			margin-left: variables.$unit1;
+		}
+	}
+}
+
+.Vlt-tabs {
+	&__header {
+		@extend %tabs-header;
+
+		&--shadow:not(.Vlt-tabs__header--icons) {
+			background: linear-gradient(90deg, rgba(variables.$black, 0.1) 0, transparent 10px), linear-gradient(90deg, transparent calc(100% - 10px), rgba(variables.$black, 0.1) 100%) 100% 0;
+			background-color: variables.$white;
+			background-repeat: no-repeat;
+			background-size: 20px 100%, 20px 100%, 14px 100%, 14px 100%;
+
+			.Vlt-tabs__header__wrapper {
+				background: linear-gradient(90deg, variables.$white 20px, transparent 20px), linear-gradient(90deg, transparent calc(100% - 20px), variables.$white calc(100% - 20px)) 100% 0;
+				display: flex;
+				min-width: min-content;
+				width: 100%;
+			}
+		}
+
+		&--spaced {
+			display: flex;
+			justify-content: space-evenly;
+		}
+
+		&--bordered {
+			@extend %tabs-header-bordered;
+
+			.Vlt-tabs__link {
+				@extend %tabs-link-bordered;
+
+				&_active {
+					@extend %tabs-link-active-bordered;
+
+					& + .Vlt-tabs__link {
+						&:after {
+							display: none;
+						}
+					}
+				}
+
+				&_disabled {
+					&:hover {
+						background: none !important;
+					}
+				}
+			}
+		}
+
+		&--icons {
+			flex-flow: row wrap;
+			overflow-x: visible;
+			white-space: normal;
+
+			.Vlt-tabs__link {
+				display: inline-block;
+
+				&_disabled {
+					pointer-events: inherit;
+				}
+
+				.Vlt-tooltip--js[x-placement^='bottom'] {
+					margin-top: 15px;
+				}
+			}
+
+			&:not(.Vlt-tabs__header--bordered) {
+				.Vlt-tabs__link {
+					padding: variables.$unit1 variables.$unit0;
+				}
+			}
+		}
+	}
+
+	&__link {
+		@extend %tabs-link;
+
+		svg {
+			fill: variables.$black;
+		}
+
+		&_active {
+			@extend %tabs-link-active
+		}
+
+		&:focus {
+			background: none;
+		}
+
+		&_disabled {
+			background: none;
+			color: variables.$grey;
+			cursor: default;
+			pointer-events: none;
+
+			&:after {
+				display: none;
+			}
+
+			// svg {
+			// 	fill: $grey;
+			// }
+		}
+	}
+
+	&__content {
+		margin-top: variables.$unit2;
+		position: relative;
+
+		&--flush {
+			margin-top: 0;
+		}
+	}
+
+	&__panel {
+		@extend %tabs-panel;
+
+		&_active {
+			@extend %tabs-panel-active;
+		}
+	}
+}
+
+.Vlt-js-tabs__link {
+	cursor: pointer;
+}
+
+.Vlt-js-tabs__panel {
+	@extend %tabs-panel;
+
+	&_active {
+		@extend %tabs-panel-active;
+	}
+}

package/vendor/volta3/scss/components/_text-separator.scss

@@ -0,0 +1,61 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-text-separator {
+	display: block;
+	line-height: 1.6rem;
+	margin: variables.$unit2 0;
+	overflow: hidden;
+	text-align: center;
+
+	span {
+		color: variables.$black;
+		font-size: 1.2rem;
+		font-weight: 600;
+		padding: 0 variables.$unit1;
+		position: relative;
+
+		&:before,
+		&:after {
+			background: variables.$grey-light;
+			content: '';
+			display: block;
+			height: 1px;
+			position: absolute;
+			top: 50%;
+			width: 100vw;
+		}
+
+		&:before {
+			right: 100%;
+		}
+
+		&:after {
+			left: 100%;
+		}
+	}
+
+	&--red {
+		span {
+			color: variables.$red;
+			font-weight: 600;
+
+			&:before,
+			&:after {
+				background: variables.$red-light;
+			}
+		}
+	}
+
+	&--big {
+		line-height: 2.1rem;
+
+		span {
+			font-size: 1.4rem;
+			font-weight: 600;
+		}
+	}
+}

package/vendor/volta3/scss/components/_tooltips.scss

@@ -0,0 +1,152 @@
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-tooltip {
+	display: inline-flex;
+	position: relative;
+}
+
+span.Vlt-tooltip {
+	margin-left: variables.$unit0;
+	vertical-align: bottom;
+}
+
+.Vlt-tooltip__content {
+	@extend %tooltip-content;
+
+	//temporary, until proper dark mode...
+	a,
+	a.Vlt-text-link,
+	a:visited,
+	a.Vlt-text-link:visited {
+		color: variables.$purple-light;
+		font-weight: 600;
+
+		&:hover {
+			color: variables.$purple;
+		}
+	}
+}
+
+.Vlt-tooltip--js {
+	z-index: variables.$z-index-tooltips;
+
+	&[x-placement^='bottom'] {
+		.Vlt-tooltip__content {
+			@extend .tooltip-bottom-mixin;
+		}
+
+		.Vlt-tooltip__arrow {
+			@extend .tooltip-arrow, .arrow-bottom-mixin;
+		}
+	}
+
+	&[x-placement^='top'] {
+		.Vlt-tooltip__content {
+			@extend .tooltip-top-mixin;
+		}
+
+		.Vlt-tooltip__arrow {
+			@extend .tooltip-arrow, .arrow-top-mixin;
+		}
+	}
+
+	&[x-placement^='right'] {
+		.Vlt-tooltip__content {
+			@extend .tooltip-right-mixin;
+		}
+
+		.Vlt-tooltip__arrow {
+			@extend .tooltip-arrow, .arrow-right-mixin;
+		}
+	}
+
+	&[x-placement^='left'] {
+		.Vlt-tooltip__content {
+			@extend .tooltip-left-mixin;
+		}
+
+		.Vlt-tooltip__arrow {
+			@extend .tooltip-arrow, .arrow-left-mixin;
+		}
+	}
+
+	&.Vlt-tooltip--large {
+		.Vlt-tooltip__content {
+			padding: 16px 24px;
+		}
+	}
+}
+
+// Mixins
+.tooltip-arrow {
+	border-style: solid;
+	position: absolute;
+}
+
+.arrow-bottom-mixin {
+	border-color: transparent transparent variables.$black;
+	border-width: 0 6px 6px;
+	top: 3px;
+}
+
+.arrow-top-mixin {
+	border-color: variables.$black transparent transparent;
+	border-width: 6px 6px 0px;
+	bottom: 3px;
+}
+
+.arrow-right-mixin {
+	border-color: transparent variables.$black transparent transparent;
+	border-width: 6px 6px 6px 0;
+	left: 3px;
+}
+
+.arrow-left-mixin {
+	border-color: transparent transparent transparent variables.$black;
+	border-width: 6px 0px 6px 6px;
+	right: 3px;
+}
+
+.tooltip-bottom-mixin {
+	margin-top: 9px;
+	text-align: center;
+}
+
+.tooltip-top-mixin {
+	margin-bottom: 9px;
+	text-align: center;
+}
+
+.tooltip-right-mixin {
+	margin-left: 9px;
+	text-align: left;
+}
+
+.tooltip-left-mixin {
+	margin-right: 9px;
+	text-align: left;
+}
+
+@mixin tooltip-content {
+	background: variables.$black;
+	border-radius: 6px;
+	color: variables.$white;
+	cursor: default;
+	font-size: 1.4rem;
+	font-weight: 600;
+	line-height: 2.1rem;
+	max-width: 300px;
+	padding: 6px 12px;
+	transition: display 0.2s;
+	white-space: normal;
+	width: max-content;
+	z-index: variables.$z-index-tooltips;
+}
+
+%tooltip-content {
+	@include tooltip-content;
+}

package/vendor/volta3/scss/components/side-navigation/_side-nav--aqua.scss

@@ -0,0 +1,179 @@
+@use "sass:color";
+@use "../../lib/mediaqueries";
+@use "../../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+$sidenav-selected-background: rgba(variables.$white, 0.1);
+$sidenav-icons-default-color: #00fff4;
+$sidenav-text-color: variables.$white;
+$sidenav-titles-color: rgba(variables.$aqua-lighter, 0.8);
+
+.Vlt-sidenav {
+	&__mobile--aqua {
+		background: variables.$aqua-dark;
+
+		button {
+			svg {
+				fill: variables.$white;
+			}
+		}
+	}
+
+	&--aqua {
+		background: linear-gradient(to bottom, #035879, #0085a8);
+
+		hr {
+			border-top: 1px solid rgba($sidenav-text-color, 0.1);
+		}
+
+		.Vlt-sidenav {
+			&__link {
+				&:hover {
+					background: rgba($sidenav-text-color, 0.05);
+				}
+			}
+		}
+
+		.Vlt-sidenav__scroll {
+			.Vlt-sidemenu {
+				background: linear-gradient(to bottom, color.adjust(#035879, $lightness: 1%) 10px, transparent 10px), linear-gradient(0deg, transparent calc(100% - 10px), #0085a8 calc(100% - 10px), #0085a8 100%);
+			}
+		}
+
+		.Vlt-sidemenu {
+
+			&__link,
+			&__trigger {
+				color: $sidenav-text-color;
+
+				&:hover {
+					background: rgba(variables.$white, 0.05);
+				}
+
+				svg {
+					fill: $sidenav-icons-default-color;
+				}
+			}
+
+			&__link {
+				&_active {
+					background: $sidenav-selected-background;
+
+					svg {
+						fill: variables.$white !important;
+					}
+
+					&:hover {
+						background: variables.$aqua-dark;
+					}
+				}
+			}
+
+			&__trigger {
+				&:after {
+					background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%3E%0A%20%20%20%20%3Cpath%20fill%3D%22%23FFF%22%20fill-rule%3D%22evenodd%22%20d%3D%22M10%2013.524L4.692%208.136a.667.667%200%201%201%20.951-.937L10%2011.62l4.357-4.422a.668.668%200%200%201%20.95.937L10%2013.524z%22%20opacity%3D%22.4%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+					background-position: center center;
+					background-repeat: no-repeat;
+					background-size: contain;
+				}
+
+				&_current {
+					&:not(.Vlt-sidemenu__trigger_active) {
+						background: rgba(variables.$white, 0.05);
+					}
+				}
+			}
+
+			&__title {
+				color: $sidenav-titles-color;
+
+				&--border {
+					border-top: 1px solid rgba(variables.$aqua-light, 0.2);
+				}
+			}
+		}
+
+		.Vlt-sidetabs {
+
+			&--bottom {
+				border-top: 1px solid rgba(variables.$white, 0.1);
+			}
+
+			&--top {
+				border-bottom: 1px solid rgba(variables.$white, 0.1);
+			}
+
+			.Vlt-js-tabs__link {
+
+				svg {
+					fill: rgba($sidenav-icons-default-color, 0.8) !important;
+				}
+
+				&:hover {
+					&:after {
+						background: rgba($sidenav-icons-default-color, 0.4);
+					}
+
+					svg {
+						fill: variables.$white !important;
+					}
+				}
+
+				&_active,
+				&:active {
+					&:after {
+						background: rgba($sidenav-icons-default-color, 0.8);
+					}
+
+					svg {
+						fill: variables.$white !important;
+					}
+				}
+			}
+		}
+
+		.Vlt-sidenav__block {
+			&:before,
+			&:after {
+				background: rgba(variables.$white, 0.1);
+			}
+
+			&--logo {
+				&:after {
+					display: block;
+				}
+
+				.Vlt-sidenav__collapse {
+					svg {
+						fill: $sidenav-icons-default-color;
+					}
+				}
+			}
+		}
+
+		&.Vlt-sidenav--collapsed {
+			@media #{mediaqueries.$M-plus} {
+				.Vlt-sidemenu__title {
+					border-bottom: 1px solid rgba(variables.$white, 0.1);
+				}
+
+				li {
+					li {
+						.Vlt-sidemenu__link_active {
+							svg {
+								fill: variables.$grey-dark !important;
+							}
+						}
+					}
+				}
+
+				.Vlt-sidemenu__trigger_active {
+					background: variables.$aqua-dark;
+				}
+			}
+		}
+	}
+}