Mo Elzubeir
148 lines
2.2 KiB
SCSS
148 lines
2.2 KiB
SCSS
// Tooltips & Popovers
|
|
|
|
// Popover
|
|
|
|
.popover {
|
|
box-shadow: $box-shadow-default;
|
|
|
|
.grid-menu {
|
|
margin-bottom: -$popover-body-padding-y;
|
|
padding: 1px;
|
|
|
|
[class*="col-"] {
|
|
padding: $popover-body-padding-y;
|
|
}
|
|
|
|
& + .nav {
|
|
.nav-item-btn {
|
|
margin-bottom: $popover-body-padding-y;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid-menu-xl {
|
|
margin-bottom: -($popover-body-padding-y / 1.35);
|
|
|
|
[class*="col-"] {
|
|
padding: 0;
|
|
}
|
|
}
|
|
|
|
.popover-inner {
|
|
.dropdown-menu-header {
|
|
@include border-top-radius($popover-border-radius);
|
|
overflow: hidden;
|
|
margin-top: -1px;
|
|
margin-inline-start: -1px;
|
|
margin-inline-end: -1px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rm-max-width {
|
|
& > .popover {
|
|
max-width: initial;
|
|
}
|
|
}
|
|
|
|
.rm-pointers {
|
|
& > .popover {
|
|
.arrow {
|
|
display: none !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin bg-popover($parent, $color) {
|
|
#{$parent} {
|
|
background-color: $color !important;
|
|
}
|
|
}
|
|
|
|
@each $color, $value in $theme-colors {
|
|
@include bg-popover(".popover-#{$color}", $value);
|
|
}
|
|
|
|
.popover-custom {
|
|
.popover-body {
|
|
padding-top: 0;
|
|
padding-inline-start: 0;
|
|
padding-inline-end: 0;
|
|
|
|
.dropdown-menu-header {
|
|
margin-top: 0;
|
|
@include border-top-radius($popover-border-radius);
|
|
overflow: hidden;
|
|
|
|
.menu-header-content {
|
|
padding: 0 $layout-spacer-x;
|
|
}
|
|
|
|
.dropdown-menu-header-inner.bg-light {
|
|
color: rgba(0, 0, 0, .8);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.popover-custom-lg {
|
|
min-width: 22rem;
|
|
}
|
|
|
|
&.popover-custom-xl {
|
|
min-width: 25rem;
|
|
}
|
|
|
|
&.popover-custom-sm {
|
|
min-width: 15rem;
|
|
}
|
|
}
|
|
|
|
.popover-bg {
|
|
border: 0;
|
|
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
|
|
.popover-header {
|
|
background: rgba(255, 255, 255, .1);
|
|
border-bottom: 0;
|
|
color: rgba(255, 255, 255, 1);
|
|
|
|
&::before {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.popover-body {
|
|
color: rgba(255, 255, 255, .7);
|
|
}
|
|
|
|
&.text-dark {
|
|
.popover-header {
|
|
color: rgba(0, 0, 0, .8);
|
|
}
|
|
|
|
.popover-body {
|
|
color: rgba(0, 0, 0, .7);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tooltip
|
|
|
|
.tooltip-light {
|
|
& > .tooltip {
|
|
.tooltip-inner {
|
|
background: $white;
|
|
color: $gray-800;
|
|
box-shadow: $box-shadow-default;
|
|
border: $popover-border-color solid 1px;
|
|
}
|
|
|
|
.arrow {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|