jeremykidwell.info/public/css/bigfoot-default.scss
Jeremy Kidwell 13e2fd6e74 first commit
2017-06-26 20:57:02 +01:00

620 lines
25 KiB
SCSS
Executable file

// bigfoot - v2.1.1 - 2015.04.04
// ___ ___ ___ ___ ___ ___
// / /\ / /\ / /\ / /\ ___ / /\ / /\
// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\
// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\
// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/
// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___
// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/
// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~
// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\
// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/
//
// These are the key variables for styling the popover.
// Just set the variable to none if you don't want that styling.
// KEY VARIABLES
// =============================================================================
// STYLES
$popover-width: 22em !default; // Ideal width of the popover
$popover-max-width: 90% !default; // Best as a % to accommodate smaller viewports
$popover-max-height: 15em !default; // Maximum size of the content area
$popover-color-background: rgb(250, 250, 250) !default; // Color of the popover background
$popover-border-radius: 0.5em !default; // Radius of the corners of the popover
$popover-border: 1px solid rgb(195, 195, 195) !default; // Border of the popover/ tooltip
$popover-inactive-opacity: 0 !default; // Opacity of the popover when instantiated/ deactivating
$popover-active-opacity: 0.97 !default; // Opacity of the popover when active
$popover-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3) !default; // Sets the box shadow under the popover/ tooltip
$popover-bottom-position: auto !default; // Sets the bottom position of the popover. Use only when setting positionPopover to false in the script
$popover-left-position: auto !default; // Sets the left position of the popover. Use only when setting positionPopover to false in the script
$popover-tooltip-size: 1.3em !default; // Sets the side lengths of the tooltip
$popover-scroll-indicator-width: 0.625em !default; // The width of the scroll indicator
$popover-scroll-indicator-aspect-ratio: (15/12) !default; // The ratio of the height over the width of the scroll indicator
$popover-scroll-indicator-opacity: 0.1 !default; // The active opacity of scroll indicators
$popover-initial-transform-state: scale(0.1) translateZ(0) !default; // The inital transform state for the popover
$popover-active-transform-state: scale(1) translateZ(0) !default; // The transform state for the popover once it is fully activated
// OPTIONAL ELEMENTS
$popover-include-tooltip: true !default; // Adds a tooltip pointing to the footnote button
$popover-include-scroll-indicator: true !default; // Adds an elipsis at the bottom of scrollable popovers
$popover-include-scrolly-fades: true !default; // Fades content in on scrollable popovers
$popover-scroll-indicator-icon: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=") !default;
// OTHER VARIABLES
// =============================================================================
// POPOVER
$popover-margin-top: 0.1em !default;
$popover-padding-content-horizontal: 1.3em !default;
$popover-padding-content-top: 1.1em !default;
$popover-padding-content-bottom: 1.2em !default;
$popover-z-index: 10 !default; // Set the base so that it's above the other body children
$popover-initial-transform-origin: 50% 0 !default;
// POPOVER CONTENT WRAPPER
$popover-content-color-background: $popover-color-background !default;
$popover-content-border-radius: $popover-border-radius !default;
// OTHER POPOVER ELEMENTS
$popover-tooltip-background: $popover-color-background !default;
$popover-tooltip-radius: 0 !default;
$popover-scroll-indicator-bottom-position: 0.45em !default;
$popover-scrolly-fade-gradient-start-location: 50% !default;
$popover-scroll-indicator-padding: (($popover-padding-content-horizontal/2) - ($popover-scroll-indicator-width/2)) !default;
// TRANSITIONS
$popover-transition-default-duration: 0.25s !default;
$popover-scroll-indicator-transition-properties: opacity !default;
// Use none for areas you don't want to transition
$popover-transition-properties: opacity, transform !default; // no mixin to do proper prefixing of the transform, so I have to do it manually; see mixin below
$popover-scroll-indicator-transition-properties: opacity !default;
$popover-scroll-up-transition-delay: 0.4s !default; // Sets the delay for the transition of the scroll indicator when scrolling upwards
$popover-transition-default-timing-function: ease !default;
// ___ ___ ___
// _____ /__/\ ___ ___ / /\ /__/\
// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\
// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\
// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\
// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\
// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/
// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\
// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/
//
// These are the key variables for styling the button.
// Just set the variable to none if you don't want that styling.
// KEY VARIABLES
// =============================================================================
$button-height: 0.95em !default; // The total height of the button
$button-width: auto !default; // The total button width (applies only if $button-apply-dimensions is true)
$button-inner-circle-size: 0.25em !default; // Total height/width of the ellipsis circles
$button-border-radius: 0.3em !default; // Border radius on the button itself
$button-left-margin: 0.2em !default; // Margin between the button and the text to its left
$button-right-margin: 0.1em !default; // Margin between the button and the text to its right
$button-vertical-adjust: -0.1em !default; // Pushes the buttons along the vertical axis to align it with text as desired
$button-inner-circle-left-margin: 1*$button-inner-circle-size !default; // Space between the ellipsis circles
$button-color: rgb(110, 110, 110) !default; // Background color of the button
$button-hovered-color: $button-color !default; // Background color of the button when being hovered
$button-activating-color: $button-color !default; // Background color of the button when being clicked
$button-active-color: $button-color !default; // Background color of the button when active
$button-standard-opacity: 0.2 !default; // Opacity for when the button is just sittin' there
$button-hovered-opacity: 0.5 !default; // Opacity for when the button is being hovered over
$button-activating-opacity: $button-hovered-opacity !default; // Opacity for when the button is being clicked
$button-active-opacity: 1 !default; // Opacity for when the button is active
$button-active-style-delay: 0.1s !default; // Delay before applying .active styles; this can be used to match to the popover activation transition
$button-inner-circle-color: white !default; // Background color of the ellipsis circle
$button-inner-circle-border: none !default; // Border of the ellipsis circle
// OTHER VARIABLES
// =============================================================================
$button-total-padding: $button-height - $button-inner-circle-size !default;
$button-per-side-padding: 0.5*$button-total-padding !default;
$button-transition-properties: background-color !default;
// -----
// ___ ___ ___ ___
// /__/\ ___ /__/| ___ /__/\ / /\
// | |::\ / /\ | |:| / /\ \ \:\ / /:/_
// | |:|:\ / /:/ | |:| / /:/ \ \:\ / /:/ /\
// __|__|:|\:\ /__/::\ __|__|:| /__/::\ _____\__\:\ / /:/ /::\
// /__/::::| \:\\__\/\:\__/__/::::\____\__\/\:\__ /__/::::::::\/__/:/ /:/\:\
// \ \:\~~\__\/ \ \:\/\ ~\~~\::::/ \ \:\/\\ \:\~~\~~\/\ \:\/:/~/:/
// \ \:\ \__\::/ |~~|:|~~ \__\::/ \ \:\ ~~~ \ \::/ /:/
// \ \:\ /__/:/ | |:| /__/:/ \ \:\ \__\/ /:/
// \ \:\ \__\/ | |:| \__\/ \ \:\ /__/:/
// \__\/ |__|/ \__\/ \__\/
@mixin print-styles {
// These styles restore the original footnote numbers and texts when the page is printed
@media not print {
.footnote-print-only {
display: none !important;
}
}
@media print {
.bigfoot-footnote,
.bigfoot-footnote__button {
display: none !important;
}
}
}
// -----
// ___ ___ ___
// _____ /__/\ ___ ___ / /\ /__/\
// / /::\ \ \:\ / /\ / /\ / /::\ \ \:\
// / /:/\:\ \ \:\ / /:/ / /:/ / /:/\:\ \ \:\
// / /:/~/::\ ___ \ \:\ / /:/ / /:/ / /:/ \:\ _____\__\:\
// /__/:/ /:/\:|/__/\ \__\:\ / /::\ / /::\ /__/:/ \__\:\/__/::::::::\
// \ \:\/:/~/:/\ \:\ / /://__/:/\:\ /__/:/\:\\ \:\ / /:/\ \:\~~\~~\/
// \ \::/ /:/ \ \:\ /:/ \__\/ \:\\__\/ \:\\ \:\ /:/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\/:/ \ \:\
// \ \::/ \ \::/ \__\/ \__\/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/
//*
// The button that activates the footnote. By default, this will appear as a
// flat button that has an ellipse contained inside of it.
// @state .is-active - The associated popover has been activated and is visible.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__button {
// POSITIONING
position: relative;
z-index: 5;
top: $button-vertical-adjust;
// DISPLAY AND SIZING
box-sizing: border-box;
-moz-box-sizing: border-box;;
display: inline-block;
padding: $button-per-side-padding;
margin: 0 $button-right-margin 0 $button-left-margin;
// BACKDROP
border: none;
border-radius: $button-border-radius;
cursor: pointer;
background-color: rgba($button-color, $button-standard-opacity);
backface-visibility: hidden;
// TEXT
font-size: 1rem;
line-height: 0;
vertical-align: middle;
text-decoration: none;
-webkit-font-smoothing: antialiased;
// TRANSITIONS
transition-property: $button-transition-properties;
transition-duration: $popover-transition-default-duration;
&:hover,
&:focus {
outline: none;
background-color: rgba($button-hovered-color, $button-hovered-opacity);
}
&:active {
background-color: rgba($button-activating-color, $button-activating-opacity);
}
&.is-active {
background-color: rgba($button-active-color, $button-active-opacity);
transition-delay: $button-active-style-delay;
}
// Clearfix
&:after {
content: '';
display: table;
clear: both;
}
}
// _____ ___ ___
// / /::\ / /\ ___ / /\
// / /:/\:\ / /::\ / /\ / /:/_
// / /:/ \:\ / /:/\:\ / /:/ / /:/ /\
// /__/:/ \__\:| / /:/ \:\ / /:/ / /:/ /::\
// \ \:\ / /://__/:/ \__\:\ / /::\ /__/:/ /:/\:\
// \ \:\ /:/ \ \:\ / /://__/:/\:\\ \:\/:/~/:/
// \ \:\/:/ \ \:\ /:/ \__\/ \:\\ \::/ /:/
// \ \::/ \ \:\/:/ \ \:\\__\/ /:/
// \__\/ \ \::/ \__\/ /__/:/
// \__\/ \__\/
//*
// Each of the three circles forming the ellipse within the button.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__button__circle {
// DISPLAY AND SIZING
display: inline-block;
width: $button-inner-circle-size;
height: $button-inner-circle-size;
margin-right: $button-inner-circle-left-margin;
float: left;
// Gets rid of margin on the last circle
&:last-child { margin-right: 0; }
}
// ___ ___ ___ ___ ___
// / /\ / /\ /__/\ ___ / /\ ___ /__/\
// / /:/ / /::\ \ \:\ / /\ / /::\ / /\ \ \:\
// / /:/ / /:/\:\ \ \:\ / /:/ / /:/\:\ / /:/ \ \:\
// / /:/ ___ / /:/ \:\ _____\__\:\ / /:/ / /:/~/::\ /__/::\ _____\__\:\
// /__/:/ / /\/__/:/ \__\:\/__/::::::::\ / /::\ /__/:/ /:/\:\\__\/\:\__ /__/::::::::\
// \ \:\ / /:/\ \:\ / /:/\ \:\~~\~~\//__/:/\:\\ \:\/:/__\/ \ \:\/\\ \:\~~\~~\/
// \ \:\ /:/ \ \:\ /:/ \ \:\ ~~~ \__\/ \:\\ \::/ \__\::/ \ \:\ ~~~
// \ \:\/:/ \ \:\/:/ \ \:\ \ \:\\ \:\ /__/:/ \ \:\
// \ \::/ \ \::/ \ \:\ \__\/ \ \:\ \__\/ \ \:\
// \__\/ \__\/ \__\/ \__\/ \__\/
//*
// The container for the button and popover. This is required so that the popover
// is guaranteed to have a relatively-positioned container, and to help with the
// positioning calculation.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__container {
display: inline-block;
position: relative;
text-indent: 0;
}
// ___ ___ ___
// / /\ / /\ ___ /__/\ ___
// / /::\ / /::\ / /\ \ \:\ / /\
// / /:/\:\ / /:/\:\ / /:/ \ \:\ / /:/
// / /:/~/:// /:/~/:/ /__/::\ _____\__\:\ / /:/
// /__/:/ /://__/:/ /:/___\__\/\:\__ /__/::::::::\ / /::\
// \ \:\/:/ \ \:\/:::::/ \ \:\/\\ \:\~~\~~\//__/:/\:\
// \ \::/ \ \::/~~~~ \__\::/ \ \:\ ~~~ \__\/ \:\
// \ \:\ \ \:\ /__/:/ \ \:\ \ \:\
// \ \:\ \ \:\ \__\/ \ \:\ \__\/
// \__\/ \__\/ \__\/
@include print-styles;
// -----
// ___ ___ ___ ___ ___ ___
// / /\ / /\ / /\ / /\ ___ / /\ / /\
// / /::\ / /::\ / /::\ / /::\ /__/\ / /:/_ / /::\
// / /:/\:\ / /:/\:\ / /:/\:\ / /:/\:\ \ \:\ / /:/ /\ / /:/\:\
// / /:/~/:// /:/ \:\ / /:/~/:// /:/ \:\ \ \:\ / /:/ /:/_ / /:/~/:/
// /__/:/ /://__/:/ \__\:\/__/:/ /://__/:/ \__\:\ ___ \__\:\/__/:/ /:/ /\/__/:/ /:/___
// \ \:\/:/ \ \:\ / /:/\ \:\/:/ \ \:\ / /://__/\ | |:|\ \:\/:/ /:/\ \:\/:::::/
// \ \::/ \ \:\ /:/ \ \::/ \ \:\ /:/ \ \:\| |:| \ \::/ /:/ \ \::/~~~~
// \ \:\ \ \:\/:/ \ \:\ \ \:\/:/ \ \:\__|:| \ \:\/:/ \ \:\
// \ \:\ \ \::/ \ \:\ \ \::/ \__\::::/ \ \::/ \ \:\
// \__\/ \__\/ \__\/ \__\/ ~~~~ \__\/ \__\/
//
//*
// The popover for the footnote. This popover will be, by default, be sized and positioned
// by the script. However, many of the sizes can be established in this stylesheet and
// will be respected by the script. `max-width` will limit the width of the popover
// relative to the viewport. `width` (on `bigfoot-footnote__wrapper`) will set the
// absolute max width. Max height can be set via a `max-height` property
// on `bigfoot-footnote__content`.
// By default, the popover has a light gray background, a shadow for some depth,
// rounded corners, and a tooltip pointing to the footnote button.
// @state .is-active - The popover has been activated and is visible.
// @state .is-positioned-top - The popover is above the button.
// @state .is-positioned-bottom - The popover is below the button.
// @state .is-scrollable - The popover content is greater than the popover height.
// @state .is-fully-scrolled - The popover content is scrolled to the bottom.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote {
// POSITIONING
position: absolute;
z-index: $popover-z-index;
top: 0; left: 0;
// DISPLAY AND SIZING
display: inline-block;
box-sizing: border-box;
// Height is set in .footnote-content-wrapper
max-width: $popover-max-width;
// 1.414213... is to get the diagonal height of the tooltip using pythagorus, yo.
margin: ((1.4142135624 * $popover-tooltip-size / 2) + $button-height + $popover-margin-top) 0;
// fits the popover to the contents
// BACKDROP
background: $popover-color-background;
opacity: $popover-inactive-opacity;
border-radius: $popover-border-radius;
border: $popover-border;
box-shadow: $popover-box-shadow;
// TEXT
line-height: 0;
// TRANSITIONS
transition-property: $popover-transition-properties;
transition-duration: $popover-transition-default-duration;
transition-timing-function: $popover-transition-default-timing-function;
// TRANSFORMS
transform: $popover-initial-transform-state;
transform-origin: $popover-initial-transform-origin;
&.is-positioned-top {
top: auto;
bottom: 0;
}
&.is-active {
transform: $popover-active-transform-state;
opacity: $popover-active-opacity;
}
&.is-bottom-fixed {
// 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;
}
}
&.is-scrollable {
// A scrollable indicator in the left margin of the popover.
&:after {
// CONTENT
content: '';
// POSITIONING
position: absolute;
bottom: $popover-scroll-indicator-padding;
left: $popover-scroll-indicator-padding;
z-index: ($popover-z-index + 4);
// DISPLAY AND SIZING
display: block;
height: ($popover-scroll-indicator-width*$popover-scroll-indicator-aspect-ratio);
width: $popover-scroll-indicator-width;
// BACKDROP
background-image: $popover-scroll-indicator-icon;
background-size: cover;
opacity: $popover-scroll-indicator-opacity;
transition-properties: $popover-scroll-indicator-transition-properties;
transition-duration: $popover-transition-default-duration;
transition-timing-function: $popover-transition-default-timing-function;
}
.bigfoot-footnote__wrapper {
&:before,
&:after {
content: '';
position: absolute;
width: 100%;
// Above the content
z-index: ($popover-z-index + 2);
left: 0;
}
&:before {
top: -1px;
height: $popover-padding-content-top;
border-radius: $popover-border-radius $popover-border-radius 0 0;
background-image: linear-gradient(to bottom, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
}
&:after {
bottom: -1px;
height: $popover-padding-content-bottom;
border-radius: 0 0 $popover-border-radius $popover-border-radius;
background-image: linear-gradient(to top, $popover-color-background $popover-scrolly-fade-gradient-start-location, transparentize($popover-color-background, 1) 100%);
}
}
::-webkit-scrollbar { display: none; }
}
&.is-fully-scrolled {
&:after,
&:before {
opacity: 0;
transition-delay: 0;
}
}
}
//*
// Wraps around the footnote content. This is necessary in order to have an element
// above the tooltip and that can provide top and bottom indicators that there is
// additional content on scrollable popovers.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__wrapper {
// POSITIONING
position: relative;
// Above the outer tooltip, below the inner tooltip
z-index: ($popover-z-index + 4);
// DISPLAY AND SIZING
width: $popover-width;
display: inline-block;
box-sizing: inherit;
overflow: hidden;
margin: 0;
// BACKDROP
background-color: $popover-color-background;
border-radius: $popover-border-radius;
// TEXT
line-height: 0;
}
//*
// Contains the actual footnote content. There is very little prescription here
// on the footnote content itself, except for removing and top margin on the first
// element and bottom margin on the last child.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__content {
// POSITIONING
position: relative;
z-index: ($popover-z-index - 2); // Below fading bars
// DISPLAY AND SIZING
display: inline-block;
max-height: $popover-max-height;
padding: $popover-padding-content-top $popover-padding-content-horizontal $popover-padding-content-bottom;
box-sizing: inherit;
overflow: auto;
-webkit-overflow-scrolling: touch;
// BACKDROP
background: $popover-content-color-background;
border-radius: $popover-content-border-radius;
// TEXT
-webkit-font-smoothing: subpixel-antialiased;
line-height: normal;
// INTERIOR ELEMENTS
img { max-width: 100%; }
*:last-child { margin-bottom: 0 !important; }
*:first-child { margin-top: 0 !important; }
}
//*
// A triangular shape pointing towards the footnote button.
// @since 2.1.0
// @author Chris Sauve
.bigfoot-footnote__tooltip {
// POSITIONING
position: absolute;
// Above the footnote-main-wrapper and the outer tooltip
z-index: ($popover-z-index + 2);
// DISPLAY AND SIZING
box-sizing: border-box;
margin-left: (-0.5 * $popover-tooltip-size);
// Smaller by one border-width's worth
width: $popover-tooltip-size;
height: $popover-tooltip-size;
transform: rotate(45deg);
// BACKDROP
background: $popover-tooltip-background;
border: $popover-border;
box-shadow: $popover-box-shadow;
border-top-left-radius: $popover-tooltip-radius;
.is-positioned-bottom & {
top: (-0.5 * $popover-tooltip-size);
}
.is-positioned-top & {
bottom: (-0.5 * $popover-tooltip-size);
}
}