@madie/madie-design-system 1.0.0

package/styles/qppds/components/sidebar/_links.scss

@@ -0,0 +1,444 @@
+/*
+Inline and back links
+ */
+
+.sidebar {
+	.disabled {
+		color: $color-gray-medium !important;
+		fill: $color-gray-medium !important;
+		pointer-events: none;
+	}
+
+	.link-inline,
+	.link-collapsed {
+		border-left: 3px solid transparent;
+
+		&.stroke-based-icon {
+			stroke: $color-teal-light;
+		}
+
+		&.stroke-based-icon.active {
+			stroke: $color-white;
+		}
+	}
+
+	.link-inline,
+	.link-back,
+	.account-home-link {
+		@include typography('Rubik', 16px, 22px, $color-teal-light);
+		@include hover($color-white);
+		align-items: center;
+		display: flex;
+		fill: $color-teal-light;
+	}
+
+	.account-home-link {
+		padding: 25px $side-nav-horizontal-padding 0;
+		width: $side-nav-expanded-width;
+
+		.left-icon {
+			height: 25px;
+			margin-right: 15px;
+			width: 25px;
+		}
+	}
+
+	.link-back {
+		padding: 25px $side-nav-horizontal-padding 0;
+
+		.left-icon {
+			height: 12px;
+			margin-right: 15px;
+			width: 12px;
+		}
+
+		&:hover {
+			& > svg {
+				animation: left-bounce 0.6s;
+			}
+		}
+	}
+
+	.link-inline {
+		padding: 10px $side-nav-horizontal-padding;
+		width: $side-nav-expanded-width;
+
+		&.highlight {
+			color: $color-white;
+			border-left: solid 3px $color-teal-light;
+		}
+
+		.left-icon {
+			height: 25px;
+			margin-right: 15px;
+			min-height: 25px;
+			min-width: 25px;
+			width: 25px;
+
+			&.fill-white {
+				fill: $color-white;
+			}
+		}
+
+		&.stroke-based-icon {
+			@include stroke-hover($color-white);
+		}
+	}
+
+	.link-collapse,
+	.link-expand {
+		align-items: center;
+		background: $color-slate;
+		border: none;
+		border-top: 1px solid $color-gray-medium;
+		display: flex;
+		fill: $color-gray-medium;
+		justify-content: center;
+		text-transform: uppercase;
+
+		.left-icon {
+			height: 40px;
+			width: 40px;
+		}
+	}
+
+	.link-collapse {
+		@include typography('Rubik', 14px, 0, $color-gray-medium);
+		padding: 20px 0;
+
+		.left-icon {
+			margin-right: 15px;
+		}
+
+		&.alt-style {
+			background: $color-slate-dark;
+		}
+	}
+
+	.link-expand {
+		@include typography('Rubik', 14px, 14px, $color-gray-medium);
+		flex-direction: column;
+		padding: 6px 0 20px;
+
+		.left-icon {
+			margin-right: 0;
+		}
+
+		&.alt-style {
+			background: $color-slate-dark;
+		}
+	}
+
+	.link-icon {
+		cursor: pointer;
+	}
+
+	/* Active link */
+
+	.active {
+		background: $color-slate-dark;
+		border-color: $color-teal-light;
+		color: $color-white;
+		fill: $color-white;
+
+		&.link-collapsed {
+			fill: $color-white;
+		}
+
+		&.light {
+			background: $color-slate;
+			border-left: solid 3px $color-teal-light;
+			color: $color-white;
+			fill: $color-white;
+		}
+
+		&[disabled] {
+			background: none;
+			border-left: 0;
+			color: $color-gray-dark;
+			fill: $color-gray-dark;
+			padding-left: 30px;
+		}
+	}
+}
+
+.sidebar-content {
+	/* Override colors for static drawer */
+
+	.static-drawer {
+		> .currentPage {
+			background-color: $color-slate !important;
+		}
+
+		.left-icon {
+			fill: $color-white !important;
+		}
+	}
+
+	/* Collapsed links (when the sidebar is collapsed) */
+
+	.link-collapsed {
+		@include typography('Rubik', 16px, 22px, $color-teal-light);
+		align-items: center;
+		display: flex;
+		fill: $color-teal-light;
+		padding: 10px $side-nav-horizontal-padding;
+		width: $side-nav-expanded-width; // this only works because .sidebar has overflow hidden
+
+		.left-icon {
+			height: 25px;
+			margin-right: 15px;
+			min-height: 25px;
+			min-width: 25px;
+			width: 25px;
+		}
+
+		&[disabled] {
+			@include typography('Rubik', 16px, 22px, $color-gray-dark);
+
+			.left-icon {
+				fill: $color-white;
+			}
+		}
+	}
+
+	.link-drawer .drawer a {
+		@include typography('Rubik', 14px, 22px, $color-teal-light);
+	}
+
+	.link-slide-out .switcher-content li a {
+		@include typography('Rubik', 16px, 22px, $color-teal-light);
+	}
+
+	.link-drawer .drawer .active-link > a,
+	.link-drawer .drawer a:hover {
+		color: $color-white;
+	}
+
+	/* Drawer links */
+
+	.link-drawer {
+		display: flex;
+		flex-direction: column;
+		width: $side-nav-expanded-width;
+
+		button {
+			background: transparent;
+			border: none;
+			border-left: 3px solid transparent;
+			border-radius: 0;
+			text-align: left;
+
+			&.expanded {
+				background-color: $color-slate-dark;
+				border-left: solid 3px $color-teal-light;
+				color: $color-white;
+				fill: $color-white;
+			}
+
+			&.left-border-disabled {
+				border-left: 0;
+			}
+		}
+
+		> .currentPage {
+			background-color: $color-slate-dark;
+			color: $color-white;
+			fill: $color-white;
+		}
+
+		.link-inline.currentPage,
+		.link-collapsed.currentPage {
+			border-color: $color-teal-light;
+		}
+
+		.link-body {
+			align-items: center;
+			display: flex;
+			flex-grow: 1;
+		}
+
+		.hidden-nav-link-item {
+			display: none;
+		}
+
+		.right-icon {
+			height: 12px;
+			transition: transform 0.6s;
+			width: 12px;
+		}
+
+		.rotated {
+			transform: rotate(180deg);
+		}
+
+		.drawer {
+			height: 0;
+			opacity: 0;
+			overflow: hidden;
+			padding: 0;
+			transition: opacity 0.25s;
+
+			li {
+				margin-left: 30px;
+				padding: 2px 0;
+			}
+
+			.active-link {
+				color: $color-white;
+				list-style: disc;
+				margin-left: 18px;
+			}
+
+			.parent-link {
+				line-height: 1.3;
+				margin-left: 35px;
+
+				&.larger-item-spacing:not(:last-child) {
+					padding-bottom: 12px;
+				}
+			}
+
+			.child-link {
+				margin-left: 18px;
+			}
+
+			&.open {
+				height: auto;
+				opacity: 1;
+				padding: 0 30px 10px 30px;
+				transition: opacity 0.25s;
+			}
+
+			&.currentPage {
+				background: $color-slate-dark;
+			}
+
+			&.background-highlight {
+				background-color: $color-slate-dark;
+			}
+
+			&.larger-drawer-bottom-padding {
+				padding: 0 30px 24px 30px;
+			}
+		}
+	}
+
+	/* Slide-out links */
+
+	.link-slide-out {
+		.switcher {
+			@include typography('Rubik', 14px, 16px, $color-gray-medium);
+			align-items: center;
+			display: flex;
+			fill: $color-gray-medium;
+			flex-direction: row;
+
+			svg {
+				height: 12px;
+				width: 12px;
+			}
+
+			.link-body {
+				flex-grow: 1;
+			}
+
+			.left-icon {
+				margin-right: 10px;
+			}
+
+			.right-icon {
+				transition: transform 0.6s;
+
+				&.rotated {
+					transform: rotate(180deg);
+				}
+			}
+		}
+
+		.switcher-content {
+			@include typography('Rubik', 16px, 22px, $color-teal-light);
+			background: $color-slate-dark;
+			height: 100%;
+			left: 0;
+			opacity: 0;
+			padding: 0 25px;
+			position: absolute;
+			top: 0;
+			transition: z-index 0.6s step-start, opacity 0.6s step-end, left 0.6s;
+			width: $side-nav-expanded-width;
+			z-index: -1;
+
+			li {
+				padding-bottom: 15px;
+			}
+
+			.practices-title {
+				@include typography('Rubik', 18px, 26px, $color-white);
+				font-weight: 500;
+				padding: 23px 0;
+			}
+
+			&.open {
+				left: $side-nav-expanded-width;
+				opacity: 1;
+				transition: z-index 0.6s step-end, left 0.6s;
+				z-index: 1;
+			}
+		}
+	}
+
+	/* Switch Clinician/Practice  */
+
+	.switch-container {
+		margin: 20px 0 0 25px;
+		width: calc(
+			#{$side-nav-expanded-width} - (#{$side-nav-horizontal-padding} * 2)
+		);
+
+		.switch-link,
+		.button-partition {
+			align-items: center;
+			color: $color-teal-light;
+			display: flex;
+			justify-content: space-between;
+
+			.icon {
+				fill: $color-teal-light;
+				margin-right: 10px;
+				width: 15px;
+			}
+
+			.right-icon {
+				margin-right: 0;
+			}
+		}
+
+		.switch-link:hover {
+			span {
+				color: $color-white;
+			}
+
+			.icon {
+				fill: $color-white;
+			}
+		}
+	}
+}
+
+.sidebar .link-inline[disabled] {
+	color: $color-gray-dark;
+
+	.left-icon,
+	.right-icon {
+		fill: $color-gray-dark;
+	}
+
+	.left-icon.always-open {
+		fill: $color-white;
+	}
+}
+
+.sidebar-content .link-slide-out .switcher:hover > .right-icon {
+	animation: right-bounce 0.6s;
+}

