@vgip/meta-ui 1.9.9 → 2.1.0

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

@@ -0,0 +1,174 @@
+@use "../../lib/mediaqueries";
+@use "../../lib/utils";
+@use "../../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+.Vlt-sidenav {
+	&__mobile--light {
+		background: variables.$white;
+		box-shadow: 1px 0 8px rgba(variables.$black, 0.2);
+
+		button {
+			svg {
+				fill: variables.$grey-dark;
+			}
+		}
+
+		.Vlt-template--header & {
+			background: variables.$white;
+			border-bottom: 1px solid variables.$grey-light;
+			box-shadow: none;
+		}
+	}
+
+	&--light {
+		background: variables.$white;
+
+		hr {
+			border-top: 1px solid variables.$grey-light;
+		}
+
+		.Vlt-sidenav {
+			&__link {
+				&:hover {
+					background: variables.$grey-light;
+				}
+			}
+		}
+
+		.Vlt-sidemenu {
+			&__link,
+			&__trigger {
+				color: variables.$black;
+
+				&:hover {
+					background: variables.$grey-light;
+				}
+
+				&_active:not(.Vlt-sidemenu__trigger_active) {
+					background: variables.$black;
+					color: variables.$white;
+					font-weight: 600;
+
+					svg {
+						fill: variables.$white;
+					}
+				}
+
+				svg {
+					fill: variables.$black;
+				}
+
+				&--disabled {
+					color: variables.$grey;
+
+					svg {
+						fill: variables.$grey;
+					}
+				}
+			}
+
+			&__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;
+					}
+				}
+
+				&_current {
+					&:not(.Vlt-sidemenu__trigger_active) {
+						background: variables.$grey-light;
+					}
+				}
+			}
+
+			&__title {
+				color: variables.$grey-darker;
+
+				&--border {
+					border-top: 1px solid 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__scroll {
+			.Vlt-sidemenu {
+				background: linear-gradient(0deg, variables.$white 10px, transparent 10px), // top
+					linear-gradient(0deg, transparent calc(100% - 10px), variables.$white calc(100% - 10px)) 100% 0; // bottom
+			}
+		}
+	}
+}