qpp-style 0.0.9 → 0.0.10

package/styles/components/_accordion.scss

@@ -1,286 +1,289 @@
 .stats {
-	display: flex !important;
-	flex-direction: column;
-	flex-wrap: wrap;
-	@include breakpoint(sm) {
-		flex-direction: row;
-	}
+  display: flex !important;
+  flex-direction: column;
+  flex-wrap: wrap;
+  @include breakpoint(sm) {
+    flex-direction: row;
+  }
 }
 
 .stat {
-	ul {
-		padding-left: 20px;
-	}
+  ul {
+    padding-left: 20px;
+  }
 }
 
 .panel-title a {
-	padding: 8px 15px 8px 30px;
-	position: relative;
-
-	&:link,
-	&:visited {
-		color: $color-teal;
-		text-decoration: underline;
-	}
-
-	&:hover,
-	&:focus {
-		color: $color-teal;
-		text-decoration: none;
-	}
+  padding: 8px 15px 8px 30px;
+  position: relative;
+
+  &:link,
+  &:visited {
+    color: $color-teal;
+    text-decoration: underline;
+  }
+
+  &:hover,
+  &:focus {
+    color: $color-teal;
+    text-decoration: none;
+  }
 }
 
 .panel-title a::before {
-	color: $color-teal;
-	content: '\f078';
-	display: inline-block;
-	font-family: 'FontAwesome';
-	font-size: 20px;
-	left: 0;
-	margin-top: -14px;
-	position: absolute;
-	text-decoration: underline;
-	top: 50%;
-	transition: all 0.1s linear;
+  color: $color-teal;
+  content: '\f078';
+  display: inline-block;
+  font-family: 'FontAwesome';
+  font-size: 20px;
+  left: 0;
+  margin-top: -14px;
+  position: absolute;
+  text-decoration: underline;
+  top: 50%;
+  transition: all 0.1s linear;
 }
 
 // IE doesn't allow you to set text-decoration:none unless it was already set
 
 .panel-title a::before {
-	text-decoration: none;
+  text-decoration: none;
 }
 
 .panel-title a.collapsed::before {
-	transform: rotate(-90deg);
+  transform: rotate(-90deg);
 }
 
 .measures-search {
-	.dropdown {
-		display: block;
-		margin-bottom: 0.5em;
-		@include breakpoint(sm) {
-			display: inline-block;
-			margin-right: 10px;
-		}
-	}
-
-	button.btn-default.dropdown-toggle {
-		width: 100%;
-		@include breakpoint(sm) {
-			width: auto;
-		}
-
-		.glyphicon-chevron-down {
-			position: absolute;
-			right: 10px;
-			@include breakpoint(sm) {
-				position: inherit;
-				right: auto;
-			}
-		}
-	}
-
-	.dropdown.open {
-		border-bottom-left-radius: 0;
-		border-bottom-right-radius: 0;
-
-		.dropdown-menu {
-			border: 1px solid $form-border-color;
-			border-radius: 0;
-			box-shadow: none;
-			margin: 0 0 10px;
-			min-width: 100%;
-			padding-bottom: 15px;
-			position: relative;
-			width: 100%;
-			@include breakpoint(sm) {
-				position: absolute;
-				width: auto;
-			}
-
-			li {
-				margin-top: 0;
-
-				a {
-					cursor: pointer;
-					text-decoration: none;
-
-					input[type='checkbox'],
-					input[type='radio'] {
-						float: left;
-						line-height: normal;
-						margin: 4px 10px 0 -10px;
-					}
-				}
-
-				label {
-					color: #333;
-					font-weight: 400;
-
-					input[type='checkbox'] {
-						float: left;
-						line-height: normal;
-						margin: 4px 10px 0;
-					}
-				}
-				@include breakpoint(sm) {
-					margin: 10px 0 0;
-					min-width: 215px;
-
-					a {
-						clear: both;
-						color: #333;
-						display: block;
-						font-weight: 400;
-						line-height: 1.42857143;
-						margin-top: 0;
-						padding: 3px 20px 3px 30px;
-
-						input[type='checkbox'] {
-							float: left;
-							line-height: normal;
-							margin: 5px 4px 4px -20px;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	.dropdown-menu.all-filtered {
-		margin-left: -85px;
-		position: absolute;
-		top: 60px;
-		width: auto;
-	}
+  .dropdown {
+    display: block;
+    margin-bottom: 0.5em;
+    @include breakpoint(sm) {
+      display: inline-block;
+      margin-right: 10px;
+    }
+  }
+
+  button.btn-default.dropdown-toggle {
+    width: 100%;
+    @include breakpoint(sm) {
+      width: auto;
+    }
+
+    .glyphicon-chevron-down {
+      position: absolute;
+      right: 10px;
+      @include breakpoint(sm) {
+        position: inherit;
+        right: auto;
+      }
+    }
+  }
+
+  .dropdown.open {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+
+    .dropdown-menu {
+      border: 1px solid $form-border-color;
+      border-radius: 0;
+      box-shadow: none;
+      margin: 0 0 10px;
+      min-width: 100%;
+      padding-bottom: 15px;
+      position: relative;
+      width: 100%;
+      @include breakpoint(sm) {
+        position: absolute;
+        width: auto;
+      }
+
+      li {
+        margin-top: 0;
+
+        a {
+          cursor: pointer;
+          text-decoration: none;
+
+          input[type='checkbox'],
+          input[type='radio'] {
+            float: left;
+            line-height: normal;
+            margin: 4px 10px 0 -10px;
+          }
+        }
+
+        label {
+          color: #333;
+          font-weight: 400;
+
+          input[type='checkbox'] {
+            float: left;
+            line-height: normal;
+            margin: 4px 10px 0;
+          }
+        }
+        @include breakpoint(sm) {
+          margin: 10px 0 0;
+          min-width: 215px;
+
+          a {
+            clear: both;
+            color: #333;
+            display: block;
+            font-weight: 400;
+            line-height: 1.42857143;
+            margin-top: 0;
+            padding: 3px 20px 3px 30px;
+
+            input[type='checkbox'] {
+              float: left;
+              line-height: normal;
+              margin: 5px 4px 4px -20px;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .dropdown-menu.all-filtered {
+    margin-left: -85px;
+    position: absolute;
+    top: 60px;
+    width: auto;
+  }
 }
 
 .panel-collapse.collapse {
-	border-top: 0;
+  border-top: 0;
 }
 
 .panel-collapse.collapse.in {
-	border-bottom: 0;
+  border-bottom: 0;
 }
 
 .filters {
-	hr {
-		margin-top: 0;
-	}
-
-	.btn {
-		margin-bottom: 1rem;
-		margin-right: 10px;
-	}
+  hr {
+    margin-top: 0;
+  }
+
+  .btn {
+    margin-bottom: 1rem;
+    margin-right: 10px;
+  }
 }
 
 // Accordion Component
 .accordion-section {
-	border: 2px solid $color-gray-very-light;
-	border-radius: 3px;
-	display: flex;
-	flex-direction: column;
-	margin: 15px 0;
-
-	.accordion {
-		align-items: center;
-		background-color: $color-white;
-		color: $color-gray-darker;
-		cursor: pointer;
-		display: flex;
-		border: none;
-		outline: none;
-		padding: 20px 30px;
-		transition: background-color 0.6s ease;
+  border: 2px solid $color-gray-very-light;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+
+  .accordion {
+    align-items: center;
+    background-color: $color-white;
+    color: $color-gray-darker;
+    cursor: pointer;
+    display: flex;
+    border: none;
+    outline: none;
+    padding: 20px 30px;
+    transition: background-color 0.6s ease;
 
     &:focus {
       border: 1px solid $color-gray-medium;
     }
 
-		.accordion-left-title {
-			color: $color-gray-darker;
-			flex-grow: 1;
-			font-size: 1.125rem;
-			font-weight: 500;
-			max-width: 100%;
-			text-align: left;
-			width: 33%;
-
-			.accordion-title {
-				width: 75%;
-			}
-
-			.accordion-subtitle {
-				color: $color-gray-dark;
-				font-size: 1rem;
-				font-weight: 400;
-				margin-top: 5px;
-			}
-
-			p {
-				margin: 0;
-				padding: 0;
-			}
-		}
-
-		.accordion-center,
-		.accordion-right {
-			color: $color-gray-darker;
-			flex-grow: 1;
-			font-size: 1.125rem;
-			font-weight: 400;
-
-			p {
-				margin: 0;
-			}
-		}
-
-		.accordion-center {
-			text-align: left;
-		}
-
-		.accordion-right {
-			text-align: right;
-			margin-right: 30px;
-		}
-
-		.chevron-container {
-			transform: rotate(90deg);
-			height: 30px;
-			width: 30px;
-			background-color: $color-gray-light;
-			border: 1px solid $color-gray-medium;
-			border-radius: 50%;
-			display: inline-block;
-
-			.accordion-icon {
-				margin-left: auto;
-				transition: transform 0.5s ease;
-			}
-
-			.rotate {
-				transform: rotate(180deg);
-			}
-		}
-	}
-
-	.accordion-content {
-		overflow: hidden;
-		padding: 0 30px;
-		transition: max-height 0.5s ease;
-
-		.accordion-text {
-			font-size: 1rem;
-			line-height: 1.7;
-			padding: 15px 0;
-
-			&.dashed-border {
-				border-top: 1px dashed $color-gray-very-light;
-			}
-
-			p:last-child {
-				margin: 0;
-			}
-		}
-	}
+    .accordion-left-title {
+      color: $color-gray-darker;
+      flex-grow: 1;
+      font-size: 1.125rem;
+      font-weight: 500;
+      max-width: 100%;
+      text-align: left;
+      width: 33%;
+
+      .accordion-title {
+        width: 75%;
+      }
+
+      .accordion-subtitle {
+        color: $color-gray-dark;
+        font-size: 1rem;
+        font-weight: 400;
+        margin-top: 5px;
+      }
+
+      p {
+        margin: 0;
+        padding: 0;
+      }
+    }
+
+    .accordion-center,
+    .accordion-right {
+      color: $color-gray-darker;
+      flex-grow: 1;
+      font-size: 1.125rem;
+      font-weight: 400;
+
+      p {
+        margin: 0;
+      }
+    }
+
+    .accordion-center {
+      text-align: left;
+    }
+
+    .accordion-right {
+      text-align: right;
+      margin-right: 30px;
+    }
+
+    .chevron-container {
+      position: relative;
+      height: 30px;
+      width: 30px;
+      background-color: $color-gray-light;
+      border: 1px solid $color-gray-medium;
+      border-radius: 50%;
+      display: inline-block;
+
+      .accordion-icon {
+        position: absolute;
+        top: 41%;
+        left: 33%;
+        margin-left: auto;
+        transition: transform 0.5s ease;
+      }
+
+      .rotate {
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  .accordion-content {
+    overflow: hidden;
+    padding: 0 30px;
+    transition: max-height 0.5s ease;
+
+    .accordion-text {
+      font-size: 1rem;
+      line-height: 1.7;
+      padding: 15px 0;
+
+      &.dashed-border {
+        border-top: 1px dashed $color-gray-very-light;
+      }
+
+      p:last-child {
+        margin: 0;
+      }
+    }
+  }
 }

package/styles/components/_autocomplete.scss

@@ -1,6 +1,3 @@
-@import '~@cmsgov/design-system-core/dist/components/Autocomplete/Autocomplete';
-@import '~@cmsgov/design-system-core/dist/components/Button/Button';
-
 .ds-c-autocomplete {
 	.ds-u-float--right {
 		float: right;

package/styles/components/_spinner.scss

@@ -1,5 +1,3 @@
-@import '~@cmsgov/design-system-core/dist/components/Spinner/Spinner';
-
 .ds-c-spinner::after {
 	color: $color-teal;
 }