/*******************************
Popup
*******************************/
/*——————-
Element
——————–*/
@zIndex: 900; @background: @white;
@maxWidth: 250px; @borderColor: CCCCCC; @borderWidth: 1px; @boxShadow: 0px 2px 4px rgba(0, 0, 0, 0.1); @color: @textColor;
@verticalPadding: 0.833em; @horizontalPadding: 1em; @fontWeight: normal; @fontStyle: normal; @borderRadius: @defaultBorderRadius;
/*——————-
Parts
——————–*/
/* Placement */ @arrowSize: 0.75em; @arrowWidth: 1em; @arrowDistanceFromEdge: 1em; @boxArrowOffset: 0em; @popupDistanceAway: @arrowSize;
/* Header */ @headerFontFamily: @headerFont; @headerFontSize: 1.125em; @headerDistance: 0.5em; @headerLineHeight: 1.2;
/* Content Border */ @border: @borderWidth solid @borderColor;
/* Arrow */ @arrowBackground: @white; @arrowZIndex: 2; @arrowJitter: 0.05em; @arrowOffset: -(@arrowSize / 2) + @arrowJitter;
@arrowStroke: @borderWidth; @arrowColor: darken(@borderColor, 10);
@arrowBoxShadow: @arrowStroke @arrowStroke 0px 0px @arrowColor; @leftArrowBoxShadow: @arrowStroke -@arrowStroke 0px 0px @arrowColor; @rightArrowBoxShadow: -@arrowStroke @arrowStroke 0px 0px @arrowColor; @bottomArrowBoxShadow: -@arrowStroke -@arrowStroke 0px 0px @arrowColor;
/*——————-
Coupling
——————–*/
/* (padding * @medium) */ @nestedGridMargin: -0.7rem -0.875rem; @nestedGridWidth: ~“calc(100% + 1.75rem)”;
/*——————-
States
——————–*/
@loadingZIndex: -1;
/*——————-
Variations
——————–*/
/* Wide */ @wideWidth: 350px; @veryWideWidth: 550px;
/* Inverted */ @invertedBackground: @black; @invertedColor: @white; @invertedBorder: none; @invertedBoxShadow: none;
@invertedHeaderBackground: none; @invertedHeaderColor: @white; @invertedArrowColor: @black;
/* Sizes */ @small: 0.785714rem; @medium: 0.85714rem; @large: 1rem; @huge: 1.14285rem;