qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_error-page.scss

@@ -0,0 +1,56 @@
+.page-error {
+	text-align: center;
+
+	.collapsible-container {
+		margin: 0 auto;
+		width: 350px;
+	}
+
+	.collapsible-summary {
+		background: transparent;
+		border: 0 none;
+		color: $color-teal;
+		display: block;
+		font-size: initial;
+		margin: 2em auto 1em;
+		padding: 0;
+
+		&::before {
+			margin-right: 0.25em;
+		}
+
+		&[aria-expanded='false'] {
+			&::before {
+				content: '+';
+			}
+
+			.collapsible-hide-label {
+				display: none;
+			}
+		}
+
+		&[aria-expanded='true'] {
+			&::before {
+				content: '-';
+			}
+
+			.collapsible-show-label:not(:last-child) {
+				display: none;
+			}
+
+			.collapsible-hide-label {
+				display: initial;
+			}
+		}
+	}
+
+	.collapsible-details {
+		font-size: initial;
+		padding: 0 1em;
+		text-align: left;
+
+		p {
+			margin: 0.5em 0;
+		}
+	}
+}

package/styles/components/_flash-notification.scss

@@ -0,0 +1,98 @@
+.flash-notification {
+	bottom: 0;
+	margin: 10px;
+	opacity: 1;
+	position: fixed;
+	right: 0;
+	transition: opacity 0.5s ease-in-out;
+	z-index: 101;
+
+	&.notification-closed {
+		opacity: 0;
+	}
+
+	.success,
+	.error {
+		align-items: center;
+		border-radius: 3px;
+		color: white;
+		display: flex;
+		height: auto;
+		justify-content: center;
+		width: 300px;
+
+		.icon {
+			left: 18px;
+			margin-right: 5px;
+			position: relative;
+		}
+	}
+
+	.success {
+		background-color: $color-slate;
+
+		.icon {
+			&::before {
+				content: '\f058';
+				font-family: 'FontAwesome';
+				font-size: 1.2rem;
+			}
+		}
+	}
+
+	.error {
+		background-color: $color-red;
+
+		.icon {
+			&::before {
+				content: '\f06a';
+				font-family: 'FontAwesome';
+				font-size: 1.2rem;
+			}
+		}
+	}
+
+	.close-notification-container {
+		align-self: flex-start;
+		position: relative;
+
+		.closeNotification {
+			background: none;
+			border: none;
+			height: 20px;
+			margin: 10px 5px 0 -28px;
+			width: 20px;
+
+			.close-icon {
+				fill: white;
+				height: 14px;
+				position: relative;
+				right: 4px;
+				top: -4px;
+				width: 14px;
+			}
+		}
+	}
+}
+
+.text-content {
+	font-size: 13px;
+	line-height: 1.3;
+	margin: 10px auto;
+	max-width: 220px;
+
+	.title-text,
+	.body-text {
+		margin: auto;
+	}
+
+	.title-text {
+		font-weight: $rubik-medium;
+		padding: 10px 0;
+	}
+
+	.body-text {
+		font-weight: $rubik-regular;
+		padding: 0 0 10px;
+	}
+}

package/styles/components/_fonts.scss

