Skip to content
GitLab
Commit e756b667 authored by Andres Galante's avatar Andres Galante Committed by Mark Otto
Browse files

changes popovers from px to rem

parent c075968c
6 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25494web pack,!25326Adjust examples,!23207#22402 : modal: new autofocus & keyboardBtnNav options,!17021v4
Hide whitespace changes
Inline Side-by-side
Showing
with 23 additions and 26 deletions
+23 -26
scss/_popover.scss
+ 16
- 17
View file @ e756b667
......@@ -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;
}
}
......
scss/_variables.scss
+ 7
- 9
View file @ e756b667
......@@ -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;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment