qpp-style 9.22.2 → 9.22.3

package/styles/components/_sidebar.scss

@@ -1,8 +0,0 @@
-// Import the sidebar styles
-@import 'sidebar/animations';
-@import 'sidebar/sidebar';
-@import 'sidebar/links';
-@import 'sidebar/details';
-@import 'sidebar/sidebar-animation';
-@import 'sidebar/project-specific/wi';
-@import 'sidebar/sidebar-tooltip';

package/styles/components/sidebar/_animations.scss

@@ -1,38 +0,0 @@
-/*
-Sidebar animations
- */
-@-webkit-keyframes left-bounce {
-	0% {
-		left: 0;
-	}
-
-	25% {
-		left: 4px;
-	}
-
-	50% {
-		left: 6px;
-	}
-
-	100% {
-		left: 0;
-	}
-}
-
-@-webkit-keyframes right-bounce {
-	0% {
-		right: 0;
-	}
-
-	25% {
-		right: 4px;
-	}
-
-	50% {
-		right: 6px;
-	}
-
-	100% {
-		right: 0;
-	}
-}

package/styles/components/sidebar/_cms.scss

@@ -1,61 +0,0 @@
-/*
-CMS specific styles
- */
-
-.sidebar {
-	.cms-header {
-		padding: 25px 25px 0;
-
-		.quality-title {
-			@include typography('Rubik', 14px, 16px, $color-white);
-			font-weight: 500;
-			text-transform: uppercase;
-		}
-
-		.quality-subtitle {
-			@include typography('Rubik', 14px, 16px, $color-white);
-			padding: 10px 0 0;
-		}
-	}
-
-	.cms-content {
-		padding-left: 40px;
-		padding-top: 10px;
-
-		.due-date,
-		.completed,
-		.trial-period {
-			@include typography(
-				'Rubik',
-				14px,
-				20px,
-				transparentize($color-white, 0.2)
-			);
-
-			& span {
-				color: $color-white;
-				font-family: 'Rubik', sans-serif;
-				font-weight: 500;
-			}
-		}
-
-		a.button {
-			@include typography('Rubik', 14px, 20px, $color-teal-light);
-			background: transparent;
-			border: 2px solid $color-teal-light;
-			border-radius: 28px;
-			cursor: pointer;
-			display: inline-block;
-			margin: 10px 0;
-			padding: 15px 30px;
-			text-align: center;
-			text-transform: uppercase;
-			width: 100%;
-
-			&:hover {
-				border-color: $color-white;
-				color: $color-white;
-			}
-		}
-	}
-}

package/styles/components/sidebar/_details.scss

@@ -1,58 +0,0 @@
-/*
-Shared details
- */
-
-.sidebar {
-	/* Practice details styles */
-
-	.practice-container {
-		padding: 0 25px;
-
-		.practice-name {
-			@include typography('Rubik', 20px, 26px, $color-white);
-		}
-
-		.practice-tin,
-		.vg-id {
-			@include typography('Rubik', 14px, 16px, $color-white);
-			padding-top: 10px;
-		}
-	}
-
-	/* Individual details */
-
-	.individual-container {
-		padding: 25px 25px 0;
-
-		.individual-name {
-			@include typography('Rubik', 16px, 22px, $color-white);
-			font-weight: 500;
-			text-transform: uppercase;
-		}
-
-		.individual-npi {
-			@include typography('Rubik', 14px, 16px, $color-white);
-			padding: 10px 0 0;
-		}
-
-		.individual-link {
-			@include typography('Rubik', 14px, 20px, $color-teal-light);
-			padding-bottom: 10px;
-
-			&:hover {
-				color: $color-white;
-			}
-		}
-	}
-
-	.practice-container,
-	.individual-container {
-		width: $side-nav-expanded-width;
-
-		.switch-practice,
-		.switch-clinician {
-			margin: 0;
-			padding-top: 10px;
-		}
-	}
-}

package/styles/components/sidebar/_links.scss

@@ -1,415 +0,0 @@
-/*
-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;
-
-		.left-icon {
-			height: 25px;
-			margin-right: 15px;
-			min-height: 25px;
-			min-width: 25px;
-			width: 25px;
-		}
-
-		&.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;
-			}
-		}
-
-		> .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;
-		}
-
-		.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;
-			}
-
-			.child-link {
-				margin-left: 18px;
-			}
-
-			&.open {
-				height: auto;
-				opacity: 1;
-				padding: 0 30px 10px 30px;
-				transition: opacity 0.25s;
-			}
-
-			&.currentPage {
-				background: $color-slate-dark;
-			}
-		}
-	}
-
-	/* 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/components/sidebar/_sidebar-animation.scss

@@ -1,121 +0,0 @@
-$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;
-}
-
-.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/components/sidebar/_sidebar-tooltip.scss

@@ -1,33 +0,0 @@
-.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;
-}