@vgip/meta-ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,631 @@
+@use "../../lib/mediaqueries";
+@use "../../lib/utils";
+@use "../../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+$hover-blue: #649abc;
+$hover-pink: #a4237a;
+
+.Vlt-sidenav {
+	background: variables.$grey-lighter;
+	display: flex;
+	flex: 0 0 270px;
+	flex-flow: column;
+	font-weight: 600;
+	height: 100vh;
+	padding-bottom: 10px;
+	width: 270px;
+
+	@media #{mediaqueries.$S-only} {
+		height: 100vh;
+		left: 0;
+		padding-top: 5px;
+		position: fixed;
+		top: 0;
+		transform: translate(-100vw, 0);
+		transition: transform 0.2s;
+		width: 80vw;
+		z-index: variables.$z-index-sidenav-mobile;
+
+		&_visible {
+			box-shadow: 4px 0 12px rgba(variables.$black, 0.15), 20vw 0 0 rgba(variables.$black, 0.15);
+			transform: translate(0, 0);
+		}
+	}
+
+	&--animate {
+		transition: width 0.2s, flex-basis 0.2s;
+	}
+
+	&__mobile-trigger {
+		display: none;
+
+		@media #{mediaqueries.$S-only} {
+			display: block;
+		}
+	}
+
+	&__block {
+		flex-shrink: 0;
+		padding: 10px 12px;
+		position: relative;
+
+		&:before,
+		&:after {
+			content: '';
+			display: none;
+			flex: 0 0 100%;
+			height: 1px;
+			left: 20px;
+			margin: 0 auto;
+			position: absolute;
+			top: 0;
+			width: calc(100% - 40px);
+		}
+
+		&:after {
+			bottom: 0;
+			top: auto;
+		}
+
+		img,
+		svg {
+			max-width: 100%;
+		}
+
+		&--logo {
+			align-items: center;
+			display: flex;
+			flex-flow: row wrap;
+			padding-bottom: 15px;
+			padding-top: 15px;
+
+			.Vlt-sidenav__logo {
+				flex: 1;
+				margin-left: variables.$unit0;
+
+				svg {
+					width: 100%; // For IE
+				}
+			}
+		}
+
+		&--link {
+			padding: 0;
+		}
+
+		&--border-top {
+			&:before {
+				display: block;
+			}
+		}
+
+		&--border-bottom {
+			&:after {
+				display: block;
+			}
+		}
+	}
+
+	&__scroll {
+		background-image: linear-gradient(to bottom, rgba(variables.$black, 0.05) 0%, transparent 4px), //top
+			linear-gradient(to bottom, transparent calc(100% - 4px), rgba(variables.$black, 0.05) 100%); //bottom
+		background-position: 20px 0;
+		background-repeat: no-repeat;
+		background-size: calc(100% - 40px) 100%, calc(100% - 40px) 100%, 14px 100%, 14px 100%;
+		flex: auto; // not flex: 1 because IE11 needs flex-basis: auto
+		height: 100%; // needed for shadowing, won't be 100% it will adjust to flex
+		overflow-y: auto;
+		position: static; // never give this position relative for any reason, it will prevent tooltips and dropdowns
+
+		@media #{mediaqueries.$S-only} {
+			-webkit-overflow-scrolling: touch;
+			overflow-y: scroll;
+		}
+
+		.Vlt-sidemenu {
+			background: linear-gradient(0deg, variables.$grey-lighter 10px, transparent 10px), // top
+				linear-gradient(0deg, transparent calc(100% - 10px), variables.$grey-lighter calc(100% - 10px)) 100% 0; // bottom
+		}
+	}
+
+	.Vlt-sidemenu {
+		list-style: none;
+		margin: 0;
+		min-height: 100%; // not height, for shadowing
+		padding: 0 12px 10px; // space to allow for the browser url notice
+
+		ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		// Setting main margins with nesting
+
+		.Vlt-sidemenu__title {
+			margin-bottom: 0;
+			margin-left: 0px;
+		}
+
+		li {
+			margin: 0;
+			padding: 0;
+			padding-top: 3px;
+
+			.Vlt-sidemenu__link,
+			.Vlt-sidemenu__trigger {
+				font-size: 1.4rem;
+				padding-left: 10px;
+				padding-right: 35px;
+
+				& + .Vlt-sidemenu__tooltip {
+					display: none;
+				}
+			}
+
+			li {
+				&:first-child {
+					padding-top: 0px;
+				}
+
+				.Vlt-sidemenu__link,
+				.Vlt-sidemenu__trigger {
+					margin-left: 9px;
+					padding-left: 12px;
+
+					svg {
+						display: none;
+					}
+				}
+
+				.Vlt-sidemenu__title {
+					padding-left: 21px;
+				}
+			}
+		}
+
+		// Dropdown arrow
+		&__trigger {
+			+ ul {
+				border-left: 1px solid variables.$grey-light;
+			}
+
+			span:last-of-type:not(.Vlt-badge) {
+				&:after {
+					$fill-color: utils.encode-hex-code(variables.$grey-dark);
+					background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.38326%207.96544C3.58628%207.68629%203.97717%207.62457%204.25632%207.82759L9.99983%2012.0047L15.7433%207.82759C16.0225%207.62457%2016.4134%207.68629%2016.6164%207.96544C16.8194%208.2446%2016.7577%208.63549%2016.4785%208.83851L10.3674%2013.283C10.1483%2013.4423%209.85138%2013.4423%209.63222%2013.283L3.52111%208.83851C3.24195%208.63549%203.18023%208.2446%203.38326%207.96544Z%22%20fill%3D%22#{$fill-color}%22%2F%3E%0A%3C%2Fsvg%3E');
+					background-position: center center;
+					background-repeat: no-repeat;
+					background-size: contain;
+					content: '';
+					display: inline-block;
+					height: 20px;
+					position: absolute;
+					right: 10px;
+					top: 8px;
+					transition: transform 0.2s;
+					width: 16px;
+				}
+			}
+
+			&_active {
+				span:last-of-type:not(.Vlt-badge) {
+					&:after {
+						transform: rotate(180deg);
+					}
+				}
+			}
+
+			&_current {
+				&:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$grey-light;
+				}
+			}
+		}
+
+		&__link,
+		&__trigger {
+			align-items: flex-start;
+			border-radius: 5px;
+			color: variables.$black;
+			cursor: pointer;
+			display: flex;
+			justify-content: left;
+			line-height: 1.5;
+			margin: 0;
+			padding: variables.$unit1 10px;
+			text-decoration: none;
+			transition: background 0.2s;
+
+			&:hover {
+				background: variables.$grey-light;
+				text-decoration: none;
+			}
+
+			&_active:not(.Vlt-sidemenu__trigger_active) {
+				background: variables.$white;
+				color: variables.$black;
+				font-weight: 600;
+
+				svg {
+					fill: variables.$black;
+				}
+			}
+
+			&--disabled {
+				cursor: default;
+				pointer-events: none;
+			}
+
+			svg {
+				fill: variables.$black;
+				flex: 0 0 17px;
+				height: 21px;
+				margin-right: 12px;
+				vertical-align: middle;
+				width: 17px;
+			}
+
+			&--disabled {
+				color: variables.$grey;
+
+				svg {
+					fill: variables.$grey;
+				}
+			}
+
+			.Vlt-badge {
+				margin-left: 8px;
+				margin-top: 1px;
+				position: relative;
+				z-index: 2;
+			}
+
+			.Vlt-sidemenu__label {
+				.Vlt-badge {
+					margin-bottom: 2px;
+					margin-top: 0;
+				}
+			}
+		}
+
+		// Titles
+		&__title {
+			color: variables.$grey-darker;
+			font-size: 1.2rem;
+			font-weight: 600;
+			margin: 0;
+			padding: 8px 10px;
+			text-transform: uppercase;
+
+			&--border {
+				border-top: 1px solid variables.$grey-light;
+				margin-top: 8px;
+				padding-top: 19px;
+			}
+		}
+
+		// Behavior of triggers (expanding and collapsing branches)
+
+		&__trigger {
+			position: relative;
+
+			&:not(.Vlt-sidemenu__trigger_active) + ul {
+			    margin: 0;
+			    opacity: 0;
+			    padding: 0;
+			    transition: opacity 0.1s,
+			    	padding 0.2s,
+			    	margin  0.2s;
+
+	            & * {
+	            	border: 0;
+					font-size: 0 !important;
+					line-height: 0;
+					margin-bottom: 0 !important;
+					margin-top: 0 !important;
+					opacity: 0;
+					padding-bottom: 0 !important;
+					padding-top: 0 !important;
+					transition: all 0.1s;
+
+			    	svg,
+			    	.Vlt-badge {
+			    		height: 0;
+			    		transition: height 0.1s;
+			    	}
+	            }
+			}
+
+			&_active {
+
+				& + ul {
+					margin: 2px 0 2px 18px;
+					margin-bottom: 0px;
+					margin-left: 18px;
+					margin-top: 2px;
+					transition: font-size 0.2s,
+		                margin 0.2s,
+		                opacity 0.2s,
+		                padding 0.2s;
+
+		            & > * {
+		            	opacity: 1;
+		            	transition: all 0.2s;
+		            }
+				}
+			}
+
+			.Vlt-sidemenu__label {
+				max-width: 100%;
+			}
+		}
+
+		// Compressed version
+		// For longer menus, it compresses the padding of menu items without icons while leaving the ones with icons the same
+
+		&__list--compressed {
+			.Vlt-sidemenu__link,
+			.Vlt-sidemenu__trigger {
+				padding: variables.$unit0 10px;
+			}
+
+			.Vlt-sidemenu__trigger {
+				margin-bottom: 4px;
+			}
+		}
+	}
+
+	&__mobile {
+		align-items: center;
+		display: flex;
+		justify-content: space-between;
+		left: 0;
+		padding: 10px;
+		position: fixed;
+		top: 0;
+		width: 100%;
+
+		@media #{mediaqueries.$M-plus} {
+			display: none;
+		}
+
+		&__logo {
+			height: 34px;
+		}
+
+		button {
+			@extend .reset-button !optional;
+			flex: 0 0 40px;
+			height: 40px;
+
+			svg {
+				height: 24px;
+				width: 24px;
+			}
+		}
+
+		.Vlt-template--header & {
+			padding-bottom: 5px;
+			padding-top: 5px;
+		}
+	}
+
+	hr {
+		border-top: 1px solid variables.$grey-light;
+	}
+
+	.Vlt-sidenav {
+		&__link {
+			&:hover {
+				background: variables.$grey-light;
+			}
+		}
+	}
+
+	.Vlt-sidetabs {
+
+		&--bottom {
+			border-top: 1px solid variables.$grey-light;
+		}
+
+		&--top {
+			border-bottom: 1px solid variables.$grey-light;
+		}
+
+		.Vlt-js-tabs__link {
+
+			svg {
+				fill: variables.$grey-dark !important;
+			}
+
+			&:hover {
+				&:after {
+					background: variables.$grey-lighter;
+				}
+
+				svg {
+					fill: variables.$grey-darker !important;
+				}
+			}
+
+			&_active,
+			&:active {
+				&:after {
+					background: variables.$black;
+				}
+
+				svg {
+					fill: variables.$grey-darker !important;
+				}
+			}
+		}
+	}
+
+	.Vlt-sidenav__block {
+		&:before,
+		&:after {
+			background: variables.$grey-light;
+		}
+
+		&--logo {
+			.Vlt-sidenav__collapse {
+				svg {
+					fill: variables.$grey-dark;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--collapsed {
+		@media #{mediaqueries.$M-plus} {
+			.Vlt-sidemenu__title {
+				border-bottom: 1px solid variables.$grey-light;
+			}
+		}
+	}
+
+	&.Vlt-sidenav--rounded {
+		&,
+		.Vlt-sidenav__scroll {
+			border-radius: 0 16px 16px 0;
+		}
+	}
+
+	&.Vlt-sidenav--active-blue,
+	&.Vlt-sidenav--active-green,
+	&.Vlt-sidenav--active-indigo,
+	&.Vlt-sidenav--active-orange,
+	&.Vlt-sidenav--active-purple,
+	&.Vlt-sidenav--active-purple-dark,
+	&.Vlt-sidenav--active-red,
+	&.Vlt-sidenav--active-yellow {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					color: variables.$white;
+
+					svg {
+						fill: variables.$white;
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-white {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$white;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-grey {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$grey-light;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-blue {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$blue;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-green {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$green;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-indigo {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$indigo;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-orange {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$orange;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-purple {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$purple;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-purple-dark {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$purple-dark;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-red {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$red;
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--active-yellow {
+		.Vlt-sidemenu {
+			&__link {
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$yellow;
+				}
+			}
+		}
+	}
+}
+
+body {
+	@media #{mediaqueries.$S-only} {
+		&.Vlt-body--has-sidenav {
+			padding-top: 60px;
+		}
+
+		&.Vlt-body--mobile-menu-open {
+			overflow: hidden;
+		}
+	}
+}

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

@@ -0,0 +1,88 @@
+@use "../../lib/mediaqueries";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-sidenav:not(.Vlt-sidenav--collapsed) .Vlt-sidetabs {
+	margin-left: 20px;
+	margin-right: 20px;
+
+    ul {
+		display: flex;
+		flex-shrink: 0;
+
+		li {
+			flex: 1;
+		}
+    }
+
+    &__label {
+		display: none;
+	}
+
+	&__trigger {
+		display: none;
+	}
+
+    .Vlt-js-tabs__link {
+    	@extend .reset-button !optional;
+    	align-items: center;
+    	font-size: 1.3rem;
+    	font-weight: 400;
+    	height: 45px;
+    	justify-content: center;
+    	position: relative;
+    	width: 100%;
+
+    	&:after {
+			content: '';
+			height: 3px;
+			left: 50%;
+			position: absolute;
+			transition: none;
+			width: 0px;
+		}
+
+		@media #{mediaqueries.$L-plus} {
+			// To prevent problems in iOS this is only on large screens
+			&:hover {
+				&:after {
+					left: 0;
+					transition: all 0.2s;
+					width: 100%;
+				}
+			}
+		}
+
+		&_active,
+		&:active {
+			&:after {
+				left: 0;
+				width: 100%;
+			}
+		}
+    }
+
+    &--bottom {
+    	padding-bottom: 5px;
+
+    	.Vlt-sidetabs__link:after {
+    		top: 0;
+    	}
+    }
+
+    &--top {
+    	padding-top: 5px;
+
+    	.Vlt-sidetabs__link:after {
+    		bottom: 0;
+    	}
+    }
+
+    svg {
+		height: 24px;
+		transition: fill 0.2s;
+		width: 24px;
+	}
+}