qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_header.scss

@@ -1,393 +0,0 @@
-body {
-	padding-top: 140px;
-	@include breakpoint(sm) {
-		padding-top: 100px;
-	}
-}
-
-nav.navbar.navbar-default {
-	background-color: $color-white;
-	border: none;
-	@include breakpoint(sm) {
-		box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
-		padding: 0 30px;
-	}
-	.navbar-toggle {
-		background-color: $color-teal;
-		color: $color-white;
-		&.collapsed {
-			background-color: transparent;
-			color: inherit;
-		}
-	}
-	ul {
-		li {
-			&:first-child a:not(.btn-tertiary) .content-wrapper {
-				border-left: none;
-			}
-
-			&.open a.dropdown-toggle,
-			a.dropdown-toggle:focus {
-				background-color: transparent;
-				@include breakpoint(sm) {
-					background-color: $color-white;
-					border-bottom: 4px solid $color-teal;
-				}
-				.dropdown-title {
-					color: $color-white;
-					@include breakpoint(sm) {
-						color: $color-teal;
-					}
-				}
-			}
-
-			&.open {
-				a.dropdown-toggle {
-					.dropdown-title {
-						&::after {
-							transform: translateX(0.5rem) translateY(-0.25rem) rotate(180deg);
-						}
-					}
-				}
-			}
-
-			button {
-				border: none;
-				outline: none;
-				background: none;
-				color: $color-white;
-				font-size: 1rem;
-				font-weight: 300;
-				padding: 0;
-				border-bottom: 1px solid $color-gray-light;
-				width: 100%;
-				text-align: left;
-
-				&:hover,
-				&:focus {
-					text-decoration: underline;
-				}
-
-				@include breakpoint(sm) {
-					border-bottom: none;
-				}
-			}
-
-
-			a:not(.btn-tertiary) {
-				color: $nav-text-color;
-				padding: 20px 0;
-				border-bottom: 1px solid $color-gray-light;
-
-				@include breakpoint(sm) {
-					border-bottom: none;
-					padding: 23px 0;
-				}
-
-				@include breakpoint(md) {
-					padding: 20px 0;
-				}
-
-				&:link,
-				&:visited {
-					text-decoration: none;
-				}
-
-				&:focus,
-				&:hover {
-					text-decoration: none;
-				}
-
-				.dropdown-title,
-				.nav-title {
-					font-size: 1.25rem;
-					margin-bottom: 6px;
-					color: $color-white;
-					@include breakpoint(sm) {
-						color: $color-navy;
-						font-size: 1rem;
-					}
-					@include breakpoint(md) {
-						font-size: 1.25rem;
-					}
-				}
-
-				.dropdown-title::after {
-					content: '\f078';
-					font-family: "FontAwesome";
-					display: inline-block;
-					transition: 0.25s;
-					font-size: 10px;
-					transform: translateX(0.5rem) translateY(-0.25rem);
-				}
-
-				.dropdown-description,
-				.nav-description {
-					font-size: 0.8rem;
-					line-height: 1.1rem;
-					font-weight: 300;
-					color: $color-white;
-					@include breakpoint(sm) {
-						color: $color-teal;
-						font-size: 0.7rem;
-					}
-					@include breakpoint(md) {
-						font-size: 0.8rem;
-					}
-				}
-
-				.content-wrapper {
-					padding: 0 20px;
-					@include breakpoint(sm) {
-						border-left: 1px solid $color-gray-very-light;
-						padding: 0 10px;
-					}
-					@include breakpoint(md) {
-						padding: 0 20px;
-					}
-				}
-			}
-
-			.dropdown-menu {
-				background-color: $color-teal-dark;
-				border: none;
-				padding: 24px 24px 10px;
-				box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
-				border-radius: 0;
-
-				@include breakpoint(sm) {
-					background-color: $color-teal-dark;
-
-					&.single-column {
-						width: 250px;
-					}
-
-					&.double-column {
-						width: 500px;
-					}
-				}
-
-				.dropdown-header {
-					font-size: 1rem;
-					text-transform: uppercase;
-					color: $color-white;
-					font-weight: 500;
-					border-bottom: 1px solid $color-white;
-					margin-bottom: 22px;
-					padding: 0;
-				}
-
-				ul {
-					padding: 0;
-				}
-
-				li {
-					display: block;
-					width: 100%;
-					margin-bottom: 16px;
-
-					a {
-						padding: 0;
-						display: block;
-						font-size: 1rem;
-						font-weight: 300;
-						line-height: 140%;
-
-						&:hover {
-							color: $color-gray-light;
-							text-decoration: underline;
-						}
-					}
-				}
-
-				.btn-tertiary {
-					display: block;
-					font-size: 1rem;
-					margin-top: 1rem;
-					text-align: center;
-					margin-bottom: 10px;
-
-					&:hover,
-					&:focus {
-						background-color: transparent;
-						border-bottom: 3px solid inherit;
-						color: $color-white;
-					}
-				}
-			}
-		}
-	}
-}
-
-.navbar-fixed-top .navbar-collapse {
-	max-height: none;
-}
-
-.navbar-collapse {
-	-webkit-overflow-scrolling: auto;
-}
-
-.lg-menu-break {
-	@include breakpoint(sm) {
-		display: block;
-	}
-}
-
-header {
-	background: $color-white;
-
-	a {
-		color: $nav-text-color;
-		&:link,
-		&:visited {
-			text-decoration: none;
-		}
-
-		&:focus,
-		&:hover {
-			text-decoration: underline;
-		}
-
-		&.header-brand {
-			text-decoration: none;
-		}
-	}
-}
-
-#nav-mobile {
-	background-color: darken($color-teal, 5%);
-	@include breakpoint(sm) {
-		background-color: transparent;
-	}
-	.navbar-nav {
-		@include breakpoint(xs) {
-			margin-bottom: 0;
-			margin-top: 0;
-		}
-	}
-}
-
-.header-mobile-brand {
-	box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
-	display: flex;
-	justify-content: space-around;
-	@include breakpoint(sm) {
-		box-shadow: none;
-	}
-	.header-brand {
-		img {
-			&.qpp-logo {
-				height: 45px;
-				margin: 20px 0;
-				@include breakpoint(sm) {
-					margin: 27px 0;
-					float: left;
-					height: 50px;
-				}
-				@include breakpoint(md) {
-					height: 54px;
-				}
-			}
-		}
-	}
-	.help {
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		@include breakpoint(sm) {
-			visibility: hidden;
-		}
-		.help-icon {
-			background: url('/images/icons/help-headset.svg') no-repeat;
-			width: 30px;
-			height: 30px;
-			margin-top: 6px;
-		}
-		span {
-			font-size: 0.9rem;
-			color: $color-teal;
-		}
-		&:hover,
-		&:focus,
-		&:active {
-			text-decoration: none;
-		}
-	}
-}
-
-.header-container {
-	display: flex;
-	align-items: center;
-	margin: 0 auto;
-	@include breakpoint(md) {
-		height: 90px;
-		padding: 0 15px;
-		max-width: 1170px;
-	}
-	@include breakpoint(lg) {
-		width: 1170px;
-	}
-}
-
-.navbar-header {
-	@include breakpoint(md) {
-		float: left;
-	}
-}
-
-.header-brand {
-	&:active,
-	&:focus,
-	&:hover {
-		text-decoration: none;
-	}
-}
-
-.navbar-toggle {
-	float: none;
-	margin: 0 auto;
-	display: block;
-	width: 100%;
-	border-radius: 0;
-	border-left: none;
-	border-top: none;
-	border-right: none;
-	padding: 14px;
-	border-bottom: 1px solid $color-gray-light;
-	@include breakpoint(sm) {
-		display: none;
-	}
-	.icon {
-		display: inline-block;
-		margin-right: 14px;
-		.icon-bar {
-			background-color: $color-white;
-		}
-	}
-	.icon-bar + .icon-bar {
-		margin-top: 5px;
-	}
-	.toggle-text {
-		display: inline-block;
-		font-size: 1.25rem;
-	}
-	&.collapsed {
-		background-color: transparent;
-		color: inherit;
-		.icon {
-			.icon-bar {
-				background-color: $brand-secondary-dark;
-			}
-		}
-	}
-}
-
-.navbar-right .dropdown:first-of-type .dropdown-menu {
-	@include breakpoint(sm) {
-		right: -100%;
-	}
-	@include breakpoint(md) {
-		right: 0;
-	}
-}
-

