Skip to content

Commit

Permalink
Convert mixin vars to pixels
Browse files Browse the repository at this point in the history
  • Loading branch information
@AshesOfOwls
AshesOfOwls committed Dec 17, 2018
1 parent 114aa9b commit 84dc1c3
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
2 changes: 1 addition & 1 deletion dist/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2973,7 +2973,7 @@ exports = module.exports = __webpack_require__(20)(false);


// module
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", ""]);
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", ""]);

// exports

Expand Down
7 changes: 7 additions & 0 deletions src/styles/_mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,13 @@
$arrow_middle: $arrow / 2;
$content_offset: $arrow_middle + $content_offset;


// Conver to pixels
$arrow: $arrow + 0px;
$content_offset: $arrow + 0px;
$arrow_offset: $arrow + 0px;
$attachment_margin: $arrow + 0px;

@include popoverjs-arrows($arrow, $arrow_middle);
@include popoverjs-positioning($attachment_margin, $arrow_offset, $content_offset, $arrow_middle);
}

0 comments on commit 84dc1c3

Please sign in to comment.