55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
// Popover: Custom styles built on top of the Bootstrap popover component
|
|
|
|
.popover {
|
|
box-shadow: $z-depth-1;
|
|
font-size: $font-size-base;
|
|
min-width: 230px;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.arrow {
|
|
@extend .popover-arrow; // Temp uses Bootstrap 3 class name, until React Bootstrap has been updated to Bootstrap 4
|
|
}
|
|
}
|
|
|
|
.popover-content {
|
|
|
|
// Unable to use classes within the popover, so we use elements to style
|
|
ul {
|
|
padding-left: 0 !important; // TODO remove important by removing nesting of lists
|
|
list-style-type: none;
|
|
margin-left: -#{$popover-padding} + 1px; // minus border
|
|
margin-right: -#{$popover-padding} + 1px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: #{$spacer-y / 4} $popover-padding;
|
|
color: $dropdown-link-color;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
background-color: $dropdown-link-hover-bg;
|
|
color: $dropdown-link-hover-color;
|
|
}
|
|
}
|
|
|
|
.btn {
|
|
padding-left: calc(#{$popover-padding} - 1px); // minus border
|
|
padding-right: calc(#{$popover-padding} - 1px);
|
|
margin-left: calc(-#{$popover-padding} + 1px);
|
|
margin-right: calc(-#{$popover-padding} + 1px);
|
|
display: block;
|
|
width: calc(100% + #{$popover-padding * 2} - 2px);
|
|
text-align: left;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
background-color: $color-theme-bg;
|
|
}
|
|
}
|
|
}
|