@@ -1,43 +1,42 @@
 @font-face {
-	font-family: "FontAwesome";
-	src:
-		url("#{$font-path}fontawesome-webfont.eot?") format("eot"),
-		url("#{$font-path}fontawesome-webfont.woff2") format("woff2"),
-		url("#{$font-path}fontawesome-webfont.woff") format("woff"),
-		url("#{$font-path}fontawesome-webfont.ttf") format("truetype"),
-		url("#{$font-path}fontawesome-webfont.svg") format("svg");
+	font-family: 'FontAwesome';
+	src: url('#{$font-path}fontawesome-webfont.eot?') format('eot'),
+		url('#{$font-path}fontawesome-webfont.woff2') format('woff2'),
+		url('#{$font-path}fontawesome-webfont.woff') format('woff'),
+		url('#{$font-path}fontawesome-webfont.ttf') format('truetype'),
+		url('#{$font-path}fontawesome-webfont.svg') format('svg');
 }
 @font-face {
 	font-family: 'Rubik';
-	font-weight: 300;
 	font-style: normal;
+	font-weight: 300;
 	letter-spacing: -0.2px;
 	src: url('#{$font-path}Rubik-Light.ttf');
 }
 @font-face {
 	font-family: 'Rubik';
-	font-weight: 400;
 	font-style: normal;
+	font-weight: 400;
 	letter-spacing: -0.2px;
 	src: url('#{$font-path}Rubik-Regular.ttf');
 }
 @font-face {
 	font-family: 'Rubik';
-	font-weight: 500;
 	font-style: normal;
+	font-weight: 500;
 	letter-spacing: -0.2px;
 	src: url('#{$font-path}Rubik-Medium.ttf');
 }
 @font-face {
 	font-family: 'Rubik';
-	font-weight: 700;
 	font-style: normal;
+	font-weight: 700;
 	letter-spacing: -0.2px;
 	src: url('#{$font-path}Rubik-Bold.ttf');
 }
 @font-face {
 	font-family: 'FontAwesome';
-	src: url('#{$font-path}FontAwesome.otf') format('opentype');
-	font-weight: 400;
 	font-style: normal;
+	font-weight: 400;
+	src: url('#{$font-path}FontAwesome.otf') format('opentype');
 }

package/styles/components/_forms.scss

@@ -1,38 +1,43 @@
 /* Forms */
