More derps on popovers

lib/sass/popovers.scss

@@ -19,20 +19,20 @@
           transform: translate3d(0, -15px, 0);
   -webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
           transition:         transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-}
 
-// Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
-.popover:after {
-  position: absolute;
-  top: -19px;
-  left: 50%;
-  width: 0;
-  height: 0;
-  margin-left: -20px;
-  content: '';
-  border-right: 20px solid transparent;
-  border-bottom: 20px solid $chrome-color;
-  border-left: 20px solid transparent;
+  // Caret on top of popover using CSS triangles (thanks to @chriscoyier for solution)
+  &:after {
+    position: absolute;
+    top: -19px;
+    left: 50%;
+    width: 0;
+    height: 0;
+    margin-left: -20px;
+    content: '';
+    border-right: 20px solid transparent;
+    border-bottom: 20px solid $chrome-color;
+    border-left: 20px solid transparent;
+  }
 }
 
 // Wrapper for a title and buttons
@@ -41,50 +41,50 @@
   display: box;
   height: 34px;
   margin-bottom: 5px;
-}
-
-// Centered title for popover
-.popover-header .title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: block;
-  width: 100%;
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 45px;
-  color: #000;
-  text-align: center;
-}
-
-// Generic style for all buttons in .popover-header
-.popover-header [class*="button"] {
-  z-index: 25;
-  font-size: 16px;
-  font-weight: 400;
-  line-height: 29px;
-  color: $primary-color;
-  border: 0;
-  transition: opacity .2s linear;
-  -webkit-box-flex: 0;
-          box-flex: 0;
-}
-
-// Hacky way to right align buttons outside of flex-box system
-// Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
-.popover-header .title + [class*="button"]:last-child,
-.popover-header .button + [class*="button"]:last-child,
-.popover-header [class*="button"].pull-right {
-  position: absolute;
-  top: 5px;
-  right: 5px;
-}
 
-// Active state for popover header buttons
-.popover-header .button:active {
-  color: $primary-color;
-  background-color: transparent;
-  opacity: .3;
+  // Centered title for popover
+  .title {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: block;
+    width: 100%;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 45px;
+    color: #000;
+    text-align: center;
+  }
+
+  // Generic style for all buttons in .popover-header
+  [class*="button"] {
+    z-index: 25;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 29px;
+    color: $primary-color;
+    border: 0;
+    transition: opacity .2s linear;
+    -webkit-box-flex: 0;
+            box-flex: 0;
+  }
+
+  // Hacky way to right align buttons outside of flex-box system
+  // Note: is only absolutely positioned button, would be better if flex-box had an "align right" option
+  .title + [class*="button"]:last-child,
+  .button + [class*="button"]:last-child,
+  [class*="button"].pull-right {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+  }
+
+  // Active state for popover header buttons
+  .button:active {
+    color: $primary-color;
+    background-color: transparent;
+    opacity: .3;
+  }
 }
 
 // Popover animation