qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_info-modal.scss

@@ -1,10 +1,10 @@
 .info-modal-overlay {
-	position: fixed;
-	top: 0;
-	right: 0;
+	background-color: rgba(0, 0, 0, 0.8);
 	bottom: 0;
 	left: 0;
-	background-color: rgba(0, 0, 0, 0.8);
+	position: fixed;
+	right: 0;
+	top: 0;
 	z-index: 2000;
 }
 
@@ -12,55 +12,77 @@
 	background: $color-white;
 	border: 0 none;
 	border-radius: 2px;
+	bottom: auto;
+	left: 50%;
 	max-width: 800px;
 	min-width: 450px;
-	padding: 2rem 3rem 1rem;
-	overflow: auto;
 	outline: none;
+	overflow: auto;
+	padding: 2rem 3rem 1rem;
 	position: absolute;
-	top: 10%;
 	right: auto;
-	bottom: auto;
-	left: 50%;
+	top: 10%;
+
 	transform: translateX(-50%);
 
+	@include breakpoint(xs) {
+		height: 100%;
+		overflow: scroll;
+		top: 0;
+	}
+
 	p {
 		&.body-text {
 			margin-bottom: 10px;
 		}
+
+		&.disclaimer {
+			color: $color-gray-darker-medium;
+			font-size: 0.875rem;
+		}
 	}
 
 	h1 {
+		color: $brand-primary-dark;
 		font-size: 2rem;
 		font-weight: 400;
-		color: $brand-primary-dark;
-		position: relative;
 		margin-bottom: 30px;
+		position: relative;
 
 		.icon {
-			width: 2rem;
-			height: 1.9375rem;
 			fill: $color-gray-medium;
+			height: 1.9375rem;
+			left: -2.75rem;
 			position: absolute;
 			top: 0.125rem;
-			left: -2.75rem;
+			width: 2rem;
 		}
 	}
 
 	.closeModal {
-		position: absolute;
-		top: 15px;
-		right: 15px;
-        padding: 0px;
-        margin: 0px;
 		background-color: transparent;
-        border: 0;
-        line-height:0;
+		border: 0;
+		line-height: 0;
+		margin: 0;
+		padding: 0;
+		position: absolute;
+		right: 16px;
+		top: 16px;
+
+		@include breakpoint(xs) {
+			padding: 16px;
+			right: 10%;
+		}
 
 		.close-icon {
-			width: 15px;
-			height: 15px;
 			fill: $color-gray-medium;
+			height: 16px;
+			width: 16px;
+
+			@include breakpoint(xs) {
+				height: 11px;
+				width: 11px;
+			}
 		}
 	}
 
@@ -82,10 +104,10 @@
 	}
 
 	.actions {
-		margin-top:30px;
+		align-items: center;
 		display: flex;
 		flex-direction: column;
-		align-items: center;
+		margin-top: 30px;
 	}
 
 	.btn {
@@ -105,10 +127,13 @@
 
 		&.secondary-action {
 			color: $color-gray-dark;
-			text-transform: none;
+			font-weight: 100;
 			text-decoration: underline;
-			font-weight:100;
+			text-transform: none;
 		}
 	}
+}
 
+.info-modal-content-primary-only {
+	padding-bottom: 3rem;
 }

package/styles/components/_links.scss

@@ -1,11 +1,12 @@
 // External Links
 
-a[href^='http']:not(.button):not([download]) {
+a[target^='_blank']:not(.button):not([download]):not(.social-link):not(.adobe-link) {
 	&::after {
 		content: '\f08e';
-		font-family: 'FontAwesome';
-		font-size: 0.7em;
 		display: inline-block;
+		font-family: 'FontAwesome';
+		font-size: 1em;
 		margin-left: 0.25em;
+		vertical-align: middle;
 	}
 }

package/styles/components/_modals.scss

@@ -1,17 +1,18 @@
 .modal-subscribe-footer {
-	padding-top: 10px;
-	text-align: center;
+  padding-top: 10px;
+  text-align: center;
 }
 
 .modal-footer {
-	text-align: center;
-	a {
-		margin-right: 20px;
-	}
+  text-align: center;
+
+  a {
+    margin-right: 20px;
+  }
 }
 
 #privacy-modal {
-	.text-wrap-normal {
-		white-space: normal;
-	}
+  .text-wrap-normal {
+    white-space: normal;
+  }
 }

package/styles/components/_notification-banner.scss

