qpp-style 2.1.13 → 2.2.0-sm.0

package/styles/components/_alerts.scss

@@ -4,7 +4,6 @@
 	.error-header {
 		margin-bottom: 35px;
 	}
-
 }
 
 .alert-info {
@@ -18,16 +17,16 @@
 	li,
 	p {
 		strong {
-			margin-bottom: 10px;
-			line-height: 1.5;
 			font-weight: 500;
+			line-height: 1.5;
+			margin-bottom: 10px;
 		}
 	}
 }
 
 .alert-warning {
-	border: none;
 	background-color: $color-chartreuse-light;
+	border: none;
 }
 
 .alert-info,
@@ -48,9 +47,8 @@
 }
 
 .alert-success {
-	color: #000;
-	margin-bottom: 15px;
 	background-color: $color-green-light;
 	border-color: $color-green-light;
+	color: #000;
+	margin-bottom: 15px;
 }
-

package/styles/components/_autocomplete.scss

@@ -0,0 +1,47 @@
+.ds-c-autocomplete {
+	.ds-u-float--right {
+		float: right;
+	}
+
+	.ds-u-padding-right--0 {
+		padding-right: 0;
+	}
+
+	.ds-c-autocomplete__list {
+		border: 1px solid $color-gray-medium;
+		padding: 8px;
+
+		ul {
+			list-style: none;
+			margin: 0;
+			padding: 0;
+		}
+
+		.ds-c-autocomplete__list-item {
+			color: $color-teal;
+			padding: 8px;
+
+			&.ds-c-autocomplete__list-item--active {
+				background-color: $color-teal;
+				color: $color-white;
+			}
+		}
+	}
+
+	input {
+		padding: 0.9rem 3.75rem 0.9rem 0.75rem;
+	}
+
+	button {
+		color: $color-teal;
+	}
+
+	svg {
+		bottom: 13px;
+		fill: $color-teal;
+		height: 20px;
+		position: absolute;
+		right: 20px;
+		width: 20px;
+	}
+}

package/styles/components/_breadcrumbs.scss

@@ -1,33 +1,33 @@
 .breadcrumb {
-	padding: 20px 0;
-	margin-bottom: 16px;
 	list-style: none;
+	margin-bottom: 16px;
+	padding: 20px 0;
 
-	> li {
+	li {
 		display: inline-block;
 
 		+ li::before {
-			$nbsp: "\00a0";
-			$breadcrumb-separator: "\003e";
-			content: "#{$breadcrumb-separator}#{$nbsp}";
-			padding: 0 5px 0 10px;
+			$nbsp: '\00a0';
+			$breadcrumb-separator: '\003e';
 			color: $color-gray-dark;
+			content: '#{$breadcrumb-separator}#{$nbsp}';
+			padding: 0 5px 0 10px;
 		}
 	}
 
-	> .active {
+	.active {
 		color: $color-gray-dark;
 	}
 
 	&.dashboard {
+		color: $color-white;
 		font-size: 13px;
-		line-height: 20px;
 		font-weight: 400;
+		line-height: 20px;
 		margin-bottom: 0;
 		padding: 10px 0;
-		color: $color-white;
 
-		> li {
+		li {
 			a {
 				&:link,
 				&:visited {
@@ -41,22 +41,23 @@
 					text-decoration: none;
 				}
 			}
+
 			+ li::before {
 				color: $color-white;
-				content: "";
+				content: '';
 				padding: 0;
 			}
 		}
 
 		li::after {
-			$nbsp: "\00a0";
-			$breadcrumb-separator: "\003e";
-			content: "#{$breadcrumb-separator}#{$nbsp}";
-			padding: 0 5px 0 10px;
+			$nbsp: '\00a0';
+			$breadcrumb-separator: '\003e';
 			color: $color-white;
+			content: '#{$breadcrumb-separator}#{$nbsp}';
+			padding: 0 5px 0 10px;
 		}
 
-		> .active {
+		.active {
 			color: $color-white;
 		}
 	}