Skip to content

Commit 84dc1c3

Browse files
committed
Convert mixin vars to pixels
1 parent 114aa9b commit 84dc1c3

File tree

2 files changed

+8
-1
lines changed

2 files changed

+8
-1
lines changed

dist/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2973,7 +2973,7 @@ exports = module.exports = __webpack_require__(20)(false);
29732973

29742974

29752975
// module
2976-
exports.push([module.i, "/**\n * Local Variables\n *\n * $arrow_hypotenuse_to_side_ratio:\n * The $arrow_hypotenuse_to_side_ratio is important and should not be changed.\n * In order to get an arrow, we are currently hacking it to be a square rotated\n * at a 45 degree angle, and cut off via parent container overflow. Because we\n * can only control the height/width of a box, setting the size of the arrow\n * becomes difficult when it is rotated (Because the diagnol hypotenuse within\n * a box is longer than its sides). To fix this, we can instead take the size\n * which would be the hypotenuse and convert that to be the correct side\n * length for the box. Since we are dealing with equal length sides, the .707\n * will be consistent enough for that conversion.\n */\n.popoverjs {\n height: 1px;\n overflow: hidden;\n pointer-events: all;\n position: absolute;\n visibility: hidden;\n width: 1px;\n z-index: 999; }\n .popoverjs.popoverjs--is-open {\n overflow: visible; }\n .popoverjs.popoverjs--is-visible {\n visibility: visible; }\n .popoverjs:not(.popoverjs--is-visible) * {\n pointer-events: none; }\n .popoverjs-arrow:after {\n background-color: #ffffff; }\n .popoverjs-content {\n background-color: white;\n box-sizing: border-box;\n position: absolute; }\n .popoverjs--detached-container {\n position: absolute;\n pointer-events: none; }\n .popoverjs--wrapper {\n display: inline-block;\n pointer-events: none;\n position: relative; }\n .popoverjs--wrapper > * {\n pointer-events: all; }\n .popoverjs--expanded-wrapper {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0; }\n\n.popoverjs--default > .popoverjs-arrow {\n overflow: hidden;\n position: absolute;\n z-index: 5; }\n\n.popoverjs--default > .popoverjs-arrow:after {\n content: \"\";\n position: absolute;\n width: 11.312px;\n height: 11.312px;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 50%;\n left: 50%; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow,\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow {\n left: -8px;\n height: 8px;\n width: 16px; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow {\n bottom: auto;\n top: -9px; }\n .popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow:after {\n margin-top: -4px; }\n\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow {\n bottom: -9px;\n top: auto; }\n .popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow:after {\n margin-top: 4px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow,\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow {\n bottom: -8px;\n height: 16px;\n width: 8px; }\n\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow {\n left: -9px;\n right: auto; }\n .popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow:after {\n margin-left: -4px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow {\n left: auto;\n right: -9px; }\n .popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow:after {\n margin-left: 4px; }\n\n.popoverjs--default.popoverjs--attachment-primary-bottom {\n bottom: 0px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top {\n top: 0px; }\n\n.popoverjs--default.popoverjs--attachment-primary-right {\n right: 0px; }\n\n.popoverjs--default.popoverjs--attachment-primary-left {\n left: 0px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-bottom {\n bottom: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-top {\n top: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-right {\n right: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-left {\n left: 16px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-bottom.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-top.popoverjs--attachment-secondary-center, .popoverjs--default.popoverjs--attachment-primary-bottom.popoverjs--attachment-secondary-center {\n left: 50%; }\n\n.popoverjs--default.popoverjs--attachment-primary-left.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-right.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-left.popoverjs--attachment-secondary-center, .popoverjs--default.popoverjs--attachment-primary-right.popoverjs--attachment-secondary-center {\n top: 50%; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-content {\n bottom: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-content {\n top: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-content {\n right: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-content {\n left: 9px; }\n\n.popoverjs--default.popoverjs--popover-secondary-bottom > .popoverjs-content {\n margin-top: 18px;\n transform: translateY(-100%); }\n\n.popoverjs--default.popoverjs--popover-secondary-top > .popoverjs-content {\n margin-top: -18px;\n transform: translateY(0%); }\n\n.popoverjs--default.popoverjs--popover-secondary-right > .popoverjs-content {\n right: -18px; }\n\n.popoverjs--default.popoverjs--popover-secondary-left > .popoverjs-content {\n left: -18px; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-top.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-bottom.popoverjs--popover-secondary-center > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-top.popoverjs--popover-secondary-center > .popoverjs-content {\n left: 0;\n transform: translateX(-50%); }\n\n.popoverjs--default.popoverjs--popover-primary-left.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-right.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-left.popoverjs--popover-secondary-center > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-right.popoverjs--popover-secondary-center > .popoverjs-content {\n top: 0;\n transform: translateY(-50%); }\n", ""]);
2976+
exports.push([module.i, "/**\n * Local Variables\n *\n * $arrow_hypotenuse_to_side_ratio:\n * The $arrow_hypotenuse_to_side_ratio is important and should not be changed.\n * In order to get an arrow, we are currently hacking it to be a square rotated\n * at a 45 degree angle, and cut off via parent container overflow. Because we\n * can only control the height/width of a box, setting the size of the arrow\n * becomes difficult when it is rotated (Because the diagnol hypotenuse within\n * a box is longer than its sides). To fix this, we can instead take the size\n * which would be the hypotenuse and convert that to be the correct side\n * length for the box. Since we are dealing with equal length sides, the .707\n * will be consistent enough for that conversion.\n */\n.popoverjs {\n height: 1px;\n overflow: hidden;\n pointer-events: all;\n position: absolute;\n visibility: hidden;\n width: 1px;\n z-index: 999; }\n .popoverjs.popoverjs--is-open {\n overflow: visible; }\n .popoverjs.popoverjs--is-visible {\n visibility: visible; }\n .popoverjs:not(.popoverjs--is-visible) * {\n pointer-events: none; }\n .popoverjs-arrow:after {\n background-color: #ffffff; }\n .popoverjs-content {\n background-color: white;\n box-sizing: border-box;\n position: absolute; }\n .popoverjs--detached-container {\n position: absolute;\n pointer-events: none; }\n .popoverjs--wrapper {\n display: inline-block;\n pointer-events: none;\n position: relative; }\n .popoverjs--wrapper > * {\n pointer-events: all; }\n .popoverjs--expanded-wrapper {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0; }\n\n.popoverjs--default > .popoverjs-arrow {\n overflow: hidden;\n position: absolute;\n z-index: 5; }\n\n.popoverjs--default > .popoverjs-arrow:after {\n content: \"\";\n position: absolute;\n width: 11.312px;\n height: 11.312px;\n transform: translateX(-50%) translateY(-50%) rotate(45deg);\n top: 50%;\n left: 50%; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow,\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow {\n left: -8px;\n height: 8px;\n width: 16px; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow {\n bottom: auto;\n top: -9px; }\n .popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-arrow:after {\n margin-top: -4px; }\n\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow {\n bottom: -9px;\n top: auto; }\n .popoverjs--default.popoverjs--popover-primary-top > .popoverjs-arrow:after {\n margin-top: 4px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow,\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow {\n bottom: -8px;\n height: 16px;\n width: 8px; }\n\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow {\n left: -9px;\n right: auto; }\n .popoverjs--default.popoverjs--popover-primary-right > .popoverjs-arrow:after {\n margin-left: -4px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow {\n left: auto;\n right: -9px; }\n .popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow:after {\n margin-left: 4px; }\n\n.popoverjs--default.popoverjs--attachment-primary-bottom {\n bottom: 16px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top {\n top: 16px; }\n\n.popoverjs--default.popoverjs--attachment-primary-right {\n right: 16px; }\n\n.popoverjs--default.popoverjs--attachment-primary-left {\n left: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-bottom {\n bottom: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-top {\n top: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-right {\n right: 16px; }\n\n.popoverjs--default.popoverjs--attachment-secondary-left {\n left: 16px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-bottom.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-top.popoverjs--attachment-secondary-center, .popoverjs--default.popoverjs--attachment-primary-bottom.popoverjs--attachment-secondary-center {\n left: 50%; }\n\n.popoverjs--default.popoverjs--attachment-primary-left.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-right.popoverjs--attachment-secondary-middle, .popoverjs--default.popoverjs--attachment-primary-left.popoverjs--attachment-secondary-center, .popoverjs--default.popoverjs--attachment-primary-right.popoverjs--attachment-secondary-center {\n top: 50%; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom > .popoverjs-content {\n bottom: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-top > .popoverjs-content {\n top: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-right > .popoverjs-content {\n right: 9px; }\n\n.popoverjs--default.popoverjs--popover-primary-left > .popoverjs-content {\n left: 9px; }\n\n.popoverjs--default.popoverjs--popover-secondary-bottom > .popoverjs-content {\n margin-top: 16px;\n transform: translateY(-100%); }\n\n.popoverjs--default.popoverjs--popover-secondary-top > .popoverjs-content {\n margin-top: -16px;\n transform: translateY(0%); }\n\n.popoverjs--default.popoverjs--popover-secondary-right > .popoverjs-content {\n right: -16px; }\n\n.popoverjs--default.popoverjs--popover-secondary-left > .popoverjs-content {\n left: -16px; }\n\n.popoverjs--default.popoverjs--popover-primary-bottom.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-top.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-bottom.popoverjs--popover-secondary-center > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-top.popoverjs--popover-secondary-center > .popoverjs-content {\n left: 0;\n transform: translateX(-50%); }\n\n.popoverjs--default.popoverjs--popover-primary-left.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-right.popoverjs--popover-secondary-middle > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-left.popoverjs--popover-secondary-center > .popoverjs-content,\n.popoverjs--default.popoverjs--popover-primary-right.popoverjs--popover-secondary-center > .popoverjs-content {\n top: 0;\n transform: translateY(-50%); }\n", ""]);
29772977

29782978
// exports
29792979

src/styles/_mixin.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
$arrow_middle: $arrow / 2;
66
$content_offset: $arrow_middle + $content_offset;
77

8+
9+
// Conver to pixels
10+
$arrow: $arrow + 0px;
11+
$content_offset: $arrow + 0px;
12+
$arrow_offset: $arrow + 0px;
13+
$attachment_margin: $arrow + 0px;
14+
815
@include popoverjs-arrows($arrow, $arrow_middle);
916
@include popoverjs-positioning($attachment_margin, $arrow_offset, $content_offset, $arrow_middle);
1017
}

0 commit comments

Comments
 (0)