changes popovers from px to rem

twbs · Oct 18, 2017 · e756b66 · e756b66
1 parent c075968
commit e756b66
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 26 deletions.
diff --git a/scss/_popover.scss b/scss/_popover.scss
@@ -5,7 +5,6 @@
   z-index: $zindex-popover;
   display: block;
   max-width: $popover-max-width;
-  padding: $popover-inner-padding;
   // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
   // So reset our font and text properties to avoid inheriting weird values.
   @include reset-text();
@@ -39,11 +38,11 @@
 
   .arrow::before {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
   .arrow::after {
     content: "";
-    border-width: $popover-arrow-outer-width;
+    border-width: $popover-arrow-width;
   }
 
   // Popover directions
@@ -61,14 +60,14 @@
     }
 
     .arrow::before {
-      bottom: -$popover-arrow-outer-width;
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: -$popover-arrow-width;
+      margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      bottom: -($popover-arrow-outer-width - 1);
-      margin-left: -($popover-arrow-outer-width - 5);
+      bottom: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
+      margin-left: -$popover-arrow-width;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -82,17 +81,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: -$popover-arrow-width;
       border-left-width: 0;
     }
 
     .arrow::before {
-      left: -$popover-arrow-outer-width;
+      left: -$popover-arrow-width;
       border-right-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      left: -($popover-arrow-outer-width - 1);
+      left: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-right-color: $popover-arrow-color;
     }
   }
@@ -106,17 +105,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-left: -($popover-arrow-width - 3);
+      margin-left: -$popover-arrow-width;
       border-top-width: 0;
     }
 
     .arrow::before {
-      top: -$popover-arrow-outer-width;
+      top: -$popover-arrow-width;
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      top: -($popover-arrow-outer-width - 1);
+      top: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-bottom-color: $popover-arrow-color;
     }
 
@@ -129,7 +128,7 @@
       width: 20px;
       margin-left: -10px;
       content: "";
-      border-bottom: 1px solid $popover-header-bg;
+      border-bottom: $popover-border-width solid $popover-header-bg;
     }
   }
 
@@ -142,17 +141,17 @@
 
     .arrow::before,
     .arrow::after {
-      margin-top: -($popover-arrow-outer-width - 3);
+      margin-top: -$popover-arrow-width;
       border-right-width: 0;
     }
 
     .arrow::before {
-      right: -$popover-arrow-outer-width;
+      right: -$popover-arrow-width;
       border-left-color: $popover-arrow-outer-color;
     }
 
     .arrow::after {
-      right: -($popover-arrow-outer-width - 1);
+      right: calc((#{$popover-arrow-width} - #{$popover-border-width}) * -1);
       border-left-color: $popover-arrow-color;
     }
   }

diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -626,27 +626,25 @@ $tooltip-arrow-color:               $tooltip-bg !default;
 
 // Popovers
 
-$popover-inner-padding:             1px !default;
 $popover-bg:                        $white !default;
 $popover-max-width:                 276px !default;
 $popover-border-width:              $border-width !default;
 $popover-border-color:              rgba($black,.2) !default;
-$popover-box-shadow:                0 5px 10px rgba($black,.2) !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black,.2) !default;
 
 $popover-header-bg:                 darken($popover-bg, 3%) !default;
 $popover-header-color:              $headings-color !default;
-$popover-header-padding-y:          8px !default;
-$popover-header-padding-x:          14px !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
 
 $popover-body-color:                $body-color !default;
-$popover-body-padding-y:            9px !default;
-$popover-body-padding-x:            14px !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
 
-$popover-arrow-width:               10px !default;
-$popover-arrow-height:              5px !default;
+$popover-arrow-width:               .8rem !default;
+$popover-arrow-height:              .4rem !default;
 $popover-arrow-color:               $popover-bg !default;
 
-$popover-arrow-outer-width:         ($popover-arrow-width + 1px) !default;
 $popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;