package/styles/qppds/components/sidebar/_sidebar-animation.scss

@@ -0,0 +1,125 @@
+$drawerMaxHeight: 225px;
+$simpleMaxHeight: 105px;
+$chartMaxHeight: 306px;
+$detailsMaxHeight: 130px;
+
+@mixin delayKeyframes($name, $maxHeight) {
+	@keyframes delayRemove#{$name} {
+		0% {
+			max-height: $maxHeight;
+		}
+	
+		100% {
+			max-height: 0;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	}
+
+	@keyframes delayAdd#{$name} {
+		0% {
+			max-height: 0;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	
+		100% {
+			max-height: $maxHeight;
+		}
+	}
+}
+@include delayKeyframes('Drawer', $drawerMaxHeight);
+@include delayKeyframes('Simple', $simpleMaxHeight);
+@include delayKeyframes('Chart', $chartMaxHeight);
+@include delayKeyframes('Details', $detailsMaxHeight);
+
+.animation-group {
+	transition: opacity 0.5s ease-in-out;
+	opacity: 0;
+	overflow: hidden;
+
+	&.background-highlight {
+		background-color: $color-slate-dark;
+	}
+}
+
+.animation-group-enter {
+	opacity: 1;
+	transition-delay: 0.5s;
+
+	animation-delay: 0s;
+	animation-duration: 0.6s;
+	animation-fill-mode: forwards;
+	animation-name: delayAddSimple;
+	animation-timing-function: ease-in-out;
+}
+
+.animation-group-exit {
+	opacity: 0;
+
+	animation-delay: 0.3s;
+	animation-duration: 0.6s;
+	animation-fill-mode: forwards;
+	animation-name: delayRemoveSimple;
+	animation-timing-function: ease-in-out;
+}
+
+// custom max heights
+.animation-group-details.animation-group-enter {
+	animation-name: delayAddDetails;
+}
+
+.animation-group-details.animation-group-exit {	
+	animation-name: delayRemoveDetails;
+}
+
+.animation-group-chart.animation-group-enter {
+	animation-name: delayAddChart;
+}
+
+.animation-group-chart.animation-group-exit {	
+	animation-name: delayRemoveChart;
+}
+
+.link-drawer {
+	.animation-group-enter {
+		animation-name: delayAddDrawer;
+	}
+
+	.animation-group-exit {	
+		animation-name: delayRemoveDrawer;
+	}
+}
+
+.sidebar {
+	.animation-flat {
+		width: 100%;
+	}
+
+	&.closed {
+		transition-delay: 0.5s;
+
+		.animation-flat > nav > ul > li {
+			> a,
+			> .link-drawer > button {
+				transition: padding 0.7s ease-out 0.3s;
+				padding-left: 30px;
+			}
+		}
+	}
+
+	&:not(.closed) {
+		transition-delay: 0s;
+
+		.animation-flat {
+			transition-delay: 0s;
+
+			nav > ul > li {
+				> a,
+				> .link-drawer > button {
+					transition: padding 0.7s ease-out 0s;
+				}
+			}
+		}
+	}
+}

package/styles/qppds/components/sidebar/_sidebar-tooltip.scss

@@ -0,0 +1,33 @@
+.sidebar-tooltip {
+	display: none;
+	position: fixed;
+	left: 71px;
+	top: 0px;
+}
+
+.sidebar-tooltip-text {
+	position: relative;
+	display: block;
+	padding: 7px 10px;
+	background: $color-teal-light;
+	border-radius: 3px;
+	color: $color-slate-dark;
+	font-size: 13px;
+	font-weight: normal;
+	letter-spacing: 0px;
+}
+
+.sidebar-tooltip-text:after {
+	content: ' ';
+	height: 0;
+	width: 0;
+	position: absolute;
+	right: 100%;
+	top: 50%;
+	border: solid transparent;
+	border-color: transparent;
+	border-right-color: $color-teal-light;
+	border-width: 6px;
+	margin-top: -6px;
+	pointer-events: none;
+}