Skip to content

Commit

Permalink
Add display:none as beginning popover property
Browse files Browse the repository at this point in the history
  • Loading branch information
Scott Elwood authored and Scott Elwood committed Sep 21, 2017
1 parent 4f9215c commit 00dd260
Show file tree
Hide file tree
Showing 3 changed files with 3 additions and 7 deletions.
5 changes: 1 addition & 4 deletions dist/popover.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1412,12 +1412,9 @@ var Positioner = function () {
className += ' ' + this.options.customClass;
}

console.log('IS THERE AN ACUTALY ASDSD', this.options.classes.theme);

if (this.options.classes.theme) {
className += ' ' + this.options.classes.theme;
}
console.log("CLASS NAME TURNS OUT TO BE", className);

this.popoverElement.className = className;
}
Expand Down Expand Up @@ -2234,7 +2231,7 @@ exports = module.exports = __webpack_require__(12)(undefined);


// 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 pointer-events: all;\n position: absolute;\n visibility: hidden;\n width: 1px; }\n .popoverjs.popoverjs--is-visible {\n visibility: visible; }\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 position: relative; }\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: -8px; }\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: -8px;\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: -8px;\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: -8px; }\n .popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow:after {\n margin-left: 4px; }\n\n.popoverjs--default.popoverjs--attachment-primary-bottom {\n bottom: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top {\n top: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-right {\n right: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-left {\n left: -3px; }\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 display: none;\n height: 1px;\n pointer-events: all;\n position: absolute;\n visibility: hidden;\n width: 1px; }\n .popoverjs.popoverjs--is-visible {\n display: block;\n visibility: visible; }\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 position: relative; }\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: -8px; }\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: -8px;\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: -8px;\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: -8px; }\n .popoverjs--default.popoverjs--popover-primary-left > .popoverjs-arrow:after {\n margin-left: 4px; }\n\n.popoverjs--default.popoverjs--attachment-primary-bottom {\n bottom: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-top {\n top: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-right {\n right: -3px; }\n\n.popoverjs--default.popoverjs--attachment-primary-left {\n left: -3px; }\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

Expand Down
3 changes: 0 additions & 3 deletions src/positioner.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -225,12 +225,9 @@ class Positioner {
className += ` ${this.options.customClass}`;
}

console.log('IS THERE AN ACUTALY ASDSD', this.options.classes.theme);

if (this.options.classes.theme) {
className += ` ${this.options.classes.theme}`;
}
console.log("CLASS NAME TURNS OUT TO BE", className);

this.popoverElement.className = className;
}
Expand Down
2 changes: 2 additions & 0 deletions src/styles/_main.scss
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,15 @@
@import '_mixin';

.popoverjs {
display: none;
height: 1px;
pointer-events: all;
position: absolute;
visibility: hidden;
width: 1px;

&.popoverjs--is-visible {
display: block;
visibility: visible;
}

Expand Down

0 comments on commit 00dd260

Please sign in to comment.