package/styles/components/_sidebar.scss

@@ -1,6 +0,0 @@
-// Import the sidebar styles
-@import 'sidebar/animations';
-@import 'sidebar/sidebar';
-@import 'sidebar/links';
-@import 'sidebar/details';
-@import 'sidebar/cms';

package/styles/components/_tool-tips.scss

@@ -1,6 +0,0 @@
-.tooltip-text {
-	border-bottom: 2px dotted $table-border-color;
-	display: inline-block;
-	position: relative;
-	bottom: 0;
-}

package/styles/components/sidebar/_animations.scss

@@ -1,16 +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/_links.scss

@@ -1,284 +0,0 @@
-/*
-Inline and back links
- */
-.sidebar {
-	.link-inline,
-	.link-back {
-		@include typography('Rubik', 16px, 22px, $color-teal-light);
-		@include hover($color-white);
-		align-items: center;
-		display: flex;
-		fill: $color-teal-light;
-		&.freeze {
-			color: $color-white;
-			fill: $color-white;
-		}
-	}
-	.link-inline {
-		padding: 10px 30px;
-		.left-icon {
-			height: 25px;
-			margin-right: 15px;
-			width: 25px;
-		}
-		&.one-line{
-			padding: 10px 15px 10px 30px;
-		}
-		&[disabled] {
-			color: $color-gray-dark;
-			.left-icon,
-			.right-icon {
-				fill: $color-gray-dark;
-			}
-		}
-	}
-	.link-back {
-		padding: 25px 30px 0;
-		.left-icon {
-			height: 12px;
-			margin-right: 15px;
-			width: 12px;
-		}
-		&:hover {
-			& > svg {
-				animation: left-bounce .6s;
-			}
-		}
-	}
-}
-
-/*
-Collapsed links (when the sidebar is collapsed)
- */
-.sidebar-content {
-	.link-collapsed {
-		align-items: center;
-		display: flex;
-		fill: $color-teal-light;
-		justify-content: center;
-		padding: 15px 0;
-		.left-icon {
-			height: 25px;
-			width: 25px;
-		}
-		&.freeze {
-			color: $color-white;
-			fill: $color-white;
-		}
-		&[disabled] {
-			.left-icon{
-				fill: $color-gray-dark;
-			}
-		}
-	}
-}
-
-/*
-Slide-out links
- */
-.sidebar-content {
-	.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 .6s;
-				&.rotated {
-					transform: rotate(180deg);
-				}
-			}
-			&:hover {
-				& > .right-icon {
-					animation: right-bounce .6s;
-				}
-			}
-		}
-		.switcher-content {
-			@include typography('Rubik', 16px, 22px, $color-teal-light);
-			background: $color-slate-dark;
-			height: 100%;
-			opacity: 0;
-			padding: 0 30px;
-			position: absolute;
-			top: 0;
-			left: 0;
-			transition: z-index .6s step-start, opacity .6s step-end, left .6s;
-			width: 300px;
-			z-index: -1;
-			li {
-				padding-bottom: 15px;
-				a {
-					@include typography('Rubik', 16px, 22px, $color-teal-light);
-				}
-			}
-			.practices-title {
-				@include typography('Rubik', 18px, 26px, $color-white);
-				font-weight: 500;
-				padding: 23px 0;
-			}
-			&.open {
-				left: 300px;
-				opacity: 1;
-				transition: z-index .6s step-end, left .6s;
-				z-index: 1;
-			}
-		}
-	}
-}
-
-/*
-Drawer links
- */
-.sidebar-content {
-	.link-drawer {
-		display: flex;
-		flex-direction: column;
-		button {
-			background: transparent;
-			border: none;
-			border-radius: 0px;
-
-			&.expanded {
-				background-color: $color-slate-dark;
-				border-left: solid 3px $color-teal-light;
-				fill: $color-white;
-				color: $color-white;
-				padding-left:27px;
-			}
-		}
-		.link-body {
-			align-items: center;
-			display: flex;
-			flex-grow: 1;
-		}
-		.right-icon {
-			height: 12px;
-			transition: transform .6s;
-			width: 12px;
-		}
-		.rotated {
-			transform: rotate(180deg);
-		}
-		.drawer {
-			height: 0;
-			opacity: 0;
-			overflow: hidden;
-			padding: 0;
-			transition: opacity .25s;
-			li {
-				padding: 2px 0;
-				margin-left: 58px;
-			}
-			a {
-				@include typography('Rubik', 14px, 22px, $color-teal-light);
-				
-				&:hover {
-					color: $color-white;
-				}
-			}
-			.active-link {
-				color: $color-teal-light;
-				list-style: disc;
-				& a {
-					color: $color-white;
-				}
-			}
-			&.open {
-				height: auto;
-				opacity: 1;
-				padding: 0 30px;
-				transition: opacity .25s;
-			}
-			&.currentPage {
-				background: $color-slate-dark;
-			}
-		}
-	}
-}
-
-/*
-Collapse/Expand link (button on bottom of the sidebar)
- */
-.sidebar {
-	.link-collapse,
-	.link-expand {
-		align-items: center;
-		background: transparent;
-		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;
-		}
-	}
-}
-
-/*
-Active link
- */
-.sidebar {
-	.active {
-		background: $color-slate-dark;
-		border-left: solid 3px $color-teal-light;
-		color: $color-white;
-		fill: $color-white;
-		padding-left: 27px;
-		&.link-collapsed {
-			padding-left: 0;
-		}
-		&.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;
-			&.link-collapsed {
-				padding-left: 0;
-			}
-		}
-	}
-}