pages/assets/bigfoot/src/scss/variants/bigfoot-bottom.scss

63 lines
1.7 KiB
SCSS

// ___ ___ ___
// _____ / /\ ___ ___ / /\ /__/\
// / /::\ / /::\ / /\ / /\ / /::\ | |::\
// / /:/\:\ / /:/\:\ / /:/ / /:/ / /:/\:\ | |:|:\
// / /:/~/::\ / /:/ \:\ / /:/ / /:/ / /:/ \:\ __|__|:|\:\
// /__/:/ /:/\:|/__/:/ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::| \:\
// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\__\/
// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\
// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/
//*
// A footnote popover that, unlike the default, is not positioned relative to
// the button, but instead is positioned at the bottom of the page. This popover
// transitions with a simple slide in from the bottom.
// This style requires that the `positionContent` option of bigfoot is set to false.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote {
// POSITIONING
position: fixed;
bottom: 0; top: auto;
left: 0; right: auto;
transform: translateY(100%);
// DISPLAY AND SIZING
width: 100%;
margin: 0;
// BACKDROP
border-radius: 0;
opacity: 1;
border-width: 1px 0 0;
// TRANSITIONS
transition: transform 0.3s ease;
&.is-active {
transform: translateY(0);
}
}
.bigfoot-footnote__wrapper {
margin: 0 0 0 50%;
transform: translateX(-50%);
max-width: 100%;
}
.bigfoot-footnote__wrapper,
.bigfoot-footnote__content {
border-radius: 0;
}
.bigfoot-footnote__tooltip {
display: none;
}