/******************************* Popup *******************************/ /*------------------- Element --------------------*/ @zIndex: 1900; @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 --------------------*/ /* Grid Inside Popup */ @nestedGridMargin: -0.7rem -0.875rem; /* (padding * @medium) */ @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;