docs-v2/assets/styles/layouts/_custom-time-trigger.scss

65 lines
1.2 KiB
SCSS

.custom-time-trigger {
display: block;
position: fixed;
bottom: 1.5rem;
right: 1.5rem;
border-radius: $radius;
box-shadow: 2px 2px 6px $sidebar-search-shadow;
z-index: 1;
color: $g20-white;
background: $g5-pepper;
&:before {
content: "";
position: absolute;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border-radius: $radius;
@include gradient($article-btn-gradient, 320deg);
z-index: -1;
opacity: 0;
transition: opacity .2s;
}
&:hover:before {opacity: 1}
a {
display: block;
padding: 1rem;
line-height: 1rem;
&:before {
content: "Select custom date for sample data";
display: inline-block;
overflow: hidden;
font-size: .9rem;
font-style: italic;
white-space: nowrap;
width: 0;
opacity: 0;
transition: width .2s, opacity .2s;
}
&:hover {
cursor: pointer;
&:before{
width: 240px;
opacity: 1;
}
}
}
}
///////////////////////////////// MEDIA QUERIES ////////////////////////////////
@include media(small) {
.custom-time-trigger {
bottom: .75rem;
right: .75rem;
}
}