-label, legend {
+
+label,
+legend {
+	border-bottom: none;
 	color: $form-label-color;
-	font-weight: 500;
-	text-transform: uppercase;
 	font-size: 0.8em;
+	font-weight: 500;
 	margin-bottom: 0.2rem;
-	border-bottom: none;
-  &.form-small {
+	text-transform: uppercase;
+
+	&.form-small {
 		color: $color-text-main;
-		font-weight: 500;
-		text-transform: none;
 		font-size: 14px;
+		font-weight: 500;
 		line-height: 22px;
-		margin: .5rem 0;
+		margin: 0.5rem 0;
+		text-transform: none;
 	}
 }
 
 fieldset {
-    padding: 0.35em 0 0;
+	padding: 0.35em 0 0;
 }
 
 .form-control {
-	font-family: $font-family-base;
+	-webkit-appearance: none;
 	border-color: $form-border-color;
-	color: $color-gray-dark;
-	padding: 0.9rem 0.75rem;
 	border-radius: 2px;
-	-webkit-appearance: none;
+	box-shadow: none; // Bootstrap 3
+	color: $color-gray-dark;
+	font-family: $font-family-base;
 	font-size: 1rem; // Bootstrap 3
 	height: 50px; // Bootstrap 3
-	box-shadow: none; // Bootstrap 3
+	padding: 0.9rem 0.75rem;
+
 	&::placeholder {
 		color: $form-field-color;
 	}
+
 	&:focus {
 		border-color: $form-border-color-focus;
 		box-shadow: none; // Bootstrap 3
@@ -40,94 +45,154 @@ fieldset {
 }
 
 .form-control-feedback {
+	display: none;
 	font-size: 0.9rem;
 	margin-top: 0;
 	position: relative;
-	width: initial;
 	text-align: initial;
-	display: none;
+	width: initial;
 }
 
-.has-danger {
-	.col-form-label,
-	.custom-control,
-	.form-check-label,
-	.form-control-feedback,
-	.form-control-label {
-		color: $form-error-color;
-		display: block;
-		height: initial;
-		line-height: initial;
-	}
-	.form-control {
-		border-color: $form-error-color;
-		border-width: 2px;
-	}
-	.form-control-danger {
-		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bc2828' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23bc2828' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+.custom-control {
+	cursor: pointer;
+	display: inline-flex;
+	margin-right: 1rem;
+	min-height: 1.5rem;
+	padding-left: 2.2rem;
+	position: relative;
+	top: -20px;
+	user-select: none;
+
+	.custom-control-indicator {
+		background-color: $color-gray-very-light;
+		background-position: center center;
 		background-repeat: no-repeat;
-		background-position: center right .5625rem;
-		background-size: 1.125rem 1.125rem;
-	}
-}
+		border: 1px solid $form-border-color;
+		display: block;
+		height: 1.5rem;
+		left: 0;
+		padding: 5px;
+		pointer-events: none;
+		position: absolute;
+		width: 1.5rem;
 
-.form-check {
-	.form-check-label {
-		color: inherit;
-		text-transform: initial;
-		font-weight: normal;
+		&.radio {
+			background-position: 4px 4px;
+			background-size: 65%;
+			border-radius: 50%;
+		}
+
+		&.checkbox {
+			background-size: 90%;
+			border-radius: 3px;
+
+			&.white {
+				background-color: $color-white;
+			}
+		}
 	}
-}
 
-.custom-control {
-	padding-left: 2.2rem;
 	.custom-control-input {
+		opacity: 0;
+		position: absolute;
+		z-index: -1;
+
 		&:active {
 			& ~ .custom-control-indicator {
 				background-color: $color-white;
 				border-color: $form-border-color;
 			}
 		}
+
 		&:focus {
 			& ~ .custom-control-indicator {
-				box-shadow: none;
 				border-color: $form-border-color;
+				box-shadow: none;
 			}
 		}
+
 		&:checked {
 			& ~ .custom-control-indicator {
 				background-color: $form-check-color;
 				border-color: $form-check-color;
 			}
+
 			&:focus {
 				& ~ .custom-control-indicator {
-					box-shadow: none;
 					border-color: $form-check-color;
+					box-shadow: none;
 				}
 			}
 		}
 	}
-	.custom-control-indicator {
-		background-color: transparent;
-		border: 2px solid $form-border-color;
-		width: 1.7rem;
-		height: 1.7rem;
-	}
+
 	.custom-control-description {
 		color: $text-color;
-		text-transform: initial;
 		font-weight: normal;
-		padding-top: 3px;
+		position: relative;
+		text-transform: initial;
+		top: 10px;
 	}
 }
 
-.custom-radio .custom-control-input:checked ~ .custom-control-indicator {
-	background-color: $color-white;
-	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='%2304838a'/%3E%3C/svg%3E");
+.custom-radio,
+.custom-checkbox {
+	margin-bottom: -0.875rem;
+	padding-bottom: 0.875rem;
+}
+
+.custom-radio {
+	.custom-control-input:checked ~ .custom-control-indicator.radio {
+		background-color: $color-white;
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='4' fill='%2304838a'/%3E%3C/svg%3E");
+		border: 1px solid $color-teal;
+	}
+}
+
+.custom-checkbox {
+	.custom-control-input:checked ~ .custom-control-indicator.checkbox,
+	.custom-control-input:checked ~ .custom-control-indicator.checkbox-white {
+		background-color: $color-teal;
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill-rule='evenodd' clip-rule='evenodd' viewBox='3 0 20 25'%3E%3Cpath fill='%23fff' d='M21 6.285l-11.16 12.733-6.84-6.018 1.319-1.49 5.341 4.686 9.865-11.196 1.475 1.285z'/%3E%3C/svg%3E");
+		border: 1px solid $color-teal;
+	}
+}
+
+.has-danger {
+	.col-form-label,
+	.custom-control,
+	.form-check-label,
+	.form-control-feedback,
+	.form-control-label {
+		color: $form-error-color;
+		display: block;
+		height: initial;
+		line-height: initial;
+	}
+
+	.form-control {
+		border-color: $form-error-color;
+		border-width: 2px;
+	}
+
+	.form-control-danger {
+		background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23bc2828' viewBox='-2 -2 7 7'%3E%3Cpath stroke='%23bc2828' d='M0 0l3 3m0-3L0 3'/%3E%3Ccircle r='.5'/%3E%3Ccircle cx='3' r='.5'/%3E%3Ccircle cy='3' r='.5'/%3E%3Ccircle cx='3' cy='3' r='.5'/%3E%3C/svg%3E");
+		background-position: center right 0.5625rem;
+		background-repeat: no-repeat;
+		background-size: 1.125rem 1.125rem;
+	}
+}
+
+.form-check {
+	.form-check-label {
+		color: inherit;
+		font-weight: normal;
+		text-transform: initial;
+	}
 }
 
 form {
-	button[type="submit"] {
+	button[type='submit'] {
 		margin-top: 1rem;
 	}
 }
@@ -137,9 +202,12 @@ select.form-control:not([size]):not([multiple]) {
 }
 
 .custom-select {
-	background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-26 -12 40 40'%3E%3Cpath fill='%2304838a' d='M13.148 6.312l-5.797 5.789q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.789q-0.148-0.148-0.148-0.355t0.148-0.355l1.297-1.289q0.148-0.148 0.352-0.148t0.352 0.148l4.148 4.148 4.148-4.148q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.289q0.148 0.148 0.148 0.355t-0.148 0.355z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
 	appearance: none;
+	background: #fff
+		url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-26 -12 40 40'%3E%3Cpath fill='%2304838a' d='M13.148 6.312l-5.797 5.789q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.789q-0.148-0.148-0.148-0.355t0.148-0.355l1.297-1.289q0.148-0.148 0.352-0.148t0.352 0.148l4.148 4.148 4.148-4.148q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.289q0.148 0.148 0.148 0.355t-0.148 0.355z'/%3E%3C/svg%3E")
+		no-repeat right 0.75rem center;
 	background-size: 40px 40px;
+
 	&::-ms-expand {
 		display: none;
 	}
@@ -148,56 +216,62 @@ select.form-control:not([size]):not([multiple]) {
 .input-group {
 	.input-group-btn {
 		select {
-			min-width: 110px;
 			border-right: none;
+			min-width: 110px;
 		}
 	}
+
 	input {
 		border-left: none;
 	}
+
 	.form-control {
 		&:focus {
 			border-color: $form-border-color;
-			box-shadow: none; // Bootstrap 3
 			border-right: none;
+			box-shadow: none; // Bootstrap 3
 		}
 	}
 }
 
 .detail-boxed {
-	margin-top: 2rem;
-	margin-bottom: 2rem;
-	border-top: 1px solid $color-gray-very-light;
 	border-left: 1px solid $color-gray-very-light;
-	border-right: 1px solid $color-gray-very-light;
-	font-size: 1rem;
 	border-radius: 3px;
+	border-right: 1px solid $color-gray-very-light;
+	border-top: 1px solid $color-gray-very-light;
 	box-shadow: 0 3px 20px 0 rgba(0, 0, 0, 0.1);
+	font-size: 1rem;
+	margin-bottom: 2rem;
+	margin-top: 2rem;
 
 	.detail {
+		border-bottom: 1px solid $color-gray-very-light;
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid $color-gray-very-light;
 		@include breakpoint(sm) {
 			flex-direction: row;
 		}
+
 		& > div {
 			padding: 1rem;
 		}
+
 		& > div:nth-of-type(1) {
-			flex: 1;
 			background: $color-gray-light;
+			flex: 1;
 			font-weight: 500;
 		}
+
 		& > div:nth-of-type(2) {
 			@include breakpoint(sm) {
 				flex: 2;
 			}
 		}
+
 		.detail-field {
 			display: flex;
-			justify-content: space-between;
 			flex-direction: row-reverse;
+			justify-content: space-between;
 		}
 	}
 }

package/styles/components/_grid.scss

@@ -1,31 +1,37 @@
 // Due to adding in the side-nav, on qpp-ui we need to start
-// phasing out bootstrap's default containers to make it more repsonsive
+// phasing out bootstrap's default containers to make it more responsive
+
 .responsive-container {
-	margin-right: auto;
-	margin-left: auto;
-	padding-left: 15px;
-	padding-right: 15px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 15px;
+  padding-right: 15px;
+
+  @include breakpoint(sm) {
+    max-width: $screen-sm;
+  }
+  @include breakpoint(md) {
+    max-width: $screen-md;
+  }
+  @include breakpoint(lg) {
+    max-width: $screen-lg;
+  }
 
-	@include breakpoint(sm) {
-		max-width: $screen-sm;
-	}
-	@include breakpoint(md) {
-		max-width: $screen-md;
-	}
-	@include breakpoint(lg) {
-		max-width: $screen-lg;
-	}
+  &.tight {
+    max-width: 800px;
+  }
 
-	&.tight {
-		max-width: 800px;
-	}
+  &.tighter {
+    max-width: 500px;
+  }
 }
 
 // The bootstrap container class causes issues with our
 // sm/md/lg breakpoints. Will remove this once we make changes
 // to legacy containers.
+
 .container {
-	&.tight {
-		max-width: 800px;
-	}
+  &.tight {
+    max-width: 800px;
+  }
 }