@@ -0,0 +1,166 @@
+@mixin label-style($customColor) {
+  .expanded-view .notification-banner-label {
+    background-color: $customColor;
+  }
+
+  .collapsed-view .notification-banner-label .bell-icon svg {
+    fill: $customColor;
+  }
+}
+
+.notification-banner-red {
+  @include label-style($color-red);
+}
+
+.notification-banner-blue {
+  @include label-style($color-navy);
+}
+
+.notification-banner {
+  background: $notification-banner-background;
+  border-bottom: 1px solid $color-gray-light;
+  border-bottom-color: $color-gray-very-light;
+  color: $color-gray-darker;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.875rem;
+
+  &-label {
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+  }
+
+  &.expanded {
+    .expanded-view.notification-banner-wrapper {
+      opacity: 100;
+      position: relative;
+    }
+
+    .collapsed-view.notification-banner-wrapper {
+      opacity: 0;
+      position: absolute;
+    }
+  }
+
+  &.collapsed {
+    flex-direction: column-reverse;
+
+    .expanded-view.notification-banner-wrapper {
+      opacity: 0;
+      position: absolute;
+    }
+
+    .collapsed-view.notification-banner-wrapper {
+      opacity: 100;
+      position: relative;
+    }
+  }
+
+  .notification-banner-wrapper {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+
+    .notification-banner-label {
+      align-items: center;
+      display: flex;
+      line-height: 1;
+      text-transform: uppercase;
+      flex: 0 0 auto;
+    }
+
+    &.expanded-view {
+      justify-content: flex-start;
+
+      .notification-banner-label {
+        color: $color-white;
+        font-size: 1rem;
+        padding: 0 30px;
+      }
+
+      .notification-banner-content {
+        padding: 20px 80px 20px 20px;
+
+        b {
+          color: $color-navy;
+        }
+
+        p {
+          display: inline;
+          margin: 0;
+          font-size: 0.875rem;
+        }
+
+        a {
+          color: $color-navy-medium;
+        }
+      }
+
+      .notification-banner-close {
+        align-self: flex-start;
+        background: transparent;
+        border: 0 none;
+        margin-left: auto;
+        padding: 15px 15px;
+
+        .close-icon {
+          fill: $color-navy-medium;
+          height: 1rem;
+          width: 1rem;
+        }
+      }
+    }
+
+    &.collapsed-view {
+      cursor: pointer;
+      justify-content: flex-end;
+      padding: 10px 30px;
+
+      .notification-banner-label {
+        color: $notification-banner-label-color;
+        font-size: 0.75rem;
+
+        .bell-icon {
+          padding-left: 15px;
+
+          svg {
+            height: 18px;
+            width: 18px;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include breakpoint(xs) {
+  .notification-banner {
+    .notification-banner-wrapper {
+      flex-direction: column;
+
+      &.collapsed-view {
+        align-items: center;
+      }
+
+      &.expanded-view {
+        .notification-banner-label {
+          align-self: flex-start;
+          font-size: 0.875rem;
+          margin: 20px 0 0 20px;
+          padding: 10px;
+        }
+
+        .notification-banner-content {
+          padding: 20px 50px 20px 20px;
+        }
+
+        .notification-banner-close {
+          padding: 20px;
+          position: absolute;
+          right: 0;
+        }
+      }
+    }
+  }
+}

package/styles/components/_panels.scss

@@ -2,38 +2,36 @@
 	margin-bottom: 20px;
 }
 
-.panel-default {
-	& > .panel-heading {
-		background-color: transparent;
-
-		h3 {
-			margin: 0.5em 0;
-		}
-
-		a {
-			line-height: 1.4;
-		}
-	}
-}
-
-.panel-default > .panel-heading + .panel-collapse > .panel-body {
-	border-top-color: #fff;
-}
-
 .panel-title {
-	display: flex;
 	align-content: center;
 	align-items: center;
+	display: flex;
+
 	a {
 		color: $color-blue-light;
+
 		&:first-child {
 			width: 85%;
 		}
 	}
 
 	svg {
-		width: 15px;
 		height: 15px;
+		width: 15px;
+	}
+}
+
+.panel-default {
+	& > .panel-heading {
+		background-color: transparent;
+
+		h3 {
+			margin: 0.5em 0;
+		}
+
+		a {
+			line-height: 1.4;
+		}
 	}
 }
 
@@ -41,6 +39,10 @@
 	font-size: 1rem;
 }
 
+.panel-default > .panel-heading + .panel-collapse > .panel-body {
+	border-top-color: #fff;
+}
+
 .panel-info {
 	& > .panel-heading {
 		background-color: $color-teal-light;
@@ -51,9 +53,9 @@
 
 		p.panel-title {
 			color: #000;
-			text-align: center;
 			font-size: 14px;
 			font-weight: 700;
+			text-align: center;
 		}
 	}
 }

package/styles/components/_pie-chart.scss

@@ -1,8 +1,8 @@
 .pie-chart {
-	text-align: center;
-	padding-bottom: 2em;
-	max-width: 300px;
 	margin: 0 auto;
+	max-width: 300px;
+	padding-bottom: 2em;
+	text-align: center;
 	@include breakpoint(md) {
 		max-width: none;
 	}

package/styles/components/_score-chart.scss

@@ -4,131 +4,161 @@
 	flex-direction: column;
 	justify-content: center;
 	margin-bottom: 20px;
-    text-align: center;
-    button {
-      background: none;
-      border: none;
-      padding: 0;
-    }
-    .score-chart {
-      .arc {
-          fill: none;
-          stroke-width: 1.5;
-          &.empty {
-            fill: transparent;
-		    stroke: $color-slate-light;
-          }
-          &.filled {
-            &.quality {
-              fill: $color-quality;
-			  stroke: $color-quality;
-            }
-            &.aci {
-              fill: $color-aci;
-			  stroke: $color-aci;
-            }
-            &.ia {
-              fill: $color-ia;
-			  stroke: $color-ia;
-            }
-          }
-          &.filled, &.empty {
-            cursor: pointer;
-          }
-      }
-      text {
-          fill: $color-white;
-          &.label {
-            font-weight: normal;
-          }
-          &.chart-title {
-              font-size: 40px;
-              font-weight: 300;
-          }
-          &.chart-subtitle {
-              font-size: 12px;
-              fill: $color-gray-medium;
-              letter-spacing: 0.1em;
-              font-weight: bold;
-          }
-      }
-    }
-
-    .chart-tooltip {
+	text-align: center;
+
+	button {
+		background: none;
+		border: none;
+		padding: 0;
+	}
+
+	.score-chart {
+		.arc {
+			fill: none;
+			stroke-width: 1.5;
+
+			&.empty {
+				fill: transparent;
+				stroke: $color-slate-light;
+			}
+
+			&.filled {
+				&.quality {
+					fill: $color-quality;
+					stroke: $color-quality;
+				}
+
+				&.aci,
+				&.pi {
+					fill: $color-aci;
+					stroke: $color-aci;
+				}
+
+				&.ia {
+					fill: $color-ia;
+					stroke: $color-ia;
+				}
+			}
+
+			&.filled,
+			&.empty {
+				cursor: pointer;
+			}
+		}
+
+		text {
+			fill: $color-white;
+
+			&.label {
+				font-weight: normal;
+			}
+
+			&.chart-title {
+				font-size: 40px;
+				font-weight: 300;
+			}
+
+			&.chart-subtitle {
+				fill: $color-gray-medium;
+				font-size: 12px;
+				font-weight: bold;
+				letter-spacing: 0.1em;
+			}
+		}
+	}
+
+	.chart-tooltip {
 		@include typography('Rubik', 14px, 20px, $color-text-main);
-        position: absolute;
-        width: 250px;
-        height: 40px;
-        padding: 10px;
-        background-color: rgba(255, 255, 255, 0.85);
-        border-radius: 10px;
-        box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
-        pointer-events: none;
-        color: black;
-        &.off {
-            opacity: 0;
-        }
-    }
-
-    .chart-legend-toggler {
-      cursor: pointer;
+		background-color: rgba(255, 255, 255, 0.85);
+		border-radius: 10px;
+		box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
+		color: black;
+		height: 40px;
+		padding: 10px;
+		pointer-events: none;
+		position: absolute;
+		width: 250px;
+
+		&.off {
+			opacity: 0;
+		}
+	}
+
+	.chart-legend-toggler {
+		cursor: pointer;
 		display: flex;
 		flex-direction: row;
+
 		& button {
 			@include typography('Rubik', 14px, 20px, $color-teal-light);
 			cursor: pointer;
 			fill: $color-teal-light;
 			margin: 20px 0;
 			padding: 5px;
+
 			&.open {
 				color: $color-white;
 				fill: $color-white;
 			}
+
 			& .right-icon {
 				height: 11px;
 				margin-left: 5px;
-				transition: transform .6s;
+				transition: transform 0.6s;
 				width: 11px;
 			}
+
 			& .rotated {
 				transform: rotate(180deg);
 			}
 		}
-    }
-
-    .chart-legend {
-      text-align: left;
-      list-style: none;
-      & button {
-	    @include typography('Rubik', 14px, 20px, $color-white);
-		margin-bottom: 7px;
-	  }
-      .legend-axis {
-        color: white;
-        font-size: 14px;
-        .legend-axis-color {
-          border-radius: 10px;
-          float: left;
-          width: 15px;
-          height: 15px;
-          margin: 2px;
-          margin-right: 10px;
-          margin-top: 3px;
-          &.quality {
-            background-color: $color-quality;
-          }
-          &.aci {
-            background-color: $color-aci;
-          }
-          &.ia {
-            background-color: $color-ia;
-          }
-        }
-        .legend-axis-title {
-          width: 165px;
-          text-align: left;
-          display: inline-block;
-        }
-      }
-    }
+	}
+
+	.chart-legend {
+		list-style: none;
+		text-align: left;
+
+		& button {
+			@include typography('Rubik', 14px, 20px, $color-white);
+			margin-bottom: 7px;
+		}
+
+		.legend-axis {
+			color: white;
+			font-size: 14px;
+
+			.legend-axis-color {
+				border-radius: 10px;
+				float: left;
+				height: 15px;
+				margin: 2px;
+				margin-right: 10px;
+				margin-top: 3px;
+				width: 15px;
+
+				&.quality {
+					background-color: $color-quality;
+				}
+
+				&.aci,
+				&.pi {
+					background-color: $color-aci;
+				}
+
+				&.ia {
+					background-color: $color-ia;
+				}
+
+				&.cost {
+					background-color: $color-cost;
+				}
+			}
+
+			.legend-axis-title {
+				display: inline-block;
+				text-align: left;
+				width: 165px;
+			}
+		}
+	}
 }