129 lines
2.2 KiB
SCSS
129 lines
2.2 KiB
SCSS
/* -------------------------------------------------------------------------- */
|
|
/* Hover */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
.hover-actions {
|
|
display: none;
|
|
position: absolute;
|
|
&.show {
|
|
display: inline-block;
|
|
|
|
& + .hover-hide {
|
|
// opacity: 0;
|
|
|
|
opacity: 1;
|
|
transition: opacity 0.3s ease;
|
|
}
|
|
}
|
|
}
|
|
|
|
a[href] {
|
|
&.bg-body-secondary {
|
|
@include hover-focus {
|
|
background-color: var(--#{$prefix}tertiary-bg) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Used in search box
|
|
.text-primary-hover {
|
|
@include hover-focus {
|
|
color: var(--#{$prefix}primary) !important;
|
|
}
|
|
}
|
|
|
|
.hover-danger {
|
|
@include hover-focus {
|
|
color: var(--#{$prefix}danger) !important;
|
|
}
|
|
}
|
|
|
|
.hover-shadow {
|
|
@include hover-focus {
|
|
box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
}
|
|
|
|
.hover-actions-trigger {
|
|
position: relative;
|
|
|
|
// Style for email Inbox
|
|
.inbox-link {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
@include hover-focus {
|
|
.hover-actions {
|
|
z-index: 1;
|
|
display: flex;
|
|
&.btn {
|
|
display: inline-block;
|
|
}
|
|
animation: fade 0.15s ease-in-out;
|
|
}
|
|
|
|
.hover-hide {
|
|
opacity: 0;
|
|
}
|
|
@each $breakpoint, $value in $grid-breakpoints {
|
|
.hover-#{$breakpoint}-hide {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.hover-#{$breakpoint}-show {
|
|
@include media-breakpoint-up($breakpoint) {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.bg {
|
|
@each $color, $value in $hover-bg-colors {
|
|
&-#{$color}-hover {
|
|
&:hover {
|
|
background-color: #{$value} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.text {
|
|
@each $color, $value in $hover-text-colors {
|
|
&-#{$color}-hover {
|
|
&:hover {
|
|
color: #{$value} !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.d-toggle-container {
|
|
.d-none-hover {
|
|
display: block !important;
|
|
}
|
|
.d-block-hover {
|
|
display: none !important;
|
|
}
|
|
@include hover-focus {
|
|
.d-none-hover {
|
|
display: none !important;
|
|
}
|
|
.d-block-hover {
|
|
display: block !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|