@vgip/meta-ui 2.0.0 → 2.1.0

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

@@ -0,0 +1,381 @@
+@use "../../lib/mediaqueries";
+@use "../../lib/variables";
+@use "../tooltips";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+// The sidenav can collapse only in M-plus
+
+.Vlt-sidenav {
+
+	&__elem {
+		&--collapsed {
+			display: none;
+		}
+
+		&--full {
+			display: inherit;
+		}
+	}
+
+	&__block {
+
+		&--logo {
+			.Vlt-sidenav__collapse {
+				cursor: pointer;
+				flex: 0 0 24px;
+				height: 24px;
+				margin-left: 20px;
+				text-align: center;
+				transition: opacity 0.2s;
+
+				&:hover {
+					opacity: 0.5;
+				}
+
+				svg {
+					height: 24px;
+					width: 16px;
+				}
+
+				.Vlt-sidenav--collapsed & {
+					@media #{mediaqueries.$M-plus} {
+						margin-bottom: 10px;
+						margin-left: 0px;
+					}
+				}
+
+				&__close {
+					.Vlt-sidenav--collapsed & {
+						@media #{mediaqueries.$M-plus} {
+							display: none;
+						}
+					}
+				}
+
+				&__open {
+					display: none;
+					order: 1;
+
+					.Vlt-sidenav--collapsed & {
+						@media #{mediaqueries.$M-plus} {
+							display: block;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.Vlt-sidenav--collapsed {
+		@media #{mediaqueries.$M-plus} {
+			flex: 0 0 68px;
+			overflow: visible;
+			position: relative;
+			width: 68px;
+			z-index: variables.$z-index-sidenav; //required for tooltips
+
+			.Vlt-sidenav {
+
+				&__elem {
+					&--collapsed {
+						display: inherit;
+					}
+
+					&--full {
+						display: none;
+					}
+				}
+
+				&__block {
+					left: 0;
+					padding: 10px 0;
+					text-align: center;
+					width: 100%;
+
+					&:before,
+					&:after {
+						left: 14px;
+						width: 40px;
+					}
+
+					& + .Vlt-sidenav__block {
+						margin-top: 0;
+					}
+
+					&--link {
+						margin: 5px 0 0;
+						padding: 5px 0 0;
+
+						.Vlt-sidenav__link {
+							border-radius: 4px;
+							display: block;
+							margin: 0 10px;
+							padding: 8px 10px;
+						}
+					}
+
+					&--logo {
+						flex-flow: column;
+						padding: 10px 10px 15px;
+
+						.Vlt-sidenav__collapse {
+							order: 1;
+						}
+
+						.Vlt-sidenav__logo {
+							flex: 0 0 24px;
+							margin: 0px;
+							order: 2;
+
+							img,
+							svg {
+								height: 24px;
+								width: 27px;
+							}
+						}
+					}
+				}
+			}
+
+			.Vlt-sidemenu {
+				// sub menu separators
+				li li[role='separator'] {
+					display: none;
+				}
+
+				& > li > .Vlt-sidemenu__link,
+				& > li > .Vlt-sidemenu__trigger {
+					align-items: center;
+					border-radius: 4px;
+					display: inline-flex;
+					flex-flow: column;
+					opacity: 1;
+					padding: 8px 10px;
+					position: static;
+
+					// will only work if parent if position static
+					.Vlt-badge {
+						margin-left: 14px;
+						margin-top: -4px;
+						position: absolute;
+					}
+
+					svg {
+						height: 22px;
+						margin: 0;
+						opacity: 0.8;
+						width: 22px;
+					}
+
+					&--disabled {
+						cursor: default;
+						pointer-events: none;
+					}
+
+					&:hover {
+						& .Vlt-sidemenu__label {
+							display: block;
+						}
+					}
+
+					&_active {
+						svg {
+							opacity: 1;
+						}
+					}
+
+					& .Vlt-sidemenu__label {
+						@include tooltips.tooltip-content;
+						display: none;
+						font-weight: 400;
+						left: 100%;
+						margin-left: 10px;
+						margin-top: -12px;
+						position: absolute;
+						text-align: left;
+						white-space: nowrap;
+						width: auto;
+
+						&:before {
+							border-color: transparent variables.$black transparent transparent;
+							border-style: solid;
+							border-width: 6px 6px 6px 0;
+						    content: '';
+							left: -5px;
+							margin-top: -5px;
+						    position: absolute;
+							top: 50%;
+						}
+					}
+				}
+
+				&__trigger {
+					& + ul {
+						border-radius: 6px;
+						left: 72px;
+						margin-top: -36px;
+						position: absolute;
+						width: 240px;
+						z-index: variables.$z-index-sidenav;
+
+						.Vlt-sidemenu__title {
+							margin-left: 0;
+						}
+
+						.Vlt-sidemenu__link,
+						.Vlt-sidemenu__trigger {
+							border-radius: 0px;
+							justify-content: flex-start;
+							margin-left: 0px;
+							padding-left: 20px;
+							padding-right: 20px;
+
+							&:before,
+							&:after {
+								content: none;
+							}
+
+							svg,
+							span {
+								transform: none !important;
+							}
+						}
+
+						ul {
+							left: 244px;
+							margin-top: -40px;
+						}
+
+						li {
+							margin-left: 0 !important;
+							padding-top: 0;
+
+							&:last-child > .Vlt-sidemenu__link,
+							&:last-child > .Vlt-sidemenu__trigger {
+								margin-bottom: 0;
+							}
+						}
+
+					}
+
+					&_active {
+						& + ul {
+							box-shadow: 0 2px 4px 0 rgba(variables.$black, 0.15);
+							margin-left: 0;
+							overflow: visible;
+						}
+					}
+
+					span {
+						&:after {
+							content: none !important; // hide chevron
+						}
+					}
+				}
+
+				&__title {
+					border-top: 0;
+					height: 1px;
+					margin: 0px auto;
+					overflow: hidden;
+					padding: 0;
+					text-indent: -9999px;
+					width: 40px;
+				}
+			}
+
+			.Vlt-sidetabs {
+				padding: 10px 10px 0;
+
+				ul {
+					display: block;
+					margin-bottom: 10px;
+					max-height: 0;
+					overflow: hidden;
+					top: auto !important;
+				}
+
+				&__label {
+					display: block;
+					flex: 1;
+				}
+
+				.Vlt-js-tabs__link {
+					appearance: none;
+					background: none;
+					border: 0;
+					outline: none;
+					text-align: left;
+					width: 100%;
+				}
+
+				.Vlt-sidemenu__trigger {
+					border-radius: 4px;
+					display: block;
+					margin: 0px 0 10px;
+				}
+
+				.Vlt-tooltip--js {
+					display: none;
+				}
+
+				&--bottom {
+					ul {
+						bottom: 0px;
+					}
+				}
+			}
+
+			// Styling info (same independently from color scheme, hence why it's here)
+
+			.Vlt-sidemenu__trigger + ul {
+				background: variables.$white;
+				padding: 5px 0 8px;
+
+				.Vlt-sidemenu__trigger,
+				.Vlt-sidemenu__link {
+					color: variables.$grey-darker;
+
+					svg {
+						&,
+						&[class*='Vlt-'] {
+							fill: variables.$grey-darker !important;
+						}
+					}
+
+					&:hover,
+					&_active {
+						background: variables.$grey-lighter;
+						color: variables.$black;
+
+						svg {
+							&,
+							&[class*='Vlt-'] {
+								fill: variables.$black !important;
+							}
+						}
+					}
+
+					&--disabled {
+						color: variables.$grey;
+
+						svg {
+							&,
+							&[class*='Vlt-'] {
+								fill: variables.$grey !important;
+							}
+						}
+					}
+				}
+
+				.Vlt-sidemenu__title {
+					border-bottom: 1px solid variables.$grey-light;
+					margin: 5px 0;
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,196 @@
+@use "../../lib/mediaqueries";
+@use "../../lib/utils";
+@use "../../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-sidenav {
+	&__mobile--dark {
+		background: variables.$black;
+
+		button {
+			svg {
+				fill: variables.$white;
+			}
+		}
+	}
+
+	&--dark {
+		background: variables.$black;
+
+		hr {
+			border-top: 1px solid rgba(variables.$white, 0.1);
+		}
+
+		.Vlt-sidenav {
+			&__link {
+				&:hover {
+					background: rgba(variables.$white, 0.05);
+				}
+			}
+		}
+
+		.Vlt-sidemenu {
+			&__link,
+			&__trigger {
+				color: variables.$white;
+
+				&:hover {
+					background: rgba(variables.$grey-darker, 0.5);
+				}
+
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$white;
+					color: variables.$black;
+					font-weight: 600;
+
+					svg {
+						fill: variables.$black;
+					}
+				}
+
+				svg {
+					fill: variables.$white;
+				}
+
+				&--disabled {
+					color: variables.$grey-darker;
+
+					svg {
+						fill: variables.$grey-darker;
+					}
+				}
+			}
+
+			&__trigger {
+				+ ul {
+					border-left: 1px solid variables.$grey-darker;
+				}
+
+				span:last-of-type:not(.Vlt-badge) {
+					&:after {
+						$fill-color: utils.encode-hex-code(variables.$grey-darker);
+						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;
+					}
+				}
+
+				&:hover {
+					span:last-of-type:not(.Vlt-badge) {
+						&:after {
+							$fill-color: utils.encode-hex-code(variables.$white);
+							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');
+						}
+					}
+				}
+
+				&_current {
+					&:not(.Vlt-sidemenu__trigger_active) {
+						background: variables.$grey-darker;
+					}
+
+					span:last-of-type:not(.Vlt-badge) {
+						&:after {
+							$fill-color: utils.encode-hex-code(variables.$white);
+							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');
+						}
+					}
+				}
+			}
+
+			&__title {
+				color: variables.$grey-dark;
+
+				&--border {
+					border-top: 1px solid variables.$grey-darker;
+				}
+			}
+		}
+
+		.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: variables.$grey !important;
+				}
+
+				&:hover {
+					&:after {
+						background: variables.$grey;
+					}
+
+					svg {
+						fill: variables.$white !important;
+					}
+				}
+
+				&_active,
+				&:active {
+					&:after {
+						background: variables.$white;
+					}
+
+					svg {
+						fill: variables.$black !important;
+					}
+				}
+			}
+		}
+
+		.Vlt-sidenav__block {
+			&:before,
+			&:after {
+				background: rgba(variables.$white, 0.1);
+			}
+
+			&--logo {
+				.Vlt-sidenav__collapse {
+					svg {
+						fill: variables.$grey;
+					}
+				}
+			}
+		}
+
+		&.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.$white !important;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.Vlt-sidenav__scroll {
+			background-image: linear-gradient(to bottom, rgba(variables.$white, 0.15) 0%, transparent 4px), //top
+				linear-gradient(to bottom, transparent calc(100% - 4px), rgba(variables.$white, 0.15) 100%); //bottom
+
+			.Vlt-sidemenu {
+				background: linear-gradient(0deg, variables.$black 10px, transparent 10px), // top
+					linear-gradient(0deg, transparent calc(100% - 10px), variables.$black calc(100% - 10px)) 100% 0; // bottom
+			}
+		}
+	}
+}